์ ์๊ฐ ์ง๊ตฌ ์์ ์ ๋ฐ๊พธ์ง ์๋๋ค๊ณ ๋๊ฐ ๋ณด์ฅํ๋
์น ์ฑ๋ฅ ์งํ์ธ CLS(Cumulative Layout Shift)์๋ ํํ ์ด๋ฐ ์๋ฌต์ ํฉ์๊ฐ ์กด์ฌํ๋ค.
0.1 ์ดํ = ๋ฌธ์ ์์,
0.01 ๋ฏธ๋ง = ์ฒด๊ฐ ๋ถ๊ฐ,
0.001? ๋ฌด์ํด๋ ๋๋ ์์น.
ํ์ง๋ง ์ ๋ง ๊ทธ๋ด๊น.
์ธก์ ๋์ง ์๋ ๋ณํ๋ ์กด์ฌํ์ง ์๋ ๊ฒ์ผ๊น?
์๋๋ฉด ๋จ์ง ์ธก์ ์์ ํ๊ณ์ผ ๋ฟ์ผ๊น?
์ด ๊ธ์ CLS 0.001์ ๋ฌด์ํด๋ ๋๋ค๋ ํต๋ ์ ์์ฌํ๋ฉด์ ์์๋ ์ง์ํ ์ถ์ ๊ธฐ๋ก์ด๋ฉฐ, ๊ทธ ๋์์ ์นํฐํธ๊ฐ ๋ ์ด์์์ ์ด๋ป๊ฒ ๊ต๋ํ๋์ง๋ฅผ ์ค์ฆ์ ์ผ๋ก ๋๋ฌ๋ธ ๋ถ์ ๋ณด๊ณ ์๋ค.

1. CLS๋ ์ฌ์ฉ์ ๊ฒฝํ ์งํ๊ฐ ์๋๋ผ, ์์คํ ์์ ์ฑ ์งํ๋ค
CLS๋ ํํ UX ๊ด์ ์์๋ง ์ด์ผ๊ธฐ๋๋ค.
- ๋ฒํผ์ด ๋ฐ๋ ธ๋๊ฐ?
- ์ฌ์ฉ์๊ฐ ์คํด๋ฆญ์ ํ๋๊ฐ?
- ํ๋ฉด์ด ๋์ ๋๊ฒ ํ๋ค๋ ธ๋๊ฐ?
์ด ๊ธฐ์ค์ผ๋ก ๋ณด๋ฉด CLS 0.001์ ํ์คํ ์๋ฌด ๋ฌธ์ ๋ ์๋ ์์น๋ค.
๊ทธ๋ฌ๋ CLS์ ์ ์๋ฅผ ๋ค์ ๋ณด๋ฉด ์ด์ผ๊ธฐ๊ฐ ๋ฌ๋ผ์ง๋ค.
CLS๋ ์ฌ์ฉ์ ์ํธ์์ฉ ์์ด ๋ฐ์ํ ๋ ์ด์์ ์์น ๋ณํ์ ๋์ ๊ฐ์ด๋ค.
์ฌ๊ธฐ์๋ ์ฒด๊ฐ์ด๋ผ๋ ์กฐ๊ฑด์ด ์๋ค.
์์ง์๋๊ฐ, ์๋๊ฐ๋ง ์๋ค.
์ฆ CLS๋ UX ์งํ ์ด์ ์,
๋ ๋๋ง ํ์ดํ๋ผ์ธ์ด ์ผ๋ง๋ ์์ ์ ์ผ๋ก ๋์ํ๋์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ ์์คํ
์งํ๋ค.
2. 0.001์ ๋ฌด์ํด๋ ๋๋ค๋ ๋ง์ ๋ ผ๋ฆฌ์ ์ค๋ฅ
๋ฌด์ํด๋ ๋๋ค๋ ๋ง์ ๋ณดํต ์ด๋ฐ ์ ์ ๋ฅผ ๊น๊ณ ์๋ค.
- ๋ณํ๋ ์์ผ๋
- ์ํฅ์ ์๊ณ
- ๊ฒฐ๊ณผ๋ ๋์ผํ๋ค
ํ์ง๋ง ์ด๊ฑด ๊ฒฐ๊ณผ๋ก ์ ํ๋จ์ด๋ค.
๊ณผํ์ด๋ ์์ง๋์ด๋ง์์ ๊ฒฐ๊ณผ๋ก ์ ๊ฐ์ฅ ์ํํ๋ค.

- ์ ๋ณํ๊ฐ ๋ฐ์ํ๋๊ฐ?
- ์ด๋ค ์์๊ฐ ๊ฐ์ ํ๋๊ฐ?
- ์ ๊ฑฐํ๋ฉด ์ฌ๋ผ์ง๋๊ฐ?
์ด ์ง๋ฌธ์ ๋ตํ์ง ์์ ์ฑ
์ํฅ ์์ผ๋ ๋ฌด์๋ ์์ธ ๋ถ์์ ํฌ๊ธฐํ ์ ์ธ์ ๊ฐ๊น๋ค.

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 ๊ธฐ๋ณธ ์์คํ ํฐํธ ์คํ ์ฌ์ฉ
๊ฒฐ๊ณผ๋ ๋ช ํํ๋ค.
- CLS: 0
- ํ๋ค๋ฆผ: ์์ ์ ๊ฑฐ
- LCP, FCP ๋ณํ ์์
์ด ์๊ฐ ํ๋์ ๊ฒฐ๋ก ์ด ๋์ถ๋๋ค.
์นํฐํธ๋ ๋๋ ค์ ๋ฌธ์ ๊ฐ ์๋๋ผ
์กด์ฌํ๋ ๊ฒ ์์ฒด๋ก ๋ ์ด์์ ํ์ ์์ ์ ๊ต๋ํ๋ค

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์ด
์ ์ฒด ๊ตฌ์กฐ์ ์ง์ค์ ๋๋ฌ๋ธ๋ค.