제품 만들기 ·
와이어프레임 뜻과 화면설계서 · 기능명세서: 외주 맡기기 전 무엇을 준비하나
와이어프레임 · 스토리보드 · 화면설계서 · 기능명세서 · 요구사항정의서의 뜻과 누가 만드는지 정리했어요. 외주 맡기는 사람이 실제로 준비하면 되는 최소한과 와이어프레임 툴 · AI 도구도 함께 담았어요.
외주 개발을 알아보면 문서 이름이 쏟아져요. 와이어프레임, 스토리보드, 화면설계서, 기능명세서, 요구사항정의서 같은 것들이에요.
이걸 다 만들어 가야 하나 걱정되실 거예요. 결론부터 말하면 아니에요. 대부분은 개발사가 만드는 문서예요.
이 글에서 와이어프레임 뜻과 다섯 문서의 차이를 정리했어요. 누가 만드는지, 맡기는 사람은 무엇만 준비하면 되는지도 함께 담았어요.
개발 에이전시를 8년간 운영하며 이 문서들을 직접 만들고 받아 봤어요. 어떤 문서가 실제로 일을 줄였는지 그 경험으로 적었어요.
와이어프레임 뜻이 뭔가요?
와이어프레임은 화면의 뼈대 그림이에요. 색과 사진 없이 네모와 선으로 "어디에 무엇이 있는지"만 그려요.
철사(wire)로 틀(frame)을 잡는다는 데서 온 말이에요. 버튼 위치나 목록 줄 수, 제목 자리만 단순하게 보여 줘요.
와이어프레임은 이런 질문에 답해요.
- 첫 화면에 무엇이 보이나요?
- 이 버튼을 누르면 어느 화면으로 가나요?
- 한 화면에 정보가 너무 많지 않나요?
색과 글꼴을 정하는 건 다음 단계예요. 실제 화면처럼 색과 사진을 입힌 그림은 시안 또는 목업이라고 불러요.
다섯 문서는 무엇이 다른가요?
한 표로 먼저 볼게요.
| 문서 | 뜻 | 주로 누가 만드나요 | 맡기는 사람이 준비할 것 |
|---|---|---|---|
| 와이어프레임 | 화면의 뼈대 그림 | 기획자 · 디자이너 | 손그림 몇 장이면 충분 |
| 스토리보드 | 화면 그림 + 설명 + 화면 이동 순서 | 기획자 | 없어도 돼요 |
| 화면설계서 | 화면마다 요소와 동작을 적은 문서 | 기획자 | 없어도 돼요 |
| 기능명세서 | 기능마다 입력 · 처리 · 결과를 적은 문서 | 기획자 · 개발자 | 꼭 필요한 기능 목록 |
| 요구사항정의서 | 만들어야 할 것 전체를 번호 붙여 적은 문서 | 발주처(맡기는 곳) · 기획자 | 없어도 돼요 (큰 사업은 예외) |
이름은 회사마다 조금씩 섞어 써요. 스토리보드와 화면설계서를 같은 뜻으로 쓰는 곳도 많아요.
스토리보드는요?
와이어프레임에 설명과 순서를 붙인 거예요. 화면 옆에 "1번 버튼을 누르면 결제 화면으로 가요" 같은 설명을 적어요. 화면이 넘어가는 순서가 이야기처럼 이어져서 스토리보드라고 불러요.
화면설계서는요?
화면 하나하나의 규칙을 자세히 적은 문서예요. 입력칸에 몇 글자까지 들어가는지, 비어 있으면 무엇을 보여 주는지까지 적어요. 공공 사업이나 큰 회사 프로젝트에서 많이 써요.
기능명세서는요?
화면이 아니라 기능을 기준으로 적은 문서예요. 예를 들어 "예약하기" 기능이 무엇을 입력받고, 무엇을 확인해서, 어떤 결과를 돌려주는지 적어요. 개발자가 코드를 짤 때 가장 많이 보는 문서예요.
요구사항정의서는요?
만들어야 할 것을 빠짐없이 번호 붙여 적은 목록이에요. 공공 사업에서는 이 문서가 곧 계약 범위가 돼요. 다 만들었는지 확인(검수)할 때도 이 번호를 하나씩 맞춰 봐요.
스타트업 첫 버전에는 거의 쓰지 않아요.
이 문서들은 누가 만드나요?
보통의 외주 흐름에서는 개발사의 기획자가 만들어요. 맡기는 사람의 이야기를 듣고 문서로 정리해요. 그다음 내용이 맞는지 확인을 받아요.
그래서 견적에 "기획" 항목이 따로 붙어요. 화면설계서와 기능명세서를 만드는 시간이 그 안에 들어 있어요.
가끔 "화면설계서를 가져오면 견적을 낮춰 드려요"라는 곳도 있어요. 하지만 처음 만드는 사람이 쓴 설계서는 개발사가 결국 다시 정리해요. 몇 주를 들여 쓴 만큼 아끼기는 어려워요.
맡기는 사람은 무엇까지 준비하면 되나요?
세 가지면 충분해요.
1. 화면 목록. 필요한 화면 이름을 적어요. "첫 화면, 로그인, 상품 목록, 상품 상세, 장바구니, 주문 완료, 관리자 주문 목록"처럼 적으면 돼요. 몇 줄인지가 견적을 크게 정해요.
2. 중요한 화면 3~5장의 손그림. 종이에 네모와 선으로 그려서 사진을 찍으면 돼요. 이게 와이어프레임이에요. 잘 그릴 필요 없어요.
3. 꼭 필요한 기능과 나중 기능. 기능을 두 줄로 나눠요. 첫 버전에 없으면 안 되는 것과, 나중에 넣어도 되는 것으로 나누면 돼요.
손그림은 어떻게 그리나요?
가상의 예로 볼게요. 동네 필라테스 스튜디오의 예약 서비스예요.
- 종이 한 장에 화면 하나. A4를 세로로 놓고 휴대폰 화면처럼 네모를 그려요.
- 사진 · 글은 기호로. 사진 자리는 X 친 네모, 글 자리는 가로줄 몇 개로 그려요.
- 버튼에는 화살표. "예약하기" 버튼에서 다음 종이로 화살표를 그으면 화면 이동이 보여요.
- 세 장이면 충분. 시간표 → 수업 상세 → 예약 완료. 가장 많이 쓰일 흐름만 그려요.
그린 종이를 휴대폰으로 찍어 순서대로 보내면 돼요. 개발사는 이 세 장으로 화면 수와 흐름을 바로 알아요.
여기에 참고할 서비스 주소 두세 개를 붙이면 끝이에요. 이 묶음을 한 장으로 정리한 문서를 제안요청서(RFP)라고 불러요. 바로 쓸 수 있는 양식은 RFP 작성법에 있어요.
화면설계서 · 기능명세서는 이 세 가지를 받은 개발사가 만들어요. 맡기는 사람은 그 문서를 읽고 확인하는 쪽이에요.
확인할 때는 무엇을 보면 되나요?
개발사가 화면설계서나 기능명세서를 보내오면 세 가지만 보세요.
- 빠진 화면이 없나요? 특히 관리자 화면이 빠지기 쉬워요. 회원을 정리하고 주문을 확인하는 화면이에요.
- "없을 때" 화면이 있나요? 검색 결과가 없을 때나 결제가 실패했을 때 무엇이 보이는지 확인해요.
- 내가 모르는 규칙을 정해 놨나요? 환불 기한이나 취소 가능 시간 같은 운영 규칙은 대표님이 정할 일이에요.
이 문서는 나중에 계약서의 작업 범위(과업 범위)가 되기도 해요. 계약서에 붙이는 방법은 개발 용역계약서 양식에 적었어요.
와이어프레임 툴은 무엇을 쓰나요?
처음이라면 비싼 도구가 필요 없어요.
| 도구 | 좋은 점 | 아쉬운 점 |
|---|---|---|
| 종이와 펜 | 5분이면 끝나요 | 고치려면 다시 그려요 |
| 슬라이드(파워포인트 · 키노트) | 이미 쓸 줄 알아요 | 화면 이동을 보여 주기 어려워요 |
| 피그마(Figma) | 디자이너 · 개발사와 바로 같이 봐요 | 처음엔 메뉴가 낯설어요 |
피그마에는 무료 Starter 플랜이 있어요. 유료 Professional 플랜은 편집 좌석(Full seat)이 월 16달러부터예요. (피그마 요금 안내, 2026년 10월 확인) 혼자 와이어프레임 몇 장 그리는 데는 무료로도 충분해요.
도구보다 중요한 건 빨리 그리고 빨리 버리는 것이에요. 와이어프레임은 고칠 걸 찾으려고 그리는 거예요.
와이어프레임을 AI로 그릴 수 있나요?
네, 요즘은 글로 설명하면 AI가 화면을 그려 줘요.
피그마도 AI 도구인 Figma Make를 내놨어요. (2026년 10월 확인) 글로 설명하면 화면과 실제로 눌러 볼 수 있는 프로토타입(체험용 화면)을 만들어 줘요. 디자이너가 아니어도 첫 그림을 빨리 얻을 수 있어요.
(주)헤이제임스의 셀프 견적도 같은 일을 해요. 서비스 설명을 넣으면 AI가 필요한 기능과 화면을 고르고 화면 프로토타입을 그려요.
거기서 기능을 넣고 빼면 견적이 같이 바뀌어요. 견적서도 내려받을 수 있어요.
AI가 그린 화면도 와이어프레임처럼 쓰면 돼요. 완성본이 아니라 "이게 맞나?"를 묻는 재료예요.
문서를 두껍게 만들면 무엇이 문제인가요?
문서가 많을수록 안전해 보여요. 하지만 스타트업 첫 버전에서는 반대인 경우가 많아요.
- 모르는 것까지 정하게 돼요. 화면설계서 칸을 채우려면 아직 정하지 않은 규칙까지 적어야 해요.
- 문서가 곧 계약 범위가 돼요. 써 보고 바꾸고 싶어도 "설계서에 없었어요"가 나와요.
- 고객은 문서를 안 봐요. 고객 반응은 돌아가는 화면에서만 나와요.
그래서 저는 문서를 줄이고 화면을 먼저 만들어 보며 정하는 쪽을 권해요. 그 이유는 기획서가 두꺼울수록 위험한 이유에 길게 적었어요.
프로토타입과 MVP(최소 기능 제품)를 언제 무엇부터 만들지는 프로토타입과 MVP 차이에서 이어서 볼 수 있어요.
정리하면
- 와이어프레임은 색 없이 화면의 뼈대만 그린 그림이에요.
- 화면설계서 · 기능명세서 · 요구사항정의서는 보통 개발사가 만들어요.
- 맡기는 사람은 화면 목록, 손그림 몇 장, 기능 우선순위면 충분해요.
- 손그림이 어렵다면 AI로 화면을 먼저 그려 보세요.
내 서비스의 화면을 먼저 보고 싶으면 셀프 견적에서 서비스 설명을 넣어 보세요. AI가 화면을 그리고 견적까지 보여 줘요.
자주 묻는 질문
와이어프레임과 목업은 무엇이 다른가요?
와이어프레임은 색과 사진 없이 배치만 그린 그림이에요. 목업은 색 · 글꼴 · 사진까지 넣어 실제처럼 보이게 만든 그림이에요. 둘 다 눌러도 움직이지 않는다는 점은 같아요.
화면설계서 없이 외주를 맡겨도 되나요?
네, 화면설계서는 보통 개발사의 기획자가 만들어요. 맡기는 사람은 화면 목록과 손그림, 기능 우선순위를 주고 나온 설계서를 확인하면 돼요.
와이어프레임 툴은 꼭 피그마를 써야 하나요?
아니에요, 종이에 그려 사진을 찍어도 돼요. 개발사와 같이 고칠 일이 많다면 피그마가 편해요. 무료 플랜으로도 시작할 수 있어요.
쓴 사람 — 제임스
연세대 컴퓨터과학을 전공한 23년차 개발자예요. 개발 에이전시를 8년간 운영하며 스타트업 플랫폼 350개를 만들었고, 연매출 100억 원 커머스 기업의 CTO를 지냈어요. 정부지원사업을 받아도 봤고 심사위원도 해 봤어요. 최근 2년은 AI로 개발을 효율화하는 데 집중하고 있어요.