📌 화면 설계 - UI 설계서 작성

 

 

목차

 

 

UI 설계서의 개요

📌 UI 설계서는 사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서로, 상세 설계 전에 대표적인 화면들을 설계한다.

 

• UI 설계서는 기획자, 개발자, 디자이너 등과의 원활한 의사소통을 위해 작성한다.
• UI 설계서는 UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의서, 시스템 구조, 사이트 맵, 프로세스 정의서, 화면 설계 순으로 작성한다.

 

UI 설계서 표지 작성

📌 UI 설계서 표지는 다른 문서와 혼동되지 않도록 프로젝트명 또는 시스템명으 포함시켜 작성한다.

 

 

UI 설계서 개정이력 작성

📌 UI 설계서 개정 이력은 UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지를 정리해 놓은 문서이다.

 

• 처음 작성 시 첫 번째 항목을 '초안 작성', 버전(Version)을 1.0으로 설정한다.
• UI 설계서에 변경 사항이 있을 때마다 변경 내용을 적고 버전을 0.1씩 높인다.

 

NO	내용	Version	수정일	작성자
1	초안 작성	V1.0	2024-08-08	홍길동
2	보완	V1.1	2024-09-01	제시카
3	2024-10-10 회의 내용 반영	V1.2	2024-10-07	한길

 

 

UI 요구사항 정의서 작성

📌 UI 요구사항 정의서는 사용자의 요구사항을 확인하고 정리한 문서로, 사용자 요구사항의 UI 적용 여부를 요구사항 별로 표시한다.

 

NO	RFP(Request For Proposal)	확정 여부	비고
1	요구사항 1 - 화면에 표현될 기능	확정	화면 설계 적용
2	요구사항 2 - 화면 구성 요소	확정	화면 설계 적용
3	요구사항 3 - 각 화면간 이동	확정	2024-10-20 회의 반영
4	요구사항 4 - 팝업 창 띄우기	확정	2024-11-20 혐의 결정

 

 

 

시스템 구조 작성

📌 시스템 구조는 UI 요구사항과 UI 프로토타입에 기초하여 전체 시스템의 구조를 설계한 것으로 사용자의 요구사항이 어떻게 시스템에 적용되는지 알 수 있다.

 

 

사이트 맵(Site Map) 작성

📌 사이트 맵은 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계한 것이다.

 

• 사이트 맵을 작성한 후 사이트 맵의 상세 내용(Site Map Detail)을 표 형태로 작성한다.

 

🔔 예시)

 

 

프로세스(Process) 정의서 작성

📌 프로세스 정의서는 사용자 관점에서 사용자가 요구하는 프로세스들을 작업 순서에 맞춰 정리한 것으로 UI의 전체적인 흐름을 파악할 수 있다.

 

 

화면 설계

📌 화면 설계는 UI 프로토타입과 UI 프로세스를 참고하여 필요한 화면을 페이지 별로 설계한 것이다.

 

• 화면을 구분하기 화면 별 고유 ID를 부여하고 별도 표지를 작성한다.
  • 대표적인 화면들에 대해 포함될 정보, 인터페이스 요소, 레이아웃 등이 표현된 와이어프레임을 대략적으로 스케치한다.
  • 주요 흐름을 스토리보드 형태로 작성한다. 디스크립션에는 시스템 정보, 인터렉션, 로직, 정책 등 디자인하거나 설계할 때 필요한 사항을 기록 한다.

 

🔔 예시)

 

 

UI 화면설계의 기본 구성 요소

 

윈도우(Window)	키보드나 마우스 등을 통해 데이터 입력 및 결과를 보여주는 화면상의 표시 영역이다.
메뉴(Menu)	- 화면에서 수행할 기능들을 일정한 형태로 모아놓은 인터페이스이다. - 사용자로 하여금 기능 선택을 수월하게 한다.
아이콘(Icon)	- 수행하고자 하는 동작, 동작의 대상 등을 조그마한 그림 형태로 표현한 인터페이스이다. - 동일한 사용 환경 안에서는 아이콘의 크기는 동일하거나 규칙적인 크기 안에서 제공해야 한다.
포인터(Pointer)	- 입력이 이뤄지는 지점을 알려주는 화면상의 커서이다. - 시스템의 상태를 포인터의 모양으로도 표시한다.