์ƒ์„ธ ์ปจํ…์ธ 

๋ณธ๋ฌธ ์ œ๋ชฉ

Google Fonts + ํ•œ๊ตญ์–ด... ๋จธ์‹  ๋Ÿฌ๋‹ ๊ธฐ์ˆ ๋กœ ๋ฌด์žฅํ•œ ๊ตฌ๊ธ€์˜ ํ•œ๊ธ€ ์›นํฐํŠธ๋ฅผ ํ‹ฐ์Šคํ† ๋ฆฌ์— ์ ์šฉํ•ด ๋ณด๊ธฐ...

๋ณธ๋ฌธ

๋ฐ˜์‘ํ˜•

์„ค๋งˆ ๋จธ์‹  ๋Ÿฌ๋‹์ด ์ด๋Ÿฐ ๊ณณ์—๋„ ์ ์šฉ๋ ์ง€๋Š” ๋ชฐ๋ž์ง€๋งŒ, ์‚ฌ์‹ค ๊ทธ๋“ค์—๊ฒŒ ๋จธ์‹  ๋Ÿฌ๋‹์€ ๋นผ๋†“์„ ์ˆ˜ ์—†๋Š” ํ•„์‚ด๊ธฐ์ด๊ธฐ์— ๊ตฌ๊ธ€์ด ๋จธ์‹  ๋Ÿฌ๋‹์— ๊ธฐ๋ฐ˜ํ•œ ์›นํฐํŠธ๋ฅผ ๊ณต๊ฐœํ–ˆ์„ ๋•Œ ๋†€๋ผ๊ธฐ๋ณด๋‹ค๋Š” ์–ผ๋งˆ๋‚˜ ํšจ๊ณผ์ ์œผ๋กœ ๋˜ ์พŒ์ ํ•˜๊ฒŒ ์›นํฐํŠธ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์„์ง€ ๊ถ๊ธˆํ•˜๋”๊ตฐ์š”. ๊ทธ๋ž˜์„œ ์ œ ๋ธ”๋กœ๊ทธ์—๋„ ๋ฉฐ์น  ์ „์— ์ ์šฉํ•ด ๋ดค๋Š”๋ฐ์š”. ์—ญ์‹œ๋‚˜ ์ œ๋ฒ• ์พŒ์ ํ•˜๋”๊ตฐ์š”.


๊ตฌ๊ธ€์ด ๋จธ์‹  ๋Ÿฌ๋‹ ๊ธฐ์ˆ ๋กœ ์ตœ์ ํ™”ํ–ˆ๋‹ค๋Š” ํ•œ๊ธ€ ์›นํฐํŠธ๋ฅผ ๋ธ”๋กœ๊ทธ์— ์ ์šฉํ•ด ๋ดค์Šต๋‹ˆ๋‹ค...


์•„๋งˆ ๋ธ”๋กœ๊ทธ์— ์›นํฐํŠธ๋ฅผ ์ ์šฉํ•ด ๋ณด์‹  ๋ถ„์ด๋ผ๋ฉด ์•„์‹œ๊ฒ ์ง€๋งŒ, ์ผ๋ฐ˜์ ์ธ ์›นํฐํŠธ๋Š” ํŠน์„ฑ์ƒ ๋ชจ๋‘ ๋กœ๋”ฉ์ด ๋˜์–ด์•ผ ๊ธ€์ž๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ „์ฒด๊ฐ€ ๋‹ค ๋‹ค์šด๋กœ๋“œ๋˜์–ด ์บ์‹ฑ๋˜๊ธฐ ์ „์—๋Š” ๋ธ”๋กœ๊ทธ ๋กœ๋”ฉ์„ ์ง€์—ฐ์‹œํ‚ค๋Š” ์•ฝ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ข…์ข… ์ž๊ธฐ๊ฐ€ ์ข‹์•„ํ•˜๋Š” ํฐํŠธ๋ฅผ ์›นํฐํŠธ๋กœ ๋ณ€ํ™˜ํ•ด์„œ ์ ์šฉํ•˜์‹œ๋Š” ๋ถ„์ด ๊ณ„์‹ ๋ฐ ์ด ๊ฒฝ์šฐ ์ด๋Ÿฐ ๋กœ๋”ฉ์˜ ๋ฌธ์ œ์™€ ํ•จ๊ป˜ ๋ฌด๋‹จ์œผ๋กœ ์‚ฌ์šฉํ•œ ํฐํŠธ์˜ ์ €์ž‘๊ถŒ ๋ฌธ์ œ๋„ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ์š”.



'Google Fonts + ํ•œ๊ตญ์–ด'๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๊ตฌ๊ธ€์ด ์„œ๋น„์Šค ์ค‘์ธ ์ด ์›นํฐํŠธ ์„œ๋น„์Šค๋Š” ๋ธ”๋กœ๊ทธ๋‚˜ ์›น์‚ฌ์ดํŠธ์˜ ๋กœ๋”ฉ ์†๋„๋ฅผ ๋–จ์–ดํŠธ๋ ธ๋˜ ๊ธฐ์กด์˜ ์›นํฐํŠธ๊ฐ€ ๊ฐ€์ง„ ํ•œ๊ณ„๋ฅผ ๋จธ์‹  ๋Ÿฌ๋‹์— ๊ธฐ๋ฐ˜ํ•œ ์ตœ์ ํ™” ๊ธฐ์ˆ ๋กœ ๊ทน๋ณตํ–ˆ๋‹ค๊ณ  ํ•˜๋”๊ตฐ์š”. ์ฃผ์ œ๋ณ„๋กœ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๊ธ€์ž๋ฅผ ๊ทธ๋ฃนํ™”ํ•ด ํ•„์š”ํ•œ ๊ทธ๋ฃน๋งŒ ๋‹ค์šด๋กœ๋“œํ•˜๋„๋ก ํ•ด ์พŒ์ ํ•˜๊ฒŒ ๋กœ๋”ฉ๋˜๊ฒŒ ํ•˜๊ณ  ํฐํŠธ์˜ ์ €์ž‘๊ถŒ ๋ฌธ์ œ ์—ญ์‹œ ์˜คํ”ˆ ํฐํŠธ ๋ผ์ด์„ ์Šค(OFL)๋กœ ๋ˆ„๊ตฌ๋‚˜ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ๊ณ ์š”. ...ํ•˜์ง€๋งŒ, ์ง€์›ํ•˜๋Š” ํฐํŠธ๊ฐ€ ์•„์ง ์ ์€ํŽธ์ž…๋‹ˆ๋‹ค.ใ…Ž





์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์•„์ฃผ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ์ผ๋‹จ ์ œ๊ณต๋˜๋Š” ํฐํŠธ ์ค‘ ์ž๊ธฐ ๋ธ”๋กœ๊ทธ๋‚˜ ์›น์‚ฌ์ดํŠธ์— ์ ์šฉํ•˜๊ณ  ์‹ถ์€ ํฐํŠธ๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•˜๋‹จ์— HTML, CSS, ๊ตต๊ธฐ ์„ ํƒ ๊ฐ™์€ ์˜ต์…˜์ด ๋‚˜์˜ค๋Š”๋ฐ์š”. ์ด ์ฝ”๋“œ๋ฅผ ์ ์šฉํ•˜๋ฉด ๋˜์ฃ . ์ œ ๊ฒฝ์šฐ์—” ๋‚˜๋ˆ” ๊ณ ๋”• ํฐํŠธ๋ฅผ ์ œ ํ‹ฐ์Šคํ† ๋ฆฌ์— ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด HTML๋ž€์— ํ‘œ์‹œ๋œ ์ฝ”๋“œ๋ฅผ '์Šคํ‚จ ํŽธ์ง‘> html ํŽธ์ง‘' ์† HTML์˜ <Head>... </Head> ํƒœ๊ทธ ์‚ฌ์ด์— ๋„ฃ๊ณ  CSS์˜ font-family: ํ•ญ๋ชฉ์— Nanum Gothic์„ ์ถ”๊ฐ€ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋˜๊ฑฐ๋“ ์š”.




๋‚˜๋ˆ” ๊ณ ๋”•์€ ์ด๋ฏธ ๋งŽ์ด๋“ค ์“ฐ๊ณ  ๊ณ„์…”์„œ ํŠน๋ณ„ํ•ด ๋ณด์ด์ง€๋Š” ์•Š์ง€๋งŒ, ๋กœ๋”ฉ์ด ์พŒ์ ํ•œ ๊ฒƒ ๊ฐ™์•„ ๋‹น๋ถ„๊ฐ„ ์ด๋ ‡๊ฒŒ ์จ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. HTML์ด๋‚˜ CSS์˜ ๋ฒฝ์„ ์•„์ง ๋Š๋ผ๊ณ  ๊ณ„์‹ ๋‹ค๋ฉด ๊ตณ์ด ์ž˜ ์“ฐ๊ณ  ์žˆ๋Š” ์Šคํ‚จ์„ ๊ฑด๋“œ๋ฆฌ์‹ค ํ•„์š”๋Š” ์—†์ง€๋งŒ, ์•„์ฃผ ์ž‘์€ ๋ถ€๋ถ„์ด๋‹ˆ ํ•œ๋ฒˆ ๋„์ „ํ•ด ๋ณด๊ฒ ๋‹ค๋ฉด ๊ธฐ์กด์— ์‚ฌ์šฉํ•˜์‹œ๋˜ ์Šคํ‚จ์„ ๋ณด๊ด€ํ•ด๋†“์œผ์‹  ํ›„์— ํ•œ๋ฒˆ ์‹œ๋„ํ•ด ๋ณด์„ธ์š”. ํ˜น์‹œ ์•Œ์•„์š”? ๊ทธ๋ ‡๊ฒŒ ํ‹ฐ์Šคํ† ๋ฆฌ ์Šคํ‚จ์— ๋” ์ต์ˆ™ํ•ด์ง€์‹ค์ง€~


[๊ด€๋ จ ๋งํฌ: googlefonts.github.io/korean]


๋ฐ˜์‘ํ˜•

๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ

๋Œ“๊ธ€ ์˜์—ญ