[화면설계] 2. UI 설계

이것저것 뭐가 만타...

---

키워드

UML / UML 다이어그램 / 유스케이스 다이어그램 / 시퀀스 다이어그램 / 패키지 다이어그램 / 활동 다이어그램 / 상태 다이어그램 / 커뮤니케이션 다이어그램 / 컴포넌트 다이어그램 / UI 설계 도구

---

UI 설계를 위한 UML (★★★)

• UML - 객체 지향 SW 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해 만든 표준화도니 범용 모델링 언어
  • 특징) 가시화된 언어 / 구축 언어 / 명서화 언어 / 문서화 언어
  • 구성요소) 사물 / 관계 / 다이어그램
  • UML 다이어그램
    • 구조적(정적) 다이어그램 : 클래스 / 객체 / 컴포넌트 / 배치 / 복합체 구조 / 패키지
      • 컴포넌트, 배치 다이어그램은 구현 단계에서 사용
    • 행위적(동적) 다이어그램 : 유스케이스 / 시퀀스 / 커뮤니케이션 / 상태 / 활동 / 타이밍
  • UML 확장 모델 스테레오 타입 : 기본적 요소 외 새로운 요소 만들어 내기 위한 확장 매커니즘

유형	예시
<<include>> 포함
<<extend>> 할 수 있고, 안할 수 있다는 확장
<<interface>> 모든 메서드가 추상 메서드고 상수로만 구성된 클래스
<<entity>> 기억 장치에 저장되어야 할 정보로 표현하는 클래스
<<boundary>> 시스템-외부 액터와의 상호작용 담당 클래스
<<control>> 시스템이 제공하는 기능의 로직, 제어 담당 클래스

• UML 유형
  • 클래스 다이어그램 - 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
    • 구성요소) 클래스 이름, 속성, 연산, 접근 제어자, 관계
      • 접근제어자) - (클래스 내부 접근만 허용/ private) / + (클래스 외부 접근 허용 / public) / # (동일 패키지, 파생 클래스에서 접근 가능 / protected) / ~ (동일 패키지 클래스에서 접근 가능 / default)
    • 클래스 간의 관계

구분	설명	사례
연관 관계(Association)	2개 이상의 사물이 서로 관련되어 있는 상태 / 서로 영향을 주는 양방향 관계면 화살표 생랼하고 실선으로만 표현
의존 관계(Dependency)	하나의 클래스가 또 다른 클래스를 하용하는 관계 / 짧은 시간만 연관 관계를 유지할 때 / 하나의 클래스에 있는 멤버 함수의 인자가 변함에 따라 다른 클래스에 영향을 미칠 때의 관계
일반화 관계(Generalization)	하나의 사물이 다른 사물에 비해 더 구체적인지 일반적인지 표현 / 상위(부모), 하위(자식) 이라고 함 / 상속 관계라고도 함
실체화 관계(Realization)	추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용 / 사물이 할 수 있거나 해야하는 기능으로 서로 그룹화할 수 있는 관계 표현
포함(복합) 관계(Composition)	영구적이고 집합관계보다 더 강한 관계로 구성 / 포함되는 쪽에서 포함하는 쪽으로 속이 채워진 마름모를 연결해 표현
집합 관계(Aggregation)	하나의 객체에 여러 개의 독립적인 객체들이 구성되는 관계 / 하나의 사물이 다른 사물에 포함되어 있는 관계 표현

• 실체화 관계에서 추상 클래스 인터페이스 관계
  • 추상클래스) 객체 인스턴스를 생성하지 않고, 단지 유사 클래스들의 공통된 특징을 정의하고 하나 이상의 추상 메서드와 일반 필드 및 일반 메서드를 포함하는 클래스
  • 인터페이스) 기능을 모아놓은 클래스로 추상메서드와 상수만을 포함하는 추상 클래스 / 구현하는 모든 클래스에 대해 특정 메서드가 반드시 존재하도록 강제하는 역할
• 유스케이스 다이어그램 - 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자 관점에서 표현하는 다이어그램
  • 구성요소 - 유스케이스(시스템이 제공해야 하는 서비스, 기능), 액터(사용자가 시스템에 대해 수행하는 역할/ 시스템과 상호작용하는 사람 또는 사물), 시스템(전체 시스템의 영역 표현), 시나리오(발생되는 이벤트의 흐름), 이벤트 흐름(사람, 시스템, 하드웨어, 시간의 흐름에 의해 시작)
  • 유스케이스 다이어그램의 관계
    • 포함 관계) 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계 // <<include>>
    • 확장 관계) 포함 관계처럼 여러 유스케이스에 걸쳐 중복적으로 사용되지 않고, 특정 조건에서 한 유스케이스로만 확장되는 관계... 특정 조건이 만족되는 상황에서만 확장 유스케이스의 이벤트 흐름 수행 // <<extend>>
    • 일반화 관계) 추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계 // 빈 삼각형 화살표 실선으로 연결
• 시퀀스 다이어그램 - 객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램 / 객체 간의 동적 상호 작용을 시간적 개념을 중심으로 모델링하는 과정
  • 구성요소 - 객체(너모 안 밑줄체), 생명선(점선), 활성화(직사각형 길이와 오퍼레이션 수행기간 비례), 메시지(화살표)
• 패키지 다이어그램 - 서로 다른 패키지들 사이의 의존관계를 표현하기 위한 다이어그램
  • 구성요소 - 패키지(요소들을 그룹으로 조직하기 위한 요소) / 의존관계(하나의 패키지가 다른 패키지를 사용하는 관계... 의존성 성질을 나타내기 위해 스테레오 타입 붙일 수 있음 / <<import>>, <<access>>)
• 활동 다이어그램 - 시스템이 어떤 기능을 수행하는지 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
  • 구성요소 - 시작점, 전이, 액션/액티비티, 조건(판단), 노드, 병합노드, 포크노드, 조인노드, 구획면
    • 어떻게 생긴지는 책 110쪽을 보자... 알고리즘 그릴 때 그거 같이 생김

• 상태 다이어그램 - 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
  • 구성요소 - 상태, 시작상태, 종료상태, 전이, 이벤트, 전이조건

• 커뮤니케이션 다이어그램 - 시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지 뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램
  • 구성요소 - 액터 / 객체(콜론을 기준으로 앞쪽은 객체명, 뒤쪽은 클래스명) / 링크 / 메시지(화살표 방향은 메시지 받는 쪽으로 향하게 표현)

• 컴포넌트 다이어그램 - 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램 / 코드 컴포넌트 기반의 물리적 구조로 표현
  • 구성요소 - 컴포넌트 / 인터페이스 / 의존관계

UI 설계 도구 (★☆☆)

• 개념 - 사용자와 시스템 사이에 의사소통 할 수 있도록 일시/영구적인 접근 목적으로 만들어진 물리적/가상적 매개체인 UI 설계 지원 도구
• 단계별 활용 가능한 설계 도구
  • 분석) UI 패턴, UI 모델링
  • 설계) UI 설계
  • 구현) 프로토타이핑
• UI 설계 도구의 유형
  • 화면 설계 도구) 파워 목업 / 발사믹 목업 / 카카오 오븐
  • 프로토타이핑 도구) UX핀 / 액슈어 / 네이버 프로토나우
  • UI 디자인 도구) 스케치 / 어도비 익스피리언스 디자인 CC
• UI 디자인 산출물로 작업하는 프로토타이핑 도구) 인비전 . 픽사에이트 / 프레이머