๐Ÿ”ค์›น ํฐํŠธ ์„ฑ๋Šฅ ์˜ํ–ฅ ๋ถ„์„๊ธฐ

ํฐํŠธ ํŒŒ์ผ ์ˆ˜ยทํฌ๊ธฐ ๊ธฐ๋ฐ˜ ํŽ˜์ด์ง€ ๋ Œ๋”๋ง ์ง€์—ฐ ์˜ˆ์ธก

๊ฐœ
KB

์›นํฐํŠธ, ์˜ˆ์˜์ง€๋งŒ ๋А๋ ค์งˆ ์ˆ˜ ์žˆ๋‹ค

์ปค์Šคํ…€ ์›นํฐํŠธ๋Š” ๋ธŒ๋žœ๋“œ ์•„์ด๋ดํ‹ฐํ‹ฐ์— ํฐ ๋„์›€์„ ์ฃผ์ง€๋งŒ, ํŒŒ์ผ์ด ๋งŽ๊ฑฐ๋‚˜ ์šฉ๋Ÿ‰์ด ํฌ๋ฉด ํ…์ŠคํŠธ๊ฐ€ ๋ณด์ด๊ธฐ๊นŒ์ง€ ์‹œ๊ฐ„์ด ๊ฑธ๋ ค ์‚ฌ์šฉ์ž๊ฐ€ ์ฒด๊ฐํ•˜๋Š” ๋กœ๋”ฉ ์†๋„๋ฅผ ๋–จ์–ด๋œจ๋ฆฝ๋‹ˆ๋‹ค. ์ด ๋„๊ตฌ๋Š” ํฐํŠธ ํŒŒ์ผ ๊ฐœ์ˆ˜, ์ด ์šฉ๋Ÿ‰, font-display ์ „๋žต์„ ์ž…๋ ฅํ•˜๋ฉด ์˜ˆ์ƒ ๋ Œ๋”๋ง ์ง€์—ฐ ์‹œ๊ฐ„์„ ๋ฐ€๋ฆฌ์ดˆ ๋‹จ์œ„๋กœ ์ถ”์ •ํ•ด์ค๋‹ˆ๋‹ค.

font-display ์ „๋žต๋ณ„ ์ฒด๊ฐ ์ง€์—ฐ ๋ฐฐ์œจ

์ „๋žต๋ฐฐ์œจ
block1.0๋ฐฐ (ํ…์ŠคํŠธ ์ˆจ๊น€, ์ฒด๊ฐ ์ง€์—ฐ ์ตœ๋Œ€)
auto0.7๋ฐฐ
fallback0.5๋ฐฐ
swap0.3๋ฐฐ (๋Œ€์ฒด ํฐํŠธ ๋จผ์ € ํ‘œ์‹œ)
optional0.15๋ฐฐ (์ฒด๊ฐ ์ง€์—ฐ ์ตœ์†Œ)

์ง€์—ฐ์„ ์ค„์ด๋Š” ์‹ค์ „ ํŒ

ํฐํŠธ ํŒŒ์ผ ์ˆ˜๋ฅผ ์ค„์ด๋ ค๋ฉด ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๋ฌธ์ž์…‹์„ ์ œ๊ฑฐํ•œ ์„œ๋ธŒ์…‹ ํฐํŠธ๋‚˜ variable font๋ฅผ ํ™œ์šฉํ•˜์„ธ์š”. font-display: swap์„ ์ ์šฉํ•˜๋ฉด ๋Œ€์ฒด ํฐํŠธ๋กœ ๋จผ์ € ํ…์ŠคํŠธ๋ฅผ ๋ณด์—ฌ์ค˜ ์ฒด๊ฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ํฌ๊ฒŒ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

font-display ์ „๋žต์ด ์ง€์—ฐ ์‹œ๊ฐ„์— ์™œ ์˜ํ–ฅ์„ ์ฃผ๋‚˜์š”?

block์€ ํฐํŠธ๊ฐ€ ๋กœ๋“œ๋  ๋•Œ๊นŒ์ง€ ํ…์ŠคํŠธ๋ฅผ ์ˆจ๊ฒจ ์ฒด๊ฐ ์ง€์—ฐ์ด ํฌ๊ณ , swap์ด๋‚˜ optional์€ ๋Œ€์ฒด ํฐํŠธ๋ฅผ ๋จผ์ € ๋ณด์—ฌ์ค˜ ์ฒด๊ฐ ์ง€์—ฐ์ด ์ค„์–ด๋“ญ๋‹ˆ๋‹ค.

ํฐํŠธ ํŒŒ์ผ ์ˆ˜๋ฅผ ์ค„์ด๋ฉด ์–ผ๋งˆ๋‚˜ ๋„์›€์ด ๋˜๋‚˜์š”?

ํŒŒ์ผ๋งˆ๋‹ค ์—ฐ๊ฒฐยท์š”์ฒญ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ์žˆ์–ด ํŒŒ์ผ ์ˆ˜๋ฅผ ์ค„์ด๋ฉด(์˜ˆ: ์„œ๋ธŒ์…‹, variable font ํ™œ์šฉ) ์ง€์—ฐ์ด ํฌ๊ฒŒ ์ค„์–ด๋“ญ๋‹ˆ๋‹ค.

์ด ๊ฐ’์€ ์‹ค์ œ ๋กœ๋”ฉ ์†๋„์™€ ๋˜‘๊ฐ™๋‚˜์š”?

์•„๋‹™๋‹ˆ๋‹ค. ๋„คํŠธ์›Œํฌ ํ™˜๊ฒฝ, ์บ์‹œ ์—ฌ๋ถ€, ํฐํŠธ ์„œ๋ฒ„ ์œ„์น˜์— ๋”ฐ๋ผ ์‹ค์ œ ๊ฐ’์€ ๋‹ฌ๋ผ์ง€๋ฏ€๋กœ ์ฐธ๊ณ ์šฉ ์ถ”์ •์น˜๋กœ ํ™œ์šฉํ•˜์„ธ์š”.