스터디카페 화면설계 — 예약 흐름을 7장으로 확인하기
서울에서 당일 공부할 좌석을 예약하는 과정을 모바일 화면 7장으로 정리했습니다. 좌석 선택부터 결제 확인, 입실과 이용완료까지 정책이 같은 뜻으로 이어지는지 공개 화면설계에서 살펴봅니다.
스터디카페 예약 앱의 핵심 흐름을 모바일 화면 7장으로 정리했습니다. 서울에서 당일 공부할 자리를 찾고, 좌석을 고른 뒤 결제와 입실을 확인하는 과정입니다. 이번 결과물에서는 같은 예약의 지점, 좌석, 이용 시간, 금액이 화면마다 이어지는지 확인할 수 있습니다. 공개 화면설계 7장을 함께 열어 보면 이해하기 쉽습니다.
이 자료는 출시 전 기획을 검토하기 위한 와이어프레임입니다. 실제 제휴 지점에서 예약하거나 카드 결제를 처리하는 서비스는 아직 아닙니다. 지점명과 좌석 정보, 시간당 2,000원이라는 가격은 검증 전 예시입니다.
출발점은 스터디카페 아이디어 기획입니다. 여기서 정한 사용 장면과 범위를 IA의 화면 목록으로 옮기고, 각 화면에 필요한 정보와 버튼을 배치했습니다.
실제로 생성한 공개 산출물 화면입니다. 가격과 정책은 검증 전 가정입니다.
7개 화면에는 각각 하나의 다음 행동이 있습니다
화면 수보다 중요한 것은 연결입니다. 이번 예시는 신촌 지점의 A12 좌석을 오늘 19시부터 21시까지 이용하는 예약으로 맞췄습니다. 총액은 4,000원입니다.
화면 | 사용자가 확인할 내용 | 다음 행동 |
|---|---|---|
지점·날짜·시간 선택 | 서울 지점, 당일 시작 시각, 이용시간 | 좌석 조회 |
좌석 선택 | 콘센트와 구역 조건, 좌석 상태, 총액 | 예약 확인으로 이동 |
예약 확인·이메일 로그인 | 선택한 지점, 좌석, 시간, 금액 | 로그인하고 결제하기 |
카드 결제·승인 확인 | 임시 확보 시간과 승인 상태 | 결제 결과 확인 |
예약 상세·취소 | 예약번호, 취소 가능 시점, 환불 상태 | 취소 요청 또는 입실 안내 확인 |
QR 입실·이용중 | 입실 기록, 종료 시각, 오류 대응 | 이용 상태 확인 |
내 예약·이용완료 | 진행중 예약, 지난 예약, 미입실 구분 | 예약 상세 보기 |
정책은 버튼 옆에서도 같은 뜻이어야 합니다
좌석을 고르는 순간과 확보하는 순간
좌석 선택만으로 자리가 확보되지는 않습니다. 결제에 진입하면 5분 동안 임시 확보한다는 가정을 두었습니다. 그래서 좌석 화면에는 선택한 조건과 금액을 보여 주고, 결제 화면에는 남은 시간을 표시했습니다. 같은 상태를 서로 다른 말로 안내하지 않는 것이 먼저입니다.
좌석 조건에는 콘센트, 정숙구역, 오픈석이 등장합니다. 운영자가 확인한 시각도 함께 표시했습니다. 이는 설계에서 어떤 정보를 전달할지 정한 예시이며, 현장의 실제 소음 수준이나 좌석 상태를 검증했다는 의미는 아닙니다.
결제 버튼을 눌렀다고 예약이 끝나지는 않습니다
예약 확정 조건은 카드 승인 성공입니다. 결제 실패와 임시 확보 만료는 구분해서 안내하고, 승인 결과가 확인중일 때에는 다시 결제할 수 없다는 정책을 적었습니다. 버튼 하나로 끝내기 쉬운 구간이지만, 사용자가 가장 궁금한 것은 돈과 자리의 상태입니다.
현재 화면은 이 정책을 설명하는 설계 자료입니다. 실제 승인 조회, 중복 결제 방지, 동시에 같은 좌석을 예약하는 상황은 별도 구현과 테스트가 필요합니다. 문구가 있다고 동작까지 완성된 것은 아닙니다.
입실 뒤에도 같은 예약을 보고 있어야 합니다
예약 상세와 QR 입실, 내 예약 화면의 현재 예약번호를 240321-019로 통일했습니다. A12의 정숙구역·콘센트 조건, 19시부터 21시까지의 이용 시간도 같습니다.
QR 오류 안내에서는 운영자에게 도움을 요청하도록 했습니다. 수동 입실은 운영자가 예약번호, 계정, 유효시간을 확인한 뒤 기록하는 역할입니다. 사용자에게 운영자용 확정 버튼을 주지 않았습니다. 조기 퇴실해도 금액과 종료 시각을 유지한다는 가정도 입실 화면에 남겼습니다.
검수할 때는 세 가지를 나란히 봅니다
선택 정보: 지점과 좌석, 시작·종료 시각, 총액이 다음 화면에서도 유지되는지 확인합니다.
상태 표현: 선택, 임시 확보, 승인 확인중, 예약 확정, 이용완료가 섞여 있지 않은지 읽습니다.
예외 안내: 만석, 조회 실패, QR 오류, 환불 처리중에 사용자가 무엇을 해야 하는지 찾습니다.
이번 작업에서도 생성된 화면을 그대로 끝내지 않았습니다. 좌석 확보 안내와 예약 정보가 서로 어긋난 부분을 수정하고, 최종 7개 화면을 다시 확인했습니다. 화면설계의 검수 단위는 한 장이 아니라 하나의 예약입니다.
현재 결과물의 범위
확인할 수 있는 것: 핵심 7개 화면의 정보 배치, 버튼 문구, 예약 정책, 주요 상태와 오류 대응 안내입니다.
추가로 필요한 것: 실제 사용자 검증, 지점 제휴, 운영 정책 확정, 결제·예약·입실 기능 구현과 동작 테스트입니다. 월정액, 자유 이용권, 연장, 커뮤니티, 출입문 하드웨어 연동은 이번 범위에서 제외했습니다.
자주 묻는 질문
공개 화면에서 바로 예약할 수 있나요?
공개 링크는 화면설계 자료입니다. 실제 좌석 예약이나 입실 권한을 발급하지 않습니다. 화면에 표시된 잔여 좌석과 금액도 운영 데이터가 아닌 예시로 읽어 주세요.
취소와 미입실은 어떻게 정했나요?
시작 1시간 전까지 전액 취소하고 이후 일반 취소는 제한하는 가정입니다. 예약 종료 시에는 이용완료로 처리하며, 입실 기록이 없으면 미입실을 구분하도록 설계했습니다. 실제 운영에 적용하기 전에는 정책 검토와 사용자 안내를 확정해야 합니다.
앞 단계는 아이디어 기획과 예약 IA에서 읽을 수 있습니다.
이 글은 출시 성과 대신 기획이 화면으로 옮겨지는 과정을 남긴 기록입니다. 흐름을 더 살펴보려면 아이디어 인터뷰 소개와 인터뷰에서 화면으로 이어가는 방법을 읽어 보세요. 내 아이디어는 기획 인터뷰에서 정리하고, 막히는 부분은 상담으로 이어갈 수 있습니다. 아이디어 한 줄이면 시작됩니다.
