3일차 : 2-1 UI 설계

UI 흐름설계 및 상세 설계

1. UI 설계 프로세스

UI 설계 프로세스는 문제 정의, 사용자 모델 정의, 작업 분석, 컴퓨터 오브젝트 및 정의, 사용자 인터페이스 정의, 디자인 평가
1. 문제 정의 : 시스템의 목적을 수립하고 최적화하기 위하여 해결해야 할 문제를 정의
2. 사용자 모델 정의 : 시스템을 사용할 사용자의 특성을 파악하여 사용자 모델을 정의, 사용자 모델은 사용자의 컴퓨터 소프트웨어와 작업에 대한 지식 정도에 따라 초보자, 중급자, 숙련자로 분류
3. 작업 분석 : 해결해야할 문제를 정의하고 사용자 특징을 세분화하는 작업 분석 수행
4. 컴퓨터 오브젝트 및 기능 정의 : 분석한 작업을 컴퓨터의 어떤 사용자 인터페이스를 통해 표현할 것인지 정의
5. 사용자 인터페이스 정의 : 작업 모델을 기반으로 작업자가 예측한 대로 동작하도록 사용자 인터페이스를 정의, 사용자 인터페이스 설계에서는 컴퓨터나 작업 수행 방법에 대해 상호 작용을 하는 오브젝트(마우스, 키보드 등)를 선택, 시스템의 상태를 명확히 함
6. 디자인 평가 : 설계한 인터페이스가 분석한 작업에 맞게 설계가 되었는지, 사용자의 능력이나 지식에 적합한지, 사용자가 쓰기 쉽고 편리한지 등을 평가
=> GOMS,휴리스틱 등의 사용성 공학의 평가 방법론 활용
CF : GOMS =>> Goals(목표), Operation(행위), Methods(방법), Selection(선택 규칙)의 약자
=> GOMS Model은 사용자가 시스템이나 서비스를 사용하면서 어떻게 이해하고 배우며 사용하는지에 대해 예측함으로써 이를 수행하기 위해 소요되는 시간이나 학습시간 등을 평가 하는 방법
cf : 휴리스틱(Heuristic) : 경험에 기반하여 문제를 해결 또는 학습하거나 발겨하는 기법

2. UI 흐름 설계

화면에 표현되어야 할 기능 작성, 화면의 입력 요소 확인, UI 요구사항을 기반으로 유스케이스 설계, 기능 및 양식 확인 순으로 되어 있다.
[UI 흐름 설계]
1. 화면에 표현되어야 할 기능 작성 : 기능적 요구사항 검토(입출력 데이터 파악, 저장 데이터 분석, 수행 연산 분석), 비기능적 요구사항 정의(처리속도, 보안성 등 시스템 성능)
2. 화면의 입력요소 확인 : 화면에 표현되어햘 가능 확인, 화면의 입력 요소 확인, 추가적으로 필요한 화면 요소 확인, 기능 표현을 위해 필요한 페이지 확인, 각 화면 간 이동과 흐름에 대한 확인
3. UI 요구사항을 기반으로 유스케이스 설계 : UI 요구사항을 기반으로 액터별 시나리오 작성 , 액터의 상호작용을 기반으로 액터를 그룹화, 세분화, 유스케이스 설계(각 입력 요소들의 형태와 입력방법 구상, 각 화면 요소들의 배치 구사아)
cf: 액터(Actor) : 시스템 외부에 있고 시스템과 상호작용을 하는 사람 또는 시스템이다.
cf : 유스케이스(Usecase) : 시스템이 액터에게 제공해야 하는 기능으로 시스템 요구사항이자, 사용자 입장에서 바라본 시스템의 기능이다.
4. 기능 및 양식 확인 : 입력 박스, 콤보 박스, 라디오 버튼, 체크박스를 확인하고 규칙정의

3. UI 상세 설계

UI 요구사항과 UI 표준 및 지침 기반으로 사용자의 편의성 고려한 메뉴 구조 설계, 내/외부 화면과 폼 설계, UI 검토 및 보완 프로세스 단계로 상세 설계를 한다.
[UI 상세 설계]
1. UI 요구사항 기반으로 메뉴 구조 설계 : UI 상세 설계를 위한 요구사항을 최종 확인, UI 설계서 표지 및 개정 이력을 작성, UI 구조, 메뉴 구조, 화면 구조 설계
2. 내/외부 화면과 폼 설계 : 실행 차이를 줄이기 위한 UI 설계 원리 검토, 평가 차이를 줄이기 위한 UI 설계 원리 검토, 하위 시스템 단위의 내/외부 화면과 폼 설계
3. UI 검토 및 보완 : UI가 요구사항에 맞도록 설계되었는지 UI 시연을 통한 사용성 검토 및 필요 시 보완 수행

감성공학

1. 감성공학 개념

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

2. 감성공학의 접근 방법

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

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

감성공학 관련 기술의 종류에는 제품 설계에 활용할 수 있는 감성 공학의 기반 기술과 감성공학 기반의 인터페이스 구현을 위한 기술, 적합성 판단 및 새로운 감성 창출을 위한 응용기술이 있다.
[감성공학 기반 기술]
1. 인간공학 : 인간의 특성을 고려하여 인간을 위해 사용되는 물건, 시스템, 환경의 디자인을 과학적인 방법으로 사용하기 편리하게 만드는 응용학문
2. 생체 기술 : 생물체가 갖고 있는 다양한 기능을 인위적으로 모방하여 이용하는 기술
3. 인간 감각 계측 기술 : 인간이 가지고 있는 감각을 측정하는 기술
[감성공학 기반 인터페이스 구현 기술]
1. 센서 및 센싱 기술 : 온도/속도, 장치의 상태를 계측 및 제어하며, 어떠한 반응에 의해 자동으로 행동할 수 있도록 하는 기술
2. 디스플레이 기능 : 인간의 시각에 최적화된 영상을 보여주는 기술
3. 액츄에이터 기술 : 유체 에너지를 이용하여 기계적인 작업을 하는 기술
4. 센서 퓨전 기술 : 측정 대상물로부터 물리량을 검출하고 검출된 물리량을 전기적인 신호로 변환시켜주는 센서를 응용하는 기술
5. 마이크로 머시닝 기술 : 직접회로(IC) 제조기술을 이용하여 3차원 구조의 센서를 미세 가공하는 기술
cf : 직접회로(Integrated Circuit) : 하나의 반도체 기판에 다수의 능동소자(트랜지스터, 진공관 등)와 수동소자(저항, 콘덴서, 저항기 등)를 초소형으로 집적, 서로 분리될 수 없는 구조로 만든 완전한 회로기능을 갖춘 기능소자이다.
6. 퍼지 뉴럴 네트워크 기술 : 인간의 뇌 기능을 적극적으로 모방하여 연산, 인공지능에 활용하는 기술
7.산업 디자인 기술 : 인간이 편리하게 활용할 수 있는 최적의 산업 제품을 만드는 디자인 기술

[적합성 판단/새로운 감성 창출기술]
1. 사용성 평가 기술 : 인간의 감성에 기반한 사용 편의성 등을 평가하는 기술
2. 가상 현실 기술 : 어떤 특정한 상황을 3차원 그래픽으로 나타냄으로써 마치 실제 주변 상황/환경과 상호작용을 하는것처럼 만들어 주는 기술

4. 감성공학 관련 기술의 적용사례

감성공학 관련 기술의 적용 사례로는 주행 안전 기술과 무안경 3D TV, 스마트 UI 기술이 있다.
1. 주행 안전 기술 : 감성공학 기반의 주행 안전 기술이 최근에 제작되는 자동차와 자율주행 자동차 등에 광범위하게 적용(ex : ADAS)
ADAS(Advanced Driver Assistance System) : 대표적인 주행 안전 기술로 첨단 감지 센서와 GPS, 통신, 지능형 영상 장비 등을 이용하여 주행상황을 차량 스스로 인지하여 상황을 판단 자동차를 제어하거나 운전자가 미리 위험요소를 감지할 수 있도록 소리, 불빛 진동등으로 알려주는 지능형 운전자 보조 시스템이다.

2. 무안경 3D TV : 감성공학 기반으로 인간 눈의 움직임에 따라 최적의 3D 화면을 구현, 기존 3D TV 시청의 가장 큰 문제점이던 눈의 피로도 증과와 3D 화면의 불규칙성 문제를 해결한 TV

3. 스마트 UI : 감성공학 기반의 터치 기술을 스마트폰 등에 보편적으로 적용하여 편의성 극대화, 감성공학 기반의 뇌-컴퓨터 인터페이스(BCI : Brain-Computer Interpace)는 뇌 신경계로부터의 신호를 측정, 분석하여 컴퓨터 또는 외부기기를 제어하거나 사용자의 의도를 외부에 전달하기 위한 기술

UI 설계 도구

1. UI 설계 도구의 개념

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

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

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

3. UI 설계 도구의 유형

UI 설계 도구의 유형은 UI 구현 절차에 따라 기획 단계에서 화면 UI 설계 및 인터랙션 적용에 적합한 도구와 설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분
UI 설계 도구를 세분화 하면 화면 설계 도구, 프로토타이핑 도구, UI 디자인 도구로 나눌 수 있다.
[1.화면 설계 도구]
1. 파워 목업(Power Mockup) : 파워 목업은 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴, 파워포인트에서 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있음
2. 발사믹 목업(Balsmiq Mockup) : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구, 디테일한 화면 구성보다는 간단한 스케치에 활용
3. 카카오 오븐(Oven) : 카카오에서 제작한 온라인 프로토타이핑 도구, 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR코드 및 단축 URL을 통해 공유
cf : Mockup : 비용절감 목적으로 실제 제품이 나오기 전 만드는 모형을 의미한다.

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

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

[4. UI 디자인 산출물로 작업하는 프로토타이핑 도구]
1. 인비전(Invison) : 포토샵, 스케치 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구

2. 픽사에이트(Pixate) : 2015년 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스북, 구글 등 다양한 회사에서 사용, 모바일 앱 프로토타이핑에 최적화되어 있고, 디테일한 인터랙션을 설정할 수 있는 도구

3. 프레이머(Framer) : 커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구, 코드 기반으로 작동되어 실제 작업물과 흡사하게 작동
   cf : 커피 스크립트(Coffee Script) : 자바 스크립트의 여러 단점을 해결하기 위한 프로그래밍 언어로 자신의 언어로 작성된 프로그램을 자바 스크립트로 변환할 수 있는 컴파일러를 제공하기 때문에 개발할 때 자바스키립트를 쉽게 대체하여 사용할 수 있다.