Chapter 02. UI 설계

1. UML 특징 (가구명문)

• 가시화 언어 : 개념 모델 작성 시 오류가 적고 의사소통이 용이
• 구축 언어 : 다양한 프로그래밍 언어로 실행 시스템의 예측 가능 / UML을 소스 코드로 변환하여 구축 가능, 역공학 가능
• 명세화 언어 : 정확한 모델 제시, 완전한 모델 작성 가능
• 문서화 언어 : 시스템이 대한 평가 및 의사소통의 문서

2. UML 구성 요소 (사관다)

• 사물
• 관계
• 다이어그램

3. UML 다이어그램

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

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

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

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

5. 클래스 간의 관계 - UML 관계 (연집복 일의신)

• 연관 관계 : 실선으로 연결하여 표현하며, 방향성은 화살표로 표현 / 양방향은 화살표 없이 실선으로만
• 잡합 관계, 복합 관계 : 연관 관계에 포함
  • 연관 > 집합 > 복합
  • 집합(하나의 객체에 여러개의 독립적인 객체) : 포함되는 쪽에서 포함하는 쪽으로 속이 빈 마름모 연결로 표현
  • 복합(영구적이고 집합보다 강한 관계) : 포함되는 쪽에서 포함하는 쪽으로 속이 찬 마름모를 연결하여 표현
• 일반화 관계 (상속관계)
  • 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지 표현
  • 일반적인 개념을 부모라고 하고, 구체적은 개념을 자식이라고 함
  • 하위 사물에서 상위 사물 쪽으로 속이 빈 화살표를 연결하여 표현
• 의존 관계
  • 하나의 클래스가 또 다른 클래스를 사용하는 관계
  • 다른 클래스의 멤머 함수 사용
  • 사물 사이에 서로 연관은 있으나 필요에 따라 서로에게 영향을 주고 짧은 시간동안만 연관을 유지하는 관계
  • 영향을 주는 사물이 영향을 받는 사물쪽으로 점선 화살표를 연결하여 표현
• 추상 클래스
  • 객체 인스턴스를 생성하지 않고, 단지 유사 클래스들의 공통된 특징을 정의하고, 하나 이상의 추상 메서드와 일반 필드 및 일반 메서드를 포함하는 클래스
  • 상속을 받아서 기능을 확장시키는 것이 목적
  • 이탤릭체로 클래스 명을 표시하며, 스테레오타입을 이용하여 <<abstract>>로 표기
• 인터페이스
  • 기능을 모아놓은 클래스로 추상 메서드와 상수만을 포함하는 추상 클래스
  • 구현하는 모든 클래스에 대해 특정한 메서드가 반드시 존재하도록 강제하는 역할
  • 스테레오타입을 이용하여 <<interface>>로 표기하고 이탤릭체로 인터페이스 명 표기
• 실체화 관계
  • 추상 클래스나 인터페이스를 상속 받아 자식 클래스가 추상 메서드를 구현할 때 사용
  • 사물이 할 수 있거나, 해야 하는 기능(행위, 인터페이스)으로 서로 그룹화할 수 있는 관계 표현

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

• 유스케이스
• 액터
• 시스템
• 시나리오
• 이벤트의 흐름

7. 유스케이스 다이어그램의 관계

• 포함 관계
  • 유스케이스를 수행 할 때 다른 유스케이스가 반드시 수행되는 단계
• 확장 관계
  • 포함되는 관계처럼 여러 유스케이스에 걸쳐 중복적으로 사용되지 않고, 특정 조건에서 한 유스케이스로만 확장되는 관계
• 일반화 관계
  • 추상적인 액터와 좀더 구체적인 액터 사이에 맺어주는 관계
  • 하위 액터나 유스케이스에서 상위 액터나 유스케이스로 속이 빈 삼각형 화살표를 실선으로 연결

8. 시퀀스 다이어그램 구성 요소

• 객체
• 생명선
• 실행
• 메시지

9. 프로토 타이핑 도구

• UX 핀
• 액슈어
• 네이버 프로토나우