๐Ÿค” ์›น ๊ทธ๋ž˜ํ”ฝ์Šค ํƒํ—˜๊ธฐ 1์ฃผ์ฐจ ํ›„๊ธฐ!

Series

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

Blah Blah

์ด๋ฒˆ์ฃผ์—๋Š” canvas, webgl๋กœ ์›น์—์„œ ์ด๋ฏธ์ง€๋ฅผ ๋ Œ๋”๋ง,์ฒ˜๋ฆฌํ•˜๋Š” ์—ฐ์Šต๊ณผ ๋งค์šฐ๊ฐ„๋‹จํ•œ ์ธํ„ฐ๋ž™์…˜๋„ ๋„ฃ์–ด๋ณด๋Š” ์—ฐ์Šต์„ ํ•ด๋ณด์•˜๋‹ค.

๋ฐ์ดํ„ฐ๋ฅผ ํ™”๋ฉด์— ์ดค์ž‘ ๋ฟŒ๋ ค์ง€๋Š” ๊ฒƒ์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒŒ ํ”„๋ก ํŠธ์˜ ๋งค๋ ฅ์ธ๋ฐ ๋‹จ์ˆœํžˆ ํ…์ŠคํŠธ๋…ธ๋“œ๊ฐ€ ์•„๋‹ˆ๋ผ ๋Œ€์šฉ๋Ÿ‰์˜ ์ด๋ฏธ์ง€๋‚˜ ๊ทธ๋ž˜ํ”ฝ์„ ๋ฟŒ๋ฆฌ๋Š” ๊ฒƒ์€ ์ข€ ๋” ์–ด๋ ค์› ์ง€๋งŒ ์ข€ ๋” ์žฌ๋ฏธ์žˆ์—ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์žฌ๋ฏธ๋Š” ๋‘˜์งธ์น˜๊ณ , ์นœํ•œ ํ˜•์ด ํ”„๋ก ํŠธ์—”๋“œ์—”์ง€๋‹ˆ์–ด๊ฐ€ ํ•˜๊ณ ์‹ถ์€๊ฑด์ง€, ๊ทธ๋ž˜ํ”ฝ์Šค์—”์ง€๋‹ˆ์–ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€๊ฑด์ง€์— ๋Œ€ํ•œ ์งˆ๋ฌธ์„ ํ–ˆ์„ ๋•Œ, ๋Œ€๋‹ตํ•˜๊ธฐ๊ฐ€ ์–ด๋ ค์› ๋‹ค.

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

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

๊ทธ๋ž˜๋„ ์•ž์œผ๋กœ ๋‚ด๊ฐ€ ์ข‹์•„ํ•˜๋Š” ๋ถ„์•ผ๋ฅผ ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์ง€๋งŒ ์‹ ์ž…๊ฐœ๋ฐœ์ž๊ฐ€ ์š”๊ตฌํ•˜๋Š” ์—ญ๋Ÿ‰(๊ธฐ๋ณธ๊ธฐ)์„ ํ‚ค์šฐ๋Š” ๊ณต๋ถ€๋„ ์†Œํ™€ํžˆ ํ•˜์ง€ ๋ง์•„์•ผ๊ฒ ๋‹ค.

๋„ˆ๋ฌด ์ฃผ์ ˆ์ฃผ์ ˆ ์ ์—ˆ์ง€๋งŒ ๊ธฐ๋กํ•ด๋‘๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์„œ ๋ธ”๋กœ๊ทธ์—๋„ ์˜ฌ๋ฆฌ๊ฒŒ ๋˜์—ˆ๋‹ค.ใ…Žใ…Ž;; ์•ž์œผ๋กœ ๋” ์žฌ๋ฐŒ๊ฒŒ ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•ด์•ผ์ง€~~!!

Things studied

  1. ๐ŸŽจ awesome-web-graphics ์›น ๊ทธ๋ž˜ํ”ฝ์Šค ์•„์นด์ด๋ธŒ
  2. ๐ŸŒ‡ canvas-webgl-playground ์—ฐ์Šต์žฅ
  3. ๐Ÿงžโ€โ™‚๏ธ interactive-pixelator ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํ”ฝ์…€๋ ˆ์ดํ„ฐ(์ œ์ž‘์ค‘)

๐ŸŽ‰2020-06-12


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

GitHubFacebook