요기요 통합 체크아웃
요기요 앱에서 주문 방식마다 따로 있던 결제 흐름과, Android와 iOS마다 달랐던 앱과 웹 화면 사이 연결 방식을 여러 팀이 함께 쓰는 하나의 구조로 합쳤습니다.
4단계로 나눈 공통 주문 흐름에 서로 다른 주문 방식을 모두 담음
- 2023.04 ~ 2024.10
- 주식회사 위대한상상
- 체크아웃 설계와 공통 SDK 개발
핵심 가치
요기요 앱은 로봇 배달부터 매장 식사까지 서로 다른 주문 방식을 하나의 결제 흐름으로 처리하게 됐습니다.
성과
- 카카오톡 등 외부 파트너 연동에도 쓰인 사내 표준으로 자리 잡음
- Android와 iOS마다 따로 짜던 앱 연결 코드를 공통 도구(SDK) 하나로 정리해 새 프로젝트 준비를 줄임
- 서버와 휴대폰의 시계 차이(수백 ms)를 맞춰 할인이 정확한 시각에 적용되게 함
기술 스택
배경
Customer Tribe에서 요기요 앱의 체크아웃과 프론트엔드 공통 인프라를 설계했습니다. 할인, 카트, 추천이 별도 서비스로 나뉘어 있어 서비스 간 데이터 의존성과 정합성을 관리해야 했습니다. Android와 iOS 브릿지는 파편화되어 프로젝트마다 플랫폼별 분기와 콜백 처리가 필요했고, 주문 완료 직전에는 서버와 클라이언트의 시간 오차로 할인 적용 시점이 어긋나는 문제가 있었습니다.
결정과 구현
- 통합 체크아웃: 다양한 주문 방식을 하나의 흐름으로 다루는 통합 체크아웃을 설계했습니다. 전역 Store 대신 Selector 기반 캐싱을 택해 서비스 간 데이터 의존성을 최소화했습니다.
- 주문 프로세스를 4단계 라이프사이클로 추상화하고, 흩어져 있던 유관 팀들을 제가 직접 설득해 합의까지 이끌었습니다.
- 로봇 배달 전용 주소 선택, 매장 식사 테이블 예약, 추천 메뉴의 데이터 흐름을 같은 구조 안에 흡수했습니다.
- 프론트엔드 공통 인프라(Customer-js, WebApp Client): 여러 팀이 함께 쓸 네이티브 통신 인터페이스를 설계하고, 팀 사이의 합의를 끌어냈습니다.
- 콜백 기반 네이티브 브릿지를 Promise로 감싸고, 송신과 수신 양쪽 상태를 함께 추적하는 Observer 패턴으로 하나의 인터페이스를 만들었습니다. 한쪽으로만 흐르는 발행-구독 방식보다 양방향 상태 추적이 콜백 흐름에 더 맞다고 판단했습니다.
- RequestManager로 비동기 통신과 콜백 제어를 안정화했고, Turborepo 모노레포에 tsup, Vitest, Changesets를 갖춰 빌드와 배포를 자동화했습니다.
- 체크아웃 최저가 보장제(BPR): NTP 기반 시간 동기화로 서버와 클라이언트 사이 수백 ms의 시간차를 보정해 할인 적용 시점을 맞췄습니다.
- 할인 연산 결과를 캐싱하고 필요한 항목만 그때그때 계산해 렌더링 부하를 줄였습니다. 6가지 이상의 주문 유효성 검사는 Middleware 계층으로 분리해 할인 계산과 검사의 책임을 나눴습니다.