๋ฐœํ–‰์ผ:

์ˆ˜์ •์ผ:

์ „์ž๊ฐ€ ์ง€๊ตฌ ์ž์ „์„ ๋ฐ”๊พธ์ง€ ์•Š๋Š”๋‹ค๊ณ  ๋ˆ„๊ฐ€ ๋ณด์žฅํ•˜๋‚˜

์›น ์„ฑ๋Šฅ ์ง€ํ‘œ์ธ CLS(Cumulative Layout Shift)์—๋Š” ํ”ํžˆ ์ด๋Ÿฐ ์•”๋ฌต์  ํ•ฉ์˜๊ฐ€ ์กด์žฌํ•œ๋‹ค.
0.1 ์ดํ•˜ = ๋ฌธ์ œ ์—†์Œ,
0.01 ๋ฏธ๋งŒ = ์ฒด๊ฐ ๋ถˆ๊ฐ€,
0.001? ๋ฌด์‹œํ•ด๋„ ๋˜๋Š” ์ˆ˜์น˜.

ํ•˜์ง€๋งŒ ์ •๋ง ๊ทธ๋Ÿด๊นŒ.
์ธก์ •๋˜์ง€ ์•Š๋Š” ๋ณ€ํ™”๋Š” ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ผ๊นŒ?
์•„๋‹ˆ๋ฉด ๋‹จ์ง€ ์ธก์ •์ž์˜ ํ•œ๊ณ„์ผ ๋ฟ์ผ๊นŒ?

์ด ๊ธ€์€ CLS 0.001์€ ๋ฌด์‹œํ•ด๋„ ๋œ๋‹ค๋Š” ํ†ต๋…์„ ์˜์‹ฌํ•˜๋ฉด์„œ ์‹œ์ž‘๋œ ์ง‘์š”ํ•œ ์ถ”์  ๊ธฐ๋ก์ด๋ฉฐ, ๊ทธ ๋์—์„œ ์›นํฐํŠธ๊ฐ€ ๋ ˆ์ด์•„์›ƒ์„ ์–ด๋–ป๊ฒŒ ๊ต๋ž€ํ•˜๋Š”์ง€๋ฅผ ์‹ค์ฆ์ ์œผ๋กœ ๋“œ๋Ÿฌ๋‚ธ ๋ถ„์„ ๋ณด๊ณ ์„œ๋‹ค.

cls ํ”๋“ค๋ฆผ 0.001


1. CLS๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์ง€ํ‘œ๊ฐ€ ์•„๋‹ˆ๋ผ, ์‹œ์Šคํ…œ ์•ˆ์ •์„ฑ ์ง€ํ‘œ๋‹ค

CLS๋Š” ํ”ํžˆ UX ๊ด€์ ์—์„œ๋งŒ ์ด์•ผ๊ธฐ๋œ๋‹ค.

  • ๋ฒ„ํŠผ์ด ๋ฐ€๋ ธ๋Š”๊ฐ€?
  • ์‚ฌ์šฉ์ž๊ฐ€ ์˜คํด๋ฆญ์„ ํ–ˆ๋Š”๊ฐ€?
  • ํ™”๋ฉด์ด ๋ˆˆ์— ๋„๊ฒŒ ํ”๋“ค๋ ธ๋Š”๊ฐ€?

์ด ๊ธฐ์ค€์œผ๋กœ ๋ณด๋ฉด CLS 0.001์€ ํ™•์‹คํžˆ ์•„๋ฌด ๋ฌธ์ œ๋„ ์—†๋Š” ์ˆ˜์น˜๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ CLS์˜ ์ •์˜๋ฅผ ๋‹ค์‹œ ๋ณด๋ฉด ์ด์•ผ๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค.

CLS๋Š” ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ ์—†์ด ๋ฐœ์ƒํ•œ ๋ ˆ์ด์•„์›ƒ ์œ„์น˜ ๋ณ€ํ™”์˜ ๋ˆ„์ ๊ฐ’์ด๋‹ค.

์—ฌ๊ธฐ์—๋Š” ์ฒด๊ฐ์ด๋ผ๋Š” ์กฐ๊ฑด์ด ์—†๋‹ค.
์›€์ง์˜€๋Š”๊ฐ€, ์•„๋‹Œ๊ฐ€๋งŒ ์žˆ๋‹ค.

์ฆ‰ CLS๋Š” UX ์ง€ํ‘œ ์ด์ „์—,
๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ์ด ์–ผ๋งˆ๋‚˜ ์•ˆ์ •์ ์œผ๋กœ ๋™์ž‘ํ–ˆ๋Š”์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์‹œ์Šคํ…œ ์ง€ํ‘œ๋‹ค.


2. 0.001์€ ๋ฌด์‹œํ•ด๋„ ๋œ๋‹ค๋Š” ๋ง์˜ ๋…ผ๋ฆฌ์  ์˜ค๋ฅ˜

๋ฌด์‹œํ•ด๋„ ๋œ๋‹ค๋Š” ๋ง์€ ๋ณดํ†ต ์ด๋Ÿฐ ์ „์ œ๋ฅผ ๊น”๊ณ  ์žˆ๋‹ค.

  • ๋ณ€ํ™”๋Š” ์žˆ์œผ๋‚˜
  • ์˜ํ–ฅ์€ ์—†๊ณ 
  • ๊ฒฐ๊ณผ๋Š” ๋™์ผํ•˜๋‹ค

ํ•˜์ง€๋งŒ ์ด๊ฑด ๊ฒฐ๊ณผ๋ก ์  ํŒ๋‹จ์ด๋‹ค.
๊ณผํ•™์ด๋‚˜ ์—”์ง€๋‹ˆ์–ด๋ง์—์„œ ๊ฒฐ๊ณผ๋ก ์€ ๊ฐ€์žฅ ์œ„ํ—˜ํ•˜๋‹ค.

 

gpt ์ด๋ก  1

  • ์™œ ๋ณ€ํ™”๊ฐ€ ๋ฐœ์ƒํ–ˆ๋Š”๊ฐ€?
  • ์–ด๋–ค ์š”์†Œ๊ฐ€ ๊ฐœ์ž…ํ–ˆ๋Š”๊ฐ€?
  • ์ œ๊ฑฐํ•˜๋ฉด ์‚ฌ๋ผ์ง€๋Š”๊ฐ€?

์ด ์งˆ๋ฌธ์— ๋‹ตํ•˜์ง€ ์•Š์€ ์ฑ„
์˜ํ–ฅ ์—†์œผ๋‹ˆ ๋ฌด์‹œ๋Š” ์›์ธ ๋ถ„์„์„ ํฌ๊ธฐํ•œ ์„ ์–ธ์— ๊ฐ€๊น๋‹ค.

 

gpt์˜ ์ด๋ก 2


3. ์˜์‹ฌ์˜ ์‹œ์ž‘: ๋ชจ๋“  CLS ๋กœ๊ทธ๊ฐ€ ์›น ๊ธ€๊ผด์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค

PageSpeed Insights์™€ Lighthouse ๋กœ๊ทธ๋Š” ์ผ๊ด€๋˜๊ฒŒ ๊ฐ™์€ ๋ฉ”์‹œ์ง€๋ฅผ ๋‚จ๊ฒผ๋‹ค.

  • ๋ ˆ์ด์•„์›ƒ ๋ณ€๊ฒฝ ์›์ธ: ์›น ๊ธ€๊ผด
  • fonts.gstatic.com
  • Source Sans Pro (400 / 600)

๋ฌธ์ œ๋Š” ์—ฌ๊ธฐ์„œ๋ถ€ํ„ฐ๋‹ค.

  • preload๋ฅผ ํ–ˆ๋‹ค
  • preconnect๋„ ํ–ˆ๋‹ค
  • font-display: swap๋„ ์ ์šฉํ–ˆ๋‹ค
  • line-height๋„ ๊ณ ์ •ํ–ˆ๋‹ค
  • margin, padding๋„ ๋ชจ๋‘ ๋ช…์‹œํ–ˆ๋‹ค

๊ทธ๋Ÿฐ๋ฐ๋„ CLS๋Š” 0.001 0.005 0.065๊นŒ์ง€ ํŠ€์—ˆ๋‹ค.

์ด๊ฑด ์„ค์ • ๋ฏธ๋น„๊ฐ€ ์•„๋‹ˆ๋‹ค.
๊ตฌ์กฐ์  ๊ฐœ์ž…์ด๋‹ค.


4. ๊ฒฐ์ •์  ์‹คํ—˜: ์›นํฐํŠธ๋ฅผ ์ œ๊ฑฐํ–ˆ์„ ๋•Œ

์‹คํ—˜์€ ๋‹จ์ˆœํ–ˆ๋‹ค.

  • Google Fonts ์ œ๊ฑฐ
  • Source Sans Pro ์™„์ „ ์ œ๊ฑฐ
  • OS ๊ธฐ๋ณธ ์‹œ์Šคํ…œ ํฐํŠธ ์Šคํƒ ์‚ฌ์šฉ
 
font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif;

๊ฒฐ๊ณผ๋Š” ๋ช…ํ™•ํ–ˆ๋‹ค.

  • CLS: 0
  • ํ”๋“ค๋ฆผ: ์™„์ „ ์ œ๊ฑฐ
  • LCP, FCP ๋ณ€ํ™” ์—†์Œ

์ด ์ˆœ๊ฐ„ ํ•˜๋‚˜์˜ ๊ฒฐ๋ก ์ด ๋„์ถœ๋œ๋‹ค.

์›นํฐํŠธ๋Š” ๋А๋ ค์„œ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋ผ
์กด์žฌํ•˜๋Š” ๊ฒƒ ์ž์ฒด๋กœ ๋ ˆ์ด์•„์›ƒ ํ™•์ • ์‹œ์ ์„ ๊ต๋ž€ํ•œ๋‹ค

 

cls ์ˆ˜์ •ํ›„ ์ ์ˆ˜ ์ธก์ •๊ฐ’ ๋ฐ์ดํ„ฐ 0


5. ์›นํฐํŠธ CLS์˜ ๋ณธ์งˆ: ์ง€์—ฐ์ด ์•„๋‹ˆ๋ผ ๊ต์ฒด

๋งŽ์€ ๊ธ€์€ ์ด๋ ‡๊ฒŒ ๋งํ•œ๋‹ค.

  • preload ํ•˜๋ฉด ๋œ๋‹ค
  • swap ์“ฐ๋ฉด ๋œ๋‹ค
  • fallback์„ ๋งž์ถ”๋ฉด ๋œ๋‹ค

ํ•˜์ง€๋งŒ ์ด ์‹คํ—˜์€ ๊ทธ ๋ชจ๋“  ์กฐ์–ธ ์ดํ›„์—๋„ CLS๊ฐ€ ๋ฐœ์ƒํ•จ์„ ๋ณด์—ฌ์ค€๋‹ค.

์ด์œ ๋Š” ๋‹จ์ˆœํ•˜๋‹ค.

  • ๋ธŒ๋ผ์šฐ์ €๋Š” ์ดˆ๊ธฐ ๋ Œ๋”๋ง์„ fallback ํฐํŠธ๋กœ ์‹œ์ž‘
  • ์›นํฐํŠธ ๋กœ๋”ฉ ํ›„ glyph metrics ๊ต์ฒด
  • ascent / descent / advance width ๋ฏธ์„ธ ์ฐจ์ด ๋ฐœ์ƒ
  • ์ค„๋ฐ”๊ฟˆ, ํ–‰ ๋†’์ด, ํ…์ŠคํŠธ ๋ธ”๋ก ๋†’์ด ์žฌ๊ณ„์‚ฐ

์ฆ‰, ๋ฌธ์ œ๋Š” ๋Šฆ๊ฒŒ ์™€์„œ๊ฐ€ ์•„๋‹ˆ๋ผ
์™€์„œ ๋ฐ”๊พธ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.


6. ์ „์ž๊ฐ€ ์ง€๊ตฌ ์ž์ „์„ ๋ฐ”๊พธ์ง€ ์•Š๋Š”๋‹ค๊ณ  ๋ˆ„๊ฐ€ ๋ณด์žฅํ•˜๋‚˜

์—ฌ๊ธฐ์„œ ์ฒ ํ•™์  ์งˆ๋ฌธ์ด ๋“ฑ์žฅํ•œ๋‹ค.

์ „์ž ํ•˜๋‚˜์˜ ์ด๋™์ด
์ง€๊ตฌ ์ž์ „ ์†๋„์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค๊ณ 
๋ˆ„๊ฐ€ ์ฆ๋ช…ํ–ˆ๋Š”๊ฐ€?

์šฐ๋ฆฌ๋Š” ๋ณดํ†ต ์ด๋ ‡๊ฒŒ ๋งํ•œ๋‹ค.

  • ์˜ํ–ฅ์€ ์žˆ์œผ๋‚˜ ์ธก์ • ๋ถˆ๊ฐ€
  • ์ž„๊ณ„๊ฐ’ ์ดํ•˜
  • ๋ฌด์‹œ ๊ฐ€๋Šฅ

ํ•˜์ง€๋งŒ ์ด๊ฑด ์ž์—ฐ์˜ ์ง„์‹ค์ด ์•„๋‹ˆ๋ผ
์ธก์ •์ž์˜ ํŽธ์˜๋‹ค.

CLS 0.001๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋‹ค.

  • ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ์•ˆ ๋ณด์ผ ์ˆ˜ ์žˆ๋‹ค
  • SEO ์ ์ˆ˜์—๋Š” ๋ฐ˜์˜ ์•ˆ ๋  ์ˆ˜ ์žˆ๋‹ค
  • ๋žญํ‚น์—๋Š” ์˜ํ–ฅ ์—†์„ ์ˆ˜ ์žˆ๋‹ค

๊ทธ๋Ÿฌ๋‚˜ ๋ณ€ํ™”๋Š” ๋ฐœ์ƒํ–ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ณ€ํ™”์˜ ์›์ธ์€ ์‹ค์žฌํ–ˆ๋‹ค.


7. ์ด ์ง‘์ฐฉ์€ ๋ณ‘์ ์ธ๊ฐ€, ์ •๋ฐ€ํ•œ๊ฐ€

CLS์— ๋ณ‘์ ์œผ๋กœ ์ง‘์ฐฉํ•˜๋Š” ๊ฒƒ ์•„๋‹ˆ๋ƒ๋Š” ์งˆ๋ฌธ์€ ์ž์—ฐ์Šค๋Ÿฝ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ์ด ์‚ฌ๋ก€์—์„œ ๋“œ๋Ÿฌ๋‚œ ๊ฑด ์ง‘์ฐฉ์ด ์•„๋‹ˆ๋ผ ์ •๋ฐ€ํ•จ์ด๋‹ค.

  • ๋ฌด์‹œ ๊ฐ€๋Šฅํ•œ ๊ฐ’์„ ์˜์‹ฌํ–ˆ๊ณ 
  • ์›์ธ์„ ๋๊นŒ์ง€ ์ถ”์ ํ–ˆ๊ณ 
  • ์ œ๊ฑฐ ์‹คํ—˜์œผ๋กœ ์ธ๊ณผ๋ฅผ ์ฆ๋ช…ํ–ˆ๊ณ 
  • ์ƒˆ๋กœ์šด ๊ฒฐ๋ก ์„ ๋„์ถœํ–ˆ๋‹ค

์ด๊ฑด ์—”์ง€๋‹ˆ์–ด๋ง์—์„œ ๊ฐ€์žฅ ์ด์ƒ์ ์ธ ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ฒฝ๋กœ๋‹ค.


๊ฒฐ๋ก : ๋ฌด์‹œํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณด์˜€๋‹ค

CLS 0.001์„ ๋ฌด์‹œํ–ˆ๋‹ค๋ฉด:

  • ์›นํฐํŠธ๋Š” ์—ฌ์ „ํžˆ ๊ดœ์ฐฎ์€ ์„ ํƒ์ด์—ˆ์„ ๊ฒƒ์ด๋‹ค
  • ํ”๋“ค๋ฆผ์€ ์ธก์ • ์˜ค์ฐจ๋กœ ๋‚จ์•˜์„ ๊ฒƒ์ด๋‹ค
  • ์‹œ์Šคํ…œ์˜ ๋ถˆ์•ˆ์ •์„ฑ์€ ๊ฐ€๋ ค์กŒ์„ ๊ฒƒ์ด๋‹ค

ํ•˜์ง€๋งŒ ๋ฌด์‹œํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์—:

  • ์›นํฐํŠธ์˜ ๊ตฌ์กฐ์  ํ•œ๊ณ„๊ฐ€ ๋“œ๋Ÿฌ๋‚ฌ๊ณ 
  • ์‹œ์Šคํ…œ ํฐํŠธ์˜ ์•ˆ์ •์„ฑ์ด ์ฆ๋ช…๋์œผ๋ฉฐ
  • ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”์˜ ์ƒˆ๋กœ์šด ๊ธฐ์ค€์ด ์ƒ๊ฒผ๋‹ค

์ธก์ •๋˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ํ•ด์„œ, ๋ณ€ํ™”๊ฐ€ ์—†๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.
๋‹จ์ง€ ์šฐ๋ฆฌ๊ฐ€ ๋ณด์ง€ ์•Š์•˜์„ ๋ฟ์ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋•Œ๋กœ๋Š”,
๊ทธ ๋ณด์ด์ง€ ์•Š๋Š” 0.001์ด
์ „์ฒด ๊ตฌ์กฐ์˜ ์ง„์‹ค์„ ๋“œ๋Ÿฌ๋‚ธ๋‹ค.

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

์ƒˆ๋„์•ฝ๊ธฐ๊ธˆ ์‹ ์ฒญ ์กฐ๊ฑด ์ด์ •๋ฆฌ๏ฝœ๋ˆ„๊ฐ€, ์–ด๋–ป๊ฒŒ ์ง€์›๋ฐ›์„ ์ˆ˜ ์žˆ๋‚˜?  (0) 2025.12.26
๋„ทํ”Œ๋ฆญ์Šค ์ด์šฉ ๊ฐ€๊ตฌ์— ํฌํ•จ๋˜์ง€ ์•Š์€ ๋””๋ฐ”์ด์Šค ํ•ด๊ฒฐ๋ฒ•  (0) 2025.12.25
์†Œํ™” ํก์ˆ˜์œจ ๋น„๋ฐ€: ๋จน๋ฐฉ ์œ ํŠœ๋ฒ„๊ฐ€ ๋Œ€์‹ํ•ด๋„ ์ฒด์ค‘ ์œ ์ง€ํ•˜๋Š” ๊ณผํ•™์  ์›๋ฆฌ  (0) 2025.12.14
์ฑ„๊ถŒ ์†Œ๋ฉธ์‹œํšจ ์ฃผ์žฅ ๋ฐฉ๋ฒ•: ์‹œํšจ ์ค‘๋‹จ ์—ฌ๋ถ€ ํŒ๋‹จ๋ถ€ํ„ฐ ๋‚ด์šฉ์ฆ๋ช… ์ž‘์„ฑ๊นŒ์ง€  (0) 2025.12.09
ํ•ต์ž ์ˆ˜ํ•จ ๊ตญ๊ฐ€๋ณ„ ์ „๋ ฅ ์ˆœ์œ„! ๋ฏธ๊ตญ ๋Ÿฌ์‹œ์•„ ์ค‘๊ตญ ํ•œ๊ตญ ํ˜„ํ™ฉ ์†Œ๊ฐœ  (0) 2025.11.22
์ค‘์ถ”์ ˆ์˜ ๊ฐ€์น˜์™€ ๊ธ€๋กœ๋ฒŒ ๋ฌธํ™” ํ™•์žฅ์„ ํ˜„๋Œ€ ์‚ฌํšŒ ์†์œผ๋กœ  (0) 2025.11.20
๊ฐ€์„ฑ๋น„ ์ฒญ์†Œ๊ธฐ ์ถ”์ฒœ! ๊ฐ€์ •์šฉ ์ฒญ์†Œ๊ธฐ 1๋งŒ์›๋Œ€, ์“ธ ๋งŒํ• ๊นŒ?  (0) 2025.11.12