πŸ”€μ›Ή 폰트 λ‘œλ”© μ„±λŠ₯ 예츑

폰트 파일의 μš©λŸ‰κ³Ό λ„€νŠΈμ›Œν¬ 속도λ₯Ό μ„€μ •ν•˜μ—¬ μ˜ˆμƒλ˜λŠ” λ‹€μš΄λ‘œλ“œ 지연 μ‹œκ°„μ„ λΆ„μ„ν•˜μ„Έμš”.

μ˜ˆμƒ λ‘œλ”© 지연 μ‹œκ°„

0.06초
ν™˜κ²½μ˜ˆμƒ 지연 μ‹œκ°„
μ΄ˆκ³ μ† 인터넷0.01s
λͺ¨λ°”일 LTE0.06s
3G ν™˜κ²½0.80s

μ›Ή μ„±λŠ₯의 보이지 μ•ŠλŠ” 볡병, μ›Ή 폰트 μ΅œμ ν™”

μ›Ή μ‚¬μ΄νŠΈμ˜ 심미성을 높이기 μœ„ν•΄ μ‚¬μš©ν•˜λŠ” 예쁜 μ›Ή ν°νŠΈκ°€ λ•Œλ‘œλŠ” μ‚¬μ΄νŠΈμ˜ μ„±λŠ₯을 μ €ν•΄ν•˜λŠ” κ°€μž₯ 큰 원인이 λ˜κΈ°λ„ ν•©λ‹ˆλ‹€. 특히 졜근 ꡬ글이 SEO 평가 κΈ°μ€€μœΌλ‘œ μ‚ΌλŠ” CWV(Core Web Vitals) μ§€ν‘œ 쀑 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift)λŠ” μ›Ή 폰트 λ‘œλ”© 방식에 직접적인 영ν–₯을 λ°›μŠ΅λ‹ˆλ‹€. 폰트 파일이 λ„ˆλ¬΄ 무거우면 μ‚¬μš©μžλŠ” ν…μŠ€νŠΈκ°€ λ‘œλ”©λ  λ•ŒκΉŒμ§€ 빈 화면을 보게 λ˜κ±°λ‚˜, κ°‘μžκΈ° ν°νŠΈκ°€ λ°”λ€Œλ©΄μ„œ 화면이 덜μ»₯κ±°λ¦¬λŠ” λΆˆμΎŒν•œ κ²½ν—˜μ„ ν•˜κ²Œ λ©λ‹ˆλ‹€.

이 κ³„μ‚°κΈ°λŠ” 폰트 μš©λŸ‰μ— λ”°λ₯Έ 물리적 λ‹€μš΄λ‘œλ“œ μ‹œκ°„μ„ λ„€νŠΈμ›Œν¬ μ†λ„λ³„λ‘œ μ˜ˆμΈ‘ν•˜μ—¬ λ³΄μ—¬μ€λ‹ˆλ‹€. 일반적으둜 ν•œκΈ€ ν°νŠΈλŠ” ν•œμžλ‚˜ μ‘°ν•©ν˜• λ¬Έμžκ°€ λ§Žμ•„ 영문 ν°νŠΈλ³΄λ‹€ 훨씬 μš©λŸ‰μ΄ ν½λ‹ˆλ‹€. λ”°λΌμ„œ μ„œλΈŒμ…‹(Subset) 폰트λ₯Ό μ œμž‘ν•˜μ—¬ ν•„μš”ν•œ κΈ€μžλ§Œ λ‚¨κΈ°κ±°λ‚˜, μ••μΆ•λ₯ μ΄ μš°μˆ˜ν•œ WOFF2 포맷을 적극 ν™œμš©ν•΄μ•Ό ν•©λ‹ˆλ‹€. λ³Έ 도ꡬλ₯Ό 톡해 ν˜„μž¬ μ‚¬μš© 쀑인 ν°νŠΈκ°€ 저속 λ„€νŠΈμ›Œν¬ μ‚¬μš©μžλ“€μ—κ²Œ μ–Όλ§ˆλ‚˜ 큰 뢀담을 μ£ΌλŠ”μ§€ 확인해 보고, μ΅œμ ν™”μ˜ λͺ©ν‘œ 수치λ₯Ό μ„€μ •ν•΄ λ³΄μ„Έμš”.

λ‹¨μˆœνžˆ λ‹€μš΄λ‘œλ“œ μ‹œκ°„μ„ λ„˜μ–΄μ„œ, μ›Ή 폰트 λ‘œλ”© μ „λž΅λ„ μ€‘μš”ν•©λ‹ˆλ‹€. CSS의 `font-display` 속성을 `swap`으둜 μ„€μ •ν•˜λ©΄ 폰트 λ‘œλ”© 쀑에도 μ‹œμŠ€ν…œ κΈ°λ³Έ 폰트둜 ν…μŠ€νŠΈλ₯Ό λ¨Όμ € 보여주어 체감 λŒ€κΈ° μ‹œκ°„μ„ 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ, μ‚¬μš©μžκ°€ μ‚¬μ΄νŠΈμ— μ§„μž…ν•˜μžλ§ˆμž 폰트λ₯Ό λ¨Όμ € κ°€μ Έμ˜€λ„λ‘ ``λ₯Ό μ„€μ •ν•˜λŠ” 것도 쒋은 λ°©λ²•μž…λ‹ˆλ‹€. μ„±λŠ₯κ³Ό λ””μžμΈ μ‚¬μ΄μ˜ μ™„λ²½ν•œ κ· ν˜•μ μ„ μ°ΎλŠ” 것이 성곡적인 ν”„λ‘ νŠΈμ—”λ“œ μ΅œμ ν™”μ˜ μ‹œμž‘μž…λ‹ˆλ‹€.

자주 λ¬»λŠ” 질문 (FAQ)

Q: WOFF와 WOFF2의 μ°¨μ΄λŠ” λ¬΄μ—‡μΈκ°€μš”?

A: WOFF2λŠ” WOFF보닀 μ•½ 30~50% 더 높은 μ••μΆ•λ₯ μ„ μ œκ³΅ν•˜λŠ” μ΅œμ‹  μ›Ή 폰트 ν¬λ§·μž…λ‹ˆλ‹€. λŒ€λΆ€λΆ„μ˜ λͺ¨λ˜ λΈŒλΌμš°μ €μ—μ„œ μ§€μ›ν•˜λ―€λ‘œ μš°μ„ μ μœΌλ‘œ μ‚¬μš©ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

Q: μ„œλΈŒμ…‹ ν°νŠΈλž€ λ¬΄μ—‡μΈκ°€μš”?

A: μ‹€μƒν™œμ—μ„œ 거의 쓰이지 μ•ŠλŠ” 수천 개의 κΈ€μžλ₯Ό μ œμ™Έν•˜κ³  자주 μ“°μ΄λŠ” 2,350자 μ •λ„λ§Œ 남긴 κ²½λŸ‰ν™” 폰트λ₯Ό λ§ν•©λ‹ˆλ‹€. ν•œκΈ€ μ›Ή 폰트 μš©λŸ‰μ„ 획기적으둜 μ€„μ—¬μ€λ‹ˆλ‹€.

Q: λ‘œλ”© μ‹œκ°„μ΄ λͺ‡ 초 이내여야 μ•ˆμ „ν•œκ°€μš”?

A: 이상적인 μΈν„°λž™ν‹°λΈŒ ν™˜κ²½μ„ μœ„ν•΄ 폰트 λ‘œλ”© 지연은 0.1초(100ms) μ΄λ‚΄λ‘œ λ“€μ–΄μ˜€λŠ” 것이 κ°€μž₯ μ’‹μœΌλ©°, 0.5μ΄ˆκ°€ λ„˜μ–΄κ°€λ©΄ μ΅œμ ν™”λ₯Ό κ°•λ ₯히 ꢌμž₯ν•©λ‹ˆλ‹€.