자주 묻는 질문 : 프론트엔드 개발자 편
모요에는 다양한 구성원이 좋은 사용자 경험을 제공하기 노력하고 있는데요.
특히 모요의 프론트엔드 개발자(Frontend Developer)는 사용자와 모요 서비스의 접점을 긍정적으로 만들어 가는 데에 직접적으로 기여하고 있어요.
이번 아티클에서는 모요 프론트엔드 개발자 포지션에 관하여 자주 받는 질문에 대한 답변을 드리려고 해요.
모요 프론트엔드 챕터는 어떻게 일하나요?
대부분의 개발자 분들은 각자 담당하는 스쿼드에서 제품을 만드는 일에 집중하고 있어요. 모요에서는 개발자도 단순히 제품을 개발하는 것 뿐 아니라 문제 정의 - 가설 수립 단계에도 적극적으로 참여해요.
동시에 챕터 차원에서는 챙겨야 할 여러 기술적인 부분들을 챙기려 노력하고 있는데요. 이전에는 챕터 차원에서 공통으로 챙겨야하는 업무들과 기술적인 부채들은 시즌과 피트스탑이라는 기간을 활용하여 해결하려고 노력 했어요.
.png)
그러나 현재는 챕터 차원에서 제품을 더 빠르고, 잘 만들기 위해 기술적으로 고민하고 개선할 수 있도록 스쿼드 조직과 별개로 플랫폼 조직을 함께 운영하고 있어요. 이 조직에서는 구체적으로는 디자인 시스템, 공통 시스템, 모노레포, MSA 등을 시도하고 적용하고 있어요.
이 외에 스쿼드에 속해 있는 분들은 각 제품의 성격에 맞게 풀어야 할 문제의 우선순위에 따라 적절하게 기술적인 부분들을 업무 사이사이에 조율을 하며 더 좋은 제품을 만들기 위해 노력하고 있어요.
프론트엔드 개발에 있어 모요 팀이 가진 기술적 강점은 무엇인가요?
한 가지만 꼽는다면, 레거시 코드를 잘 정리하기 위해 여러 노력을 하고 있다는 점이요.
최대한 관심사를 잘 분리하고 반복되는 영역을 줄이려 하고 있죠. 그 일환으로 디자인 시스템과 모노레포, 유저 활동 로거, 여러 시스템적인 요소를 놓치지 않고 잘 챙기고 있는데요. 이 모든 기술적인 활동의 목표가 완성도 높은 시스템이 아닌 ‘좋은 프로덕트를 만들기 위해서’라는 게 강점인 것 같아요.
실제로 어드민 사이트들도 모노레포 안에 MSA형태로 여러 패키지를 결합해서 서비스하고 있는데요. 가능한 부분들은 좋은 아키텍처를 적용하기 위해 노력하고 있어요.
좋은 사용자 인터페이스(User Interface)나 사용자 경험(User Exprience) 을 설계하기 위해 프론트엔드 챕터가 하고 있는 노력이 있을까요?
1️⃣디자인 시스템
프로덕트 디자인을 단순히 구현만 하지 않고, 다른 페이지와의 통일성을 고려해서 많은 제안을 하고 있는데요. 아무래도 이런 점을 잘 풀어나가기에는 디자인 시스템이 적절한 것 같아서 노력을 기울이고 있어요.
2️⃣렌더링 최적화
렌더링 최적화를 위해 여러 시도를 하고 있어요. 잘 만든 UI/UX도 속도가 느리면 불편하게 여겨지기 마련이죠. 이런 작업의 일환으로 불필요한 리렌더링을 발생시키는 여러 요소들을 정리하고 최적화 하는 작업도 진행하고 있습니다.
3️⃣사용성
사용성도 최대한 챙기려고 하고 있는데요. 모요 앱을 React Native에서 Flutter로 전환하는 작업을 진행한 것도 이런 목표를 달성하기 위한 방안 중 하나예요.
처음에 모요 앱은 React Native로 개발되었었는데, 개발 텍스트를 유지하는 어려움이 있어서 일종의 버스팩터(Bus Factor)*처럼 프론트엔드 챕터에 남아있는 문제 중 하나였어요 손대기 어려워서 점점 방치되는 문제를 되풀이하지 않기 위해서 개발 환경 설정이 편한 플러터로 전환하게 되었습니다. 그리고 여러 명의 프론트엔드 개발자들이 틈틈이 앱의 사용성 개선하는 작업을 하고 있어요.
* 리스크(Risk)를 측정하는 하나의 방법으로 몇 명의 팀원이 버스에 치여서 죽거나 크게 다쳤을 때 프로젝트가 망하는지를 나타내는 지수
모요 프론트엔드 챕터에서 활용하는 기술 스택은 어떻게 되나요?
모든 모요 제품의 프론트엔드는 기본적으로 React, TypeScript 로 개발하고 있어요.
API 호출은 주로 axios와 fetch를 핸들링해서 사용하고 있습니다. 최근에는 ReactQuery를 사용하려 하고 있고, 상태 관리는 필요한 곳에만 일부 zustand를 쓰고 있어요. 스타일링은 이것저것 사용하는 과도기를 거쳐서 현재는 vanilla extract를 적극적으로 도입하고 있네요.
.png)
모요 서비스 홈 화면
모요 홈은 Next.js를 활용해서 SSR이나 ServerComponent 같은 것들도 최대한 잘 활용하고 있는데요. 통신사들이 사용하는 파트너스 및 내부 어드민들은 Next.js를 사용하고 있진 않아요. 꼭 특정 기술 스택만 써야 한다고 정해져 있지는 않아요!
더불어 프론트엔드 개발자라면 상태 관리를 구체적으로 어떻게 하는지도 궁금하실 텐데, 전체 프로덕트에 걸쳐서 최대한 상태 관리를 사용하지 않는 쪽에 무게를 두고 있어요. 최대한 작게 유지해서 불필요한 상태 관리와 의존성을 만들지 않으려 해요.
성장을 위해 모요 프론트엔드 챕터에서 진행하고 있는 특별한 활동이 있다면 소개해 주세요.
정기적으로 진행하는 건 매주 프론트엔드 챕터가 모여 각자가 하고 있는 다양한 기술적 고민에 대해 이야기를 나누는 '프란도란'이라는 시간이 있어요. 이 시간을 통해 함께 기술과 제품을 잘 만들기 위해 함께 고민하면서, 실제로 제품도 개선되고 있어요. 이렇게 제품을 개선하는 과정에서 프론트엔드 챕터의 기술력이 함께 성장하고 있다고 생각해요.
뿐만 아니라 개발팀 전체가 모이는 시간을 격주에 한 번 가지고 있는 데요. 이 때는 개발팀 전체가 함께 논의해야 하는 이슈들에 대한 이야기를 나누고 있어요.
어떤 프론트엔드 개발자가 모요에 잘 맞을까요?
협업의 가치를 잘 알고, 팀으로서 함께 치열하게 몰입하며 성장과 성공을 경험해보고 싶은 분이라면 잘 맞을 것 같아요.
개발 관점으로 좁혀서 이야기해 보면, 기술적으로 깊이 파고 들어가기보다 좋은 제품을 만드는 것이 더 중요하다고 생각하는 분이 잘 맞을 것 같고요. 기술은 제품을 만드는 하나의 도구라고 생각하시는 분이면 좋을 것 같아요.
위 이야기가 내 이야기라는 생각이 드는 분이 계신다면 지금 바로 모요에 합류해 주세요!