토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
SLASH 토스 · YouTube
AI 핵심 요약
토스 모바일의 가입처럼 여러 화면과 분기가 이어지는 과정은 페이지 흐름과 상태가 여러 파일에 흩어져 유지보수와 디버깅이 어려웠습니다. 진유림은 React에서 스텝 상태와 가입 데이터를 상위에 모아 흐름을 한곳에서 관리하고, 이를 `useFunnel` 훅과 스텝 컴포넌트로 추상화해 재사용 가능한 라이브러리로 발전시켰습니다. 라우터의 `push` API를 이용한 브라우저 히스토리 관리 기능도 더했으며, Mermaid로 스텝 전이를 그려 원하는 화면으로 이동하는 퍼널 디버거를 개발했습니다. 퍼널 설계에서는 관련 흐름과 상태를 응집시키는 것뿐 아니라, 개발자가 흐름을 파악하고 테스트하는 경험도 함께 개선할 수 있다는 점을 강조했습니다.
- 페이지 전환과 상태 수집을 한 흐름 안에 모으면 데이터가 어디서 만들어지고 사용되는지 추적하기 쉽습니다.
- 공통 로직을 커스텀 훅과 컴포넌트로 추상화하면 퍼널별 구현을 단순하게 유지하면서 기능을 확장할 수 있습니다.
- 브라우저 히스토리 지원은 라우터의 `push` API로 스텝을 쿼리 파라미터에 반영해 구현할 수 있습니다.
- Mermaid로 스텝 간 전이를 시각화하고 클릭 이동을 제공하면 흐름 파악과 디버깅을 돕습니다.
소개
매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....
비슷한 학습 자료
컨퍼런스 SLASH
업무를 더 효율적으로, 최대의 성과를 낼 수 있는 법은 무엇일까요? 클러스터 운영부터 서비스 라이프사이클 관리까지, 데브옵스 업무 효율화 사례를 소개합니다. 양석준 / DevOps Engineer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #devops #cluster 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인정보는 고객에게 동의를 받은 후에 처리...
데브옵스 · 인프라
컨퍼런스 SLASH
토스ㅣSLASH 23 - 유연하고 안전하게 배포 Pipeline 운영하기
컨퍼런스 SLASH
생산성, 안정성, 보안성을 모두 달성하기 위해선 ‘Pipeline’을 어떻게 설정해야 할까요? 다양하고 복잡한 토스뱅크의 배포 ‘Pipeline’을 안전하게 운영하기 위한 노력을 소개합니다. 김동석 / 토스뱅크 DevOps Engineer 발표 자료 👉🏻 https://bit.ly/42pgzIN 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #pipeline #helmtemplate #devopsengineer #토스뱅크 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행...
데브옵스 · 인프라
컨퍼런스 SLASH
평균 경력 10년의 TPO와 서버 개발자들은 토스에서 어떤 성취를 이뤘고, 또 어떤 고민을 하고 있을까요? 토스 제품의 기반이 되는 Product Foundation을 만드는 이들의 이야기, SLASH23 특별 세션에서 만나 보세요. 김보람, 임희진/ 토스 Technical Product Owner 김현준, 박재현 / 토스 Server Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #slash *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 ...
컨퍼런스 SLASH
토스ㅣSLASH 23 - 누구나 쓸 수 있는 접근성 높은 토스 만들기
컨퍼런스 SLASH
디지털화로 더 편리해진 금융, 과연 모두에게 편리해졌을까요? 모두가 평등하게, 쉽고 편리한 금융 경험을 할 수 있도록 ‘접근성’을 높인 토스의 노력을 소개합니다. 최동근 / 토스 Andriod Developer 발표 자료 👉🏻 https://bit.ly/42xGdvd 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #디자인시스템 #접근성 #androiddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩...
모바일 앱 개발 UI/UX
컨퍼런스 SLASH
토스의 얼굴, 홈 화면에서의 매끄러운 사용자 경험은 어디에서 비롯되는 것일까요? 다양한 서비스 운영 효율화를 위한 토스 홈팀의 무기, ‘Server Driven UI’를 소개합니다. 윤중현 / 토스 Server Developer 발표 자료 👉🏻 https://bit.ly/3CglOzR 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #serverdrivenui #homedst #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가...
프론트엔드 백엔드
컨퍼런스 SLASH
토스ㅣSLASH 23 - 오프닝 키노트
컨퍼런스 SLASH
토스의 간편함 이면에 있는 안정성과 보안성, 그리고 이를 향한 끊임없는 기술적 도전과 성취를 소개합니다. 이형석 / 토스 Head of Technology 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #금융 #기술 #보안 #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인정보는 고객에게 동의를 받은 후에 처리되고 있으며, 접근 권한이 분리되어 있습니다. 개발자는 모든 데이터가 아닌 담당 영...