네이버페이 매장결제 연동
네이버 연동 고도화 | 2025.11 ~ 2026.05 | 기여도 100%
Android 1 · iOS 1 · Frontend 1 · Backend 1 · Product Designer 1
상황네이버 헤어샵을 통한 고객 유입을 늘리기 위해
네이버페이 매장결제·예약금·쿠폰·스타일 태그를 앱에
연동하는 프로젝트였습니다. 매장결제는 앱에서 결제를 요청한 뒤 고객이
자기 휴대폰에서 결제를 마칠 때까지 앱이 기다려야 하는 구조라, 그 사이에
결제 결과를 앱이 알 방법이 필요했습니다.
해결서버가 앱으로 결과를 알려주는 방식이 더
낫다고 봤지만 작업 공수가 매우 짧았습니다. 그래서 타임아웃을
두고 일정 주기로 승인 여부를 API로 확인하는 폴링 방식을 먼저
도입하자고 제안해 구현했습니다.
화면은 결제 요청 → 진행 중 → 완료 → 환불까지 전 플로우를 Compose +
MVI로 만들었고, 스타일 태그는 카테고리별 복수 선택이 가능한 바텀시트로
구현했습니다. 백엔드 API가 나오기 전에는 로컬 JSON 목 데이터로 통신
케이스를 미리 만들어 개발하고 엣지 케이스를 먼저 공유했습니다. 외부
결제가 섞이면서 달라지는 매출·포인트 계산은 경우별로 백엔드와 규칙을
다시 맞췄습니다.
결과
- 매장결제 · 예약금 · 쿠폰 · 스타일 태그 배포
- 매출 ViewModel 단위 테스트는 자체 테스트 생성 파이프라인으로
작성, 네이버 예약 검증 E2E 플로우 구축
회고폴링은 짧은 일정에 맞춘 선택이었습니다.
서버가 결과를 알려주는 방식이 더 낫다는 점은 제안할 때 함께
공유했습니다.
Compose MVI 외부 결제 연동
Polling 단위 테스트 E2E
통계 화면 재구축과 차트 직접 구현
통계 개선 | 2025.01 ~ 06 · 2026.01 ~ 05 | 기여도 100%
Android 1 · iOS 1 · Frontend 1 · Backend 1 · Product Designer 1
상황통계 정합성 문제로 제공 중인 통계의 신뢰도가
떨어져 있었습니다. 통계 메뉴는 항목 나열 구조였고,
직원·고객·시간별·요일별 분석 화면은 네이티브에 없었습니다.
해결먼저 결제수단 다양화와 함께 통계 3종을 다시
만들었습니다. Compose 차트 라이브러리가 레퍼런스가 적고 커스터마이징에
제약이 있어, 디자인 가이드를 반영해 차트를 직접 구현하고 확장성과 UX
일관성을 기준으로 설계했습니다.
이후 이 차트 컴포넌트 위에 네 화면을 Compose로 구현했습니다. 차트는
막대·라인·테이블 세 종류를 직접 구현했습니다. 시간별·요일별 차트는
매출이 없는 시간대를 영업시간 기준으로 x축에 채우고, 24시 자정을 넘는
구간과 화면별 y축 단위를 따로 처리했습니다. 직원 통계 목록은 스크롤이
무거워 derivedStateOf·shadow·NumberFormat 재사용으로
최적화했습니다. 채널별·고객 통계처럼 웹 대시보드에 있는 화면은 브릿지로
네이티브↔︎웹을 오가게 연결했고, 메뉴는 용도별 3개 그룹 카드로
재편했습니다.
결과통계 3종과 직원·고객·시간별·요일별 분석 화면
배포 · 메뉴를 3그룹으로 재편해 매장이 한눈에 볼 수 있는 통계 화면
제공
Compose 차트 직접 구현
WebView Bridge derivedStateOf
매출 등록 화면 재설계
결제수단 다양화 | 2025.01 ~ 06 | 기여도 100%
Android 1 · iOS 1 · Frontend 1 · Backend 1 · Product Designer 1
상황매출 구조가 결제수단 하나를 전제로 만들어져
여러 결제수단을 함께 받을 수 없었습니다. 매출 로직이 복잡한데 UI까지
직접 제어하는 구조라 유지보수와 기능 변경 때마다 비용이 컸습니다.
해결매출 등록 화면의 상호작용 로직을 상태
기반으로 구조화하고 Compose + MVI로 재설계했습니다. 백엔드 API가 나오기
전에는 로컬 JSON 목 데이터로 통신 케이스를 미리 만들어 개발했습니다.
결과매출 등록/수정 · 포인트 · 회원권 결제 차감
전면 구현 후 배포 · 담당 직원 복수 선택 등 기획 변경에 낮은 비용으로
대응 · 함께 진행한 통계 3종은 바로 위 통계 항목에 정리
회고기존 정책을 유지하는 로직에서도 결제 구조
개편의 사이드 이펙트가 났습니다. 변경 사항 간 연관성을 미리 점검했어야
했습니다.
Compose MVI 로컬 목 데이터
고객 필터·그룹 기능 구현
고객 목록 개선 | 2024.07 ~ 11 | 기여도 100%
Android 1 · iOS 1 · Frontend 1 · Backend 1 · Product Designer 1
상황고객 목록에 필터·그룹 기능이 없어 매장이
고객을 나눠 관리하기 불편했습니다.
해결B2B 앱에 Compose를 처음
도입하고 MVI를 적용했습니다. 필터·그룹은 조건 카테고리가 전부
숨김일 때의 노출 정책과, 필터 수정 후 복귀 시 리프레시 시나리오를 먼저
정의해 프론트·백엔드와 합의했고, 화면 전환 구조는 iOS와 회의록을 만들어
함께 정리했습니다. 디자인 시스템을 처음 적용한 화면으로, 필터에 필요한
컴포넌트는 디자이너와 상의해 공통 컴포넌트로 추가했습니다. 실시간 검색은
debounce로 불필요한 API 호출을 줄였고, 드래그앤드롭은 OS 업데이트로 외부
라이브러리가 깨져 직접 구현으로 바꿨습니다.
결과필터·그룹 기능 배포 · B2B 앱의 Compose 전환
시작점
Compose MVI 디자인 시스템
Paging3 Turbine
웹뷰 브릿지 공통화
캘린더·예약 개편 | 2022.08 ~ 2023.07 | 기여도 90%
Android 2 · iOS 2 · Frontend 2 · Backend 3 · Product Designer 1
상황플랫폼별 캘린더 UX가 달라 사용자 혼란이
있었고, 웹뷰 화면마다 인증과 네비게이션을 매번 다시 붙이고
있었습니다.
해결이 프로젝트 하나만 고치는 대신
다음에도 쓸 수 있는 구조를 만들기로 했습니다. 웹뷰
브릿지 자체는 직전 프로젝트에서 메시지 발송 화면용으로 처음 만들었는데,
그때는 화면 하나에 맞춘 것이었습니다. 캘린더에서 이를 공통 함수
15개 이상으로 컨벤션화하고 문서화해, 쿠키 인증 + 단일 Activity
구성으로 화면 뎁스와 무관하게 재사용되게 했습니다. 테스트가 없던
시점이라 JUnit5도 이 프로젝트에서 처음 들였습니다.
결과이후 메시지 발송·네이버 연동 등 새로
추가된 WebView 기능이 이 브릿지를 재사용
회고초기 고객 니즈 파악이 미흡해 클레임이
발생했습니다. 이를 계기로 기획 단계에 고객 인터뷰 프로세스를
제안했습니다.
WebView Bridge Paging3 FCM
JUnit5