정보 처리 기사 실기 2단원 UI 설계(정리) + 간단 요약

02. UI 설계

01. UI  요구사항 확인 1. UI 요구사항 확인 2. UI 표준 3. UI 지침 4. 스토리보드 5. UI 프로토타입 제작 및 검토

02. UI 설계 1. UI 설계를 위한 UML 2. UI 흐름 설계 3. UI 상세 설계 4. UI 설계 도구

[1] UI 설계를 위한 UML

(1) UML

1. UML 의 개념 : 객체지향 SW 개발 과정에 산출물을 명세화, 시각화, 먼서화할 때 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링

2. UML 의 특징 : UML은 방법론을 통합한 것, 표준화된 모델링 기법제공.

- 가시화 언어 : 개념 모델 작성 시 오류가 적고 의사소통이 용이

- 구축 언어 : 다양한 프로그래밍 언어로 실행 시스템의 예측 가능,

                 UML을 소스코드로 변환하여 구축 가능, 역 변환하여 격공학 가능

- 명세화 언어 : 정확한 모델 제시, 완전한 모델 작성 가능

- 문서화 언어 : 시스템에 대한 평가 및 의사소통의 문서

 

3. UML의 구성요소

사물, 관계, 다이어그램

Things	- 추상적인 개념, 주제를 나타내는 요소
Relationships	- 사물의 의미를 확장하고 명확히하는 요소 - 사물과 사물을 연결하여 관계를 표현하는 요소
Diagrams	- 사물과 관계를 모아 그림으로 표현한 상태

 

4. UML 다이어그램

- UML 다이어그램은 구분에 따라 구조적(정적), 행위적(동적) 다이어그램으로 구분

- 컴포넌트, 배치 다이어그램은 구현단계에서 사용되는 다이어그램

 

< Structural Diagram > 정적(구조적) 다이어그램

Class 다이어그램	객체지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
Object 다이어그램	- 연관된 모든 인스턴스를 표현 - 클래스에 속한 사물(객체)들,인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램
Component 다이어그램	-  시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램
Deployment 다이어그램	- 컴포넌트 사이의 종속성을 표현, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현한 다이어그램
Composite Structure 다이어그램	- 그 내부 구조를 표현하는 다이어그램(클래스나 컴포넌트가 복합 구조를 갖는 경우)
Package 다이어그램	- 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현한 다이어그램

 

< Behavioral Diagram > 동적(행위적) 다이어그램

Usecase	시스템이 제공하는 기능 및 관련된 외부 요소를 사용자 관점에서 표현하는 다이어그램
Sequence	객체 간 상호작용을 시간적 개념을 중심으로 메세지 흐름으로 표현한 다이어그램
Communication	동작에 참여하는 객체들이 주고받는 메세지를 표현, 객체 간의 연관까지 표현한 다이어그램
State	하나의 객체가 자신이 속한 클래스의 상태변화, 다른 객체와 상호작용에 다라 상태가 어떻게 변화하는지 표현하는 다이어그램
Activity	시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
Timing	객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램

 

5. UML 확장 모델의 스테레오 타입(StereoType)

- UML의 기본적 요소 이외의 새로운 요소를 만들어 내기 위한 확장 메커니즘

- 형태는 기존의 UML의 요소를 그대로 사용하지만 내부 의미는 다른 목적으로 사용하도록 확장된다.

- UML의 스테레오 타입은 '<<>>' 길러멧기호를 사용하여 표현한다.

<<include>>	포함관계
<<extend>>	실행할 수 있고 그렇지 않을 수 있는 확장관계
<<interface>>	인스턴스를 만들 수 없는 클래스로 추상 메서드와 상수만으로 구성된 클래스
<<entity>>	기억 장치에 저장되어야 할 정보를 표현하는 클래스
<<boundary>>	시스템과 외부 액터와의 상호작용을 담당하는 클래스
<<control>>	로직 및 제어를 담당하는 클래스

---

(2) UML의 유형

클래스

유스케이스

시퀀스

활동

상태

커뮤니케이션

컴포넌트

[1] 클래스 다이어그램 : 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램

- 구성요소 : 클래스 이름, 속성, 연산, 접근 제어자, 관계

Class	공통의 속성, 연산관계, 객체들의 집합
Attribute	특성에 해당하는 인스턴스가 보유할 수 잇는 값의 범위 기술
Operation	- 호출에 요구되는 제약사항들을 명시하는 클래스의 행위적 특징 - 객체에 요청하여 행동에 영향을 줄 수 있는 서비스
Access Modifier	클래스에 접근할 수 있는 정도를 표현 - (-) - (+) - (#) - (~)

 

클래스 간의 관계 : 

 

(가) 연관 관계

(나) 집합 관계

(다) 일반화 관계와 의존관계

(라) 추상 클래스, 인터페이스, 실체화 관계

---

클래스

유스케이스

시퀀스

활동

상태

커뮤니케이션

컴포넌트

[2] 유스케이스 다이어그램 : 시스템을 제공, 기능 및 관련된 외부 요소를 사용자의 고나점에서 표현하는 다이어그램

- 구성요소 : 유스케이스, 액터, 시스템, 시나리오, 이벤트의 흐름

Usecase	- 시스템이 제공해야하는 서비스, 기능 - 액터가 시스템을 통해 수행하는 일렬의 행위
Actor	- 사용자가 시스템에 대해 수행하는 역할 - 이벤트 흐름을 시작하는 객체 - 시스템과 상호작용을 하는 사람 또는 사물
System	시스템 전체 영역을 표현
시나리오	발생되는 이벤트의 흐름
이벤트 흐름	사람, 시스템, 하드웨어, 시간의 흐름에 의해 시작

 - 관계의 종류 : 포함 관계, 확장 관계, 일반화 관계가 있다.

---

클래스

유스케이스

시퀀스

활동

상태

커뮤니케이션

컴포넌트

[3] 시퀀스 다이어그램 :

- 객체 간 상호작용을 메세지 흐름으로 표현한 다이어그램

- 객체 간의 상호작용을 시간적 개념을 중심으로 모델링하는 과정

- 객체의 오퍼레이션과 속성을 상세히 정의해야한다.

- 시퀀스 다이어그램은 유스케이스를 실현한다.

 

- 구성요소 : Object, Lifeline, Activation, Message

---

클래스

유스케이스

시퀀스

패키지

상태

커뮤니케이션

컴포넌트

[4] 패키지 다이어그램 

- 시스템의 서로 다른 패키지들 사이의 의존 관계를 표현하기 위한 다이어그램

- 구성요소 : 패키지 , 의존관계

---

클래스

유스케이스

시퀀스

패키지

활동

커뮤니케이션

컴포넌트

[5] 활동 다이어그램 

- 어떤 기능을 수행했는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램

- 단계적으로 표현

- 하나의 유스케이스 안이나 유스케이스 사이에서 발생하는 복잡한 처리의 흐름을 명확하게 표현

- 구성요소 : 시작점, 전이, 액션/액티비티, 조건(판단), 노드, 병합 노드, 포크 노드, 조인 노드, 구획면

---

클래스

유스케이스

시퀀스

패키지

활동

상태

커뮤니케이션

컴포넌트

[6] 상태 다이어그램

- 하나의 객체가 자신의 속한 클래스의 상태 변화 혹은 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램

 

- 구성요소 ; 상태, 시작 상태, 종료 상태, 전의, 이벤트

 

---

클래스

유스케이스

시퀀스

패키지

활동

상태

커뮤니케이션

컴포넌트

[7] 커뮤니케이션 다이어그램

- 다이어그램은 시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고 받는 메세지를 표현하고, 메세지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램

- 커뮤니케이션 다이어그램은 시스템이나 객체들이 메세지를 주고 받으며 시간의 흐름에 따라 상호작용하는 과정을 표현한 다이어그램이다.

- 액터, 객체, 링크, 메세지

---

클래스

유스케이스

시퀀스

활동

상태

커뮤니케이션

컴포넌트

[8] 컴포넌트 다이어그램

- 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관게를 나타내는 다이어그램

- 실질적 프로그래밍 작업에 사용

- 구성요소 : 컴포넌트, 인터페이스, 의존 관계

---

[2] UI 흐름 설계

- 업무의 흐름이나 업무 수행과 관련된 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동

(1) UI 설계서 구성

- UI 설계서 표지 ; 프로젝트명, 시스템명 포함

- UI 설계서 개정 이력 ; 초안 작성 표기설정

- UI 요구사항 정의 : 요구사항 재확인하고 정리

- 시스템 구조 : UI 프로토타입 재확인

- 사이트 맵 : 프로세스들을 진행하는 순서에 맞추어 정리

- 화면 설계 : 각 화면별로 필요한 화면내용 설계

 

(2) UI 흐름 설계 수행 절차

UI 설계안의 적정성 확인, 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토, 화면의 입력 요소 및 유스케이스를 통한 UI요구사항 확인, UI유스케이스 설계, 기능 및 양식 확인 순으로 되어있다.

 

---

[3] UI 상세 설계

(1) UI 설계서 구성

- UI설게 시안을 토대로 실제 설계 및 구현을 위해서 모든 화면에 대한 UI상세 설계 단계를 진행한다.

 

(2) UI 검토 및 보완

(3) UI 시나이로 문서의 작성 요건

Complete           (완전성)	누락 없어야하며 최대한 빠짐없이 가능한 한 상세히 기술
Consistent          (일관성)	요구사항이 일관성이 있게
Understandable   (이해성)	처음 접하는 사람들도 이해하기 쉽도록 구성, 설명해야함
Readable            (가독성)	문서를 쉽게 읽을 수 있어야한다.
Traceable            (추적 용이성)	육하원칙적으로 추적 쉽게해야한다.
Modifiable          (수정 용이성)	쉽게 변경 가능해야하고 동일한 문서가 여러 문서를 편집하지 않도록해야한다.

---

[4] UI 설계 도구

(1) UI 설계 도구의 개념

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

 

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

 

(3) UI 설계 도구의 유형 

- 설계 도구를 세분화하면 화면 설계 도구, 프로토타이핑 도구, UI 디자인 도구

 

[1] 화면 설계 도구

Power Mockup	파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 잇도록 지원하는 툴
Balsamiq Mockups	- 스케치한 느낌으로 빠르고 심프랗게 서비스 콘셉트를 전달할 수 있는 목업 도구 - 디테일한 화면 구성보다는 간단한 스케치에 활용
Oven	온라인 프로토타이핑 도구

 

[2] 프로토타이핑 도구

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

 

[3] UI 디자인 도구

Sketch	다양한 목업, 템플릿을 활용한 레이아웃 중심의 UI디자인 설계 지원 도구
Adobe XD	UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구, 포토샵, 일러스트와 연동 지원

 

[4] UI디자인 산출물로 작업하는 프로토타이핑 도구

Invision	포토샵, 스케치 등으로 디자이너가 작업한 작업결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구
Pixate	- 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스 북, 구글 등 다양한 회사에서 사용 - 모바일 앱 프로토타이핑에 최적화되어 있고, 디테일한 인터펠션을 설정할 수 있는 도구
Framer	- 커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구 - 코드 기반으로 작동되어 실제 작업물과 흡사하게 작동