복잡한 흐름 앞에서, 우리가 선택한 건 Funnel / 이었다

모든 단계를 URL로 표현하면 새로고침과 뒤로 가기는 자연스럽지만, 임시 데이터와 조건 분기를 라우터에 과도하게 싣게 된다. 반대로 상태만 사용하면 구현은 단순해도 탐색 기록과 복구가 어렵다. 발표는 사용자에게 의미 있는 경로는 URL에 남기고 세부 전이는 흐름 상태가 맡도록 두 방식의 책임을 나눈다.

화면이나 행동 하나를 Step, 같은 목적의 단계 묶음을 Funnel, 여러 Funnel이 이어지는 업무 시나리오를 Flow로 정의한다. 이 계층은 개발 구조를 단순화하는 데 그치지 않고 기획 문서와 사용자 이탈 분석의 기준도 통일한다. 각 단계를 이벤트 단위로 측정할 수 있어 복잡한 전환 퍼널의 병목도 같은 모델 위에서 찾을 수 있다.

커스텀 useFlow 훅은 쿼리 문자열에 흐름 ID와 현재 단계를 기록해 브라우저 히스토리와 중첩 흐름을 함께 지원한다. CombinedStepState 타입은 이전 단계에서 쌓인 필수 데이터를 다음 단계가 안전하게 사용하도록 만들고, 허용되는 다음 단계의 유니온 타입과 런타임 검증으로 잘못된 전이를 이중으로 막는다.

하위 흐름을 마친 뒤 상위 흐름으로 돌아올 때 쿼리에 남은 하위 단계가 다시 살아나는 문제를 실제 운영에서 발견했다. 하위 히스토리를 정리하고 이탈 방지와 초기화 규칙을 명확히 해 상태의 수명을 제어했으며, 경험을 반영한 V2 내부 라이브러리로 공통 동작과 타입 계약을 강화했다.