์—ฌ๊ธฐ์— ๊ด‘๊ณ ๋ฅผ ๋„ฃ์œผ์„ธ์š”
๐Ÿ‡ฐ๐Ÿ‡ท KO

๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๊ฒ€์‚ฌ๊ธฐ โ€” ๋ฌด๋ฃŒ ๋ชจ๋ฐ”์ผ ์นœํ™”์  ํ…Œ์ŠคํŠธ

100%
์•„์ดํฐ 15 Pro ยท 393 ร— 852
9:41

์‚ฌ์ดํŠธ ๋ณดํ˜ธ๋จ

์ด ์‚ฌ์ดํŠธ๋Š” ํ”„๋ ˆ์ž„ ๋‚ด ํ‘œ์‹œ๋ฅผ ์ฐจ๋‹จํ•ฉ๋‹ˆ๋‹ค.

์ƒˆ ์ฐฝ์œผ๋กœ ์—ด๊ธฐ
๋ฌด๋ฃŒ ยท ํšŒ์›๊ฐ€์ž… ๋ถˆํ•„์š”
๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๊ฒ€์‚ฌ๊ธฐ — ๋ฌด๋ฃŒ ๋ชจ๋ฐ”์ผ ์นœํ™”์  ํ…Œ์ŠคํŠธ

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

๋ชจ๋ฐ”์ผ 375px ํƒœ๋ธ”๋ฆฟ 768px ๋ฐ์Šคํฌํ†ฑ 1280px 100% ๋น„๊ณต๊ฐœ ์‹ค์‹œ๊ฐ„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
5๋งŒ+
ํ…Œ์ŠคํŠธ๋œ ์›น์‚ฌ์ดํŠธ
3
๊ธฐ๊ธฐ ๋ทฐํฌํŠธ
100%
๋ฌด๋ฃŒ & ๋น„๊ณต๊ฐœ
< 1์ดˆ
๋กœ๋”ฉ ์†๋„

๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๊ฒ€์‚ฌ๊ธฐ๋ž€?

๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๊ฒ€์‚ฌ๊ธฐ๋Š” ์‹ค์ œ ๊ธฐ๊ธฐ ์—†์ด๋„ ์›น์‚ฌ์ดํŠธ๊ฐ€ ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์™€ ๊ธฐ๊ธฐ ์œ ํ˜•์—์„œ ์–ด๋–ป๊ฒŒ ๋ Œ๋”๋ง๋˜๋Š”์ง€ ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์žˆ๋Š” ์˜จ๋ผ์ธ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ์ •ํ™•ํ•œ ๋ชจ๋ฐ”์ผ ์นœํ™”์  ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ๋ฅผ ๋ช‡ ์ดˆ ๋งŒ์— ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ์‹ค์ œ ๊ธฐ๊ธฐ ๋ทฐํฌํŠธ ์น˜์ˆ˜๋ฅผ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋„๊ตฌ๋Š” ์ƒŒ๋“œ๋ฐ•์Šค ์ฒ˜๋ฆฌ๋œ iFrame์„ ์‚ฌ์šฉํ•˜์—ฌ ํƒ€๊ฒŸ URL์„ ์ •ํ™•ํ•œ ๋ทฐํฌํŠธ(๋ชจ๋ฐ”์ผ 375px, ํƒœ๋ธ”๋ฆฟ 768px, ๋ฐ์Šคํฌํ†ฑ 1280px) ๋‚ด์—์„œ ๋ธŒ๋ผ์šฐ์ €์— ์ง์ ‘ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์Šคํฌ๋ฆฐ์ƒท ์‹œ๋ฎฌ๋ ˆ์ด์…˜์ด ์•„๋‹Œ ์‹ค์ œ ๋ Œ๋”๋ง ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

CSS ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ๋””๋ฒ„๊น…ํ•˜๋Š” ์›น ๊ฐœ๋ฐœ์ž, ํ”ฝ์…€ ๋‹จ์œ„ ๋ ˆ์ด์•„์›ƒ์„ ํ™•์ธํ•˜๋Š” ๋””์ž์ด๋„ˆ, ํ˜น์€ ๋ชจ๋“  ๊ธฐ๊ธฐ์—์„œ ๋žœ๋”ฉ ํŽ˜์ด์ง€๊ฐ€ ์ž˜ ๋ณด์ด๋Š”์ง€ ํ™•์ธํ•˜๋ ค๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ์˜ค๋„ˆ๋ผ๋ฉด, ์ด ๋„๊ตฌ๋Š” ๊ฐ€์žฅ ๋น ๋ฅธ ๋ฌด๋ฃŒ ์†”๋ฃจ์…˜์ž…๋‹ˆ๋‹ค.

์‹ค์‹œ๊ฐ„ ๋ทฐํฌํŠธ ๋ Œ๋”๋ง โ€” ์Šคํฌ๋ฆฐ์ƒท ์•„๋‹˜

๋ชจ๋ฐ”์ผ ์นœํ™”์„ฑ์ด ํ•„์ˆ˜์ธ ์ด์œ 

๊ตฌ๊ธ€์˜ ๋ชจ๋ฐ”์ผ ์šฐ์„  ์ธ๋ฑ์‹ฑ์€ ์ˆœ์œ„๊ฐ€ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ ์„ฑ๋Šฅ์— ๋‹ฌ๋ ค ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์›น ํŠธ๋ž˜ํ”ฝ์˜ 63%๋Š” ๋ชจ๋ฐ”์ผ

์›น์‚ฌ์ดํŠธ ๋ฐฉ๋ฌธ์˜ ์ ˆ๋ฐ˜ ์ด์ƒ์ด ์Šค๋งˆํŠธํฐ์—์„œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊นจ์ง„ ๋ชจ๋ฐ”์ผ ๋ ˆ์ด์•„์›ƒ์€ ์ž ์žฌ ๊ณ ๊ฐ ๋Œ€๋‹ค์ˆ˜๋ฅผ ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด๊ธฐ๋„ ์ „์— ์žƒ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. (์ถœ์ฒ˜: Statista, 2024)

๊ตฌ๊ธ€ ๋ชจ๋ฐ”์ผ ์šฐ์„  ์ธ๋ฑ์‹ฑ

2023๋…„๋ถ€ํ„ฐ ๊ตฌ๊ธ€์€ ์ฃผ๋กœ ์›น์‚ฌ์ดํŠธ์˜ ๋ชจ๋ฐ”์ผ ๋ฒ„์ „์„ ์ธ๋ฑ์‹ฑ ๋ฐ ์ˆœ์œ„์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ ์นœํ™”์  ํ…Œ์ŠคํŠธ์— ์‹คํŒจํ•œ ์‚ฌ์ดํŠธ๋Š” ์ตœ์ ํ™”๋œ ๊ฒฝ์Ÿ์‚ฌ๋ณด๋‹ค ๋‚ฎ์€ ์ˆœ์œ„๋ฅผ ๋ฐ›์Šต๋‹ˆ๋‹ค.

3์ดˆ ์•ˆ์— 53% ์ดํƒˆ

์—ฐ๊ตฌ์— ๋”ฐ๋ฅด๋ฉด ๋ชจ๋ฐ”์ผ์—์„œ 3์ดˆ ์ด๋‚ด์— ์ œ๋Œ€๋กœ ๋กœ๋“œ๋˜๊ฑฐ๋‚˜ ํ‘œ์‹œ๋˜์ง€ ์•Š์œผ๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ์ดํƒˆํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜์‘ํ˜• ๋””์ž์ธ ๊ฒ€์‚ฌ๊ธฐ๋กœ ์ „ํ™˜์œจ์— ์•…์˜ํ–ฅ์„ ๋ฏธ์น˜๊ธฐ ์ „์— ๋ ˆ์ด์•„์›ƒ ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ•˜์„ธ์š”. (์ถœ์ฒ˜: Google/SOASTA Research)

๋” ๋†’์€ ์ „ํ™˜์œจ

๋ชจ๋ฐ”์ผ์— ์ตœ์ ํ™”๋œ ์‚ฌ์ดํŠธ๋Š” ๊ทธ๋ ‡์ง€ ์•Š์€ ์‚ฌ์ดํŠธ๋ณด๋‹ค ์ „ํ™˜์œจ์ด ์ตœ๋Œ€ 160% ๋” ๋†’์Šต๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์—์„œ ์›น์‚ฌ์ดํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋ฉด ๋ชจ๋“  ๋ฐฉ๋ฌธ์ž๊ฐ€ ์›ํ™œํ•œ ๊ฒฝํ—˜์„ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (์ถœ์ฒ˜: Adobe, 2023)

๋ฐ˜์‘ํ˜• ํ…Œ์ŠคํŠธ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ฒƒ

์ „๋ฌธ๊ฐ€๊ธ‰ ๊ธฐ๋Šฅ. ๋น„์šฉ ์ œ๋กœ. ๊ณ„์ • ๋ถˆํ•„์š”.

์‹ค์‹œ๊ฐ„ ๋ผ์ด๋ธŒ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

URL์„ ๋ถ™์—ฌ๋„ฃ์œผ๋ฉด ์ •ํ™•ํ•œ ๊ธฐ๊ธฐ ๋ทฐํฌํŠธ์—์„œ ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ฆ‰์‹œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ์ด๋‚˜ ๋Œ€๊ธฐ ์—†์ด ์›น์‚ฌ์ดํŠธ ๋ฐ˜์‘ํ˜•์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ…Œ์ŠคํŠธํ•˜์„ธ์š”.

ํ”ฝ์…€ ๋‹จ์œ„ ๊ธฐ๊ธฐ ์‹œ๋ฎฌ๋ ˆ์ด์…˜

์ •ํ™•ํ•œ ํ™”๋ฉด ํ•ด์ƒ๋„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜: 375px ๋ชจ๋ฐ”์ผ(์•„์ดํฐ), 768px ํƒœ๋ธ”๋ฆฟ(์•„์ดํŒจ๋“œ), 1280px ๋ฐ์Šคํฌํ†ฑ. ๋ชจ๋“  ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋Š” ์‹ค์ œ ๊ธฐ๊ธฐ์—์„œ ๋ณด์ด๋Š” ๊ทธ๋Œ€๋กœ์ž…๋‹ˆ๋‹ค.

์›ํด๋ฆญ ์Šคํฌ๋ฆฐ์ƒท ์บก์ฒ˜

์–ด๋–ค ๊ธฐ๊ธฐ ํ™”๋ฉด์ด๋“  ํด๋ฆญ ํ•œ ๋ฒˆ์œผ๋กœ ์Šคํฌ๋ฆฐ์ƒท์„ ์บก์ฒ˜ํ•˜์„ธ์š”. ๋ฒ„๊ทธ ๋ฆฌํฌํŠธ, ํด๋ผ์ด์–ธํŠธ ํ”„๋ ˆ์  ํ…Œ์ด์…˜, ๋””์ž์ธ ๋ฌธ์„œํ™”์— ์™„๋ฒฝํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๊ธฐ๋กœ ๋ฐ”๋กœ ์ €์žฅํ•˜์„ธ์š”.

100% ๋น„๊ณต๊ฐœ & ์•ˆ์ „

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

๊ณต์œ  ๊ฐ€๋Šฅํ•œ ํ…Œ์ŠคํŠธ ๋งํฌ

ํ…Œ์ŠคํŠธ๊ฐ€ ๋ฏธ๋ฆฌ ๋กœ๋“œ๋œ ๊ณต์œ  ๊ฐ€๋Šฅํ•œ URL์„ ์ƒ์„ฑํ•˜์„ธ์š”. ํด๋ผ์ด์–ธํŠธ๋‚˜ ํŒ€์›์—๊ฒŒ ์ „์†กํ•˜๋ฉด ์ฆ‰์‹œ ๋ฆฌ๋ทฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์–‘์ธก ๋ชจ๋‘ ๊ณ„์ •์ด ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž๊ธ‰ ์ •ํ™•๋„

ํฌ๊ธฐ ์กฐ์ •๋œ ์Šคํฌ๋ฆฐ์ƒท์ด ์•„๋‹Œ ์‹ค์ œ ์ƒŒ๋“œ๋ฐ•์Šค ์ฒ˜๋ฆฌ๋œ iFrame์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, CSS ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ƒํ˜ธ์ž‘์šฉ, ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹ค์ œ ๊ธฐ๊ธฐ์—์„œ์™€ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

์ง€์›๋˜๋Š” ํ™”๋ฉด ํฌ๊ธฐ ๋ฐ ๋ทฐํฌํŠธ

์‹ค์ œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ •ํ™•ํ•œ ๋ทฐํฌํŠธ ์น˜์ˆ˜๋กœ ๋ชจ๋“  ์ฃผ์š” ๊ธฐ๊ธฐ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ํ…Œ์ŠคํŠธํ•˜์„ธ์š”.

๊ธฐ๊ธฐ ์œ ํ˜•๋ทฐํฌํŠธ ๋„ˆ๋น„์ผ๋ฐ˜ ๊ธฐ๊ธฐCSS ๋ธŒ๋ ˆ์ดํฌํฌ์ธํŠธ
๋ชจ๋ฐ”์ผ 375px ์•„์ดํฐ 14/15, ๊ฐค๋Ÿญ์‹œ S24, ํ”ฝ์…€ 8 max-width: 480px
ํƒœ๋ธ”๋ฆฟ 768px ์•„์ดํŒจ๋“œ ์—์–ด, ์•„์ดํŒจ๋“œ ๋ฏธ๋‹ˆ, ๊ฐค๋Ÿญ์‹œ ํƒญ max-width: 1024px
๋ฐ์Šคํฌํ†ฑ 1280px ๋…ธํŠธ๋ถ, ๋งฅ๋ถ, PC ๋ชจ๋‹ˆํ„ฐ min-width: 1025px

์ด๋Š” ๊ตฌ๊ธ€ web.dev ๊ฐ€์ด๋“œ๋ผ์ธ์—์„œ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ ํ…Œ์ŠคํŠธ์— ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ฒŒ ๊ถŒ์žฅํ•˜๋Š” ๋ธŒ๋ ˆ์ดํฌํฌ์ธํŠธ์ž…๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜• ํ…Œ์ŠคํŠธ ๋ฐฉ๋ฒ•

30์ดˆ ์ด๋‚ด์— ์™„์ „ํ•œ ๋ชจ๋ฐ”์ผ ์นœํ™”์  ์›น์‚ฌ์ดํŠธ ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜์„ธ์š” โ€” ์„ค์ • ๋ถˆํ•„์š”.

1

์›น์‚ฌ์ดํŠธ URL ์ž…๋ ฅ

๋ผ์ด๋ธŒ ์›น์‚ฌ์ดํŠธ URL์ด๋‚˜ ๋กœ์ปฌ ๊ฐœ๋ฐœ ์ฃผ์†Œ(HTTPS/Ngrok์„ ํ†ตํ•œ localhost)๋ฅผ ๋„๊ตฌ ์ƒ๋‹จ์˜ URL ์ž…๋ ฅ ํ•„๋“œ์— ๋ถ™์—ฌ๋„ฃ์œผ์„ธ์š”.

2

๊ธฐ๊ธฐ ๋ทฐํฌํŠธ ์„ ํƒ

์ƒ๋‹จ ํˆด๋ฐ”์—์„œ ๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ, ๋ฐ์Šคํฌํ†ฑ ์ค‘ ํ•˜๋‚˜๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ฐ˜์‘ํ˜• ๋ธŒ๋ ˆ์ดํฌํฌ์ธํŠธ ๊ฐ„์— ์ฆ‰์‹œ ์ „ํ™˜๋ฉ๋‹ˆ๋‹ค.

3

๊ฒ€์‚ฌ, ์ˆ˜์ • ๋ฐ ์Šคํฌ๋ฆฐ์ƒท

๋ ˆ์ด์•„์›ƒ ๋ฌธ์ œ, ๊นจ์ง„ ์š”์†Œ, ์˜ค๋ฒ„ํ”Œ๋กœ ๋ฌธ์ œ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ๋ฐœ๊ฒฌํ•˜์„ธ์š”. ํŒ€์ด๋‚˜ ๋ฒ„๊ทธ ๋ฆฌํฌํŠธ์šฉ์œผ๋กœ ์Šคํฌ๋ฆฐ์ƒท์„ ์บก์ฒ˜ํ•˜๋ ค๋ฉด ์Šค๋ƒ… ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์„ธ์š”.

์ด ๋ฐ˜์‘ํ˜• ๊ฒ€์‚ฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค

๋ชจ๋“  ์›น ๋ถ„์•ผ ์ „๋ฌธ๊ฐ€๋“ค์ด ์‹ ๋ขฐํ•ฉ๋‹ˆ๋‹ค โ€” ์ „๋ถ€ ๋ฌด๋ฃŒ์ž…๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ์ž

์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๋ฒ—์–ด๋‚˜์ง€ ์•Š๊ณ  CSS ๋ธŒ๋ ˆ์ดํฌํฌ์ธํŠธ ๋””๋ฒ„๊น…, ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ํ…Œ์ŠคํŠธ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ƒํ˜ธ์ž‘์šฉ์ด ๋ชจ๋ฐ”์ผ์—์„œ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.

UI/UX ๋””์ž์ด๋„ˆ

๊ฐœ๋ฐœ์— ๋„˜๊ธฐ๊ธฐ ์ „์— ๋ชจ๋“  ๊ธฐ๊ธฐ์—์„œ ํ”ฝ์…€ ๋‹จ์œ„ ๋ ˆ์ด์•„์›ƒ์„ ๊ฒ€์ฆํ•˜์„ธ์š”. ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ € ๋ทฐํฌํŠธ์—์„œ ํ”ผ๊ทธ๋งˆ-์ฝ”๋“œ ๊ตฌํ˜„์„ ํ…Œ์ŠคํŠธํ•˜์„ธ์š”.

SEO ์ „๋ฌธ๊ฐ€

๊ตฌ๊ธ€์˜ ๋ชจ๋ฐ”์ผ ์šฐ์„  ์ธ๋ฑ์‹ฑ์— ๋Œ€ํ•œ ๋ชจ๋ฐ”์ผ ์นœํ™”์„ฑ์„ ํ™•์ธํ•˜์„ธ์š”. Core Web Vitals ์ ์ˆ˜๋ฅผ ํ•ด์น  ์ˆ˜ ์žˆ๋Š” ๋ ˆ์ด์•„์›ƒ ๋ณ€๊ฒฝ ๋ฐ CLS ๋ฌธ์ œ๋ฅผ ์‹๋ณ„ํ•˜์„ธ์š”.

์—์ด์ „์‹œ & ํ”„๋ฆฌ๋žœ์„œ

ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์›น์‚ฌ์ดํŠธ๊ฐ€ ๋ชจ๋“  ํ™”๋ฉด ํฌ๊ธฐ์—์„œ ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€ ์ •ํ™•ํžˆ ๋ณด์—ฌ์ฃผ์„ธ์š”. ์ œ์•ˆ์„œ, ๋ณด๊ณ ์„œ, QA ๋ฌธ์„œ์šฉ ์Šคํฌ๋ฆฐ์ƒท์„ ์ƒ์„ฑํ•˜์„ธ์š”.

์‹ค์ œ ์ž‘๋™ ์˜์ƒ ๋ณด๊ธฐ

30์ดˆ ์•ˆ์— ๋ชจ๋“  ๊ธฐ๊ธฐ์—์„œ ์›น์‚ฌ์ดํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‹œ์ฒญํ•˜์„ธ์š”.

๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ํ…Œ์ŠคํŠธ ๋ฐฉ๋ฒ• 2๋ถ„ ๊ฐ€์ด๋“œ
0:00 / 0:00
0.5ร—
0.75ร—
1ร—
1.25ร—
1.5ร—
2ร—
AI ํŒ โ€” ์‹ค์‹œ๊ฐ„

์ฆ‰์‹œ ๋ฐ˜์‘ํ˜• ๋””์ž์ธ ํŒ

์ฃผ์ œ๋ฅผ ์„ ํƒํ•˜๊ณ  AI ๊ธฐ๋ฐ˜ ์ „๋ฌธ๊ฐ€ ํŒ์„ ์ฆ‰์‹œ ๋ฐ›์•„๋ณด์„ธ์š”.

CSS ๋ธŒ๋ ˆ์ดํฌํฌ์ธํŠธ

ํŒ ์ƒ์„ฑํ•˜๊ธฐ๋ฅผ ํด๋ฆญํ•˜๊ฑฐ๋‚˜ ์œ„์—์„œ ์ฃผ์ œ๋ฅผ ์„ ํƒํ•˜๋ฉด ์ฆ‰์‹œ ์ „๋ฌธ๊ฐ€ ํŒ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

์˜จ๋ผ์ธ ๋ฐ˜์‘ํ˜• ํ…Œ์ŠคํŠธ์— ๋Œ€ํ•ด ์•Œ์•„์•ผ ํ•  ๋ชจ๋“  ๊ฒƒ.

๋„ค โ€” ์˜์›ํžˆ 100% ๋ฌด๋ฃŒ์ž…๋‹ˆ๋‹ค. ๊ตฌ๋…, ์‹ ์šฉ์นด๋“œ ์š”๊ตฌ, ์‚ฌ์šฉ๋Ÿ‰ ์ œํ•œ, ํšŒ์›๊ฐ€์ž…์ด ์ „ํ˜€ ์—†์Šต๋‹ˆ๋‹ค. ์ „๋ฌธ ์›น ๋„๊ตฌ๋Š” ๋ˆ„๊ตฌ๋‚˜ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•ด์•ผ ํ•œ๋‹ค๋Š” ๋ฏฟ์Œ์œผ๋กœ ์ œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

๋„ค, ํ•˜์ง€๋งŒ ์กฐ๊ฑด์ด ์žˆ์Šต๋‹ˆ๋‹ค: ๋ธŒ๋ผ์šฐ์ € ํ˜ผํ•ฉ ์ฝ˜ํ…์ธ  ๋ณด์•ˆ ์ •์ฑ…์œผ๋กœ ์ธํ•ด ๋กœ์ปฌ ๊ฐœ๋ฐœ ์„œ๋ฒ„๋Š” HTTPS๋กœ ์ œ๊ณต๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. Ngrok, LocalTunnel ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ฐ˜ HTTPS ํ”„๋ก์‹œ์™€ ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ์ปฌํ˜ธ์ŠคํŠธ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๋…ธ์ถœํ•˜๊ณ  ์—ฌ๊ธฐ์„œ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ผ๋ถ€ ์›น์‚ฌ์ดํŠธ๋Š” iFrame ๋‚ด ๋กœ๋“œ๋ฅผ ์ฐจ๋‹จํ•˜๋Š” X-Frame-Options: DENY ๋˜๋Š” Content-Security-Policy: frame-ancestors 'none' HTTP ํ—ค๋”๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์‚ฌ์ดํŠธ ์ธก์˜ ๋ณด์•ˆ ์กฐ์น˜์ด๋ฉฐ ๋„๊ตฌ์˜ ๋ฒ„๊ทธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋‚˜ํƒ€๋‚˜๋Š” ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ ์ฐฝ์—์„œ ์‚ฌ์ดํŠธ๋ฅผ ์—ด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋„๊ตฌ๋Š” ์„ธ ๊ฐ€์ง€ ํ•ต์‹ฌ ๋ธŒ๋ ˆ์ดํฌํฌ์ธํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•ฉ๋‹ˆ๋‹ค: ๋ชจ๋ฐ”์ผ 375px(์•„์ดํฐ 14/15 ๋ฐ ๋Œ€๋ถ€๋ถ„์˜ ์ตœ์‹  ์•ˆ๋“œ๋กœ์ด๋“œ ํฐ), ํƒœ๋ธ”๋ฆฟ 768px(์•„์ดํŒจ๋“œ ์—์–ด / ์•„์ดํŒจ๋“œ ๋ฏธ๋‹ˆ), ๋ฐ์Šคํฌํ†ฑ 1280px(ํ‘œ์ค€ ๋…ธํŠธ๋ถ ๋ฐ ๋ชจ๋‹ˆํ„ฐ ๋ทฐํฌํŠธ).

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

์ƒ๋‹จ ํˆด๋ฐ”์—์„œ ์Šค๋ƒ… ๋ฒ„ํŠผ(์นด๋ฉ”๋ผ ์•„์ด์ฝ˜)์„ ํด๋ฆญํ•˜์„ธ์š”. ๋„๊ตฌ๊ฐ€ ํ˜„์žฌ ๊ธฐ๊ธฐ ๋ทฐํฌํŠธ์˜ ๊ณ ํ•ด์ƒ๋„ ์Šคํฌ๋ฆฐ์ƒท์„ ์บก์ฒ˜ํ•˜์—ฌ ์ž๋™์œผ๋กœ PNG ํŒŒ์ผ๋กœ ๊ธฐ๊ธฐ์— ๋‹ค์šด๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

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

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