SVG ํ™œ์šฉ 1 – ์•„์ด์ฝ˜ ํฐํŠธ๊ฐ€ ์•„๋‹ˆ๋ผ SVG๋ฅผ ์‚ฌ์šฉํ•œ ์ด์œ 

๐Ÿ‘‰ SVG ํ™œ์šฉ ์‹œ๋ฆฌ์ฆˆ ๋ชฉ๋ก ๋ณด๊ธฐ

SVG๋ž€?

SVG๋Š” Scalable Vector Graphics์˜ ์•ฝ์ž๋‹ค. ๋Š˜์ด๊ฑฐ๋‚˜ ์ค„์—ฌ๋„ ๋„ํŠธ๊ฐ€ ๋ณด์ด์ง€ ์•Š๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋งํ•œ๋‹ค. ๋น„ํŠธ๋งต(์ฆ‰, ํ”ฝ์…€)์„ ์ €์žฅํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ ์ขŒํ‘œ๋ฅผ ์ €์žฅํ•ด ์—ฐ๊ฒฐํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋ ‡๋‹ค. ์ด๋Ÿฐ Scalableํ•œ ๊ฒƒ์œผ๋กœ ๋Œ€ํ‘œ์ ์ธ ๊ฑด ํฐํŠธ๋‹ค(ํฐํŠธ๋„ ๋ฌผ๋ก  ๋น„ํŠธ๋งต ํฐํŠธ๊ฐ€ ์žˆ๊ธด ํ•˜์ง€๋งŒ).

์˜ˆ์ปจ๋Œ€, ๋™๊ทธ๋ผ๋ฏธ๋ฅผ SVG๋กœ ๊ทธ๋ฆฌ๋ ค๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ์“ฐ๋ฉด ๋œ๋‹ค(์‹ค์ „์—์„œ ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์“ธ ์ผ์€ ๊ฑฐ์˜ ์—†๋‹ค).

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="42" cy="42" r="40" stroke="#34495E" 
    stroke-width="4" fill="#2ECC71"/>
</svg>

๋™๊ทธ๋ผ๋ฏธ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ๋Š” circle์ด๊ณ  cx์™€ cy๋Š” ์ค‘์ ์˜ ์ขŒํ‘œ๋ฅผ ์˜๋ฏธํ•œ๋‹ค. stroke๋Š” ์™ธ๊ณฝ์„  ์ƒ‰๊น”, stroke-width๋Š” ์™ธ๊ณฝ์„ ์˜ ๊ตต๊ธฐ, fill์€ ๋™๊ทธ๋ผ๋ฏธ์˜ ์ƒ‰๊น”์„ ์˜๋ฏธํ•œ๋‹ค. ์œ„์™€ ๊ฐ™์€ ํƒœ๊ทธ๋ฅผ ์“ฐ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋ชจ์–‘์ด ๋‚˜์˜จ๋‹ค. ์™ธ๊ณฝ์„ ์ด ์žˆ๋Š” ์—๋ฉ”๋ž„๋“œ์ƒ‰(#34495E) ์›์ด๋‹ค. (์ขŒํ‘œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ฒŒ ์™ธ๊ณฝ์„ ์„ ์ถ”๊ฐ€๋กœ ์ณ ์คฌ๋‹ค.)

SVG ์˜ˆ์ œ ์ด๋ฏธ์ง€

โ–ท์‹ค์ œ ์˜ˆ์ œ ๋ณด๊ธฐ

๋”ฐ๋กœ ํŒŒ์ผ๋กœ ๋„ฃ์„ ํ•„์š”์—†์ด HTML์ฒ˜๋Ÿผ ์ ์–ด ์ฃผ๋ฉด ํ‘œํ˜„๋œ๋‹ค. ํƒœ๊ทธ์— ํด๋ž˜์Šค์™€ ์•„์ด๋””๋ฅผ ์ ๊ณ  CSS์™€ js๋กœ ์ œ์–ดํ• ์ˆ˜ ์žˆ์œผ๋‹ˆ ๋Œ€๋ฐ•์ด๋‹ค. ๋ฌผ๋ก  ํƒœ๊ทธ๋กœ ์ œ์–ดํ•ด๋„ ๋œ๋‹ค.

img, object, iframe, embed ํƒœ๊ทธ๋กœ ๋„ฃ์„ ์ˆ˜๋„ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด CSS, js๋กœ ์ œ์–ด๊ฐ€ ์•ˆ ๋˜๊ฑฐ๋‚˜, ์ข€ ๋ณต์žกํ•ด์ง„๋‹ค. ์—ฌํŠผ ๋‚˜์ค‘์— ์„ค๋ช…ํ•œ๋‹ค.

SVG๋Š” ๊ฝค ์˜ค๋ž˜ ์ „์— ๋‚˜์™”์ง€๋งŒ, ๊ณ ํ•ด์ƒ๋„ ๋””์Šคํ”Œ๋ ˆ์ด๊ฐ€ ๋“ฑ์žฅํ•˜๋ฉด์„œ ๋“œ๋””์–ด ํ•„์š”์„ฑ์ด ์ปค์ง„ ๊ฒƒ ๊ฐ™๋‹ค. ๋ ˆํ‹ฐ๋‚˜ ๋””์Šคํ”Œ๋ ˆ์ด์ฒ˜๋Ÿผ ppi(pixel per inch, ์ธ์น˜๋‹น ํ”ฝ์…€์ˆ˜)๊ฐ€ ํš๊ธฐ์ ์œผ๋กœ ๋งŽ์•„์ง„ ๋””์Šคํ”Œ๋ ˆ์ด๊ฐ€ ๋‚˜์˜ค๋ฉด์„œ, ์ด๋ฏธ์ง€๊ฐ€ ๋ฟŒ์˜‡๊ฒŒ ๋ณด์ด๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ฒผ๋‹ค.

๋ฌผ๋ก  ์ด๋ฏธ์ง€๋ฅผ ๋Œ€์ถฉ ๋‘ ๋ฐฐ ์‚ฌ์ด์ฆˆ๋กœ ๋„ฃ์€ ๋’ค width์™€ height๋ฅผ ์ ˆ๋ฐ˜์œผ๋กœ ์ค„์ธ ์ฑ„ ํ‘œํ˜„ํ•˜๋ฉด ๋˜๊ธฐ๋Š” ํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์•„์ดํŒจ๋“œ์™€ ๋งฅ๋ถ ํ”„๋กœ์˜ ๋ ˆํ‹ฐ๋‚˜๋Š” ๋˜ ์ธ์น˜๋‹น ํ”ฝ์…€์ˆ˜๊ฐ€ ๋‹ค๋ฅด๋‹ค. ์•ˆ๋“œ๋กœ์ด๋“œํฐ๋„ ppi๊ฐ€ ๋˜ ๋‹ค๋ฅด๋‹ค. ์™€์šฐ, ๊ฒฐ๊ตญ ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ํ•ด๋ฒ•์€ ppi๊ฐ€ ๊ฐ€์žฅ ๋†’์€ ๊ธฐ๊ธฐ์— ๋งž์ถฐ์„œ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š” ๊ฒƒ์ด๋‹ค. ์ผ๋ฐ˜ ๋ชจ๋‹ˆํ„ฐ์˜ ppi๊ฐ€ 72๋‹ˆ๊นŒ, ํ•ด๋‹น ๊ธฐ๊ธฐ์˜ ppi์— 72๋ฅผ ๋‚˜๋ˆ„๋ฉด ์‹ค์ œ ์ด๋ฏธ์ง€๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๊ฒƒ์˜ ๋ช‡ ๋ฐฐ๋กœ ํ•˜๋ฉด ๋˜๋Š”์ง€ ๋‚˜์˜จ๋‹ค.

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

์ตœ๊ทผ์— ์œ ํ–‰ํ•œ ํ•ด๋ฒ• – ์•„์ด์ฝ˜ ํฐํŠธ

์ด ๋ฌธ์ œ์— ๋Œ€์‘ํ•˜๋ฉด์„œ ์ตœ๊ทผ์— ์œ ํ–‰ํ•œ ํ•ด๋ฒ•์€ ์•„์ด์ฝ˜ ํฐํŠธ๋‹ค. GitHub ๊ฐ™์€ ๋ฐ๊ฐ€ ์•„์ด์ฝ˜ ํฐํŠธ๋ฅผ ์“ด๋‹ค(๊ธ€์„ ์ž‘์„ฑํ•˜๋˜ 2013๋…„์—๋Š” GitHub๊ฐ€ ์•„์ด์ฝ˜ ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ง€๊ธˆ์€ svg๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค โ€• 2023๋…„, ์•ˆํ˜•์šฐ).

์•„์ด์ฝ˜ ํฐํŠธ๋Š”, ๊ฐ„๋‹จํžˆ ์„ค๋ช…ํ•˜๋ฉด ์›นํฐํŠธ๋ฅผ ์ด์šฉํ•ด์„œ scalableํ•œ ์•„์ด์ฝ˜์„ ๋ณด์—ฌ ์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. SVG๋ผ๋Š” ํŠน์ • ํฌ๋งท์€ ์•„๋‹ˆ์ง€๋งŒ ์ด๊ฒƒ๋„ ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ์„ ์ด์šฉํ•œ ๋ฐฉ์‹์ด ๋˜๊ฒ ๋‹ค.

์•„์ด์ฝ˜ ํฐํŠธ๋Š” ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํŽธํ–ˆ๋‹ค. ์˜ˆ์ปจ๋Œ€ ์•„๋ž˜์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

<span class="icon-font">t</span>

CSS์—์„œ .icon-font์— ์›นํฐํŠธ ๊ธ€๊ผด์„ ๋งค๊ธฐ๋ฉด, t๋Š” t๊ฐ€ ์•„๋‹Œ ํŠธ์œ„ํ„ฐ ์•„์ด์ฝ˜์ด ๋˜๋Š” ๊ฑฐ๋‹ค. ๋‚ด ๋ธ”๋กœ๊ทธ์—๋„ ์ž ๊น ์•„์ด์ฝ˜ ํฐํŠธ๋ฅผ ์ ์šฉํ•œ ์ ์ด ์žˆ์—ˆ๋‹ค.

์›ํ•˜๋Š” ์•„์ด์ฝ˜์œผ๋กœ ์›นํฐํŠธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋‹ค์šด๋ฐ›์„ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์‚ฌ์ดํŠธ๋„ ์žˆ๋‹ค. ์ด๊ฑธ ์ด์šฉํ•˜๋ฉด ์—„์ฒญ ํŽธํ•˜๊ฒŒ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๋‹ค. (IcoMoon)

์•„์ด์ฝ˜ ํฐํŠธ์˜ ํ•œ๊ณ„ – ๊ธ€๊ผด์„ ๊ฐ•์ œ ์ง€์ •ํ•˜๋ฉด ๊นจ์ง„๋‹ค

๊ทธ๋Ÿฐ๋ฐ ์•„์ด์ฝ˜ ํฐํŠธ์—๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค.

์ฒซ์งธ, ๋ธŒ๋ผ์šฐ์ € ๊ธ€๊ผด์„ ๊ฐ•์ œ ์ง€์ •ํ•˜๊ณ  ๋ณด๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒ ์•„์ด์ฝ˜์ด ๋ณด์ด์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๋ฌธ์ œ๋‹ค.

์˜ˆ์ปจ๋Œ€ ์ปค์Šคํ…€ ์Šคํƒ€์ผ์„ ์ฃผ์ž…ํ•˜๋Š” ํ™•์žฅ์„ ์ด์šฉํ•ด์„œ ๋ชจ๋“  ๊ธ€๊ผด์„ ๊ฐ•์ œ๋กœ ํŠน์ • ๊ธ€๊ผด(์˜ˆ์ปจ๋Œ€ Noto Sans)๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Ÿฌ๋ฉด ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค. ํ™•์žฅ ์—†์ด ์„ค์ •์—์„œ ๊ธ€๊ผด์„ ๊ฐ•์ œ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค.

๊ฐ•์ œ ์ ์šฉํ•œ ๋’ค ์•„์ด์ฝ˜ ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•œ ์‚ฌ์ดํŠธ์— ๋“ค์–ด๊ฐ€ ๋ณด๋ฉด ์•„์ด์ฝ˜์ด ๋‹ค ๋‚ ์•„๊ฐ€๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฑฐ๋‹ค.

๋‘˜์งธ, ์‹œ๋งจํ‹ฑํ•œ ์ •๋ณด๋ผ๋Š” ์ธก๋ฉด์—์„œ๋„ ์•„์ด์ฝ˜ ํฐํŠธ๋Š” ์ •๋ณด๋ฅผ ๊ต๋ž€ํ•œ๋‹ค.

์ด๋ฏธ์ง€๊ฐ€ ์•„๋‹Œ ๊ฒƒ์ด ์ด๋ฏธ์ง€๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์ด๋ฏ€๋กœ ์‹œ๊ฐ์„ ๊ฐ–์ง€ ๋ชปํ•œ ์›น ํƒ์ƒ‰์ž๋“ค(๊ฒ€์ƒ‰ ์—”์ง„, ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‹œ๊ฐ ์žฅ์• ์ธ)์—๊ฒŒ ์ข‹์ง€ ๋ชปํ•˜๋‹ค.

๋ฌผ๋ก  W3์—์„œ ์‹œ๋งจํ‹ฑํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ๋ฐฉ๋ฒ•์„ ๋งŒ๋“ค์–ด ๋†“๊ธด ํ–ˆ๋‹ค. role, aria-label ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

ํ•˜์ง€๋งŒ ๋ฒˆ๊ฑฐ๋กญ๋‹ค. ๋ฒˆ๊ฑฐ๋กœ์šฐ๋ฉด ๋†“์น  ๊ฐ€๋Šฅ์„ฑ์ด ์ƒ๊ธด๋‹ค. ์‹ค์ œ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฒˆ๊ฑฐ๋กœ์›€ ์—†์ด ์‹œ๋งจํ‹ฑ์„ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‚˜๊ฐ€๋ฉฐ

SVG๊ฐ€ ๋ญ๊ณ , ์™œ ์‚ฌ์šฉํ•˜๋Š”์ง€๋ฅผ ์•Œ์•„ ๋ดค๋‹ค. ๋‹ค์Œ ๊ธ€์€ ์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ดํ„ฐ๋ฅผ ์ด์šฉํ•ด์„œ SVG๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„ ๋ณธ๋‹ค.

๐Ÿ‘‰ SVG ํ™œ์šฉ ์‹œ๋ฆฌ์ฆˆ ๋ชฉ๋ก ๋ณด๊ธฐ

๐Ÿ‘‡ ์นดํ…Œ๊ณ ๋ฆฌ ๊ธ€ ๋ชฉ๋ก

, ,

๋Œ€ํ‘œ๊ธ€

๋Œ“๊ธ€ ๋‚จ๊ธฐ๊ธฐ