๋ฆฌํธ๋ฆฌ๋ฒ๋ ๊ธ๋ฐฉ ํฌ๋ ๊ฒ ๊ฐ์๋ฐ, ๋ชธ์ง์ ์ปค๋ ์๊ธฐ ๊ฐ๋ค.
๋ชธ์ง์ ์ปค์ ธ๋ ์๊ธฐ๋ ์๊ธฐ...
๊ทธ๋ ๋ค, ๋๋ '์์ ' ๊ฐ๋ฐ์๋ค.
์๋ฐ๊ธฐ๊ฐ ํ์ฉ ์ง๋ฌ๋ค. 3์์ ์๋ก์ด ํ์ฌ๋ก ์ด์ง ํ, ์ฒ์ ์ฐ๋ ๋ธ๋ก๊ทธ์ด๋ค. (๊ทธ๋งํผ ๋ฐ๋นด๋ค๋ ๋ป...ใ )
์ด์งํ๊ณ ๋์ ํ ํ๋ก์ ํธ๊ฐ ๋๋ฌ๋ค. ๋ด์ ์
์ฌํ๋๋ฐ ๋๋๊ณ ๋ณด๋ ๊ฐ์? ๐ ใ
ใ
ใ
ํฐ ์นดํ
๊ณ ๋ฆฌ ์์ฃผ๋ก ํ๊ณ ํ ์์ ์ด๋ค.
์ ์ฌํ๊ฒ ๋๋ฉด ์ผ๋จ ๋ชจ๋ ํ์๊ณผ ํจ๊ป ์์ฌ๋ฅผ ํ๋๋ก ์์ฌ ํ๋์ด ๋ง๋ จ๋๋ค. ์ฐ๋ฆฌ ํ ์ธ์๋ ๋์์ธ ํ, ๋ฐฑ์๋ ํ, QA ํ ๋ฑ๊ณผ ํจ๊ป ์์ฌํ๋ค. ๋ณดํต ์ฐ๋ฆฌ ํ ์ธ์ ๋ค๋ฅธ ํ๊ณผ ์์ฌํ ์ผ์ด ๊ฑฐ์ ์๋ค ๋ณด๋ ์ ๊ธฐํ๋ค๊ณ ์๊ฐํ๋ค. ๊ทธ ์ธ์๋ ๋ชฉ์์ผ๋ง๋ค '๋๋ค ๋ฐฅ๋ฉ์ดํธ'๋ผ๋ ์ด๋ฒคํธ๊ฐ ์์ด ์กฐ์ง ์ ์ฒด์์ ๋๋ค์ผ๋ก ๋ฐฅ์ ๋จน๋๋ค. ์๋ก ์นํด์ง๋ค ๋ณด๋ฉด ํธํ ์์ฌ์ํต๊ณผ ์ ๋ขฐ๊ฐ ์๊ธฐ๋ฉด์ ๊ฐ๋ฑ ์ํฉ์์๋ ์ ์ฐํ๊ฒ ํด๊ฒฐํ ์ ์์ ๊ฒ ๊ฐ์๋ค. ๋ ํํธ์ผ๋ก๋ ๋ฌด์ฒ ๊ท์ฌ์ด ์ด๋ฒคํธ๋ผ ์๊ทผํ ๋ชฉ์์ผ๋ง๋ค ๊ธฐ๋ํ๊ณ ์๋ค.
'ํจ๊ป ์๋ผ๊ธฐ' ์ฑ ์ ๊ฐ์ด ์ฝ๊ณ ํ ๋ก ์ ๋๋๋ค. ๋ด๊ฐ ์ด ์ฑ ์์ ๋๋ ๋ถ๋ถ์ ๊ฐ์ธ์ ์ฑ์ฅ์ด ์กฐ์ง์ ์ฑ์ฅ์ด ๋๊ณ , ์กฐ์ง์ ์ฑ์ฅ์ด ํ์ฌ์ ์ฑ์ฅ์ด ๋๋ค๋ ๊ฒ์ด๋ค. ํ์ฌ๋ ๋จ์ํ ๋์ ๋ณด์ด๋ ๊ฑด๋ฌผ์ด๋ ๋ฌผ๋ฆฌ์ ์ธ ๊ณต๊ฐ์ด ์๋๋ผ ์ฌ๋๋ค์ด ๋ชจ์ฌ์ ์ด๋ฃจ๋ ๊ณต๋์ฒด๊ฐ ์๋๊น ์๊ฐํ๋ค. ์ฆ, ์ฌ๋๋ค์ ๊ด๊ณ์ ๋ ธ๋ ฅ์ด ๋ชจ์ฌ ํ๋์ ์งํฉ์ฒด๋ฅผ ๋ง๋ ๋ค๊ณ ์๊ฐํ๋ค.
๋๋ ํ๊ณ ๋ฅผ ์ข์ํ๋ฉด์๋ ๊ท์ฐฎ์ํ๋ค. ํ๊ณ ๋๋ฉด ๋ฌด์ฒ ๋ฟ๋ฏํ์ง๋ง, ์์ํ๊ธฐ๊น์ง ๋๋ฌด ์ค๋ ๊ฑธ๋ฆฐ๋ค. ํ์ง๋ง ํ๊ณ ์ ์ค์์ฑ์ ์๊ณ ์๋ค. ๊ธฐ๋กํ์ง ์์ผ๋ฉด ๊ธ์ธ ์ํ๊ณ , ์๊ฐํ์ง ์์ผ๋ฉด ๊ทธ์ ๋๋ ๋๋ก ์ด์๊ฐ๋ค. ๊ทธ๋ฐ๋ฐ ์ฐ๋ฆฌ ์กฐ์ง์ด ์ ์ฒด์ ์ผ๋ก ํ๊ณ ๋ฅผ ์ ์ฑ๊ธฐ๊ณ ์๋ค๋ ์ ์ด ์ข์๋ค. ๋ค๋ค ๊ทธ ์ค์์ฑ์ ์๊ณ ์๊ณ , ํผ์๊ฐ ์๋ ํจ๊ป ์ฑ์ฅํ๊ณ ์๋ค๋ ๋๋์ด ๋ค์๋ค. ์ด์ฉ๋ฉด ์ผ์ ๊ฐ์ ์ฑ์ด ๋ถ์ด์ ๋ฏธ๋ฃจ๊ณ ์ถ์ ๋ง์์ ์ต๋๋ฅด๊ณ ํ๊ณ ๋ฅผ ํตํด ๋ด ๊ฒ์ ์ฑ๊ธธ ์ ์๋ค๊ณ ์๊ฐํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ถ๊ธฐ๋ง๋ค ์๊ธฐ ํ๊ฐ๋ฅผ ํ๋ค๋ ์ ๋ ๋๋ฌด ์ข์๋ค. ์ด๋ฐ ์กฐ์ง์ ํจ๊ปํ ์ ์์ด์ ์ฐธ ๊ธฐ์๋ค. (๋ฌผ๋ก ํ ๋๋ง๋ค ๊ดด๋ก์ํ์ง๋ง...)
6๊ฐ์ ๋์ ์คํฐ๋๋ฅผ ์ธ์ด ๋ณด๋ฉด ์ด 3๊ฐ ์ ๋ ํ๊ฒ ๋์๋ค. Object, Three.js, a11y...
Object
'์ค๋ธ์ ํธ'๋ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ๋ํ ๋ด์ฉ์ ๋ค๋ฃฌ๋ค. ์ ์ฐํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ์ฝ๋ ์ค๊ณ์ ์ค์ ์ ๋๋ค. ์ค๋ธ์ ํธ ์คํฐ๋๋ ์ค๊ฐ์ ํฉ๋ฅํด์ ์ ์ดํด๋์ง ์๋ ๋ถ๋ถ๋ ๋ง์์ง๋ง, ๋ฐฐ์ด ๋ถ๋ถ์ ์ํํธ์จ์ด ์ค๊ณ์์ ์ค์ํ ๋ถ๋ถ์ด ์์กด์ฑ์ ์ด๋ป๊ฒ ๊ด๋ฆฌํ๋๋์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค๋ ์ ์ด๋ค. ํ์ฐ์ ์ผ๋ก ์์กด์ฑ์ด ์๊ธฐ๊ณ , ์ ์ฐํ ์ค๊ณ๋ฅผ ์ํด ๊ฐ์ฒด๋ค์ ์ญํ , ์ฑ
์, ํ๋ ฅ์ด ์ค์ํ๋ค๋ ๊ฒ์ ๋ฐฐ์ ๋ค. ์ฑ
์ ๋ํ ๋ด์ฉ์ ์ค๋ช
ํ๊ณ , ์ค์ ๋ก ์ด๋ป๊ฒ ํ์ฉํ ์ ์๋์ง ์์ ์ฝ๋๋ ํจ๊ป ์ค๋นํ๋ค. (๋๋ค์ผ๋ก ๋ฐํ ์ค๋น๋ฅผ ํ๋๋ฐ ์ฐ์์ผ๋ก ๋น์ฒจ๋๋ฉด... ์์ฃผ ๊ธฐ๋ปค๋ค(?) ใ
ใ
..โ ๏ธ)
Three.js
Three.js ์คํฐ๋๋ ์ง๊ธ ์ฌ์๊ฐ ์ค์ด๋ค. ์๋ก ์
์ฌํ์ ๋ถ๋ค๋ ๊ณ์๊ณ , ์ค๊ฐ์ ๊ต์ฅํ ๋ฐ๋น ์ ธ์ ๋ณด๋ฅ๋์๋ค. ๊ทธ๋ฐ๋ฐ ์ฌ์๊ฐํ๋ ๋งํผ ์ ๋๋ก ํ๊ณ ์ถ๋ค. ๊ทธ๋ฐ๋ฐ ์ด๋ ต๋ค ใ
ใ
ใ
a11y
์น ์ ๊ทผ์ฑ!!!! ์๊ฒ์ ๋ด๊ฐ ์์
ํ๋ ์ํฝ์์ ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ์ด์๋ค. ์คํฐ๋๋ฅผ ์ด๊ณ ์์ผ๋ก ํด์ผ ํ๋ ์ํฉ์ด์๋ค. ๊ทธ๋ฐ๋ฐ ์น ์ ๊ทผ์ฑ์ด๋ผ๋ ๋ถ๋ถ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ๋ ๋๋ฐ์ด์ค์์ ์๋ฒฝํ ํธํ๋๊ธฐ ์ด๋ ค์ธ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋ค. ๊ทธ๋ ์ง๋ง ํ๊ตญ์์๋ ๊ธฐ๋ณธ์ ์ธ ๋ถ๋ถ์กฐ์ฐจ๋ ์ ๋๋ก ์ ์ฉ๋์ง ์์ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค. ์ค์ฃฝํ๋ฉด ์ด๋ฏธ์ง๋ ์์ด์ฝ ๋ฒํผ์ ๋ผ๋ฒจ์ ๋ฌ์์ฃผ๋ ๊ฒ๋ง์ผ๋ก๋ 70%๋ ์์ฑ๋๋ค๊ณ ํ๋ค... FEํ์ด ๋์๊ฐ๋ฉด์ ์ค๋นํ์๋๋ฐ, ํด๋น ์คํฐ๋ ๋ด์ฉ์ด ์ข์์ ๋์ค์ ๋ธ๋ก๊ทธ์ ์์ฑํด๋ณผ ์์ ์ด๋ค.
ํ ํ์ฌ์ ์ด์ง ํ ํ์๋ค์ด ์ฐธ ์ข๋ค๊ณ ์๊ฐํ๋ค. ๊ทธ๋์ ์ด์ง์ ์ํ๋ค๊ณ ์๊ฐํ๋ค. ๊ฐ์ฅ ํฐ ๋ถ๋ถ์ "์ด๊ฑด ๋ด ์ผ์ด๊ณ , ๊ทธ๊ฑด ๋ค ์ผ์ด์ผ." ์ด ๋ถ๋ถ์ด ์๋ค๋ ๊ฒ์ด๋ค. ๋์ ์ผ๋ ๋ง์น ์์ ์ ์ผ์ฒ๋ผ ๋์์ฃผ๊ณ , ๋ฐ๋ด๊น์ง ๋ ๋ ค์ค์ ๊ฐ์ฌํ ๋๊ฐ ๋ง์๋ค. ์ด๋ ค์ด ๋ถ๋ถ์ ํ์ด ํ๋ก๊ทธ๋๋ฐ์ ํ๊ธฐ๋ ํ๋ฉฐ, ๋ฌ๋ฒ๋๋ ํด์ค ๋๊ฐ ์์๋ค. ๊ทธ๋ฆฌ๊ณ ๋ค๋ค ์ค๋ ฅ์๋ค์ด๋ผ ๊ทธ๋ฐ์ง ๋ถํธํจ์ด ์์ ๋ ์ด๋ป๊ฒ ๊ฐ์ ํ ์ง ๋ ๊ฐ์ ๊ณ ๋ฏผํ๋ฉฐ ๊ฐ๋ฐ์ ์ง์ฌ์ด๋ผ๋ ๋๋์ ๋ฐ์๋ค. ๊ธฐ๋ผ์ฑ ๊ฐ์ ๋ถ๋ค์ด ๊ณ์ ์ ๋ฐฐ์ธ ์ ์ด ๋ง๊ณ , ์์ง ๋ด๊ฐ ๋ถ์กฑํ ๋ถ๋ถ์ด ๋ง๊ตฌ๋ ํ๋ ๊ฒ์ ๊นจ๋ซ๊ฒ ๋๋ค.
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ๋ง ๋ง์ด ์ฌ์ฉํด๋ดค๋ค. Uppy, React TipTap, Media Captions, React Hook Form, GraphQL, XState, React Aria, Grit, HLS ๋ฑ๋ฑ...
์ด๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ ๋น๋์ค ์๋ง ์
๋ก๋, ์๋ง์ ๋ณด์ฌ์ค ์ ์๋๋ก ํ๋ค. ๊ทธ ์ธ์ ์๋ํฐ๋ '์ฐ๋จน'์ด์ง๋ง, ๋
ธ์
์ฒ๋ผ ๋ธ๋ก์ ๊ตฌํํด๋ณด๊ธฐ๋ ํ๋ค. ์์ ๊ตฌํํ๋ ๊ฒ๋ ์ข์ํ์ง๋ง, ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋๋ฑ ๋ง๋ค์ด ๋น ๋ฅด๊ฒ ์์ฑ๋ ์๊ฒ ๋ง๋๋ ๋ฒ๋ ๋ฐฐ์ด ๊ฒ ๊ฐ์ ์ข์๋ค. ์ด๋ค ์ํฉ์ด๋ ๊ฐ์ฅ ์ ํฉํ ๋ฐฉ๋ฒ์ ์ฐพ๊ธฐ ์ํด์๋ ๋ง์ ๊ฒฝํ์ด ํ์ํ ๊ฒ ๊ฐ๋ค. ใ
ใ
ใ
๊ทธ๋ฆฌ๊ณ ํ์ฌ๋ ๊ฐ๋ฐ ํ๊ฒฝ ๊ฐ์ ์ ์ํด ๋ฐฉ๋ฒ์ ์ฐพ๊ณ ์๋๋ฐ, ์ด ๋ํ ์ฌ๋ฏธ์๋ค!!
์์ฌ์ด ์ ์ ๋ฆฌ๋ทฐ์ ์ค์์ฑ์ด๋ค. ๋ฆฌ๋ทฐ ๋ฌธํ๊ฐ ๋ ๊ฐ์ ๋๋ฉด ์ข๊ฒ ๋ค๋ ์๊ฐ์ด ๋ ๋ค. ๋ฆฌ๋ทฐ ๋ฌธํ๋ฅผ ํตํด ์ฝ๋ ํ์ง์ ์ ์งํ๋ฉด์ ์ค๋ ฅ๋ ํจ๊ป ๋๋ฆด ์ ์์ง ์์๊น ์ถ์๋ค. (์๋ ์๋...) ๊ทธ๋ฆฌ๊ณ ๊ธฐ์ ๋ถ์ฑ ๋ถ๋ถ๋ค๋ ๊ฐ์ ๋๋ฉด ์ข๊ฒ ๋ค ์ ๋...? ๋น ๋ฅธ ๊ฐ๋ฐ ์๋๋ฅผ ์ํด ๋น ๋ฅธ ๊ฐ๋ฐ ํ๊ฒฝ์ ๊ตฌ์ถํ๋ ๊ฒ๋ ์ค์ํ๋ค.
๋์ผ๋ก, 6๊ฐ์ ์ ๋๊ฐ ์ ๋ง ํญํ์ฒ๋ผ ์ง๋๊ฐ๋ค. ๋์ด์ผ๋ณด๋ฉด ์์ฑ
๋ ๋ง์ด ํ๋ ๊ฒ ๊ฐ๋ค. ์์ฑ
ํ๊ณ , ๊ทธ๋ฅ ํ์... ์ด ๊ณผ์ ์ ๋ฐ๋ณตํ๋ ๊ฒ ๊ฐ์๋ฐ, ์ ๊ธฐํ๊ฒ๋ ๊ทธ๋๋ ์กฐ๊ธ์ ์ฑ์ฅํ๋ค๊ณ ๋๋๋ค. ๊ณผ์ ์์์๋ ๊ดด๋ก์๋ ๋ง์์ง๋ง, ์ฌ๋ฏธ๋ ๋ง์ด ๋๋ผ๋ฉด์ '๋, ๊ฐ๋ฐ ์ข์ํ๋ค?'๋ผ๊ณ ์๊ฐํ๋ค. ์กฐ๊ธ ๊ดด๋กญ๋๋ผ๋ ๋ถ๋ชํ๊ณ ๊นจ์ง๋ ๊ณผ์ ์ด ๊ฝค ๊ด์ฐฎ์์ง๋...? (๋ฌผ๋ก ๋์ค์ ํํํ ์๋ ์๊ฒ ์ง๋ง...)
ํ ํ๋ก์ ํธ๊ฐ ์ด์ ๋๋ฌ๊ณ , ์ฌํด ํ๋ฐ๊ธฐ์๋ ์กฐ๊ธ ๋ ๊ธฐ์ด์ ์ธ ๋ถ๋ถ๋ ๋ณด์ถฉํ๊ณ , ํ๊ณ ์ถ์๋ ๊ณต๋ถ(test code, GraphQL ๋ฑ๋ฑ)๋ฅผ ๊พธ์คํ ํด๋ณผ ๊ฒ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ๋ธ๋ก๊ทธ์๋ 6๊ฐ์ ๋์ ๋ฐฐ์ ๋ ๋ถ๋ถ์ ์์ฑํด๋ณด๋ ค๊ณ ํ๋ค!!
2.three.js
๋๋ฐฅ๋ฉ ํ๊ฐ ๋๋ค์ด
4์ ๋ด
์์ง๋ ๋๊ตฐ์ง ๋ชจ๋ฆ ใ
ใ
..