9월 회고와 10월 계획

shleecloud·2023년 10월 5일

들어가며

회고 글이 한 달을 건너뛰었다. 덥고 습하던 날에서 하루만에 날씨가 10도까지 내려가는 가을이 됐다. 주구장창 입던 반팔을 내려놓고 조금은 두꺼운 자켓을 입는 계절이 되다니. 어느새 회고 글도 잊어버리고 바쁘게 살고 있었다. 이게 다 사악한 Three.Js 때문이다.

Three.Js와 함께한 여름

시작은 가볍게

회사에서 경험하기 힘든 신기한 웹 인터렉션을 만들고 싶다는 열망에서 시작했다. 우와~ 이런거 어떻게 만든거지? 싶은 웹사이트를 그저 동경하듯이 보고 지나가기만 했는데 이걸 구현하는 21개 프로젝트로 완성하는 인터랙티브 웹 개발 With Three.js & Canvas강의를 우연히 발견했다. 게다가 동기부여까지 해주는 강의 듣고 글쓰기 챌린지 이벤트가 마침 모집중인걸 보고 이거다! 싶었다. 이게 실수였다. 강의가 이렇게 무거울줄이야.

챌린지를 하느라 다른 블로그 플랫폼에서 글을 꾸준히 쓰고 있었다. 그날그날 배운걸 이해하고 정리해서 글을 올렸다. 이렇게 매일 쓰다보니 자연스럽게 회고를 잊어버렸다. 이미 글을 많이 쓰고 있었다.

8월 Canvas 2D

8월 8일부터 시작된 Three.Js 챌린지. 강의 앞부분은 굉장히 쉬웠다. 잘 알고 있던 HTML, CSS 그리고 이벤트를 위한 약간의 JS. 진짜 시작은 Canvas 강의로 들어오고부터였다.Canvas 엘리멘트 하나에서 내용이 얼마나 있겠어? 라고 생각했다. Canvas는 웹개발의 틀을 벗어났다.

기초를 조금 설명하자면, Canvas는 보일러플레이트를 제외하면 파티클이라는 점을 찍는 것부터 시작한다. 아래에 터지고 있는 폭죽의 터지는 이팩트의 점이다. 이걸 하나하나를 찍어주고 움직임을 정의해야한다. 랜덤한 각도와 일정한 반지름이 있는데 이 파티클이 원모양으로 움직이기 위해서는 삼각함수로 2차원 좌표값을 구해야한다. 각도와 반지름을 알고 있으니 2차원 좌표계에서 원의 한 점의 좌표를 구하는 삼각함수를 사용한다.

와우... 기하학?? 갑자기?? 🤯
마치 제빵을 배우러 왔다가 갑자기 집 앞에 밀을 심으는 말을 듣는 기분이었다.
나중엔 익숙해졌지만..

아래의 폭죽 터지는 이팩트가 그렇다. 올라갈 때 좌우로 미묘하게 흔들리는 빛은 올라가는 x좌표에 sin(y좌표) 함수를 대입하면 구현할 수 있다.
터진 파티클이 자연스럽게 떨어지기 위해서 중력값을 구해서 RAF(requestAnimationFrame)에 전달한다.

그 외에 물리 이팩트도 구현했다. 여기선 라이브러리 없이 상남자로 물리엔진을 구현했다. 중력을 만들고 상단의 점을 고정하고 아래로 줄을 만들고 점을 연결했다.
마우스가 점과 가까워지면 마우스의 좌표와 가까워지고 마우스에 붙게 된다. 점은 마우스 좌표를 천천히 따라가게 만들어 마우스를 빠르게 움직여서 특정 좌표 이상 멀어지면 떨어지게 만들었다.

이 이후에 만든 프로젝트에선 Matter-js를 활용해서 물리이팩트를 구현했다. 이걸 활용해서 이전에 만든 슬링샷 프로젝트를 만들었다.

Canvas 마지막엔 미니게임도 만들었다. 중력과 마우스 이벤트핸들러를 활용해 벌을 조정한다. 좌표가 겹치면 벽이라면 게임오버, 동전은 점수를 받는.. 이렇게 쓰고 보니 간단하다.
하지만 핵심 개념 외에 디테일이 엄청 많았고 그렇게 구현한 디테일이 어렵고 완성도에 영향이 컸다. 예를 들어 뒤에 화면이 원근감이 있게 만들기 위해 이미지를 겹쳐서 나타나게 만들고 움직이는 속도를 조절한다거나.

9월 Three.js 3D

단순히 강의를 듣고 넘어가기만 하면 편하겠지만 나는 이해를 하고 싶었다. 거기에 글을 써야되는 압박감까지 있어서 매일 강의를 허투로 들을 수 없었다. 낯선 분야에 정신을 못차리면서 따라가다가 9월이 됐다.

Three.Js는 또 신세계였다. 똑같이 Canvas 객체를 쓰는건 맞지만 구현하기 위한 개념이 완전히 달랐다. 라이브러리 베이스로 배워서 그나마 나았지만 그만큼 깊이가 훨씬 깊어졌다. 여기부턴 거의 유니티나 언리얼 엔진과 더 닮았다고 느껴졌다.

빛과 카메라의 개념이 추가되고 질감(Material)과 형태(Geometry)의 개념이 생겼다. 카드 만드는 이팩트가 재밌었는데 토스에서 이런 이팩트를 만든 분이 나오셔서 강의를 하셨다.

이 외에도 네이버에서 자동차를 360도를 돌리는 이팩트를 잠깐 언급하셨는데, 이건 3D가 아니라 이미지로 구현한거라고 하셨다. 확인을 해보니.. 진짜잖아?
Canvas로 할 필요가 없는 인터렉션이라면 동영상이나 이미지로 구현하는게 오히려 낫다.

심화로 들어가면 수학은 계속 나오고 새롭게 쉐이더라는 개념을 배운다. 이제 WebGL을 활용하게 된다. 그러려면 GLSL이라는 언어를 활용해야 한다. 이건 또 뭐람.. 수식을 활용해서 이팩트를 만든다.

GLSL 내장 수식 함수를 활용해서 이렇게 울퉁불퉁한 형태의 지구를 만들 수 있다. 위에 언급한 질감과 형태에 모두 적용할 수 있는데 이 지구는 형태에 쉐이더를 적용했다. 3D 객체는 정점으로 이루어져있다. 이 정점의 y 좌표를 삼각함수에 대입하면 정점의 위치를 바꿀 수 있다.

그리고 완전히 새롭게 만든 이팩트는 아래에 있다. 엄청 특별한 효과가 들어가진 않았지만 Contrast와 색을 잘 조합하고 질감에 쉐이더를 적용해 반짝이게 만들고.. 여기서 다 언급하면 글이 너무 길어진다. 강의 미리보기가 있는데 이런 스타일로 진행된다.

shader-example

주말을 제외하고 이 강의를 듣고 이해하는데 대부분의 시간을 사용했다. 엄청나게 어려웠고 막막했지만 결국 끝까지 완강했고 첼린지도 내가 목표한만큼 성공했다. 정작 본업인 웹개발을 잠시 내려놨지만 막연했던 웹 인터렉션이 무엇이고 어떻게 구현하는지 대략적으로 알게 된데 의의를 두기로 했다. 회사 다니면서 배웠다면 금방 포기했을지도 모른다.

10월 계획

Three.Js 하느라 고생한 썰을 풀다보니 글이 엄청 길어졌다. 10월 계획은 심플하다. 이제 본업인 웹 개발로 돌아온다.

웹 개발 강의 듣기

NestJs 강의를 마저 마무리한다. 챌린지 때문에 멈췄던 강의인데 이미 아는 내용이기도 하고 가볍게 훑어보면서 빠르게 정리하려고 한다. 서버에 대해서 드는 생각은 요즘 SSR이 너무 좋아서 사용자 10만까지는 NextJs에서 서버 기능을 사용하는게 더 나은 것 같다.

추가로 React 심화 강의를 듣고 싶다. 그리고 테스트코드 강의도 듣고. 전회사에선 선임자가 만들어둔 테스트코드를 적당히 보면서 했는데.. 이게 정말 맞은건지, 다른 테스트 방식은 없는지 찾아서 정리하고 싶다.