Published:

Last Updated:

๋งคํฌ๋กœ ๋Œ“๊ธ€๊ณผ ์‹ค์ œ ์ž‘์„ฑ์ž ๋Œ“๊ธ€ ํ‘œ์‹œ ์ฝ”๋“œ๋กœ ๋ธ”๋กœ๊ทธ ๋งคํฌ๋กœ ๋Œ“๊ธ€ ๊ตฌ๋ถ„ํ•˜๊ธฐ

์‹ค์ œ ์ž‘์„ฑ์ž ๋Œ“๊ธ€ ํ‘œ์‹œ ์ฝ”๋“œ๋กœ ๋ธ”๋กœ๊ทธ ๋งคํฌ๋กœ ๋Œ“๊ธ€์„ ์‰ฝ๊ฒŒ ๊ตฌ๋ถ„ํ•˜๊ณ , ๋ฐฉ๋ฌธ์ž ๊ฒฝํ—˜๊ณผ SEO ์‹ ๋ขฐ๋„๋ฅผ ๋™์‹œ์— ๋†’์ด๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์„ธ์š”.


๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•˜๋‹ค ๋ณด๋ฉด ๋Œ“๊ธ€ ๊ด€๋ฆฌ๊ฐ€ ์–ผ๋งˆ๋‚˜ ์ค‘์š”ํ•œ์ง€ ์ƒˆ์‚ผ ๋А๋ผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋Œ“๊ธ€์€ ๋‹จ์ˆœํ•œ ๊ธ€์ด ์•„๋‹ˆ๋ผ ๋ฐฉ๋ฌธ์ž์™€ ์†Œํ†ตํ•˜๋Š” ์ฐฝ๊ตฌ์ด์ž, ์‚ฌ์ดํŠธ ์‹ ๋ขฐ๋„๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์ง€ํ‘œ์ด๊ธฐ ๋•Œ๋ฌธ์ด์ฃ . ๊ทธ๋Ÿฐ๋ฐ ์š”์ฆ˜์€ ๋งคํฌ๋กœ ๋Œ“๊ธ€์ด๋‚˜ ์ž๋™ํ™”๋œ ์ŠคํŒธ ๋Œ“๊ธ€์ด ๋Š˜๋ฉด์„œ, ๊ทธ๋ƒฅ ๋ฐฉ์น˜๋งŒ ํ•ด์„œ๋Š” ์‚ฌ์ดํŠธ ํ’ˆ์งˆ์„ ์œ ์ง€ํ•˜๊ธฐ๊ฐ€ ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ŠคํŒธ ๋Œ“๊ธ€์€ ๋‹จ์ˆœํžˆ ๋ณด๊ธฐ ์‹ซ์€ ๊ฒƒ์— ๊ทธ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”(SEO)์—๋„ ์•…์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ๊ณ , ๋ฐฉ๋ฌธ์ž๊ฐ€ ๋Œ“๊ธ€ ์ฐธ์—ฌ๋ฅผ ๊บผ๋ฆฌ๊ฒŒ ๋งŒ๋“ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ธ”๋กœ๊ทธ ์šด์˜์ž๋ผ๋ฉด ์ŠคํŒธ ๋Œ“๊ธ€์— ๋Œ€์‘ํ•˜๋Š” ๋™์‹œ์—, ์‹ค์ œ ๋ฐฉ๋ฌธ์ž๊ฐ€ ์ง์ ‘ ๋‚จ๊ธด ๋Œ“๊ธ€๊ณผ ์ž๋™ํ™”๋œ ๋Œ“๊ธ€์„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋‚จ๊ธด ๋Œ“๊ธ€์ด ๋‚ด ๊ตฌ๋…์ž๊ฐ€ ์ง์ ‘ ์ž‘์„ฑํ•œ ๊ฒƒ์ธ์ง€, ์•„๋‹ˆ๋ฉด ์ž๋™ํ™”๋œ ๋งคํฌ๋กœ ๋Œ“๊ธ€์ธ์ง€ ๋ฐ”๋กœ ์•Œ ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€ ๊ด€๋ฆฌ๊ฐ€ ํ›จ์”ฌ ํŽธ๋ฆฌํ•ด์ง‘๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ตฌ๋ถ„๋งŒ ์ž˜ ํ•ด๋„ ๋ถˆํ•„์š”ํ•œ ๋Œ“๊ธ€์„ ๊ฑธ๋Ÿฌ๋‚ด๊ณ , ์ง„์งœ ์†Œํ†ต์„ ๋” ํ™œ๋ฐœํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์ฃ .

์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๋Œ“๊ธ€ ํ‘œ์‹œ๋กœ ๋งคํฌ๋กœ ๋Œ“๊ธ€ ๊ตฌ๋ถ„ ํ•˜๊ธฐ

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

๊ทผ๋ณธ์ ์ธ ์›์ธ์„ ์‚ดํŽด๋ณด๋ฉด, ๋Œ€๋ถ€๋ถ„์˜ ๋ธ”๋กœ๊ทธ ๋Œ“๊ธ€ ์‹œ์Šคํ…œ์ด ๋‹จ์ˆœ ํ…์ŠคํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๋Œ“๊ธ€๊ณผ ์Šคํฌ๋ฆฝํŠธ๋กœ ์ž‘์„ฑ๋œ ์ž๋™ ๋Œ“๊ธ€์„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๋ฐ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ฐ˜ ๋งคํฌ๋กœ ๋Œ“๊ธ€ ํ‘œ์‹œ ๋ฐฉ๋ฒ•

์ œ๊ฐ€ ์ค€๋น„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋Š” ๋Œ“๊ธ€์„ ์ž…๋ ฅํ•˜๋Š” ์ˆœ๊ฐ„, ํ•ด๋‹น ๋Œ“๊ธ€์ด ์‹ค์ œ ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๊ฒƒ์ธ์ง€ ์ž๋™์œผ๋กœ ์‹๋ณ„ํ•˜๊ณ  [ไบบ] ํƒœ๊ทธ๋ฅผ ๋ถ™์ด๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ๋•๋ถ„์— ์šด์˜์ž๋Š” ๋Œ“๊ธ€์„ ๋ณด๋‹ค ์ง๊ด€์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์š” ๊ธฐ๋Šฅ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ๋Œ“๊ธ€ ์ž…๋ ฅ ๋ฐ•์Šค ๊ฐ์ง€:MutationObserver๋ฅผ ํ™œ์šฉํ•ด ๋Œ“๊ธ€ ์ž…๋ ฅ์ฐฝ์ด ์ƒ์„ฑ๋˜๋Š” ์ˆœ๊ฐ„์„ ํฌ์ฐฉํ•ฉ๋‹ˆ๋‹ค.
  • ์ž๋™ [ไบบ] ์ ‘๋‘์‚ฌ ์ถ”๊ฐ€: ์‚ฌ์šฉ์ž๊ฐ€ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๋งจ ์•ž์— [ไบบ]์„ ๋ถ™์—ฌ ์‹ค์ œ ์‚ฌ๋žŒ ๋Œ“๊ธ€์ž„์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.
  • ์ค‘๋ณต ์‚ฝ์ž… ๋ฐฉ์ง€ ๋ฐ ์ด๋ฒคํŠธ ๊ด€๋ฆฌ: ์ด๋ฏธ ์ ‘๋‘์‚ฌ๊ฐ€ ๋ถ™์–ด ์žˆ๊ฑฐ๋‚˜ ์ด๋ฒคํŠธ๊ฐ€ ์ฒ˜๋ฆฌ๋œ ๊ฒฝ์šฐ์—๋Š” ์ถ”๊ฐ€ ์‚ฝ์ž…์„ ๋ฐฉ์ง€ํ•˜์—ฌ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ฐฉ๋ฒ•์˜ ๊ฐ€์žฅ ํฐ ์žฅ์ ์€, ์‚ฌ์šฉ์ž๊ฐ€ ๋Œ“๊ธ€์„ ์ž‘์„ฑํ•˜๋Š” ์ˆœ๊ฐ„ ๋ฐ”๋กœ [ไบบ] ํ‘œ์‹œ๊ฐ€ ์ ์šฉ๋œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋Œ€๋กœ ๋งคํฌ๋กœ๋‚˜ ์ž๋™ํ™” ์Šคํฌ๋ฆฝํŠธ๋กœ ์ž‘์„ฑ๋œ ๋Œ“๊ธ€์€ ์ ‘๋‘์‚ฌ๊ฐ€ ๋ถ™์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, ์‚ฌ๋žŒ ์ž‘์„ฑ ๋Œ“๊ธ€๊ณผ ์ž๋™ ๋Œ“๊ธ€์„ ํ•œ๋ˆˆ์— ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ ์šฉ ๋‹จ๊ณ„์™€ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•

๋ธ”๋กœ๊ทธ์— ์ด ๊ธฐ๋Šฅ์„ ์ ์šฉํ•˜๋Š” ๊ณผ์ •์€ ์ƒ๊ฐ๋ณด๋‹ค ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ๋‹จ๊ณ„๋ณ„๋กœ ์‚ดํŽด๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ๋ธ”๋กœ๊ทธ HTML์— ์Šคํฌ๋ฆฝํŠธ ์‚ฝ์ž…
    `script`...`/script` ํ˜•ํƒœ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.
  2. ๋Œ“๊ธ€ ์ž…๋ ฅ ๋ฐ•์Šค ๊ฐ์ง€
    MutationObserver๋ฅผ ์ด์šฉํ•ด ๋Œ“๊ธ€ ์ž…๋ ฅ์ฐฝ์ด ์ƒ์„ฑ๋˜๋Š” ์ˆœ๊ฐ„์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ฐ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  3. ๋Œ“๊ธ€ ์ž…๋ ฅ ์‹œ [ไบบ] ์ ‘๋‘์‚ฌ ์ž๋™ ์ถ”๊ฐ€
    ์‚ฌ์šฉ์ž๊ฐ€ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๋งจ ์•ž์— [ไบบ]์„ ๋ถ™์—ฌ ์‹ค์ œ ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๋Œ“๊ธ€์ž„์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.
  4. ์ค‘๋ณต ์ด๋ฒคํŠธ ์ œ๊ฑฐ ๋ฐ ์„ฑ๋Šฅ ์ตœ์ ํ™”
    ์ด๋ฏธ ์ ‘๋‘์‚ฌ๊ฐ€ ์ถ”๊ฐ€๋œ ๊ฒฝ์šฐ๋‚˜ ์ด๋ฒคํŠธ๊ฐ€ ์ฒ˜๋ฆฌ๋œ ๋Œ“๊ธ€์—๋Š” ์ค‘๋ณต์œผ๋กœ ์‹คํ–‰๋˜์ง€ ์•Š๋„๋ก ์„ค์ •ํ•ด ์„ฑ๋Šฅ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ์šด์˜์—์„œ ๊ธฐ๋Œ€ ํšจ๊ณผ

์ด ๊ธฐ๋Šฅ์„ ์ ์šฉํ•˜๋ฉด ๋ธ”๋กœ๊ทธ ์šด์˜์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์‹ค์ œ ์‚ฌ๋žŒ ๋Œ“๊ธ€ ์ฆ‰์‹œ ์‹๋ณ„ ๊ฐ€๋Šฅ
    [ไบบ] ์ ‘๋‘์‚ฌ ๋•๋ถ„์— ์ง„์งœ ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•œ ๋Œ“๊ธ€์ธ์ง€ ๋ฐ”๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋งคํฌ๋กœ ๋Œ“๊ธ€ ๋ฐ ์ŠคํŒธ ๋Œ“๊ธ€ ์‹œ๊ฐ์  ๊ตฌ๋ถ„
    ์ž๋™ํ™” ๋Œ“๊ธ€๊ณผ ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๋Œ“๊ธ€์ด ์‹œ๊ฐ์ ์œผ๋กœ ๊ตฌ๋ถ„๋˜์–ด ๊ด€๋ฆฌ๊ฐ€ ํ›จ์”ฌ ์‰ฌ์›Œ์ง‘๋‹ˆ๋‹ค.
  • SEO ์ตœ์ ํ™” ํšจ๊ณผ
    ๋ถˆํ•„์š”ํ•œ ์ŠคํŒธ ์ฝ˜ํ…์ธ ๊ฐ€ ๊ฒ€์ƒ‰์—”์ง„์— ๋…ธ์ถœ๋˜์ง€ ์•Š์•„ ์‚ฌ์ดํŠธ ์‹ ๋ขฐ๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋Œ“๊ธ€ ํ’ˆ์งˆ ํ–ฅ์ƒ๊ณผ ์ฐธ์—ฌ๋„ ์ฆ๊ฐ€
    ์ง„์งœ ๋Œ“๊ธ€๋งŒ ๊ฐ•์กฐ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฉ๋ฌธ์ž ์ฐธ์—ฌ๋ฅผ ์œ ๋„ํ•˜๊ณ , ๋Œ“๊ธ€ ํ™˜๊ฒฝ์„ ์•ˆ์ „ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๊ณผ์ ์œผ๋กœ, ๋ธ”๋กœ๊ทธ ์šด์˜์ž๋Š” ๋Œ“๊ธ€ ๊ณต๊ฐ„์„ ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š” ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๊ณต๊ฐ„์œผ๋กœ ๋งŒ๋“ค๊ณ , ๋ฐฉ๋ฌธ์ž์—๊ฒŒ ๋”์šฑ ์พŒ์ ํ•œ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งคํฌ๋กœ ๋Œ“๊ธ€ ๋ถ„๋ฅ˜ํ•˜๋Š” ๋ฐฉ๋ฒ•

๋งคํฌ๋กœ ๋Œ“๊ธ€ ๊ฐ์ง€์™€ ์‚ฌ๋žŒ ๋Œ“๊ธ€ ํ‘œ์‹œ ์ ์šฉ ์˜ˆ์ œ

์•„๋ž˜ ํ…Œ์ด๋ธ”์€ ๋ธ”๋กœ๊ทธ์—์„œ ๋งคํฌ๋กœ ๋Œ“๊ธ€๊ณผ ์‹ค์ œ ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๋Œ“๊ธ€์„ ๊ตฌ๋ถ„ํ•  ๋•Œ์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์šด์˜์ž๋Š” ์ด๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ๊ด€๋ฆฌ ์ „๋žต์„ ์„ธ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ“๊ธ€ ์œ ํ˜• ํ‘œ์‹œ ๋ฐฉ์‹ ๊ด€๋ฆฌ ๋ฐฉ๋ฒ• SEO ์˜ํ–ฅ
์‚ฌ๋žŒ ์ž‘์„ฑ ๋Œ“๊ธ€ [ไบบ] ์ ‘๋‘์‚ฌ ์ž๋™ ์ถ”๊ฐ€ ์ˆ˜๋™ ๊ฒ€ํ†  ๋ฐ ๋‹ต๊ธ€ ๊ฐ€๋Šฅ ๊ฒ€์ƒ‰์—”์ง„ ์‹ ๋ขฐ๋„ ํ–ฅ์ƒ
๋งคํฌ๋กœ/์ŠคํŒธ ๋Œ“๊ธ€ ์ ‘๋‘์‚ฌ ๋ฏธํ‘œ์‹œ ์ž๋™ ํ•„ํ„ฐ๋ง ๋˜๋Š” ์‚ญ์ œ ์ŠคํŒธ ๋…ธ์ถœ ์ตœ์†Œํ™”, SEO ๋ณดํ˜ธ

์‹ค์ œ ์ ์šฉ ์‹œ ์œ ์˜์‚ฌํ•ญ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•œ ๋งคํฌ๋กœ ๋Œ“๊ธ€ ํ‘œ์‹œ ๊ธฐ๋Šฅ์€ ๋งค์šฐ ํšจ์œจ์ ์ด์ง€๋งŒ, ๋ช‡ ๊ฐ€์ง€ ์œ ์˜์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋Œ“๊ธ€ ์ž…๋ ฅ DOM ๊ตฌ์กฐ๊ฐ€ ๋ณ€๊ฒฝ๋  ๊ฒฝ์šฐ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ •์ƒ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Œ
  • ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ์ตœ์‹  ํ‘œ์ค€ ๋ฌธ๋ฒ• ์‚ฌ์šฉ ๊ถŒ์žฅ
  • ๋Œ€๊ทœ๋ชจ ๋Œ“๊ธ€ ํ™˜๊ฒฝ์—์„œ๋Š” ์„ฑ๋Šฅ ์ตœ์ ํ™” ํ•„์š”, ๋ถˆํ•„์š”ํ•œ ์ด๋ฒคํŠธ ๋ฐ˜๋ณต ๊ฐ์ง€ ์ตœ์†Œํ™”

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ํ™œ์šฉ ์‹ฌํ™” ์ „๋žต

script
document.addEventListener('DOMContentLoaded', function() {
const observer = new MutationObserver(() = {
const cmtBox = document.querySelector('.tt-cmt[contenteditable="true"]');

if (cmtBox && !cmtBox.dataset.listenerAdded) {
cmtBox.dataset.listenerAdded = "true";
cmtBox.dataset.personInserted = "false";

cmtBox.addEventListener('input', function handler() {
if (cmtBox.dataset.personInserted === "true") return;

const text = cmtBox.innerText.trim();

if (text) {
if (!text.startsWith('[ไบบ] ')) {
cmtBox.innerText = '[ไบบ] ' + text;

const sel = window.getSelection();
const range = document.createRange();
range.selectNodeContents(cmtBox);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);

cmtBox.dispatchEvent(new Event('input', { bubbles: true }));
}

cmtBox.dataset.personInserted = "true";
cmtBox.removeEventListener('input', handler);
}
});
}
});

observer.observe(document.body, { childList: true, subtree: true });
});
/script

๋ณด๋‹ค ํšจ์œจ์ ์ธ ๋Œ“๊ธ€ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด ๋‹ค์Œ ์ „๋žต์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

  1. ๋Œ“๊ธ€ ์ž‘์„ฑ์ž IP, ์‹œ๊ฐ„ ํŒจํ„ด์„ ๋ถ„์„ํ•˜์—ฌ ๋ฐ˜๋ณต ๋งคํฌ๋กœ ํ™œ๋™ ๊ฐ์ง€
  2. MutationObserver์™€ EventListener ์กฐํ•ฉ์œผ๋กœ ์‹ค์‹œ๊ฐ„ ํ‘œ์‹œ ๋ฐ ์„ฑ๋Šฅ ์ตœ์ ํ™”
  3. UI ์ƒ ์‹œ๊ฐ์  ๊ฐ•์กฐ: ์‚ฌ๋žŒ์ด ์ž‘์„ฑํ•œ ๋Œ“๊ธ€ ๋ฐฐ๊ฒฝ์ƒ‰ ๋ณ€๊ฒฝ ๋˜๋Š” ์ ‘๋‘์‚ฌ ๊ฐ•์กฐ
  4. ๊ด€๋ฆฌ์ž ๋Œ€์‹œ๋ณด๋“œ์—์„œ [ไบบ] ํ‘œ์‹œ ๋Œ“๊ธ€๊ณผ ๋ฏธํ‘œ์‹œ ๋Œ“๊ธ€ ๋ณ„๋„ ํ†ต๊ณ„ ์ œ๊ณต

๋ธ”๋กœ๊ทธ ๋Œ“๊ธ€ ์šด์˜ ํŒ

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

์‹ค์ œ ๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•  ๋•Œ๋Š” ๋ช‡ ๊ฐ€์ง€ ์ ์„ ๊พธ์ค€ํžˆ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋Œ“๊ธ€ ๊ตฌ์กฐ๊ฐ€ ๋ฐ”๋€Œ๋ฉด ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์œผ๋‹ˆ, ๊ตฌ์กฐ ๋ณ€๊ฒฝ ์‹œ ์ฝ”๋“œ๋ฅผ ์ ๊ฒ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ๊ณผ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋„ ์ฒดํฌํ•˜๊ณ , ์ฃผ๊ธฐ์ ์œผ๋กœ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ๋Œ“๊ธ€ ํ™˜๊ฒฝ์„ ์•ˆ์ „ํ•˜๊ณ  ํ™œ๋ฐœํ•˜๊ฒŒ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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


Q1: [ไบบ] ํ‘œ์‹œ๊ฐ€ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •์ƒ ์ž‘๋™ํ•˜๋‚˜์š”?
์ตœ์‹  ํ‘œ์ค€ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ •์ƒ ์ž‘๋™ํ•˜์ง€๋งŒ, ๋Œ“๊ธ€ DOM ๊ตฌ์กฐ ๋ณ€๊ฒฝ ์‹œ ์ฝ”๋“œ๋ฅผ ์ ๊ฒ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
Q2: ๋Œ€๊ทœ๋ชจ ๋Œ“๊ธ€ ํ™˜๊ฒฝ์—์„œ๋„ ์„ฑ๋Šฅ์— ์˜ํ–ฅ์ด ์—†๋‚˜์š”?
MutationObserver์™€ ์ด๋ฒคํŠธ ์กฐํ•ฉ์œผ๋กœ ์ค‘๋ณต ์‹คํ–‰์„ ๋ฐฉ์ง€ํ•˜์—ฌ ์„ฑ๋Šฅ ์ตœ์ ํ™”๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
Q3: SEO์— ์‹ค์ œ ํšจ๊ณผ๊ฐ€ ์žˆ๋‚˜์š”?
๋ถˆํ•„์š”ํ•œ ์ŠคํŒธ ๋Œ“๊ธ€ ๋…ธ์ถœ์„ ๋ง‰์•„ ๊ฒ€์ƒ‰์—”์ง„ ์‹ ๋ขฐ๋„๋ฅผ ํ–ฅ์ƒ์‹œํ‚ค๋ฉฐ, ๋ฐฉ๋ฌธ์ž ์ฐธ์—ฌ๋„๋ฅผ ๋†’์—ฌ SEO์— ๊ธ์ •์  ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.