동네 서비스 매칭 플랫폼 AI팩 프리미엄
요청서 한 장을 보내면 고수들이 각자 값을 불러 견적을 보내고, 비교해서 고르는 매칭 플랫폼 AI팩
- 메뉴
- 12
- 화면
- 159
- 요건
- 877
- 화면 이동
- 86
어떤 규모로 만드시나요?
전 등급에 디자인 규칙(색·글꼴 3종 · 화면 배치 2종)이 들어 있어요. 검수 시나리오와 만들어 둔 화면은 디럭스·프리미엄에만 있습니다. 등급을 고르면 아래 내용이 전부 그 기준으로 바뀝니다.
프리미엄은 더 깊이 있는 화면을 만들어 줍니다
고쳐서 올린 그림이 아니라 AI팩을 넣고 그대로 뽑은 화면입니다. 전체 159개 중 주요 화면과 실패·예외 화면을 섞어 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 생성 프롬프트 |
|---|---|---|---|
| HO1 | 홈 - 비로그인 | 상단 히어로(핵심 카피 + '어떤 도움이 필요하세요?' 서비스 검색바) · 인기 서… | 동네 서비스 매칭 플랫폼의 비로그인 홈 화면을 만들어줘. 스크롤 순서대로 아래를 쌓아줘. 1) 상단 GNB(로고… |
외 158개 화면 · 화면마다 프롬프트가 붙어 있습니다
| 요구사항ID | 업무 · 기능 | 구성 |
|---|---|---|
| 01-01-03 | 홈 - 비로그인 | 3단계 이용 안내(요청서 작성→견적 받기→고수 선택) |
| 03-05-01 | 요청 수정·취소 | 수정 가능 여부 안내(견적이 오기 전까지 자유 수정) |
| 05-02-05 | 채팅방 | 견적서 카드가 대화에 끼어 보이기 |
| 07-03-01 | 내 요청 - 비어 있음 | 요청 내역이 없다는 안내와 일러스트 |
업무 → 기능 → 구성 3단 · 종류(기능·콘텐츠·화면·정책)는 알아서 붙습니다
동네 서비스 매칭 플랫폼
- ├ HO 홈화면 2
- ├ SE 고수 찾기화면 5
- ├ RQ 요청서화면 5
- ├ QT 받은 견적화면 4
- ├ CH 채팅화면 2
- ├ PY 결제·이용화면 3
- ├ MY 내 요청화면 3
- ├ RV 후기화면 2
- ├ PR 고수센터화면 5
- ├ LD 요청 받기화면 4
- ├ JB 진행 관리화면 3
- ├ AU 계정화면 5
화면 이동 86개 · draw.io에서 편집
### HO1 홈 - 비로그인 · 역할: main · 요건: 상단 히어로(핵심 카피 + '어떤 도움이 필요하세요?' 서비스 검색바) · 인기… · 프롬프트: 동네 서비스 매칭 플랫폼의 비로그인 홈 화면을 만들어줘. 스크롤 순서대로 아래를 쌓아줘. 1) 상단 GNB(…
이 파일 하나를 AI에 넣고 “이대로 만들어줘” 하면 됩니다
| 테스트ID | 화면 | 화면구분 | 확인 항목 | 결과 |
|---|---|---|---|---|
| SCN-001 | 홈 - 비로그인 | 기본 화면 | 상단 히어로(핵심 카피 + '어떤 도움이 필요하세요?' 서비스… | PASS·FAIL |
화면 하나당 시나리오 하나 · 확인 항목 901개 · 결과를 적어 개발자와 그대로 주고받습니다
Claude Code(Opus 5 이상)로 제작한 결과물입니다. 사용하시는 AI 도구에 따라 다른 결과물이 나올 수 있습니다.
동네 서비스 매칭 플랫폼 — 전체 화면 목록
각 항목을 눌러 화면을 확인할 수 있어요
화면을 여러 번 나눠 만들면 AI가 매번 조금씩 다른 색과 간격을 씁니다. 디자인 규칙은 그 값을 고정해, 첫 화면부터 마지막 화면까지 같은 얼굴을 유지하게 합니다.
디자인 규칙에는 색·글꼴 규칙 3종과 화면 배치 규칙 2종이 들어 있어요. 완성된 HTML과 다른 스타일을 원하시면 AI 빌드 지시서 + 색·글꼴 규칙 1종 + 화면 배치 규칙 1종을 AI 코딩 도구에 넣어 만들어보세요.
색·글꼴 규칙 3종 — 어떤 느낌으로 보일지
01 모던 네이비
신뢰가 먼저인 매칭·중개 서비스, 이사·인테리어처럼 금액이 큰 분야
제목입니다
서브 카피입니다
02 미니멀 모노
과외·레슨·컨설팅처럼 사람 자체가 상품인 분야
제목입니다
서브 카피입니다
03 내추럴 그린
청소·수리·돌봄처럼 생활에 가까운 분야, 안심이 중요한 서비스
제목입니다
서브 카피입니다
화면 배치 규칙 2종 — 무엇을 어디에 놓을지
A 좌우 분할형
말할 게 분명하다. 왼쪽은 글, 오른쪽은 행동.
- 첫 화면
- 좌우 2단. 왼쪽에 큰 제목과 설명, 오른쪽에 폼 또는 대표 이미지.
- 목록
- 3열(1440px에서 카드 453px). 카드 안은 사진 없이 글자 위계로만 나눈다. 1024px에서 2열, 720px 아래로는 1열.
- 내비
- 상단 가로 GNB. 로고 왼쪽, 액션 버튼 오른쪽 끝.
B 목록 중심형
훑어보고 비교한다. 한 화면에 많이 담는다.
- 첫 화면
- 히어로를 두지 않는다. 제목 + 필터 칩 줄로 바로 시작.
- 목록
- 좌측 필터 패널 + 우측 가로 리스트 행(썸네일 왼쪽, 정보 오른쪽, 액션 끝).
- 내비
- 상단 가로 GNB + 목록 화면에서만 좌측 필터 사이드바.
지시서와 함께 넣으면 화면 159개가 고른 조합대로 나옵니다
한 줄 프롬프트로 만든 사이트, 완벽할까요?
우리는 화면별 프롬프트 159개, 기능 정의 877개, 화면 이동 흐름 86개를 근거로 AI에게 지시합니다. 무엇을 만들지가 이미 정해져 있으니, AI는 상상하지 않고 그대로 만들기만 하면 됩니다.
159
화면별 프롬프트
877
기능 정의
86
화면 이동 흐름도
장바구니 그 화면 있잖아요, 거기 문구 좀…
HO1 화면, 문구 바꿔주세요.
AI에게든 개발사든 고유 ID로 이야기하면 전달이 쉬워집니다.
개발에 꼭 필요한 부분까지 작업됩니다
개발사에 그대로 전달하셔도 됩니다
- 화면 레이아웃과 구성요소 — 목록·상세·폼·표·모달
- 화면 사이 이동 — 버튼을 누르면 설계한 화면으로
- 예외·상태 화면 — 빈 목록, 오류, 마감 등
- 디자인 규칙을 함께 넣으면 전 화면 스타일 통일
개발사에게
- · 01 메뉴구조
- · 02 화면목록
- · 03 기능정의서
- · 05 FLOW 흐름도
- · 완성화면 HTML
AI에게
- · 07 AI 빌드 지시서
- · 디자인 규칙
- · 완성화면 HTML
개발에서는 이런 추가 작업이 진행돼요
바깥 서비스를 부르는 기능 — 로그인·결제·지도·알림 등
데이터 저장 — 입력한 내용이 서버에 남는 것
권한과 보안 — 누가 무엇을 볼 수 있는지
배포와 도메인 연결
이런 분께 맞아요
숨고 같은 서비스 매칭 플랫폼을 만들려는 분
지역 기반 전문가 중개 서비스를 준비하는 창업자
요청서·견적·선택까지 3자 흐름을 설계해야 하는 분
AI는 이런 부분을 놓칠 수 있어요
01
한 계정이 손님과 고수 두 권한을 오가는 구조라, 화면을 두 벌로 세워야 한다
02
요청서는 한 번에 한 질문씩 물어야 해서 단계마다 화면이 갈린다
03
견적은 보낸 뒤 취소·수정·만료가 전부 다른 화면이다
셋 다 만들다가 발견하면 구조를 갈아엎게 되는 것들입니다.
편한 건 좋지만, 부족한 건 싫잖아요.
그래서 이런 부분을 먼저 챙겨둔 AI팩입니다.
등급별로 이렇게 들어 있어요
| 포함 내용 | 스탠다드 | 플러스 | 디럭스 | 프리미엄 |
|---|---|---|---|---|
| 01 메뉴구조메뉴-화면 트리 · 조직도 pptx | ✓ | ✓ | ✓ | ✓ |
| 02 화면 목록화면ID · 화면별 AI 프롬프트 | 43개 | 159개 | 43개 | 159개 |
| 03 기능정의서요건 | 346개 | 877개 | 346개 | 877개 |
| 04 개발 일정표화면마다 며칠 걸리는지 | ✓ | ✓ | ✓ | ✓ |
| 05 FLOW 흐름도html · drawio | ✓ | ✓ | ✓ | ✓ |
| 07 AI 빌드 지시서넣고 한 마디면 끝 | ✓ | ✓ | ✓ | ✓ |
| 색·글꼴 규칙 3종모던 네이비 · 미니멀 모노 · 내추럴 그린 | ✓ | ✓ | ✓ | ✓ |
| 화면 배치 규칙 2종좌우 분할형 · 목록 중심형 | ✓ | ✓ | ✓ | ✓ |
| 08 검수 시나리오오픈 전 점검표 | — | — | 43개 | 159개 |
| 완성 화면HTML · 다시 찍어내는 생성기 | — | — | 43개 | 159개 |
자주 묻는 질문
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로 생성한 초안을 다듬은 자료로, 실제 서비스에 적용하기 전 검토가 필요합니다.
- 디지털 콘텐츠 특성상 파일 전달 후에는 환불이 제한됩니다.
내 서비스에 맞게 직접 만들 수도 있어요
컨셉과 메뉴만 입력하면 화면 목록부터 화면별 프롬프트까지, 빠지는 화면 없이 설계해드려요.
무료로 시작하기