디트릭스 앱 리디자인

Client
디트릭스 (비공식 개인 프로젝트)
Date
2024.09
Role
UX 리서치 · UX/UI 디자인 · UX 라이팅
Category
UI/UX
키메라 포스터를 배경으로 한 영화관 정보 화면

스크린의 크기가 곧 경험의 크기.

Context

디트릭스는 전국에 흩어진 소규모·독립 영화관의 상영 정보를 모아 예매까지 잇는 플랫폼입니다. 프랜차이즈 상영관에 걸리지 않는 영화를 찾는 관객에게는 대체할 것이 없는 앱이지만, 쓸 때마다 불편했습니다. 조금만 검색해도 같은 불만을 확인할 수 있었습니다.

Problem

터치 영역이 작고, 예매 도중 한 단계만 되돌아가려 해도 처음부터 다시 시작해야 합니다. 앱이 스토어에 내건 소개 문구는 극장·영화·시간을 한 화면에서 한번에 고를 수 있다는 것이었고, 그 한 화면이 앱의 자랑이었습니다. 브랜드도 흔들리고 있었습니다. 로고는 블랙 바탕에 노란 포인트인데, 정작 앱은 아무 맥락 없는 민트가 지배하고 있었습니다.

리디자인 전 디트릭스의 앱스토어 소개 스크린샷 4장 — 민트색 배경 위의 홈, 영화 목록, 영화예매, 개별극장 화면
리디자인 전의 디트릭스. 앱이 스토어에서 스스로를 소개하던 네 장면입니다.

Research

국내 영화 관객이 모인 디시인사이드 누벨바그 갤러리에 사용성 평가 질문지를 열고, 추첨으로 다섯 명에게 영화 티켓 두 장씩을 걸어 참여를 청했습니다. 티켓만 노린 응답을 거르려고 디트릭스 로그인 화면 캡처를 필수로 받았고, 개인정보는 1년 보관 후 파기한다는 약관에 동의한 사람만 참여하게 했습니다. 60명이 답했습니다.

사용성 조사 결과 — 중요도와 빈도 두 축으로 정리한 페인 포인트
응답을 중요도와 빈도 두 축으로 정리했습니다.

가장 무겁게 돌아온 것은 예매 도중 길을 잃는다는 말이었습니다. “예매 과정에서 이전 단계로 돌아가려면 처음부터 다시 시작해야 해요.” 그래서 같은 문제를 프랜차이즈 3사는 어떻게 다루는지 예매 플로우를 여섯 단계로 나눠 비교했습니다. 한 곳은 영화나 영화관 중 하나를 먼저 고르게 해 다음 단계를 좁혀갔고, 나머지 둘은 한 화면에서 여러 선택을 동시에 요구해 흐름이 복잡해졌습니다. 선택 단계를 빠르게 정리하는 쪽이 더 나은 경험을 만든다는 것을 확인했습니다. 디트릭스가 스스로의 자랑으로 내걸던 것이 정확히 그 반대였습니다.

Solution

콘셉트는 쓸수록 편해지는 예매 앱입니다. 컬러는 민트를 버리고 로고의 노랑을 승격했습니다. 기본은 다크 모드 — 극장 경험을 사랑하는 사람들을 위한 앱이니, 불 꺼진 영화관의 인상이 앱 안까지 이어지게 했습니다.

홈 화면 목업
홈 — 지난 관람의 리뷰 프롬프트와 개인화된 추천이 첫 화면을 엽니다.

예매 플로우는 하나의 빠른예매 패스로 통합해, 영화를 먼저 고르든 영화관을 먼저 고르든 같은 길로 합류하게 했습니다. 회차 카드는 상영관과 시간 옆에 잔여 좌석을 함께 띄우고, 매진된 회차는 흐리게 남겨 선택지에서 지웁니다. GV처럼 특별한 회차는 배지로 구분하고, 취식이 제한된 상영관은 좌석을 고르기 전에 알립니다 — 영화관마다 다른 규칙을 예매가 끝난 뒤가 아니라 흐름 안에서 만나게 했습니다.

영화별 예매와 좌석 선택 화면
영화별 예매와 좌석 선택. 회차 카드가 잔여 좌석을 보여줍니다.

첫 로그인에서 즐겨찾는 영화관을 등록하면 이후의 모든 예매가 그 선택에 맞춰 짧아집니다. 관람이 끝나면 짧은 만족도 설문이 따라붙고, 지난 티켓은 예매 내역에 쌓입니다. 앱이 말을 거는 방식도 같은 원칙을 따릅니다 — 즐겨찾기 등록은 설정 화면에 묻어두는 대신 좋은 영화관을 찾아낸 그 순간에 “좋은 영화관이군요! 즐겨찾기에 등록할까요?”라고 묻습니다.

즐겨찾기 등록 프롬프트와 예매 내역 화면
즐겨찾기 등록 제안과 예매 내역. 기록이 쌓일수록 다음 예매가 짧아집니다.

쓸수록 나에게 맞춰지는 앱.

즐겨찾는 영화관 선택, 영화 정보, 좌석·결제 화면 콜라주
즐겨찾는 영화관 선택부터 씨네토크 상세, 좌석·결제까지.
예매 상세 티켓 카드
예매 상세 — 상영까지 남은 시간이 티켓 맨 위에 서고, 입장 확인과 예매 취소를 한 화면에 둡니다.