모두의 창업 서비스 기획은 고객 문제와 핵심 이용 흐름을 화면 목록과 기능으로 구체화하는 과정입니다. 산출물은 순서대로 셋 — 와이어프레임(무엇이 어디에), UI 디자인(실제 모양), 프로토타입(눌러 보는 연결). 1라운드 창업활동자금으로 맡기기 좋은 범위가 이 셋까지이고, 실제 동작은 2라운드 MVP 제작비 영역입니다.
기획을 글로만 두면 개발 견적이 흔들리고, 디자인부터 하면 흐름이 바뀔 때마다 다시 그립니다. 이 글은 문제 → 흐름 → 화면 → 디자인 → 프로토타입 → 개발 전달의 순서와, 디자인 외주에서 받을 것입니다.
고객 문제에서 이용 흐름과 화면 설계까지
1. 문제와 핵심 행동
누구의 어떤 문제를, 사용자가 무엇을 하면 해결되는지 한 문장. 도전 신청서에서 가져옵니다.
2. 이용 흐름
첫 진입 → 핵심 행동 → 결과까지 5 ~ 8단계를 화살표로. 가입 · 결제는 꼭 필요할 때만.
3. 화면 목록
흐름의 단계마다 화면 하나씩. 화면 이름 · 목적 · 들어갈 내용 · 다음 화면을 표로.
4. 와이어프레임
화면마다 상자와 선으로 배치. 글은 실제 문구로 넣어야 길이 문제가 보입니다.
5. UI 디자인
색 · 글꼴 · 이미지 · 버튼을 입힌 완성 화면. 공통 요소(버튼 · 입력칸 · 카드)를 먼저 정합니다.
6. 프로토타입
화면을 클릭으로 연결해 휴대폰에서 눌러 보게 합니다. 테스트 참여자 5 ~ 8명 관찰.
와이어프레임과 UI/UX 디자인의 차이
| 구분 | 와이어프레임 | UI 디자인 | UX(흐름 · 사용성) |
|---|---|---|---|
| 무엇 | 배치도(상자 · 선 · 실제 문구) | 완성 화면(색 · 글꼴 · 이미지) | 흐름 · 단계 수 · 멈추는 지점 |
| 확정하는 것 | 내용과 위치 | 브랜드 · 모양 | 순서와 이해도 |
| 고치기 | 쉬움(몇 분) | 어려움(화면마다) | 와이어프레임 단계에서 고쳐야 쌈 |
| 산출물 | 화면별 스케치 · 화면 목록 | 원본 파일 · PNG | 흐름도 · 테스트 기록 |
| 누가 | 참여자 초안 → 외주 정리 | 외주 | 참여자 + 외주 |
순서를 지키는 이유는 비용입니다. 와이어프레임에서 화면 하나를 빼는 일은 몇 분이지만, UI 디자인이 끝난 뒤 빼면 디자인 · 프로토타입 · 전달 자료를 다 다시 만듭니다.
프로토타입으로 어디까지 검증할 수 있나요?
| 검증 가능 | 검증 불가(2라운드 MVP) | 방법 |
|---|---|---|
| 흐름 이해도 — 다음 화면을 예측하는가 | 실제 데이터 저장 · 조회 | 5 ~ 8명에게 과제 주고 관찰 |
| 멈추는 지점 — 어디서 헤매는가 | 결제 · 알림 · 재방문 | 화면별 멈춤 시간 · 질문 기록 |
| 문구 — 버튼 · 제목이 읽히는가 | 성능 · 오류 | 소리 내어 읽기 |
| 무엇을 만들지 — 개발 범위 확정 | 운영 부담 | 화면 목록 확정 |
디자인 외주에서 받을 원본과 전달 자료
| 받을 것 | 형식 | 왜 |
|---|---|---|
| 편집 가능한 원본 | 디자인 도구 파일(폰트 · 이미지 포함) 또는 공유 링크(편집 권한) | 수정 · 2라운드 재사용 |
| 화면 PNG | 화면별, 휴대폰 · PC | 보고서 · 발표 자료 |
| 프로토타입 링크 | 휴대폰에서 열리는 클릭 연결 | 테스트 · 심사 시연 |
| 개발 전달 자료 | 공통 요소(버튼 · 입력칸 · 카드), 색 · 글꼴 · 간격 값, 상태별 화면(빈 · 오류 · 로딩) | 개발 견적 · 구현 정확도 |
| 화면 목록 · 흐름도 | 표 · 그림 | 범위의 근거 |
| 라이선스 | 유료 폰트 · 이미지의 사용 조건 | 공개 때 문제 방지 |
기획 결과를 개발 견적으로 연결하기
- 1화면 목록을 '필수 · 다음 · 나중'으로 나눕니다. 2라운드 MVP 제작비가 '최대 2천만 원 이내 차등'이라 금액에 맞춰 줄일 수 있게.
- 2기능은 화면마다 '입력 → 처리 → 완료 조건'으로 적습니다. '예약 기능'이 아니라 '날짜 · 시간 · 인원 입력 → 가능 여부 확인 · 저장 → 운영자 알림'.
- 3개발 전달 자료와 프로토타입 링크를 함께 보내 견적을 받습니다. 같은 자료를 2 ~ 3곳에.
- 4디자인을 만든 곳이 개발까지 하면 전달 비용이 줄고, 다른 곳이면 전달 자료의 완성도가 견적 정확도입니다.
- 51라운드 활동보고서에는 화면 목록 · 프로토타입 · 테스트 기록을, 2라운드 계획에는 필수 기능 목록과 견적을 넣습니다.
서치웨이는 흐름 정리 → 와이어프레임 → UI → 프로토타입을 1 ~ 2주에 만들고 원본 · PNG · 링크 · 개발 전달 자료를 함께 넘기며, 2라운드 웹 MVP 를 같은 자료로 이어서 개발할 수 있습니다.
자주 묻는 질문
Q.와이어프레임과 UI 디자인은 무엇이 다른가요?
와이어프레임은 화면에 무엇이 어디에 놓이는지 선과 상자로 그린 배치도이고, UI 디자인은 그 위에 실제 색 · 글꼴 · 이미지 · 버튼 모양을 입힌 완성 화면입니다. 와이어프레임에서 흐름과 내용을 확정한 뒤 UI 로 가야 수정이 적습니다.
Q.프로토타입으로 어디까지 검증할 수 있나요?
화면을 눌러 다음 화면으로 넘어가는 시연이라 '흐름이 이해되는가, 어디서 멈추는가, 무엇을 만들지'를 확인할 수 있습니다. 실제 데이터 저장 · 결제 · 재방문은 검증할 수 없고, 그건 2라운드 웹 MVP 영역입니다.
Q.1라운드 지원금으로 디자인 외주를 맡겨도 되나요?
창업아이템 개발 목적의 화면 설계 · 디자인은 1차 집행가이드의 외주용역 성격에 맞습니다(인정 여부는 책임멘토 확인). 서치웨이 기준 핵심 흐름 5 ~ 8화면의 시안 · 프로토타입은 1 ~ 2주입니다.
Q.디자인 결과물을 개발 업체에 넘길 때 무엇이 필요한가요?
편집 가능한 원본 파일, 화면별 PNG, 클릭 연결 링크, 그리고 개발 전달 자료(버튼 · 입력칸 같은 공통 요소, 간격 · 글꼴 · 색 값, 상태별 화면 — 빈 상태 · 오류 · 로딩)입니다. 이 자료가 있으면 개발 견적의 화면 수와 범위가 바로 잡힙니다.
발행
이 글과 관련된 서비스
이 글이 도움이 됐다면 공유해 주세요
