๐Ÿ”ฎ ์ฝ”๋“œ๋กœ ์กฐ์ ˆํ•˜๋Š” ๊ฐ€๋ณ€ ํฐํŠธ Recursive Sans & Mono Recursive ํฐํŠธ(https://www.recursive.design/)๋Š” ๊ฐ€๋ณ€ ํฐํŠธ(variable font)๋กœ ๋ฏธ๋ฆฌ ์ •์˜๋œ 5๊ฐ€์ง€ ์Šคํƒ€์ผ ์ถ•์˜ ์ˆ˜์น˜๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ๋ชจ๋…ธ ์ŠคํŽ˜์ด์Šค ํฐํŠธ, ์ฝ”๋ฏน ์‚ฐ์Šค ๊ฐ™์€ ์บ์ฃผ์–ผ ํฐํŠธ, ํ•„๊ธฐ์ฒด ๋“ฑ์„ ๋งŒ๋“ค๊ฑฐ๋‚˜ ํฐํŠธ ๊ตต๊ธฐ, ๊ธฐ์šธ๊ธฐ ๋“ฑ์„ ์กฐ์ ˆํ•˜์—ฌ ์Šคํƒ€์ผ๋ง ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“  ํฐํŠธ์ž…๋‹ˆ๋‹ค. ์„์‚ฌ ๋…ผ๋ฌธ์œผ๋กœ ์‹œ์ž‘๋œ ์ด ํ”„๋กœ์ ํŠธ๋Š” Google Font๋ถ€ํ„ฐ ์ปค๋ฏธ์…˜์„ ๋ฐ›์•„ ์˜คํ”ˆ ์†Œ์Šค ํฐํŠธ๋กœ ์ •์‹ ์ถœ์‹œ๋˜์—ˆ๊ณ , ์›น์‚ฌ์ดํŠธ์—์„œ ํ…Œ์ŠคํŠธํ•ด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด ๊ฐ€๋ณ€ ํฐํŠธ๋“ค์€ ์ฃผ๋กœ ๊ตต๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๋Š” ์‹์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋˜์–ด ์™”๋Š”๋ฐ, ์ €์ž๋Š” ์ด๋ฅผ ๋„˜์–ด ๋” ๋‹ค์–‘ํ•œ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์Œ์„ ๋งํ•ด์ฃผ๋ฉด์„œ ์™œ variable font๊ฐ€ ์ค‘์š”ํ•œ์ง€์— ๊ด€ํ•ด ์„ค๋ช…ํ•˜๊ณ  ์›๋ฆฌ์™€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•ˆ๋‚ดํ•ฉ๋‹ˆ๋‹ค. 1๏ธโƒฃ ์™œ ๊ฐ€๋ณ€ ํฐํŠธ๊ฐ€ ํ•„์š”ํ•œ๊ฐ€? ํฐํŠธ ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์••์ถ•์‹œํ‚ด. ๊ธฐ๋ณธ ํฐํŠธ ํ•˜๋‚˜๋ฅผ ๋‘๊ณ  ๋‚˜๋จธ์ง€ variation์€ ๋ชจ๋‘ ์ฝ”๋“œ๋กœ ์ฒ˜๋ฆฌ๋˜๋ฏ€๋กœ, ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ํ˜„์ €ํ•˜๊ฒŒ ๋‚ฎ์ถœ ์ˆ˜ ์žˆ์Œ. 2๏ธโƒฃ ์–ด๋–ค ์›๋ฆฌ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋Š”๊ฐ€? ๋ฒกํ„ฐ๋กœ ์ด๋ฃจ์–ด์ง„ ๊ธ€๋ฆฌํ”„์— ์ปจํŠธ๋กค ํฌ์ธํŠธ๋“ค์„ ๋‘๊ณ  ์ˆ˜์น˜์— ๋”ฐ๋ผ ์ด๋ฅผ ์˜ฎ๊ธฐ๋Š” ์‹. Casual ์ถ•์˜ ๊ฒฝ์šฐ ์ปค๋ธŒ๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ณ€๊ณก์ ์„ ์ฝ”๋„ˆ์— ์–ผ๋งˆ๋‚˜ ๊ฐ€๊น๊ฒŒ ๋‘๋Š๋ƒ์— ๋”ฐ๋ผ ์ฝ”๋ฏน์‚ฐ์Šค ๊ฐ™์€ ๋ชจ์–‘์ด ๋˜๊ฑฐ๋‚˜ ์ „ํ˜•์ ์ธ ์‚ฐ์„ธ๋ฆฌํ”„ ๊ธ€๊ผด์ด ๋  ์ˆ˜ ์žˆ์Œ. (https://videopress.com/v/90AkMOai) ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ์— Kinetic animation์„ ์ ์šฉํ•œ Dia studio(https://bit.ly/2CSJPSL)์™€ ๊ฐ™์€ ์ž‘์—…์„ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•ด๋ณด๊ฑฐ๋‚˜, ๊ณ ๊ฐ์ด ์š”๊ตฌํ•˜๋Š” ์ปค์Šคํ…€ ํฐํŠธ์— ์ผ์ผ์ด ๋Œ€์‘ํ•ด์•ผ ํ•˜๋Š” SaaS ์ œํ’ˆ์— ์ด๋Ÿฐ variable font๋ฅผ ์ ์šฉํ•ด๋ณด๋Š” ๊ฒƒ์€ ์–ด๋–จ๊นŒ์š”? ๋ฏธ๋ž˜์—๋Š” ๋” ๋‹ค์–‘ํ•œ ์Šคํฌ๋ฆฐ ์‚ฌ์ด์ฆˆ๊ฐ€ ๋‚˜์˜ฌ ํ…๋ฐ ์ด๋Ÿฐ ์œ ์—ฐํ•œ ํฐํŠธ๋“ค์ด ์ข€ ๋” ์ƒ์šฉํ™”๊ฐ€ ๋˜์ง€ ์•Š์„๊นŒ์š”? ๐Ÿ“ช ํ”ผ๋“œ๋ฐฑ์€ ํŠธ์œ„ํ„ฐ https://twitter.com/001xm

Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks

CSS-Tricks

Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks

๋‹ค์Œ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

๋˜๋Š”

์ด๋ฏธ ํšŒ์›์ด์‹ ๊ฐ€์š”?

2020๋…„ 8์›” 23์ผ ์˜คํ›„ 4:49

๋Œ“๊ธ€ 0




๋น„์Šทํ•œ ๊ฒŒ์‹œ๋ฌผ

์ฃผ๊ฐ„ ์ธ๊ธฐ TOP 10

1

์ด์žฅ๊ทผ NAVER ๋ฐ์ดํ„ฐ๋ถ„์„

2024 ํ•˜๋ฐ˜๊ธฐ IT ์ปจํผ๋Ÿฐ์Šค

2

๋ฐ•์Šน๊ทœ ์นด์นด์˜ค์—”ํ„ฐํ…Œ์ธ๋จผํŠธ ๋‹ค๋‹ˆ๋Š” ๋‹ค์žฌ๋‹ค๋Šฅํ•œ ๊ฐœ๋ฐœ์ž

์ด๋ ฅ์„œ๋ฅผ ํŽธํ•˜๊ฒŒ ๋งŒ๋“ญ์‹œ๋‹ค - resumemaker

3

์กฐํ˜„์šฑ ํŽ˜์ด์›Œ์น˜ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด

15๋…„ ์ „ ๋‚˜์—๊ฒŒ ํ•ด์ฃผ๊ณ  ์‹ถ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์กฐ์–ธ

4

K๋ฆฌ๊ทธ ํ”„๋กœ๊ทธ๋ž˜๋จธ ์ปคํ”ผํ•œ์ž” ๊ฐœ๋ฐœ์ž

์ฃฝ์„ ๋งŒํผ ํž˜๋“  ๋‚ ์€ ์—†์—ˆ๋‹ค

5

์„œ์ง€์—ฐ ๊ฐœ๋ฐœ์ž

๊ธˆ์œต ์‹œ์Šคํ…œ ๊ตฌ์ถ•์„ ์œ„ํ•œ ์—”์ง€๋‹ˆ์–ด๋ง ์›์น™

์ถ”์ฒœ ํ”„๋กœํ•„