๋ ธ์ง์ฐ
BTS ์๋ฏธ๋ก์ ๋์ง์ ์ผํ์ผ๋ก ์๊ฐํ ์ปจํ ์ธ ๋ฅผ ๋ง๋ ์ด์ผ๊ธฐ๋ฅผ ๋ค๋ ค๋๋ฆฝ๋๋ค. ๋์น๋ ๋ฐ์ดํฐ ์์์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ์์ด๋์ด๋ง ์๋ค๋ฉด JavaScript๋ก ๋ฐ์ดํฐ ์์ง๋ถํฐ ์๊ฐํ๊น์ง ํ ์ ์์ต๋๋ค. ์คํ ๋ฆฌํ ๋ง์ผ๋ก ์ ๋ฌ๋๋ ์ฃผ์ ์ ์งํ๋ฅผ ์ ์ ํ๊ณ , ์ด๋ค ์๊ฐํ ์ฐจํธ๋ก ๋ณด์ฌ์ค์ง, ์๊ฐํ ์ปจํ ์ธ ๋ฅผ ๋ง๋ ๊ณผ์ ์ ๊ณต์ ํฉ๋๋ค. ์ฐจํธ ํ๋๋ฅผ ๋ง๋๋๊ฑด ์ด๋ ต์ง ์์ง๋ง ์์ฑ๋ ์ฐจํธ๊ฐ ์ข์ ์๊ฐํ์ธ์ง ๊ณ ๋ฏผ์ด ๋ ๋ ํฐ๋ํ ๋ฐฉ๋ฒ๋ ํจ๊ป ์๊ฐํฉ๋๋ค. ํผ์๋ณด๋จ ๊ณต์ ํ๋ฉด์ ๋ฐฐ์ฐ๊ณ ๊ฐ์ด ๋ฐ์ ํ๋ฉด ์ฆ๊ฑฐ์ฐ๋๊น์!
์ ์ฐ์ง
์์๊ณผ ์๊ฐ์ ํ์ ๋์ด ์๊ณ ๋๋ฌธ์ ๋ชจ๋ ์ผ์ ํจ์จ์ฑ์ ์ค์ํ๊ฒ ์๊ฐํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ๋ ๊ทธ๊ฒ์ ์ฝ๋๋ฅผ ํตํด ์คํํฉ๋๋ค. ์์ฑํ ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํ๊ณ ๊ฐ๊ฒฐํ๊ฒ ์ ์งํ๋ฉฐ ๋ ๋์ ๊ฒฐ๊ณผ๋ฌผ์ด ๋๋ฃ๊ฒ ์ฝ๊ฒ ์ดํด๋ ์ ์๋๋ก ๋ ธ๋ ฅํฉ๋๋ค. ํ์ง๋ง ์์คํ ์ด ์ปค์ง์๋ก ๋ ๋๋ฃ๊ฐ ๋ง์์ง์๋ก ์ฐ๋ฆฌ๊ฐ ๋ง๋ค์ด๋์ ๊ฒฐ๊ณผ๋ฌผ์ ์๋์ ๋ค๋ฅธ ๋ชจ์์ผ๋ก ์งํํ๊ธฐ ์์ํฉ๋๋ค. ๊ฐ์ UI์ ์ปดํฌ๋ํธ๊ฐ ๊ธฐ๋ฅ์ด ๋ค๋ฅด๋ค๊ฑฐ๋ ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋ ์ปดํฌ๋ํธ์ UI๊ฐ ๋ค๋ฅด๋ค๊ฑฐ๋ ์ฌ์ง์ด ๊ฐ์ ๊ธฐ๋ฅ, ๊ฐ์ ๋ชจ์์ ์ปดํฌ๋ํธ๋ฅผ ์ค๋ณตํด์ ๋ง๋ค๊ธฐ๋ ํฉ๋๋ค. ์ด๋ ๊ฒ ํํธํ๋ UI/UX ์ปดํฌ๋ํธ๋ค์ ์ผ์ํ ํ๊ธฐ ์ํด ์งํํ ์นด์นด์ค ํตํฉ๊ฒ์ ๋์์ธ์์คํ ํ๋ก์ ํธ์ ๊ฒฝํ์ ๋๋๋๋ค.
๋ฐ๋ ์์ ๋งฅ๊ทธ๋ฆฌ๊ฑฐ
์๋ฐ์คํฌ๋ฆฝํธ์ ์ต์ํ๋ค๋ฉด ์ฌ๋ฌ๋ถ์ ์ง๊ธ ๋ฐ๋ก VR ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. VR ์ฑ์ ๋ง๋ค๊ณ ๋์๋ ํ ๊ฑธ์ ๋ ๋์๊ฐ Brain.js๋ฅผ ์ถ๊ฐํ ์๋ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๊ฐ ์ฑ๊ณผ ์ด๋ป๊ฒ ์ธํฐ๋ํธํ๋์ง ํ์ ํ๊ณ , ์ด๋ฅผ ๋ฐํ์ผ๋ก ์ค์๊ฐ์ผ๋ก UI๋ฅผ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค. ์ด ๋ฐํ์์๋ VR ์ฑ์ ์ ์ํ๊ธฐ ์ํ ์ฒซ๊ฑธ์๊ณผ Brain.js๋ฅผ ์ด VR ์ฑ์ ์ฐ๊ฒฐํ๋ ๋ฐฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์ด๋ฅผ ํ์ฉํด ์ฑ์ ์ ๊ทผ์ฑ๊ณผ ํฅ๋ฏธ๋ฅผ ํฅ์์ํฌ ์ ์๋ ๋ฐฉ๋ฒ์ ์๋ ค๋๋ฆฝ๋๋ค. ๋จธ์ ๋ฌ๋๊ณผ VR์ ๊ดํ ๋ฐฐ๊ฒฝ์ง์์ ์งง๊ฒ ๋ค๋ฃฌ ํ, ๋ฐฐ์ด ๋ด์ฉ์ ๋ผ์ด๋ธ ๋ฐ๋ชจ๋ก ๋ณด์ฌ๋๋ฆฝ๋๋ค. ์ด ๋ฐํ๋ฅผ ํตํด ์ค์ ์ฌ์ฉ ๊ฐ๋ฅํ ์ฑ์ ๋ง๋๋ ๋ฒ์ ๋ฐฐ์๊ฐ์ค ์ ์์ต๋๋ค.
์ด์์ฌ
์ฐ๋ฆฌ๋ ์คํ ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฐฐํฌํ ๋ ์ฌ๋ฌ ๋ฌธ์ ์ ์ง๋ฉดํฉ๋๋ค. ์ค์๋ฅผ ํ๊ธฐ๋ ํ๊ณ , ๋ฐฐํฌํ๋ ๋์ ์๋ฌด๊ฒ๋ ๋ชปํ๊ณ ๊ธฐ๋ค๋ ค์ผ ํ๋ฉฐ, ํผ์ ๋ถ์์ ๋จ๋ฉฐ ์งํํฉ๋๋ค. ์ข์ ํด์ด ๋ง์ด ์์ง๋ง, ์ฌ์ ํ ํด๊ฒฐ๋์ง ์๋ ๋ฌธ์ ๋ค์ด ์์ต๋๋ค. ๊ทธ๋์ ์๋ก์ด ๋ฐฐํฌ ํ๋ก์ธ์ค๋ฅผ ์ ์ํฉ๋๋ค. ์ด ํ๋ก์ธ์ค์์๋ ์ค์๋ฅผ ๋ง๋ค ๊ฐ๋ฅ์ฑ์ด ํ๊ธฐ์ ์ผ๋ก ์ค๊ณ , ๋ฐฐํฌ ํ๋ก์ธ์ค์ ๋๋ถ๋ถ์ด ๋น๋๊ธฐ๋ก ์งํ๋๋ฉฐ, ๋ฐฐํฌ ์ ์ ๋๋ฃ์ ๊ฐ์ด ๋ฆฌ๋ทฐํ ์ ์๊ฒ ๋ฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด ํ๋ก์ธ์ค๋ฅผ ์ํด ๋ง๋ ํด์ธ Ship.js ๋ ์๊ฐํ๋ ค ํฉ๋๋ค. ์๋กญ๊ฒ ์ฌ์ ์ ๋ ํ๋ก์ธ์ค ์์์ ๋๋ ค์์ ๋จ์ณ๋ฒ๋ฆฌ๊ณ ์ง์์ ์ผ๋ก ๋ฐฐํฌ๋ฅผ ํด๋ด ์๋ค.
์๋๋ผ๋ค ์ฟ ๋ง๋ฆฌ
์ ๊ทผ์ฑ์ ์น์ ๊ณ ์ ํ ์ธก๋ฉด์ ๋๋ค. ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ์์ฃผ ๋ฌด์ํ๊ฒ๋๊ฑฐ๋ ์ฐ์ ์์์์ ๋ฐ๋ฆฌ๊ฒ ๋ฉ๋๋ค. ์ ๊ทผ์ฑ์ ๋๋ฌ์ผ ๋ง์ ์คํด๋ค ๋๋ฌธ์ ๊ท์ฐฎ๊ฑฐ๋ ์ด๋ ต๊ฒ ๋๊ปด์ง๋๋ค. ์ด ๋ฐํ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์น ์ฌ์ดํธ ์ ๊ทผ์ฑ์ ์ด๋ป๊ฒ ์ฆ๋์ํค๊ฑฐ๋ ๊ฐ์์ํฌ ์ ์๋์ง ์์๋ด ๋๋ค. ์ด ๋ฐํ์์ ๋ฐฐ์ด ๊ฐ๋ ์ ์ฌ๋ฌ๋ถ์ ํ๋ก์ ํธ๋ ํ๋ ์์ํฌ์ ์ ์ฉํ์ฌ, ๋๊ตฌ๋ ์ธํฐ๋ํฐ๋ธํ๊ณ ์ ๊ทผ์ฑ ์๋ ์ธํฐํ์ด์ค/์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ํ๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค.
๋ฒค ๋ฐํฌ๋ผ์ด
์ฐ๋ฆฌ๋ ์จ๋ผ์ธ์์ ํ๋ฃจ์๋ ์์ญ๋ฒ ์ฐ๋ฆฌ์ ์์ด๋ดํฐํฐ๋ฅผ ์ฆ๋ช ํฉ๋๋ค. ํ์ง๋ง, ';--have i been pwned?์ ๋ฑ๋ก๋ 100์ต ๊ฐ์ ๋ฌํ๋ ๊ฐ์ธ ์ ๋ณด ์ ์ถ ๊ฑด์๊ฐ ๋ณด์ฌ์ฃผ๋ฏ, ์ด ์๋ณ ๊ณผ์ ์๋ ์น๋ช ์ ์ธ ์ฝ์ ์ด ์์ต๋๋ค. ๋ฐ๋ก ๋น๋ฐ๋ฒํธ์ ๋๋ค. Web Authentication API(๋๋ WebAuthn)๋ "์๋ฒ๊ฐ ๋น๋ฐ๋ฒํธ ๋์ ๊ณต๊ฐํค ์ํธํ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์๋ฅผ ๋ฑ๋กํ๊ณ ์ธ์ฆํ ์ ์๋๋ก" ํด์ฃผ๋ W3C์ FIDO์ ํ์ค์ ๋๋ค. WebAuthn์ ์๋ฒ์ ๋ธ๋ผ์ฐ์ ์ ์ธ์ฆ์ ๊ฐ์ ๋น๋ฐ๋ฒํธ ์์ด๋ ์ธ์ฆ์ ๊ฐ๋ฅ์ผ ํ๋ ์ฌ๋ฌ ํ์ค ์ค ํ๋๋ก, ๋ชจ๋ ํ๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋ฉ๋๋ค. ์ด ๋ฐํ์์๋ WebAuthn์ด ์ด๋ป๊ฒ ์๋ํ๋์ง, ๊ทธ๋ฆฌ๊ณ ์ฌ๋ฌ๋ถ์ด ์ง์ ์ด ๊ธฐ์ ์ ํ์ฉํ์ฌ ์ด๋ป๊ฒ ์ฌ์ฉ์์๊ฒ ํจ์ฌ ์์ ํ ์จ๋ผ์ธ ๊ฒฝํ์ ์ ๊ณตํด์ค ์ ์๋์ง ์ค๋ช ํฉ๋๋ค.
์ ์ ์คํด
์ด๋ ๋ฌด๋์ด ์ฌ๋ฆ๋ , ํด๊ทผ ํ ์ง์ ๋์๊ฐ์ ๋ ํ๋ คํ ์กฐ๋ช ๋์ ์์ํ ์์ด์ฝ ๋ฐ๋์ด ๋๋ฅผ ๊ฐ์ธ์ฃผ๊ธธ ๋ฐ๋ผ๋์? ์ง์ ๋์ฐฉํ๊ธฐ ๋ฑ 10๋ถ ์ ์ ์์ด์ฝ์ด ๋ฏธ๋ฆฌ ์ผ์ ธ์ ๋์๊ฐ๊ณ ์๋ค๋ฉด ์ฐธ ์ข์ํ ๋ฐ, ์ด๊ฑธ ์ด๋ป๊ฒ ํ๋ค? ์ง ์์ ๋คํธ์ํฌ์์ ๋ผ์ฆ๋ฒ ๋ฆฌ ํ์ด์ ์๋ฒ๋ฆฌ์ค ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฐ๋ํ๊ณ , ์ง ๋ฐ์ ํด๋ผ์ฐ๋ ์๋น์ค์์ ์ด๋ฅผ ํธ์ถํ๋ฉด ๋ชจ๋๊ฐ ํ๋ณตํ ์ธ์... ์ด๋ผ๊ณ ์๊ฐํ์ง๋ง, ๋ง๋ง์น ์์์ต๋๋ค. ์ด ๊ณผ์ ์์ ๋ฐฐ์ ๋ ๊ฒฝํ๋ค์ ๊ณต์ ํ๊ณ ์ถ์ต๋๋ค.
์์ฌ์
๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋(boilerplate code, ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉ๋๋ ์ฝ๋)๋ ๋ถํ์ํ๊ฒ ํ๋ก๊ทธ๋๋จธ์ ๋๋ฅผ ์ ์ ํ์ฌ ์ฌ๊ณ ๋ฅผ ๋ฐฉํดํ๋ ์์์ ๋๋ค. ๊ทธ๋ ๊ธฐ์ ๋ง์ ์ฑ ๊ณผ ์ ๋ช ํ๋ก๊ทธ๋๋จธ๋ค์ ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋ฅผ ์ง์ํ๋ผ๊ณ ์ด์ผ๊ธฐํ๊ณ , ํ๋ก๊ทธ๋๋จธ๋ค์ ์์๊ณผ ์ถ์ํ๋ฅผ ๋น๋กฏํ ์จ๊ฐ ๋ฐฉ๋ฒ์ ํตํด ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋ฅผ ํผํ๊ธฐ ์ํด ๋ ธ๋ ฅํฉ๋๋ค. ํ์ง๋ง, ์ด๋ฐ ๋ถ๋จํ ๋ ธ๋ ฅ์๋ ์ฐ๋ฆฌ๋ ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋ฅผ ๋งค์ผ ๋ง์ฃผ์น๊ณค ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ , ๊ฐ๋์ฉ์ ์ ๋ง ์ด๋ป๊ฒ ํด์ผ ํ ์ง ๋ชจ๋ฅด๊ฒ ๋ โ๋ณด์ค' ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋ฅผ ๋ง๋๊ธฐ๋ ํฉ๋๋ค. ์ด๋ฐ ๋์๋ ์ ์, ์ด์ ์ง๊ฒน์ง ์์ผ์ ๊ฐ์? ๊ทธ๋ฐ ๋ถ๋ค์ ์ํด ์ค๋นํ์ต๋๋ค. ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋ค๊ณผ์ ์ ์์์ ์ฐ์๋ฅผ ์ ํ ์ ์๊ฒ ๋์์ค โ์ฝ๋ ์ธ์๋ถํดโ ํ ํฌ๋์์. ์ด ๋ฐํ๋ฅผ ๋ค์ผ์ ํ์ ์ฌ๋ฌ๋ถ๋ค์ ๋น๋นํ ์ ์ธํ ์ ์์ผ์ค ๊ฒ๋๋ค. โ์๋ ธ๋ผ, ๋ณด์๋ ธ๋ผ, ์ด๊ฒผ๋ ธ๋ผโ
์ผ์ธํ & ๊น์ฑํ
p5 for 50+(50๋+๋ฅผ ์ํ p5)๋ 2020 ํ๋ก์ธ์ฑ ์ฌ๋จ ํ ๋ก์ฐ์ญ ํ๋ก์ ํธ๋ก, ํ๊ตญ์ ์ค์ฅ๋ ์ธต๊ณผ ๋ ธ๋ ์ธต์ ๋์งํธ ๋ฆฌํฐ๋ฌ์์ ๊ถ๋ฆฌ ํฅ์์ ๋ชฉํ๋ก ์์๋์์ต๋๋ค. ์ฝ๋ฉ ๊ต์ก์ ์ฐ๋ น๋ณ ์๊ตฌ ์ฌํญ์ ๋ง์ถฐ p5.js์ ํ์ต ์ฅ๋ฒฝ์ ๋ฎ์ถ ์น ์ฑ์ ํ๋กํ ํ์ ํ์ต๋๋ค. ์ด ๋ฐํ์์๋ ์ ๊ทผ์ฑ์๋ ์ฝ๋ฉ ๊ต์ก์ ์ํ ๋์์ธ ๊ด์ ์์์ ์์ฌ์ ์ ๋ํด ์ด์ผ๊ธฐํฉ๋๋ค.
์์ด ์ฐํ ์
์ ๋ ๋ง์ดํฌ๋ก์ํํธ์์ ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ์ ๋๊ท๋ชจ git ๋ฆฌํฌ์งํ ๋ฆฌ์ ์ฐธ์ฌํ๊ณ ์์ต๋๋ค. ์ฌ๊ธฐ์ 300๋ช ์ด์์ ๊ฐ๋ฐ์๋ค์ด Microsoft365 ์ ํ๊ตฐ์ ๊ฑธ์น ๋ชจ๋ ํ๋ก ํธ์๋ ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ๊ณ ๋น๋ํฉ๋๋ค. ์ฝ 150๊ฐ์ง์ npm์ ํจํค์ง๊ฐ ์ฌ์ฉ๋๊ณ , 100๋ง ์ค ์ด์์ TypeScript ์ฝ๋๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ์ด๋ฌํ ์ปดํฌ๋ํธ๋ค์ ์ฝ๋ก์ผ์ด์ (co-location)ํจ์ผ๋ก์จ ํ ๋ผ๋ฆฌ์ ํ์ ๋ฐ ์ฝ๋ ๊ณต์ ๊ฐ ํจ์ฌ ์ฌ์์ง ์ ์์ต๋๋ค. ์ด ๋ฐํ์์๋ ๊ฐ๋ฐ์ด ์ฝ๊ณ ๋น ๋ฅด๊ณ ์์ ์ ์ผ๋ก ์งํ๋๊ธฐ ์ํด ํ์ํ ๋๊ตฌ์ ์ฝ๋ ์ ๋ฆฌ ๋ฐฉ๋ฒ์ ๋ํด ์ด์ผ๊ธฐํฉ๋๋ค. ํนํ ๊ฐ์ฅ ๊ณจ์น์ํ ํจํค์ง ๊ด๋ฆฌ์ ์ฌ๋ฌ ํจํค์ง์ ๊ฑธ์ณ ๊ณตํต๋ ์์ ์ ์กฐ์ ํ๋ ๋ฌธ์ ๋ฅผ ์ง์ค์ ์ผ๋ก ๋ค๋ฃน๋๋ค.