화면 설계 - UI 설계
1. UI 설계를 위한 UML
UML
UML의 개념
객체지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화 할 때 사용하는 모델링 기술과 방법론을 통합해서 마는 표준화된 범용 모델링 언어이다.
UML의 특징
- 가시화 언어
- 구축 언어
- 명세화 언어
- 문서화 언어
가구명문
UML의 구성요소
- 사물
- 관계
- 다이어그램
UML 다이어그램
구조적 다이어그램(정적 다이어그램)
- 클래스(Class) 다이어그램: 클래스 사이의 관계를 표현하는 UML을 이용한 정적 모델링의 대표 다이어그램
- 객체(Object) 다이어그램: 클래스에 속한 사물(객체)들, 즉 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현
- 컴포넌트(Component) 다이어그램: 실제 구현 모듈인 컴포넌트 간의 관계나 컴포넌트 인터페이스 표현
- 배치(Deployment) 다이어그램: 컴포넌트 사이의 종속성을 표현하고, 결과물,프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현
- 복합체(Composite) 구조 다이어그램: 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현
- 패키지(Pakage) 다이어그램: 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현
클객컴배복패
행위 다이어그램(동적 다이어그램)
- 유스케이스 다이어그램: 시스템이 제공하고 있는 기능과 그와 관련된 외부 요소들을 사용자의 입장에서 표현하는 다이어그램
- 시퀀스 다이어그램: 객체간 동적 상호작용을 시간적 개념으로 메세지 흐름을 이용해서 표현하는 다이어그램
- 커뮤니케이션 다이어그램: 객체들이 주고받는 메세지와 객체 간의 연관을 표현하는 다이어그램
- 상태 다이어그램: 하나의 객체가 자신이 속한 클래스의 상태변화 혹은 다른 객체간의 상호작용에 따라 상태가 변하는 것을 표현하는 다이어그램
- 활동 다이어그램: 시스템이 어떤 기능을 수행하는지 처리의 흐름을 순서로 표현한 다이어그램
- 타이밍 다이어그램: 객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램
유시커상활타
UML의 유형
클래스 다이어그램
클래스 다이어그램 구성 요소
- 클래스:고옹의 속성, 연산 관계, 의미를 공유하는 객체들의 집합
- 속성: 클래스의 구조적 특성에 이름을 붙인 것
- 연산 메서드: 이름, 타입, 매개변수들과 연관된 행위를 호출하는데 요구되는 제약사항들을 명시하는 클래스의 행위적 특징
- 접근 제어자
private: 클래스 내부 접근만 허용(-)
public: 클래스 위부 접근 허용(+)
protected: 동일 패키지, 파생 클래스에서 접근 허용(#)
default: 동일 패키지 클래스에서 접근 허용(~)
클래스 간의 관계
1. 연관(Association) 관계: 클래스가 서로 개념적으로 연결
2. 집합(Aggregation) 관계: 하나의 객체에 여러개의 독립적인 객체가 구성되는 관계
3. 복합(Composition) 관계: 집합 관계보다 더 강한 관계(몸통 사망시 부분 클래스 사망)
4. 일반화(Generalization) 관계: 상속 관계, 부모와 자식으로 구성된 관계
5. 의존(Dependency) 관계: 하나의 클래스가 또 다른 클래스를 사용하는 관계
6. 실체화(Realization) 관계: 추상 클래스나 인테페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용
추상 클래스
객체 인스턴스를 사용하지 않고 유사 클래스들의 공통적인 특징만 정의해서 하나 이상의 추상 메서드와 일반 필드 및 일반 메서드를 포함하는 클래스
인터페이스
기능을 모아놓은 클래스로 추상메서드와 상수만을 포함하는 추상 클래스
연집복 일의실
유스케이스 다이어그램
유스케이스 다이어그램 구성요소
유스케이스
액터
시스템
시나리오
이벤트 흐름
유스케이스 다이어그램의 관계
- 포함관계(include): 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계
- 확장 관계(extend): 특정 조건에서 한 유스케이스로만 확장되는 관계
- 일반화 관계:추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계
시퀀스 다이어그램
시퀀스 다이어그램 개념
객체 간 상호작용을 메시지 흐름으로 표현한 다이어그램
시퀀스 다이어그램 구성요소
패키지 + 의존관계
활동 다이어그램
활동 다이어그램의 개념
시스템이 어떤 기능을 수행하는지 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현한 다이어그램
활동 다이어그램의 구성요소
시작점 + 전이 + 액션/액티비티 + 조건 노드 + 병합 노드 + 포크 노드 + 조인 노드 + 구획면
패키지 다이어그램
패키지 다이어그램의 개념
시스템의 서로 다른 패키지들 사이의 의존 관계를 표현한 다이어그램
패키지 다이어그램 구성요소
패키지 + 의존관계
상태 다이어그램
상태 다이어그램의 개념
하나의 객체가 자신이 속한 클래스들의 상태 변화를 표현하는 다이어그램
상태 다이어그램 구성요소
상태 + 시작 상태 + 종료 상태 + 전이 + 이벤트 + 전이 조건
커뮤니케이션 다이어그램
커뮤니케이션 다이어그램 개념
메시지와 객체간의 변화를 표현하는 다이어그램
커뮤니케이션 다이어그램 구성요소
액터 + 객체 + 링크 + 메시지
2.UI 흐름 설계
UI 설계 도구
UI 화면 설계 도구
- 파워 목업: 파워포인트에 추가 메뉴를 통해 목업 기능을 사용하도록 지원하는 툴
- 발사믹 목업: 스케치한 느낌으로 빠르게 서비스 콘셉트를 전달하는 목업
- 카카오 오븐: 카카오에서 제작한 온라인 프로토타이핑 도구
프로토타이핑 도구
- UX핀: 웹 브라우저로 와이어 프레임과 프로토타이핑을 동시에 하는 도구
- 액슈어: UI 설계보다 스토리보드에 포함되는 기능을 작성 가능한 도구
- 네이버 프로토나우: 네이버에서 만든 프로토타이핑 툴
