๐Ÿง™โ€โ™‚๏ธ ๊ฐœ๋ฐœ์ž 2์ฐจ ์ „์งํ•˜๊ธฐ - Web Graphics

harry

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋‚ด๊ฐ€ ์›น ๊ทธ๋ž˜ํ”ฝ์Šค์— ๊ด€์‹ฌ์„ ๊ฐ–๊ฒŒ๋œ ๊ณผ์ •๊ณผ, ์•ž์œผ๋กœ ๊ณต๋ถ€ํ•  ๊ฒƒ๋“ค์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

๐ŸŽจ UPDATE : 2020-05-31


1. 1์ฐจ ์ „์ง - Web ํ”„๋ก ํŠธ์—”๋“œ

jswall

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

๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉฐ

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

๋ณ„๊ฑฐ์•„๋‹Œ๋ฐ ๋งŽ์€ ๋ถ„๋“ค์ด ์Šคํƒ€๋ฅผ ๋ˆŒ๋Ÿฌ์ฃผ์…”์„œ ๋„ˆ๋ฌด ๋ฟŒ๋“ฏ/๊ฐ์‚ฌํ–ˆ๋”ฐโ€ฆใ…Ž

2. 2์ฐจ ์ „์ง - ์›น ๊ทธ๋ž˜ํ”ฝ์Šค

ddmedia

๊ทธ๋Ÿฌ๋‹ค๊ฐ€ ์ •๋ง ์ข‹์€ ๊ธฐํšŒ๋กœ 2020 NAVER HACK-DAY ๋ผ๋Š” ํ•ด์ปคํ†ค ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๊ฒŒ๋˜์—ˆ๋‹ค. ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ ์ฃผ์ œ ์ค‘์— ์ž์‹ ์ด ์„ ํƒํ•ด์„œ ์‹ ์ฒญํ•  ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ ๋‚˜๋Š” ๊ทธ ์ค‘์—์„œ ๊ฐ€์žฅ ์žฌ๋ฐŒ์–ด๋ณด์ด๋Š” โ€œ๋„ค์ด๋ฒ„ ์›นํˆฐ ์ธ๋„ค์ผ ์ €์ž‘๋„๊ตฌโ€ ๋ผ๋Š” ์ฃผ์ œ๋ฅผ ์‹ ์ฒญํ–ˆ๋‹ค.

ํ•™๊ต ์ „๊ณต์ˆ˜์—…์—์„œ ๋‹ค๋ค„๋ณด์•˜๋˜ ๋‹ค์–‘ํ•œ ๊ทธ๋ž˜ํ”ฝ์ž‘์—… ํˆด๋“ค(Photoshop, After Effect, Maya ๋“ฑ) ์„ ์ง์ ‘ ๋งŒ๋“ ๋‹ค๋‹ˆ ๋„ˆ๋ฌด ํฅ๋ฏธ๋กœ์› ๊ณ , ์˜ˆ์ „์— ๋‚ด๊ฐ€ ๋“ค์—ˆ๋˜ ์ฝ”๋”ฉ๊ณผ ๊ด€๋ จ ์—†๋Š” ์ „๊ณต์ˆ˜์—…๋“ค(๊ทธ๋ž˜ํ”ฝ๋””์ž์ธ, ์ปดํ“จํ„ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜, ์ธํ„ฐ๋ ‰์…˜๋””์ž์ธ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ๋“ฑ)๋„ ๋งŽ์€ ๋„์›€์ด ๋˜๋Š” ๊ฒƒ์„ ๋ณด๋ฉฐ ์˜๋ฏธ์—†๋Š” ์‚ฝ์งˆ์ด ์•„๋‹ˆ์˜€๊ตฌ๋‚˜๋ฅผ ๋Š๋‚„ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฌด์—‡๋ณด๋‹ค ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ทธ๋ž˜ํ”ฝ์„ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์€ ๋„ˆ๋ฌด๋„ˆ๋ฌด๋„ˆ๋ฌด ์žฌ๋ฏธ์žˆ์—ˆ๋‹ค.

์งง์€ ์‹œ๊ฐ„์ด์ง€๋งŒ ์ข‹์€ ํŒ€์›, ์ข‹์€ ๋ฉ˜ํ† ๋‹˜๋“ค์„ ๋งŒ๋‚œ ๋•๋ถ„์— ๊ธฐ์ˆ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ ๋ฉด์œผ๋กœ ์ •๋ง ๋งŽ์€ ๊ฒƒ๋“ค์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

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

์šฐ์˜ค์˜ค..! ์š•๊ตฌ๊ฐ€ ์ƒ˜์†Ÿ๋Š”๋‹ค

3. ์ „์งํ€˜์ŠคํŠธ

๊ทธ๋ž˜์„œ ๋‹ค์‹œ ๋ฐฑ์ˆ˜๊ฐ€ ๋œ ๋‚˜๋Š” ์ด ํฌ์ŠคํŒ…์„ ํ†ตํ•ด ์•ž์œผ๋กœ ๊ณต๋ถ€ํ•  ๊ฒƒ๋“ค์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด๋ณด๋ คํ•œ๋‹ค.

๐Ÿ“„ ๊ณต๋ถ€ํ•  ๋‚ด์šฉ, ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์— ๋”ฐ๋ผ ์ฃผ๊ธฐ์ ์œผ๋กœ ์ˆ˜์ •ํ•  ๊ฒƒ!

3-1. ๊ธฐ์ดˆ

์›น ๊ทธ๋ž˜ํ”ฝ์Šค API๋ฅผ ๋ฐ”๋กœ ์‚ฌ์šฉํ•ด๋ณด๋Š” ๊ฒƒ๋ณด๋‹ค ๋ธŒ๋ผ์šฐ์ €(JS)๊ฐ€ ์ด๋ฏธ์ง€๋‚˜ ์˜์ƒ์„ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š”์ง€, ๊ทธ๋ž˜ํ”ฝ์ž‘์—…์€ ์–ด๋–ป๊ฒŒ ์ˆ˜ํ–‰ํ•˜๋Š”์ง€ ๊ธฐ์ดˆ์ ์ธ ๋ถ€๋ถ„ ๋จผ์ € ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

  • OS vs Browser
  • ์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ์Šค vs ์ปดํ“จํ„ฐ ๋น„์ „
  • ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง๋ฐฉ์‹ / ์ตœ์ ํ™”
  • ์ด๋ฏธ์ง€ ํ‘œํ˜„๋ฐฉ์‹ (๋น„ํŠธ๋งต, ๋ฒกํ„ฐ, svg ๋“ฑ)
  • ์˜์ƒ ํ‘œํ˜„๋ฐฉ์‹ (ํ”„๋ ˆ์ž„, ์‹ค์ œ ์˜์ƒ๊ณผ ๋งŒ๋“ค์–ด๋‚ธ ๊ทธ๋ž˜ํ”ฝ์˜ ์ฐจ์ด)
  • ๋””์ง€ํ„ธ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ (otf, ttf, woff)
  • ๊ทธ๋ž˜ํ”ฝ์ž‘์—… : DOM์กฐ์ž‘ ๋ฐฉ์‹ vs canvas์กฐ์ž‘ ๋ฐฉ์‹
  • ๊ทธ๋ž˜ํ”ฝ์ž‘์—… : CSS ๋ฐฉ์‹ vs JS ๋ฐฉ์‹
  • ๊ทธ๋ž˜ํ”ฝ์ž‘์—… : ๋™์ž‘๋ฐฉ์‹ (position, scale, rotation)
  • ๊ทธ๋ž˜ํ”ฝ์Šค ์ €์žฅ๋ฐฉ์‹ (JSON, Blob ๋“ฑ)
  • ๊ทธ๋ž˜ํ”ฝ์Šค ๊ฐ€๊ณต๋ฐฉ์‹ (๋ Œ๋”๋ง, ์ด๋ฒคํŠธ์ฒ˜๋ฆฌ ๋“ฑ)

3-2. ๊ทธ๋ž˜ํ”ฝ์ž‘์—… API ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

๋‹ค์–‘ํ•œ ๊ทธ๋ž˜ํ”ฝ์ž‘์—… API ๋“ค์„ ์‚ดํŽด๋ณด๋ฉฐ ๊ฐ๊ฐ์˜ ํŠน์ง•๊ณผ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•˜๊ธฐ

  • canvas
  • webGL

MDN ๋ฌธ์„œ์— ๋‚˜์™€์žˆ๋Š” ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค ์ค‘์— p5.js๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ํ•™์Šตํ•˜๊ธฐ

  • p5.js
  • fabric.js

3D ์ž‘์—… ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ•™์Šตํ•˜๊ธฐ

  • three.js

๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ•™์Šตํ•˜๊ธฐ

  • D3.js

3-3. ํ† ์ดํ”„๋กœ์ ํŠธ ์‹œ์ž‘

FE๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ ๊ฐ™์ด ์ง„ํ–‰ํ–ˆ๋˜ ์†Œ๋งˆ๋ฒ• ํ”„๋กœ์ ํŠธ๋Š” โ€œ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ๋“ค์„ ์ฒดํ—˜ํ•ด๋ณด์ž!โ€๊ฐ€ ๋ชฉ์ ์ด์—ˆ๋‹ค๋ฉด ์ด๋ฒˆ์—๋Š” ๊ฒŒ์ž„์„ ๋งŒ๋“ค๋“ , ์—๋””ํ„ฐ์™€ ๊ฐ™์€ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๋“  โ€œ๋””์ž์ธํŒจํ„ด์ด๋‚˜ ์ฝ”๋“œ ํ’ˆ์งˆ์„ ์ข€ ๋” ๊ณ ๋ คํ•ด์„œโ€ ์ง„ํ–‰ํ•ด๋ณด๋ คํ•œ๋‹ค..!

  • Toy Project (title ๋ฏธ์ •)

๐Ÿค” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ? ๊ฒŒ์ž„? ์—๋””ํ„ฐ?

4. ๋ ˆํผ๋Ÿฐ์Šค

๋ ˆํผ๋Ÿฐ์Šค๋Š” ๋ชจ๋‘ โค๏ธWeb Graphics Archiveโค๏ธ์— ์—…๋กœ๋“œ ๋˜์—ˆ์œผ๋‹ˆ ์ฐธ๊ณ  ๋ฐ”๋ž๋‹ˆ๋‹ค.

webGL

interactive pages

Reference for Reference

Open Source

Video


Written by@taenyKim
์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€ ๋ธ”๋กœ๊ทธ / Learn in Public

GitHubFacebook