2. UI 설계(★★★)

UI 설계를 위한 UML

UML(Unified Modeling Language) 개념

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

 

UML 특징

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

 

UML 구성요소

사물, 관계, 다이어그램

 

 

UML 다이어그램

구조적 다이어그램(Structural Diagram)/ 정적 다이어그램(Static Diagram)

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

객체(Object) : 객체 다이어그램은 클래스에 속한 사물(객체), 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램

컴포넌트(Component) : 컴포넌트 다이어그램은 시스템을 구성하는 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램 

배치(Deployment) : 컴포넌트 사이의 종속성을 표현하고 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현하는 다이어그램

복합체구조(Composite Structure) : 클래스나 컴포넌트가 복합구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램

패키지(Package) : 유스케이스나 클래스등의 모델 요소들을 그룹화한 패키지들의 관계를 표현한 다이어그램

 

행위적 다이어그램(Behavioral Diagram) / 동적 다이어그램(Dynamic Diagram)

유스케이스(Usecase) : 시스템이 제공하고 있는 클래스등의 모델 요소를 갖는 경우 그 내부 구조를 표현하는 다이어그램 

시퀀스(Sequence) : 객체 간 동적 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현한 다이어그램

커뮤니케이션(Communication) : 동작에 참여하는 객체들이 주고받는 메시지를 표현하고 객체 간의 연관까지 표현하는 다이어그램 

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

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

타이밍(Timing) : 객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램

 

 

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

<<include>>, <<extend>>, <<interface>>, <<entity>>, <<boundary>>, <<control>>

 

UI 설계도구

개념 

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

 

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

프로세스 : 분석, 설계, 구현

 

UI설계 도구의 유형

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

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

UI 디자인도구 : 스케치, 어도비 익스피리언스

UI 디자인 산출물로 작업하는 프로토타이핑 도구 : 인비전, 픽사에이트, 프레이머

 

---

UML 다이어그램, UML관련 용어 시험출제!