본문으로 이동
@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?
문서

@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?

권선영 · 토스 · 토스 기술 블로그

원본 보기

소개

단계별 상태 관리 라이브러리 @use-funnel을 어떻게 만들게 되었는지 소개드릴게요. 문제의식을 공유하고 해결방법을 찾으려는 분들께 도움이 되면 좋겠어요.

AI 핵심 요약

주택담보대출 서비스의 복잡한 퍼널을 개발하며 기존 use-funnel은 상태 관리가 부족했고, XState는 타입과 머신, UI를 여러 곳에서 수정해야 해 코드 파악과 유지보수가 어려웠습니다. 특히 뒤로가기 후 이전 단계의 값이 남아 다른 분기에서 잘못 사용될 수 있는 문제가 있어, 사내 개발자들과 논의해 안정적인 이동과 상태 관리, 오버레이 단계, 라우터 독립성을 요구사항으로 정리했습니다. 5명의 워킹그룹은 주간 논의와 페어 프로그래밍, 리뷰를 반복해 @use-funnel/core와 여러 라우터용 라이브러리를 만들고, 문서화와 사내 테스트를 거쳐 오픈소스로 공개했습니다. 기존 도구의 한계를 해결하려면 사용자의 실제 고충을 먼저 모으고, 핵심 기능과 환경별 연동을 나눠 설계하는 것이 중요하다는 점을 보여줍니다.

  • 퍼널의 단계 이동과 입력 상태를 따로 관리하면 뒤로가기 후 이전 단계의 값이 남아 이후 분기에서 잘못 사용될 수 있다.
  • 상태 머신은 단계와 상태를 함께 표현할 수 있지만, 타입·머신·UI를 여러 곳에서 맞춰야 하면 수정 부담과 진입장벽이 커진다.
  • 새 도구를 만들기 전 여러 개발자의 사용 경험을 모아 요구사항을 정리하면 실제 문제에 맞는 설계를 시작할 수 있다.
  • 여러 라우터 지원과 히스토리 관리의 플러그인화처럼 핵심 로직과 환경별 기능을 분리하는 요구를 설계에 반영했다.