---
name:faav
org:261house
period:2021.12 ~ 2024.05
tags:4개 프로덕트
frontend:[Next.js 12,React,TypeScript,React Native]
state:[Redux,Redux-Saga]
ui:[SCSS Modules]
etc:[부트페이,XLSX,jsPDF,Froala Editor]
infra:[Serverless,AWS S3]
---
#
faav
>구독 기반 패션 커머스 플랫폼
## 프로젝트 배경
시즌성 재고 순환을 위한 실물 구독 시스템이 필요했고, 인플루언서 협찬부터 세컨핸즈 판매까지 이어지는 전환 흐름을 설계해야 했습니다.
## 문제 정의 및 해결
공급사 담당자들이 기존 어드민의 복잡한 등록 절차를 지속적으로 불편함으로 제기했고, 운영팀도 등록 오류를 일일이 검수하느라 병목이 발생했습니다. 공급사 확보가 서비스 성장의 핵심 지표였던 만큼, 등록 경험 개선을 최우선 과제로 정의하고 어드민 전면 개편을 진행했습니다.
## 주요 성과 및 기여
→공급사 어드민 전면 개편 → 공급사 약 200% 증가에 기여 — 등록 프로세스를 단순화한 신규 어드민 UI를 구축해 신규 공급사 온보딩 장벽을 낮추고, 운영팀 검수 업무를 대폭 단축
·약관 → 정책 → 정보 입력 3단계 스텝 구조로 재설계해 이탈 지점을 분산
·기존 상품 정보를 불러와 복제하는 기능을 추가해 유사 상품 반복 등록 시간 단축
·옵션 · 재고 일괄 적용 UI로 대량 등록 시 입력 횟수 감소
·입력 단계에서 즉시 검증해 등록 후 반려되는 케이스를 줄이고 운영팀 검수 부담 완화
→자체 간편결제 FaavPay 프론트엔드 개발 — PG 빌링키 기반 카드 등록 · 대표카드 · 할부, 6자리 결제 비밀번호 등록 · 검증, 매 입력마다 배열을 섞는 보안 키패드 구현 → 결제 단계 3단계에서 1단계로 단축, 장바구니 이탈률 약 15% 감소
→이미지 업로드 · 서빙 구조 개선 제안 및 주도 — 서버 경유 업로드를 Presigned URL 기반 S3 직접 병렬 업로드로 전환. 백엔드 개발자와 함께 학습한 뒤 역할을 나눠 구현했고, 서빙 구조 개선까지 협업해 평균 이미지 로딩 속도 45% 단축
→React Native WebView 하이브리드 앱 개발 — intent 스킴 폴백 처리로 안드로이드 카드사 앱 호출 실패 문제 해결, History API 후킹으로 웹뷰 내 SPA 라우팅을 네이티브에 동기화해 하드웨어 백버튼 동작 정상화
→커머스 SEO 대응을 위해 63개 페이지 SSR 적용, 카카오 · 네이버 소셜 로그인 연동
→주문 데이터 26개 컬럼 엑셀 양방향 연동 및 운송장 · 인보이스 자동 출력으로 운영팀 수작업 제거
## 배운 점
공급사 담당자들이 반복해서 제기하던 불편이 실제로는 서비스 성장 지표와 직결된 문제임을 확인. 화면을 새로 그리기보다 실제 등록 흐름을 따라가며 불필요한 단계를 걷어내는 데 집중. 불편의 표면이 아니라 그 뒤의 작업 흐름을 봐야 개선이 지표로 이어진다는 점, 어드민 같은 내부 도구의 UX도 곧 사업 지표가 될 수 있다는 점을 체감.
## 화면 미리보기
// 8 screenshots · 클릭하면 원본 크기로 열립니다