인터파크 티켓 리뉴얼
본 프로젝트는 팀 프로젝트로 진행한 티켓 예매 사이트 리뉴얼입니다.
UX/UI 디자인부터 퍼블리싱까지 팀원들과 역할을 분담하여 수행하였습니다.
인터파크 티켓(Interpark Ticket)은 공연, 스포츠, 전시 등 다양한 문화 콘텐츠를 예매할 수 있는 플랫폼입니다.
리뉴얼은 다음의 목표를 중점으로 설계되었습니다
- - 사용자 중심의 직관적인 예매 흐름 개선
- - 브랜드 정체성을 반영한 일관된 디자인 시스템 구축
- - 다양한 콘텐츠 카테고리에 대응하는 유연한 레이아웃
팀 구성
- 고윤정 팀장
- 정연희 디자인 & 퍼블리싱
- 고경현 디자인 & 퍼블리싱
- 윤다경 디자인 & 퍼블리싱
제작 일정
주요 기능
📌 공통 레이아웃
- Header로고, 검색, 카테고리 네비게이션 및 로그인 영역으로 구성된 헤더
- Footer사이트맵, 고객센터, SNS 링크를 포함한 풀 푸터 구성
- 배너프로모션 배너 슬라이더로 시각적 주목도 강화
📌 메인 페이지
- Section 1 – 메인 비주얼대형 히어로 배너와 슬라이더로 주요 공연 정보 제공
- Section 2 – 추천 공연카드형 레이아웃으로 인기 공연 및 티켓 정보 표시
- Section 3 – 카테고리별 공연뮤지컬, 콘서트, 스포츠 등 카테고리별 필터 탭 구성
- Section 4 – 랭킹실시간 예매 순위를 시각적으로 표현한 랭킹 리스트
- Section 5 – 이벤트/기획전배너형 이벤트 영역으로 프로모션 정보 강조
- Section 6 – 스포츠스포츠 경기 일정 및 예매 링크 제공
- Section 7 – 전시/클래식전시 및 클래식 공연 카드 목록
- Section 8 – 빠른예매공연명 검색 및 날짜 선택으로 빠른 예매 접근
📌 서브 페이지
- 서브페이지1 - 공연 홀 안내공연장 정보, 좌석 배치도, 오시는 길 안내 페이지
- 서브페이지2 - 예매 페이지날짜/좌석 선택, 결제 흐름을 단계별로 구성한 예매 UI
디자인 방향성
- 브랜드 일관성: 인터파크 브랜드 컬러와 아이덴티티를 반영한 통일된 디자인 언어
- 콘텐츠 중심 레이아웃: 다양한 공연 정보를 카드형으로 정리하여 시인성 극대화
- 직관적인 예매 흐름: 최소한의 클릭으로 예매 완료에 도달하는 UX 설계
- 시각적 위계 강화: 타이포그래피와 색상으로 주요 정보와 보조 정보 구분
폴더 구조
📦 인터파크티켓 ┣ 📄 index.html ┣ 📄 resetCSS.css ┣ 📂 footer ┣ 📂 header ┣ 📂 login-modal ┣ 📂 main ┣ 📂 sub-hall ┗ 📂 sub-reservation
사용 기술 및 도구
- 개발 HTML5, CSS3, JavaScript, Swiper
- 디자인 Figma
- 개발 환경 VS Code