밴드부와 VR 테마파크를 거쳐 개발로 왔습니다. 앞단이 바뀌었다는 것만으로 사업이 흔들리는 걸 현장에서 본 뒤, 프론트엔드로 진로를 정했습니다.
돌아보면 저는 늘 무리를 지어 일해왔습니다.
대학에서는 남들 앞에 서는 것이 두렵지 않은 사람이 되고 싶어서 발표할 기회는 전부 찾아다녔고, 동아리도 밴드부처럼 사람이 많이 필요한 쪽으로 들어갔습니다. 밴드는 혼자 잘해도 소용이 없습니다. 각자 맡은 파트를 연습해 와서 합을 맞추는 시간이 있어야 곡이 완성됩니다. 무대를 하나 올리는 일이 결국 하나의 프로젝트였습니다.
휴학하고 일한 VR 테마파크도 비슷했습니다. 기구를 돌리고 손님을 안내하는 일은 혼자 할 수 없습니다. 누가 어디에 서 있고 어떤 순서로 움직이는지가 정해져 있어야 하루가 굴러갑니다. 정해진 기간에 목표를 두고 여럿이 붙어서 결과를 만드는 방식에 익숙해졌습니다.
개발 강의를 처음 들었을 때가 그랬습니다.
과제를 붙잡고 밤을 넘긴 날이 있었는데, 억지로 버틴 게 아니라 그냥 재밌어서 계속 앉아 있었습니다. 안 되는 이유를 찾아 헤매는 시간이 지겹지 않았습니다. 이런 감각은 그동안 공부하면서 느껴본 적이 없었습니다.
그리고 개발자로 일하면 대체로 팀을 이뤄 프로젝트 단위로 일한다는 이야기를 들었습니다. 제가 지금까지 익숙해진 방식이 그것이었습니다. 사람들과 같이 일하는 것도 좋고, 무언가를 직접 만들어내는 것도 좋았습니다. 두 가지가 겹치는 자리가 여기라면 해볼 만하다고 생각했습니다.
진로를 프론트엔드로 좁힌 것은 테마파크에서 목격한 일 때문입니다.
VR 놀이기구는 화면이 나오고 그 화면에 맞춰 기구가 움직이는 구조였습니다. 화면을 띄우는 프로그램은 대부분 다른 회사 것을 가져다 썼는데, 어느 시점에 비용을 줄이려고 자사 프로그램으로 전면 교체하는 일이 있었습니다.
비용만 보면 맞는 판단이었을 겁니다. 그런데 결과는 반대였습니다.
현장에 서 있던 저는 손님들의 반응을 바로 볼 수 있었습니다. 조작 방식은 비슷했지만 실제로 쓰는 사람들의 연령대에 맞지 않는 화면이었고, 쓰다 보면 어긋나는 지점이 조금씩 눈에 띄었습니다. 인기 많던 기구들이 시들해졌습니다. 코로나 같은 다른 요인도 겹치면서 결국 하향세를 이기지 못하고 손님이 줄어든 테마파크는 얼마 지나지 않아 문을 닫았습니다.
같은 기구, 같은 조작인데 앞단이 바뀌었다는 것만으로 사업이 흔들리는 것을 봤습니다. 사용자와 맞닿아 있는 부분이 결국 그 서비스의 값을 결정한다는 걸 그때 알았습니다. 이 부분을 다루는 일이 뭔지 찾아보다가 프론트엔드라는 직무를 알게 됐습니다.
그래서 지금은 자바스크립트를 붙잡고 있습니다.
아직은 정말 기초입니다. 버튼을 클릭했을 때 이벤트가 어떻게 위로 전파되는지, stopPropagation은 언제 필요한지, CSS transition으로 움직일 수 있는 속성과 안 되는 속성이 무엇인지. 하나씩 정리하는 중입니다.
혼자 하니 진도를 제 속도로 맞출 수 있어 나쁘지 않습니다. 막히면 그 부분만 며칠이고 붙잡을 수 있습니다. 다만 이 방식이 맞는지는 계속 의문입니다. 개발은 결국 같이 하는 일이라는데, 화면 앞에 혼자 앉아 개념을 정리하는 것이 그 준비가 될지 모르겠습니다. 코드 리뷰를 받아본 적도, 남의 코드를 같이 고쳐본 적도 없습니다.
지금 답을 낼 수 있는 질문은 아닌 것 같아서, 일단 눈앞의 것부터 이해하고 넘어가기로 했습니다.
막막할 때가 더 많습니다. 로드맵을 보면 배울 것이 끝없이 이어져 있고, 제가 지금 그 목록의 어디쯤인지도 가늠이 안 됩니다.
그래도 혼자 붙잡던 코드가 예상대로 움직이면 별거 아닌 결과물인데도 한참 들여다보게 됩니다. 그 감각 하나 때문에 다음 날 또 노트북을 켜는 것 같습니다.
지금은 기초를 제대로 다지는 데 집중하려 합니다. 프레임워크를 배워야 한다는 말도 많이 듣지만, 밑이 흔들리는 상태로 넘어가고 싶지 않습니다.
대신 배운 것은 꾸준히 기록해두려 합니다. 지금 제가 무엇을 알고 무엇을 모르는지가 그렇게 해야 눈에 보이기 때문입니다.
다만 테마파크에서 느꼈던 그 감정은 잊지 않으려 합니다. 나중에 제가 실제로 일하게 되었을 때, 제가 내리는 결정 하나하나를 사용자들은 어떻게 받아들일지 항상 먼저 고려하며 신중하게 해나가고 싶습니다.
그러려면 결국 기초가 탄탄해야 한다고 생각합니다. 여러 상황을 다 대응할 수 있어야 "이렇게 하면 사용자가 불편해진다"는 판단이 섰을 때 다른 방법을 낼 수 있을 테니까요. 지금 개념 하나하나를 붙잡고 있는 이유도 거기에 있습니다.
메타 태그를 다 넣었는데도 검색 결과는 파란 링크 한 줄뿐이었습니다. 검색엔진이 페이지를 '읽는' 것과 '이해하는' 것은 다른 문제였고, 그 사이를 메우는 게 구조화된 데이터였습니다.
전역 Suspense로 감싸면 경고는 사라지지만, 페이지의 정적 마크업까지 placeholder로 대체됩니다. Next.js 소스코드를 따라가 BailoutToCSRError가 CLIENT_RENDERED 경계로 어떻게 흐르는지 살펴봅니다.
hooks 기반 이벤트 드리븐 위젯을 만들고, 그 과정에서 왜 Electron을 선택했는지, hook과 기록 파일이라는 두 신호를 어떻게 교차 검증했는지 정리했습니다.
문서에는 "queued"라고만 적혀 있습니다. 호출 단위인지 컴포넌트 단위인지 탭 전체인지 알 수 없어서, 30개 요청을 세 가지 방식으로 직접 재봤습니다.
참조형 데이터는 내용이 같아도 주소가 다르면 다른 값으로 취급됩니다. 이 특성이 useEffect 의존성 배열과 React.memo에서 왜 문제가 되는지, useCallback과 useMemo가 무엇을 해결하는지, 그리고 왜 모든 곳에 쓰면 안 되는지 정리합니다.
인앱 브라우저에서 기능이 깨지는 문제와 대용량 목록 렌더링 성능 문제, 두 가지를 실제로 부딪히고 풀어낸 기록입니다.