Published:

Last Updated:

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

๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค ๊ด‘๊ณ  ์•ˆ ๋‚˜์˜ฌ ๋•Œ ํ™•์ธํ•ด์•ผ ํ•  5๊ฐ€์ง€ ์ฃผ์š” ์˜ค๋ฅ˜ ์œ ํ˜•

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

๋งŽ์€ ๋ถ„์ด ์ด ๋ฌธ์ œ๋ฅผ ๋ถ„์„ํ•˜๊ณ  ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋‚˜ HTML ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๊ณค ํ•ฉ๋‹ˆ๋‹ค. ์ € ์—ญ์‹œ ์ž์ฃผ ๊ฒช๋Š” ๋ฌธ์ œ์ด๊ธฐ์— ํ•ญ์ƒ ์‹ ๊ฒฝ์„ ์“ฐ๋Š” ๋ถ€๋ถ„์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

๋ฐ์ผ๋ฆฌํ—ˆ๋ธŒ์˜ ๊ด‘๊ณ  ๋…ธ์ถœ๊ณผ ๋ฏธ๋…ธ์ถœ ํ˜„ํ™ฉ ๋ถ„์„ 1

์˜ˆ์ „์—๋Š” ๊ด‘๊ณ ๊ฐ€ ๋…ธ์ถœ๋˜์ง€ ์•Š์•„ ๊ฐœ๋ฐœ์ž ์ฝ”๋“œ๋ถ€ํ„ฐ ๋ชจ๋“  HTML์„ ๋ถ„์„ํ•˜๊ณ  ๊ด‘๊ณ  ์Šฌ๋กฏ๊นŒ์ง€ ์ƒˆ๋กœ ์ถ”๊ฐ€ํ•ด ๋ดค์ง€๋งŒ, ์›์ธ์„ ์ฐพ์ง€ ๋ชปํ•ด ํ—ค๋งจ ์ ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ตญ ์•„์ฃผ ์ž‘์€ HTML ์˜คํƒ€ ๋•Œ๋ฌธ์ด์—ˆ์Œ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์ง€๋งŒ, ์ด์ฒ˜๋Ÿผ ์• ๋“œ์„ผ์Šค ๊ด‘๊ณ  ์˜ค๋ฅ˜๋ฅผ ์ฐพ์•„ ๋ถ„์„ํ•˜๋Š” ๊ณผ์ •์€ ๊ฒฐ์ฝ” ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์˜ค๋Š˜์€ ์• ๋“œ์„ผ์Šค ๊ด‘๊ณ  ์˜ค๋ฅ˜๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ชจ๋‹ˆํ„ฐ๋งํ•˜๊ณ  ํ•ด๊ฒฐํ•˜๋Š” ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ•๊ณผ ํ•จ๊ป˜, ๋ธ”๋กœ๊ทธ์— ๋ฐ”๋กœ ์ ์šฉ ๊ฐ€๋Šฅํ•œ ์œ„์ ฏ ํ˜•ํƒœ์˜ ๊ด‘๊ณ  ๋ชจ๋‹ˆํ„ฐ ์ฝ”๋“œ๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

๋ฐ์ผ๋ฆฌํ—ˆ๋ธŒ์˜ ๊ด‘๊ณ  ๋…ธ์ถœ๊ณผ ๋ฏธ๋…ธ์ถœ ํ˜„ํ™ฉ 2

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

์˜ค๋ฅ˜ ๋‹จ๊ณ„ ์ƒํƒœ ๋ฉ”์‹œ์ง€ ์›์ธ ๋ฐ ์„ค๋ช…
1๋‹จ๊ณ„ ์ฝ”๋“œ ๋ฏธ์ž‘๋™ ๊ด‘๊ณ  ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹คํ–‰๋˜์ง€ ์•Š์•˜๊ฑฐ๋‚˜ ๋ทฐํฌํŠธ ๋Œ€๊ธฐ ์ค‘์ธ ์ƒํƒœ
2-3๋‹จ๊ณ„ ์ „์†ก ์˜ค๋ฅ˜ Iframe์ด ์ƒ์„ฑ๋˜์ง€ ์•Š์•„ ๊ด‘๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค์ง€ ๋ชปํ•จ
4๋‹จ๊ณ„ ์„œ๋ฒ„ ์‘๋‹ต ๋Œ€๊ธฐ ๊ตฌ๊ธ€ ์„œ๋ฒ„์— ์š”์ฒญ์€ ๋ณด๋ƒˆ์œผ๋‚˜ ์•„์ง ์‘๋‹ต์„ ๋ฐ›์ง€ ๋ชปํ•œ ์ดˆ๊ธฐํ™” ์ƒํƒœ
5๋‹จ๊ณ„ ๊ด‘๊ณ  ์žฌ๊ณ  ์—†์Œ ํ•ด๋‹น ํŽ˜์ด์ง€์˜ ์ฝ˜ํ…์ธ ์— ์ ํ•ฉํ•œ ๊ด‘๊ณ ๊ฐ€ ์—†์–ด ์†ก์ถœ์ด ์ค‘๋‹จ๋œ ์ƒํƒœ
์™„๋ฃŒ ์ •์ƒ ์†ก์ถœ ๊ด‘๊ณ ๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ๋กœ๋“œ๋˜์–ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋…ธ์ถœ๋˜๋Š” ์ƒํƒœ

๋ฐ์ผ๋ฆฌํ—ˆ๋ธŒ์˜ ๊ด‘๊ณ  ๋…ธ์ถœ๊ณผ ๋ฏธ๋…ธ์ถœ ์ƒํ™ฉ 3

1. ์• ๋“œ์„ผ์Šค ์ฝ”๋“œ ๋ฏธ์ž‘๋™ (1๋‹จ๊ณ„)

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

2. Iframe ์ƒ์„ฑ ์‹คํŒจ ๋ฐ ์ „์†ก ์˜ค๋ฅ˜ (2-3๋‹จ๊ณ„)

๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค๋Š” Iframe์ด๋ผ๋Š” ํ‹€ ์•ˆ์— ๊ด‘๊ณ ๋ฅผ ๋‹ด์•„ ๋ณด๋ƒ…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ๋ณด์•ˆ ์„ค์ •์ด๋‚˜ ๊ด‘๊ณ  ์ฐจ๋‹จ ํ”„๋กœ๊ทธ๋žจ(AdBlocker) ๋“ฑ์ด ์ž‘๋™ํ•˜๋ฉด ์ด Iframe ์ž์ฒด๊ฐ€ ์ƒ์„ฑ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‹ค์ œ ์‚ฌ์šฉ ํ™˜๊ฒฝ์—์„œ ๊ฐ€์žฅ ๋นˆ๋ฒˆํ•˜๊ฒŒ ๋ฐœ์ƒํ•˜๋Š” ๊ธฐ์ˆ ์  ์˜ค๋ฅ˜ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

3. ๊ตฌ๊ธ€ ์„œ๋ฒ„ ์‘๋‹ต ๋Œ€๊ธฐ ์ค‘ (4๋‹จ๊ณ„)

๊ด‘๊ณ  ์š”์ฒญ์€ ์ •์ƒ์ ์œผ๋กœ ๊ตฌ๊ธ€๋กœ ์ „๋‹ฌ๋˜์—ˆ์œผ๋‚˜, ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” ๊ณผ์ •์—์„œ ๋”œ๋ ˆ์ด๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ์‹ ๊ทœ ์ƒ์„ฑ๋œ ๊ด‘๊ณ  ๋‹จ์œ„์ด๊ฑฐ๋‚˜ ์‚ฌ์ดํŠธ์˜ ๋กœ๋”ฉ ์†๋„๊ฐ€ ์ง€๋‚˜์น˜๊ฒŒ ๋А๋ฆด ๋•Œ ์ด ๊ตฌ๊ฐ„์—์„œ ์ •์ฒด๋˜๋Š” ํ˜„์ƒ์ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

4. ๊ด‘๊ณ  ์žฌ๊ณ  ์—†์Œ (Unfilled - 5๋‹จ๊ณ„)

๊ฐ€์žฅ ๋งŽ์€ ๋ธ”๋กœ๊ฑฐ๊ฐ€ ์–ด๋ ค์›€์„ ๊ฒช๋Š” ๋‹จ๊ณ„๊ฐ€ ๋ฐ”๋กœ "๊ด‘๊ณ  ์žฌ๊ณ  ์—†์Œ(Unfilled)" ์ƒํƒœ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๊ตฌ๊ธ€ ๊ด‘๊ณ ์ฃผ ์ค‘ ์—ฌ๋Ÿฌ๋ถ„์˜ ๊ธ€ ๋‚ด์šฉ๊ณผ ๋งค์นญ๋˜๋Š” ๊ด‘๊ณ ๊ฐ€ ์—†๊ฑฐ๋‚˜, ํŽ˜์ด์ง€ ์ €ํ’ˆ์งˆ, ์ผ์‹œ์ ์ธ ์ •์ฑ… ์œ„๋ฐ˜, ํ˜น์€ ๋นˆ๋ฒˆํ•œ ์ƒˆ๋กœ๊ณ ์นจ ๋“ฑ ๋‹ค์–‘ํ•œ ์›์ธ์œผ๋กœ ์ธํ•ด ๊ตฌ๊ธ€์ด ๊ด‘๊ณ  ์†ก์ถœ์„ ์ž ์‹œ ์ค‘๋‹จํ•œ ์ƒํƒœ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

ํŠนํžˆ ๋ธ”๋กœ๊ทธ ์šด์˜์ž์˜ PC์—์„œ๋งŒ ์ฃผ๊ธฐ์ ์œผ๋กœ ๊ด‘๊ณ ๊ฐ€ ๋ณด์ด์ง€ ์•Š๋Š” ํ˜„์ƒ์ด ๋‚˜ํƒ€๋‚˜๊ธฐ๋„ ํ•˜๋Š”๋ฐ, ์ด๋Š” ๋™์ผํ•œ IP์—์„œ์˜ ๋ฐ˜๋ณต์ ์ธ ์ ‘์†์„ ๊ตฌ๊ธ€์ด ๊ฐ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ํŠน๋ณ„ํ•œ ์ •์ฑ… ์œ„๋ฐ˜ ์‚ฌํ•ญ์ด ์—†๋‹ค๋ฉด, ๋ณ„๋„์˜ ์กฐ์น˜ ์—†์ด ์‹œ๊ฐ„์ด ํ๋ฅธ ๋’ค ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ณต๊ตฌ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์œผ๋ฏ€๋กœ ๋„ˆ๋ฌด ๊ฑฑ์ •ํ•˜์ง€ ์•Š์œผ์…”๋„ ๋ฉ๋‹ˆ๋‹ค.

5. ์ƒํƒœ ํ™•์ธ ๋ถˆ๊ฐ€ ๋ฐ ์•Œ ์ˆ˜ ์—†๋Š” ์˜ค๋ฅ˜

๊ทธ๋Ÿฌ๋‚˜ ์œ„์™€ ๊ฐ™์€ ๋ช…ํ™•ํ•œ ์›์ธ์ด ์—†๋Š”๋ฐ๋„, '5๋‹จ๊ณ„: ๊ด‘๊ณ  ์žฌ๊ณ  ์—†์Œ(Unfilled)'๊ณผ ๋น„์Šทํ•œ ์ƒํƒœ์—์„œ ๋žœ๋ค์œผ๋กœ ๊ด‘๊ณ ๊ฐ€ ๋‚˜์˜ค์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ๊ฐ€์žฅ ๊ณจ์น˜ ์•„ํ”ˆ ์ƒํ™ฉ์ž…๋‹ˆ๋‹ค.

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

.

์‹ค์‹œ๊ฐ„ ์• ๋“œ์„ผ์Šค ๊ด‘๊ณ  ์ง„๋‹จ ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง ์œ„์ ฏ

์‹ค์‹œ๊ฐ„ ์• ๋“œ์„ผ์Šค ๊ด‘๊ณ  ์ง„๋‹จ ๋ฐ ๋ชจ๋‹ˆํ„ฐ๋ง ์ฝ”๋“œ ์ ์šฉ ๋ฐฉ๋ฒ•

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

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

์• ๋“œ์„ผ์Šค ์˜ค๋ฅ˜ ์ง„๋‹จ ์ฝ”๋“œ (๊ณต๊ฐœ์šฉ ๋ฒ„์ „)

์• ๋“œ์„ผ์Šค ์ง„๋‹จ ์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์„ ์š”์•ฝํ•˜์—ฌ ์„ค๋ช…ํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ด ์ฝ”๋“œ๋Š” ๊ด‘๊ณ ๊ฐ€ ๋กœ๋“œ๋˜๋Š” 5๋‹จ๊ณ„ ๊ณผ์ •์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ถ”์ ํ•˜์—ฌ ์‹œ๊ฐ์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

1. HTML ๋ณธ๋ฌธ์— ์ถœ๋ ฅ ์œ„์น˜ ๋งŒ๋“ค๊ธฐ

div id="ads-moniter"
 /div

2. ์Šคํฌ๋ฆฝํŠธ

realtime-adsense-ad-monitoring-widget.js
0.00MB

์ด ์ฝ”๋“œ๋Š” ํฌ๊ฒŒ ๋‘ ๊ณณ์— ์ •๋ณด๋ฅผ ๋ฟŒ๋ ค์ค๋‹ˆ๋‹ค.

  • ๊ด‘๊ณ  ์ƒ๋‹จ (Mini Label): ๋ณธ๋ฌธ์˜ ๊ฐ ๊ด‘๊ณ (ins.adsbygoogle) ๋ฐ”๋กœ ์œ„์— aside ํƒœ๊ทธ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ #1 - ์™„๋ฃŒ: ์ •์ƒ ์†ก์ถœ ๊ฐ™์€ ๋ผ๋ฒจ์„ ๋ถ™์ž…๋‹ˆ๋‹ค.
  • ์ง€์ •๋œ ์œ„์น˜ (Main Monitor): ๋ณธ๋ฌธ์— div id="ads-moniter"/div๋ฅผ ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด ๋‘์…จ๋‹ค๋ฉด, ์Šคํฌ๋ฆฝํŠธ๊ฐ€ document.getElementById('ads-moniter')๋ฅผ ํ†ตํ•ด ํ•ด๋‹น ์œ„์น˜๋ฅผ ์ฐพ์•„ ๊ทธ ์•ˆ์— ์ƒ์„ธ ์ง„๋‹จ ๋ฆฌ์ŠคํŠธ(Slot ID ํฌํ•จ)๋ฅผ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์š” ๊ธฐ๋Šฅ ์š”์•ฝ

  • ์‹ค์‹œ๊ฐ„ ๋‹จ๊ณ„๋ณ„ ์ง„๋‹จ: ๊ด‘๊ณ  ์ฝ”๋“œ๊ฐ€ ๋“ค์–ด๊ฐ„ ์‹œ์ ๋ถ€ํ„ฐ ์‹ค์ œ ๊ด‘๊ณ ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚  ๋•Œ๊นŒ์ง€์˜ ๊ณผ์ •์„ 5๋‹จ๊ณ„(์ฝ”๋“œ ๋ฏธ์ž‘๋™ ์ „์†ก ์˜ค๋ฅ˜ ์‘๋‹ต ๋Œ€๊ธฐ ์žฌ๊ณ  ์—†์Œ ์™„๋ฃŒ)๋กœ ๋‚˜๋ˆ„์–ด ์ƒํƒœ๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.
  • ์šด์˜์ž/์ž์ฒด ๊ด‘๊ณ  ์‹๋ณ„: ๊ด‘๊ณ  ๋‹จ์œ„์˜ ํด๋ผ์ด์–ธํŠธ ID๋ฅผ ํ™•์ธํ•˜์—ฌ ํ•ด๋‹น ๊ด‘๊ณ ๊ฐ€ ๋ธ”๋กœ๊ทธ ์šด์˜์ž์˜ ๊ฒƒ์ธ์ง€, ์•„๋‹ˆ๋ฉด ํ”Œ๋žซํผ(ํ‹ฐ์Šคํ† ๋ฆฌ) ์ž์ฒด ๊ด‘๊ณ ์ธ์ง€๋ฅผ ์ƒ‰์ƒ๊ณผ ํ…์ŠคํŠธ๋กœ ๊ตฌ๋ถ„ํ•ด ์ค๋‹ˆ๋‹ค.
  • ์ž๋™ ๋ฆฌ์†Œ์Šค ๊ด€๋ฆฌ (Intersection Observer): ์‚ฌ์šฉ์ž๊ฐ€ ๊ด‘๊ณ  ์œ„์น˜๋กœ ์Šคํฌ๋กค์„ ๋‚ด๋ ธ์„ ๋•Œ๋งŒ ์ง„๋‹จ์„ ์‹œ์ž‘ํ•˜๋ฉฐ, 10์ดˆ๊ฐ€ ์ง€๋‚˜๋ฉด ์ง„๋‹จ ๋ผ๋ฒจ๊ณผ ๋ชจ๋‹ˆํ„ฐ๋ง ๋ฐ•์Šค๋ฅผ ์ž๋™์œผ๋กœ ์ œ๊ฑฐํ•˜์—ฌ ๋ธ”๋กœ๊ทธ ์†๋„ ์ €ํ•˜๋ฅผ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  • ์‹œ๊ฐ์  ๊ฐ€์ด๋“œ (๋ผ๋ฒจ๋ง): ๊ฐ ๊ด‘๊ณ  ์Šฌ๋กฏ ๋ฐ”๋กœ ์œ„์— ์ƒํƒœ ๋ฉ”์‹œ์ง€๋ฅผ ๋ถ€์ฐฉํ•˜์—ฌ, ์–ด๋–ค ์œ„์น˜์˜ ๊ด‘๊ณ ๊ฐ€ ์™œ ์•ˆ ๋‚˜์˜ค๋Š”์ง€ ์ง๊ด€์ ์œผ๋กœ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋•์Šต๋‹ˆ๋‹ค.

์ง„๋‹จ ๋‹จ๊ณ„๋ณ„ ์˜๋ฏธ

  1. 1๋‹จ๊ณ„: ๊ด‘๊ณ  ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์•„์ง ์‹คํ–‰๋˜์ง€ ์•Š์•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž๊ฐ€ ํ•ด๋‹น ์œ„์น˜๊นŒ์ง€ ๋„๋‹ฌํ•˜์ง€ ์•Š์Œ.
  2. 2-3๋‹จ๊ณ„: ๊ด‘๊ณ ๋ฅผ ๋‹ด์„ ํ‹€(Iframe)์ด ์ƒ์„ฑ๋˜์ง€ ์•Š์Œ (๋„คํŠธ์›Œํฌ ๋ฌธ์ œ๋‚˜ ์ฐจ๋‹จ ํ”„๋กœ๊ทธ๋žจ ์˜์‹ฌ).
  3. 4๋‹จ๊ณ„: ๊ตฌ๊ธ€ ์„œ๋ฒ„์— ์š”์ฒญ์€ ๋ณด๋ƒˆ์œผ๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๋Š” ์ค‘.
  4. 5๋‹จ๊ณ„: ์š”์ฒญ์€ ์„ฑ๊ณตํ–ˆ์œผ๋‚˜ ํ˜„์žฌ ํŽ˜์ด์ง€ ๋‚ด์šฉ์— ๋งž๋Š” ๊ด‘๊ณ ๊ฐ€ ์—†์Œ (Unfilled).
  5. ์™„๋ฃŒ: ๋ชจ๋“  ๊ณผ์ •์ด ์ •์ƒ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜์–ด ๊ด‘๊ณ ๊ฐ€ ๋…ธ์ถœ๋จ.

์ด ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๊ด‘๊ณ  ๋ฏธ๋…ธ์ถœ์˜ ์›์ธ์ด ๋‚ด ์ฝ”๋“œ์˜ ์˜คํƒ€์ธ์ง€, ์•„๋‹ˆ๋ฉด ๊ตฌ๊ธ€ ์ธก์˜ ๊ด‘๊ณ  ์žฌ๊ณ  ๋ฌธ์ œ์ธ์ง€๋ฅผ ๋ช…ํ™•ํžˆ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ์ˆ˜์ต ์œ„ํ•œ ์ตœ์ข… ์ฒดํฌ๋ฆฌ์ŠคํŠธ

๋งˆ์ง€๋ง‰์œผ๋กœ ๊ด‘๊ณ ๊ฐ€ ๋‹ค์‹œ ์ •์ƒ์ ์œผ๋กœ ๋‚˜์˜ค๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค๋ฉด, ๋‹ค์Œ ํ•ญ๋ชฉ๋“ค์„ ์ ๊ฒ€ํ•˜์„ธ์š”.

  1. ๊ด‘๊ณ  ์ฐจ๋‹จ ํ”„๋กœ๊ทธ๋žจ(Adblock)์ด ์ผœ์ ธ ์žˆ๋Š”์ง€ ๋‚ด ๋ธŒ๋ผ์šฐ์ €๋ถ€ํ„ฐ ํ™•์ธํ•˜๊ธฐ
  2. ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค ๊ด€๋ฆฌ ํŽ˜์ด์ง€์—์„œ '์‚ฌ์ดํŠธ' ์ƒํƒœ๊ฐ€ '์ค€๋น„๋จ'์ธ์ง€ ์žฌํ™•์ธ
  3. ๊ด‘๊ณ  ์ฝ”๋“œ๊ฐ€ ๊นจ์ง€์ง€ ์•Š๋„๋ก HTML ๋ชจ๋“œ์—์„œ ์ •ํ™•ํ•˜๊ฒŒ ์‚ฝ์ž…ํ–ˆ๋Š”์ง€ ํ™•์ธ
  4. ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ ๊ด‘๊ณ ๊ฐ€ ๋ณธ๋ฌธ ๋ฐ–์œผ๋กœ ์‚์ ธ๋‚˜๊ฐ€์ง€ ์•Š๋Š”์ง€ ๊ฒ€์ˆ˜
  5. ์ง„๋‹จ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด 5๋‹จ๊ณ„ '๊ด‘๊ณ  ์žฌ๊ณ  ์—†์Œ'์ด ์ง€์†๋œ๋‹ค๋ฉด ๋ณธ๋ฌธ ์ฝ˜ํ…์ธ ์˜ ์งˆ ๋†’์ด๊ธฐ

์• ๋“œ์„ผ์Šค ๊ด‘๊ณ  ์˜ค๋ฅ˜๋Š” ์œ„์—์„œ ์ œ๊ณตํ•œ ์‹ค์‹œ๊ฐ„ ์ง„๋‹จ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ์— ๊ธฐ๋ฐ˜ํ•œ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์œผ์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.