문서

AST로 Outdated 없는 퍼널 문서 만들기

조성륜 토스 · 토스 기술 블로그

AI 핵심 요약

39개 페이지와 82개 조건 분기로 이루어진 판매자 입점 퍼널은 수동으로 파악하기 어렵고, 사람이 그린 문서는 코드 변경을 따라가지 못했습니다. 이를 해결하기 위해 ts-morph로 TypeScript AST를 분석해 router.push·replace 호출과 조건, 쿼리 파라미터, 코드 위치를 추출하고, 페이지가 import하는 커스텀 훅과 URL 상수도 함께 추적했습니다. 추출한 Navigation을 그래프로 구성해 진입점·이탈점과 데드엔드를 분류하고, 조건과 이동 방식을 표시한 Mermaid 다이어그램으로 생성했습니다. 스크립트를 다시 실행하면 코드 변경을 문서에 반영할 수 있어 온보딩과 영향 범위 파악이 쉬워지고, Navigation 누락도 발견할 수 있었습니다.

TypeScript 코드를 실행하지 않고 분석하려면 ts-morph로 AST를 만들고 호출 노드를 탐색할 수 있습니다.
Navigation 데이터에는 출발·도착지뿐 아니라 조건, 쿼리 파라미터, 호출 방식, 코드 위치와 출처도 담아야 흐름을 이해하기 쉽습니다.
페이지에서 import하는 커스텀 훅도 추적해야 페이지 파일에 직접 드러나지 않는 이동을 놓치지 않습니다.
URL 상수를 실제 경로로 해석한 뒤 그래프를 만들면 진입점·이탈점과 데드엔드를 판별할 수 있습니다.
Mermaid 라벨과 노드·화살표 스타일을 활용하면 조건 분기와 push·replace 차이를 시각적으로 표현할 수 있습니다.

소개

소스코드 기반으로 복잡한 퍼널 이동을 시각화한 경험을 공유합니다.

비슷한 학습 자료

컨퍼런스 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 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....

프론트엔드