SYSTEM BLUEPRINT

욕실용품 자사몰
구매자와 운영자 화면 스토리보드

제품 1종의 구매 확신부터 다음 상품의 직접 등록까지, 두 사용자의 흐름을 화면으로 정리했습니다.

스토리보드란?

스토리보드는 쇼핑몰 화면을 실제 모습에 가깝게 미리 그려 보는 문서입니다. 구매자와 운영자로 나누어 첫 방문부터 주문, 상품 등록까지 순서대로 배치했습니다.

  1. 구매자가 메인 영상과 사용 방법을 보고 설치 조건을 확인한 뒤 결제하는 흐름
  2. 발주사 운영자가 주문을 처리하고 버전 2 상품과 쿠폰을 직접 관리하는 흐름

마지막까지 보시면 오픈 후 누가 무엇을 하게 되는지 한눈에 그려지실 것입니다.

구매자 시나리오

영상에서 결제까지 이어지는 구매 흐름

고관여 제품이라 구매 전에 확인할 것을 순서대로 보여 주고, 막히는 순간 채팅으로 바로 묻게 합니다.

1. 메인 영상

첫 진입에 제품이
쓰이는 모습 확인

2. 후기 확인

리뷰·인스타그램
슬라이드로 신뢰

3. 설치 조건

상세·사용 방법 영상으로
우리 집 적합 여부 확인

4. 채팅 문의

애매한 점은 우측 하단
채팅으로 바로 질문

5. 주문·결제

쿠폰 적용 후
PG 결제 완료

구매자 | 화면 01

메인 · 영상과 후기

simplebath.co.kr
SIMPLE BATH
브랜드
제품
사용 방법
설치 안내
후기
고객센터
발주사 제공 촬영 영상 자리 · main_v1.mp4
욕실 설치형 제품 · 버전 1
설치 전에 먼저 보고,
확인하고 고르세요
제품 자세히 보기
사용 방법 영상
0:23 / 1:02
REVIEW & INSTAGRAM
먼저 설치한 분들의 이야기
평균 4.8 · 리뷰 127
구매자 사진
김*연2일 전
설치 기사님 오시기 전에 영상 보고 벽 폭부터 재봤어요. 딱 맞았어요
4.9
인스타그램 게시물
@bath_daily어제
욕실이 확실히 넓어 보여요 ㅎㅎ 물때 청소도 편해요
구매자 사진
박*호9월 14일 (일)
처음엔 반신반의했는데 설치 20분이면 끝나네요. 재구매 의사 있습니다
4.7
인스타그램 게시물
@home_sol3일 전
타일 벽이라 걱정했는데 사용 방법 영상 보고 해결
사업자등록번호 123-45-67890 · 통신판매업신고 2026-서울성동-1234 · 고객센터 1588-1234 (평일 10:00~17:00)
설치 가능한 벽인지 물어보세요

[화면 개요 및 목적]

첫 진입 시 발주사가 촬영한 영상이 화면 상단을 채우고, 상단 메뉴 바와 우측 하단 채팅 버튼이 항상 보입니다. 아래에는 리뷰와 인스타그램 게시물이 슬라이드로 넘어갑니다.

[핵심 기능 로직]

영상 위 버튼 두 개로 상품 상세와 사용 방법 영상에 바로 연결합니다. 리뷰 슬라이드는 관리자에서 고른 후기만 노출하고, 채팅 버튼은 사용 중인 상담 채널로 연결합니다.

  • 영상 첫 화면
    솔루션 동영상 섹션 + 맞춤 수정
  • 후기 슬라이드
    리뷰 게시판 · 인스타그램 연동
  • 바로 문의
    카카오톡 채널 채팅 버튼
구매자 | 화면 02

상품 상세 · 사용 방법

simplebath.co.kr/product/v1
SIMPLE BATH
브랜드
제품
사용 방법
설치 안내
후기
고객센터
홈 / 제품 / 욕실 설치형 제품 V1 제안용 예시 데이터
제품 대표 사진
SB-V1-001
+5장
사용 방법 영상 발주사 촬영본 4편
STEP 01 · 설치 전 벽면 폭 재기
0:48 · 시청 완료
STEP 02 · 고정 브래킷 위치 표시
1:15 · 지금 보는 중
STEP 03 · 본체 걸고 수평 맞추기
2:06 · 다음 영상
STEP 04 · 물기 제거와 일상 관리
0:57 · 다음 영상
BEST · 버전 1
욕실 설치형 제품 V1
4.8 (127) · 설치 문의 답변 평균 12분
189,000원무료배송 · 제주/도서 3,000원
주문 전 설치 조건 확인
설치 벽면 폭 600mm 이상확인함
타일·방수 벽면확인함
콘센트 거리 1m 이내영상 STEP 02 보기
수량1
장바구니
바로 구매
상세 정보사용 방법설치 안내리뷰 127배송·A/S

[화면 개요 및 목적]

제품 1종을 깊게 보여 주는 집중형 상세 화면입니다. 구매 버튼 바로 위에 설치 조건 체크리스트를 두어, 결제 전에 우리 집에 맞는지 먼저 확인하게 합니다.

[핵심 기능 로직]

확인하지 않은 조건 옆에는 해당 사용 방법 영상(STEP)으로 가는 링크를 붙입니다. 발주사 촬영 영상 4편을 순서대로 배치해 시청 상태를 보여 줍니다.

  • 설치 전 확인
    상품 옵션 · 체크리스트 영역
  • 사용 방법 안내
    발주사 촬영본 영상 목록
구매자 | 화면 03

주문·결제

simplebath.co.kr/order
SIMPLE BATH
브랜드
제품
사용 방법
설치 안내
후기
고객센터
주문·결제
장바구니 · 주문서 작성 · 결제 완료
배송지변경
김민준 · 010-****-5678
서울 성동구 왕십리로 83-21, 3층 · 설치 희망일 11월 7일 (금)
쿠폰
첫 구매 10% 쿠폰-18,900원
설치 후기 작성 쿠폰후기 작성 후 사용
결제 수단
신용·체크카드
간편결제
무통장 입금
휴대폰 결제
PG 결제창은 PC·모바일에서 같은 순서로 열립니다
배송·설치 안내
설치 조건 체크3개 모두 확인
출고 예정결제 후 1~2일
설치가 걱정되면채팅으로 사진 보내기
주문 상품
욕실 설치형 제품 V1
설치 조건 3/3 확인 · 수량 1
상품 금액189,000원
쿠폰 할인-18,900원
배송비무료
최종 결제170,100원
주문 내용과 설치 조건을 확인했습니다
170,100원 결제하기

[화면 개요 및 목적]

한 화면에 배송지, 쿠폰, 결제 수단과 최종 금액을 모두 보여 줍니다. 모바일에서는 같은 순서로 세로로 쌓입니다. 결제 버튼에 최종 금액을 함께 적어 마지막 확인을 돕습니다.

[핵심 기능 로직]

쇼핑몰 솔루션의 기본 주문서와 PG 결제창을 그대로 사용합니다. 쿠폰은 조건을 만족할 때만 선택되고, 아닌 쿠폰은 흐리게 이유를 보여 줍니다.

  • 검증된 결제
    솔루션 기본 PG 연동
  • 쿠폰 자동 계산
    솔루션 쿠폰 기능
운영자 시나리오

개발자 없이 이어가는 운영 흐름

오픈 후 주문 처리와 버전 2 상품 등록을 발주사가 직접 하도록, 관리 화면과 매뉴얼을 같은 순서로 만듭니다.

1. 주문 확인

오늘 들어온 주문과
취소 요청 확인

2. 배송 처리

송장 엑셀로
배송 상태 변경

3. 새 상품 등록

V1 양식을 불러와
V2 정보만 바꾸기

4. 메인 관리

영상·후기·인스타그램
노출 순서 변경

5. 쿠폰 켜기

조건이 정해지면
스위치로 발급 시작

운영자 | 화면 01

버전 2 상품 등록

admin.simplebath.co.kr/products/new
SIMPLE BATH 관리자
대시보드
상품 관리
주문 관리
쿠폰
메인·후기 관리
설정
운영 계정 · 발주사 명의
상품 관리 / 새 상품
버전 2 상품 등록
V1 양식 불러옴
저장 후 미리보기
상품명 *
욕실 설치형 제품 V2
판매가 *
219,000원
재고 *
1,240
설치 조건 (상세 체크리스트로 노출) *
벽면 폭 650mm 이상 · 타일/방수 벽면 · 콘센트 1m 이내
V1과 같은 항목 순서로 상세 페이지에 자동 표시됩니다
상품 코드
SB-V2-001
이미지·영상
대표sb_v2_main.jpg
상세 1sb_v2_detail1.jpg
사용 영상how_to_v2.mp4
설치 도면이미지 추가
등록 체크
기본 정보완료
대표·상세 이미지2장
사용 방법 영상업로드 64%
배송·A/S 안내V1 문구 사용
공개 상태
숨김 (검수 중)판매 중품절
오픈 예정일 11월 3일 (월) 오전 10:00 자동 공개
운영 매뉴얼 연결
운영 매뉴얼 3장 「상품 추가하기」와 같은 순서입니다. 개발자 없이 약 15분이면 끝납니다.

[화면 개요 및 목적]

다음 상품을 발주사가 직접 올리는 화면입니다. 버전 1에서 쓴 양식을 불러와 이름, 가격, 설치 조건, 이미지·영상만 바꾸면 같은 모양의 상세 페이지가 만들어집니다.

[핵심 기능 로직]

오른쪽 등록 체크로 빠진 항목을 보여 주고, 공개 상태를 '숨김'으로 두고 검수한 뒤 예약 시간에 공개합니다. 운영 매뉴얼의 장 순서와 화면 순서를 같게 맞춥니다.

  • 혼자 하는 등록
    솔루션 상품 관리 + 등록 양식
  • 실수 없는 공개
    숨김·예약 공개 설정
  • 따라 하는 매뉴얼
    상품 등록 방법 운영 매뉴얼
운영자 | 화면 02

주문 관리

admin.simplebath.co.kr/orders
SIMPLE BATH 관리자
대시보드
상품 관리
주문 관리
쿠폰
메인·후기 관리
설정
운영 계정 · 발주사 명의
주문 관리
오늘 들어온 주문
신규 결제
7건
배송 준비
3건
취소·반품 요청
1건
이번 달 매출
4,862,700원
전체 24결제완료 7배송준비 3취소요청 1 송장 엑셀
주문번호주문자상품결제 금액상태주문 시각
20261103-0012김*준V1 × 1170,100원결제완료오후 2:30
20261103-0009이*영V1 × 2378,000원배송준비오전 11:12
20261102-0031박*호V1 × 1189,000원배송중어제
20261102-0027최*아V1 × 1170,100원취소요청어제
20261101-0018정*우V1 × 1189,000원배송완료11월 1일 (토)
취소요청 1건 — PG 결제 취소는 이 화면에서 버튼 하나로 처리하고 자동 환불됩니다.

[화면 개요 및 목적]

오늘 들어온 주문, 배송 준비, 취소 요청을 숫자로 먼저 보여 주고 아래 목록에서 상태별로 처리합니다.

[핵심 기능 로직]

결제 취소는 목록에서 바로 처리하면 PG 환불까지 이어집니다. 오픈 전 검수에서 실제 결제·취소를 한 번씩 해 보고 인계합니다.

  • 한 곳에서 주문 처리
    솔루션 주문 관리
  • 취소·환불 연동
    PG 결제 취소 연동
운영자 | 화면 03

쿠폰 · 메인 화면 관리

admin.simplebath.co.kr/coupons
SIMPLE BATH 관리자
대시보드
상품 관리
주문 관리
쿠폰
메인·후기 관리
설정
운영 계정 · 발주사 명의
쿠폰 · 메인 관리
쿠폰은 준비만, 공개는 나중에
할인 쿠폰
쿠폰 만들기
첫 구매 10% 쿠폰
회원가입 시 자동 발급 · 1회
준비됨 (비공개)
설치 후기 작성 쿠폰
사진 후기 등록 후 5,000원
준비됨 (비공개)
오픈 기념 15,000원
11월 3일 ~ 11월 16일 · 선착순 200명
조건 협의 중
스위치만 켜면 바로 발급됩니다. 대상·중복 사용 조건이 정해지면 상품 정보는 그대로 두고 켭니다.
메인 화면 구성
끌어서 순서 변경
메인 영상main_v1.mp4 · 1:02노출중
리뷰 슬라이드리뷰 12개 선택노출중
인스타그램@simplebath 최근 8개노출중
사용 방법 영상4편 · 상품 상세 연결노출중
채팅 버튼카카오톡 채널 연결연결 확인 필요
메인 영상 교체: 새 파일을 올리면
PC·모바일 화면에 함께 반영됩니다.
최근 변경 3분 전 · 운영자 김*아

[화면 개요 및 목적]

도입을 고민 중인 쿠폰은 미리 만들어 두고 꺼 둔 상태로 인계합니다. 옆에서는 메인 영상, 리뷰, 인스타그램, 채팅 버튼의 노출을 관리합니다.

[핵심 기능 로직]

쿠폰 대상과 중복 사용 조건이 정해지면 스위치만 켭니다. 쿠폰을 쓰지 않기로 해도 상품 정보는 바꿀 필요가 없습니다.

  • 나중에 켜는 쿠폰
    솔루션 기본 쿠폰 기능
  • 메인 직접 교체
    디자인 모드 섹션 관리
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]