화면 설계 UI 설계 3/4

화면 설계 UI 설계

UI 설계를 위한 UML

UML의 유형

패키지 다이어그램

패키지 다이어그램(Package Diagram) 개념

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

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

패키지(Package)

• 요소들을 그룹으로 조직하기 위한 요소

의존관계(Dependency)

• 하나의 패키지가 다른 패키지를 사용하는 관계
• 의존성의 성질을 나타내기 위해 스테레오 타입을 붙일 수 있음
• 스테레오 타입에는 <<import>>, <<access>>가 있음

활동 다이어그램

활동 다이어그램(Activity Diagram) 개념

• 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
• 연산이나 처리 과정이 수행되는 동안 일어나는 일들을 단계적으로 표현
• 하나의 유스케이스 안이나, 유스케이스 사이에서 발생하는 복잡한 처리의 흐름을 명확하게 표현할 수 있음

활동 다이어그램 구성요소

시작점(Initial Node)

• 활동의 시작(액션이나 액티비티 시작)을 의미
• 하나의 다이어그램 안에는 하나의 시작점만 존재
• 검은색 동그라미로 표현

전이(Transition)

• 실행의 흐름을 나타냄
• 화살표로 표현

액션(Action)/액티비티Activity)

• 어떠한 일들의 처리와 실행을 의미
• 액션(Action)은 더 이상 분해할 수 없는 단일 작업이고, 액티비티(Activity)는 몇 개의 액션으로 분리될 수 있는 작업
• 모서리가 둥근 사각형으로 표현하고, 둥근 사각형 안에 액션이나 액티비티 명칭 기술

종료점(Final Node)

• 처리의 종료를 의미
• 하나의 다이어그램 안에는 여러 갱의 종료 노드가 있을 수 있음
• 검은색 동그라미를 포함한 원으로 표현

조건(판단) 노드(Decision Node)

• 조건에 따른 제어 흐름의 분리를 표현
• 마름모로 표현하고 들어오는 제어 흐름은 한 개이고, 나가는 제어 흐름은 여러 개로 표현

병합 노드(Merge Node)

• 여러 경로의 흐름이 하나로 합쳐진 것을 표현
• 마름모로 표현하고 들어오는 제어 흐름은 여러 개이고, 나가는 제어 흐름은 한 개로 표현

포크 노드(Fork Node)

• 평행적으로 수행되는 흐름을 나누는 노드
• 굵은 가로선으로 표현하고 들어오는 액티비티 흐름은 한 개이고, 나가는 액티비티 흐름은 여러 개

조인 노드(Join Node)

• 포크 노드로 나눠진 흐름을 다시 하나로 합치는 노드
• 굵은 가로선으로 표현하고 들어오는 액티비티 흐름은 여러 개이고, 나가는 액티비티 흐름은 한 개

구획면(Swim Lane)

• 액티비티 수행을 담당하는 주체를 구분하는 면
• 가로 또는 세로 실선을 그어 구분

상태 다이어그램

상태 다이어그램(State Diagram) 개념

• 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
• 어떤 이벤트에 의해 객체 자신이 속한 클래스의 상태 변화나 객체 간 상호작용을 하는 과정에서의 상태 변화를 표현
• 객체는 파악된 상태들 이외의 상태는 가질 수 없고, 특정 순간에는 오직 한 상태로만 존재할 수 있음
• 객체의 상태란 객체가 갖는 속성값의 변화

상태 다이어그램 구성요소

상태(State)

• 객체가 존재할 수 있는 조건 중의 하나
• 둥근 사각형 안에 객체의 상태 기술

시작 상태(Initial State)

• 객체의 시작 상태
• 속이 채워진 원으로 표현

종료 상태(Final State)

• 객체의 종료 상태
• 원 안에 속이 채워진 원으로 표현

전이(Transition)

• 객체의 상태가 다른 상태로 변경되는 상태
• 상태 사이의 흐름, 변화
• 화살표로 표현

이벤트(Event)

• 객체의 전이를 유발하는 자극
• 상태의 변화를 주는 현상
• 상태의 전이를 유발하는 이벤트는 전이 위에 이벤트 이름 표시
• 이벤트 : 시간의 흐름, 조건, 외부 신호 등

전이 조건(Transition Condition)

• 특정 조건 만족 시 전이 발생하도록 하기 위해 사용되는 속성값의 불리언 식

커뮤니케이션 다이어그램

커뮤니케이션 다이어그램(Communication Diagram) 개념

• 시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램
• 시스템이나 객체들이 메시지를 주고받으며 시간의 흐름에 따라 상호작용을 하는 과정을 표현한 다이어그램

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

액터(Actor)

• 시스템으로부터 서비스를 요청하는 외부 요소(사람, 외부 시스템)

객체(Object)

• 메시지를 주고받은 주체
• 콜론(:)을 기준으로 앞쪽에는 객체명, 뒤쪽에는 클래스명 기술

링크(Link)

• 객체 간의 관계를 표현
• 클래스가 아닌 실제 객체와의 관계를 직접적으로 보여주는 객체들 사이의 링크
• 액터와 객체, 객체 간 실선으로 표현
• 링크에 메시지를 표현

메시지(Message)

• 객체가 상호 작용을 위해 주고받는 메시지
• 상대 객체별로 여러 개의 정의가 이루어지므로, 하나의 동일한 링크에서 여러 개의 메시지가 전단
• 화살표의 방향은 메시지를 받는 쪽으로 향하게 표현

컴포넌트 다이어그램

컴포넌트 다이어그램(Component Diagram) 개념

• 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램
• 코드 컴포넌트 기반의 물리적 구조로 표현
• 실질적 프로그래밍 작업에 사용

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

컴포넌트(Component)

• 탭이 달린 직사각형으로 표현
• 모든 컴포넌트는 반드시 이름을 가지고 있어야 함
• 컴포넌트가 패키지에 포함되어 있다면 컴포넌트의 이름 앞에 패키지 이름을 붙일 수 있으며, 클래스처럼 컴포넌트에 꼬리표 값을 달아주거나 컴포넌트 내부의 연산을 보여줄 수도 있음

인터페이스(Interface)

• 인터페이스를 실체화한다는 의미는 실제로 동작하는 컴포넌트에 인터페이스를 적용한다는 뜻
• 컴포넌트와 인터페이스는 화살표 모양의 점선(의존 관계)으로 연결

의존 관계(Dependency Relationship)

• 컴포넌트 사이의 의존하는 관계 표현
• 컴포넌트 사이의 의존 관계는 한 컴포넌트에 변경이 발생한 경우, 변경 범위 추적에 유용