4개 브랜드 예약 상세를 하나의 웹으로
브랜드마다 예약 상세 화면이 달라 같은 버그가 네 번 났고, 고칠 때마다 앱 심사를 기다려야 했습니다. 주문 상태 계약을 하나로 통일하고 앱은 그 계약을 소비하는 WebView로 바꿨습니다.
상황
같은 예약 프로세스인데 브랜드마다 표현이 달랐다
브랜드별로 예약 상세 화면이 따로 있었고, 주문 상태와 액션이 각 화면의 파생 로직에 의존했습니다. 그래서 같은 성격의 버그가 브랜드마다 따로 났습니다.
수정이 필요할 때마다 여러 화면의 상태와 동작을 함께 고쳐야 했고, 앱은 고칠 때마다 스토어 심사를 기다려야 했습니다. 어드민에서는 고객이 지금 어떤 화면을 보고 있는지 알 수 없어 직접 물어봐야 했습니다.
바꾼 것
상태 계약을 하나로 만들고 앱은 그 계약을 소비하게
- 화면을 네 번 고치는 대신 주문 상태 계약을 전체 단계⋅현재 단계⋅종료 원인으로 통일하고 백엔드 응답을 그 기준에 맞춤
- React 정적 웹으로 공용 예약 상세를 만들고 앱의 예약 상세 화면을 WebView로 교체
- 호스트 판별과 메시지 송수신을 단일화한 브릿지 계층을 두어 4개 브랜드가 같은 인터페이스로 통신
- 같은 화면을 읽기 전용으로 열어 어드민에서도 고객과 같은 상태를 보게 함
확인한 결과
다섯 개 화면이 한 코드베이스를 공유
4개 브랜드와 어드민이 같은 코드베이스를 쓰게 됐습니다. 새 API 필드는 하위 호환을 확인한 뒤 배포했습니다.
예약 상세는 앱 심사를 거치지 않고 배포할 수 있게 됐고, CS 문의가 들어오면 고객과 같은 예약 상태를 보면서 응대합니다.