화면설계서 작성법, 발주자가 그리는 메뉴구조도와 와이어프레임 양식

2026.10.217분

이 글은 「처음 맡기는 개발 외주, 발주 문서 준비」 시리즈의 2편입니다. 1편 요구사항 정의서 작성법에서 만든 기능 목록을 바탕으로 화면을 그리므로, 아직 보지 않았다면 1편을 먼저 읽어 보시길 권합니다.

화면설계서가 없으면 업체와 어디서 말이 어긋나는가

요구사항 정의서로 "무엇을 만들지"를 적었다면, 화면설계서는 "그 기능이 어느 화면에 어떤 모양으로 놓이는지"를 적는 문서입니다. 업체가 견적을 내고 개발을 시작하려면 기능이 몇 개의 화면에 나뉘어 들어가는지를 알아야 합니다. 화면 없이 기능 목록만 보내면 이런 일이 생깁니다.

견적 단계: 업체가 화면 수를 각자 짐작해서 세므로 같은 기능 목록을 보고도 금액이 벌어집니다.
개발 중: "예약 버튼은 시간표에서 바로 누르는 줄 알았다"와 "수업 상세 화면에 넣었다"가 부딪힙니다.
검수 단계: 기능은 다 있는데 동선이 달라서, 예약 하나 하려고 화면을 네 번 넘겨야 하는 앱을 받게 됩니다.

와이어프레임, 화면설계서, 스토리보드, 메뉴구조도, 유저 플로우

메뉴구조도(IA): 어떤 메뉴가 있고 그 아래 어떤 화면이 달리는지를 나무 모양으로 그린 그림입니다. 화면의 목록이자 전체 지도입니다.
와이어프레임: 화면 하나를 선과 네모로 대충 그린 밑그림입니다.
화면설계서: 와이어프레임 옆에 번호를 붙여 "이 버튼을 누르면 무슨 일이 일어나는지"를 적은 문서입니다. 스토리보드라고도 부릅니다.
유저 플로우: 사용자가 목적 하나를 이루기까지 화면을 어떤 순서로 지나가는지 화살표로 이은 그림입니다.

발주자에게 필요한 범위는 메뉴구조도 한 장과 주요 화면의 화면설계서입니다. 와이어프레임은 화면설계서의 왼쪽 절반이니 따로 만들 일이 없고, 유저 플로우는 화면 설명에 '누르면 어느 화면으로 가는지'를 적다 보면 자연히 드러납니다.

양식 구성: 파워포인트 한 파일, 장표 네 종류

퍼스트핍이 만든 양식은 16:9 파워포인트 파일 하나입니다. 장표는 네 종류이고 뒤에 작성 예시 두 장이 붙어 있습니다.

1. 표지

프로젝트명, 작성자, 작성일, 버전을 적고, 아래 변경 이력 표에 고친 날짜와 내용을 남깁니다. 업체에 보낸 뒤 고쳤으면 버전을 올려 다시 보냅니다.

2. 메뉴 구조도

맨 위에 서비스 이름 상자, 그 아래 메뉴(1단계) 상자, 다시 그 아래 화면(2단계) 상자가 선으로 이어진 나무입니다. 가나다 필라테스라면 회원 앱 아래 홈, 시간표, 내 예약, 내 정보가 1단계이고, 시간표 아래 주간 시간표와 수업 상세가 2단계로 달립니다. 관리자 페이지는 나무를 하나 더 그립니다.

3. 화면 설계(앱)

장표 한 장이 화면 하나입니다. 위쪽 표에 프로젝트, 화면명, 화면 ID, 작성자, 메뉴 위치를 적습니다. 화면 ID는 'APP-SCH-01'처럼 업체와 이야기할 때 그 화면을 부르는 이름입니다. 왼쪽 휴대폰 틀 안에 화면을 그리고 빨간 번호를 붙인 뒤, 오른쪽 '화면 설명' 표에 번호별로 무엇이고 누르면 무슨 일이 일어나는지 적습니다.

4. 화면 설계(웹·관리자)

같은 구조인데 왼쪽이 브라우저 틀입니다. 관리자 페이지나 PC 웹에 씁니다.

5~6. 작성 예시

가나다 필라테스의 '주간 시간표' 화면과 '예약 취소' 화면을 채워 두었습니다. 실제 업체가 아닌 가정 예시입니다.

쓰는 순서: 메뉴구조도 먼저, 화면은 기능 목록에서 뽑기

화면부터 그리면 중간에 빠진 화면이 생기고 번호가 꼬입니다. 메뉴구조도로 화면 목록을 먼저 확정한 뒤, 그 목록대로 화면 장표를 한 장씩 만드세요.

화면 목록은 전 편 기능 목록의 '메뉴/화면' 칸에서 나옵니다. 그 칸의 값을 모아 중복을 지우면 그것이 2단계 상자입니다. 가나다 필라테스 예시라면 기능 16개가 9개 화면에 묶입니다. 예약 전날 알림처럼 화면 없이 돌아가는 기능은 메뉴구조도에 없어도 됩니다.

화면 장표는 전부 그릴 필요가 없습니다. 시간표에서 예약하기까지, 예약 취소까지처럼 서비스의 목적을 이루는 화면을 먼저 그리고, 로그인처럼 어느 앱이나 비슷한 화면은 메뉴구조도에 이름만 두고 넘어가도 됩니다.

화면 장표에 적을 것과 적지 않을 것: 예약 취소 예시

색, 글꼴, 아이콘 모양, 간격은 적지 않습니다. 디자이너의 일입니다. 적을 것은 화면에 무엇이 있고, 어디에 있고, 누르면 어떻게 되는지뿐입니다.

예시의 '예약 취소' 장표는 '내 예약' 화면에서 수업 시작 24시간 이내에 취소를 누른 경우를 그렸고, 화면 설명 표는 이렇게 적혀 있습니다. ① 취소 버튼: 수업 시작 24시간 전이면 안내 없이 바로 취소되고 회원권 1회가 복구된다. 24시간 이내면 안내 창이 먼저 뜬다. ② 안내 문구: 횟수가 복구되지 않는다는 점을 먼저 알린다. ③ 돌아가기: 창이 닫히고 예약은 그대로 남는다. ④ 취소하기: 예약이 취소되고 목록에서 사라지며 회원권 횟수는 그대로다.

조건에 따라 화면이 달라지는 부분을 빠뜨리지 않은 것이 요점입니다. 업체가 견적에서 세는 것도, 개발에서 빠뜨리기 쉬운 것도 이 부분입니다. 예약이 하나도 없을 때 '내 예약' 화면에 무엇이 보일지 같은 예외 화면도 한두 개는 챙기세요. 해당 화면의 설명에 한 줄 덧붙여도 됩니다.

도구는 파워포인트와 손그림이면 됩니다

파워포인트 도형이면 충분하고, 종이에 그린 것을 사진으로 찍어 휴대폰 틀 안에 붙여도 됩니다. 삐뚤어진 네모와 손글씨 번호로 된 장표가, 정돈됐지만 설명이 없는 장표보다 낫습니다.

화면 열 개 중 여섯 개만 그렸더라도 메뉴구조도에 열 개가 다 있으면 업체는 나머지를 질문해서 채웁니다. 그 결과물이 업체가 정식으로 만드는 화면설계서이고, 검수 때 기준이 됩니다. 계약 전에 그 문서를 발주자가 확인하고 확정하는 절차가 있는지 물어보세요. 확정한 화면을 검수 기준으로 쓰는 방법은 개발 외주 인수검수 기준을 작성하는 방법에 정리해 두었습니다.

양식 다운로드와 다음 편

화면설계서 양식 (파워포인트, 57KB)

표지, 메뉴 구조도, 앱·웹 화면 장표와 가나다 필라테스 작성 예시 2장이 들어 있습니다.

전 편의 요구사항 정의서와 이번 화면설계서를 함께 보내면 업체는 같은 기능과 같은 화면을 보고 견적을 냅니다. 다음 편에서는 이 두 문서를 붙여 여러 업체에 같은 조건으로 견적을 요청하는 견적 요청서(RFP)를 다룹니다.

이 글은 「처음 맡기는 개발 외주, 발주 문서 준비」 시리즈 3편 중 2편입니다.

1편: 요구사항 정의서 작성법
2편: 화면설계서 작성법, 메뉴구조도와 와이어프레임 (지금 보는 글)
3편: 견적 요청서 양식과 작성법