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

ํ”„๋ŸฐํŠธ์—”๋“œ ์›น ๊ธ€๊ผด์˜ ํ•„์ˆ˜ ์ธก๋ฉด์€ TrueType(TTF), OpenType(OTF), Embedded OpenType(EOT), Web Open Font Format(WOFF) ๋ฐ Scalable Vector Graphics(SVG)์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ํŒŒ์ผ ํ˜•์‹์ž…๋‹ˆ๋‹ค. ์ฒด์žฌ. ์ด๋Ÿฌํ•œ ํ˜•์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋Š” ๊ธ€๊ผด์„ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ง์ ‘ ์‚ฝ์ž…ํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์žฅ์น˜, ํ”Œ๋žซํผ ๋ฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •ํ™•ํ•˜๊ณ  ์ผ๊ด€๋˜๊ฒŒ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น ๊ธ€๊ผด์€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋น ๋ฅธ ๋กœ๋”ฉ ์‹œ๊ฐ„๊ณผ ์ตœ์ ์˜ ์„ฑ๋Šฅ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ€๋ณ๊ณ  ํšจ์œจ์ ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ธํ„ฐ๋„ท ์‚ฌ์šฉ์ž๊ฐ€ ์ ์  ๋” ์กฐ๊ธ‰ํ•ด์ง€๋ฉด์„œ ์†๋„๋Š” ์ดํƒˆ๋ฅ ๊ณผ ์‚ฌ์šฉ์ž ๋งŒ์กฑ๋„์— ํฐ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ์ค‘์š”ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. Google์—์„œ ์‹ค์‹œํ•œ ์กฐ์‚ฌ์— ๋”ฐ๋ฅด๋ฉด ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ๊ฐ„์ด 1์ดˆ์—์„œ 3์ดˆ๋กœ ์ฆ๊ฐ€ํ•˜๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ์‚ฌ์ดํŠธ์—์„œ ์ดํƒˆํ•  ํ™•๋ฅ ์ด 32% ์ฆ๊ฐ€ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ ์›น ๊ธ€๊ผด์„ ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์— ํ†ตํ•ฉํ•˜๋Š” ๋ฐ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์ ‘๊ทผ ๋ฐฉ์‹ ์ค‘ ํ•˜๋‚˜๋Š” Google Fonts, Adobe Fonts ๋ฐ Font Awesome๊ณผ ๊ฐ™์€ ์›น ๊ธ€๊ผด ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์„œ๋น„์Šค๋Š” ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ด‘๋ฒ”์œ„ํ•œ ๊ธ€๊ผด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋™์‹œ์— ํ•„์š”ํ•œ ๊ธ€๊ผด ๋ณ€ํ™˜, ์ตœ์ ํ™” ๋ฐ ์บ์‹ฑ์„ ์ฒ˜๋ฆฌํ•˜์—ฌ ์„ ํƒํ•œ ๊ธ€๊ผด์ด ์ตœ์ข… ์‚ฌ์šฉ์ž์—๊ฒŒ ํšจ์œจ์ ์ด๊ณ  ์›ํ™œํ•˜๊ฒŒ ๋กœ๋“œ๋˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

AppMaster ํ”Œ๋žซํผ์˜ ๋งฅ๋ฝ์—์„œ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น ๊ธ€๊ผด์— ์ ์šฉ๋˜๋Š” ๋™์ผํ•œ ์ง€์นจ ์›์น™๊ณผ ๋ชจ๋ฒ” ์‚ฌ๋ก€๊ฐ€ ์—ฌ์ „ํžˆ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. AppMaster Vue3 ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ JavaScript/TypeScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•˜๋ฏ€๋กœ ์‚ฌ์šฉ์ž๋Š” ๊ธ€๊ผด ํŒŒ์ผ์„ ์ง์ ‘ ์‚ฝ์ž…ํ•˜๊ฑฐ๋‚˜ CSS @font-face ๊ทœ์น™์„ ํ™œ์šฉํ•˜๊ฑฐ๋‚˜ ์ตœ์ ์˜ ํšจ์œจ์„ฑ์„ ์œ„ํ•ด ์™ธ๋ถ€ ์›น ๊ธ€๊ผด ์„œ๋น„์Šค๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ •์˜ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น ๊ธ€๊ผด์„ ์‰ฝ๊ฒŒ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์„ฑ๋Šฅ.

AppMaster ํ”Œ๋žซํผ์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” ๋‹ค์–‘ํ•œ ์›น ๊ธ€๊ผด์„ ํ˜ผํ•ฉํ•˜๊ณ  ์ผ์น˜์‹œ์ผœ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „๋ฐ˜์— ๊ฑธ์ณ ๋…ํŠนํ•˜๊ณ  ์ผ๊ด€๋œ ๋ธŒ๋žœ๋“œ ์•„์ด๋ดํ‹ฐํ‹ฐ๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ AppMaster ์˜ ์‹œ๊ฐ์  ์ธํ„ฐํŽ˜์ด์Šค์™€ drag-and-drop ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ๋ฅผ ์‹คํ—˜ํ•˜๊ณ  ํฌ๊ธฐ, ๋‘๊ป˜, ์Šคํƒ€์ผ, ์ค„ ๋†’์ด ๋“ฑ์˜ ๊ธ€๊ผด ์†์„ฑ์„ ์‰ฝ๊ฒŒ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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