복잡한 흐름 앞에서, 우리가 선택한 건 Funnel / 이었다
- 카카오 서비스 통합으로 인한 복잡한 사용자 동선 문제를 해결하기 위해 마케팅 개념인 '퍼널' 구조를 도입했습니다. 🧩
- 사용자 여정을 '스텝(화면/동작)', '퍼널(스텝 묶음)', '플로우(퍼널 연결 시나리오)'로 정의하여 복잡한 흐름을 체계적으로 관리했습니다. 🗺️
- 퍼널 구조를 통해 기획자, 디자이너, 개발자 등 모든 팀원이 동일한 시각으로 소통하며 불필요한 오해를 줄이고 논의 속도를 높였습니다. 🗣️
- 퍼널 단위로 사용자 이탈률을 분석하여 문제 지점(예: 사업자 인증)을 명확히 파악하고, 데이터 기반의 서비스 개선 의사결정을 가능하게 했습니다. 📊
- 브라우저 히스토리 지원, 타입 안정성, 코드 내 플로우 가시성을 목표로
useFlow라는 커스텀 훅을 직접 개발하여 퍼널 구조를 기술적으로 구현했습니다. 💻
- URL 쿼리 스트링에 고유 ID와 현재 스텝 정보를 담아 새로고침, 뒤로가기 등 브라우저 기본 동작을 자연스럽게 지원했습니다. 🔗
CombinedStepState 유틸리티 타입을 개발하여 이전 스텝의 입력값이 다음 스텝에서 필수로 보장되도록 하여 타입 안정성과 개발 편의성을 높였습니다. 🛡️
- 중첩된 퍼널 구조를 URL 쿼리에 표현하고, 퍼널 전환 시 하위 플로우 정보를 정리하여 깔끔한 상태 관리를 구현했습니다. 🔄
- 코드를 통해 전체 플로우를 한눈에 파악할 수 있게 하여 새로운 동료의 온보딩을 돕고 유지보수 비용을 절감했습니다. ✨
- 기술적 고민에서 시작하여 비개발 직군과의 협업을 통해 프로덕트의 성공이라는 공동 목표를 달성하며 기술과 비즈니스 가치를 동시에 추구하는 경험을 얻었습니다. 🌱
- 현재
useFlow V2를 개발 중이며, 사내 라이브러리로 공개하여 더 많은 동료들이 활용하고 발전시킬 수 있도록 할 계획입니다. 🚀