외주 개발사에 프론트엔트 시스템팀이 있는 이유

안녕하세요. 똑똑한개발자 프론트엔드 시스템 팀 박성혜입니다. 2024년 3월부터 시스템 팀에 합류하여 그룹 리더인 동언님과 함께 프론트엔드 시스템을 구축하는 일을 하고 있습니다.

프론트엔드 시스템팀이 하는 일

프론트엔드 시스템 팀이 생소하신 분들을 위해서 간략히 똑똑한개발자 시스템 팀의 역사를 먼저 소개해보겠습니다.

똑똑한개발자 프론트엔드 시스템 팀은 2021년 12월부터 시작되었습니다. 그리고 지난 2년간 시스템 팀이 한 일은 다음과 같습니다.

똑똑한 개발자만의 보일러플레이트 생성
- (Web) Next, (App) React native
- Semantic release를 통한 버전 관리
반복되는 작업을 해주는 CLI : Tokript
API 리스트들을 작업 프로젝트에 컨벤션에 맞게 출력해주는 Swagger Generator
보일러플레이트 고도화
- 외부/내부 저장소 관리 방식 변경
- 폴더 구조 변경 등
자동 배포 CI/CD 환경 구축
실무자를 위한 온보딩 및 보일러플레이트 문서 작성

그동안 프론트엔드 시스템 팀은 빠르고 편리한 환경을 구축하고 새로운 기술을 도입하여 더 나은 프로덕트를 완성하는 데 주력해왔습니다.

특히, 프론트엔드 시스템 팀은 실무자들의 생산성 향상을 위해 노력해왔습니다. 반복되는 작업을 자동화하여 단기 및 장기 프로젝트에 효과적으로 대응할 수 있도록 하고 있습니다. 이렇게 “생산성 향상”에 초점을 맞추게 되면 자연히 해야 할 일이 무궁무진 해집니다. 이것만으로도 올해의 일정을 채울 수 있을 만큼 방대한 일이 될 수도 있습니다.

하지만 올해 시스템 업무의 방향을 결정하기 위해 지난 회고, 실무자들의 의견, 작년까지 외주 개발을 했던 제가 느꼈던 인사이트를 종합하면서 시스템 팀이 집중해야 할 것이 과연 “생산성 향상 만일까?” 라는 의문을 가지게 되었습니다.

에이전시 회사에서 프론트엔드 개발자의 고민

조금 조심스러운 이야기일 수 있지만,개발자 사이에서는 에이전시 업체에 대해 좋지 않은 인식을 가진 분들이 있기도 합니다.

똑똑한개발자는 외주에이전시 중에서도 시스템 팀이 구축되어있고, 더 나은 프로덕트를 위해 노력하는 개발자들로 구성되어 있습니다. 인하우스 못지않은 체계적인 시스템을 가지고 있다고 자부할 수 있지만, 에이전시 업체 특성 상 “프로덕트가 완성되면 내 손을 떠난다.” 라는 현실은 부정할 수 없습니다.

프론트엔드 개발자가 외주 에이전시에서 고민하는 아쉬운 점들은 어떤 것들이 있을까요? 실무자 의견과 작년까지 외주 개발을 해왔던 제 경험을 토대로 정리해 보았습니다.

프로덕트마다 디자인 시스템이 매번 새로워 초기 설정하는 단순반복 작업을 해야 해요.
프로덕트를 디벨롭 하고 싶었는데 그러지 못해 아쉬워요.
제가 마주한 새로운 이슈가 알고 보니 동료분이 이미 해결했던 이슈였어요.
개발을 하다 보니 기술보다 요령만 생기는 것 같아요.
단순히 생산만 하고 납품하는 외주업체는 싫어요.
다양한 기능을 구현해 보는 것은 좋지만, 기술의 깊이는 낮은 것 같아요.

프로덕트 오너의 마음으로 개발에 임하지만, 환경적인 요소가 갖춰지지 않아 고민의 늪에 빠진다는 내용이 주를 이뤘습니다. FE 시스템 팀은 이러한 실무자들의 아쉬운 마음을 어떻게 개발에 녹여낼 수 있을지 고민해 보았습니다.

이렇게 되면 어떨까요?

자주 쓰는 컴포넌트와 훅이 쓰기 좋게 만들어져 있다면 어떨까?
이슈와 기능을 공유할 수 있는 플랫폼이 있다면 어떨까?
디자인 시스템을 자동화시킨다면 어떨까?
기술의 깊이가 있는 시스템이 구축된다면 어떨까?
물어보지 않아도 참고할 만한 예시 문서가 잘 정리되어 있다면 어떨까?
기여가 수월한 환경이 된다면 어떨까?

이렇게 실무자들이 겪을 수 있는 아쉬움을 나열하고 하나씩 해결책을 제시해 나가다 보니 FE 시스템 팀의 목표를 향한 방향성이 잡혔습니다.

2024년 FE 시스템 팀의 목표

그렇게 해서 2024년 시스템 팀의 목표는 기여가 수월한 환경을 구축해 FE 개발 생산성을 향상 시키는 것이 되었습니다. 기능이 추가되더라도, 짧은 기간이라도 프론트엔드 개발자는 양질의 코드로 정리된 모듈을 통해 프로젝트를 진행하여 일정에도 무리가 없으며, 실무자들의 업무 만족도를 높이는 것을 목표로 잡았습니다.

실무자들이 더 많이 이바지하면, 업무 지식과 기술 습득도 자연스럽게 증가하게 됩니다. 이렇게 되면 생산성이 향상되고, 결국에는 실무자와 클라이언트 모두가 만족할 만한 프로덕트를 완성할 수 있습니다.

FE 시스템 팀의 해결 안

고민을 해결할 수 있는 방향을 잡고, 그 시작점에서 구체적인 솔루션을 4가지로 추렸습니다.

기능에 따른 패키지 모듈화
보일러 플레이트 monorepo 이관
프론트엔드 가이드 문서화
피그마 토큰 추출 플러그인 개발

1. 기능에 따른 패키지 모듈화

기능에 따른 패키지를 모듈화시켜 필요한 기능만 Install, Import 해 사용합니다.

쉽게 인형과 건담으로 비유를 해보겠습니다.

인형의 한 부위가 낡고 찢어지면, 새로운 인형을 사게 됩니다. 인형은 어느 한 부위를 수정하기 어려운 하나의 본체이기 때문이죠. 반면 건담은 부위별로 조립해서 완성하는 장난감이기 때문에, 한 부위를 교체하면 그만입니다. 기호에 따라 추가적인 부품을 더 장착할 수도, 뺄 수도 있습니다.

과거의 FE 시스템은 인형과 같은 형태였다면, 올해 FE 시스템 팀은 건담과 같이 부품별로 조립하여 필요한 기능만 선택적으로 사용할 수 있도록 모듈화하였습니다. 이제는 한 부분이 문제가 생기면 전체를 수정하는 것이 아니라 필요한 부분만 수정할 수 있어 더욱 효율적이고 유연한 개발이 가능해 졌습니다.

FE 시스템 팀의 목표와 관련해 조금 더 덧붙이자면, 기능을 모듈화시켰기 때문에 그만큼 실무자들이 기여도가 증가합니다. CLI로 예를 들면, 내가 필요한 기능을 스크립트만 개발하면 쉽게 추가할 수 있게 됩니다.

이로 인해 다른 실무자분들도 추가된 기능을 사용함으로써 생산성 또한 증가할 수 있습니다.

관리를 하는 FE 시스템 팀은 어떨까요? 기존 방식과 달리 각 모듈 버전 관리가 되기 때문에 버그가 발생하더라도 독립적으로 수정 및 업데이트하여 사용할 수 있게 됩니다.

2. 보일러 플레이트 monorepo 이관:

이미지 출처 : https://velog.io/@hoooons/yarn-berry-monorepo-구축하기

이렇게 각 기능이 모듈화된 패키지를 한 곳에서 관리할 수 있게 모노레포를 적용했습니다.

모노레포에 대한 자세한 설명은 대규모 프로젝트, 에이전시에서 실패 없이 개발하는 방법 (feat. 모노레포) 포스팅에서 확인이 가능합니다.

모노레포를 도입하면서 가장 큰 이점을 누린 팀은 바로 FE 시스템 팀입니다.

지속적인 관리와 개발이 필요한 측면에서 보면, 시스템 팀의 업무 효율성은 크게 향상되었습니다. 모든 패키지에서 필수적인 의존성, 린트 규칙, 설정을 공통으로 사용함으로써 의존성 관리가 단순화되었습니다.

3. Figma 플러그인 Toktoken

똑똑한개발자는 훌륭한 디자인시스템을 갖추고 있습니다. 덕분에 디자이너와 개발자 간의 규칙 언어가 생기면서 프로젝트의 브랜드 컬러가 변경되거나, 폰트가 일정부분 변경 되더라도 무리가 없는 개발이 이루어지고 있습니다.

개발단에서는 디자인이 완성되면 작업 초기에 이 시스템을 모두 정의하고 시작합니다. 프로젝트가 커질수록 디자인시스템에 정의된 토큰도 많아지고, 그만큼 개발자가 정의하는 시간도 늘어나게 됩니다.

FE 시스템 팀은 이러한 단순 반복 작업을 줄이고자 Figma에서 정의된 디자인 시스템을 구조화된 JSON 형식으로 추출해주는 플러그인을 개발했습니다.

그동안 디자인 시스템이 변경되었던 경우, 직접 소통으로 변경한 토큰을 전달하거나, 놓치는 일도 있었지만, 이제는 디자이너가 직접 Git hub 작업 레포지토리에 업로드 할 수 있게 됨으로써 시스템 불일치 이슈를 확실하게 방지할 수 있게 되었습니다.

이렇게 추출된 JSON 파일을 기반으로, 똑똑한개발자가 사용하고 있는 UI 라이브러리인 Chakra UI Theme에 맞게 변환해주는 스크립트를 개발했습니다. 이 변환 스크립트는 @toktokhan-fe/cli-plugin-gen-chakra-theme 모듈로 제공되며, tokript CLI로서 사용할 수 있게 되었습니다.이 과정에서 JSON을 Chakra UI Color Theme 으로 변환하는 스크립트를 프론트엔드 팀 정우재 님께서 참여해 개발해주셨는데요. 이렇게 저희뿐만 아니라 벌써부터 실무자분이 기여할 수 있던 작업이라 FE 시스템 팀의 방향성을 다시금 잘 잡았다고 깨달았던 뜻 깊은 작업이었습니다.