실습과 부록 - 화면설계서 가이드 ep.05

지금까지 배운 내용을 직접 적용해봅니다. 실습은 두 개입니다. 하나는 빈 화면에서 시작해 완성하는 것, 다른 하나는 이미 작성된 설계서에서 문제를 찾는 것입니다. 두 방향을 모두 해봐야 “쓸 때 놓치지 않는 능력”과 “읽을 때 빠진 것을 찾아내는 능력”이 함께 길러집니다.

실습 A — 로그인 화면을 처음부터 설계해보기

과제

아래 요구사항을 바탕으로 로그인 화면(LGN-001) 설계서 1장을 완성하세요. 와이어프레임 + 디스크립션 + 상태 정의까지 모두 포함해야 합니다.

요구사항

[서비스 개요]
- 이커머스 모바일 앱 (iOS/Android)
- 회원 가입 및 로그인이 필요한 서비스

[로그인 화면 요구사항]
- 이메일 + 비밀번호로 로그인
- 소셜 로그인 지원: 카카오, 네이버, Apple
- 비밀번호 찾기, 회원가입 링크 제공
- 자동 로그인(로그인 상태 유지) 옵션 제공

작성 가이드

아래 순서대로 진행하면 빠짐없이 작성할 수 있습니다.

Step 1: 화면 헤더 작성

- 화면 ID: LGN-001
- 화면명: 로그인
- 화면 설명: _______________
- 진입 경로: (최소 4가지 이상 생각해보세요)
  ① _______________
  ② _______________
  ③ _______________
  ④ _______________

💡 힌트 — “앱을 처음 열었을 때” 외에 어떤 상황에서 로그인 화면에 도달하게 될까요. 세션 만료, 비로그인 상태에서 로그인이 필요한 기능 접근, 로그아웃 후, 푸시 알림 진입 시 등.

Step 2: 와이어프레임 그리기

종이, PPT, Figma 어떤 도구든 상관없습니다. 아래 요소가 모두 배치되었는지 확인하세요.

서비스 로고
이메일 입력 필드
비밀번호 입력 필드 (보기/숨기기 토글)
자동 로그인 체크박스
로그인 버튼
소셜 로그인 버튼 3개 (카카오, 네이버, Apple)
비밀번호 찾기 링크
회원가입 링크
에러 메시지 영역 (기본 비노출)

각 요소에 번호(①~⑨)를 매기세요.

Step 3: 디스크립션 작성

각 번호에 대해 아래 항목을 정의하세요. ep.03의 UI 요소별 필수 정의 항목을 참고합니다.

[입력 필드 — 이메일]
- Input type:
- Placeholder:
- 최대 글자 수:
- 키보드 타입 (모바일):
- 유효성 검증 시점:
- 검증 실패 시 에러 메시지:

[입력 필드 — 비밀번호]
- Input type:
- 마스킹 처리:
- 보기/숨기기 토글 동작:
- 최소/최대 글자 수:

[버튼 — 로그인]
- 활성 조건:
- 비활성 상태:
- 탭 시 동작:
- 로딩 상태:
- 중복 탭 방지:
- 성공 시 이동: → (화면 ID)
- 실패 시 동작:

[버튼 — 소셜 로그인]
- 각 버튼 탭 시 동작:
- 인증 완료 후 동작:
- 기존 회원이 아닌 경우:

[체크박스 — 자동 로그인]
- 기본 상태:
- 체크 시 동작:

[링크 — 비밀번호 찾기]
- 탭 시 이동: → (화면 ID)

[링크 — 회원가입]
- 탭 시 이동: → (화면 ID)

Step 4: 상태 정의

이 화면에 존재할 수 있는 상태를 모두 정의하세요.

[Default] — 최초 진입 시
[Loading] — 로그인 요청 중
[Error - 인증 실패] — 이메일 또는 비밀번호 불일치
[Error - 이메일 형식] — 이메일 형식이 올바르지 않음
[Error - 계정 잠금] — N회 이상 실패로 계정 잠금
[Error - 네트워크] — 네트워크 연결 실패

각 상태에서 화면이 어떻게 보이는지 구체적으로 서술하세요.

Step 5: 예외 케이스 점검

ep.03의 체크리스트를 보며 빠진 것이 없는지 확인하세요.

아무것도 입력하지 않고 로그인 버튼을 누르면?
이메일만 입력하고 비밀번호는 비어 있으면?
비밀번호 5회 연속 실패 시?
소셜 로그인 인증 중 사용자가 취소하면?
소셜 계정은 있지만 서비스 가입이 안 된 경우?
뒤로가기 버튼을 누르면? (진입 경로에 따라 다를 수 있음)
이미 로그인된 상태에서 이 화면에 접근하면?
자동 로그인 상태에서 앱을 재시작하면?

완성 기준

아래 항목에 모두 체크할 수 있으면 실습 완료입니다.

화면 헤더 4개 항목이 모두 기재되어 있다
진입 경로가 4개 이상 정의되어 있다
와이어프레임에 모든 UI 요소가 배치되어 있다
각 UI 요소에 번호가 매겨져 있다
디스크립션이 번호와 1:1로 대응된다
입력 필드의 유효성 검증과 에러 메시지가 정의되어 있다
로그인 버튼의 활성/비활성/로딩 상태가 정의되어 있다
최소 4가지 이상의 상태(Default, Loading, Error 등)가 정의되어 있다
화면 전환 시 목적지 화면 ID가 기재되어 있다
뒤로가기 동작이 진입 경로별로 정의되어 있다

실습 B — 기존 설계서 리뷰: 빠진 항목 찾기

과제

아래는 의도적으로 누락 항목이 포함된 상품 상세 화면(PRD-002) 설계서입니다. 빠진 항목을 모두 찾아 지적하세요.

실습 B: 의도적 누락이 포함된 설계서

리뷰 대상 설계서

화면 ID: PRD-002
화면명: 상품 상세
진입 경로: 상품 목록에서 아이템 탭

[Description]

① 상품 이미지 영역
   - 상품 대표 이미지 노출
   - 좌우 스와이프로 이미지 전환

② 상품 정보 영역
   - 상품명 노출
   - 가격 노출
   - 평점 별 표시

③ 구매하기 버튼
   - 탭 시 주문서 화면으로 이동

④ 찜하기 버튼
   - 하트 아이콘, 탭 시 찜 목록에 추가

⑤ 리뷰 영역
   - 최근 리뷰 3개 노출
   - "전체 보기" 탭 시 리뷰 목록 화면 이동

⑥ 관련 상품
   - 추천 상품 가로 스크롤로 노출

찾아야 할 누락 항목

아래 질문에 하나씩 답해보세요. 위 설계서에서 답을 찾을 수 있는지 확인합니다.

화면 헤더

화면 설명이 있는가?
진입 경로가 “모두” 기재되어 있는가? (상품 목록 외에 다른 경로는?)

상품 이미지 (①)

이미지가 몇 장까지 가능한가?
이미지 하단에 페이지 인디케이터가 있는가?
핀치 줌이 지원되는가?
이미지 로딩 실패 시 어떻게 표시되는가?

상품 정보 (②)

상품명이 매우 길면 어떻게 처리되는가? (말줄임? 줄바꿈?)
할인 상품일 때 가격 표시 방식은? (원가 취소선 + 할인가?)
리뷰가 0건일 때 평점은 어떻게 표시되는가?

구매하기 버튼 (③)

목적지 화면 ID가 기재되어 있는가?
전환 방식은? (Push? Modal?)
전달 데이터는? (item_id 등)
비로그인 상태에서 탭하면?
품절 상태에서 버튼은 어떻게 되는가?
로딩 상태와 중복 탭 방지는?

찜하기 버튼 (④)

비로그인 상태에서 탭하면?
이미 찜한 상태에서 다시 탭하면? (찜 해제?)
찜 성공/실패 시 피드백은? (토스트? 하트 색 변경?)

리뷰 (⑤)

“리뷰 목록 화면”의 화면 ID는?
리뷰가 0건일 때 화면은?

관련 상품 (⑥)

관련 상품이 0개일 때 이 영역은?
관련 상품 아이템 탭 시 동작은?

전체 화면

Loading 상태가 정의되어 있는가?
Error 상태가 정의되어 있는가?
공유하기 기능은 없는가? (있다면 정의 필요)
뒤로가기 동작은?
스크롤이 긴 화면인데, 구매하기 버튼의 위치는? (하단 고정?)

해설

위 27개 질문 중, 원본 설계서에서 답을 찾을 수 있는 것은 거의 없습니다. 이것이 바로 디스크립션은 있지만 충분하지 않은 설계서의 전형적인 모습입니다.

특히 치명적인 누락은 다음과 같습니다.

순위	누락 항목	왜 치명적인가
1	품절 시 구매 버튼 처리 (14)	구매 불가능한 상품을 결제 시도할 수 있음
2	비로그인 시 구매/찜 동작 (13, 16)	가장 빈번한 분기인데 정의가 없음
3	목적지 화면 ID 미기재 (10, 19)	개발자가 어디로 연결해야 하는지 모름
4	전체 화면 상태 미정의 (23, 24)	로딩/에러 시 사용자가 보는 화면이 없음
5	진입 경로 불충분 (2)	뒤로가기 동작을 정의할 수 없음

이 실습으로 “짧게 쓰는 것”과 “빠뜨리는 것”은 다르다는 점을 체감할 수 있습니다. 간결하되 빠짐없는 설계서가 좋은 설계서입니다.

부록 A. UI 요소별 정의 항목 체크리스트

화면 설계 시 옆에 두고 확인하는 한 장짜리 레퍼런스입니다.

입력 필드

Input type (text / email / password / number / tel)
Placeholder 문구
글자 수 제한 (최소/최대)
기본값 (있는 경우)
키보드 타입 — 모바일 (일반 / 이메일 / 숫자 / 전화번호)
유효성 검증 시점 (실시간 / 포커스 아웃 / 제출 시)
유효성 검증 실패 시 에러 메시지
포커스 상태 UI 변화
클리어(X) 버튼 표시 여부 및 동작
자동완성(Autofill) 허용 여부

버튼

버튼 텍스트
탭 시 동작 (API 호출 / 화면 이동 / 팝업 호출)
활성 조건
비활성 상태 표현 및 동작
로딩 상태 표현
중복 탭 방지
성공 시 동작 (이동 → 화면 ID)
실패 시 동작 (에러 메시지 / 재시도)

리스트 / 테이블

아이템 구성 요소 (썸네일 / 제목 / 부가 정보)
기본 정렬 기준
정렬 변경 옵션
페이징 방식 (무한스크롤 / 페이지 번호)
1회 로딩 건수
아이템 탭 동작 (이동 → 화면 ID, 전달 데이터)
빈 상태 (Empty State) 화면
긴 텍스트 말줄임 처리 (몇 줄 기준)
스와이프 동작 (있는 경우)
이미지 미존재 시 대체 표시

모달 / 팝업 / 바텀시트 / 토스트

유형 (모달 / 바텀시트 / 알럿 / 토스트 / 스낵바)
호출 조건
내용 구성 (제목 / 설명 / 버튼 / 입력 등)
닫기 규칙 (X 버튼 / 딤 탭 / 자동 소멸 / 버튼 탭)
딤(Dim) 처리 여부 및 딤 탭 시 동작
중첩 정책
토스트/스낵바의 자동 소멸 시간

탭 / 네비게이션

기본 선택 탭
전환 시 데이터 유지 / 초기화 여부
탭 수 고정 / 가변
많은 탭 시 스크롤 처리
선택된 탭의 시각적 구분

토글 / 체크박스 / 라디오

기본 상태 (ON/OFF, 선택/미선택)
변경 시 즉시 반영 여부
반영 실패 시 롤백 동작
전체 선택 동작 (체크박스)
미선택 허용 여부 (라디오)

부록 B. 자주 쓰는 상태/인터랙션 표현 문구

설계서 주석 작성 시 복사해서 쓸 수 있는 템플릿입니다.

상태 정의 문구

[Default]
- 정상적으로 데이터가 로딩된 기본 상태이다.

[Loading]
- 데이터 로딩 중이다. 스켈레톤 UI를 노출한다.
- (또는) 화면 중앙에 로딩 스피너를 노출한다.

[Empty]
- 표시할 데이터가 없다.
- 일러스트 + "{안내 문구}" 텍스트를 노출한다.
- (선택) [CTA 버튼 텍스트] 버튼을 노출한다.

[Error - 네트워크]
- 네트워크 연결에 실패하였다.
- "네트워크 연결을 확인해주세요" + [다시 시도] 버튼을 노출한다.

[Error - 서버]
- 서버 오류가 발생하였다.
- "일시적 오류가 발생했습니다. 잠시 후 다시 시도해주세요." + [다시 시도] 버튼을 노출한다.

[No Permission]
- 접근 권한이 없는 사용자이다.
- "접근 권한이 없습니다" + [이전 화면으로] 버튼을 노출한다.

인터랙션 문구

[버튼 탭]
- [{버튼명}] 버튼 탭 시, {동작}한다.
- [{버튼명}] 버튼 탭 → {화면 ID}({화면명})로 이동한다. (전환 방식: Push/Modal)
- [{버튼명}] 버튼 탭 시, {API}를 호출한다. 성공 시 {동작A}, 실패 시 {동작B}를 수행한다.

[조건부 노출]
- {조건}인 경우, {요소}를 노출한다. 그 외에는 비노출.
- {조건}인 경우에만 {요소}가 활성화된다. 비활성 시 탭 불가.

[입력값 검증]
- {필드명}의 값이 {조건}을 충족하지 않는 경우, 해당 필드 하단에 "{에러 메시지}" 텍스트를 붉은색으로 노출한다.
- 포커스 아웃 시 유효성 검증을 수행한다. (또는: 실시간으로 검증한다.)

[화면 전환]
- [{트리거}] 시, {화면 ID}({화면명})로 이동한다.
- 전환 방식: Push / Pop / Modal / Replace / PopToRoot
- 전달 데이터: {data_key}
- 뒤로가기 시 이전 화면으로 복귀한다. 입력된 데이터는 유지/초기화한다.

에러 메시지 문구

[입력 관련]
- "필수 입력 항목입니다."
- "올바른 이메일 형식을 입력해주세요."
- "비밀번호는 영문, 숫자, 특수문자를 포함한 8자 이상이어야 합니다."
- "{N}자 이내로 입력해주세요."
- "이미 사용 중인 {항목}입니다."

[인증 관련]
- "이메일 또는 비밀번호가 일치하지 않습니다."
- "5회 이상 실패하여 계정이 잠겼습니다. 비밀번호를 재설정해주세요."
- "인증 시간이 만료되었습니다. 다시 요청해주세요."

[네트워크/시스템 관련]
- "네트워크 연결을 확인해주세요."
- "일시적 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
- "서비스 점검 중입니다. {시간}에 다시 이용해주세요."

[권한 관련]
- "로그인 후 이용 가능합니다."
- "접근 권한이 없습니다. 관리자에게 문의하세요."
- "로그인이 만료되었습니다. 다시 로그인해주세요."

부록 C. 상태 정의 체크리스트 (화면별 점검용)

각 화면을 설계할 때, 아래 상태들이 모두 고려되었는지 체크합니다.

상태	비고
Default (기본)	정상 데이터가 표시된 상태
Loading (로딩)	스켈레톤 UI / 스피너
Empty (빈 값)	데이터 0건 시 안내 화면
Error - 네트워크	연결 실패 시 안내 + 재시도
Error - 서버	서버 오류 시 안내 + 재시도
Error - 입력값	유효성 검증 실패 시 메시지
Success (성공)	작업 완료 피드백 (해당 시)
No Permission (권한 없음)	미로그인 / 권한 부족 시
Partial Load (부분 로딩)	일부 영역만 로딩 실패 시
Offline (오프라인)	캐시된 데이터 노출 여부
Session Expired (세션 만료)	재로그인 유도

마무리

이 시리즈의 핵심을 한 문장으로 요약하면 이렇습니다.

좋은 화면설계서는 “읽는 사람이 추가 질문 없이 작업을 시작할 수 있는” 문서입니다.

처음부터 완벽하게 쓸 수는 없습니다. 하지만 체크리스트를 옆에 두고 한 화면 한 화면 빠짐없이 채워나가는 습관을 들이면, 어느새 “이 기획자가 쓴 설계서는 보기 편하다”는 평가를 받게 됩니다. 그 과정에서 이 시리즈가 도움이 되기를 바랍니다.

참고 자료

국내 자료

플래니지. 화면설계서 샘플 및 작성방법. (PPT 기반 실무 양식)
요즘IT. 화면 정의와 기능 정의 시리즈. (공통 가이드, 상세 가이드 노하우)
데이먼의 일상 기록. 화면설계서 작성방법. (주니어 대상 기본기 설명)
브런치. 기획자가 이건 할 줄 알아야지 시리즈. (버전 관리, 파일명 관리 등 실무 디테일)

해외 자료

Figma. What is Wireframing (공식 가이드). (충실도 단계, 베스트 프랙티스)
Interaction Design Foundation. Wireframes (updated 2026). (와이어프레임의 이론적 배경)
Nielsen Norman Group. UX 관련 아티클. (상태 정의, 에러 처리 등 UX 원칙)