๐Ÿ”ฎ ์ฝ”๋“œ๋กœ ์กฐ์ ˆํ•˜๋Š” ๊ฐ€๋ณ€ ํฐํŠธ 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

์ง€๊ธˆ ๊ฐ€์ž…ํ•˜๊ณ  ๊ฐœ๋ฐœ ํŠธ๋ Œ๋“œ ๋‰ด์Šค๋ ˆํ„ฐ๋ฅผ ๋ฐ›์•„๋ณด์„ธ์š”!

ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ, AI/๋จธ์‹ ๋Ÿฌ๋‹ ์ค‘ ํ•˜๋‚˜๋ฅผ ๊ด€์‹ฌ ๋ถ„์•ผ๋กœ ์„ ํƒํ•˜๋ฉด ๋ฐ›์•„๋ณผ ์ˆ˜ ์žˆ์–ด์š”.

์ด๋ฉ”์ผ๋กœ ๊ฐ€์ž…ํ•˜๊ธฐ