정처기 실기 2-2. UI 설계

1. UI 설계를 위한 UML

 

< UML >

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

- UML 특징 : 가시화 언어 / 구축 언어 / 명세화 언어 / 문서화 언어

- UML 구성요소 : 사물 / 관계 / 다이어그램

- UML 다이어그램 :

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

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

 

- UML 확장 모델의 스테레오 타입 : '<< >>' (길러멧) 기호 사용

<< include >>	하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계
<< extend >>	하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수도 있는 확장 단계
<< interface >>	모든 메서드가 추상 메서드이며, 바로 인스턴스를 만들 수 없는 클래스로 추상 메서드와 상수만으로 구성된 클래스
<< entity >>	유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장 되어야 할 정보를 표현하는 클래스
<< boundary >>	시스템과 외부 액터와의 상호작용을 담당하는 클래스
<< control >>	시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스

 

 

 

< UML의 유형 >

1. 클래스 다이어그램

    - 구성요소 : 클래스 이름 / 속성 / 연산 / 접근 제어자

    - 관계 : 연관 관계 / 집합 관계 / 복합 관계 / 일반화 관계 / 의존 관계 / 실체화 관계

2. 유스케이스 다이어그램

    - 구성요소 : 유스케이스 / 액터 / 시스템 / 시나리오 / 이벤트의 흐름

    - 관계 : 포함 관계 / 확장 관계 / 일반화 관계

3. 시퀀스 다이어그램

    - 구성요소 : 액터 / 객체 / 생명선 / 활성화 / 메시지

 

---

3. UI 상세 설계

 

- UI 시나리오 문서의 작성 요건 :

완전성	누락이 없어야 하고, 최대한 빠짐없이 가능한 한 상세하게 기술
일관성	시스템 및 사용자의 요구사항이 일관성이 있어야 하고, 모든 문서의 UI 스타일을 일관적으로 구성
이해성	처음 접하는 사람도 이해하기 쉽도록 구성하고 설명
가독성	문서를 쉽게 읽을 수 이씨어야 하고 표준화된 템플릿을 작성하여 적용
추적 용이성	쉽게 추적이 가능해야 함
수정 용이성	쉽게 변경이 가능해야 함

 

---

4. UI 설계 도구

 

- 화면 설계 도구 : 파워 목업 / 발사믹 목업 / 카카오 오븐

- 프로토타이핑 도구 : UX핀 / 액슈어 / 네이버 프로토나우

- UI 디자인 도구 : 스케치 / Adobe XD

- UI 디자인 산출물로 작업하는 프로토타이핑 도구 : 인비전 / 픽사에이트 / 프레이머

 

 

---