플러스프로젝트 배경
문제점 - 웹 전용 예매 플랫폼에서 모바일 브라우저 이용 시 좌석 맵 조작 어려움, 티켓 오픈 시 모바일 이탈률 급증 - 현장 이동 중 예매 대응 불가로 인한 티켓 완판·인기 공연 구매 실패 - 종이 티켓·이메일 티켓 분실로 인한 입장 거부 사례, QR 현장 스캔 수요 충족 필요 - WebSocket 실시간 좌석 점유의 모바일 구현 공백, 동시 예매 경쟁 대응 부재 - 공연·티켓팅 도메인 모바일 포트
프로젝트 성과
WebSocket 실시간 좌석 예매 모바일 구현
공연 티켓팅의 가장 민감한 기능인 실시간 좌석 점유를 Socket.io와 Reanimated로 결합하여 부드러운 애니메이션과 충돌 방지를 모두 달성했습니다.
네이티브 QR 티켓 + 푸시 알림 통합
예매 완료 후 QR 티켓을 풀스크린으로 표시하고, 공연 리마인더·예매 성공을 Expo Notifications 로컬 알림으로 전송. 웹에서는 불가능한 네이티브 기능을 통합했습니다.
좌석 맵 핀치줌 + 햅틱 피드백
수백 석 좌석 맵에 Gesture Handler 핀치줌을 적용하여 모바일 한 화면에서도 전체·부분 조회를 자유롭게 전환합니다. 좌석 선택 시 햅틱 진동으로 조작감을 보강했습니다.
2-Persona 탭 구성
관객·운영자 하단 탭을 원클릭 BottomSheet로 전환. 예매자 경험과 운영자 관리 기능을 한 앱 안에서 시연할 수 있는 멀티 페르소나 구조입니다.
오프라인 대응 즉시 렌더링
API 미응답 시에도 mock 데이터로 모든 화면이 즉시 렌더링. 지하철·엘리베이터 등 네트워크 불안정 환경에서도 앱이 자연스럽게 동작합니다.
핵심 기능
공연 탐색 및 회차 선택 — 모바일 예매 플로우
카테고리·날짜·지역별 필터로 공연을 탐색하고, 상세 화면에서 회차·등급별 가격·공연장 지도를 확인합니다. 하단 고정 예매하기 버튼으로 즉시 좌석 선택 단계로 이동합니다.
진행 단계
기획
2026.01.
웹 대비 모바일 기능 패리티 분석(웹 16개 route → 모바일 INCLUDE/ADAPT/EXCLUDE/MOBILE_ONLY 판정), 관객·운영자 탭 네비게이션 설계, 좌석 맵 핀치줌 UX 기획
프로젝트 상세
1) 포트폴리오 소개 WebSocket 기반 실시간 좌석 점유·결제를 지원하는 공연 예매 모바일 앱입니다. 공연 티켓팅 특유의 동시 접속·경쟁 상황에서는 모바일 접근이 필수이기 때문에 웹 데모의 예매 엔진을 React Native(Expo)로 이식했습니다. 관객은 이동 중에도 공연을 탐색·예매하고 QR 티켓을 현장에서 바로 제시할 수 있으며, 운영자는 공연 등록·좌석 관리·매출 대시보드를 한 손으로 관리합니
