스터디카페 화면설계 — 찾기·고르기·결제·QR 일곱 장

스터디카페 예약 앱 기획, 좌석 화면부터 예쁘게 그리면 나중에 막혀요. 결제했는지·들어왔는지·취소했는지가 서로 다른 말이 되거든요.

이 글만 대표 일곱 장과 줄기(찾기 → 고르기 → 결제 → QR)를 자세히 봐요. 출시 전 와이어프레임이에요. 공개본은 스터디카페 화면설계예요.

일곱 장이 한 줄기

예시는 「오늘 저녁 두 시간, 한 좌석, 한 금액」으로 맞춰 봤어요. 장수보다 연결이에요.

장마다 놓치기 쉬운 문구

1~2. 찾기·고르기

좌석을 골랐다고 확보가 아니에요. 「선택됨」과 「결제됨」을 같은 말로 쓰지 않아요. 만석·이미 잡힌 좌석은 「선택 불가」로 바로 돌려보내요.

3~4. 확인·결제

결제 화면에만 남은 시간(임시 확보, 예: 5분)을 보여 줘요. 승인·실패·확인중을 구분해 적어요. 버튼 두 번이 예약 두 건이 되면 안 돼요.

5~6. 상세·QR

취소는 확정을 되돌리는 판단이고, 입실은 확정 뒤 사용 기록이에요. QR 오류면 운영자 도움 — 이용자 화면에 운영자용 버튼을 그대로 두지 않아요.

7. 내 예약

예정·이용중·취소·미입실이 한 목록에 섞여도, 카드마다 상태가 한눈에 달라야 해요.

검수는 「한 예약」 단위로

예약 전 카드에 콘센트·조용·빈 시간·가격·끝나는 시각이 보여야 해요. 월정액·연장·모임 탭은 안 그려요.

1. 지점·좌석·시간·금액이 다음 장에도 같나요?
2. 빈자리 / 돈 낸 자리 / 들어와 쓰는 자리 말이 섞여 있지 않나요?
3. 만석·결제 실패·QR 오류에 「다음에 뭐 하면 되나요」가 있나요?

되는 것 vs 안 되는 것

• 되는 것 — 일곱 장을 찾기→고르기→결제→QR로 잇고 같은 예약 말로 검수하기
• 안 되는 것 — 좌석 UI만 예쁘게 늘리고 결제·입실·취소 문구를 제각각 쓰기

자주 묻는 질문

여기서 바로 예약되나요?

아니에요. 화면설계 공개본이에요. 예시 금액·잔여 좌석도 운영 데이터가 아니에요.

기획·IA는요?

범위·인터뷰는 기획, 탭·권한·상태 경계는 IA예요.

아이디어 한 줄이면 기획 인터뷰, 같이 보면 상담. 찾기→고르기→결제→QR이 같은 말로 이어지는지 화면으로 본 기록이에요. 아이디어 한 줄이면 시작돼요.