제3장 화면 설계

제1절 UI요구사항 확인

1. UI 표준

(1) UI(사용자 인터페이스)의 개념

[1] 외부설계의 한 종류이며, 소프트웨어와 조직 환경과의 인터페이스를 설계하는 과정이다.
[2] 사용자 인터페이스 평가 기준
ㄱ. 배우기 쉬움 : 소프트웨어를 사용할 수 있게 되기까지 배우는 데 걸리는 시간
ㄴ. 속도 : 특정 기능을 수행시키는 데 걸리는 시간
ㄷ. 사용 중 오류의 빈도 : 원하는 작업을 수행시킬 때 사용자가 범한 오류의 빈도
ㄹ. 사용자의 만족 : 시스템에 대한 사용자의 반응
ㅁ. 사용법의 유지 : 시스템 사용에 대한 지식이 얼마나 쉽게 기억될 수 있는가?

(2) 사용자 인터페이스론

[1] 규칙

• 일관성을 유지할 것
• 시작, 중간, 종료가 분명하도록 설계할 것
• 오류 처리 기능 간단히 할 것
• 단순화시켜 기억의 필요성을 줄일 것
• 단축키를 제공할 것

[2] J.Foley의 사용자 인터페이스 4단계 모형
ㄱ. 개념 단계(Conceptual Level) : 대화형 시스템에 관한 심리적 모형
ㄴ. 의미 단계(Semantic Level) : 입력명령과 출력결과가 사용자에게 주는 의미를 표현
ㄷ. 문구(구문) 단계(Syntactic Level) : 명령문을 이루는 단어들의 정의
ㄹ. 어휘 단계(Lexical Level) : 특정 명령문구를 형성하는 절차 등을 의미

[3] HCI(Human Computer Interface)
ㄱ. HCI 설계 모형

• 설계 모형
• 사용자 모형
• 시스템 인식
• 시스템 이미지

ㄴ. 태스크 분석과 모델링

• 사람이 현재 수행하는 테스크를 이해하는 데 적용된 후에 이것들을 HCI의 내용을 구현된 유사한 태스크들의 집합에 사상한다.

(3) UI 종류

• CUI(Character based UI) : 문자 방식의 명령어 입력 사용자 인터페이스
• GUI(Graphic UI) : 그래픽 환경 기반의 마우스 입력 사용자 인터페이스
• NUI(Natural UI) : 사용자의 말과 행동 기반 제스쳐 입력 인터페이스
• 기타(웹 기반 인터페이스(웹 사용자 인터페이스, WUI), 터치 사용자 인터페이스, 텍스트 사용자 인터페이스(TUI) ...)

(4) UI 표준

• 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면 구성 등에 대한 규약을 UI 표준 혹은 표준 UI라고 한다.
• 대표적인 UI표준은 MS Vista UX Guideline, Apple OS X Guideline 이 있다.

2. UI 지침

⭐️

(1) UI 기본원칙

[1] 직관성(intuitiveness)
- 누구나 쉽게 이해하고 사용할 수 있도록 제작
[2] 유효성(Efficiency)
- 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
[3] 학습성(Learnability)
- 초보와 순련자 모두가 쉽게 배우고 사용할 수 있게 제작
[4] 유연성(Flexiblity)
- 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작

3. 스토리보드

• 기획단계에서 이루어지고 이후에 개발될 모형타입을 만드는 것을 일컫는다.

(1) 스토리보드(Storyboard)

• 디자이너/개발자가 참고한느 최종적인 산출문서로써 정책, 비즈니스, 프로세스, 콘텐츠, 구성, 와이어프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨있는 문서이다. 현업에서 해당 문서를 바탕으로 커뮤니케이션을 진행한다. 스토리보드의 툴로는 파워포인트, 키노트, 스케치 등이 있다.

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

• 와이어프레임은 화면 단위의 레이아웃을 설계하는 작업이다. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며, UI, UX, 설계에 집중되어 있다. 와이어 프레임 도구는 손그림, 파워포인트, 스케치, 일러스트 그리고 포토샵이 있다.

(3) 프로토타입(Prototype)

• 프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업이다. 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적효과)를 적용함으로써, 실제 구현된 것처럼 시뮬레이션 할 수 있으며 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행해 볼 수 있다. 이를 통해 설계 단계의 리스크를 사전에 예방할 수 있다.

(4)와이어프레임/스토리보드/프로토타입 관계도

제2절 UI 설계

1. 감성공학

(1) 감성공학의 정의
인간의 감성을 과학적으로 측정하고 평가한 것에 공학적 기술력을 결합시켜 새로운 제품을 만들어 인간에게 더욱 편리하고 안락할 수 있게 도모하려는 기술이다.

(2) 감성공학 기술 활용 분야

[1] 인간공학, 인지공학 등 인간 특성을 파악하려는 연구에 기본을 둔 생체 측정 기술이다.
[2] 인간 특성에 적합핟로ㅗㄱ 사용자 인터페이스를 실현하기 위한 기술로서 센서 공학, 퍼지 뉴럴 네트워크기술, 신경망 기술 등 인간의 오감(시각, 청각, 촉각, 미각, 후각) 센서 및 감성 처리 기술이다.
[3] 사용성 평가 기술, 가상현실 기술 등으로서 인간에 대한 적합성을 판단하고 새로운 감성을 창출하기 위한 기술이다.

(3) 나가마치 미츠오 교수의 감성공학 접근 방법

[1] 감성공학 1류 : 인간의 감성 이미지를 측정하는 방법이며, 이를 통해 제품에 대한 이미지를 조사분석하여 제품의 디자인 요소와 연계시킨다.
[2] 감성공학 2류 : 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법이다. 감성의 심리적 특성을 강조한 접근 방법이라 할 수 있으며, 감성의 개인성에 중점을 둔 '문화적 감성'의 일부를 반영하기도 한다.
[3] 감성공학 3류 : 공학적인 방법으로 접근하여 인간의 감각을 측정하고, 이를 바탕으로 수학적 모델을 구축하여 활용한다. 대상이 되는 제품의 물리적 특성과 인간의 감각이 객관화된지표 사이의 연관성을 분석하여 제품 설계에 응용할 수 있으며, 측정 시 감성의 생리적 특성을 중시한다.

2. UI 설계 도구

• 와어이프레임(Wireframe) : UI 중심의 화면 레이아웃
• 목업(Mockup) : 실물과 흡사한 정적인 형태의 모형
• 프로토타입(Prototype) : 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형
• 스토리보드(Storyboard) : 정책, 프로세스, 와이어프레임, 디스크립션 등이 모두 포함된 설계 문서

(1) 일반문서 도구

• 워드, 엑셀, 파워포인트... 등

(2) 화면 설계 툴

[1] 카카오 오븐
[2] Power Mockup
[3] 발사믹 Mockup

(3) 프로토타이핑 툴

[1] UX핀(UXPin)
[2] 엑슈어(AXURE)
[3] 네이버 프로토나우(protonow)

(4) ui 디자인 툴

[1] 스케치(sketch)
[2] 어도비 익스피리언스 디자인 CC(Adobe XD)

(5) 디자인 산출물로 작업하는 프로토타이핑 툴

[1] 인비전(invision)
[2] 픽사에이트(Pixate)
[3] 프레이머(framer)

제4장 애플리케이션 설계

제1절 공통 모듈 설계

1. 설계 모델링

(1) 소프트웨어 설계 개념

1) 개요

[1] 요구사항 분석단계에서 나온 사용자가 필요로 하는 필수 기능을 어떻게 구현할 수 있는가에 대한 방법을 명시하는 것이다.
[2] 물리적 구현이 가능하도록 절차나 시스템을 구체적으로 정의하는 데 있어 여러 기술과 원리를 응용하는 작업이다.

2) 설계의 기본원리

[1] 추상화(Abstaction)

• 복잡한 문제를 이해하기 위해서 필요없는 세부 사항을 배제하는 것을 의미
• 복잡한 구조(문제)를 해결하기 위하여 설계 대상의 상세내용은 배제하고 유사점을 요약해서 표현하는 기법

[2] 구조화(Structure)

• 문제의 영역들을 각각의 기능 모듈 단위로 세분화하여 모듈간의 관계를 구조적으로 설계하는 과정

⭐️ [3] 모듈화(Modularity)

• 모듈 : 서브류틴, 하부시스템, 소프트웨어내 프로그램 혹은 작업단위 의미
• 소프트웨어를 기능단위로 분해한 것으로, 모듈화된 시스템은 시스템을 모듈들의 집합으로 추상화한것이다.

(2) 설계 모델링

1) 소프트웨어 설계 대상

[1] 구조 모델링 : 소프트웨어를 구성하는 컴포넌트들의 유형, 인터페이스, 내부 설계 구조 및 이들의 상호 연결 구조를 모델링
[2] 행위 모델링 : 소프트웨어의 구성요소들의 기능들과 이들이 언제, 어떠한 순서로 기능을 수행하고 상호작용하는지를 모델링

2) 소프트웨어 설계 유형

[1] 자료구조 설계(Data structure design)

• 요구분석 단계에서 생성된 정보를 바탕으로 소프트웨어를 구현하는데 필요한 자료구조로 변환하는 과정

[2] 아키텍처 설계(Architecture design)

• 예비 설계 또는 상위 수준 설계
• 소프트웨어 시스템의 전체 구조를 기술
• 소프트웨어를 구성하는 컴포넌트들 간의 관계를 정의

[3] 인터페이스 설계(Interface design)

• 소프트웨어와 상호 작용하는 컴퓨터 시스템, 사용자 등이 어떻게 통신하는지를 기술

[4] 프로시저 설계(Procedure design)

• 알고리즘 설계
• 프로그램 아키텍쳐의 컴포넌트를 소프트웨어 컴포넌트의 프로시저 서술로 변환하는 과정

3) 설계 방법

[1] 구조적 설계(structure design)

• 소프트웨어에 요구된 기능, 자료 처리 과정, 알고리즘 등을 중심으로 시스템을 분해하여 설계하는 방식(기능적 관점)
• 시스템의 각 모듈은 최상위 기능에서 하위 계층으로 하향적 세분화 -

[2] 자료구조 중심 설계

• 입출력 자료의 구조를 파악함으로써 소프트웨어 구조를 추출하는 방식
• Warnier-Orr, Jackson

[3] 객체지향 설계(object-oriented design)

• 자료와 자료에 적용될 기능을 함께 추상화하는 개념(객체 = 자료 + 기능) 상향식
• 시스템은 객체의 모임
• Yourdon, Rumbaugh, Booch...