02. UI 설계

📌 UML

✅ 개념

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

✅ 특징

• 가시화 언어 : 오류 적고 의사소통 용이
• 구축 언어 : UML을 소스 코드로 변환하여 구축 가능
• 명세화 언어 : 완전한 모델 작성 가능
• 문서화 언어 : 의사소통의 문서

✅ 구성요소

• 사물 : 추상적인 개념으로 주제를 나타냄, '명사' or '동사' 의미
• 관계 : 사물과 사물을 연결, '형용사' or '부사' 의미
• 다이어그램 : 사물과 관계를 모아 그림으로 표현한 형태

✅ UML 다이어그램

: 구조적(정적) / 행위적(동적) 다이어그램으로 구분

✔ 구조적 다이어그램

• 클래스 : 클래스의 속성 및 연산, 관계 표현
• 객체 : 객체와 객체 사이의 관계로 표현
• 컴포넌트 : 시스템 구성하는 물리적인 컴포넌트와 그들 사이의 의존관계 표현
• 배치 : 컴포넌트 사이의 종속성 표현, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치 표현
• 복합체 구조 : 클래스나 컴포넌트가 복합 구조를 갖는 경우 내부 구조 표현
• 패키지 : 유스케이스나 클래스 등 모델 요소들 그룹화한 패키지들의 관계 표현

✔ 행위적 다이어그램

• 유스케이스 : 시스템이 제공하고 있는 기능, 관련 외부 요소를 사용자 관점에서 표현
• 시퀀스 : 객체 간 동적 상호작용을 시간적 개념을 중심으로 메세지 흐름으로 표현
• 커뮤니케이션 : 동작에 참여하는 객체들이 주고 받는 메세지, 객체 간 연관 표현
• 상태 : 하나의 객체가 자신이 속한 클래스의 상태 변화 또는 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현
• 활동 : 시스템이 어떤 기능을 수행하는지, 조건에 따른 처리의 흐름을 순서대로 표현
• 타이밍 : 객체의 상태 변화와 시간 제약을 명시적으로 표현

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

• UML 기본 요소 이외 새로운 요소를 만들어 내기 위한 확장 매커니즘

• 형태는 UML 요소 그대로 사용하지만 내부는 다른 목적으로 사용하도록 확장

• '<<>>' (길러멧) 기호 사용하여 표현

• 유형

  • <<include>> : 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계
  • <<extend>> : 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행할 수도, 안할 수도 있는 확장 관계
  • <<interface>> : 추상메서드와 상수만으로 구성된 클래스
  • <<entity>> : 정보 또는 오래 지속되는 연관된 행위 형상화 하는 클래스
  • <<boundary>> : 시스템과 외부 액터와의 상호작용 담당 클래스
  • <<control>> : 시스템 제공 기능의 로직 및 제어 담당

📌 UML의 유형

✅ 클래스 다이어그램

• 구성요소 : 클래스 이름, 속성, 연산, 접근 제어자, 관계

• 관계

  • 연관 관계 (실선)
  • 집합 관계 (속이 빈 마름모)
  • 복합 관계 (속이 채워진 마름모)
  • 일반화 관계 (속이 빈 화살표)
  • 의존 관계 (점선 화살표)
  • 실체화 관계

✅ 유스케이스 다이어그램

• 구성요소
  • 유스케이스 : 시스템이 제공해야하는 서비스, 기능 / 액터의 행위
  • 액터 : 사용자가 시스템에 수행하는 역할 / 사람 또는 사물
  • 시스템 전체 시스템 영역을 표현
  • 시나리오
  • 이벤트 흐름
• 관계 : 액터와 유스케이스, 유스케이스와 유스케이스 사이에서 발생
  • 포함 관계 : 유스케이스 실행시 다른 유스케이스 반드시 수행되야 함
  • 확장 관계 : 특정 조건에서 한 유스케이스로만 확장
  • 일반화 관계 : 추상적인 액터와 구체적인 액터 사이에 맺어주는 관계

✅ 시퀀스 다이어그램

• 구성요소 : 객체, 생명선, 실행, 메세지

✅ 패키지 다이어그램

• 구성요소 : 패키지, 의존관계

✅ 활동 다이어그램

• 구성요소 : 시작점, 전이, 액션/액티비티, 종료점, 조건 노드, 병합 노드, 포크 노드, 조인 노드, 구획면

✅ 상태 다이어그램

• 구성요소 : 액터, 객체, 링크, 메세지

✅ 컴포넌트 다이어그램

• 구성요소 : 컴포넌트, 인터페이스, 의존관계

📌 UI 상세 설계

✅ UI 시나리오 문서의 작성 요건 (완일이가 추수)

• 완전성 : 누락이 없어야 하고 가능한 한 상세하게 기술
• 일관성 : 모든 문서의 UI 스타일을 일관적으로 구성
• 이해성 : 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명
• 가독성 : 쉽게 읽을 수 있어야 하고 표준화된 템플릿 작성하여 사용
• 추적 용이성 : 변경 사항 쉽게 추적 가능해야함
• 수정 용이성 : 쉽게 변경 가능해야 하고 수정 또는 개선 사항을 시나리오에 반영하는데 쉽게 적용할 수 있어야 함

📌 UI 설계 도구

✅ 화면 설계 도구

• 파워 목업 : 파워포인트에 추가 메뉴 설치하여 목업 기능 사용할 수 2
• 발사믹 목업 : 간단한 스케치
• 카카오 오븐 : 직관적인 인터페이스, 제작한 화면 QR코드 및 URL로 공유

✅ 프로토타이핑 도구

• UX핀 : 웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업 동시에 가능
• 액슈어 : 스토리보드에 포함되는 정책, 플로 차트, 디스크립션 까지 모두 작성 가능
• 네이버 프로토 나우 : 스토리보드, 플로 차트 등의 기능 지원 가능

✅ UI 디자인 도구

• 스케치 : 다양한 목업, 템플릿을 활용한 레이아웃 중심 UI 설계 지원 도구
• 어도비 익스피리언스 디자인 CC : UI 디자인에 최적화된 툴, 쉽고 직관적인 인터페이스

✅ UI디자인 산출물로 작업하는 프로토타이핑 도구

• 인비전 : 디자이너가 작업한 결과를 업로드하고 UI 연결하여 인터랙션
• 픽사에이트 : 모바일 앱 프로토타이핑에 최적화
• 프레이머 :코드 기반 작동하여 실제 작업물과 흡사