๋ฐœํ–‰์ผ:

์ˆ˜์ •์ผ:

์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค ๋งํฌ ๋•Œ๋ฌธ์— ๋ธ”๋กœ๊ทธ ์ €ํ’ˆ์งˆ? ์•ˆ์ „ํ•˜๊ฒŒ ๋‹จ์ถ• ์ฝ”๋“œ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•

์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค ๋งํฌ ๋•Œ๋ฌธ์— ๋ธ”๋กœ๊ทธ ์ €ํ’ˆ์งˆ ๊ฑฑ์ •๋˜๋‚˜์š”? ๋‹จ์ถ• ์ฝ”๋“œ์™€ JSON ๊ธฐ๋ฐ˜ ๋ฒ„ํŠผ ์—ฐ๊ฒฐ๋กœ ์•ˆ์ „ํ•˜๊ฒŒ ๋งํฌ ๊ด€๋ฆฌํ•˜๊ณ  ๊ฒ€์ƒ‰ ์—”์ง„ ํ’ˆ์งˆ์„ ์ง€ํ‚ค๋Š” ๋ฐฉ๋ฒ•์„ ์ž์„ธํžˆ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.


๋ธ”๋กœ๊ทธ ์šด์˜์ž๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ํ•œ ๋ฒˆ์ฏค ๊ฒช๋Š” ๋ฌธ์ œ, ๋ฐ”๋กœ ์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค ๋งํฌ๋ฅผ ๊ทธ๋Œ€๋กœ ๊ฒŒ์‹œํ–ˆ๋‹ค๊ฐ€ ์ €ํ’ˆ์งˆ๋กœ ํ‰๊ฐ€๋˜๋Š” ์ƒํ™ฉ์ž…๋‹ˆ๋‹ค. ๊ฒ€์ƒ‰ ์—”์ง„์€ ๋‹จ์ˆœํžˆ ์ƒํ’ˆ ๋งํฌ๋งŒ ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ์ฝ˜ํ…์ธ ๊ฐ€ ๋ถ€์กฑํ•˜๋‹ค๊ณ  ํŒ๋‹จํ•˜๊ฑฐ๋‚˜, ์™ธ๋ถ€ ๋งํฌ ๊ตฌ์กฐ๊ฐ€ ์ž˜๋ชป๋˜๋ฉด ์‹ ๋ขฐ๋„๋ฅผ ๋‚ฎ๊ฒŒ ํ‰๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ๊ฒ€์ƒ‰ ํ’ˆ์งˆ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์ฟ ํŒก ๋งํฌ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋ธ”๋กœ๊ทธ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? ์˜ค๋Š˜์€ ๋‹จ์ถ• ์ฝ”๋“œ์™€ JSON ๊ธฐ๋ฐ˜ ๋ฒ„ํŠผ ์—ฐ๊ฒฐ์„ ํ™œ์šฉํ•œ ์•ˆ์ „ํ•œ ๋ฐฉ๋ฒ•์„ ์ž์„ธํžˆ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.


์ €ํ’ˆ์งˆ ๋ธ”๋กœ๊ทธ๊ฐ€ ๋˜๋Š” ์ด์œ 

  1. ์ฟ ํŒก ๋งํฌ๋งŒ ๋‚˜์—ด:
    ๋ณธ๋ฌธ์— ๋‹จ์ˆœํžˆ ์ƒํ’ˆ ๋ณด๊ธฐ ๋งํฌ๋งŒ ์žˆ๋‹ค๋ฉด, ๊ฒ€์ƒ‰ ์—”์ง„ ์ž…์žฅ์—์„œ๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ๋ถ€์กฑํ•˜๋‹ค๊ณ  ํŒ๋‹จํ•ฉ๋‹ˆ๋‹ค.
  2. ์ง์ ‘ ๋งํฌ ์‚ฌ์šฉ:
    ์ฟ ํŒก ์ƒํ’ˆ URL์„ ๊ทธ๋Œ€๋กœ ๋„ฃ์œผ๋ฉด, ๊ฒ€์ƒ‰ ์—”์ง„์ด ์™ธ๋ถ€ ํŽ˜์ด์ง€๋กœ ์œ ๋„๋˜๋Š” ํŽ˜์ด์ง€๋ฅผ ์ €ํ’ˆ์งˆ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

JSON ํŒŒ์ผ์ด๋ž€?

JSON์€ JavaScript Object Notation์˜ ์ค„์ž„๋ง๋กœ, ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ๊ฒฝ๋Ÿ‰ ๋ฐ์ดํ„ฐ ํฌ๋งท์ž…๋‹ˆ๋‹ค.

์‰ฝ๊ฒŒ ๋งํ•ด, ๋ฐ์ดํ„ฐ๋ฅผ ํ…์ŠคํŠธ๋กœ ํ‘œํ˜„ํ•˜๋Š” ํ‘œ์ค€ ํ˜•์‹์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
์‚ฌ๋žŒ์ด ์ฝ๊ธฐ ์‰ฝ๊ณ , ์ปดํ“จํ„ฐ๊ฐ€ ์ฒ˜๋ฆฌํ•˜๊ธฐ์—๋„ ํŽธ๋ฆฌํ•œ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ์›น ๊ฐœ๋ฐœ์—์„œ ๋„๋ฆฌ ์“ฐ์ž…๋‹ˆ๋‹ค.

์˜ˆ์‹œ(JSON ํŒŒ์ผ ๋‚ด์šฉ)

{
"name": "ํ™๊ธธ๋™",
"age": 30,
"hobby": "๋“ฑ์‚ฐ"
}

์•ˆ์ „ํ•˜๊ฒŒ ์ฟ ํŒก ๋งํฌ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•

1. JSON ํŒŒ์ผ + ๋‹จ์ถ• ์ฝ”๋“œ ํ™œ์šฉ

  • ์ฟ ํŒก ๋งํฌ๋ฅผ ๋ฐ”๋กœ HTML์— ๋„ฃ์ง€ ์•Š๊ณ  JSON ํŒŒ์ผ๋กœ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ ์ƒํ’ˆ์— ๋‹จ์ถ• ์ฝ”๋“œ๋ฅผ ์ง€์ •ํ•˜๊ณ , ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ JSON์—์„œ URL์„ ์ฐพ์•„ ์—ฐ๊ฒฐํ•˜๋„๋ก ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์‹œ JSON (urls.json):

๋ธ”๋กœ๊ทธ์—์„œ ์ฟ ํŒก ์ƒํ’ˆ ๋งํฌ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•˜๋ ค๋ฉด, ๋‹จ์ถ• ์ฝ”๋“œ์™€ URL์„ JSON ํŒŒ์ผ์— ๋งคํ•‘ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.
์•„๋ž˜์™€ ๊ฐ™์€ ํ˜•ํƒœ๋กœ JSON ํŒŒ์ผ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

{
"abc001": "https://link.coupang.com/a/cSQgTS",
"abc002": "http://copun.com/xyz12",
"abc003": "http://copun.com/123ab"
}

์„ค๋ช…

๋‹จ์ถ• ์ฝ”๋“œ(abc001 ๋“ฑ) ๊ด€๋ฆฌ

  • "abc001"๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋Š” ๋ธ”๋กœ๊ทธ ์šด์˜์ž๊ฐ€ ์ง์ ‘ ์ •์˜ํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์˜ˆ๋ฅผ ๋“ค์–ด, ์ƒํ’ˆ ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„, ํ…Œ๋งˆ๋ณ„๋กœ ์ฝ”๋“œ๋ฅผ ์ •๋ฆฌํ•˜๋ฉด ๊ด€๋ฆฌ๊ฐ€ ํ›จ์”ฌ ํŽธ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

URL๊ณผ ๋‹จ์ถ• ์ฝ”๋“œ ์—ฐ๊ฒฐ

  • JSON์˜ ํ‚ค๋Š” ๋‹จ์ถ• ์ฝ”๋“œ, ๊ฐ’์€ ์‹ค์ œ ์ฟ ํŒก ์ƒํ’ˆ URL์ž…๋‹ˆ๋‹ค.
  • ์ด ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด HTML์— ์ง์ ‘ ๊ธด URL์„ ์‚ฝ์ž…ํ•˜์ง€ ์•Š๊ณ , ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ JSON์„ ์ฐธ์กฐํ•ด ์•ˆ์ „ํ•˜๊ฒŒ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

JSON ํŒŒ์ผ ์œ„์น˜

  • ์ž‘์„ฑํ•œ JSON ํŒŒ์ผ์€ ํ‹ฐ์Šคํ† ๋ฆฌ ์„œ๋ฒ„ ์—…๋กœ๋“œ, GitHub, ๋˜๋Š” ์™ธ๋ถ€ ์„œ๋ฒ„์— ์œ„์น˜์‹œ์ผœ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์›น์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋ฉด, JavaScript๋ฅผ ํ†ตํ•ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๊ณ  ๋ฒ„ํŠผ๊ณผ ๋งคํ•‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  1. ๊ด€๋ฆฌ ํŽธ์˜์„ฑ
    • ์ƒˆ ์ƒํ’ˆ์ด ์ถ”๊ฐ€๋˜๊ฑฐ๋‚˜ ๋งํฌ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด, JSON ํŒŒ์ผ๋งŒ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ๋ธ”๋กœ๊ทธ ๋‚ด ๋ชจ๋“  ๋ฒ„ํŠผ์— ์ž๋™์œผ๋กœ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค.
    • HTML ์ฝ”๋“œ๋ฅผ ์ผ์ผ์ด ์ˆ˜์ •ํ•  ํ•„์š” ์—†์ด, ๋ฐ์ดํ„ฐ ์ค‘์‹ฌ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2. HTML + JavaScript ์ฝ”๋“œ ์˜ˆ์‹œ

์ฟ ํŒก ์ƒํ’ˆ ๋งํฌ๋ฅผ ๋ธ”๋กœ๊ทธ์— ์•ˆ์ „ํ•˜๊ฒŒ ๋…ธ์ถœํ•˜๋ ค๋ฉด, ๋‹จ์ถ• ์ฝ”๋“œ ๋ฒ„ํŠผ๊ณผ JSON ๋ฐ์ดํ„ฐ ๋งคํ•‘ ๋ฐฉ์‹์„ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค.
์•„๋ž˜ ์˜ˆ์‹œ๋Š” ์ƒํ’ˆ์ด ๋…ธ์ถœ๋˜๋Š” ์ฝ˜ํ…์ธ  ์˜์—ญ์— ๋ฒ„ํŠผ์„ ์ถ”๊ฐ€ํ•˜๊ณ , HTML/Body ํ•˜๋‹จ์— JavaScript ์ฝ”๋“œ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

p
button class="short-link" data-code="abc001"์ƒํ’ˆ ๋ณด๊ธฐ/button
button class="short-link" data-code="abc002"์ƒํ’ˆ ๋ณด๊ธฐ/button
button class="short-link" data-code="abc003"์ƒํ’ˆ ๋ณด๊ธฐ/button
/p

script
const urlMap = {};
const jsonUrl = "https://tistory1.daumcdn.net/tistory/7331789/skin/images/urls.json";

fetch(jsonUrl)
.then(res = res.json())
.then(data = Object.assign(urlMap, data))
.catch(err = console.error("JSON ๋กœ๋“œ ์‹คํŒจ:", err));

document.body.addEventListener('click', e = {
const btn = e.target.closest('button.short-link');
if (!btn) return;

const code = btn.dataset.code;
const url = urlMap[code];

if (url) window.open(url, '_blank');
else alert("URL์ด ์—†์Šต๋‹ˆ๋‹ค. JSON ๋ฐ์ดํ„ฐ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.");
});
/script
  • ๋ฒ„ํŠผ์˜ data-code๋Š” JSON์˜ ํ‚ค์™€ ์ผ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ง์ ‘ ์ฟ ํŒก ๋งํฌ๋ฅผ ๋…ธ์ถœํ•˜์ง€ ์•Š๊ณ , ๋‹จ์ถ• ์ฝ”๋“œ๋กœ ์•ˆ์ „ํ•˜๊ฒŒ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒํ’ˆ ๋ณด๊ธฐ ๋ฒ„ํŠผ๊ณผ ์—ฐ๊ฒฐ

  • data-code ์†์„ฑ: JSON ํŒŒ์ผ์— ์ •์˜๋œ ๋‹จ์ถ• ์ฝ”๋“œ์™€ ๋ฐ˜๋“œ์‹œ ์ผ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฒ„ํŠผ ํ…์ŠคํŠธ: ํ•„์š”์— ๋”ฐ๋ผ ์ƒํ’ˆ ๋ณด๊ธฐ ๋Œ€์‹  ์ž์„ธํžˆ ๋ณด๊ธฐ ๋“ฑ์œผ๋กœ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•˜์—ฌ, ๋ธ”๋กœ๊ทธ ์Šคํƒ€์ผ์— ๋งž๊ฒŒ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
button class="short-link" data-code="abc001"์ƒํ’ˆ ๋ณด๊ธฐ/button
  • ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ, JavaScript๊ฐ€ data-code="abc001"์„ ์ฝ์–ด JSON์—์„œ ํ•ด๋‹น URL์„ ์ฐพ์•„ ์ƒˆ ์ฐฝ์œผ๋กœ ์—ด์–ด์ค๋‹ˆ๋‹ค.

์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ์ง์ ‘ ์ฟ ํŒก ๋งํฌ๋ฅผ ๋…ธ์ถœํ•˜์ง€ ์•Š์•„๋„ ๋˜๋ฉฐ, ๊ฒ€์ƒ‰ ์—”์ง„์ด ์ฝ˜ํ…์ธ ๋ฅผ ์ถฉ๋ถ„ํžˆ ํ‰๊ฐ€ํ•  ์ˆ˜ ์žˆ์–ด ๋ธ”๋กœ๊ทธ ์ €ํ’ˆ์งˆ ์œ„ํ—˜๋„ ๋‚ฎ์ถœ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3. ์žฅ์ 

  1. ๊ฒ€์ƒ‰ ํ’ˆ์งˆ ์œ ์ง€:
    ์ฟ ํŒก ๋งํฌ๋ฅผ ์ง์ ‘ ๋…ธ์ถœํ•˜์ง€ ์•Š๊ณ , ๋ฒ„ํŠผ๊ณผ JSON์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉด ๊ฒ€์ƒ‰ ์—”์ง„์ด ์ฝ˜ํ…์ธ ๋ฅผ ์ถฉ๋ถ„ํžˆ ํ‰๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  2. ๊ด€๋ฆฌ ํŽธ๋ฆฌ:
    JSON ํŒŒ์ผ๋งŒ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ๋ธ”๋กœ๊ทธ์— ์‚ฝ์ž…๋œ ๋ชจ๋“  ๋ฒ„ํŠผ์ด ์ž๋™์œผ๋กœ ์ตœ์‹  ๋งํฌ๋ฅผ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.
  3. ๋ณด์•ˆ์„ฑ ๊ฐ•ํ™”:
    ์ง์ ‘ URL์ด HTML์— ๋…ธ์ถœ๋˜์ง€ ์•Š์•„, ์™ธ๋ถ€ ์ŠคํŒธ์ด๋‚˜ ์ž๋™ ํฌ๋กค๋Ÿฌ๋กœ๋ถ€ํ„ฐ ๋ณดํ˜ธ๋ฉ๋‹ˆ๋‹ค.
์ฟ ํŒก ์ƒํ’ˆ ๋งํฌ ์ €ํ’ˆ์งˆ ๋Œ€์‘ ๋ฐฉ๋ฒ•

4. ์ฃผ์˜์‚ฌํ•ญ

  • JSON ํŒŒ์ผ์˜ ํ˜•์‹์„ ์ •ํ™•ํ•˜๊ฒŒ ์œ ์ง€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฒ„ํŠผ data-code์™€ JSON ํ‚ค๊ฐ€ ์ผ์น˜ํ•ด์•ผ ์ •์ƒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
  • ์ œ๊ณตํ•œ JSON URL์ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ์ง€ ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • 100% ๋ณด์žฅ์€ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.JSON์˜ ์ทจ์•ฝ์ ๋„ ์กด์žฌ

์š”์•ฝ

  • ์ฟ ํŒก ์ƒํ’ˆ ๋งํฌ๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๋ฉด ๋ธ”๋กœ๊ทธ๊ฐ€ ์ €ํ’ˆ์งˆ๋กœ ํ‰๊ฐ€๋  ์ˆ˜ ์žˆ์Œ.
  • ๋‹จ์ถ• ์ฝ”๋“œ + JSON + ๋ฒ„ํŠผ ํด๋ฆญ ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ์ „ํ•˜๊ฒŒ ๋งํฌ ๊ด€๋ฆฌ ๊ฐ€๋Šฅ.
  • ๊ฒ€์ƒ‰ ์—”์ง„ ํ’ˆ์งˆ ์œ ์ง€, ๊ด€๋ฆฌ ํŽธ๋ฆฌ, ๋ณด์•ˆ์„ฑ ๊ฐ•ํ™”๊นŒ์ง€ ๋™์‹œ์— ๋‹ฌ์„ฑ ๊ฐ€๋Šฅ.

์ฟ ํŒก ๋งํฌ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋ธ”๋กœ๊ทธ์— ์ ์šฉํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”?

๊ฐ€์žฅ ์•ˆ์ „ํ•œ ๋ฐฉ๋ฒ•์€ ๋‹จ์ถ• ์ฝ”๋“œ์™€ JSON ๊ธฐ๋ฐ˜ ๋ฒ„ํŠผ ์—ฐ๊ฒฐ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฟ ํŒก ๋งํฌ๋ฅผ ๋ฐ”๋กœ HTML์— ์‚ฝ์ž…ํ•˜์ง€ ์•Š๊ณ , JSON ํŒŒ์ผ์— ๋‹จ์ถ• ์ฝ”๋“œ์™€ ์‹ค์ œ URL์„ ๋งคํ•‘ํ•ฉ๋‹ˆ๋‹ค. HTML ๋ฒ„ํŠผ์˜ data-code ์†์„ฑ์— ๋‹จ์ถ• ์ฝ”๋“œ๋ฅผ ์ง€์ •ํ•˜๊ณ , JavaScript๋ฅผ ํ†ตํ•ด ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ JSON์—์„œ URL์„ ์ฐพ์•„ ์ƒˆ ์ฐฝ์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋„๋ก ๊ตฌํ˜„ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋งํฌ๋ฅผ ์ง์ ‘ ๋…ธ์ถœํ•˜์ง€ ์•Š์œผ๋ฉด์„œ๋„ ๋ฐฉ๋ฌธ์ž๊ฐ€ ํด๋ฆญํ•˜๋ฉด ์ •ํ™•ํ•œ ์ƒํ’ˆ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

JSON ํŒŒ์ผ๊ณผ ๋‹จ์ถ• ์ฝ”๋“œ ๋ฐฉ์‹์˜ ์žฅ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

๋‹จ์ถ• ์ฝ”๋“œ์™€ JSON ํŒŒ์ผ์„ ํ™œ์šฉํ•˜๋ฉด ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์žฅ์ ์„ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒซ์งธ, ๊ฒ€์ƒ‰ ์—”์ง„ ํ’ˆ์งˆ ์œ ์ง€์ž…๋‹ˆ๋‹ค. ๊ฒ€์ƒ‰ ์—”์ง„์€ HTML์— ์ง์ ‘ URL์ด ๋…ธ์ถœ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ ๋ฅผ ์ถฉ๋ถ„ํžˆ ํ‰๊ฐ€ํ•˜์—ฌ ์ €ํ’ˆ์งˆ ์œ„ํ—˜์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘˜์งธ, ๊ด€๋ฆฌ ํŽธ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ƒˆ ์ƒํ’ˆ์ด ์ถ”๊ฐ€๋˜๊ฑฐ๋‚˜ ๋งํฌ๊ฐ€ ๋ณ€๊ฒฝ๋  ๊ฒฝ์šฐ JSON ํŒŒ์ผ๋งŒ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ๋ธ”๋กœ๊ทธ ๋‚ด ๋ชจ๋“  ๋ฒ„ํŠผ์ด ์ž๋™์œผ๋กœ ์ตœ์‹  URL์„ ์ฐธ์กฐํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์…‹์งธ, ๋ณด์•ˆ์„ฑ ๊ฐ•ํ™”์ž…๋‹ˆ๋‹ค. ์‹ค์ œ ์ฟ ํŒก URL์ด ๋…ธ์ถœ๋˜์ง€ ์•Š์•„ ์™ธ๋ถ€ ์ŠคํŒธ์ด๋‚˜ ์ž๋™ ํฌ๋กค๋Ÿฌ๋กœ๋ถ€ํ„ฐ ๋ณดํ˜ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ์— ์ ์šฉํ•  ๋•Œ ์ฃผ์˜ํ•  ์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์ด ๋ฐฉ์‹์„ ์ ์šฉํ•  ๋•Œ๋Š” ๋ช‡ ๊ฐ€์ง€ ์‚ฌํ•ญ์„ ์ฃผ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. JSON ํŒŒ์ผ์˜ ํ˜•์‹์ด ์ •ํ™•ํ•ด์•ผ ํ•˜๋ฉฐ, HTML ๋ฒ„ํŠผ์˜ data-code ๊ฐ’์ด JSON ํ‚ค์™€ ์ผ์น˜ํ•ด์•ผ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ JSON ํŒŒ์ผ์ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•ด์•ผ ํ•˜๋ฉฐ, JavaScript ์ฝ”๋“œ๋ฅผ HTML/Body ํ•˜๋‹จ์— ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฒ„ํŠผ ํด๋ฆญ ์ด๋ฒคํŠธ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜๋„๋ก ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ฃผ์˜ ์‚ฌํ•ญ์„ ์ง€ํ‚ค๋ฉด ์•ˆ์ „ํ•˜๊ฒŒ ์ฟ ํŒก ๋งํฌ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉด์„œ ๊ฒ€์ƒ‰ ํ’ˆ์งˆ๋„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ปดํ“จํ„ฐ

'money-insight > commerce-seo' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์ฟ ํŒก ์ƒํ’ˆ ๋งํฌ ์ตœ์ ํ™” 5ํŽธ ์•ˆ์ „ํ•˜๊ฒŒ ์ œํœด ์ƒํ’ˆ ๋งํฌ ๋…ธ์ถœ ์ด์ •๋ฆฌ  (2) 2025.09.27
์ฟ ํŒก ๋งํฌ ์ตœ์ ํ™” 3ํŽธ. ๋ธ”๋กœ๊ทธ์— ๋‹จ์ถ•์ฝ”๋“œ ์ ์šฉ ๋ฐฉ๋ฒ•๊ณผ ๋งํฌ ์ตœ์ ํ™” ์ด์ •๋ฆฌ  (0) 2025.09.24
์ฟ ํŒก ๋งํฌ ์ตœ์ ํ™” 2ํŽธ ์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค ์ €ํ’ˆ์งˆ ๋ฐฉ์ง€ ๋‹จ์ถ• ์ฝ”๋“œ ์ƒ์„ฑ๊ธฐ  (0) 2025.09.23
์ฟ ํŒก ๋งํฌ ์ตœ์ ํ™” 1ํŽธ :์ฟ ํŒก ์ƒํ’ˆ ๋งํฌ ์—†์ด๋„ ๋ฐฉ๋ฌธ์ž์—๊ฒŒ ์ƒํ’ˆ ๋…ธ์ถœํ•˜๋Š” ์ €ํ’ˆ์งˆ ๋ฐฉ์ง€๋ฒ•  (1) 2025.09.23
์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค ๋„ค์ด๋ฒ„ ๋ธ”๋กœ๊ทธ ์ €ํ’ˆ์งˆ ๋ฐฉ์ง€ ๋ฐฉ๋ฒ•๊ณผ SEO ์ „๋žต  (0) 2025.09.20
์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค,ํ•ญ๊ณต๊ถŒ ์ด๋ฒคํŠธ ๋‹น์ฒจ์„ ์ถ•ํ•˜๋“œ๋ฆฝ๋‹ˆ๋‹ค!  (0) 2025.08.20
์ฟ ํŒก ํŒŒํŠธ๋„ˆ์Šค ๋ฌด๋ฃŒ ์ œํ’ˆ ๋ฐ›๊ณ  ๋ธ”๋กœ๊ทธ ์ˆ˜์ต ์˜ฌ๋ฆฌ๋Š” ๋ฐฉ๋ฒ•!  (0) 2025.08.14