[정보처리기사] 1.소프트웨어 설계 - 화면 설계 (UI 설계)

용어 정리

스토리보드

정의

1. 스토리의 내용을 쉽게 이해할 수 있도록 주요 장면을 그림으로 정리한 계획표

2. 시나리오의 내용을 시각화하여 표현하기 위한 도구인 동시에, 제작진 사이의 의사소통을 돕기 위한 수단

3. 스토리보드에는 주제와 화면 제목, 화면의 구성, 화면 설명, 연결화면 등을 기록한다.

4. 스토리보드는 그 형식과 용도에 따라 다양한 형식으로 작성할 수 있다.

 

감성공학

인체의 특징과 감성을 제품설계에 최대한 반영하는 기술로, '인간이 가지고 있는 소망으로서의 이미지나 감성을 구체적인 제품설계로 실현해내는 공학적인 접근방법' 이라고 정의할 수 있다.

감성공학 분야

자동차, 가전, 정보통신기기, 가구 분야

---

UI 화면 설계 도구

이름	설명
스토리보드 (Storyboard)	정책, 프로세스, 와이어프레임 등 모든 정보가 포함된 설계 산출물
프로토타입 (Prototype)	실제 구현된 것 처럼 시뮬레이션 할 수 있는 모형
	프로그래밍 되지 않았지만 완성품과 유사
와이어프레임 (Wireframe)	이해관계자들의 협의와 공유를 위해 실제 사용자가 보는 화면 위주의 레이아웃을 라인으로만 설계한 문서
	ex) 손그림, 파워포인트
목업 (Mockup)	실제품을 만들어 보기 전, 디자인의 검토를 위해 실물과 비슷하게 시제품을 제작하는 작업의 프로세스, 결과물을 통칭하는 것
	실제 서비스와 같은 모습이지만 정적이다.

UI 시나리오 문서 작성의 요건

내용	설명
1. 완전성 (Complete)	1. (누락 없이) 완전해야 한다.
	2. 최대한 빠짐없이 가능한 한 상세하게 기술한다.
	3. 시스템 기능보다 사용자의 작업(task)에 초점을 맞춰 기술한다.
2. 일관성 (Consistent)	1. 일관성이 있어야 한다. (서비스에 대한 목표, 시스템 및 사용자의 요구사항)
	2. 모든 문서의 UI 스타일 (Flow 또는 Layout)을 일관적으로 구성한다.
3. 이해성 (Understandable)	1. 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명한다.
	2. 이해하지 못하는 추상적인 표현이나 이해하기 어려운 용어는 사용하지 않는다.
4. 가독성 (Readable)	1. 문서를 쉽게 읽을 수 있어야 한다. (문서 템플릿과 타이포그래피 typography)
	2. 표준화된 템플릿을 작성하여 적용한다. (회사 고유 양식 등)
	3. 버전의 넘버링은 v1.0, v2.0 등과 같이 일관성 있게 한다.
	4. 문서의 인덱스에 대한 규칙 적용, 목차 제공이 중요하다.
	5. 줄의 간격은 충분하게 유지하며, 단락에 대한 구분과 들여쓰기의 기준을 마련하여 읽기에 쉽고 편해야 한다.
	6. 여백과 빈 페이지는 적절하게 활용하여 여백의 미를 살리도록 한다.
	7. 시각적인 효과를 위해 하이라이팅은 일관되게 사용한다.
	8. 편집기의 상호 참조 (Cross-referencing) 기능을 활용한다. (하이퍼링크)
5. 수정 용이성 (Modifiable)	1. 쉽게 변경이 가능해야 한다.
	2. 수정 또는 개선 사항을 시나리오에 반영함에 있어 쉽게 적용할 수 있어야 한다.
	3. 동일한 수정 사항을 위해 여러 문서를 편집하지 않도록 한다.
6. 추적 용이성 (Traceable)	1. 쉽게 추적이 가능해야 한다.
	2. 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생했는지 추적이 쉬워야 한다.