SLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기

토스는 이 설문 조사 패턴을 퍼널(funnel)이라 부른다. 유저가 최종 목표에 이르기까지 조금씩 이탈해 깔때기 모양을 띠는 마케팅 용어에서 왔다. 발표자는 퍼널을 기초적으로 만든 뒤 응집도·추상화·시각화 세 키워드로 점진 개선하겠다고 예고한다. 가장 기본적인 구조는 페이지마다 파일을 만들고 `router.push`로 이동하며 흩어진 상태를 전역으로 유지하는데, 잘 동작하지만 흐름이 흩어져 전체 순서를 파악하려면 여러 파일을 넘나들어야 하고, 한 목적의 상태가 흩어져 수집·사용 위치가 달라 디버깅이 어렵다.

첫 개선은 응집도를 높이는 것이다. 흩어진 파일 대신 '가입' 페이지 하나를 만들고 `registerData`를 지역 상태로 두며, 현재 UI를 담는 `step` 상태를 추가한다. 네 페이지를 컴포넌트로 만들어 퍼널 안에 넣고 `step`에 따라 조건부 렌더링하며, 다음 버튼을 누르면 `step`을 업데이트한다. 이로써 UI 흐름과 API 호출 상태를 상위 한 군데에서 보게 되어, '회사 주소까지 받은 뒤 API를 호출하라' 같은 요구에도 같은 파일 안에서 간단히 대응할 수 있다.

재사용을 위해 퍼널 흐름 코드를 라이브러리로 추출한다. 핵심은 `step` 지역 상태와 그에 따른 조건부 렌더링 두 부분이다. 조건부 렌더링을 '조건과 컴포넌트를 받아 맞으면 보여 주는' 컴포넌트로 추상화하고 이름을 `Step`으로 짓는다. 반복 조건문은 내부 로직으로 옮겨 결국 `name`만 남겨 깔끔하게 만든다. `Step`이 현재 스텝을 알아야 하므로 `step` 상태를 '퍼널을 관리한다'는 의미의 커스텀 훅 `useFunnel` 안으로 옮기고, `Step`이 받은 `name`이 현재 스텝과 같으면 렌더링되도록 구성한다.

라이브러리화 덕분에 사용 쪽 복잡도를 높이지 않고 기능을 추가할 수 있다. 예로 단일 URL이라 뒤로/앞으로 가기가 안 되던 문제를 라우터의 shallow push로 쿼리 파라미터를 갱신해 해결한다. `useFunnel`은 토스 프론트엔드 오픈소스인 slash 라이브러리에 공개돼 있으며, 발표자가 1단계까지 짠 코드를 동료들이 추상화해 여러 기능을 붙여 복잡한 토스 모바일에서 유용하게 쓰고 있다고 전한다.

10개 이상의 퍼널, 100개가 넘는 스텝을 관리하는 헤비 유저로서 코드뿐 아니라 개발자 경험(DX)도 개선할 수 있겠다고 본다. 불편은 두 가지다. 전체 흐름을 알려면 스텝을 한 땀 한 땀 따라가야 하고, 원하는 스텝으로 점프하려면 스텝 이름을 복사해 URL 쿼리에 직접 붙여야 한다. 이를 개선하려고 개발자 도구(퍼널 디버거)를 만들었다. `useFunnel`에 옵션을 넘기면 화면 우측 하단 버튼이 생기고, 누르면 퍼널을 시각화한 다이어그램이 떠 현재 스텝을 강조하며, 코드를 바꾸면 자동으로 다시 그려지고 스텝을 클릭하면 바로 점프한다.

구현은 머메이드(Mermaid) 라이브러리로 다이어그램을 그린다. 퍼널 코드에서 각 스텝이 다음 스텝으로 넘기는 호출을 찾아 머메이드 화살표로 표현하면 되는데, 스텝들로 반복문을 돌며 `setStep` 호출 함수를 찾아 조합하는 27줄짜리 코드로 보여 준다. 아직 시제품 단계로 크롬 데브툴즈로 위치를 옮기고 AST 분석으로 스텝 전이를 더 정확히 찾는 개선을 앞두고 있으며, 이후 slash 오픈소스에 공개될 예정이다. '패턴이 있다 → 흐름·상태를 응집하면 유지보수가 쉽다 → 라이브러리로 추상화하면 생산성이 오른다 → 개발자 경험도 개선할 수 있다'로 요약하며 마친다.