UI 설계를 위한 UML

(1) UML

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

 

1. UML의 특징

- 가시화 언어, 구축 언어, 명세화 언어, 문서화 언어

 

2. UML의 구성요소

사물(Things) : 추상적인 개념으로, 주제를 나타내는 요소

관계(Relationship) : 사물의 의미를 확장하고 명확히 하는 요소, 사물과 사물을 연결하여 관계를 표현하는 요소

다이어그램(Diagram) : 사물과 관계를 모아 그림으로 표현한 형태

 

4. UML 다이어그램

- 구조적(정적) 다이어그램, 행위적(동적) 다이어그램으로 구분된다. 

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

 

<구조적 다이어그램>

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

 

<행위적 다이어그램>

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

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

- UML의 스테레오 타입은 UML의 기본적 요소 이외의 새로운 요소를 만들어내기 위한 확장 메커니즘이다.

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

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

 

유형	설명
<<include>>	하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계
<<extend>>	하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수도 있는 확장 관계
<<interface>>	모든 메소드가 추상 메소드이며 바로 인스턴스를 만들 수 없는 클래스로 추상 메소드와 상수만으로 구성된 클래스
<<entity>>	일반적으로 정보 또는 오래 지속되는 연관된 행위를 형상화하는 클래스로 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장되어야 할 정보를 표현하는 클래스
<<boundary>>	시스템과 외부 액터와의 상호 작용을 담당하는 클래스
<<control>>	시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스

 

(2) UML의 유형

 

1. 클래스 다이어그램

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

 

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

구성요소	설명
클래스	공통의 속성, 연산(메소드), 관계, 의미를 공유하는 객체들의 집합
속성	클래스의 구조적 특성에 이름을 붙인 것으로 특성에 해당하는 인스턴스가 보유할 수 있는 값의 범위를 기술
연산, 메소드	이름, 타입, 매개변수들과 연관된 행위를 호출하는데 요구되는 제약사항들을 명시하는 클래스의 행위적 특징 객체에 요청하여 행동에 영향을 줄 수 있는 서비스
접근 제어자	클래스에 접근할 수 있는 정도를 표현 - : 클래스 내부 접근만 허용(private) + : 클래스 외부 접근을 허용(public) # :  동일 패키지/파생 클래스에서 접근 가능(protected) ~ : 동일 패키지 클래스에서 접근 가능(default)

 

▼ 클래스 간의 관계

구분	설명
연관(Association) 관계	연관 관계는 클래스가 서로 개념적으로 연결된 선 연관 관계는 2개 이상의 사물이 서로 관련되어 있는 상태를 표현 사물 사이를 실선으로 연결하여 표현하며, 방향성은 화살표로 표현 서로에게 영향을 주는 양방향 관계의 경우 화살표를 생략하고 실선으로만 연결
의존(Dependency) 관계	하나의 클래스가 또 다른 클래스를 사용하는 관계 다른 클래스의 멤버 함수 사용 의존 관계는 사물 사이에 서로 연관은 있으나 필요에 따라 서로에게 영향을 주는 짧은 시간 동안만 연관을 유지하는 관계를 표현 하나의 클래스에 있는 멤버 함수의 인자가 변함에 따라 다른 클래스에 영향을 미칠 때의 관계 영향을 주는 사물이 영향을 받는 사물 쪽으로 점선 화살표를 연결하여 표현
일반화(Generalization) 관계	일반화 관계는 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현 일반적인 개념을 부모(상위)라고 하고, 구체적인 개념을 자식(하위)이라 함 구체적인 사물에서 일반적인 사물 쪽으로 속이 빈 화살표를 연결하여 표현 일반화 관계는 다른 의미로 상속 관계라고 함
실체화(Realization) 관계	추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메소드를 구현할 때 사용 사물이 할 수 있거나, 해야 하는 기능으로 서로를 그룹화할 수 있는 관계를 표현
포함(Composition) 관계	영구적이고, 집합 관계보다 더 강한 관계로 구성 포함되는 쪽에서 포함하는 쪽으로 속이 채워진 마름모를 연결하여 표현 포함 관계는 집합 관계의 특수한 형태로, 포함하는 사물의 변화가 포함되는 사물에게 영향을 미치는 관계를 표현 포함 관계는 복합 관계라고도 함
집합(Aggregation) 관계	하나의 객체에 여러 개의 독립적인 객체들이 구성되는 관계 집합 관계는 하나의 사물이 다른 사물에 포함되어 있는 관계 표현 포함되는 쪽에서 포함하는 쪽으로 속이 빈 마름모를 연결하여 표현

 

2. 유스케이스 다이어그램

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

 

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

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

 

▼유스케이스 다이어그램의 관계

• 포함관계 : 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계, 유스케이스 다이어그램에서는 다른 유스케이스가 나타내는 이벤트 흐름을 포함하는 관계를 유스케이스 간에 표현 
• 확장 관계 : 확장 관계의 유스케이스는 포함 관계처럼 여러 유스케이스에 걸쳐 중복적으로 사용되지 않고, 특정 조건에서 한 유스케이스로만 확장되는 관계
• 일반화 관계 : 추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계, 일반화 관계를 액터에 적용하면 유스케이스 다이어그램에서 사용되는 여러 액터들의 의미를 좀 더 명확하게 하고 다이어그램도 보다 간결하게 작성

 

3. 시퀀스 다이어그램

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

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

- 시퀀스 다이어그램에서는 객체의 오퍼레이션과 속성을 상세히 정의해야 한다.

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

 

구성요소	설명	표기법
객체	객체는 위쪽에 표시되며 아래로 생명선을 가짐 객체는 사각형 안에 밑줄 친 이름으로 명시
생명선	객체로부터 뻗어 나가는 점선 실제 시간이 흐름에 따라 객체의 생명주기 동안 발생하는 이멘트를 명시	| | | | |
실행	직사각형은 오퍼레이션(함수)이 실행되는 시간을 의미 직사각형이 길어질수록 오퍼레이션 수행시간이 긺
메시지	객체 간의 상호 작용은 메시지 교환으로 이루어짐 한 객체에서 다른 객체로의 메시지를 전달하여 전달받은 객체의 오퍼레이션을 수행	---------------------------------->

 

4. 패키지 다이어그램

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

 

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

• 패키지 : 요소들을 그룹으로 조직하기 위한 요소
• 의존관계 : 하나의 패키지가 다른 패키지를 사용하는 관계, 의존성의 성질을 나타내기 위해 스테레오 타입을 붙일 수 있음, 스테레오 타입에는 <<import>>, <<access>>가 있음

5. 활동 다이어그램

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

 

▼활동 다이어그램 구성요소

구성요소	설명
시작점	활동의 시작(액션이나 액티비티 시작)을 의미 하나의 다이어그램 안에는 하나의 시작점만 존재 검은색 동그라미로 표현
전이	실행의 흐름을 나타냄 화살표로 표현
액션/액티비티	어떠한 일들의 처리와 실행을 의미 액션은 더 이상 분해할 수 없는 단일 작업이고, 액티비티는 몇 개의 액션으로 분리될 수 있는 작업 모서리가 둥근 사각형으로 표현하고, 둥근 사각형 안에 액션이나 액티비티 명칭 기술
종료점	처리의 종료를 의미 하나의 다이어그램 안에는 여러 개의 종료 노드가 있을 수 있음 검은색 동그라미를 포함한 원으로 표현
조건(판단) 노드	조건에 따른 제어 흐름의 분리를 표현 마름모로 표현하고 들어오는 제어 흐름은 한 개이고, 나가는 제어 흐름은 여러 개로 표현
병합 노드	여러 경로의 흐름이 하나로 합쳐진 것을 표현 마름모로 표현하고 들어오는 제어 흐름은 여러 개이고, 나가는 제어 흐름은 한 개로 표현
포크 노드	평행적으로 수행되는 흐름을 나누는 노드 굵은 가로선으로 표현하고 들어오는 액티비티 흐름은 한 개이고, 나가는 액티비티 흐름은 여러 개
조인 노드	Fork Node로 나눠진 흐름을 다시 하나로 합치는 노드 굵은 가로선으로 표현하고 들어오는 액티비티 흐름은 여러 개이고, 나가는 액티비티 흐름은 한 개
구획면	액티비티 수행을 담당하는 주체를 구분하는 면 가로 또는 세로 실선을 그어 구분

 

6. 상태 다이어그램

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

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

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

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

 

▼ 상태 다이어그램 구성요소

구성요소	설명
상태	객체작 존재할 수 있는 조건 중의 하나 둥근 사각형 안에 객체의 상태 기술
시작 상태	객체의 시작 상태 속이 채워진 원으로 표현
종료 상태	객체의 종료 상태 원 안에 속이 채워진 원으로 표현
전이	객체의 상태가 다른 상태로 변경되는 상태 상태 사이의 흐름 변화 화살표로 표현
이벤트	객체의 전이를 유발하는 자극 상태의 변화를 주는 현상
전이 조건	특정 조건 만족 시 전이 발생하도록 하기 위해 사용되는 속성값의 불리언 식

 

7. 커뮤니케이션 다이어그램

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

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

 

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

• 액터 : 시스템으로부터 서비스를 요청하는 외부 요소
• 객체 : 메시지를 주고받은 주체
• 링크 : 객체들 간의 관계를 표현
• 메시지 : 객체가 상호 작용을 위해 주고받는 메시지

 

8. 컴포넌트 다이어그램

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

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

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

 

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

• 컴포넌트 : 탭이 달린 직사각형으로 표현
• 인터페이스 : 실제로 동작하는 컴포넌트에 인터페이스를 적용한다는 뜻
• 의존 관계 : 컴포넌트 사이의 의존하는 관계 표현

 

(3) UML 시나리오 문서의 작성 요건

완전성 : 누락이 없어야 하고, 최대한 바짐없이 가능한 한 상세하게 기술

일관성 : 서비스에 대한 목표, 시스템 및 사용자의 요구사항이 일관성이 있어야 하고, 모든 문서의 UI 스타일을 일관적으로 구성

이해성 : 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명해야 함

가동성 : 문서를 쉽게 읽을 수 있어야 하고, 표준화된 템플릿을 작성하여 적용

추적 용이성 : 쉽게 추적이 가능해야 하고, 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생하였는지 추적이 쉬워야 함

수정 용이성 : 쉽게 변경이 가능해야 하고, 수정 또는 개선 사항을 시나리오에 반영하는 데 있어 쉽게 적용할 수 있어야 함

 

 

(4) UI 설계 도구의 개념

1. 화면 설계 도구

- 파워 목업 : 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴

- 발사믹 목업 : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구

- 카카오 오븐 : 카카오에서 제작한 온라인 프로토타이핑 도구

 

2. 프로토타이핑 도구

UX핀 : 웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구

액슈어 : UI 설계보다는 스토리보드에 포함되는 것을 모두 작성 가능한 도구

네이버 프로토나우 : 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능 지원 가능 도구

 

3. UI 디자인 도구

스케치 : 다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구

어도비 익스피리언스 디자인 CC : UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구

 

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

인비전 : 포토샵, 스케치 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구

픽사에이트 : 2015년 구글이 인수한 프로토타이핑 툴

프레이머 : 커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구