비개발자도 이해할 수 있는 크몽 카테고리 모듈화 도전기
by Kmong Product Tribe Team
안녕하세요! 크몽 Product Tribe 팀의 UI 디자이너 지니입니다.
크몽은 다양한 비즈니스의 전문가가 필요한 순간, 즉시 거래할 수 있는 국내 최대 프리랜서 마켓이에요.
그 중 <크몽마켓>에서는 마케팅, 디자인, IT 프로그래밍, 콘텐츠 제작 등 11개 카테고리의 전문가가 등록한 서비스를 비교하고 구매할 수 있답니다.
최근 Product Tribe 팀에서는 <크몽마켓>의 카테고리 모듈화 프로젝트를 진행했어요. 카테고리 모듈화 프로젝트를 시작하게 된 목적과 좌충우돌 진행되었던 과정, 그리고 소중히 얻은 성과를 이야기해보려고 합니다.
01.진행취지
크몽팀은 고객들이 필요로 하는 것을 명확하고 빠르게 탐색할 수 있도록 노력하고 있습니다.
그중 <크몽마켓>에서는 크게 티는 안 나지만(?) 새로운 카테고리를 신설하기도, 운영 중이던 카테고리를 폐지하기도, 카테고리끼리 합치기도 합니다.
하지만 카테고리 별 필요한 옵션들을 개선하고, 신규 카테고리를 신설하는데 들어가는 큰 리소스와 비용으로 개선이 늦어지고.. 불가능해지는... 가슴 아픈 일들이 많았습니다.
고로, 크몽은 이 카테고리들을 유연하게 개발할 수 있는 구조로 개선해보고자 했습니다.
✔️ 모듈화 프로젝트를 시작하기 전, 2가지 목표를 정했는데요!
카테고리의 상세&옵션 화면 구성을 '공통 도구(모듈)'화 시킨다
독립적이고 확장성 있게 '구조화'한다
목표를 정하고 어떻게 진행되었는지 살펴볼게요.
02.진행과정
고객들이 탐색하는 단계인 서비스 리스트, 서비스 상세 화면 + 구매 옵션 선택 화면에 있는 컴포넌트들을 시작으로, 카테고리 별로 차근차근 진행이 되었습니다.
Product Tribe 팀은 원래 가지고 있는 컴포넌트를 모듈화하는 것뿐만 아니라, 각 카테고리 별 추가로 필요한 옵션들을 녹이며 사용성을 높이는 UI 개선까지 적용하기 위해 무던한 노력을 했습니다.
카테고리 모듈화 프로젝트는 백엔드의 DB 구조부터 설계한 후, 기획 → 디자인 → 클라이언트 개발 순으로 진행되었습니다.
백엔드 단계에선 각 카테고리 순차적으로 모듈화 적용되었기 때문에, 특히 백엔드에서는 어떤 카테고리는 모듈화가 되고, 어떤 카테고리는 이전의 구조를 사용하는 투 트랙을 유지하기 위해 많은 고민을 했습니다. 기존 기능들은 모듈화로 인한 변화에 영향을 받지 않고 사용할 수 있도록 개발하였고, 새로 합류한 팀원들은 이 룰을 지키며 개발하려고 최대한 노력했습니다.
기획 단계에서는, 각 카테고리 MD와 협업하며 카테고리 별 문제 및 니즈를 파악하여 화면설계로 정리하며 프로젝트를 시작했습니다. 운영전략팀의 요청사항은 프로젝트 시작 최소 1달 전까지 전달받고자 하였고, 이 후 Product Tribe팀 내에서 일정을 고려하여 개발 스펙을 논의하였습니다.
디자인 단계는 전반적인 UI 룩은 일관성을 유지하면서 조금씩 개선했습니다. 기획에서 정리된 카테고리별 문제와 니즈를 해결하기위한 UI 사용성 개선을 제시하며 일정 내 구현 가능한 점을 협의하며 모듈화 프로젝트를 진행했습니다. 궁극적으로는 효율적으로 관리할 수 있는 UI KIT & 디자인 시스템 구축을 목표로요.
클라이언트 개발 단계에서 모듈화 시 가장 주의를 기울였던 것 중 하나는, 기존에는 카테고리 별로 여러 개 존재하던 상세화면을 하나의 상세화면에서 모두 처리할 수 있도록 구현하는 것이었어요. 조건으론 의존성을 최대한 줄이도록 하는 것이었습니다. 각각의 UI들은 상황에 맞게 레이아웃을 유동적으로 바뀔 수 있도록 구현하여 재사용성을 끌어올렸고, 그로 인해 불필요한 리소스 소모를 줄이기 위함이었습니다.
Product Tribe 팀은 구조만 바꾸기에도 빠듯한 일정 속에서, 사용성도 높이고자
때론 치열하게 논의하고 타협하기도 하며 완성 된 Module 조각들은 아래와 같습니다.
Navigation Bar
Service Title
Price Information (Single, Package)
Image preview(Image, Video Player, Audio Player)
Accordion
Extra Case
Schedule & Space
모듈화 적용 전/후 웹과 모바일
03. 모듈화로 재정비 된 카테고리
모듈화 조각들이 완성되어 반영된 카테고리는 아래와 같아요.
04.성과
카테고리 변경/생성 시 최소한의 개발 리소스 사용
디자인 컴포넌트를 체계적으로 분류하고 종합해 비주얼적으로 통일성을 주었으며, 이를 통해 각 개발 단의 리소스 절약에 일조하였습니다.
추가 데이터, 수정사항에 유연하게 대처 가능
모바일앱은 수정요청에 대해 실시간으로 대응하기 힘들었지만, 모듈화를 통해 서버 데이터를 동적으로 처리하면서, 실시간 대응도 일정 부분 가능해졌습니다.
새로 합류한 팀원들의 크몽 구조 이해도 상승
모듈화가 진행되는 각 카테고리 특성과 개발된 이력을 체크하며 작업하다 보니, <크몽마켓>의 카테고리를 면밀하게 살펴볼 수 있는 기회가 되었습니다.
깨끗한 코드로 상쾌 통쾌
오래된 코드 리팩토링을 병행하며 진행하여 필요 없는 코드들이 많이 정리 되었고, 새로운 툴(Vue2 업그레이드)의 강점을 활용하여 적용할 수 있었습니다.
05.반성
프로젝트 Scope 이해 차이
프로젝트를 구현하기 전 모든 팀원이 완벽하게 동일한 목표를 인지하지 못했어요. 그러다 보니 회의는 점점 늘어나고 일정 속 결과를 맞추기만 노력하게되곤 했는데요, 구현 우선순위가 사용성보다 개발 가능한 기술이 상대적으로 높아진 부분에 다 같이 반성하였습니다.
그로 인한 일정 부족 & 지연
예상치 못했던 작업 도중 나타나는 다양한 케이스와 개발 도중 발견되는 오래된 히스토리(Legacy) 대응으로 예상 일정보다 다소 지연이 되었던 점들이 아쉬웠습니다.
급급한 개발
일정이 부족해지면서 큰 그림을 보지 못하고 당장 눈앞의 문제만 해결하느라, 비즈니스 로직 등 뒤돌아보면 아쉬운 작업들이 눈에 밟히네요.
협업이 필요한 타 팀과의 일정 & 이슈 공유 부족
프로젝트 이해도 차이, 일정 지연, 작업 시 예상치 못한 케이스들 대응으로 인해 일정이 꼬이기 시작했다는 이유로 타 팀과의 협업 시 정리되지 않은 채 이관된 점을 반성합니다.
06.마치며
2019년 상반기를 함께 했던 카테고리 모듈화 프로젝트를 회고하며, 얻은 점도, 아쉬웠던 점도 되돌아볼 수 있었습니다. 지나간 아쉬움을 바탕으로, 다시 프로젝트를 착수한다면 더 나은 결과와 팀원들의 성장을 얻을 수 있지 않을까 싶어요!
구축하려는 모듈이 모든 카테고리에 공통적으로 적용 되는 사항인지 카테고리 별 예외/특이 사항인지 여부 파악한다면, 작업 중간에 튀어나오는 레거시에도 좀 더 빠른 대처를 할 수 있을 것이라 생각합니다. 더불어 충분한 QA 일정을 확보해서 안정적인 서비스가 제공될 수 있도록 노력해야겠다는 Product Tribe 팀 모두의 깨달음도 있었답니다.
이번 경험을 통해 팀원들은 모듈화 프로젝트에 어느 정도 일정이 필요한지 가늠할 수 있었어요. 앞으론 각 포지션 상황에 맞는 일정이 산정되어 삐거덕거렸던 프로세스는 매끄러워지고 좀 더 탄탄한 서비스로 구축할 수 있을 거라 기대합니다!
Product Tribe 팀원 모두 고생 많으셨습니다:-)
UI Designer우리 팀은 크몽과 딱 어울리는 당신을 기다리고 있어요. 우리 함께 크몽을 만들어요!
채용공고 *개발직군 상시 채용중!
