2023.09 - 2023.12 , 중고나라 웹 개발팀에서의 4개월 이라는시간 동안 인턴십을 수행하고 나서, 정규직 전환이 이루어져 2024.02.01에 신입 웹 개발자로 입사를 하게 되었다.
2024년도 중고나라의 핵심 프로젝트인 셀러지원센터를 웹 개발팀 리딩의 자리에서 이끌어가면서 느꼈던 부분들을 회고로 기록하고자 이 글을 작성하였다.
셀러 지원센터의 시작
한 달의 공백기 이후 입사하게 되었지만, 인턴의 경험이 있었기 때문에 그간의 중고나라 웹 개발팀의 작업 내용들을 수월하게 따라올 수 있었다. 올해의 중고나라 핵심 프로젝트는 셀러 지원센터와 J쿠폰 이었다.
물론 두 가지 프로젝트에 관심이 있었지만, 웹 개발팀 전체가 비슷한 수요를 가지고 있었기에 우리는 공정하게 사다리 타기를 진행해서 어떤 프로젝트를 맡게 될지 선정하게 되었다.
그렇게 나와 다른 매니저님들과 함께 셀러 지원센터에 합류하게 되었고, 그때부터 해당 서비스에 대한 설계와 프로젝트 방향성을 잡는 과정이 시작되었다.
우리 팀은 해당 서비스를 온전히 이해하기 위해 PM 팀 과의 회의에 선택적으로 참여하곤 했다.
개발자인데 굳이 참여해야 하나..?라는 생각이 들 수도 있겠지만, 서비스를 온전히 이해하고 장기적인 개선 방향을 도출해내는데 기여하기 위해서는 이 과정이 필요하다고 생각했다.
신입 개발자의 프로젝트 리딩
사내에서 진행하는 프로젝트에 참여하는 것도 처음이어서 설레는 마음이면서도 중요한 프로젝트에서 웹 개발팀의 리딩의 자리를 맡게 되어서 책임감을 느끼고 있기도 했다.
우선, 셀러 지원센터가 어떤 특성을 가진 서비스이며, 우리는 어떤 기술을 선정해야 하고, 개발 일정과 방식은 어떻게 진행할 예정인지 수립하는 과정이 필요했다.
Tech Stack 논의
셀러 지원센터의 기술적인 특징은 아래와 같다.
- 유저는 셀러 / 관리자로 나누어지므로 2개의 페이지가 필요
- 로그인 이후 접속해야 하는 페이지들이기에 SEO 대응이 중요하지 않음
- 다만, 추후 커뮤니티성이 도입된다면 미리 고려는 해야 하는 부분
- 빠른 작업 속도를 위해 빌드 시간 단축 필요
- 디자인 투입 리소스가 없으므로 웹 개발팀 내부적으로 쉽게 만들 수 있는 컴포넌트와 페이지 제작 필요
위 특징들을 토대로 우리는 또 다른 질문들을 아래와 같이 도출했다.
- 어떤 패키지 매니저를 선택할 것인가..?
- Headless UI로 shadcn/ui 가 있는데, react-admin 보다 용이할까?
- SEO가 중요하지는 않지만, Next.js 를 사용해야 할까?
- 페이지를 나눠야 한다면, repository를 2개를 생성해야 할까?
총 4가지 안건에 대해 레퍼런스를 찾고 회의를 진행했다.
✅ 어떤 패키지 매니저를 선택할 것인가?
npm, yarn, yarn-berry, pnpm 중에서 패키지 매니저를 선정하기로 했다.
우선, npm은 기본적인 패키지 관리가 모두 가능하며 package.json안에서 관리할 수 있다는 장점이 있었지만,
일관적이지 않은 패키지 버전을 사용하고 있고, 순차적인 설치로 인한 긴 소요 시간을 가진다는 단점이 있었다.
그래서 yarn을 살펴보았고, 해당 패키지 매니저는 yarn.lock을 사용하기에 사용할 모듈의 버전 지정이 가능하다는 것과 캐시를 사용한 설치 속도 향상이라는 장점을 가지고 있었다. 하지만 여전히 무거운 node_modules를 가진다는 것과 유령 의존성이 발생한다는 단점으로 인해 우리는 yarn-berry로 접근하게 되었다.
yarn berry는 yarn v2 이상의 버전인 yarn이며 Plug'n'Play 기능을 지원하여 기존의 node_modules 대신 패키지에 대한 정보를 .zip 파일로 압축해 .yarn/cache 폴더에서 관리한다. 큰 이점이 있었지만, 만약 PnP를 지원하지 않는 패키지가 존재한다면 버전을 올리거나 다른 패키지로 이전하는 방법을 선택해야 한다.
개발 도중 위와 같은 문제가 발생하면 어떻게 해결할 수 있을까..? 에 대해 웹 개발팀 내부적으로 완벽한 답을 도출해내지 못했다.
그래서 우리는 yarn berry의 이점을 가지면서 다른 라이브러리 사용에 덜 영향을 줄 수 있는 pnpm을 채택하기로 했다.
추후 모노레포에 대한 도입도 고려되고 있었고 pnpm이 이를 쉽게 지원하고 있기에 해당 패키지 매니저를 선택한 이유도 있다.
✅ Headless UI 로 shadcn/ui를 활용하는 것이 적합한가?
디자인 리소스 없이 웹 페이지를 빠르게 만들어야 했던 셀러 지원센터이다.
때문에 우리는 2가지 선택지를 아래와 같이 고려하게 되었다.
| shadcn/ui | react-admin | |
| 장점 | headless 컴포넌트로 커스텀에 편리 스타일링 가능 기능 변경이 많은 경우에 용이하게 대응 가능 번들 크기가 작음 |
기능이 크게 변화하지 않는 작은 프로젝트에서 활용시 빠른 개발 가능 |
| 단점 | 기본 스타일을 제공하긴 하지만, 원하는 스타일링에 대해서는 직접 css를 설정해야 함 커뮤니티 크기가 상이 책임감이 큰 컴포넌트 생성 |
라이브러리에서 제공하는 테마 기반에서 스타일을 바꾸기 어려움 번들의 크기가 큼 |
이렇게만 바라보면 현재 디자인 리소스가 없는 상황에서는 Headless UI가 아닌 Component UI를 선택해야 한다고 생각할 수 있다.
그러나 웹 개발팀은 추후 서비스가 확장된다면, 분명히 중고나라 셀러 지원센터만의 디자인이 도입될 가능성이 있다고 판단했다.
만약, react-admin의 도구를 사용하게 된다면 지금 당장 빠른 개발 속도는 보장되겠지만, 라이브러리의 변경에 대한 작업량이 이보다 많을 것으로 예상했다.
따라서 우리는 커스텀이 가능한 ui 라이브러리인 shadcn/ui를 사용하여 공통 컴포넌트를 빠르게 개발하고, 이와 결합하여 사용할 수 있는 Tailwind CSS를 덧붙이기로 했다.
✅ Next.js의 도입은 필요할까?
셀러 지원센터는 SEO가 중요한 서비스는 아니다. 그렇지만 중고나라 웹 사이트에서 Next.js를 쓰고 있고, 이미지나 번들에 대한 최적화를 사용하고 있기에 해당 기술 도입을 고려하게 되었다.
✅ Repository는 2개로 분리해야 하는가?
처음에는 셀러와 관리자. 두 개의 도메인으로 영역이 나누어져 있어, 해당 부분에 대해서 Repository를 2개로 만들려고 했다.
하지만 보여지는 화면이 다를 뿐이지 사용하는 컴포넌트의 종류나 페이지의 전체적인 흐름은 비슷할 것으로 예상했다.
그래서 우리는 2개의 Repository가 아닌 1개의 독립적인 Repository를 통해 코드를 관리하도록 결정했다.
해당 과정에서 모노레포에 대한 논의도 이루어졌으나, 서비스의 규모 자체가 초기 단계이므로 해당 기술은 셀러 지원센터의 확장성이 진행되고 난 뒤 다시 고려해보기로 했다.
🎉 1차 회원 및 결제 파트 오픈
우선 기존 파트너스 회원들을 대상으로 빠른 이주 작업이 이루어져야 했다.
그래서 1차 스프린트 기간을 총 2차례로 나눠서 진행하게 되었다.
- [ 셀러 ]
- 회원가입 및 로그인 기능
- 네이버 카페 게시글 관리
- [ 관리자 ]
- 셀러 회원 관리 및 사업자 승인 관리
- 게시글 조회 및 상품 전환 회원 관리
기존 회원들이 사용하고 있던 기능을 새로운 웹 사이트와 디자인, API 스펙 변경을 반영하는 작업을 진행했다.
웹 개발팀의 측면에서는 아예 새로운 repository를 생성하고 배포해야 하는 과정이었기에 팀원들과 매일매일 오전부터 밤까지 셀러 지원센터 개발에 혼신을 다해서 코드를 만들어냈다. 사실 야근도 많았고, 3명이 큰 서비스를 새롭게 구현하고, 기존에 있는 기능을 새로운 환경으로 이관해야 해서 체력적인 한계도 분명히 있었다.
하지만 셀러 지원센터의 시작을 위해서는 몰두해서 작업하는 방법밖에 존재하지 않았다.
그렇게 2024년 4월 18일에 1차 회원 파트 런칭을 진행할 수 있었다.
1차 런칭 이후, 우리는 쉴 틈 없이 셀러들의 카페 게시 이용권 결제를 통한 상품 판매 및 광고를 위해 셀러 지원센터에서의 결제 파트 개발 기간에 들어가게 되었다. 그래도 이번에는 완성된 결과물이 한 차례 만들어지고 난 뒤여서 이전보다 개발을 수월하게 진행할 수 있었다.
셀러 지원센터에서의 카페 게시 이용권 결제를 위해 webview를 띄우는 작업도 함께 진행하였다.
판/구매 내역 api spec에 맞게 기존의 중고나라 webview 코드에서의 수정 작업이 이루어졌었다.
5일간의 결제 기능 개발과 7일간의 QA 기간을 거쳐 2024년 5월 14일에 2차 결제 파트를 오픈하게 되었다.
🌼 웹 개발자로서의 회고
셀러 지원센터는 2024년도 중고나라의 핵심 프로젝트이자 나에게는 첫 프로젝트이었기에 누구보다 더 애착과 책임감을 느끼고 진행하게 된 것 같다. 웹 개발자로서 가장 크게 느꼈던 부분은 다음과 같다.
개발자는 문제를 해결하는 사람이다.
기간 내에 반드시 프로덕트를 만들어야 하고
이를 위해서 악착같은 끈기와 책임감을 가지고 있어야 한다.
이 프로젝트를 리딩하기 전까지는 ' 어떻게 하면 코드를 효율적으로 짤 수 있을까..?', ' 디자인 패턴은 어떤 방식으로 도입할 수 있을까..? ' , ' 공통으로 활용하기 위해서는 어떤 모듈을 만들면 좋을까..? ' 등등 코드 품질에 관한 생각들을 우선으로 가지고 개발에 임했던 것 같다.
물론 이것이 잘못된 부분은 아니라고 생각한다.
개발자라면 내부적인 코드 품질을 향상하는 것이 분명하게 장기적인 관점에서 프로덕트를 관리하고 개선하는 데 중요하기 때문이다.
그러나 그 본질은 프로덕트가 완성되었을 때 따지는 것임을 새롭게 느끼고 알게 되었다.
큰 규모에서 인증/인가를 담당해본 경험이 없지만, 새로운 시도에 부딪히는 것을 두려워하지 않았고 이와 동시에 팀원들을 이끌어가야 한다는 책임감을 끝까지 잃지 않으려고 날마다 다짐했던 것 같다.
개발 일정이 짧은 순간에도, 기능 구현에 어려움이 있어도, 나는 반드시 해내야 한다. 우리 팀은 할 수 있다. 라는 것을 결과물로 만들어 내고 싶다는 목표가 있어 이를 극복해낼 수 있었다.
그리고 셀러 지원센터 웹 개발팀 리더의 자리에서 느꼈던 또 하나는 다음과 같다.
한 개인의 문제는 곧 팀 전체의 문제이다.
어떤 기능에 대해서 각각 담당자를 지정해놓긴 했지만, 한 가지의 프로덕트를 함께 만드는 과정이라는 사실을 잊지 말아야 했다.
셀러 지원센터 웹 개발팀이 만들어내야 하는 프로덕트라는 책임을 지고 내 기능의 문제가 아니더라도 다른 기능에서 문제가 발생한다면 곧 우리의 문제라는 인식이 올바르다고 생각했다.
어떤 문제가 발생하고 있는지, QA sign-off에 어려움은 없는지 계속해서 체크를 하려고 했고, 서로가 지원이 필요한 부분에 있어서 도움을 바로 요청하고 도와줄 수 있는 팀으로 만들려고 노력했던 것 같다. 그래서 내가 본보기가 되어서 팀원들에게 원동력을 주고 싶었던 것 같기도 했다.
나중에 연차가 많이 쌓여도 이번에 느낀 두 가지 교훈은 절대 잊지 않으려고 노력할 것이다.
끝맺음말
1차 회원 파트 오픈부터 2차 결제 파트 오픈까지 무사히 끝낼 수 있어서 이 프로젝트에 함께 해주신 많은 팀장님과 매니저님에게 감사했다.
앞으로 어떤 방향으로 나아갈지가 궁금해졌고, 잠깐의 틈 사이에서 코드를 정리하며 부족한 부분들을 팀원들과 메꿔나가고 싶다.
이제는 셀러 지원센터의 발전과 내가 만들어가는 웹 개발자로서의 발전이 함께 이루어질 수 있도록
또 다른 출발을 위해 준비를 시작할 것이다.
'나를 돌아보며' 카테고리의 다른 글
| [ ICT 인턴십 ] 중고나라 : 웹개발팀에서의 4개월 (2) | 2024.01.02 |
|---|
