장비 렌탈·대여 예약 플랫폼 AI팩 프리미엄
캠핑·카메라 장비를 날짜를 잡아 빌려주고 돌려받는 렌탈 예약 플랫폼 AI팩. 날짜별 재고 달력부터 반납·연체·보증금 정산까지
- 메뉴
- 8
- 화면
- 161
- 요건
- 933
- 화면 이동
- 102
어떤 규모로 만드시나요?
전 등급에 디자인 규칙(색·글꼴 3종 · 화면 배치 2종)이 들어 있어요. 검수 시나리오와 만들어 둔 화면은 디럭스·프리미엄에만 있습니다. 등급을 고르면 아래 내용이 전부 그 기준으로 바뀝니다.
프리미엄은 더 깊이 있는 화면을 만들어 줍니다
고쳐서 올린 그림이 아니라 AI팩을 넣고 그대로 뽑은 화면입니다. 전체 161개 중 주요 화면과 실패·예외 화면을 섞어 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 생성 프롬프트 |
|---|---|---|---|
| PD3 | 날짜별 가용 재고 달력 | 월 단위 달력에 날짜마다 남은 수량 표시 · 다 나간 날은 흐리게 하고 못 고르게 … | 이 서비스에서 가장 중요한 화면이다. 날짜별로 재고가 남았는지 보여주는 달력을 만들어줘. 일반 쇼핑몰과 다른 점… |
| RT5 | 연체 안내 | 반납 기한이 지났다는 안내와 얼마나 지났는지 · 지금까지 쌓인 연체료 · 연체료 계… | 반납이 늦었을 때 보는 화면을 만들어줘. 1) 상단에 붉은 띠 — "반납이 1일 4시간 늦었어요" 2) 지금까지… |
| ST2 | 정산 내역 - 연체·파손 청구 | 점검 결과 요약 · 청구 항목별 표(연체료·파손 배상·구성품 부족·세척비) · 항목… | 점검이 끝나고 얼마를 정산하는지 보여주는 화면을 만들어줘. 1) 상단에 점검 결과 한 줄 — "폴대 1개 파손과… |
| HO1 | 홈 | 빌릴 기간을 먼저 고르는 검색바가 얹힌 히어로 배너 · 카테고리 바로가기 8종(텐트… | 장비 렌탈 예약 사이트의 홈 화면을 만들어줘. 스크롤 순서대로 아래 섹션을 위에서 아래로 쌓아줘. 1) 상단 G… |
외 157개 화면 · 화면마다 프롬프트가 붙어 있습니다
| 요구사항ID | 업무 · 기능 | 구성 |
|---|---|---|
| 01-01-01 | 홈 | 빌릴 기간을 먼저 고르는 검색바가 얹힌 히어로 배너 |
| 03-02-03 | 기간 한꺼번에 바꾸기 | 담은 장비마다 새 기간에 되는지 하나씩 확인 표시 |
| 05-05-01 | 연체 안내 | 반납 기한이 지났다는 안내와 얼마나 지났는지 |
| 07-01-14 | 내 대여 내역 | 이용 중인 것은 남은 시간 표시 |
업무 → 기능 → 구성 3단 · 종류(기능·콘텐츠·화면·정책)는 알아서 붙습니다
장비 렌탈·대여 예약 플랫폼
- ├ HO 홈화면 5
- ├ PD 장비화면 6
- ├ CT 장바구니화면 3
- ├ BK 예약·결제화면 6
- ├ RT 수령·반납화면 6
- ├ ST 정산화면 4
- ├ MY 마이페이지화면 4
- ├ CS 고객센터화면 3
화면 이동 102개 · draw.io에서 편집
### RT5 연체 안내 · 역할: error · 요건: 반납 기한이 지났다는 안내와 얼마나 지났는지 · 지금까지 쌓인 연체료 · 연체료… · 프롬프트: 반납이 늦었을 때 보는 화면을 만들어줘. 1) 상단에 붉은 띠 — "반납이 1일 4시간 늦었어요" 2) 지금…
이 파일 하나를 AI에 넣고 “이대로 만들어줘” 하면 됩니다
| 테스트ID | 화면 | 화면구분 | 확인 항목 | 결과 |
|---|---|---|---|---|
| SCN-001 | 날짜별 가용 재고 달력 | 기본 화면 | 월 단위 달력에 날짜마다 남은 수량 표시 | PASS·FAIL |
| SCN-002 | 연체 안내 | 예외 화면 | 반납 기한이 지났다는 안내와 얼마나 지났는지 | PASS·FAIL |
| SCN-003 | 정산 내역 - 연체·파손 청구 | 기본 화면 | 점검 결과 요약 | PASS·FAIL |
화면 하나당 시나리오 하나 · 확인 항목 957개 · 결과를 적어 개발자와 그대로 주고받습니다
Claude Code(Opus 5 이상)로 제작한 결과물입니다. 사용하시는 AI 도구에 따라 다른 결과물이 나올 수 있습니다.
장비 렌탈·대여 예약 플랫폼 — 전체 화면 목록
각 항목을 눌러 화면을 확인할 수 있어요
화면을 여러 번 나눠 만들면 AI가 매번 조금씩 다른 색과 간격을 씁니다. 디자인 규칙은 그 값을 고정해, 첫 화면부터 마지막 화면까지 같은 얼굴을 유지하게 합니다.
디자인 규칙에는 색·글꼴 규칙 3종과 화면 배치 규칙 2종이 들어 있어요. 완성된 HTML과 다른 스타일을 원하시면 AI 빌드 지시서 + 색·글꼴 규칙 1종 + 화면 배치 규칙 1종을 AI 코딩 도구에 넣어 만들어보세요.
색·글꼴 규칙 3종 — 어떤 느낌으로 보일지
01 내추럴 그린
캠핑·아웃도어 장비 렌탈, 친환경·자연을 앞세우는 브랜드
제목입니다
서브 카피입니다
02 미니멀 모노
카메라·음향처럼 사양이 중요한 전문 장비 렌탈, 표와 숫자가 주인공인 화면
제목입니다
서브 카피입니다
03 레트로 페이퍼
빈티지·감성 소품 대여, 파티·촬영 소품처럼 분위기를 파는 대여
제목입니다
서브 카피입니다
화면 배치 규칙 2종 — 무엇을 어디에 놓을지
A 검색 중심형
찾는 게 분명한 서비스. 검색창이 첫 화면의 주인공.
- 첫 화면
- 화면 폭을 꽉 채운 배경 위에 큰 검색바 1개(입력칸 2~3개 + 검색 버튼). 아래에 숫자 지표 3개.
- 목록
- 카드 그리드 3~4열. 카드마다 이미지 → 제목 → 보조정보 → 가격 순.
- 내비
- 상단 가로 GNB 한 줄. 로고 · 검색 · 메뉴 · 로그인.
B 목록 중심형
훑어보고 비교한다. 한 화면에 많이 담는다.
- 첫 화면
- 히어로를 두지 않는다. 제목 + 필터 칩 줄로 바로 시작.
- 목록
- 좌측 필터 패널 + 우측 가로 리스트 행(썸네일 왼쪽, 정보 오른쪽, 액션 끝).
- 내비
- 상단 가로 GNB + 목록 화면에서만 좌측 필터 사이드바.
지시서와 함께 넣으면 화면 161개가 고른 조합대로 나옵니다
한 줄 프롬프트로 만든 사이트, 완벽할까요?
우리는 화면별 프롬프트 161개, 기능 정의 933개, 화면 이동 흐름 102개를 근거로 AI에게 지시합니다. 무엇을 만들지가 이미 정해져 있으니, AI는 상상하지 않고 그대로 만들기만 하면 됩니다.
161
화면별 프롬프트
933
기능 정의
102
화면 이동 흐름도
장바구니 그 화면 있잖아요, 거기 문구 좀…
PD3 화면, 문구 바꿔주세요.
AI에게든 개발사든 고유 ID로 이야기하면 전달이 쉬워집니다.
개발에 꼭 필요한 부분까지 작업됩니다
개발사에 그대로 전달하셔도 됩니다
- 화면 레이아웃과 구성요소 — 목록·상세·폼·표·모달
- 화면 사이 이동 — 버튼을 누르면 설계한 화면으로
- 예외·상태 화면 — 빈 목록, 오류, 마감 등
- 디자인 규칙을 함께 넣으면 전 화면 스타일 통일
개발사에게
- · 01 메뉴구조
- · 02 화면목록
- · 03 기능정의서
- · 05 FLOW 흐름도
- · 완성화면 HTML
AI에게
- · 07 AI 빌드 지시서
- · 디자인 규칙
- · 완성화면 HTML
개발에서는 이런 추가 작업이 진행돼요
바깥 서비스를 부르는 기능 — 로그인·결제·지도·알림 등
데이터 저장 — 입력한 내용이 서버에 남는 것
권한과 보안 — 누가 무엇을 볼 수 있는지
배포와 도메인 연결
이런 분께 맞아요
캠핑·카메라 장비 렌탈 사이트를 만들려는 분
물건을 «기간»으로 빌려주는 서비스를 준비하는 창업자
쇼핑몰 솔루션으로는 안 되는 대여 구조를 설계해야 하는 분
AI는 이런 부분을 놓칠 수 있어요
01
쇼핑몰 재고는 「몇 개 남았나」인데 렌탈 재고는 「이 날짜에 비었나」라, 상품 모델부터 다르다
02
보증금은 대여료와 다른 돈인데 한 화면에 섞이면 손님이 반드시 오해한다
03
같은 「이용 중」 화면이 반납 하루 전·당일·연체 중에 각각 달라야 한다
04
반납은 접수·점검·정산·환급 네 단계라 화면이 그만큼 갈린다
셋 다 만들다가 발견하면 구조를 갈아엎게 되는 것들입니다.
편한 건 좋지만, 부족한 건 싫잖아요.
그래서 이런 부분을 먼저 챙겨둔 AI팩입니다.
등급별로 이렇게 들어 있어요
| 포함 내용 | 스탠다드 | 플러스 | 디럭스 | 프리미엄 |
|---|---|---|---|---|
| 01 메뉴구조메뉴-화면 트리 · 조직도 pptx | ✓ | ✓ | ✓ | ✓ |
| 02 화면 목록화면ID · 화면별 AI 프롬프트 | 37개 | 161개 | 37개 | 161개 |
| 03 기능정의서요건 | 363개 | 933개 | 363개 | 933개 |
| 04 개발 일정표화면마다 며칠 걸리는지 | ✓ | ✓ | ✓ | ✓ |
| 05 FLOW 흐름도html · drawio | ✓ | ✓ | ✓ | ✓ |
| 07 AI 빌드 지시서넣고 한 마디면 끝 | ✓ | ✓ | ✓ | ✓ |
| 색·글꼴 규칙 3종내추럴 그린 · 미니멀 모노 · 레트로 페이퍼 | ✓ | ✓ | ✓ | ✓ |
| 화면 배치 규칙 2종검색 중심형 · 목록 중심형 | ✓ | ✓ | ✓ | ✓ |
| 08 검수 시나리오오픈 전 점검표 | — | — | 37개 | 161개 |
| 완성 화면HTML · 다시 찍어내는 생성기 | — | — | 37개 | 161개 |
자주 묻는 질문
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로 생성한 초안을 다듬은 자료로, 실제 서비스에 적용하기 전 검토가 필요합니다.
- 디지털 콘텐츠 특성상 파일 전달 후에는 환불이 제한됩니다.
내 서비스에 맞게 직접 만들 수도 있어요
컨셉과 메뉴만 입력하면 화면 목록부터 화면별 프롬프트까지, 빠지는 화면 없이 설계해드려요.
무료로 시작하기