화면 설계 - UI

(1) UI 개념

1. UI란?

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

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

 

 

2. UI 유형

유형	특징	설명
CLI	정적인 텍스트 기반 인터페이스	명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
GUI	그래픽 반응 기반 인터페이스	그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스
NUI	직관적 사용자 반응 기반 인터페이스	사용자가 가진 경험을 기반으로 키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스(터치, 음성 포함)
OUI	유기적 상호 작용 기반 인터페이스	입력장치가 곧 출력자치가 되고, 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스

 

3. UI 특징

- UI는 오류를 최소화 하고, 작업기능을 구체화하고, 사용자 중심의 상호작용이 되어야 하고, 사용자의 편의성을 높여 작업시간을 감소시켜야 한다. 

 

4. UI 설계 원칙

• 직관성 : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함
• 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
• 학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 하여야 함
• 유연성 : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작

 

 

(2) UI 표준

1. UI 표준이란?

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

 

 

2. UI 구동환경

- UI를 구동하기 전에는 OS, 웹 브라우저, 모니터 해상도, 프레임 세트를 확인한다. 

 

3. 레이아웃 정의

- 기본 배치는 크게 상단, 왼쪽, 콘텐츠 영역의 3개 부분으로 설계

- 하단 메뉴 구성은 상황에 맞게 추가 및 제외한다.

 

4. UI 화면 구성요소

1. 그리드 : 테이블 형태
2. 버튼/컨트롤 타입
   1. 콤보 박스 : 입력 박스 형태
   2. 토글 버튼 : 두 가지 상태 중에 하나로 토글되도록 만듦
   3. 텍스트 박스 : 사용자들이 텍스트를 입력할 수 있도록 함
   4. 라디오 버튼 : 여러 개 옵션 중 1개의 옵션 선택 버튼
   5. 체크박스 : 1개 이상을 선택하는 버튼
3. Page 요소 : 폰트규정, 아이콘 요소, 체크박스 등으로 구성
4. 팝업 요소 : 윈도 팝업, 레이어 팝업
5. Alert 요소 : 정보 누락/정보 오류 시 Alert 창

5. UI 패턴 모델

- CRUD 방식을 기반으로 하여 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발.

 

• 업무 화면 클라이언트 : 주로 리치 클라이언트나 씬 클라이언트가 존재
• 서버 컨트롤러 : 프레임워크를 도입한다면 해당 프레임워크가 제공하는 방식 채택
• 서버 메시지 및 예외처리 : S(시스템 오류),E(애플리케이션 예외),I(정상적인 업무처리결과 메시지) 형태로... 

 

(3) UI 지침

- UI 지침은 UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항이다.

 

1. UI 표준 적용을 위한 환경 분석 

- 이때 사용자 분석, 기능 및 설계 분석을 한다.

 

 

 

(4) 스토리보드

 

1. 스토리보드란

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

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

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

 

 

 

(5) UI 설계

1. UI 설계 프로세스

- 문제 정의, 사용자 모델 정의, 작업 분석, 컴퓨터 오브젝트 및 기능 정의, 사용자 인터페이스 정의, 디자인 평가 단계로 구성되어 있음.

 

1. 문제 정의 : 시스템의 목적 수립, 해결해야 할 문제 정의
2. 사용자 모델 정의 : 시스템을 사용할 사용자의 특성을 파악하여 사용자 모델 정의 
3. 작업 분석 : 해결해야 할 문제를 정의하고 사용자 특징을 세분화하는 작업 분석 수행
4. 컴퓨터 오브젝트 및 기능 정의 : 분석할 작업을 컴퓨터의 어떤 사용자 인터페이스를 통해 표현할 것인지 정의
5. 사용자 인터페이스 정리 : 작업자가 예측한 대로 동작하도록 사용자 인터페이스 정의
6. 디자인 평가 : 사용자가 쓰기 쉽고 편리한지를 평가

 

2. UI 흐름 설계

1 - 화면에 표현되어야 할 기능 작성

2 - 화면의 입력 요소 확인 

3 - UI 요구사항을 기반으로 유스케이스 설계

4 - 기능 및 양식 확인

 

3. UI 상세 설계

1 - UI 요구사항 기반으로 메뉴 구조 설계

2 - 내, 외부 화면과 폼 설계

3 - UI 검토 및 보안 

 

 

(6) 감성공학

1. 감성공학이란

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

- 인간의 생리적, 심리적 특성에 기반한 인간과 기계 또는 인간과 환경 사이를 연계시키는 인터페이스 설계 분야이다.

 

2. 감성공학의 접근 방법

• 1류 접근 방법 : 의미 미분법(인간의 감성을 표현하는 어휘를 이용)
• 2류 접근 방법 : 문화정 감성의 일부 반영
• 3류 접근 방법 : 공학적인 방법으로 접근하여 인간의 감각을 측정

 

(7) UI 설계 도구

1. UI 설계 도구의 개념

-  UI 설계 도구는 사용자와 시스템 사이에 의사소통 할 수 있도록 일시적이거나 영구적으로 만들어진 도구이다.

- 이 도구를 통해 비용 절감 목적으로 목업을 활용한다.