๐Ÿ”ฎ ์ฝ”๋“œ๋กœ ์กฐ์ ˆํ•˜๋Š” ๊ฐ€๋ณ€ ํฐํŠธ Recursi | ์ปค๋ฆฌ์–ด๋ฆฌ

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

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

๋Œ“๊ธ€ 0

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

์ง€๋‚œ์ฃผ ์ปค๋ฆฌ์–ด๋ฆฌ์—์„œ ์ธ๊ธฐ ์žˆ๋˜ ๊ฒŒ์‹œ๋ฌผ์ด์—์š”!

โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ
โ€Œโ€Œ

ํ˜„์ง์ž๋“ค์˜ '์ง„์งœ ์ธ์‚ฌ์ดํŠธ'๊ฐ€ ๋‹ด๊ธด ์—…๊ณ„ ์ฃผ์š” ์†Œ์‹์„ ๋ฐ›์•„๋ณด์„ธ์š”.

์ปค๋ฆฌ์–ด๋ฆฌ | ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์ปค๋ฆฌ์–ด SNS