SYSTEM BLUEPRINT

연습실 예약 홈페이지 리뉴얼
예약자·운영자 화면 스토리보드

지점 선택부터 결제·출입 안내, 운영자의 유입 리포트와 이관 검증까지 실제 화면에 가깝게 그렸습니다.

스토리보드란?

스토리보드는 서비스 화면을 실제 모습에 가깝게 미리 그려 보는 문서입니다. 예약자와 운영자 두 유형으로 나눠, 들어오는 순간부터 일이 끝나는 순간까지 순서대로 배치했습니다.

  1. 예약자가 광고로 들어와 지점·시간을 고르고 결제 후 출입 안내를 받는 흐름
  2. 운영자가 유입 경로별 예약을 내려받고 안내문과 데이터 이관을 관리하는 흐름

마지막까지 보시면 예약 한 건이 광고부터 출입 안내까지 어떻게 이어지는지 그려지실 것입니다.

예약자 시나리오

예약자 여정

광고를 보고 들어와 시간을 고르고, 결제 직후 출입 안내를 받기까지의 흐름입니다.

1. 유입

광고·검색으로 방문
유입 정보 30일 보관

2. 지점 선택

7개 지점 카드
오늘 잔여 시간 확인

3. 시간 선택

연속 슬롯 다중 선택
동시 예약 자동 차단

4. 결제

초과 인원 요금 자동 계산
카드·무통장

5. 출입 안내

알림톡 발송
실패 시 문자 자동 발송

예약자 | 화면 01

시간 슬롯 선택 · 요금 계산

예약.연습실.kr/branch/hongdae2/room-b
연습실
지점 안내
실시간 예약
이용 요금
예약 확인
로그인비회원 예약조회
홍대 2호점 · 연습실 선택 완료
B룸 · 댄스 연습실 (거울·방음)
기본 4인 · 최대 10인 · 서울 마포구 와우산로 21길 19-3, B1
2026년 9월
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
9월 18일 (금) 잔여 5시간
오늘 이전 날짜는 선택할 수 없어요
시간 선택 연속 여러 칸 선택 가능 다른 고객 결제 중 · 4분 32초
10:00마감
11:00마감
12:0012,000원
13:00선택됨
14:00선택됨
15:00선택됨
16:00 결제 대기 중
17:0012,000원
18:00마감
19:0012,000원
20:0012,000원
21:00마감
동시에 같은 시간을 누르면 먼저 결제를 시작한 1명만 예약됩니다
예약 요약
이용 시간13:00 ~ 16:00 (3시간)
인원6명
기본 요금 3시간36,000원
초과 2명 × 3시간 × 3,000원18,000원
결제 금액54,000원
예약자 정보 입력

[화면 개요 및 목적]

룸을 고른 뒤 날짜와 연속된 시간 칸을 한 번에 선택하고, 인원을 넣으면 결제 금액이 바로 계산되는 대표 화면입니다. 제안서의 '겹치지 않는 예약'을 보여줍니다.

[핵심 기능 로직]

결제를 시작한 순간 해당 시간 칸을 몇 분간 잡아 두고, 다른 고객에게는 '결제 대기 중'으로 보입니다. DB에서도 같은 룸·날짜·시간 조합은 한 건만 저장됩니다. 초과 인원 × 시간 × 단가를 자동 합산합니다. 데모 Step 2에서 직접 눌러볼 수 있습니다.

  • 같은 시간 이중 예약 0건
    MySQL 유니크 제약 + 트랜잭션
  • 캘린더 2.5초 안에 표시
    React 서버 렌더링(SSR)
예약자 | 화면 02

지점 목록 (모바일)

연습실
서울 7개 지점 · 24시간 무인 운영
원하는 시간만큼
바로 예약하세요
유입 기록됨 · instagram / cpc / 9월_홍대 · 30일 보관
전체 7마포 3광진 2강남 2
원본 사진
홍대 2호점운영중
서울 마포구 와우산로룸 5개 · 오늘 잔여 14시간
원본 사진
합정점운영중
서울 마포구 양화로룸 3개 · 오늘 잔여 6시간
원본 사진
신촌점마감
서울 서대문구 연세로룸 4개 · 오늘 마감
원본 사진
건대점운영중
서울 광진구 아차산로룸 6개 · 오늘 잔여 21시간
지점
예약
알림
마이페이지

[화면 개요 및 목적]

PC와 같은 소스로 만든 모바일 첫 화면입니다. 7개 지점을 카드로 보여주고, 오늘 남은 시간을 함께 표시해 바로 예약으로 이어집니다.

[핵심 기능 로직]

광고 링크의 utm·NaPm 값을 첫 방문 때 서버와 쿠키에 30일 보관합니다. 결제 페이지를 오가도 사라지지 않아 예약 저장 시 함께 기록됩니다. 기존 /m/ 주소는 이 화면으로 301 연결됩니다. 데모 Step 1에서 확인합니다.

  • 광고 성과 끊김 없이 기록
    1st-party 쿠키 + 서버 저장
  • 기존 검색 유입 유지
    URL 301 매핑표
예약자 | 화면 03

예약 완료 · 안내 발송

예약이 확정됐어요
출입 안내를 휴대폰으로 보냈어요
예약번호R260918-04172
지점·룸홍대 2호점 B룸
이용일시9월 18일 (금) 13:00~16:00
결제금액54,000원
안내 발송 기록
카카오 알림톡13:02:05
카카오톡 미사용 번호 · 발송 실패
문자(SMS) 자동 재발송13:02:11
010-****-5821 수신 완료
[홍대 2호점] 출입 안내
건물 뒤편 출입구 → B1 · 도어락 비밀번호 예약 10분 전 문자로 전송
홈으로
예약 내역 보기

[화면 개요 및 목적]

결제 직후 예약번호·금액을 보여주고, 출입 안내가 어떤 경로로 도착했는지까지 기록하는 완료 화면입니다.

[핵심 기능 로직]

알림톡이 실패하면 몇 초 안에 같은 문안을 문자로 다시 보냅니다. 예약번호와 결제금액은 GTM·네이버 전환추적으로 전달됩니다. 비회원도 예약번호로 조회·취소할 수 있습니다. 데모 Step 3에서 확인합니다.

  • 출입 안내 누락 방지
    비즈뿌리오 알림톡 → SMS 폴백
  • 광고 전환 측정
    GTM dataLayer · 네이버 전환 스크립트
운영자 시나리오

운영자 여정

개발자에게 요청하지 않고 리포트·안내문·지점을 직접 관리하고, 전환 날 이관 결과를 확인하는 흐름입니다.

1. 예약 확인

예약 목록·상태 관리
취소·부분 환불

2. 유입 리포트

첫·마지막 유입 기준 선택
채널별 예약 수

3. CSV 추출

기간·지점 조건 지정
직접 다운로드

4. 안내문 관리

지점 그룹 일괄 수정
치환자 1종 통일

5. 이관 검증

건수·금액·지점 분포
일치 시에만 전환

운영자 | 화면 01

유입 경로 리포트 · CSV

admin.연습실.kr/report/attribution
관리자
예약 관리
유입 리포트
안내문 템플릿
지점·룸
이관 검증
환경 설정
예약 한 건마다 들어온 경로가 붙어 있어요
유입 경로별 예약
첫 유입 기준마지막 유입 기준
2026.09.01 ~ 2026.09.18지점 전체 (7)상태: 결제완료·부분환불CSV 다운로드 3,099건
기간 예약
3,099건
결제 합계
1억 2,471만원
유입 기록률
100%
채널별 예약 수
naver / search
1,284
instagram / cpc
896
direct
642
kakao / message
277
예약번호지점첫 유입마지막 유입금액상태
R260918-04172홍대 2호점instagram / cpcnaver / search54,000원결제완료
R260918-04169건대점naver / NaPmnaver / NaPm36,000원결제완료
R260917-04155합정점directgoogle / cpc24,000원부분환불
R260917-04151신촌점kakao / messagedirect42,000원취소

[화면 개요 및 목적]

예약 한 건마다 붙은 유입 경로를 기간·지점 조건으로 보고, 그대로 CSV로 내려받는 화면입니다. 수작업 추출을 없앱니다.

[핵심 기능 로직]

첫 유입과 마지막 유입을 둘 다 저장해 두고, 상단 토글로 보는 기준만 바꿉니다. 기준을 나중에 정해도 재개발이 필요 없습니다. 같은 데이터를 외부 분석 도구용 조회 전용 API로도 제공합니다. 데모 Step 4에서 확인합니다.

  • 귀속 기준 나중에 결정
    first/last touch 동시 저장
  • 분석 도구 자동 수집
    조회 전용 REST API
운영자 | 화면 02

안내문 템플릿 · 지점 그룹

admin.연습실.kr/message/templates
관리자
예약 관리
유입 리포트
안내문 템플릿
지점·룸
이관 검증
환경 설정
공통 템플릿 위에 지점별 문안만 덮어써요
출입 안내문 · 지점 그룹 편집
지점 그룹
마포 공용 건물
홍대 2호점 · 합정점 · 같은 출입구
광진 단독
건대점 · 구의점
강남 단독
강남점 · 신촌점
그룹 추가
알림톡문자(SMS)치환자: {{예약자명}}
[{{지점명}}] 예약이 확정되었습니다.
{{예약자명}}님, {{이용일시}} 이용 예정입니다.
건물 뒤편 출입구로 들어와 B1로 내려오세요.
도어락 비밀번호는 이용 10분 전 발송됩니다.
문의 02-332-4178
노란 문단은 그룹 공통 · 2개 지점 동시 반영
테스트 발송그룹 전체 저장
최근 발송 결과
김*준 · 홍대 2호점
3분 전 · 알림톡
성공
이*연 · 합정점
12분 전 · 알림톡→SMS
재발송
박*호 · 홍대 2호점
28분 전 · 알림톡
성공
최*아 · 합정점
41분 전 · SMS
실패
오늘 발송 418건 · 실패 1건

[화면 개요 및 목적]

같은 건물을 쓰는 지점을 묶어 출입 안내문을 한 번에 고치고, 최근 발송 결과를 옆에서 확인하는 화면입니다.

[핵심 기능 로직]

공통 템플릿 위에 지점 문안만 덮어쓰는 2단 구조이고, 치환자는 {{이름}} 한 가지 문법만 씁니다. 그룹 저장 시 묶인 지점 전부에 반영됩니다. 신규 지점·룸·요금·운영시간도 코드 수정 없이 관리자에서 추가합니다.

  • 안내문 한 번에 수정
    공통·지점 2단 템플릿
  • 신규 지점 직접 추가
    관리자 설정 기반 지점·룸 모델
운영자 | 화면 03

데이터 이관 검증

admin.연습실.kr/migration/verify
관리자
예약 관리
유입 리포트
안내문 템플릿
지점·룸
이관 검증
환경 설정
점검창 09.27 (일) 02:00~05:00 · 현재 03:14
데이터 이관 검증 리포트
검증 리포트 내려받기
리허설 1차
리허설 2차
점검창 변경분 적재
3축 검증 통과
새 사이트 전환
검증 항목기준기존 사이트새 사이트결과
예약 건수57,225 + 5,07962,30462,304일치
결제 금액 합계구 DB 합산21억 4,873만원21억 4,873만원일치
취소·부분환불 합계상태별1억 902만원1억 902만원일치
지점별 분포7개 지점7/76/7불일치
지점별 분포 차이
건대점: 기존 9,412건 / 새 사이트 9,405건 (7건 차이)
원인 후보: 2026년 예약 중 접수일 비어 결제일로 채운 행 7건
추정값 표시 received_at_source = payment
전환 판단
3축이 모두 일치할 때만 전환합니다. 05:00까지 해결되지 않으면 기존 사이트로 되돌립니다.
기존 사이트 유지전환 (검증 대기)

[화면 개요 및 목적]

전환 날 새벽 점검창에서 기존 사이트와 새 사이트의 데이터를 3축으로 대조하고, 전환할지 되돌릴지 판단하는 화면입니다.

[핵심 기능 로직]

예약 원장 57,225건과 2026년 예약 5,079건을 합친 뒤 건수·금액 합계·지점별 분포를 비교합니다. 취소·부분환불 합계도 따로 봅니다. 하나라도 어긋나면 전환 버튼이 잠기고, 05시까지 해결되지 않으면 기존 사이트를 유지합니다.

  • 전환 실패 시 즉시 복귀
    리허설 2회 + 롤백 런북
  • 개인정보 안전 이관
    암호화 저장 + 접근 로그
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]