우당탕탕 beauty 풀한, 컬리 앱 서비스 런칭기

Context

기존 Kurly 앱은 단일 서비스 구조로 설계되어 있었으며, 뷰티 카테고리 추가 시 site별로 API path가 달라지고 홈/카테고리/검색 전체가 site에 종속되는 구조가 필요했다. 마켓/뷰티 site 전환 시마다 RootViewController를 새로 생성하면서 기본 앱 구성과 구좌 로딩 API가 중복 호출되어 화면 전환 속도가 느렸다.

Technical Solution

• Site 개념 도입: 기존 카테고리 하위 개념의 수직 서비스 대신 앱 상위 개념으로 site를 정의하고, site 변경 시 API path 자체가 변경되도록 설계
• 의존성 주입 구조 단방향화: 하나의 클래스에서 생성하던 기존 의존성 주입에 site 프로퍼티를 추가로 주입하여 단방향 흐름 생성
• Site 서비스 클래스 도입: site 프로퍼티를 하위 계층으로 계속 주입하는 대신 site 서비스 클래스를 주입하고 내부에서 site 프로퍼티를 관리
• 이벤트 기반 처리: site 전환 시 매번 RootViewController를 새로 생성하지 않고 서비스 레이어의 이벤트 처리 방식으로 변경
• 선택적 구독 패턴: 필요한 부분에서만 site 변경 이벤트를 subscribe하여 불필요한 UI 재생성 방지
• 구좌 템플릿 재사용: 마켓/뷰티 추천 페이지의 상품 노출 내용이 동일하고 구좌 형태가 같다는 점을 파악하여 공통된 성질 기준으로 모델링해 코드 대부분을 재사용
• 타 플랫폼 협업 도구화: site path를 적용한 Postman 설정을 안드로이드 팀과 공유하여 API 응답 데이터 정합성 보장

Impact

2022년 8월 29일 새벽 3시 App Store 심사 승인 완료 및 오전 11시 배포 달성. 뷰티 컬리 오픈 후 상단 스위칭 버튼 전환율이 예측보다 낮았으나, 플로팅 버튼(둥둥이) 추가 후 데이터 분석 결과 유의미한 수치 증가 확인.

Key Takeaway

Multi-site 아키텍처에서 상태 주입 방식을 서비스 레이어로 이동하고 이벤트 기반 구독 패턴을 도입하면 불필요한 컴포넌트 재생성을 제거하고 사이드 이펙트를 최소화할 수 있다. 또한 마켓팅 데이터와 UX 피드백을 개발 과정에 적극 반영하고 팀 간 협업 자산(Postman 스펙 공유, 코드 리뷰)을 구축하는 것이 빠른 배포를 가능하게 한다.