공동구매(공구) 플랫폼 AI팩 플러스
목표 인원이 차야 할인가로 성사되고 미달이면 전액 환불되는, 조건부 결제 공동구매 플랫폼 AI팩
- 메뉴
- 10
- 화면
- 125
- 요건
- 731
- 화면 이동
- 65
어떤 규모로 만드시나요?
전 등급에 디자인 규칙(색·글꼴 3종 · 화면 배치 2종)이 들어 있어요. 검수 시나리오와 만들어 둔 화면은 디럭스·프리미엄에만 있습니다. 등급을 고르면 아래 내용이 전부 그 기준으로 바뀝니다.
사이트 하나 만들 때 개발 단계에서 꼭 요구되는 내용입니다
그 기간을 확실히 줄여 드려요. 실무에서 처음부터 만들면 이만큼 걸립니다.
요건 정의
2주
기능 정의
2주
화면 목록
2주
유저 플로우
2주
화면설계서 100p
2~3개월
검수 시나리오
2주
＊ 서비스 기획 실무 기준
AI한테 시키면 되지 않냐고요? 됩니다. 다만 문서 하나하나를 따로 지시해야 하고, 기준이 될 샘플이 없으면 원하는 대로 나오지 않습니다.
이런 결과물이 들어 있어요
결과물은 구매하시는 등급에 따라 다르게 구성되어 있어요. 등급별 항목은 맨 아래 등급별 구성에서 확인해 주세요.
만든 뒤에 확인할 방법까지 함께 드립니다
한 사이트를 만들기 위해서는 복잡한 흐름과 기능들이 있어요. 스펙에서 작성되는 지시문은 3,000줄 ~ 5,000줄 이상입니다. AI가 스펙을 읽고 화면으로 옮기는 사이에 어긋남이 발생할 수 있어요.
그래서 ‘내 서비스 내가 확인할 수 있도록’ 화면목록을 작성하고 검수 시나리오를 준비했습니다.
📌 전문 에이전시에서는 웹사이트를 제작할 때 가장 먼저 하는 일이 화면목록(IA) 작성이고, 배포 전에는 빠짐없는 검수를 위해 검수(테스트) 시나리오를 작성합니다. 바이브코딩은 이 과정을 생략하고 있지요. 그래서 제작 후 검수가 어렵고, 체계적으로 진행할 수 없어 오히려 시간이 많이 걸려요.
화면목록에 접속하여 화면이 잘 구성됐는지 확인하고, 배포 전에는 검수 시나리오대로 테스트해 보세요. 어긋나는 부분, 오류가 발생하는 부분은 AI 도구에 ‘화면 ID, ~~ 고쳐줘.’ 라고 하면 AI가 쉽게 찾아 수정할 수 있어요.
| 화면ID | 화면명 | 기능 정의 | AI 생성 프롬프트 |
|---|---|---|---|
| HO1 | 홈 | 상단 GNB(로고·검색·내 공구함·로그인) · 히어로 배너(오늘의 대표 공구, 달성… | 공동구매 플랫폼의 홈 화면을 만들어줘. 모바일 우선, 스크롤 순서대로: 1) 상단 GNB(로고, 검색, 내 공구… |
| DE2 | 상품 상세정보·거래 조건 | 상품 상세 설명·이미지 · 구성/옵션별 안내 · 배송 정보(성사 후 발송 일정·배송… | 공구 상품의 상세정보와 거래 조건 화면을 만들어줘. 상단 탭 또는 섹션: [상품 설명][배송/환불][판매자 정보… |
| JO3 | 참여 완료 | 참여 완료 메시지와 참여 번호 · 갱신된 달성률과 남은 시간 · '친구를 초대해 성… | 공구 참여를 마친 뒤의 완료 화면을 만들어줘. 중앙에 성공 체크와 "참여 완료! 함께 성사시켜요" 문구, 참여 … |
외 122개 화면 · 화면마다 프롬프트가 붙어 있습니다
| 요구사항ID | 업무 · 기능 | 구성 |
|---|---|---|
| 01-01-07 | 홈 | 마감 임박 공구 가로 스크롤(카운트다운 뱃지) |
| 03-03-03 | 참여 완료 | '친구를 초대해 성사에 힘 보태기' 공유 링크(카톡 |
| 05-03-04 | 관심 공구·알림함 | 오픈 예정 공구 알림 신청 목록 |
| 07-02-05 | 공구 개설 폼 | 정가와 단계별 가격 설정(인원 구간별 할인가) |
업무 → 기능 → 구성 3단 · 종류(기능·콘텐츠·화면·정책)는 알아서 붙습니다
공동구매(공구) 플랫폼
- ├ HO 홈·탐색화면 4
- ├ DE 공구 상세화면 4
- ├ JO 참여·결제화면 4
- ├ MY 내 공구함화면 4
- ├ RV 후기·문의·알림화면 3
- ├ AC 계정화면 3
- ├ HS 공구 개설(진행자)화면 3
- ├ HM 공구 관리(진행자)화면 5
- ├ SE 정산(진행자)화면 3
- ├ CS 고객지원화면 4
화면 이동 65개 · draw.io에서 편집
### DE2 상품 상세정보·거래 조건 · 역할: detail · 요건: 상품 상세 설명·이미지 · 구성/옵션별 안내 · 배송 정보(성사 후 발송 일정·… · 프롬프트: 공구 상품의 상세정보와 거래 조건 화면을 만들어줘. 상단 탭 또는 섹션: [상품 설명][배송/환불][판매자 …
이 파일 하나를 AI에 넣고 “이대로 만들어줘” 하면 됩니다
화면을 여러 번 나눠 만들면 AI가 매번 조금씩 다른 색과 간격을 씁니다. 디자인 규칙은 그 값을 고정해, 첫 화면부터 마지막 화면까지 같은 얼굴을 유지하게 합니다.
디자인 규칙에는 색·글꼴 규칙 3종과 화면 배치 규칙 2종이 들어 있어요. 완성된 HTML과 다른 스타일을 원하시면 AI 빌드 지시서 + 색·글꼴 규칙 1종 + 화면 배치 규칙 1종을 AI 코딩 도구에 넣어 만들어보세요.
색·글꼴 규칙 3종 — 어떤 느낌으로 보일지
01 모던 네이비
신뢰가 중요한 대형 공동구매·소셜커머스, 안정감 있는 브랜드
제목입니다
서브 카피입니다
02 미니멀 모노
감각적인 셀렉트 공구·인플루언서 공구, 편집숍형 큐레이션
제목입니다
서브 카피입니다
03 코럴 선셋
생활밀착 저가 공구·맘카페형, 20~30대 모바일 타깃
제목입니다
서브 카피입니다
화면 배치 규칙 2종 — 무엇을 어디에 놓을지
A 타이포 강조형
글자가 그림이다. 숫자와 큰 글씨로 밀어붙인다.
- 첫 화면
- 어두운 배경 위에 화면 폭을 꽉 채운 큰 제목(48px 이상). 바로 아래 숫자 지표 4개를 가로 한 줄로.
- 목록
- 카드를 나란히 두지 않고 위아래로 조금씩 어긋나게(계단) 배치. 카드마다 큰 숫자를 하나씩 얹는다.
- 내비
- 상단 가로 GNB. 어두운 배경에 흰 글자, 오른쪽 끝에 밝은 버튼 하나.
B 벤토 그리드형
크기로 말한다. 중요한 건 크게, 곁다리는 작게 한 판에 담는다.
- 첫 화면
- 히어로를 따로 두지 않는다. 첫 화면부터 크기가 다른 블록을 한 판에 짠다 — 큰 블록 1개(대표)에 작은 블록 3~4개를 붙인다.
- 목록
- 블록 크기를 2:1:1로 섞는다. 첫 항목만 두 칸을 차지하고 나머지는 한 칸씩. 칸 사이 간격은 일정하게.
- 내비
- 상단 가로 GNB 한 줄. 블록이 이미 복잡하므로 내비는 최대한 단순하게.
지시서와 함께 넣으면 화면 125개가 고른 조합대로 나옵니다
한 줄 프롬프트로 만든 사이트, 완벽할까요?
우리는 화면별 프롬프트 125개, 기능 정의 731개, 화면 이동 흐름 65개를 근거로 AI에게 지시합니다. 무엇을 만들지가 이미 정해져 있으니, AI는 상상하지 않고 그대로 만들기만 하면 됩니다.
125
화면별 프롬프트
731
기능 정의
65
화면 이동 흐름도
장바구니 그 화면 있잖아요, 거기 문구 좀…
HO1 화면, 문구 바꿔주세요.
AI에게든 개발사든 고유 ID로 이야기하면 전달이 쉬워집니다.
개발에 꼭 필요한 부분까지 작업됩니다
개발사에 그대로 전달하셔도 됩니다
- 화면 레이아웃과 구성요소 — 목록·상세·폼·표·모달
- 화면 사이 이동 — 버튼을 누르면 설계한 화면으로
- 예외·상태 화면 — 빈 목록, 오류, 마감 등
- 디자인 규칙을 함께 넣으면 전 화면 스타일 통일
개발사에게
- · 01 메뉴구조
- · 02 화면목록
- · 03 기능정의서
- · 05 FLOW 흐름도
- · 완성화면 HTML
AI에게
- · 07 AI 빌드 지시서
- · 디자인 규칙
- · 완성화면 HTML
개발에서는 이런 추가 작업이 진행돼요
바깥 서비스를 부르는 기능 — 로그인·결제·지도·알림 등
데이터 저장 — 입력한 내용이 서버에 남는 것
권한과 보안 — 누가 무엇을 볼 수 있는지
배포와 도메인 연결
이런 분께 맞아요
공동구매 플랫폼을 만들려는 분
인플루언서 공구를 시스템으로 옮기려는 분
목표 미달 시 자동 환불까지 설계해야 하는 분
AI는 이런 부분을 놓칠 수 있어요
01
목표 미달 취소는 결제가 끝난 뒤에 터지는 예외라 화면이 따로 필요하다
02
달성률과 남은 시간은 화면이 아니라 규칙이라, 말로만 시키면 매번 다르게 만든다
03
같은 수량을 여러 사람이 동시에 누르는 상황을 설계에서 빼먹기 쉽다
셋 다 만들다가 발견하면 구조를 갈아엎게 되는 것들입니다.
편한 건 좋지만, 부족한 건 싫잖아요.
그래서 이런 부분을 먼저 챙겨둔 AI팩입니다.
등급별로 이렇게 들어 있어요
| 포함 내용 | 스탠다드 | 플러스 | 디럭스 | 프리미엄 |
|---|---|---|---|---|
| 01 메뉴구조메뉴-화면 트리 · 조직도 pptx | ✓ | ✓ | ✓ | ✓ |
| 02 화면 목록화면ID · 화면별 AI 프롬프트 | 37개 | 125개 | 37개 | 125개 |
| 03 기능정의서요건 | 335개 | 731개 | 335개 | 731개 |
| 04 개발 일정표화면마다 며칠 걸리는지 | ✓ | ✓ | ✓ | ✓ |
| 05 FLOW 흐름도html · drawio | ✓ | ✓ | ✓ | ✓ |
| 07 AI 빌드 지시서넣고 한 마디면 끝 | ✓ | ✓ | ✓ | ✓ |
| 색·글꼴 규칙 3종모던 네이비 · 미니멀 모노 · 코럴 선셋 | ✓ | ✓ | ✓ | ✓ |
| 화면 배치 규칙 2종타이포 강조형 · 벤토 그리드형 | ✓ | ✓ | ✓ | ✓ |
| 08 검수 시나리오오픈 전 점검표 | — | — | 37개 | 125개 |
| 완성 화면HTML · 다시 찍어내는 생성기 | — | — | 37개 | 125개 |
자주 묻는 질문
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로 생성한 초안을 다듬은 자료로, 실제 서비스에 적용하기 전 검토가 필요합니다.
- 디지털 콘텐츠 특성상 파일 전달 후에는 환불이 제한됩니다.
내 서비스에 맞게 직접 만들 수도 있어요
컨셉과 메뉴만 입력하면 화면 목록부터 화면별 프롬프트까지, 빠지는 화면 없이 설계해드려요.
무료로 시작하기