๋งคํฌ๋ก ๋๊ธ๊ณผ ์ค์ ์์ฑ์ ๋๊ธ ํ์ ์ฝ๋๋ก ๋ธ๋ก๊ทธ ๋งคํฌ๋ก ๋๊ธ ๊ตฌ๋ถํ๊ธฐ
์ค์ ์์ฑ์ ๋๊ธ ํ์ ์ฝ๋๋ก ๋ธ๋ก๊ทธ ๋งคํฌ๋ก ๋๊ธ์ ์ฝ๊ฒ ๊ตฌ๋ถํ๊ณ , ๋ฐฉ๋ฌธ์ ๊ฒฝํ๊ณผ SEO ์ ๋ขฐ๋๋ฅผ ๋์์ ๋์ด๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๋ค ๋ณด๋ฉด ๋๊ธ ๊ด๋ฆฌ๊ฐ ์ผ๋ง๋ ์ค์ํ์ง ์์ผ ๋๋ผ๊ฒ ๋ฉ๋๋ค. ๋๊ธ์ ๋จ์ํ ๊ธ์ด ์๋๋ผ ๋ฐฉ๋ฌธ์์ ์ํตํ๋ ์ฐฝ๊ตฌ์ด์, ์ฌ์ดํธ ์ ๋ขฐ๋๋ฅผ ๋ณด์ฌ์ฃผ๋ ์งํ์ด๊ธฐ ๋๋ฌธ์ด์ฃ . ๊ทธ๋ฐ๋ฐ ์์ฆ์ ๋งคํฌ๋ก ๋๊ธ์ด๋ ์๋ํ๋ ์คํธ ๋๊ธ์ด ๋๋ฉด์, ๊ทธ๋ฅ ๋ฐฉ์น๋ง ํด์๋ ์ฌ์ดํธ ํ์ง์ ์ ์งํ๊ธฐ๊ฐ ์ฝ์ง ์์ต๋๋ค.
์คํธ ๋๊ธ์ ๋จ์ํ ๋ณด๊ธฐ ์ซ์ ๊ฒ์ ๊ทธ์น์ง ์์ต๋๋ค. ๊ฒ์์์ง ์ต์ ํ(SEO)์๋ ์ ์ํฅ์ ์ค ์ ์๊ณ , ๋ฐฉ๋ฌธ์๊ฐ ๋๊ธ ์ฐธ์ฌ๋ฅผ ๊บผ๋ฆฌ๊ฒ ๋ง๋ค ์๋ ์์ต๋๋ค. ๊ทธ๋์ ๋ธ๋ก๊ทธ ์ด์์๋ผ๋ฉด ์คํธ ๋๊ธ์ ๋์ํ๋ ๋์์, ์ค์ ๋ฐฉ๋ฌธ์๊ฐ ์ง์ ๋จ๊ธด ๋๊ธ๊ณผ ์๋ํ๋ ๋๊ธ์ ๊ตฌ๋ถํ ์ ์๋ ๋ฐฉ๋ฒ์ด ํ์ํฉ๋๋ค.
๋๊ตฐ๊ฐ๊ฐ ๋จ๊ธด ๋๊ธ์ด ๋ด ๊ตฌ๋ ์๊ฐ ์ง์ ์์ฑํ ๊ฒ์ธ์ง, ์๋๋ฉด ์๋ํ๋ ๋งคํฌ๋ก ๋๊ธ์ธ์ง ๋ฐ๋ก ์ ์ ์๋ค๋ฉด ๋๊ธ ๊ด๋ฆฌ๊ฐ ํจ์ฌ ํธ๋ฆฌํด์ง๋๋ค. ์ด๋ ๊ฒ ๊ตฌ๋ถ๋ง ์ ํด๋ ๋ถํ์ํ ๋๊ธ์ ๊ฑธ๋ฌ๋ด๊ณ , ์ง์ง ์ํต์ ๋ ํ๋ฐํ๊ฒ ๋ง๋ค ์ ์์ฃ .
์ฌ๋์ด ์์ฑํ ๋๊ธ ํ์๋ก ๋งคํฌ๋ก ๋๊ธ ๊ตฌ๋ถ ํ๊ธฐ
๋ง์ ๋ธ๋ก๊ทธ์์ ๊ณตํต์ ์ผ๋ก ๊ฒช๋ ๋ฌธ์ ์ค ํ๋๊ฐ ๋ฐ๋ก ๋งคํฌ๋ก ๋๊ธ์ ๋๋ค. ์๋ํ ๋๊ตฌ๋ฅผ ์ด์ฉํด ์์ฑ๋ ๋๊ธ์ด ๋์ด๋๋ฉด์, ์ง์ง ์ฌ์ฉ์๊ฐ ๋จ๊ธด ๋๊ธ๊ณผ ๊ตฌ๋ถ์ด ์ด๋ ค์์ง๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ด๋ฐ ์ํฉ์ด ๋ฐ๋ณต๋๋ฉด ๋ ์๋ ํผ๋์ ๋๋ผ๊ณ , ๋๊ธ ๊ณต๊ฐ์ ์ ๋ขฐ๋ ์ญ์ ๋จ์ด์ง๊ฒ ๋ฉ๋๋ค.
๊ทผ๋ณธ์ ์ธ ์์ธ์ ์ดํด๋ณด๋ฉด, ๋๋ถ๋ถ์ ๋ธ๋ก๊ทธ ๋๊ธ ์์คํ ์ด ๋จ์ ํ ์คํธ ๊ธฐ๋ฐ์ผ๋ก ์๋ํ๊ธฐ ๋๋ฌธ์, ์ฌ๋์ด ์์ฑํ ๋๊ธ๊ณผ ์คํฌ๋ฆฝํธ๋ก ์์ฑ๋ ์๋ ๋๊ธ์ ๊ตฌ๋ถํ ์ ์๋ค๋ ๋ฐ ์์ต๋๋ค.
๊ทธ๋์ ๋ธ๋ก๊ทธ ์ด์์๋ผ๋ฉด ๊ธฐ์ ์ ์ธ ์ ๊ทผ์ ํตํด ๋งคํฌ๋ก ํ๋์ ๊ฐ์งํ๊ณ , ์ค์ ์ฌ๋์ด ์์ฑํ ๋๊ธ๊ณผ ์๋ํ๋ ๋๊ธ์ ๊ตฌ๋ถํด ํ์ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ํ์ํฉ๋๋ค. ์ด๋ ๊ฒ๋ง ํด๋ ๋๊ธ ๊ด๋ฆฌ๊ฐ ํจ์ฌ ์์ํด์ง๊ณ , ๋ฐฉ๋ฌธ์ ๊ฒฝํ๊ณผ ์ฌ์ดํธ ์ ๋ขฐ๋๋ฅผ ํจ๊ป ๋์ผ ์ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ๋งคํฌ๋ก ๋๊ธ ํ์ ๋ฐฉ๋ฒ
์ ๊ฐ ์ค๋นํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ ๋๊ธ์ ์ ๋ ฅํ๋ ์๊ฐ, ํด๋น ๋๊ธ์ด ์ค์ ์ฌ๋์ด ์์ฑํ ๊ฒ์ธ์ง ์๋์ผ๋ก ์๋ณํ๊ณ [ไบบ] ํ๊ทธ๋ฅผ ๋ถ์ด๋ ๋ฐฉ์์ ๋๋ค. ๋๋ถ์ ์ด์์๋ ๋๊ธ์ ๋ณด๋ค ์ง๊ด์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
์ฃผ์ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๋๊ธ ์ ๋ ฅ ๋ฐ์ค ๊ฐ์ง:MutationObserver๋ฅผ ํ์ฉํด ๋๊ธ ์ ๋ ฅ์ฐฝ์ด ์์ฑ๋๋ ์๊ฐ์ ํฌ์ฐฉํฉ๋๋ค.
- ์๋ [ไบบ] ์ ๋์ฌ ์ถ๊ฐ: ์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๋ฉด ๋งจ ์์ [ไบบ]์ ๋ถ์ฌ ์ค์ ์ฌ๋ ๋๊ธ์์ ํ์ํฉ๋๋ค.
- ์ค๋ณต ์ฝ์ ๋ฐฉ์ง ๋ฐ ์ด๋ฒคํธ ๊ด๋ฆฌ: ์ด๋ฏธ ์ ๋์ฌ๊ฐ ๋ถ์ด ์๊ฑฐ๋ ์ด๋ฒคํธ๊ฐ ์ฒ๋ฆฌ๋ ๊ฒฝ์ฐ์๋ ์ถ๊ฐ ์ฝ์ ์ ๋ฐฉ์งํ์ฌ ์ฑ๋ฅ์ ์ต์ ํํฉ๋๋ค.
์ด ๋ฐฉ๋ฒ์ ๊ฐ์ฅ ํฐ ์ฅ์ ์, ์ฌ์ฉ์๊ฐ ๋๊ธ์ ์์ฑํ๋ ์๊ฐ ๋ฐ๋ก [ไบบ] ํ์๊ฐ ์ ์ฉ๋๋ค๋ ์ ์ ๋๋ค. ๋ฐ๋๋ก ๋งคํฌ๋ก๋ ์๋ํ ์คํฌ๋ฆฝํธ๋ก ์์ฑ๋ ๋๊ธ์ ์ ๋์ฌ๊ฐ ๋ถ์ง ์๊ธฐ ๋๋ฌธ์, ์ฌ๋ ์์ฑ ๋๊ธ๊ณผ ์๋ ๋๊ธ์ ํ๋์ ๊ตฌ๋ถํ ์ ์์ต๋๋ค.
์ ์ฉ ๋จ๊ณ์ ๊ตฌํ ๋ฐฉ๋ฒ
๋ธ๋ก๊ทธ์ ์ด ๊ธฐ๋ฅ์ ์ ์ฉํ๋ ๊ณผ์ ์ ์๊ฐ๋ณด๋ค ๊ฐ๋จํฉ๋๋ค. ๋จ๊ณ๋ณ๋ก ์ดํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๋ธ๋ก๊ทธ HTML์ ์คํฌ๋ฆฝํธ ์ฝ์
`script`...`/script` ํํ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ฝ์ ํฉ๋๋ค. - ๋๊ธ ์
๋ ฅ ๋ฐ์ค ๊ฐ์ง
MutationObserver๋ฅผ ์ด์ฉํด ๋๊ธ ์ ๋ ฅ์ฐฝ์ด ์์ฑ๋๋ ์๊ฐ์ ์ค์๊ฐ์ผ๋ก ๊ฐ์งํฉ๋๋ค. - ๋๊ธ ์
๋ ฅ ์ [ไบบ] ์ ๋์ฌ ์๋ ์ถ๊ฐ
์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๋ฉด ๋งจ ์์ [ไบบ]์ ๋ถ์ฌ ์ค์ ์ฌ๋์ด ์์ฑํ ๋๊ธ์์ ํ์ํฉ๋๋ค. - ์ค๋ณต ์ด๋ฒคํธ ์ ๊ฑฐ ๋ฐ ์ฑ๋ฅ ์ต์ ํ
์ด๋ฏธ ์ ๋์ฌ๊ฐ ์ถ๊ฐ๋ ๊ฒฝ์ฐ๋ ์ด๋ฒคํธ๊ฐ ์ฒ๋ฆฌ๋ ๋๊ธ์๋ ์ค๋ณต์ผ๋ก ์คํ๋์ง ์๋๋ก ์ค์ ํด ์ฑ๋ฅ์ ์ ์งํฉ๋๋ค.
๋ธ๋ก๊ทธ ์ด์์์ ๊ธฐ๋ ํจ๊ณผ
์ด ๊ธฐ๋ฅ์ ์ ์ฉํ๋ฉด ๋ธ๋ก๊ทธ ์ด์์๋ ๋ค์๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋๋ฆด ์ ์์ต๋๋ค.
- ์ค์ ์ฌ๋ ๋๊ธ ์ฆ์ ์๋ณ ๊ฐ๋ฅ
[ไบบ] ์ ๋์ฌ ๋๋ถ์ ์ง์ง ์ฌ์ฉ์๊ฐ ์์ฑํ ๋๊ธ์ธ์ง ๋ฐ๋ก ํ์ธํ ์ ์์ต๋๋ค. - ๋งคํฌ๋ก ๋๊ธ ๋ฐ ์คํธ ๋๊ธ ์๊ฐ์ ๊ตฌ๋ถ
์๋ํ ๋๊ธ๊ณผ ์ฌ๋์ด ์์ฑํ ๋๊ธ์ด ์๊ฐ์ ์ผ๋ก ๊ตฌ๋ถ๋์ด ๊ด๋ฆฌ๊ฐ ํจ์ฌ ์ฌ์์ง๋๋ค. - 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
๋ณด๋ค ํจ์จ์ ์ธ ๋๊ธ ๊ด๋ฆฌ๋ฅผ ์ํด ๋ค์ ์ ๋ต์ ์ถ์ฒํฉ๋๋ค.
- ๋๊ธ ์์ฑ์ IP, ์๊ฐ ํจํด์ ๋ถ์ํ์ฌ ๋ฐ๋ณต ๋งคํฌ๋ก ํ๋ ๊ฐ์ง
- MutationObserver์ EventListener ์กฐํฉ์ผ๋ก ์ค์๊ฐ ํ์ ๋ฐ ์ฑ๋ฅ ์ต์ ํ
- UI ์ ์๊ฐ์ ๊ฐ์กฐ: ์ฌ๋์ด ์์ฑํ ๋๊ธ ๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ ๋๋ ์ ๋์ฌ ๊ฐ์กฐ
- ๊ด๋ฆฌ์ ๋์๋ณด๋์์ [ไบบ] ํ์ ๋๊ธ๊ณผ ๋ฏธํ์ ๋๊ธ ๋ณ๋ ํต๊ณ ์ ๊ณต
๋ธ๋ก๊ทธ ๋๊ธ ์ด์ ํ
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ๋งคํฌ๋ก ๋๊ธ์ ํ์ํ๋ ๊ธฐ๋ฅ์ ๋ธ๋ก๊ทธ ์ด์์์๊ฒ ์ ๋ง ์ ์ฉํ ๋๊ตฌ์ ๋๋ค. ๋จ์ํ ์คํธ ๋๊ธ์ ๊ฑธ๋ฌ๋ด๋ ๊ฒ์ ๋์ด, ์ค์ ์ฌ๋์ด ์์ฑํ ๋๊ธ์ ๋์ ๋๊ฒ ํ์ํจ์ผ๋ก์จ ๋ฐฉ๋ฌธ์์์ ์ ๋ขฐ๋ฅผ ์๋ ํจ๊ณผ๊ฐ ์์ต๋๋ค. ๊ฒ๋ค๊ฐ SEO ์ธก๋ฉด์์๋ ๋ถํ์ํ ์คํธ ๋๊ธ์ด ๊ฒ์์์ง์ ๋ ธ์ถ๋์ง ์์ ์ฌ์ดํธ ์ ๋ขฐ๋๋ฅผ ๋์ด๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ค์ ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ ๋๋ ๋ช ๊ฐ์ง ์ ์ ๊พธ์คํ ํ์ธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋๊ธ ๊ตฌ์กฐ๊ฐ ๋ฐ๋๋ฉด ์คํฌ๋ฆฝํธ๊ฐ ์ ์์ ์ผ๋ก ์๋ํ์ง ์์ ์ ์์ผ๋, ๊ตฌ์กฐ ๋ณ๊ฒฝ ์ ์ฝ๋๋ฅผ ์ ๊ฒํด์ผ ํฉ๋๋ค. ๋ํ ๋ธ๋ผ์ฐ์ ํธํ์ฑ๊ณผ ์ฑ๋ฅ ์ต์ ํ๋ ์ฒดํฌํ๊ณ , ์ฃผ๊ธฐ์ ์ผ๋ก ์คํฌ๋ฆฝํธ๋ฅผ ์ ๋ฐ์ดํธํ๋ฉด ๋๊ธ ํ๊ฒฝ์ ์์ ํ๊ณ ํ๋ฐํ๊ฒ ์ ์งํ ์ ์์ต๋๋ค.
์ด๋ ๊ฒ ๊ด๋ฆฌํ๋ฉด ๋ฐฉ๋ฌธ์์ ์ฐธ์ฌ๋ ์์ฐ์ค๋ฝ๊ฒ ์ฆ๊ฐํ๊ณ , ๊ฒ์์์ง ์ต์ ํ ํจ๊ณผ๊น์ง ์ป์ ์ ์์ต๋๋ค. ์ฆ, ๋จ์ํ ๋๊ธ ๊ด๋ฆฌ ์ด์์ ๊ฐ์น๋ฅผ ๋ง๋ค์ด๋ด๋ ์ ์ด์ฃ .