Part 2. 화면 설계 23.01.12(목)

1. 화면 설계 – UI 요구사항 확인 – UI 개요

1) UI 개념

UI(사용자 인터페이스)는 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체이다.

좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면이다.

 

2) UI 유형 – CG NO

(1) CLI(Command Line Interface) – 정적인 텍스트 기반 인터페이스

명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스

 

(2) GUI(Graphical User Interface) - 그래픽 반응 기반 인터페이스

그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스

 

(3) NUI(Natural User Interface) - 직관적 사용자 반응 기반 인터페이스

사용자가 가진 경험을 기반으로 키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스(터치, 음성 포함)

 

(4) OUI(Organic User Interface) - 유기적 상호 작용 기반 인터페이스

입력장치가 곧 출력장치가 되고, 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자

인터페이스

 

3) UI 특징

(1) 오류 최소화

구현하고자 하는 결과의 오류를 최소화

 

(2) 작업기능 구체화

막연한 작업 기능에 대해 구체적인 방법을 제시

 

(3) 상호 작용

사용자 중심의 상호 작용이 되도록 함

 

(4) 작업시간 감소

사용자의 편의성을 높여 작업 시간을 감소시킴

 

(5) 피드백 제공

시스템의 상태와 사용자의 지시에 대한 효과를 보여주어 사용자가 명령에 대한 진행 상황과 표시된 내용을 해석할 수 있도록 도와줌

 

4) UI 설계 원칙 - 직유학유

(1) 직관성

누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함

 

(2) 유효성

정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작

 

(3) 학습성

초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작

 

(4) 유연성

사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작

* 인터랙션이란 입출력 장치를 매개로 디지털 시스템과 사람이 주고받는 일련의 의사소통 과정이다.

 

5) UI 설계 지침

(1) 사용자 중심

사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공하여 실사용자에 대한 이해가 바탕이 되어야 함

심미성보다 사용성을 우선하여 설계해야 함

 

(2) 효율성

효율성을 높일 수 있게 설계해야 함

 

(3) 일관성

버튼이나 조작 방법을 사용자가 기억하기 빠르고 쉽게 습득할 수 있도록 설계해야 함

 

(4) 단순성

조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화

 

(5) 결과 예측 가능

작동시킬 기능만 보고도 결과 예측이 가능해야 함

 

(6) 가시성

주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야 함

 

(7) 표준화

디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용 가능해야 함

 

(8) 접근성

사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함

 

(9) 명확성

사용자가 개념적으로 쉽게 인지해야 함

 

(10) 오류 발생 해결

사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함

오류 메시지는 이해하기 쉬워야 하고, 오류로부터 회복을 위한 구체적인 설명이 제공되어야 함

오류로 인해 발생할 수 있는 부정적인 내용은 적극적으로 사용자들에게 알려야 함

오류 메시지는 소리나 색 등을 이용하여 듣거나 보기 쉽게 의미 전달을 하도록 함

발생하는 오류를 쉽게 수정할 수 있어야 하고, 사용자에게 피드백을 제공할 수 있도록 설계해야 함

 

6) UI 시스템의 필요 기능

사용자의 입력을 검증한다.

에러 처리와 에러 메시지 처리를 한다.

도움과 프롬프트를 제공한다.

 

2. 화면 설계 – UI 요구사항 확인 – UI 표준

1) UI 표준 개념

UI 표준은 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약이다.

 

2) UI 표준 구성

(1) 전체적인 UX 원칙

사용자의 관점에서 사용자 업무를 효율적으로 수행할 수 있는 UX 원칙 정의

 

(2) 정책 및 철학

조직의 목표나 정체성을 포함하는 정책 및 철학 설정

 

(3) UI 스타일 가이드

UI에 대한 구동 환경 및 레이아웃 등을 정의

 

(4) UI 패턴 모델 정의

CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의

* CRUD 방식이란 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

 

(5) UI 표준 수립을 위한 조직 구성

UI 팀 및 표준 개발 팀을 주축으로 추진 조직 구성

 

3) UI 화면 구성 요소

(1) 그리드

UI를 구성하는 방법 중 테이블 형태로 UI를 구성

 

(2) 버튼/컨트롤 타입

사용자로부터 입력을 받을 수 있도록 콤보 박스, 토글 버튼, 텍스트 박스, 라디오 버튼, 체크 박스 구성

 

1-콤보 박스

하나의 입력 박스아 있는 상태에서, 박스를 클릭하면 선택할 수 있는 목록이 길게 나타나는 요소

 

2-토글 버튼

두 가지 상태 중에 하나로 토글되도록 만든 요소

 

3-텍스트 박스

사용자들이 텍스트를 입력할 수 있는 UI 요소로 텍스트 한 줄 또는 여러 줄을 쓸 수 있도록 구성

 

4-라디오 버튼

여러 개 옵션 중 1개의 옵션을 선택할 때 사용하는 요소

 

5-체크박스

여러 개 옵션 중 1개 이상의 옵션을 선택할 때 사용하는 요소

 

(3) Page 요소

폰트규정, 아이콘 요소, 체크박스/라디오 버튼, 말풍선, 이미지 표시, 탭 표시, 스템 표시, 페이지 이동, 상하 스크롤, 정보입력 등으로 구성

 

(4) 팝업 요소

윈도 팝업, 레이어 팝업

 

5) Alert 요소

정보 누락/정보 오류 Alert, 업무 처리 완료 Alert, 삭제/수정 Alert, 업무 안내성 Alert

 

3. 화면 설계 – UI 요구사항 확인 – 스토리보드

1) 스토리보드 개념

스토리보드는 UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서이다.

디자이너와 개발자가 최종적으로 참고하는 산출 문서이다.

UI 화면 설계를 위해서는 스토리보드, 와이어프레임, 프로토타입이 활용된다.

 

2) UI 화면 설계 구분

(1) 와이어프레임(Wireframe)

이해관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업

 

(2) 스토리보드(Storyboard)

정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물

 

(3) 프로토타입(Prototype)

정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용함으로써 실제 구현된 것처럼 시뮬레이션할 수 있는 모형

 

4. 화면 설계 – UI 설계 – 감성공학

1) 감성공학의 개념

감성공학은 인간의 감성을 정성적, 정량적으로 측정 및 평가하고, 과학적으로 분석하여 이를 구체적인 제품 설계로 실현해 내는 공학이다.

감성공학의 연구영역은 인간의 생리적 특성에 기반한 인간과 기계 또는 인간과 환경 사이를 연계시키는 인터페이스 설계 분야이다.

 

2) 감성공학의 접근 방법

(1) 1류 접근 방법

인간의 감성을 표현하는 어휘를 이용하여 제품 이미지를 조사, 그 분석을 통해 제품 디자인 요소와 연계시키는 접근 방법

 

(2) 2류 접근 방법

개인의 연령, 성별 등의 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법

 

(3) 3류 접근 방법

기존의 감성적 어휘 대신 공학적인 방법으로 접근하여 인간의 감각을 측정, 이를 바탕으로 수학적 모델을 구축하여 활용

 

5. 화면 설계 – UI 설계 – UI 설계 도구

1) UI 설계 도구의 개념

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

UI 설계에서 비용 절감 목적으로 실제 제품이 나오기 전에 만드는 모형인 목업을 활용한다.

 

* 목업

디자인, 사용방법 설명, 평가 등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형이다.

목업은 시각적으로만 구성요소를 배치하는 것으로 일반적으로 실제로 구현되지는 않는다.