외주 맡기기 전 와이어프레임, 어디까지 그려야 하나 (AI 툴 포함)

와이어프레임이 없으면 왜 견적이 몇 배씩 차이 나나요?

업체마다 머릿속에 다른 앱을 그리기 때문이에요. 클리앙에 올라온 한 창업자의 글을 보면, 같은 요청서를 여러 업체에 보냈는데 견적이 3–4배까지 벌어졌어요. 보도 댓글들은 사용자 흐름이 정확하면 누가 만들어도 결과가 비슷해지고, 회원가입·탈퇴 흐름까지 정해야 비교가 된다고 짚었어요. 보도 "회원가입이 있어요"라는 한 줄을 보고 어떤 업체는 이메일 가입 화면 1개를, 다른 업체는 소셜 로그인·비밀번호 찾기·프로필 수정까지 6개 화면을 떠올려요. 와이어프레임은 이 차이를 견적 전에 없애는 도구예요.

비개발자는 어디까지 그리면 되나요?

위시켓은 사용자 흐름 정의 → 화면 목록 → 화면 구성 요소 → 레이아웃 → 화면 연결 → 참고 자료 순서를 권해요. 보도 견적용으로는 앞의 세 단계면 충분해요.

1. 화면 목록: 사용자가 보는 화면을 전부 이름으로 적어요. 관리자 화면은 따로 적어요.
2. 핵심 흐름 1개: 돈이 오가는 흐름 하나를 화살표로 이어요. 예: 클래스 목록 → 상세 → 날짜 선택 → 결제 → 예약 완료.
3. 화면별 버튼과 입력칸: 각 화면에서 누를 수 있는 것과 적는 것을 적어요. 그리지 않아도 되는 것도 있어요.

• 색, 폰트, 아이콘, 로고
• 모든 예외 화면(업체가 범위서에서 정해요)
• 두 번째, 세 번째 기능의 세부 화면 그래도 한 가지는 꼭 적어 주세요. 목록이 비어 있을 때 무엇을 보여 줄지예요. 예약이 하나도 없을 때, 검색 결과가 없을 때 화면이 정해져 있으면 업체마다 다르게 해석할 여지가 줄어요.

AI 툴로 와이어프레임을 만들어도 되나요?

돼요. 견적용 초안이라면 가장 빠른 방법이에요.

• 구글 스티치: 구글 계정만 있으면 무료로 쓰고, 문장으로 설명하면 화면을 그려 줘요. 결과물을 피그마로 보내거나 코드로 내보낼 수 있다고 소개돼요. 보도 사용량 상한이 있고 기준이 자주 바뀌어요. 확인 필요(스티치 서비스 화면)
• 피그마 AI: 무료 Starter 사용자도 AI 크레딧을 월 500 받아요. 공고 확인 피그마 안에서 바로 고칠 수 있어서 수정이 편해요. AI에게는 기능이 아니라 범위를 주세요. 이런 식이에요.

원데이 클래스 예약 모바일 웹. 화면은 클래스 목록, 클래스 상세, 날짜·인원 선택, 결제, 예약 완료 5개만. 로그인은 카카오 버튼 하나. 흑백 와이어프레임으로. 주의할 점이 있어요. AI는 요청하지 않은 기능(채팅, 리뷰, 추천)을 그럴듯하게 그려 넣어요. 그 화면을 그대로 업체에 보내면 견적이 올라가요. 범위서의 미포함 항목에 해당하는 화면은 지우고 보내세요.

기획서를 따로 외주로 맡기면 얼마인가요?

시장 자료로 보면 크몽의 한 피그마 기획 상품은 20페이지 110만원(7일), 40페이지 330만원(30일), 60페이지 550만원(40일)으로 나뉘어요. 보도 모두 요구사항 정의서와 화면 설계서를 포함한다고 안내해요. 이 비용이 의미 있는 경우는 따로 있어요.

• 사용자 유형이 셋 이상(고객 앱·사장님 앱·관리자 웹)
• 정책이 복잡함(정산, 등급, 환불 규칙이 여러 단계)
• 여러 개발사에 같은 기준으로 견적을 받아야 함 MVP처럼 핵심 기능 1–2개라면 대표님이 그린 ②단계 와이어프레임으로 충분한 경우가 많아요. 기획 비용을 개발 범위에 쓰는 편이 나아요.

모두의 MVP는 무엇을 받으면 고정 가격을 낼 수 있나요?

아이디어 한 줄과 화면 목록이면 돼요. 와이어프레임이 없으면 범위서를 쓰면서 화면 목록을 함께 정해요. 그다음 화면 목록을 범위서 포함 5줄로 묶어요. 위 원데이 클래스 예시라면 이렇게 돼요. 포함 5줄

1. 카카오·이메일 로그인
2. 클래스 목록·상세(사진, 커리큘럼, 가격)
3. 날짜·인원 선택 → 토스페이먼츠 예약금 결제 → 예약 완료
4. 관리자 페이지: 일정 열기·마감, 예약자 명단
5. 도메인·배포·오류 모니터링 미포함 3줄
6. 후기·별점
7. 강사 채팅
8. 맞춤 일러스트·브랜딩 이 범위는 웹 MVP(290만원 · 3주)에 들어가요. 1주차 데모에서 화면 흐름을 확정하고, 그 뒤로는 주 1회 데모로 실제 화면을 보여 드려요. 범위서 전체 작성법은 범위서 쓰는 법에 있어요.

---

모두의 MVP는 5년차 풀스택 개발자가 기획·디자인·개발을 혼자 해서, 대표님이 그린 손그림 한 장도 바로 범위서로 바꿔요. 화면 목록을 범위서 포함 5줄·미포함 3줄로 정리해 고정 가격으로 드려요. 아이디어를 한 줄로 보내 주세요.

출처 (2026-10-13 확인)

• 위시켓 블로그, 와이어프레임 작성법·체크리스트(2025-07): https://blog.wishket.com/blog/what-is-wireframe-how-to-create
• 클리앙, 앱 개발 견적 차이 질문(2019-08, 커뮤니티): https://www.clien.net/service/board/park/13857622
• 크몽, 외주 개발 전 앱/웹 기획서 작성(Figma) 상품(시장 자료): https://kmong.com/gig/273264
• Figma 요금 FAQ, AI 크레딧: https://www.figma.com/pricing-faq/
• Banani, Google Stitch 요금·크레딧 정리(2026-04, 2차 자료): https://www.banani.co/blog/google-stitch-pricing-and-credits