어떤 규모로 만드시나요?
전 등급에 디자인 규칙(색·글꼴 3종 · 화면 배치 2종)이 들어 있어요. 검수 시나리오와 만들어 둔 화면은 디럭스·프리미엄에만 있습니다. 등급을 고르면 아래 내용이 전부 그 기준으로 바뀝니다.
사이트 하나 만들 때 개발 단계에서 꼭 요구되는 내용입니다
그 기간을 확실히 줄여 드려요. 실무에서 처음부터 만들면 이만큼 걸립니다.
요건 정의
2주
기능 정의
2주
화면 목록
2주
유저 플로우
2주
화면설계서 100p
2~3개월
검수 시나리오
2주
＊ 서비스 기획 실무 기준
AI한테 시키면 되지 않냐고요? 됩니다. 다만 문서 하나하나를 따로 지시해야 하고, 기준이 될 샘플이 없으면 원하는 대로 나오지 않습니다.
이런 결과물이 들어 있어요
결과물은 구매하시는 등급에 따라 다르게 구성되어 있어요. 등급별 항목은 맨 아래 등급별 구성에서 확인해 주세요.
만든 뒤에 확인할 방법까지 함께 드립니다
한 사이트를 만들기 위해서는 복잡한 흐름과 기능들이 있어요. 스펙에서 작성되는 지시문은 3,000줄 ~ 5,000줄 이상입니다. AI가 스펙을 읽고 화면으로 옮기는 사이에 어긋남이 발생할 수 있어요.
그래서 ‘내 서비스 내가 확인할 수 있도록’ 화면목록을 작성하고 검수 시나리오를 준비했습니다.
📌 전문 에이전시에서는 웹사이트를 제작할 때 가장 먼저 하는 일이 화면목록(IA) 작성이고, 배포 전에는 빠짐없는 검수를 위해 검수(테스트) 시나리오를 작성합니다. 바이브코딩은 이 과정을 생략하고 있지요. 그래서 제작 후 검수가 어렵고, 체계적으로 진행할 수 없어 오히려 시간이 많이 걸려요.
화면목록에 접속하여 화면이 잘 구성됐는지 확인하고, 배포 전에는 검수 시나리오대로 테스트해 보세요. 어긋나는 부분, 오류가 발생하는 부분은 AI 도구에 ‘화면 ID, ~~ 고쳐줘.’ 라고 하면 AI가 쉽게 찾아 수정할 수 있어요.
| 화면ID | 화면명 | 기능 정의 | AI 생성 프롬프트 |
|---|---|---|---|
| CL3 | 강의 재생 | 영상 플레이어(배속·자막·전체화면) · 우측 커리큘럼 목록과 현재 차시 하이라이트 … | 강의 영상 재생 화면을 만들어줘. 좌측 대부분을 영상 플레이어가 차지하고 (재생/일시정지, 배속 0.5~2배, … |
| CU3 | 커리큘럼 편성 | 챕터 추가와 이름 변경 · 챕터 안에 차시 추가 · 드래그앤드롭으로 순서 변경 · … | 커리큘럼 편성 화면을 만들어줘. 이 화면이 이 서비스의 핵심이야. 좌측에 챕터 목록(챕터 추가 버튼, 챕터별로 … |
| CO6 | 수강 신청 - 결제 실패 | 실패 사유 안내(한도 초과·카드 오류 등) · 다시 시도 버튼 · 다른 결제 수단 … | 결제 실패 화면을 만들어줘. 경고 아이콘과 "결제가 완료되지 않았어요" 문구, 실패 사유를 사람이 이해할 수 있… |
| HO1 | 홈 - 비로그인 | 상단 히어로 배너(핵심 카피 + 강의 검색창 + 수강생 수 지표) · 카테고리 바로… | 온라인 강의 플랫폼의 비로그인 홈 화면을 만들어줘. 스크롤 순서대로 아래 섹션을 위에서 아래로 쌓아줘. 1) 상… |
외 128개 화면 · 화면마다 프롬프트가 붙어 있습니다
| 요구사항ID | 업무 · 기능 | 구성 |
|---|---|---|
| 01-02-04 | 홈 - 수강생 로그인 | 이번 주 학습 요약 지표 3종(학습 시간 |
| 03-03-02 | 강의 상세 | 커리큘럼 목록(챕터/차시, 각 영상 길이) |
| 05-01-02 | 내 강의 목록 | 상태 배지(작성 중/검수 대기/게시 중/게시 중지) |
| 07-04-05 | 수료 기준 설정 | 기준 변경 시 영향받는 인원 실시간 표시 |
업무 → 기능 → 구성 3단 · 종류(기능·콘텐츠·화면·정책)는 알아서 붙습니다
온라인 강의 플랫폼 (LMS)
- ├ HO 홈화면 2
- ├ TC 강사센터화면 3
- ├ CO 강의 탐색화면 6
- ├ CL 내 강의실화면 8
- ├ CU 수업 편성화면 6
- ├ ST 학생 관리화면 5
- ├ GR 출결·평가화면 5
- ├ MY 마이페이지화면 4
- ├ AU 계정화면 5
화면 이동 65개 · draw.io에서 편집
### CU3 커리큘럼 편성 · 역할: builder · 요건: 챕터 추가와 이름 변경 · 챕터 안에 차시 추가 · 드래그앤드롭으로 순서 변경 … · 프롬프트: 커리큘럼 편성 화면을 만들어줘. 이 화면이 이 서비스의 핵심이야. 좌측에 챕터 목록(챕터 추가 버튼, 챕터별…
이 파일 하나를 AI에 넣고 “이대로 만들어줘” 하면 됩니다
화면을 여러 번 나눠 만들면 AI가 매번 조금씩 다른 색과 간격을 씁니다. 디자인 규칙은 그 값을 고정해, 첫 화면부터 마지막 화면까지 같은 얼굴을 유지하게 합니다.
디자인 규칙에는 색·글꼴 규칙 3종과 화면 배치 규칙 2종이 들어 있어요. 완성된 HTML과 다른 스타일을 원하시면 AI 빌드 지시서 + 색·글꼴 규칙 1종 + 화면 배치 규칙 1종을 AI 코딩 도구에 넣어 만들어보세요.
색·글꼴 규칙 3종 — 어떤 느낌으로 보일지
01 모던 네이비
B2B 교육, 사내 LMS, 기업 대상 강의 플랫폼
제목입니다
서브 카피입니다
02 미니멀 모노
전문가용 도구, 관리자 콘솔, 정보 밀도가 높은 화면
제목입니다
서브 카피입니다
03 코럴 선셋
B2C 강의 서비스, 취미·키즈 교육, 일반 사용자 대상
제목입니다
서브 카피입니다
화면 배치 규칙 2종 — 무엇을 어디에 놓을지
A 대시보드형
매일 쓰는 도구. 지표부터 보이고 좌측 메뉴로 이동한다.
- 첫 화면
- 히어로 없음. 화면 위쪽에 지표 카드 4개.
- 목록
- 표 중심. 헤더 고정, 행 높이 일정, 상태는 배지로.
- 내비
- 좌측 세로 사이드바(그룹 제목 + 항목) + 상단에는 계정만.
B 에디토리얼형
읽히는 화면. 글이 먼저 오고 사진이 뒤를 받친다.
- 첫 화면
- 큰 사진을 두지 않는다. 왼쪽에 세로 목차(카테고리·연재), 오른쪽에 가로로 긴 배너 한 장.
- 목록
- 3열 갤러리. 사진 아래 제목과 함께 두세 줄짜리 설명을 붙인다.
- 내비
- 상단 가로 GNB + 그 아래 얇은 구분선. 카테고리는 목록 화면 왼쪽에 세로로.
지시서와 함께 넣으면 화면 132개가 고른 조합대로 나옵니다
한 줄 프롬프트로 만든 사이트, 완벽할까요?
우리는 화면별 프롬프트 132개, 기능 정의 721개, 화면 이동 흐름 65개를 근거로 AI에게 지시합니다. 무엇을 만들지가 이미 정해져 있으니, AI는 상상하지 않고 그대로 만들기만 하면 됩니다.
132
화면별 프롬프트
721
기능 정의
65
화면 이동 흐름도
장바구니 그 화면 있잖아요, 거기 문구 좀…
CL3 화면, 문구 바꿔주세요.
AI에게든 개발사든 고유 ID로 이야기하면 전달이 쉬워집니다.
개발에 꼭 필요한 부분까지 작업됩니다
개발사에 그대로 전달하셔도 됩니다
- 화면 레이아웃과 구성요소 — 목록·상세·폼·표·모달
- 화면 사이 이동 — 버튼을 누르면 설계한 화면으로
- 예외·상태 화면 — 빈 목록, 오류, 마감 등
- 디자인 규칙을 함께 넣으면 전 화면 스타일 통일
개발사에게
- · 01 메뉴구조
- · 02 화면목록
- · 03 기능정의서
- · 05 FLOW 흐름도
- · 완성화면 HTML
AI에게
- · 07 AI 빌드 지시서
- · 디자인 규칙
- · 완성화면 HTML
개발에서는 이런 추가 작업이 진행돼요
바깥 서비스를 부르는 기능 — 로그인·결제·지도·알림 등
데이터 저장 — 입력한 내용이 서버에 남는 것
권한과 보안 — 누가 무엇을 볼 수 있는지
배포와 도메인 연결
이런 분께 맞아요
인프런·클래스101 같은 강의 플랫폼을 만들려는 분
사내 교육용 LMS를 구축해야 하는 담당자
AI로 만들다 화면이 자꾸 빠져서 막힌 분
AI는 이런 부분을 놓칠 수 있어요
01
진도율·수료 조건은 화면이 아니라 규칙이라, 말로만 시키면 AI가 매번 다르게 만든다
02
과제 제출과 채점은 제출 전·제출 후·재제출·마감 후가 전부 다른 화면이다
03
강사 정산은 수강료 환불이 끼는 순간 계산이 꼬인다
셋 다 만들다가 발견하면 구조를 갈아엎게 되는 것들입니다.
편한 건 좋지만, 부족한 건 싫잖아요.
그래서 이런 부분을 먼저 챙겨둔 AI팩입니다.
등급별로 이렇게 들어 있어요
| 포함 내용 | 스탠다드 | 플러스 | 디럭스 | 프리미엄 |
|---|---|---|---|---|
| 01 메뉴구조메뉴-화면 트리 · 조직도 pptx | ✓ | ✓ | ✓ | ✓ |
| 02 화면 목록화면ID · 화면별 AI 프롬프트 | 44개 | 132개 | 44개 | 132개 |
| 03 기능정의서요건 | 270개 | 721개 | 270개 | 721개 |
| 04 개발 일정표화면마다 며칠 걸리는지 | ✓ | ✓ | ✓ | ✓ |
| 05 FLOW 흐름도html · drawio | ✓ | ✓ | ✓ | ✓ |
| 07 AI 빌드 지시서넣고 한 마디면 끝 | ✓ | ✓ | ✓ | ✓ |
| 색·글꼴 규칙 3종모던 네이비 · 미니멀 모노 · 코럴 선셋 | ✓ | ✓ | ✓ | ✓ |
| 화면 배치 규칙 2종대시보드형 · 에디토리얼형 | ✓ | ✓ | ✓ | ✓ |
| 08 검수 시나리오오픈 전 점검표 | — | — | 44개 | 132개 |
| 완성 화면HTML · 다시 찍어내는 생성기 | — | — | 44개 | 132개 |
자주 묻는 질문
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로 생성한 초안을 다듬은 자료로, 실제 서비스에 적용하기 전 검토가 필요합니다.
- 디지털 콘텐츠 특성상 파일 전달 후에는 환불이 제한됩니다.
내 서비스에 맞게 직접 만들 수도 있어요
컨셉과 메뉴만 입력하면 화면 목록부터 화면별 프롬프트까지, 빠지는 화면 없이 설계해드려요.
무료로 시작하기