Experience/네이버 부스트캠프
[네이버 부스트캠프] 토스의 퍼널 패턴 적용해보기
krokerdile
2024. 11. 11. 23:52
728x90
퀴즈 플랫폼에 퍼널 패턴 적용하기: 토스의 UX 디자인 패턴 차용
들어가며
부트캠프에서 실시간 퀴즈 플랫폼을 개발하면서 마주친 가장 큰 도전과제는 "어떻게 하면 사용자들이 끊김 없이 퀴즈에 참여할 수 있을까?"였습니다. 이 문제를 해결하기 위해 우리는 토스(Toss)의 퍼널 패턴을 도입했고, 놀라운 결과를 얻을 수 있었습니다.
퍼널 패턴이란?
퍼널(Funnel)은 '깔때기'라는 뜻으로, 사용자가 특정 목표를 달성하기까지의 단계를 위에서 아래로 시각화했을 때 깔때기 모양이 되는 것에서 유래했습니다. 예를 들어 일반적인 이커머스의 구매 과정은 다음과 같은 단계로 이루어집니다:
- 쇼핑몰 방문
- 상품 검색
- 상품 선택
- 장바구니에 담기
- 결제 정보 입력
- 최종 결제
실제 토스의 컨퍼런스 영상에서의 토스의 송금 프로세스를 보면 이러한 퍼널 패턴이 명확하게 드러납니다:
- 받는 분 선택 (100%)
- 금액 입력 (90%)
- 메시지 작성 (선택, 70%)
- 최종 확인 (65%)
- 송금 완료 (60%)
각 단계별 참여율이 줄어드는 것을 볼 수 있습니다. 우리의 퀴즈 플랫폼도 이와 유사한 패턴을 보일 것으로 예상했습니다.
우리 프로젝트에 퍼널 패턴을 도입한 이유
우리가 개발 중인 실시간 퀴즈 플랫폼은 다음과 같은 핵심 플로우를 가지고 있습니다:
- 퀴즈존 입장 (PIN 번호 입력)
- 대기실 참여
- 퀴즈 준비
- 문제 풀이 (여러 문제 반복)
- 결과 확인
이러한 플로우는 다음과 같은 특징을 가지고 있습니다:
- 단계적 진행: 각 단계가 순차적으로 진행됨
- 상태 관리 필요: 각 단계별로 명확한 상태 관리가 필요함
- 사용자 동기화: 여러 사용자가 동시에 같은 단계에 있어야 함
이러한 특징들이 토스의 퍼널 패턴과 잘 맞았고, 다음과 같은 이점을 기대할 수 있었습니다:
장점
명확한 사용자 경험
- 한 화면에 한 가지 작업만 제시
- 사용자가 현재 어느 단계에 있는지 명확히 인지
- 다음에 무엇을 해야 하는지 직관적으로 이해
상태 관리 용이
- 각 단계별로 필요한 상태를 명확히 구분
- 단계 전환 시 필요한 로직을 체계적으로 관리
- 에러 처리와 복구가 용이
개발 생산성
- 컴포넌트 구조가 명확해짐
- 테스트 케이스 작성이 수월
- 코드 유지보수가 쉬움
도전 과제와 해결 방안
브라우저 히스토리 관리
- 문제: 브라우저 뒤로 가기 시 이전 단계로 돌아가야 함
- 해결: React Router와 커스텀 히스토리 관리 로직 구현
실시간 동기화
- 문제: 여러 사용자의 상태를 동기화해야 함
- 해결: WebSocket을 통한 실시간 상태 동기화 구현
에러 처리
- 문제: 각 단계별로 발생할 수 있는 다양한 에러 상황 존재
- 해결: 단계별 에러 핸들링 전략 수립 및 사용자 친화적인 에러 UI 구현
실제 구현 사례
우리 프로젝트에서는 퍼널 패턴을 다음과 같이 구현 해보려고 합니다.
Stage Manager
- 전체 퀴즈 진행 단계를 관리하는 커스텀 훅
- 각 단계별 필요한 데이터 구조 정의
- 단계 전환 로직 캡슐화
컴포넌트 구조
- 각 단계별 독립적인 컴포넌트
- 단계 전환 시 필요한 애니메이션 효과
- 실시간 상태 표시 UI
상태 동기화
- WebSocket을 통한 실시간 업데이트
- 서버와의 상태 동기화 전략
- 네트워크 지연 처리
퍼널을 학습하며 배운점과 고려해야 될 점
사용자 경험 개선
- 각 단계를 명확히 구분하여 사용자의 혼란 감소
- 진행 상황을 직관적으로 파악 가능
- 에러 상황에서도 복구가 용이
개발 프로세스 개선
- 코드 구조가 명확해져 협업이 수월
- 테스트 커버리지 향상
- 버그 발생 가능성 감소
참고 자료
728x90