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

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

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