UI (2)

UI 설계 단계

UI 설계 단계

• 문제 정의 : 시스템의 목적과 해결해야 할 문제를 정의
• 사용자 모델 정의 : 사용자 특성을 결정하고, 소프트웨어 작업 지식 적도에 따라 초보자, 중급자, 숙련자로 구분
• 작업 분석 : 사용자의 특징을 세분화하고 수행되어야 할 작업을 정의
• 컴퓨터 오브젝트 및 기능 정의 : 작업 분석을 통하여 어떤 사용자 인터페이스에 표현할지를 정의
• 사용자 인터페이스 정의 : 모니터, 마우스, 키보드, 터치스크린 등 물리적 입출력 장치 등 상호작용 오브젝트를 통하여 시스템 상태를 명확히 함
• 디자인 평가 : 사용자 능력, 지식에 적합한가? 사용자가 사용하기 편리한가? 등의 평가를 의미. 사용성 공학을 통하여 사용성 평가를 할 수 있음. 평가 방법론으로는 GOMS, Heuristics 등이 있음

UI 상세 설계 단계

UI 메뉴 구조 설계	- 요구사항과 UI 표준 및 지침에 따라 사용자의 편의성을 고려함 - 요구사항 최종 확인, UI 설계서 표지 및 개정 이력을 작성
내/외부 화면과 폼 설계	- UI 요구사항과 UI 표준 지침에 따라 하위 시스템 단위를 설계함. 실행 차를 최소화하기 위하여 UI 설계 원리 검토 → 행위 순서 검토 → 행위 순서대로 실행 검토함 - 평가 차를 줄이기 위한 UI 설계 원리를 검토함
UI 검토 수행	- UI 검토 보완을 위한 시뮬레이션 시연 구성원에는 컴퓨터 역할을 하기 위해 서류를 조작하는 사람, 전체적인 평가를 위한 평가 진행자, 관찰자가 있음. 이 평가 결과를 토대로 설계를 보완함 - UI 시연을 통한 사용성에 대한 검토 및 검증을 수행함

UI 상세 설계 - 시나리오 작성 원칙

• UI 전체적 기능, 작동 방식을 개발자가 쉽게 이해할 수 있도록 구체적으로 작성함
• 대표 화면 레이아웃 및 하위 기능을 정의하고 Tree 구조나 Flowchart 표기법을 이용
• 공통 적용이 가능한 UI 요소와 상호작용(Interaction)을 일반적인 규칙으로 정의함
• 상호작용의 흐름 및 순서, 분기, 조건, 루프를 명시함
• 예외 상황에 관한 사례를 정의하고 UI 시나리오 규칙을 지정함
• 기능별 상세 기능 시나리오를 정의하되 UI 일반 규칙을 지킴
• 시나리오 문서의 작성 요건 : 완전성, 일관성, 이해성, 가독성, 수정 용이성, 추적 용이성

UI 흐름 설계서 구성

• UI 설계서 표지 : 프로젝트 이름, 시스템 이름을 포함하여 작성
• UI 설계서 개정 이력 : 처음 작성 시 '초안 작성'을 포함함. 초기 버전은 1.0으로 설정하고 완성 시 버전은 x.0으로 바꾸어 설정함

UI 요구사항 정의

• 시스템 구조 : UI 프로토타입 재확인 후 UI 시스템 구조를 설계함
• 사이트맵 : UI 시스템 구조를 사이트맵 구조로 설계함
• 프로세스 정의 : 사용자 관점에서의 요구 프로세스 순서를 정리함
• 화면 설계 : UI 프로세스/프로토타입을 고려하여 페이지 별로 화면을 구성 및 설계함

UI의 종류

• GUI(Graphical User Interface), OUI(Organic User Interface), NUI(Natural User Interface), CLI(Command dLine Interface)

 

UI 설계 도구

UI 설계에 도움을 주는 도구들

• 와이어 프레임(Wire Frame) : UI 중심의 화면 레이아웃을 선(Wire)을 이용하여 개략적으로 작성함
• 목업(Mockup) : 시각적으로 구서어 요소를 배치하는 것으로 일반적으로 실제로 구현되지는 않음
• 프로토타입(Prototype) : Interaction(상호작용)이 결합하여 실제 작동하는 모형
• 스토리보드(Storyboard) : 정책, 프로세스, 와이어 프레임, 설명이 모두 포함된 설계 문서

와이어 프레임

• 기획 단계 초기에 작성하며, 구성할  화면의 개략적인 레이아웃이나 UI 요소 등의 틀을 설계하는 단계
• 개발 관계자(디자이너, 개발자, 기획자) 사이의 레이아웃 협의, 현재 진행 상황 등을 공유할 때 사용
• 툴 : 핸드라이팅, 파워포인트, 키노트, Sketch, Balsamiq, Mockup, Adobe Experience Design, 카카오 오븐

목업(Mockup)

• 와이어 프레임보다 좀 더 실제 제품과 유사하게 만들어지는 실물 크기의 정적 모형으로 시각적으로만 구현됨
• 툴 : 카카오 오븐, Balsamiq Mockup, Power Mockup

스토리보드

• UI/UX 구현에 수반되는 사용자와 작업, 인터페이스 간 상호작용을 시각화한 것
• 개발자/디자이너와의 의사소통을 돕는 도구
• 완성해야 할 서비스와 예상되는 사용자 경험을 미리 보기위 한 방법론
• 작성 목적 : 설계에 필요한 조각을 모아 순서대로 놓고 배치해 보고 쌓아서 조립하는 과정으로 설계 단계에서 발생할 수 있는 문제를 미리 발견하고 대처하기 위한 과정
• 작성 방법 : 상단/우측 → 제목, 작성자 기재, 좌측 → UI 화면, 우측 → Description
• 작성 단계 : 메뉴 구성도 만들기 → 스타일 확정하기 → 설계하기

 

UI 프로토타입

UI Prototype

• 도출된 요구사항을 토대로 프로토타입(시제품)을 제작하여 대상 시스템과 비교하면서 개발 중에 도출되는 추가 요구사항을 지속해서 재작성하는 과정
• 와이어 프레임, 스토리보드에 Interaction을 적용한 것
• 동적인 형태로 구현된 모형
• 툴 : HTML/CSS, Axure, Invision Studio, 카카오 오븐, Flinto, 네이버 Proto Now
• 작성방법에 따른 분류 : 디지털 프로토타입, 페이퍼 프로토타입

프로토타입의 장단점

장점	단점
- 사용자 설득과 이해가 쉬움 - 개발 시간 감소 - 오류를 사전에 발견할 수 있음	- 수정이 많아지면 작업 시간이 늘어날 수 있음 - 필요 이상으로 자원을 많이 소모됨 - 정확한 문서 작업이 생략되는 문제가 발생할 수 있음

프로토타입 작성 도구 및 방법

구분	방법	비고
Analog	- 포스트잇, 칠판, 종이, 펜 등을 이용 - 소규모 개발, 제작 비용과 기간이 적을 경우 이용 - 빠른 업무 협의가 필요할 경우 이용	손, 펜
	- 비용이 저렴하면서 즉시 변경이 가능 - 회의 중 바로 작성할 수 있음 - 상호 연관 관계가 복잡한 경우 표현이 어려움 - 공유가 어려움	-
Digital	Power Point, Acrobat, Invision, Marvel Adobe Xd, Flinto, Priciple, Keynnote, UX pin, HTML 등을 이용	Digital Tool
	- 재사용성이 높지만 툴을 다룰 줄 아는 전문가가 필요 - 목표 제품과 비슷하게 테스트할 수 있으며 수정이 수월함	-

UI Prototype 작성 시 고려사항

• 프로토타입 계획작성, 프로토타입 범위 확인, 프로토타입 목표 확인, 프로토타입 기간 및 비용 확인, 프로토타입 산출물 확인, 프로토타입 유의사항 확인

UI Prototype 계획시 고려사항

• 프로토타입 목표 확인, 프로토타입 환경 확인, 프로토타입 일정 확인, 프로토타입 범위 확인, 프로토타입 인원 확인, 프로토타입 아키텍처 검증 확인, 프로토타입 이슈 및 해결, 프로토타입 가이드 확정, 프로토타입 개발 생산성 확인, 프로토타입 결과 시연

UI Prototype 제작 단계

• 사용자 요구분석 → 프로토타입 작성 → 프로토타입 사용자 테스트 → 수정과 합의 단계

 

감성 공학

감성 공학

• 인간의 소망으로 이미지나 감성을 구체적 제품 설계를 통하여 실현해 내는 공학적 접근 방법으로 인간과 컴퓨터 간의 상호작용.
• 즉 HCI(Human Computer Interaction or Interface) 설계에 인간의 특성, 감성 등의 정량적 측정과 평ㅇ가를 통하여 제품 환경 설계에 반영하는 기술
• 인간이 가지고 있는 소망으로서의 이미지나 감성을 구체적인 제품 설계로 실현해 내는 인문사회 과학, 공학, 의학 등 여러 분야의 학문이 융합된 기술
• 감각 및 생체계측, 센서, 인공지능 등의 생체 제어 기술 등을 통해 과학적으로 접근함
• 최종 목표는 감성 공학을 통하여 인간이 쉽고 편리하고 쾌적하게 시스템과 어우러지는 것
• 1988년 시드니 국제 학회에서 '감성 공학'으로 명명됨

감성 공학 접근 방법

• 1류(의미 미분법) : 인간의 감각, 감성을 표현하는 어휘(형용사)를 이용하여 제품에 대한 이미지를 조사 분석하고, 디자인 요소에 연계하는 접근 방법
• 2류 : 1류와 기본 틀은 공유하고, 감성 어휘 수집의 전 단계에서 평가자들의 생활 양식을 추가.
  • 제품에 대한 기호 및 수요를 분석 대상의 소속 지역, 생활 양식, 의식 문화를 분석하는 접근 방법이며 1류와 함께 감성의 심리적 특성을 강조
• 3류 : 1류의 감성 어휘 대신 평가자의 특정 시제품을 사용하여 자신의 감각 척도로 감성을 표출하는 방법.
  • 평가자의 생리적 감각 계측을 통해서 그 객관성이 보완되고 정량화된 값으로 산출됨
  • 대상 제품의 물리적인 특성에 대하여 객관적인 지표와의 연관 분석을 통하여 제품 설계에 응용됨
  • 인간 감각 계측과 이의 활용이 강조된 접근 방법으로 감성의 생리적 특성을 중요시함

HCI(Human Computer Interaction or Interface)

• 인간과 컴퓨터의 상호작용을 연구하여 어떻게 하면 좋은 제품을 만들 수 있는지를 연구함

HCI 목적

• 컴퓨터를 인간이 쉽게 사용할 수 있게 하여 상호작용(UX)을 개선하는 것
• 컴퓨터의 도구로서 잠재력을 극대화해 인간의 의지를 더 자유롭게 함
• 인간의 창의력, 인간 사이의 의사소통과 협력을 증진하는 데 있음

감성 공학 요소 기술

• 기초 기술, 구현 기술, 응용 기술

감성 공학 관련 기술

• 생체측정 기술, 인간 감성 특성 파악 기술, 감성 디자인 기술과 오감 센서 및 감성 처리 기술, 마이크로 기구 설계, 사용성 평가 기술 및 가상현실 기술