기술 부채를 넘어서 :  

모요 프론트엔드의 성장 이야기

모요의 프론트엔드 개발자는 호갱 없는 세상을 향한 모요의 여정 아티클에서 사용자가 최고의 경험을 할 수 있도록 끊임없이 고민하고 노력하고 있어요.

이번 아티클에서는 최근 프론트엔드 챕터에서는 어떤 기술적 문제들을 해결하고 있는지에 대한 이야기를 하고자 해요.

모요 서비스는 처음에는 프론트엔드 개발자 없이 개발되었어요. 시간이 흐르며 서비스가 성장함에 따라 현재에는 여러 프론트엔드 개발자분이 합류해 주셨어요. 덕분에 초기 JSP에서 React와 Turbopack + Next.js 기반으로 기술 스택을 바꾸기도 하고, 프론트엔드 챕터 차원에서 더 나은 사용자 경험을 제공하기 위해 끊임없이 고민하고 노력하고 있어요. 

3년 만에 압도적인 알뜰폰 중개 서비스로 성장한 모요인데요. 하지만, 이 성장 과정에서 다양한 문제와 어려움이 생겼어요. 다양한 가설을 빠르게 실험하고 검증하며 제품을 만들다 보니, 많은 기술 부채가 쌓였고 점차 안정성과 속도에 문제가 생기기 시작했기 때문이에요. 

메인 프로젝트는 규모가 점점 커져 무거워졌고, 컴포넌트들이 무작위로 만들어지면서 정리되지 않아 점점 더 관리하기가 어려워졌어요. 그 뿐만 아니라, 다양한 실험을 거친 유령 코드들이 여기저기 남아있기도 하고 기존 기능에 실험이라는 명목으로 다양한 기능들이 생기고 없어지면서 복잡도가 커지기도 했어요.

모요 메이커 조직은 목적 조직인 스쿼드*로 일하는 데요. 아무래도 스쿼드 단위로 개발 업무를 진행하다 보니, 챕터 차원에서 기술 부채를 관리하는 데에 어려움이 있는데요. 그럼에도 스쿼드 업무와 병행하며 꾸준히 기술 문제를 개선해 왔어요. 

구체적으로 몇 가지를 이야기해 보면, 우선 규모가 커진 규모가 커진 프로젝트를 잘 관리하기 위해 도메인별로 서비스를 분리해서 관리할 수 있도록 MSA와 모노레포 환경으로 운영할 수 있는 기반 작업을 했어요.

또, 무작위로 만들어지던 컴포넌트들을 통일성 있게 관리하기 위해 디자이너와 함께 디자인 시스템을 만들어 운영해 나가고 있죠. 더불어 불필요해진 코드들 약 600여 개의 파일 / 10만 줄의 코드들을 정리하는 등 다양한 방면으로 노력했어요. 

이를 통해 조금 더 나은 개발 환경을 만들어가며 속도가 더 이상 느려지지 않도록 개선하며 나아가고 있어요.

그러나 여전히, 더 빠르게 달리기 위해서는 부족한 게 많다고 느끼고 있어요. 최근 모요는 앞으로 알뜰폰뿐만 아니라 이동통신 3사 시장의 주요 문제를 해결하고 “믿고 맡길 수 있는 통신 종합 플랫폼이 되어 호갱 없는 세상을 만든다.”는 새로운 비전을 세웠는데요. 하지만, 지금과 같은 상황이 지속된다면 프론트엔드 챕터가 새로운 비전을 향한 여정의 발목을 잡게 될 거라 생각하거든요. 

그렇기에 여전히 남아있는 기술 부채를 해결하기 위해 새로운 변화를 여러 방향으로 시도하고 있는데요. 그 첫걸음으로 조직 구조를 변경했어요. 

기존에는 스쿼드로만 운영되는 구조였다면, 이번 시즌부터 프론트엔드 플랫폼 팀을 따로 구성하는 구조로 변화해 가고 있어요. 다시 말해, 지속적으로 프론트엔드 차원에서 지원할 수 있는 업무와 기술 부채 관리에 집중하는 기능 조직을 별도로 구성한 거예요.

플랫폼 팀은 더 나은 MSA와 모노레포 환경을 위한 작업, 디자인 시스템 개선, 서비스 장애와 그 원인을 파악할 수 있는 모니터링 시스템 등 더 빠르고 유연하게 사용자에게 좋은 서비스를 제공하기 위해 노력할 예정이에요. 최종적으로는 계획적으로 기술 부채를 만들고 관리할 수 있도록, 더 탄탄하고 체계적인 구조를 만들어 갈 거예요.

* 프론트엔드 챕터에 대해 더 궁금하다면, 자주 묻는 질문 : 프론트엔드 개발자 편을 확인해 주세요.

  • sns-icons
  • sns-icons
  • sns-icons
  • sns-icons
made with Greeting