문서

웹에서 복잡한 퍼널 쉽게 관리하기

임재후/최수민 토스 · 토스 기술 블로그

AI 핵심 요약

웹 결제의 여러 퍼널에서는 인증을 마친 뒤 이전 단계로 돌아가면 안 되는 등, 브라우저의 단일 히스토리 스택만으로 뒤로가기를 관리하기 어려웠습니다. SPA 방식은 퍼널 내부의 뒤로가기와 새로고침에 취약하고, URL 쿼리 파라미터 방식은 작은 퍼널이 끝난 뒤 복귀할 위치를 계속 전달해야 하는 문제가 있었습니다. 이를 해결하기 위해 라우트 Push 횟수를 기록하고 퍼널 종료 시 그만큼 히스토리를 되돌리는 Flow 모듈을 만들어, 시작과 종료를 독립적으로 관리하고 사용자 시나리오에 가까운 선언적 코드를 작성했습니다. 다만 여러 Flow를 이어 붙이면 시작 화면이 잠깐 보일 수 있고 시작·종료 지점이 멀어져 코드 추적이 어려워지는 한계도 확인했습니다.

브라우저 히스토리는 단일 스택이므로, 퍼널별로 뒤로가기 규칙과 완료 후 이동을 명확히 설계해야 합니다.
Flow는 라우트의 Push 횟수를 추적해 퍼널 종료 시 해당 구간의 히스토리를 되돌리는 방식입니다.
퍼널 시작·종료를 의미 있는 함수로 감싸면 라우팅 세부사항보다 사용자 시나리오가 코드에 잘 드러납니다.
Flow를 연속해서 사용하면 중간에 시작 화면이 잠깐 노출될 수 있고, 시작과 종료 코드가 멀어져 추적하기 어려울 수 있습니다.

소개

토스페이먼츠 프론트엔드 챕터에서 웹에서 퍼널을 손쉽게 관리하기 위해 했던 고민과 해결 방법을 공유해요.

비슷한 학습 자료

컨퍼런스 SLASH

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

컨퍼런스 SLASH

매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....

프론트엔드