플러스프로젝트 배경
문제점 - 중소 공연 기획사가 자체 예매 시스템 없이 대형 플랫폼에 종속되어, 수수료 8~15%를 부담하고 관객 데이터 접근이 제한됩니다. 연간 수수료 비용이 매출의 10%에 달하는 기획사도 있습니다. - 기존 좌석 선택 UI가 정적 이미지 기반이라, 좌석 위치 파악이 어렵고 선택 피드백이 느립니다. 특히 200석 이상 공연장에서 사용자 이탈률이 높아집니다. - 동시 접속 시 같은 좌석을 두 사용자가 선
프로젝트 성과
실시간 좌석 동기화 구현
WebSocket 기반으로 좌석 선택·점유·확정 상태를 동시 접속 사용자 간 밀리초 단위로 반영. 브라우저 2탭 시연으로 실시간 잠금/해제를 직접 확인할 수 있습니다.
풀사이클 예매 플로우 완성
좌석 선택 → 5분 임시 홀딩 → 결제(3종 수단) → 예매 확정 → 알림 → 취소/환불까지 전체 사이클 구현. 환불 정책(7일전 100%, 3일전 70%) 자동 적용.
4,530석 규모 운영 데이터
3개 공연장, 8개 공연, 24회차, 262건 예매, 60건 알림 — 실제 서비스 수준의 데이터로 동작하는 라이브 데모. 빈 데이터가 아닌 다양한 상태(확정/취소/환불/만료)가 혼합된 리얼 데이터.
RBAC 3단계 권한 + Google SSO
관객·운영자·관리자 3개 역할에 따라 메뉴·기능·데이터 접근이 완전히 분리. Google OAuth 연동으로 소셜 로그인까지 지원.
E2E 25개 테스트 전수 통과
Playwright 기반 인증, 예매, 실시간 동기화, RBAC 제한, 관리자 기능 등 8개 시나리오 25개 테스트 케이스 전수 통과 후 배포.
핵심 기능
실시간 좌석맵 — 인터랙티브 좌석 선택
CSS Grid 기반 공연장 좌석 배치도를 렌더링합니다. VIP/R/S/A 등급별 색상 구분, 선택 시 네온 글로우 하이라이트, 점유 좌석 실시간 잠금 표시, 호버 시 좌석 정보 툴팁을 제공합니다.
진행 단계
기획
2026.03.
좌석 선택 UX 시나리오, 예매 플로우 정의, RBAC 권한 체계, 데이터 모델(11모델 9열거형) 설계, 3 페르소나 시연 스토리 수립
프로젝트 상세
1) 포트폴리오 소개 공연·전시 기획사와 관객을 위한 실시간 좌석 예약 플랫폼입니다. 관객은 공연을 검색하고 좌석맵에서 원하는 좌석을 직접 클릭하여 선택하면, WebSocket 기반으로 다른 사용자에게 즉시 잠금 상태가 반영됩니다. 5분 임시 홀딩 → 결제 → 예매 확정 → 알림까지 풀사이클 예매 플로우를 구현했습니다. 공연 운영자용 관리 대시보드에서 공연 등록, 좌석 배치도 설정, 회차별 판매 현황 히트맵
