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