๐Ÿ™Œ makeToon ์™„์„ฑ๊ธฐ - 2

junukim.devยท2020๋…„ 9์›” 15์ผ
4

makeToon ์™„์„ฑ๊ธฐ

๋ชฉ๋ก ๋ณด๊ธฐ
3/3

๋ฉ”์ธํŽ˜์ด์ง€

React์—์„œ SVG ์‚ฌ์šฉํ•˜๊ธฐ ๐Ÿคนโ€โ™‚๏ธ

React์—์„œ๋Š” SVG๋ฅผ ๋‹ค๋ฅธ assets์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ component๋กœ ๋ถ„ํ• ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

svgํŒŒ์ผ์„ ์—ด๋ฉด svgํƒœ๊ทธ์™€ g, path๋“ฑ์˜ ํƒœ๊ทธ๋“ค์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋“ค๋กœ svg๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ๋งŒ๋“ญ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ React์—์„œ SVG๋กœ ์ปดํฌ๋„ŒํŠธํ™” ์‹œํ‚ค๋Š”๋ฐ ๋ฐฉ๋ฒ•์ด ์กฐ๊ธˆ ๊นŒ๋‹ค๋กญ์Šต๋‹ˆ๋‹ค.

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

๊ทธ๋ž˜์„œ ์ €๋Š” ์–ด๋–ป๊ฒŒ Component๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์„๊นŒ ๊ตฌ๊ธ€๋งํ•˜๋‹ค๊ฐ€ SVG To JSX๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด ์ข‹์€ ์‚ฌ์ดํŠธ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

svg2jsx.com

์œ„ ์‚ฌ์ดํŠธ๋Š” SVGํŒŒ์ผ์„ insertํ•˜๋ฉด JSX์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ SVG์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

์ด๋ฅผ ํ†ตํ•ด SVG๋ฅผ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ณ€๊ฒฝ์ผฐ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  SVG๋ฅผ ๊ตณ์ด ์ปดํฌ๋„ŒํŠธ๋กœ ๋ณ€ํ˜•์‹œํ‚จ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. SVGํŒŒ์ผ์„ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ณ€๊ฒฝ์‹œ์ผœ react์˜ hooks์™€ ์ง€๋„ path์˜ onClick event๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ์ž…๋‹ˆ๋‹ค.

์ง€๋„์˜ ๊ณณ๊ณณ์„ ํด๋ฆญํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—ฌ์„œ ์–ด๋–ป๊ฒŒ ๊ฐœ๋ฐœํ• ๊นŒ ์ƒ๊ฐํ•˜๋‹ค๊ฐ€ ์ด๋Ÿฐ ๋ฐฉ๋ฒ•์„ ํƒํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ง€์—ญ๋ณ„ ํด๋ฆญ ๐Ÿฅ„

์ธํ„ฐ๋„ท์„ ํ†ตํ•ด ์ง€๋„ SVGํŒŒ์ผ์„ ์–ป๊ณ  ์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ง€๋„์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋˜๋„์ค‘ ํ•˜๋‚˜์˜ ๋ฌธ์ œ์— ๋ถ€๋”ชํžˆ๊ฒŒ๋ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž๊ฐ€ ์ง€๋ช…์„ ๋ชจ๋ฅด๋ฉด ๋ง์งฑ๋„๋ฃจ๋ฌต์•„๋‹Œ๊ฐ€?

๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ๊ฐ™๊ณ ์žˆ๋Š” SVG๋Š” ์˜ค์ง ์ง€๋„ ํ•˜๋‚˜๋ฟ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

์—ด์‹ฌํžˆ ๊ตฌ์ƒํ•˜๊ณ  ๊ณ„ํšํ•œ ํ”„๋กœ์ ํŠธ๊ฐ€ ์—‰๋ง์ด๋˜๋ ค๊ณ ํ•˜์ž ์ €๋Š” ์ง์ ‘ SVG๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ธฐ๋กœ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

XD๋ฅผ ์—ด์–ด ์ง€๋„ SVG๋ฅผ ๋ถ™์ด๊ณ , ๊ตฌ์—ญ์— ๋งก๊ฒŒ ์ด๋ฆ„์„ ์จ๋‚ด๋ ค๊ฐ”์Šต๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ์ž์ž˜์ž์ž˜ํ•˜๊ฑฐ๋‚˜ ์ž‘์€๊ฒƒ๋“ค์€ ํ•˜๋‚˜์˜ ์ง€์—ญ์œผ๋กœ ๋ชจ์•„์„œ ๋ถ™์ด๊ณ , ๋„ˆ๋ฌด ํฌ๊ฑฐ๋‚˜ ์• ๋งคํ•œ ์ง€์—ญ์€ ๋™๋ถ€, ์„œ๋ถ€๋“ฑ์œผ๋กœ ๋‚˜๋ˆ„์–ด์„œ ์ง€์—ญ์„ ๋‚˜๋ˆ„์—ˆ์Šต๋‹ˆ๋‹ค.

์ง€์—ญ SVG

๊ทธ๋ฆฌ๊ณ  ์ด๋ ‡๊ฒŒ ํ•˜์—ฌ ๋‘๊ฐœ์˜ SVGํŒŒ์ผ์„ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

pointer-events: none; ๐Ÿ‘

<svg ... /> // ์ง€์—ญ
<svg ... /> // ์ง€๋„

์œ„์™€ ๊ฐ™์ด svg๋ฅผ ๋ฐฐ์น˜ํ•˜๊ณ  css position์„ absolute๋กœ ์„ค์ •ํ•˜์—ฌ ์œ„์— ์˜ฌ๋ฆฐ ํ›„ ์ง€๋„ SVG์— onClick์ด๋ฒคํŠธ๋ฅผ path๋งˆ๋‹ค ์ ์šฉ์‹œ์ผฐ๋”๋‹ˆ ์ง€์—ญSVG์— ์ง€๋„SVG๊ฐ€ ๊ฐ€๋ ค์ ธ์„œ ํด๋ฆญ ์ด๋ฒคํŠธ์— ์ ‘๊ทผ์„ ํ•˜์ง€ ๋ชปํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ •๋ง ํ•˜๋ฃจ์ข…์ผ ๊ตฌ๊ธ€๋งํ•˜๊ณ  ์—ฌ๋Ÿฌ ํ‚ค์›Œ๋“œ๋กœ ๊ฒ€์ƒ‰ํ•˜์˜€์œผ๋‚˜ ๋ฐฉ๋ฒ•์„ ์ฐพ์„ ์ˆ˜ ์—†์–ด์„œ ์นด์นด์˜คํ†ก ์˜คํ”ˆ์ฑ„ํŒ…๋ฐฉ๊ณผ ํŽ˜์ด์Šค๋ถ์„ ํ†ตํ•ด ์งˆ๋ฌธ๋„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ํ‚ค์›Œ๋“œ ์„ ํƒ์— ์‹คํŒจํ–ˆ๋Š”์ง€ ๋ฐฉ๋ฒ•์€ ์ฐพ๊ธฐ ํž˜๋“ค์—ˆ๊ณ  ๊ณ„์†ํ•ด์„œ ๊ณ ๋ฏผ๋งŒ ๋Š˜์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‹ค๊ฐ€ ๋”ฑ ๋จธ๋ฆฌ๋ฅผ ์Šค์น˜๊ณ  ์ง€๋‚˜๊ฐ€๋Š” ์ƒ๊ฐ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๋ถ„๋ช…ํžˆ CSS์—์„œ ํด๋ฆญ์„ ๋น„ํ™œ์„ฑํ™” ์‹œํ‚ฌ ์ˆ˜ ์žˆ์„๊ฑฐ์•ผ.

๊ทธ๋ž˜์„œ CSS์— ์ดˆ์ฒจ์„ ๋‘๊ณ  ๊ตฌ๊ธ€๋ง๋ฅผ ํ•˜์˜€๋Š”๋ฐ.. ๋ฐฉ๋ฒ•์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ๋ฐฉ๋ฒ•์€ pointer-events: none;์ด๋ผ๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.

MDN์—์„œ pointer-events์†์„ฑ์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

MDN๋งํฌ: ๊ทธ๋ž˜ํ”ฝ ์š”์†Œ๊ฐ€ ์–ด๋–ค ์ƒํ™ฉ์—์„œ ํฌ์ธํ„ฐ ์ด๋ฒคํŠธ์˜ ๋Œ€์ƒ์ด ๋  ์ˆ˜ ์žˆ๋Š”์ง€ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

pointer-events๋ฅผ none์œผ๋กœ ์„ค์ •ํ•ด์ฃผ๋ฉด ์ด๋ฒคํŠธ์˜ ๋Œ€์ƒ์œผ๋กœ ์„ค์ •๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

MDN์—์„œ pointer-events: none์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

MDN๋งํฌ: ์š”์†Œ๊ฐ€ ํฌ์ธํ„ฐ ์ด๋ฒคํŠธ์˜ ๋Œ€์ƒ์ด ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ•ด๋‹น ์š”์†Œ์˜ ์ž์†์ด ๋‹ค๋ฅธ pointer-events ๊ฐ’์„ ์ง€์ •ํ•œ ๊ฒฝ์šฐ, ๊ทธ ์ž์†์€ ๋Œ€์ƒ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋•Œ๋Š” ์ด๋ฒคํŠธ ์บก์ฒ˜/๋ฒ„๋ธ” ๋‹จ๊ณ„์—์„œ none์„ ์ง€์ •ํ•œ ์š”์†Œ์˜ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ๋ฐœ๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ CSS๋„ ์žˆ๊ตฌ๋‚˜.. ํ•˜๋ฉฐ ๊ฐํƒ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

Typescript๋กœ ์ง€๋„ ์กฐ์ž‘ ๋งŒ๋“ค๊ธฐ

  • ์ง€๋„ ๋“œ๋ž˜๊ทธ
  • ์ง€๋„ ํ™•๋Œ€ ์ถ•์†Œ
    ์œ„ ๋‚ด์—ญ์€ ํ˜„์žฌ ์ง€๋„๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋“ค ์ž…๋‹ˆ๋‹ค.

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ˆœ์ˆ˜ Javascript(TS)๋กœ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ์ƒ๊ฒผ๋˜ ์ด์Šˆ๋“ค์„ ๊ณต์œ ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ์ž์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

profile
https://junukim.dev <- ํ˜ธ์ŠคํŒ…ํ•˜๋Š” ๋ธ”๋กœ๊ทธ์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€