UX 화면설계서 템플릿의 구성 및 작성 요령 (기본정보, 와이어프레임, 설명)

Generated using chatGPT

 

앱이나 웹 서비스를 만들 때, 기획자의 머릿속에 있는 아이디어를 디자이너, 개발자 등 실무자들이 똑같이 구현하기란 쉽지 않습니다.

이럴 때 필요한 것이 바로 UX 화면설계서인데요. 기획 의도를 명확하게 정리하고, 디자이너·개발자·QA 등과 원활하게 소통하기 위해 꼭 필요한 핵심 문서입니다.

이번 글에서는 기획자의 의도를 실제로 구현하기 위한 화면설계서를 어떻게 만들면 좋을지 그 구조와 작성 요령을 함께 알아보겠습니다.

 

---

화면설계서의 개념

화면설계서는 앱/웹 서비스의 각 화면이 어떻게 구성되어야 하는지 문서화한 자료로, 기획자가 의도한 기능과 흐름을 명확하게 전달하기 위한 산출물입니다.

보통 와이어프레임과 함께 조건, 기능, 정책 설명이 포함되어 있어 유관 부서와의 커뮤니케이션에 기준점을 제공해 줍니다.

 

역할

• PM, 디자이너, 개발자, QA 등 실무자들과의 협업을 위한 기반 자료
• 개발 전 기획의도를 명확히 공유하고, 구현 범위를 정리함
• 테스트 시 기준으로 삼을 수 있는 문서로 기능 확인 및 이슈 대응에 활용
• 기능 변경, 정책 업데이트 등을 추적하기 위한 기록 용도

 

한계

• 완벽하게 모든 상황을 문서화할 수는 없음
• 서비스 개발이 병행되는 환경에서는 실시간 현행화가 어렵고, 문서와 실제 구현 간의 차이가 생기기 쉬움
• 기획자의 의도를 문서만으로 100% 전달하기는 어렵기 때문에, 구두 커뮤니케이션도 필요

 

목차

화면설계서의 목차는 다음과 같이 3가지 목차로 구성되는데요,

• 표지
• 버전 히스토리
• 화면설계 : 와이어프레임 + 기능 정의

오늘은 와이어프레임과 기능정의가 함께 있는를 화면설계 페이지 템플릿을 작성하는 방법을 알아보겠습니다.

 

---

화면설계 페이지 템플릿 구성

화면설계서 페이지의 구성

화면설계 페이지는 위의 이미지와 같이 1) 기본 정보, 2) 와이어프레임, 3) 설명(정의) 부분으로 구성됩니다.

이 페이지는 주로 표준화된 템플릿을 사용하여 효율적이고 일관성 있게 제작 및 관리합니다.

그럼 각 부분의 구성 요소를 자세히 알아봅시다.

 

1. 기본 정보

화면에 대한 기본 정보는 주로 화면을 식별할 수 있는 정보와 작성 이력 등을 표기합니다.

구분	예시	설명
화면 ID	LOGIN_001	화면 구분을 위한 식별 코드
화면명	로그인	화면명은 주로 타이틀명과 같기도 함
화면 경로	홈 > 로그인	해당 화면을 보려면 어떤 경로로 이동해야 하는지
작성자	홍길동	이력 관리를 위해 작성
마지막 수정일	2024.04.15	수정 발생 시 이력 관리를 위해 작성
기획 버전	v1.3	수정 발생 시 이력 관리를 위해 작성
참조 링크	디자인 / API 명세	참고 링크 제공 필요시 제공 (필수는 아님)

 

이러한 정보들을 화면설계서 상에 정리하면 아래와 같이 정리해볼 수 있겠습니다.

화면설계서 기본정보 구성 예시

 

2. 와이어프레임

다음은 화면의 시각적 구조를 나타내는 와이어프레임입니다.

여기서 디자인 시안을 제공할 필요는 없으며, 대략적인 정보와 기능의 배치를 명확히 전달하는 데 초점을 둡니다.

작성 요령 다양한 케이스(예: 빈 상태, 오류 상태, 입력 완료 등)를 구분하여 상세하게 설명합니다. 각 인터랙션 요소 등 설명이 필요한 영역에는 번호를 부여해, 3. 설명(Description) 영역과 연결되도록 합니다. 구현 기준과 맞지 않는 과도한 디테일을 표현하지 않고, 기획 관점의 구조와 흐름 중심으로 그립니다.

 

💡 추가 팁

저는 화면설계서를 피그마로 작성했지만, 피그마 대신 PPT, FigJam, Notion, Miro 등 도구는 자유롭게 사용 가능합니다.
중요한 건 ‘정보의 전달력’이라는 것을 잊지 마세요!

 

 

3. 설명(Description)

마지막으로 설명 부분에는 앞서 와이어프레임의 각 요소에 부여한 번호에 대응하는 상세 설명을 작성합니다.

중복 없이 간결하고 명확하게 작성하여, 개발자·디자이너·QA가 쉽게 이해할 수 있도록 합니다.

작성 요령 케이스 구분: 빈 상태 / 오류 상태 / 입력 완료 등으로 상세하게 구분 제공 조건: 언제, 어떤 조건에서 이 기능이 제공되는가 기본값 (default): 입력값/선택값 등의 초기 상태 데이터 형식: 예) 숫자, 날짜(YYYY-MM-DD), 문자열 등 오류 처리: 에러 발생 시 메시지, 전환 흐름 등 연동 데이터: 외부 또는 내부에서 어떤 데이터를 불러오는지, 또는 어떤 API와 연결되는지 이동 경로 : 화면에서 특정 요소를 탭했을 때 어떤 화면으로 이동하는지 → 필요 시 조건부 이동도 함께 표기 예: "로그인 성공 시 → 홈 화면 / 실패 시 → 에러 메시지"

 

💡추가 팁

- 문장이 길어지면 가독성이 떨어지기 때문에 항목별로 줄글보다는 bullet 형식으로 정리하는 걸 추천합니다.
- 예시를 함께 작성하면 이해가 훨씬 쉬워져요 (날짜표기 : YYYY-MM-DD ex. 2021-12-22)

 

---

마치며

화면설계서 템플릿

오늘은 이렇게 화면설계서의 기본 구성에 대해 알아봤습니다.

화면설계서 각 요소별로 더욱 디테일한 작성 요령이 궁금하시다면 ‘구독하기’ 누르시고 이어지는 시리즈를 확인해주세요 😄

앞으로도 계속 유용한 UX 실무 지식을 전달해 드리겠습니다.

오늘도, 나를 위해 일하는 하루 되세요!