화면 설계서 쓰는 법 — 화면 목록부터 만드는 순서

화면 설계서는 만들 화면을 한 장씩 적어 개발 쪽에 넘기는 문서입니다. 처음 맡으면 그리기 도구부터 열게 됩니다. 먼저 할 일은 그림을 그리는 것이 아니라 화면에 번호를 붙여 목록을 만드는 것입니다. 목록이 나오면 한 장에 15분씩, 3일이면 초안이 끝납니다.

화면 설계서에는 무엇을 적나요

적는 것은 세 가지입니다 — 화면 목록 · 화면 한 장씩의 내용 · 화면 사이의 이동. 출발점은 글로 적어 둔 기능 목록이고, 기능 한 줄은 보통 2~3장으로 나뉩니다. '예약하기' 한 줄이 지점 고르기 · 시간 고르기 · 신청 확인 세 장이 되는 식입니다.

와이어프레임 — 색 없이 네모와 선으로 배치만 그린 그림 — 은 목록이 나온 뒤에 그립니다. 목록 없이 그리면 비슷한 화면을 두 번 그리고, 빠진 장도 세어 볼 수 없습니다.

화면 목록은 어디부터 시작합니까

빈 표 한 장에 다섯 칸을 만듭니다 — 번호 · 화면 이름 · 보는 사람 · 여기서 하는 일 · 다음 화면 번호. 아래는 방문 예약 앱을 가정한 예시입니다.

번호	화면 이름	보는 사람	여기서 하는 일	다음 화면 번호
1번	로그인	고객	전화번호를 적고 인증번호 받기	2번
2번	홈	고객	예약하기와 내 예약 중 고르기	3번 · 6번
3번	지점 목록	고객	가까운 지점 고르기	4번
4번	날짜·시간 고르기	고객	남은 시간 중에서 고르기	5번
5번	예약 신청	고객	이름·연락처를 적고 신청하기	6번
6번	내 예약	고객	다가올 예약 보기 · 취소하기	2번
7번	오늘 예약 목록	담당자	그날 들어온 예약 보기	8번
8번	예약 처리	담당자	확정하고 메모 남기기	7번

'보는 사람' 칸이 화면 수를 정합니다 — 같은 예약이라도 고객 화면과 담당자 화면은 버튼이 달라 따로 셉니다. '여기서 하는 일'에 동사가 두 개 적히는 줄은 화면 두 장으로 나눕니다.

화면은 몇 장이면 됩니까

처음 만드는 프로그램은 15~25장 안에서 정리됩니다. 기능 목록이 8~10줄이고 한 줄이 2~3장으로 나뉘면 20장 안팎이 나옵니다. 한 장에 15분씩 20장이면 5시간, 하루 두 시간씩 3일이면 끝납니다.

같은 틀에 내용만 바뀌는 화면은 한 장으로 셉니다 — 지점이 30개여도 지점 상세는 1장입니다. 대신 목록 화면과 상세 화면은 생김새가 달라 따로 셉니다.

빈 화면과 오류 화면은 따로 세지 않고 그 화면 안의 한 칸으로 적습니다. 예약이 0건일 때와 시간이 이미 찼을 때 보이는 문구를 같은 장에 적어 두면 되묻는 횟수가 줄어듭니다.

화면 한 장에 적을 것은 무엇인가요

한 장은 네 칸짜리 표로 적습니다 — 영역 · 들어갈 내용 · 비어 있을 때 보이는 문구 · 잘못 입력했을 때 보이는 문구. 아래는 앞 표의 5번 예약 신청 화면입니다.

영역	들어갈 내용	비어 있을 때 보이는 문구	잘못 입력했을 때 보이는 문구
제목 줄	화면 이름 · 뒤로 가기	—	—
고른 내용 요약	앞 화면에서 고른 지점 · 날짜 · 시간	'고른 시간이 없습니다'	—
이름 칸	2~10자 · 필수	'이름을 적어 주세요'	'2자 이상 적어 주세요'
연락처 칸	숫자 11자리 · 필수	'연락처를 적어 주세요'	'숫자 11자리로 적어 주세요'
요청 사항 칸	여러 줄 · 선택	'남길 말이 있으면 적어 주세요'	'200자까지 적을 수 있습니다'
신청 버튼	누르면 6번 화면으로	칸이 비면 흐린 상태	'방금 다른 분이 예약한 시간입니다'

오른쪽 두 칸이 이 표의 값어치를 만듭니다. 화면에 무엇이 있는지는 그림으로 짐작이 가지만, 아무것도 없을 때와 잘못 눌렀을 때 보일 문구는 적어 두지 않으면 만드는 사람이 정하게 됩니다.

맨 위에는 화면 번호와 이름을, 맨 아래에는 나갈 수 있는 곳을 적습니다. 한 장이 A4 한 쪽을 넘으면 두 장으로 나눌 때입니다.

화면 이동은 어떻게 표시하나요

이동은 문장이 아니라 번호로 적습니다. '신청 버튼을 누르면 완료 화면으로 간다'가 아니라 '신청 → 6번'입니다. 번호로 적어야 화면 흐름도 — 화면 번호를 화살표로 이어 붙인 한 장 — 를 그릴 수 있습니다.

흐름도는 목록 표를 다 채운 뒤 30분이면 그려집니다. 번호를 동그라미로 늘어놓고 '다음 화면 번호' 칸대로 화살표를 긋되, 되돌아오는 이동은 점선으로 긋습니다.

다 긋고 나면 두 가지를 셉니다. 들어오는 화살표가 없는 화면은 아무도 닿을 수 없고, 나가는 화살표가 없는 화면은 사용자가 멈춰 섭니다. 이 두 종류가 0개가 될 때까지 채웁니다.

손그림과 그리기 도구 중 어느 쪽입니까

초안은 손으로 그립니다. 한 장에 15분을 맞추려면 종이와 펜이 빠릅니다. 도구는 화면 수와 순서가 굳은 뒤에 엽니다 — 그때부터 같은 부분을 여러 화면에 복사해 씁니다.

손으로 그릴 때는 기호를 먼저 정해 둡니다. 여섯 가지면 한 프로그램을 다 그립니다.

요소	그리는 모양	옆에 적어 두는 것
버튼	모서리가 둥근 네모	버튼 글자 · 누르면 가는 화면 번호
입력 칸	밑줄을 하나 그은 긴 네모	몇 자까지 · 필수인지 선택인지
목록	가로줄 세 개를 나란히	한 번에 몇 줄 · 비었을 때 문구
이미지	네모 안에 대각선 두 개	가로세로 비율
이동 화살표	화면 번호끼리 잇는 실선	무엇을 눌렀을 때인지
되돌아오는 이동	같은 자리에 점선	취소 · 뒤로 · 닫기

이 표를 A4 한 장에 옮겨 설계서 맨 앞에 붙여 두면, 그림을 처음 보는 사람도 무엇이 버튼인지 묻지 않고 읽습니다.

3일 작업은 어떻게 나눕니까

하루 두 시간씩 잡습니다.

1. 1일 차 — 기능 목록을 쪼개 목록 표를 채웁니다. 결과물은 15~25줄짜리 표 1장.
2. 2일 차 — 표 순서대로 화면을 그립니다. 한 장에 15분, 하루에 8~10장.
3. 3일 차 — 남은 화면과 오류 문구를 채우고 흐름도를 그립니다.

다 되면 같은 일을 하는 사람 2명 앞에서 화면 순서대로 읽습니다. '여기서 뒤로 가면 어디로 가요' 같은 질문이 나오는 자리가 비어 있는 화살표입니다.

넘길 때는 한 폴더에 셋을 담습니다 — 화면 목록 표 1장 · 화면 그림 15~25장 · 흐름도 1장. 파일 이름은 화면 번호로 시작하게 붙입니다 — 예를 들어 5번_예약신청.

---

오늘 할 일은 하나입니다. 기능 목록 맨 위의 기능 하나를 골라 화면 3장으로 쪼개고 각 장에 번호와 이름을 붙이십시오. 10분이면 됩니다. 세 줄이 적히면 그대로 화면 목록 표의 첫 세 줄이 되고, 나머지 기능은 같은 방식으로 이어 붙이면 됩니다.