๐Ÿ›  Variable ํฐํŠธ, ๋” ์œ ์—ฐํ•ด์ ธ (feat. ๊ฐœ๋ฐœ์ž์˜ ์‹œ์„ )

dodo itยท2025๋…„ 6์›” 25์ผ
1

UX/UI

๋ชฉ๋ก ๋ณด๊ธฐ
5/6
post-thumbnail

๋ณดํ†ต ํฐํŠธ ํ† ํฐ์„ ๋“ฑ๋กํ•  ๋•Œ,
Variable์„ ์‚ฌ์šฉํ•ด์„œ fontWeight์„ ์ด์šฉํ•ด
ํฐํŠธ์˜ ๋‘๊ป˜ ์กฐ์ ˆ์„ ๋ฏธ๋””์—„๊ณผ ๋‘ ๊ฐ€์ง€ ํฐํŠธ ํ† ํฐ์— ์ฐจ์ด๋ฅผ ์ฃผ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค๋Š” ๊ฑธ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค.

-๋‘๋‘ฅ-

(์›ฌ๋งŒํ•ด์„  ํ† ํฐ์„ ๋งŽ์ด ๋งŒ๋“œ๋Š” ๊ฑธ ์ง€์–‘ํ•˜๋Š” st)
๊ฐœ๋ฐœ์ž์˜ ํด๋ฆฐ์ฝ”๋“œ๋ฅผ ์œ„ํ•ด(?)
๊ทธ๋ž˜์„œ ํ•ญ์ƒ ๋ผ๋ฒจ๊ณผ ๋ณธ๋ฌธ ํ…์ŠคํŠธ์˜ ์ฐจ์ด๋ฅผ ๊ตณ์ด ๊ตณ์ด ์ฃผ์ง€ ์•Š์•˜๋‹ค.

Variable Font์˜ ๋‘๊ป˜ ์กฐ์ ˆ๋„ ์žˆ๊ตฌ๋‚˜~ ์•Œ์•„๊ฐ€๋ฉด ์ข‹์„ ๊ฑฐ ๊ฐ™๋‹ค.

โœ… ์žฅ์ ์€
โ€ข ํ•œ ํŒŒ์ผ๋กœ ๋‹ค์–‘ํ•œ fontWeight ์ปค๋ฒ„ โ†’ ์šฉ๋Ÿ‰โ†“
โ€ข weight ์กฐ์ ˆ์ด ์—ฐ์†์ ์ด์–ด์„œ ๋””ํ…Œ์ผํ•œ ์กฐ์ • ๊ฐ€๋Šฅ
โ€ข ๋ฐ˜์‘ํ˜• ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ๊ตฌ์„ฑ์—๋„ ์œ ๋ฆฌ

โš ๏ธ ๊ทธ๋Ÿฐ๋ฐ ๋‹จ์ ์€?

๋‹คํฌ๋ชจ๋“œ์—์„œ Variable Font์˜ ๋‘๊ป˜ ์กฐ์ ˆ์€ ์ •๋ง ์กฐ์‹ฌํ•ด์•ผ ํ•˜๋Š”๋ฐ, ์‹œ๊ฐ์  ๋Œ€๋น„(contrast) ๋ฌธ์ œ๋กœ ์ธํ•ด ๋” ๋šœ๋ ทํ•œ ๋‹จ์ ๋“ค์ด ์ƒ๊ธด๋‹ค.

โ€ข ๊ฒ€์ • ๋ฐฐ๊ฒฝ ์œ„์˜ ํšŒ์ƒ‰ ํ…์ŠคํŠธ(์˜ˆ: #A0A0A0)๋Š”
๋ฐ์€ ๋ฐฐ๊ฒฝ ์œ„์˜ ๋™์ผํ•œ ํšŒ์ƒ‰๋ณด๋‹ค ํ›จ์”ฌ ๋” ๊ฐ€๋Š˜๊ณ  ํ๋ฆฌ๊ฒŒ ๋ณด์ธ๋‹ค.

โ€ข ํŠนํžˆ fontWeight: 400 ์ดํ•˜๋Š” ๋‹คํฌ๋ชจ๋“œ์—์„œ ์‹œ์ธ์„ฑ์ด ๊ธ‰๊ฒฉํžˆ ๋‚ฎ์•„์ง.

์ด๋ฏธ ๋งˆ์ดํฌ๋กœ ํ•˜๊ฒŒ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋‚˜์—๊ฒŒ๋Š”
Variable๊นŒ์ง€ ์จ์„œ fontweight ์กฐ์ ˆ๊นŒ์ง€ ํ•˜๋Š” ๊ฑด X!!
๊ทธ๋ƒฅ ์ด๋Ÿฐ ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค๋Š” ๊ฒƒ์œผ๋กœ ๋๋‚ด๊ฒ ๋‹ค.

๋น ๋ฅด๊ฒŒ ๊ฒฐ๊ณผ๋ฌผ์„ ๋‚ด๋Š” ๊ฒƒ์— ์ง‘์ค‘์„ ํ•˜๊ธฐ๋กœ ๐Ÿฅฒ

profile
๋„๊ตฌ์™€ ๋ฐฉ์‹์— ๊ฒฝ๊ณ„ ๋‘์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ธฐํš๊ณผ ๊ฐœ๋ฐœ๊นŒ์ง€ ์ œ ์†๋„์— ๋งž์ถฐ ๊พธ์ค€ํžˆ ๊ฑธ์–ด๊ฐ€๊ณ  ์žˆ๋Š” ๊ฐœ์ž์ด๋„ˆ ์ž…๋‹ˆ๋‹ค๐Ÿ‘ฉ๐Ÿปโ€๐Ÿš€

0๊ฐœ์˜ ๋Œ“๊ธ€