2.2 UI 설계

1) UI 설계를 위한 UML

UML(Unified Modeling Language)이란?

UML은 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어.

 

UML 특징

- 가시화 / 구축 / 명세화 / 문서화

 

UML 구성

- 사물 / 관계 / 다이어그램

 

UML 확장 모델의 스테레오 타입

<<include>> 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계

<<extend>> 하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수 도 있는 확장 관계

<<interface>> 모든 메서드가 추상 메서드. 추상 메서드와 상수만으로 구성된 클래스

<<entity>> 일반적으로 정보 또는 오래 지속되는 연관된 행의를 형상화하는 클래스. 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장되어야 할 정보를 표현하는 클래스

<<boundary>> 시스템과 외부 액터와의 상호 작용을 담당하는 클래스

<<control>> 시스템이 제공하는 기능의 로직 및 제어 담당하는 클래스

 

UML 다이어그램

- 구조적 다이어그램

클래스 / 객체 / 컴포넌트 / 배치 / 복합체 구조 / 패키지

> 클래스 다이어그램 : 클래스 / 속성 / 연산 / 접근 제어자.       연관 / 의존 / 일반화 / 실체화 / 포함 / 집합 관계

> 컴포넌트 다이어그램 : 컴포넌트 / 인터페이스 / 의존관계

> 패키지 다이어그램 : 패키지 / 의존관계

 

- 행위적 다이어그램

유스케이스 / 시퀀스 / 커뮤니케이션 / 상태 / 활동 / 타이밍

> 유스케이스 다이어그램 : 유스케이스 / 액터 / 시스템 / 시나리오 / 이벤트의 흐름.        포함 / 확장 / 일반화 관계

> 시퀀스 다이어그램 : 객체 / 생명선 / 실행 / 메시지

> 활동 다이어그램 : 시작점 / 전이 / 액션 및 액티비티 / 종료점 / 조건 노드 / 병합 노드 / 포크 노드 / 조인 노드 / 구획면

> 상태 다이어그램 : 상태 / 시작 상태 / 종료 상태 / 전이 / 이벤트 / 전이 조건

> 커뮤니케이션 다이어그램 : 액터 / 객체 / 링크 / 메시지

 

 

 

UML 확장 모델의 스테레오 타입

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

형태는 UML 요소 사용. 내부 의미는 다른 목적으로 사용하도록 확장.

<<>> 기호 사용.

 

 

클래스 다이어그램이란?
객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램.

 

클래스 다이어그램의 구성 요소

클래스 / 속성 / 연산 및 메서드 / 접근 제어자 (private - / public + / protected # / default ~)

 

클래스 간의 관계

연관(Association) / 의존(Dependency) / 일반화(Generalization) / 실체화(Realization) / 포함(Composition) / 집합(Aggregation)

 

유스케이스 다이어그램이란?

시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램.

 

유스케이스 다이어그램 구성요소

유스케이스 / 액터 / 시스템 / 시나리오 / 이벤트의 흐름

 

시퀀스 다이어그램이란?

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

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

객체의 오퍼레이션과 속성을 상세히 정의.

유스케이스 실현.

 

시퀀스 다이어그램 구성요소

액터 / 객체 / 생명선 / 활성화 / 메시지

 

패키지 다이어그램이란?

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

 

패키지 다이어그램 구성요소

패키지 / 의존관계

 

활동 다이어그램이란?

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

오퍼레이션이나 처리과정이 수행되는 동안 일어나는 일들을 단계적으로 표현.

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

 

활동 다이어그램 구성요소

시작점 / 전이 / 액션 및 액티비티 / 조건 노드 / 병합 노드 / 포크 노드 / 조인 노드 / 구획면

 

상태 다이어그램이란?

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

어떤 이벤트에 의해 객체 자신이 속한 클래스의 상태 변화나 객체 간 상호 작용하는 과정에서의 상태 변화를 표현.

객체는 파악된 상태들 이외의 상태는 가질 수 없고, 특정 순간에는 오직 한 상태로만 존재.

객체의 상태란 객체가 갖는 속성값의 변화.

 

상태 다이어그램 구성요소

상태 / 시작 상태 / 종료 상태 / 전이 / 이벤트 / 전이 조건

 

커뮤니케이션 다이어그램이란?

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

 

커뮤니케이션 다이어그램 구성요소

액터 / 객체 / 링크 / 메시지

 

컴포넌트 다이어그램이란?

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

코드 컴포넌트 기반의 물리적 구조로 표현.

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

 

컴포넌트 다이어그램 구성요소

컴포넌트 / 인터페이스 / 의존 관계

 

2) UI 흐름 설계

UI 설계서 구성

UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의, 시스템 구조, 사이트 맵, 프로세스 정의, 화면 설계

 

UI 흐름 설계 수행 절차

UI 설계안의 적정성 확인 -> 화면과 폼의 흐름 설계

 

3) UI 상세 설계

UI 상세 설계 프로세스

UI 요구사항 최종 확인 -> UI 구조 설계 -> 사용자 기반 메뉴 구조 설계 -> 화면 설계 -> 하위 시스템 단위의 내외부 상세 화면과 폼 설계

 

UI 검토 및 보완

 

UI 시나리오 문서이 작성 요건

완전성 / 일관성 / 이해성 / 가독성 / 추적 용이성 / 수정 용이성

 

4) UI 설계 도구

UI 설계 도구란?

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

 

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

- 분석단계 : UI 패턴, UI 모델링

- 설계단계 : UI 설계

- 구현단계 : 프로토타이핑 툴

 

UI 설계 도구의 유형

UI 설계 도구의 유형은 UI 구현 절차에 따라 기획단계에서 화면 UI 설계 및 인터랙션 적용에 적합한 도구와 설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분.

- 화면 설계 도구 : 파워 목업 / 발사믹 목업 / 카카오 오븐

- 프로토타이핑 도구 : UX핀 / 액슈어 / 네이버 프로토나우

- UI 디자인 도구 : 스케치 / 어도비 익스피리언스 디자인 CC (Adobe XD)

 

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

인비전 / 픽사에이트 / 프레이머