약 반년간 진행된 디프만 활동이 파이널 발표를 마침표로 끝이 났다. 기존 DDD, 오픈소스 컨트리뷰톤 활동을 통해서 스스로 채찍질할 수 있기도 하고 개발자 네트워킹 및 협업을 통해서 1년 반동안 많은 성장을 이뤘다고 생각한다. 이후 이직을 고민하고, BE에서 FE로 전향하게 되면서 현재 현업에서 쌓을 수 없는 리액트 프로젝트 경험이라던가 퍼블리셔가 맡는 파이를 가져오고 싶어서 디프만 11기 FE로 약 반년간 프로젝트를 진행하게 되었다.
면접 그리고 프로젝트
감사하게도 높은 경쟁률을 뚫고 11기로 활동할 수 있게 되었다.(한 10:1은 되었던 것 같다.) 그 동안 쌓아온 MBC 프로젝트 포트폴리오와 개발에 대한 열정을 높게 사주신 것 같다. 서류심사 이후에는 비대면 면접이 진행되었다. 일반 기업 수준의 기술면접은 아니니 긴장하지 않아도 될 것 같다. 실제로 나 같은 경우 React 경험은 전무하고 기술 질문도 2-3개에 그쳤었다.
내로라하는 개발자들과 마크업 경험없이 협업할 수 있을까? 라는 생각에 걱정이 앞서기도 했지만, 평소에 닥치면 어떻게든 할 수 있다는 생각으로 참여했던 것 같다. 기존에 회사에서 Vue 기반 개발을 약 반년간 진행했던 경험으로 프로젝트 개발을 시작했다.
다양한 플랫폼의 웹툰을 모아서 주식 양식을 더한 덕질 플랫폼으로 주제를 정하고 기술 스택을 정하였다. Next.js 를 통해 기존 CSR의 단점인 SEO 문제를 극복하고 React Query로 데이터 패칭을, Recoil로 전역 state를 관리하였다. 이외에도 Hotjar, Mixpanel, Sentry, Storybook등 다양한 기술에 대한 접근 및 시도가 있었다.
FE 배포는 한번도 경험하지 못했었는데, 팀원의 많은 기여로 아래와 같은 구조가 짜여졌다. Github action으로 dev, staging, live 환경별로 serverless를 통해 배포하고 있다. AWS ClounFront, AWS 람다엣지를 주로 사용한다.
프로젝트를 시작할 때 특히 팀원들과 많이 고민한 부분은 바로 바로 아키택쳐 패턴이다. 이전에 MBC APP을 할때도 같은 고민을 하게 되었는데, 어떤 디렉토리 구조를 가지는게 효율적이고 가장 공통화를 잘 할 수 있을까 하는 고민이었다. 많이 하는 방식으로 우리팀도 assets, components, context, apis, hooks, pages, utils등 목적을 가지는 디렉토리로 분리하였다. 특히 hooks를 통해 재사용 가능한 커스텀 훅으로 뺄 수 있는 부분은 최대한 이를 이용하려고 노력하였다. 더해서 완전 아토믹 적인 구조는 아니더라도 components에는 Molecule 레벨의 컴포넌트를 배치하고 domains에는 Organisms 레벨의 컴포넌트를 배치해 좀더 컴포넌트를 세분화하였다. 이는 공통 디자인을 최대한 재활용하기 위한 방법이었다. 프로젝트가 끝나고 난 이후에는 이런 경계가 좀 흐려지는 악효과도 있었는데, 이는 명확할 수록 좋다. 조금 더 확장성있고 큰 프로젝트를 진행하게 된다면 아토믹을 적용해봐도 좋겠다는 생각을 하게되었다.
피그마 vs 포토샵
현업에서는 포토샵을 계속 사용했었는데 이번 프로젝트는 피그마를 통해 진행되었다. 피그마를 쓰면서 가장 편리했던 것은 바로 디자이너가 직접 구축해둔 디자인 시스템의 사용이었다. 기존에는 화면 단위의 작업으로 진행되었다면 지금은 컴포넌트 단위로 디자인이 존재하고 이를 활용해 화면을 구성함으로써 디자이너의 작업량, FE 작업량이 현저하게 줄었다고 생각한다. 또한 UI적으로 통일된 화면을 보여줌으로써 통일성을 주는 것이 가장 큰 강점이라고 생각한다. 모던 JS 프레임워크의 컴포넌트 단위 개발과 시너지를 내며 각광받고 있다고 생각한다. 실제로 사용하는 러닝커브도 높지 않아 긍정적 경험으로 이어졌다.
이직
중간발표가 끝나고 그동안 준비해왔던 알고리즘 공부 및 CS 기술면접 준비가 끝이 났다. FE개발로 전향하기 위해서 시작한 디프만이 끝나기도 전에 FE로 이직을 성공하게 된 것이다. 그동안 열심히 준비한 것도 있지만, 운도 많이 따랐던 것 같다. 무엇보다 이번 프로젝트를 하면서 마크업의 중요성을 깨닫게 되었다. 구현부터 테스트, 성능 측면에서 실제로 프로덕트를 서비스하기 위해 유저관점에서 생각하게 되면서 느꼈던 점, 트러블 슈팅 경험, A to Z 쌓아온 개발 경험은 이직에 하나의 무기가 되었다고 생각한다. 디프만 활동을 하지 않았더라면 이런 경험은 당장 쉽게 경험하지 못했을 것이다. 만약 디프만 지원을 고민하고 있다면 주저없이 도전해 보는 것을 추천한다. 👍
Light House 성능 최적화
가장 첫 주안점으로 둔 포인트는 TTI(Time to Interactive) 였다. 개인적으로 생각했을 때 유저가 가장 이탈율이 크고 불편하다고 생각하는 부분이 로드 속도 인데, 첫 상호작용이 답답하도록 느리다면 그 앱은 실패했다고 생각하기 때문이다. 이를 위해 리소스 크기를 줄이고 댓글 뷰포트 기반으로 무한스크롤을 적용하고 이미지도 LazyLoad되도록 적용해 주었다. 그리고 렌더 블록 요소를 제거하는 작업을 지속적으로 해주었다(현재 0밀리초). 이외에도 웹 접근성을 고려하여 다음과 같은 요소를 인지하고 100%는 아니어도 최대한 적용해 주었다.
- 대체텍스트 제공
- Bypass block
- 표의 캡션
- 키보드 초점이동
- 언어 명시
남은 작업으로는 폰트 내재화 및 렌더 스피너를 스켈레톤 UI로 대체함으로써 CLS(Comulative Layout Shift)를 최소화하고 API response를 받아오는 속도가 너무 너무 너무 느린데 이를 개선할 방안을 마련하고 있다.
최종발표 그리고 수상
저번 DDD 6기를 진행하면서는 혼자서 서버를 맡았기 때문에 주위 개발자들에게 자극받거나 협업의 느낌이 강하게 들지 못했었었는데, 이번 프로젝트를 하면서 느끼는 점이 정말 많았다🥰. 어느정도 개발공부를 했다 생각이 들면서도 세상에는 더 잘하는 사람들도 많다는 생각과 함께 더 잘하고 싶다고 생각하게 되었다.
그렇게 다같이 노력하며 약 3개월간 1,2차에 걸친 MVP를 수립하고 전날까지 개발하게 되었고 최종발표에서 우수상을 수상하는 영예를 안게 되었다. 특별히 뭔가 주어지는 것은 아니지만 FE 개발자로서의 출발선상에 서서 3개월을 돌아봤을 때 그동안의 노력에 대한 결실이라는 생각에 스스로 뿌듯했다. 현업에서 느낄 수 없는 퀀텀 점프를 경험했던 3개월 이었고 앞으로도 지속적으로 참여하고 싶다. 🥰
