Log in Consult
Menu

Blog

Notes on planning and screens.

Blog
화면설계

스터디카페 화면설계 — 찾기·고르기·결제·QR이 같은 말이에요

좌석 화면만 예쁘면 결제·입실·취소 문구가 갈라져요. 스터디카페 화면 일곱 장에서 빈자리·돈 낸 자리·들어와 쓰는 자리가 이어지는지 확인해요.

스터디카페 화면설계 — 찾기·고르기·결제·QR이 같은 말이에요

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

화면설계에서는 그 말이 버튼 옆에서도 같은지 봐요. 출시 전 와이어프레임이에요. 공개본은 스터디카페 화면설계예요.

스터디카페 예약 화면설계 공개 캡처
공개 산출물 캡처 — 화면설계

1/ 일곱 장이 한 줄기

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

화면Threads 뜻다음 행동
지점·날짜·시간찾기좌석 조회
좌석 선택고르기(빈자리)예약 확인
예약 확인·로그인가격·끝나는 시각 확인결제
카드 결제·승인돈 낸 자리상세
예약 상세·취소확정·되돌리기취소 또는 입실 안내
QR 입실·이용중들어와 쓰는 자리이용 상태
내 예약이력상세

좌석을 골랐다고 확보가 아니에요. 결제 화면에 남은 시간(임시 확보)을 보여 줘요. 승인·실패·확인중을 구분해 적어요. QR 오류면 운영자 도움 — 사용자에게 운영자 버튼을 주지 않아요.

2/ 화면에 남길 정보만

예약 전 카드에 콘센트·조용·빈 시간·가격·끝나는 시각이 보여야 해요. 월정액·연장·모임 탭은 안 그려요. 검수는 한 장이 아니라 하나의 예약 단위로 해요.

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

3/ 공개 화면을 참고로 쓰는 법

창업자·기획자는 이 일곱 장을 「예쁜 목업」이 아니라, Threads에서 말한 함정이 화면에서 막혔는지 보는 자료로 쓰면 돼요. 실제 예약·결제는 안 돼요. 예시 금액·잔여 좌석도 운영 데이터가 아니에요.

되는 것 vs 안 되는 것

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

자주 묻는 질문

여기서 바로 예약되나요?

아니에요. 화면설계 공개본이에요.

취소·미입실은요?

시작 1시간 전 전액 취소 가정, 입실 없으면 미입실로 나눠요. 운영 전 약관 확정이 필요해요.

앞 단계는 기획·IA예요. 아이디어 한 줄이면 기획 인터뷰, 같이 보면 상담. Threads 확정 톤을 화면으로 펼친 기록이에요. 아이디어 한 줄이면 시작돼요.

One line of an idea is enough to start

Try a planning interview without signing in, then continue in a consult if you get stuck