[정보처리기사] UI 설계

[1] UI 흐름설계 및 상세 설계

1. UI 설계 프로세스

1. 문제 정의
2. 사용자 모델 정의
3. 작업 분석
4. 컴퓨터 오브젝트 및 기능 정의
5. 사용자 인터페이스 정의
6. 디자인 평가

2. UI 흐름 설계

1. 화면에 표현되어야 할 기능 작성
2. 화면의 입력 요소 확인
3. UI 요구사항을 기반으로 유스케이스 설계
4. 기능 및 양식 확인

3. UI 상세 설계

1. UI 요구사항 기반으로 메뉴 구조 설계
2. 내, 외부 화면과 폼 설계
3. UI 검토 및 보완

[2] 감성공학

1. 감성공학 개념

• 감성공학은 인간의 감성을 정성적, 정량적으로 측정 및 평가하고, 고학적으로 분석하여 이를 구체적인 제품 설계로 실현해 내는 공학
• 감성공학의 연구영역은 인간의 생리적, 심리적 특성에 기반한 인간과 기계 또는 인간과 환경 사이를 연계시키는 인터페이스 설계 분야

2. 감성공학의 접근 방법

구분	설명
1류 접근 방법	- 의미 미분법 - 인간의 감성을 표현하는 어휘를 이용하여 제품 이미지를 조사, 그 분석을 통해 제품 디자인 요소와 연계시키는 접근 방법
2류 접근 방법	- 문화적 감성의 일부 반영 - 개인의 연령, 성별 등의 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법 - 감성의 심리적 특성을 강조한 접근 방법
3류 접근 방법	- 기존의 감성적 어휘 대신 공학적인 방법으로 접근하여 인간의 감각을 측정, 이를 바탕으로 수학적 모델을 구축하여 활용 - 대상 제품의 물리적 특성에 대한 객관적 지표와 연관분석을 통해 제품 설계에 응용 - 감성의 생리적 특성을 강조한 접근 방법

3. 감성공학 관련 기술의 종류

1) 감성공학 기반기술

• 인간공학
• 생체기술
• 인간 감각 계측 기술

2) 감성공학 기반 인터페이스 구현 기술

• 센서 및 센싱 기술
• 디스플레이 기술
• 엑츄에이터 기술
• 센서 퓨전 기술
• 마이크로 머시닝 기술
• 퍼지 뉴럴 네트워크 기술
• 산업 디자인 기술

3) 적합성 판단 / 새로운 감성 창출 기술

• 사용성 평가 기술
• 가상 현실 기술

[3] UI 설계 도구

1. UI 설계 도구의 개념

- UI 설계도구는 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구

2. UI 개발 단계별 활용 가능한 설계 도구

- 일반적인 UI 개발 프로세스는 분석, 설계, 구현의 절차를 거쳐 요구사항에 부합하는 화면의 구현으로 이루어진다.

프로세스	UI 디자이너	업무전문가/개발자	도구
분석	- UI 표준 설계	- 화면 프로토타이핑 - 화면 정의 - 보고서 정의	- UI 패턴 - UI 모델링
설계	- 디자인 시안 제작 - 화면 템플릿 제작	- 화면 설계 - 보고서 설계 - 응용 아키텍쳐 구현	- UI 설계
구현	-	- 화면 개발	- 프로토타이핑 툴

3. UI 설계 도구의 유형

- UI 설계도구의 유형은 UI 구현 절차에 따라 기획 단계에서 화면 UI 설계 및 인터렉션 적용에 적합한 도구와 설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분할 수 있다

- UI 설계 도구의 유형은 화면설계 도구, 프로토타이핑 도구, UI 디자인 도구, UI 디자인 산출물로 작업하는 프로토타이핑 도구가 있다.

 

1) 화면 설계 도구

도구	설명
파워 목업 (Power Mockup)	- 파워 목업은 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴 - 파워포인트에서 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있음
발사믹 목업 (Balsamiq Mockup)	- 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구 - 디테일한 화면 구성보다는 간단한 스케치에 활용
카카오 오븐 (Oven)	- 카카오에서 제작한 온라인 프로토타이핑 도구 - 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR 코드 및 단축 URL을 통해 공유

2) 프로토타이핑 도구

도구	설명
UX핀 (UXPin)	- 웹브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구 - 구글 글라스에 포함한 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업 지원 가능
액슈어 (AXURE)	- UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구
네이버 프로토나우(ProtoNOW)	- 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로차트 등의 기능 지원

3) UI 디자인 도구

도구	설명
스케치 (Sketch)	- 다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구
어도비 익스피리언스 디자인 CC (Adobe XD)	- UI 디자인에 최적화된 출로 쉽고 직관적인 인터페이스를 제공 - 포토샵, 일러스트와 연동 지원

 

4) UI 디자인 산출물로 작업하는 프로토타이핑 도구

도구	설명
인비전 (Invision)	- 포토샵,스케치 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구
픽사에이트 (Pixate)	- 2015년 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스북, 구글 등 다양한 회사에서 사용 - 모바일 앱 프로토타이핑에 최적화되어 있고, 디테일한 인터랙션을 설정
프레이어 (Framer)	- 커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구 - 코드 기반으로 작동되어 실제 작업물과 흡사하게 작동