뷰티샵 예약 플랫폼 AI팩 디럭스
미용실·네일·왁싱·피부관리 매장을 찾아 예약하고, 매장은 예약·디자이너 일정·정산을 관리하는 예약 플랫폼 AI팩
- 메뉴
- 11
- 화면
- 49
- 요건
- 349
- 화면 이동
- 77
어떤 규모로 만드시나요?
전 등급에 디자인 규칙(색·글꼴 3종 · 화면 배치 2종)이 들어 있어요. 검수 시나리오와 만들어 둔 화면은 디럭스·프리미엄에만 있습니다. 등급을 고르면 아래 내용이 전부 그 기준으로 바뀝니다.
디럭스은 더 깊이 있는 화면을 만들어 줍니다
고쳐서 올린 그림이 아니라 AI팩을 넣고 그대로 뽑은 화면입니다. 전체 49개 중 주요 화면과 실패·예외 화면을 섞어 14장을 담았어요.
Claude Code(Opus 5 이상)로 만든 결과물입니다. 쓰시는 AI 도구에 따라 다르게 나올 수 있어요. 색·글꼴은 같이 드리는 디자인 프리셋과 레이아웃 프리셋을 골라 AI 도구에 넣어 보세요.
사이트 하나 만들 때 개발 단계에서 꼭 요구되는 내용입니다
그 기간을 확실히 줄여 드려요. 실무에서 처음부터 만들면 이만큼 걸립니다.
요건 정의
2주
기능 정의
2주
화면 목록
2주
유저 플로우
2주
화면설계서 100p
2~3개월
검수 시나리오
2주
＊ 서비스 기획 실무 기준
AI한테 시키면 되지 않냐고요? 됩니다. 다만 문서 하나하나를 따로 지시해야 하고, 기준이 될 샘플이 없으면 원하는 대로 나오지 않습니다.
이런 결과물이 들어 있어요
결과물은 구매하시는 등급에 따라 다르게 구성되어 있어요. 등급별 항목은 맨 아래 등급별 구성에서 확인해 주세요.
만든 뒤에 확인할 방법까지 함께 드립니다
한 사이트를 만들기 위해서는 복잡한 흐름과 기능들이 있어요. 스펙에서 작성되는 지시문은 3,000줄 ~ 5,000줄 이상입니다. AI가 스펙을 읽고 화면으로 옮기는 사이에 어긋남이 발생할 수 있어요.
그래서 ‘내 서비스 내가 확인할 수 있도록’ 화면목록을 작성하고 검수 시나리오를 준비했습니다.
📌 전문 에이전시에서는 웹사이트를 제작할 때 가장 먼저 하는 일이 화면목록(IA) 작성이고, 배포 전에는 빠짐없는 검수를 위해 검수(테스트) 시나리오를 작성합니다. 바이브코딩은 이 과정을 생략하고 있지요. 그래서 제작 후 검수가 어렵고, 체계적으로 진행할 수 없어 오히려 시간이 많이 걸려요.
화면목록에 접속하여 화면이 잘 구성됐는지 확인하고, 배포 전에는 검수 시나리오대로 테스트해 보세요. 어긋나는 부분, 오류가 발생하는 부분은 AI 도구에 ‘화면 ID, ~~ 고쳐줘.’ 라고 하면 AI가 쉽게 찾아 수정할 수 있어요.
| 화면ID | 화면명 | 기능 정의 | AI 생성 프롬프트 |
|---|---|---|---|
| RE3 | 예약 3단계 - 날짜·시간 선택 | 월 단위 캘린더와 예약 가능 날짜 표시 · 휴무일·마감일 비활성 처리 · 선택 날짜… | 예약 3단계 날짜·시간 선택 화면을 만들어줘. 진행 스텝 유지. 좌측(모바일은 상단)에 월 단위 캘린더 — 예약… |
| MG1 | 시술 메뉴 관리 | 카테고리 추가와 순서 변경 · 카테고리별 시술 목록 · 시술 추가·수정(이름·소요시… | 시술 메뉴 관리 화면을 만들어줘. 이 화면이 매장 운영의 핵심이야. 좌측에 카테고리 목록(헤어, 네일, 왁싱 등… |
| ST5 | 예약 접수 대기 | 접수 대기 예약 목록과 요청 시각 · 남은 응답 시간 표시 · 요청 시간대 예약 가… | 예약 접수 대기 화면을 만들어줘. 상단에 "접수 대기 3건"과 일괄 확정 버튼. 각 카드에 고객명, 요청 시술,… |
| HO1 | 홈 - 비로그인 | 상단 히어로(카피 + 지역·시술 통합 검색바) · 시술 카테고리 바로가기 8종(헤어… | 뷰티 예약 플랫폼의 비로그인 홈 화면을 만들어줘. 스크롤 순서대로 아래 섹션을 쌓아줘. 1) 상단 GNB(로고,… |
외 45개 화면 · 화면마다 프롬프트가 붙어 있습니다
| 요구사항ID | 업무 · 기능 | 구성 |
|---|---|---|
| 01-01-03 | 홈 - 비로그인 | 시술 카테고리 바로가기 8종(헤어컷 |
| 03-01-04 | 예약 1단계 - 시술 선택 | 선택 시술 합계 금액과 총 소요시간 자동 계산 |
| 05-04-01 | 리뷰 작성 - 기간 지남 | 작성 가능 기간이 지났다는 안내와 기한 표시 |
| 07-04-03 | 휴무·예약 정책 설정 | 예약 가능 시작 시점(며칠 전부터) |
업무 → 기능 → 구성 3단 · 종류(기능·콘텐츠·화면·정책)는 알아서 붙습니다
뷰티샵 예약 플랫폼
- ├ HO 홈화면 2
- ├ SE 매장 탐색화면 6
- ├ RE 예약하기화면 8
- ├ MY 내 예약화면 6
- ├ RV 리뷰화면 4
- ├ ST 예약 관리화면 6
- ├ MG 매장 운영화면 5
- ├ AC 내 정보화면 2
- ├ PT 매장 홈화면 3
- ├ SA 정산화면 2
- ├ AU 계정화면 5
화면 이동 77개 · draw.io에서 편집
### MG1 시술 메뉴 관리 · 역할: builder · 요건: 카테고리 추가와 순서 변경 · 카테고리별 시술 목록 · 시술 추가·수정(이름·소… · 프롬프트: 시술 메뉴 관리 화면을 만들어줘. 이 화면이 매장 운영의 핵심이야. 좌측에 카테고리 목록(헤어, 네일, 왁싱…
이 파일 하나를 AI에 넣고 “이대로 만들어줘” 하면 됩니다
| 테스트ID | 화면 | 화면구분 | 확인 항목 | 결과 |
|---|---|---|---|---|
| SCN-001 | 예약 3단계 - 날짜·시간 선택 | 기본 화면 | 월 단위 캘린더와 예약 가능 날짜 표시 | PASS·FAIL |
| SCN-002 | 시술 메뉴 관리 | 기본 화면 | 카테고리 추가와 순서 변경 | PASS·FAIL |
| SCN-003 | 예약 접수 대기 | 예외 화면 | 접수 대기 예약 목록과 요청 시각 | PASS·FAIL |
화면 하나당 시나리오 하나 · 확인 항목 373개 · 결과를 적어 개발자와 그대로 주고받습니다
Claude Code(Opus 5 이상)로 제작한 결과물입니다. 사용하시는 AI 도구에 따라 다른 결과물이 나올 수 있습니다.
뷰티샵 예약 플랫폼 — 전체 화면 목록
각 항목을 눌러 화면을 확인할 수 있어요
화면을 여러 번 나눠 만들면 AI가 매번 조금씩 다른 색과 간격을 씁니다. 디자인 규칙은 그 값을 고정해, 첫 화면부터 마지막 화면까지 같은 얼굴을 유지하게 합니다.
디자인 규칙에는 색·글꼴 규칙 3종과 화면 배치 규칙 2종이 들어 있어요. 완성된 HTML과 다른 스타일을 원하시면 AI 빌드 지시서 + 색·글꼴 규칙 1종 + 화면 배치 규칙 1종을 AI 코딩 도구에 넣어 만들어보세요.
색·글꼴 규칙 3종 — 어떤 느낌으로 보일지
01 코럴 선셋
네일·속눈썹·왁싱 등 캐주얼 뷰티, 20~30대 타깃 매장
제목입니다
서브 카피입니다
02 미니멀 모노
감각적인 편집숍형 살롱, 남성 전용 바버샵
제목입니다
서브 카피입니다
03 일렉트릭 바이올렛
부드러운 인상이 중요한 피부관리·에스테틱, 아이·산모 대상 케어
제목입니다
서브 카피입니다
화면 배치 규칙 2종 — 무엇을 어디에 놓을지
A 사진 중심형
결과물이 곧 상품. 사진을 먼저 보여주고 글은 나중에.
- 첫 화면
- 검색바 없이 사진 모자이크(큰 1장 + 작은 4장). 문구는 사진 아래에 겹치지 않게.
- 목록
- 3열(1440px에서 카드 453px). 큰 이미지 위에 제목·태그를 얹고 설명은 짧게. 1024px에서 2열, 720px 아래로는 1열.
- 내비
- 상단 가로 GNB + 그 아래 카테고리 줄(2단 헤더).
B 여백 중심형
덜 넣는다. 큰 사진 한 장과 넉넉한 빈 자리로 말한다.
- 첫 화면
- 가운데 정렬. 짧은 문구 한 줄 위에 여백을 크게 두고, 아래에 큰 사진 딱 한 장.
- 목록
- 1열(본문 폭 760px). 카드 테두리와 그림자를 쓰지 않고 여백으로만 나눈다. 한 화면에 4~6개까지만.
- 내비
- 상단 가로 GNB. 메뉴 글자를 작게 하고 자간을 넓힌다. 로고는 가운데.
지시서와 함께 넣으면 화면 49개가 고른 조합대로 나옵니다
한 줄 프롬프트로 만든 사이트, 완벽할까요?
우리는 화면별 프롬프트 49개, 기능 정의 349개, 화면 이동 흐름 77개를 근거로 AI에게 지시합니다. 무엇을 만들지가 이미 정해져 있으니, AI는 상상하지 않고 그대로 만들기만 하면 됩니다.
49
화면별 프롬프트
349
기능 정의
77
화면 이동 흐름도
장바구니 그 화면 있잖아요, 거기 문구 좀…
RE3 화면, 문구 바꿔주세요.
AI에게든 개발사든 고유 ID로 이야기하면 전달이 쉬워집니다.
개발에 꼭 필요한 부분까지 작업됩니다
개발사에 그대로 전달하셔도 됩니다
- 화면 레이아웃과 구성요소 — 목록·상세·폼·표·모달
- 화면 사이 이동 — 버튼을 누르면 설계한 화면으로
- 예외·상태 화면 — 빈 목록, 오류, 마감 등
- 디자인 규칙을 함께 넣으면 전 화면 스타일 통일
개발사에게
- · 01 메뉴구조
- · 02 화면목록
- · 03 기능정의서
- · 05 FLOW 흐름도
- · 완성화면 HTML
AI에게
- · 07 AI 빌드 지시서
- · 디자인 규칙
- · 완성화면 HTML
개발에서는 이런 추가 작업이 진행돼요
바깥 서비스를 부르는 기능 — 로그인·결제·지도·알림 등
데이터 저장 — 입력한 내용이 서버에 남는 것
권한과 보안 — 누가 무엇을 볼 수 있는지
배포와 도메인 연결
이런 분께 맞아요
미용실·네일샵 예약 서비스를 만들려는 분
지역 기반 예약 플랫폼을 준비하는 창업자
노쇼·당일 취소 정책까지 설계해야 하는 분
AI는 이런 부분을 놓칠 수 있어요
01
예약은 시술 소요시간과 디자이너 일정이 맞물려야 해서, 달력 하나로 끝나지 않는다
02
당일 취소·노쇼 수수료는 화면보다 규칙이 먼저 정해져야 한다
03
같은 시간대를 두 사람이 동시에 누르는 상황을 설계에서 빼먹기 쉽다
셋 다 만들다가 발견하면 구조를 갈아엎게 되는 것들입니다.
편한 건 좋지만, 부족한 건 싫잖아요.
그래서 이런 부분을 먼저 챙겨둔 AI팩입니다.
등급별로 이렇게 들어 있어요
| 포함 내용 | 스탠다드 | 플러스 | 디럭스 | 프리미엄 |
|---|---|---|---|---|
| 01 메뉴구조메뉴-화면 트리 · 조직도 pptx | ✓ | ✓ | ✓ | ✓ |
| 02 화면 목록화면ID · 화면별 AI 프롬프트 | 49개 | 136개 | 49개 | 136개 |
| 03 기능정의서요건 | 349개 | 774개 | 349개 | 774개 |
| 04 개발 일정표화면마다 며칠 걸리는지 | ✓ | ✓ | ✓ | ✓ |
| 05 FLOW 흐름도html · drawio | ✓ | ✓ | ✓ | ✓ |
| 07 AI 빌드 지시서넣고 한 마디면 끝 | ✓ | ✓ | ✓ | ✓ |
| 색·글꼴 규칙 3종코럴 선셋 · 미니멀 모노 · 일렉트릭 바이올렛 | ✓ | ✓ | ✓ | ✓ |
| 화면 배치 규칙 2종사진 중심형 · 여백 중심형 | ✓ | ✓ | ✓ | ✓ |
| 08 검수 시나리오오픈 전 점검표 | — | — | 49개 | 136개 |
| 완성 화면HTML · 다시 찍어내는 생성기 | — | — | 49개 | 136개 |
자주 묻는 질문
Q. 어떤 파일로 받나요?
엑셀(.xlsx), 파워포인트(.pptx), 마크다운(.md) 파일을 ZIP 한 벌로 받으시게 됩니다. 별도 프로그램 없이 바로 열어보실 수 있어요.
Q. 구매한 뒤 제 마음대로 고쳐 써도 되나요?
네. 결과물에 대한 권리는 구매자에게 있고, 상업적 목적으로도 자유롭게 쓰실 수 있습니다.
Q. Cursor나 Claude Code에 바로 쓸 수 있나요?
화면마다 생성 프롬프트가 붙어 있어서 그대로 붙여넣으시면 됩니다. AI 빌드 지시서는 프로젝트 전체를 한 번에 넘기는 용도예요.
Q. 등급은 어떻게 고르나요?
두 가지만 정하시면 됩니다. 첫째, 설계를 어디까지 펼칠지 — 핵심 화면만 빠르게 보려면 기본 설계(스탠다드·디럭스), 화면 안의 탭과 예외 화면까지 촘촘히 필요하면 상세 설계(플러스·프리미엄)입니다. 둘째, 만들어 둔 화면이 필요한지 — 필요하시면 디럭스나 프리미엄을 고르세요. 그 설계로 이미 만든 화면(HTML)과 오픈 전 점검용 검수 시나리오가 함께 들어갑니다. 만들어 둔 화면이 없는 업종에는 디럭스·프리미엄이 나타나지 않습니다.
Q. 디자인 시안도 들어 있나요?
AI팩은 기획 결과물에 가까운 문서입니다. 색·글꼴 규칙은 색상·글꼴과 버튼·카드 모양을, 화면 배치 규칙은 무엇을 어디에 놓을지를 정리한 문서이며 시안 이미지가 아닙니다. 다만 이 파일들을 AI 빌드 지시서와 함께 AI 도구에 넣으면 그 스타일의 화면이 나오고, 디럭스·프리미엄에 들어 있는 HTML은 디자인이 입혀진 화면이라 미리 보기로 열어보실 수 있어요. (쓰시는 AI 도구에 따라 다른 결과물이 나올 수 있습니다.)
Q. AI로 만들면 바로 쓸 수 있는 사이트가 되나요?
화면까지는 됩니다. 눌러서 돌아다닐 수 있는 상태로 나와요. 다만 로그인 버튼을 눌러도 실제로 로그인이 되지는 않습니다. 로그인·결제·지도·알림처럼 바깥 서비스를 불러야 하는 기능은 개발자가 붙여야 해요. 위의 '어디까지 만들어지나요?'에 업종별로 정리해 두었습니다.
Q. 들어 있는 완성 화면 말고 다른 스타일로 만들 수 있나요?
네. 완성 화면은 색·글꼴 규칙 3종과 화면 배치 규칙 2종 중 한 조합으로 미리 만들어 둔 것입니다(Claude Code Opus 5 이상으로 제작). 바로 열어보고 흐름을 확인하시라고 넣었어요. 다른 스타일을 원하시면 AI 빌드 지시서와 원하는 색·글꼴 규칙 1종, 화면 배치 규칙 1종을 함께 AI 코딩 도구에 넣고 만들어 달라고 하시면 됩니다. 화면 구성과 이동 흐름은 그대로 두고 모습만 바뀝니다. 조합은 모두 6가지예요.
Q. 색·글꼴 규칙과 화면 배치 규칙은 뭐가 다른가요?
색·글꼴 규칙은 색·글꼴·모서리처럼 '어떤 느낌인지'를, 화면 배치 규칙은 첫 화면과 목록·메뉴를 '어떻게 배치할지'를 정합니다. 둘을 따로 드리는 이유는 짝을 묶어 두면 고를 수 있는 게 3가지뿐이기 때문이에요. 따로 두면 3 × 2 = 6가지가 됩니다.
Q. 만드는 데 얼마나 걸리나요?
저희가 재봤을 때 Claude Code(Opus 5, 추론 높음)로 144화면이 약 40분 걸렸습니다. 쓰시는 도구와 모델, 화면 수에 따라 달라져요. 가벼운 모델을 쓰면 더 빠르지만 결과물의 꼼꼼함은 줄어듭니다.
구매 전 확인해 주세요
- 기획 문서 한 벌(AI팩)입니다. 색과 이미지가 입혀진 완성 디자인, 그리고 개발 소스코드는 들어 있지 않습니다.
- AI로 만들면 화면까지 나옵니다. 로그인·결제·지도·알림 등 외부 연동은 개발이 필요합니다.
- 색·글꼴 규칙 문서는 색상·글꼴·모서리와 버튼·카드 모양을, 화면 배치 규칙 문서는 무엇을 어디에 놓을지를 정리한 문서입니다.
- 완성 화면(디럭스·프리미엄)은 이 규칙 조합 중 하나로 미리 만든 예시입니다. 다른 조합은 AI 코딩 도구로 직접 만드시면 됩니다.
- AI로 생성한 초안을 다듬은 자료로, 실제 서비스에 적용하기 전 검토가 필요합니다.
- 디지털 콘텐츠 특성상 파일 전달 후에는 환불이 제한됩니다.
내 서비스에 맞게 직접 만들 수도 있어요
컨셉과 메뉴만 입력하면 화면 목록부터 화면별 프롬프트까지, 빠지는 화면 없이 설계해드려요.
무료로 시작하기