06. UI 설계

UML (Unified Modeling Language)

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

UML의 특징

1. 가시화 언어

개념 모델 작성 시 오류가 적고 의사소통이 용이

 

2. 구축 언어

다양한 프로그래밍 언어로 실행 시스템의 예측 가능

UML을 소스 코드로 변환하여 구축 가능, 역 변환하여 역공학 가능

 

3. 명세화 언어

정확한 모델 제시, 완전한 모델 작성 가능

 

4. 문서화 언어

시스템에 대한 평가 및 의사소통의 문서

UML의 구성요소

1. 사물 (Things)

추상적인 개념으로, 주제를 나타내는 요소

단어 관점에서 '명사' 또는 '동사'를 의미

 

2. 관계 (Relationships)

사물과 의미를 확장하고 명확히 하는 요소

사물과 사물을 연결하여 관계를 표현하는 요소

단어 관점에서 '형용사'또는 '부사'를 의미

 

3. 다이어그램 (Diagrams)

사물과 관계를 모아 그림으로 표현한 형태

형식과 목적에 따라 9자리로 정의

UML 다이어그램

1. 구조적 다이어그램 (Structual Diagram) / 정적 다이어그램 (Static Diagram)

• 클래스 (Class) : 객체지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
  - 집합 관계 : 하나의 객체에 여러 개의 독립적인 객체들이 구성되는 관계, 하나의 사물이 다른 사물에 포함되어있는 관계를 표현하며 포함되는 쪽(부분)에서 포함하는 쪽(전체)으로 속이 빈 마름모를 연결하여 표현
  - 복합(포함) 관계 : 영구적이고, 집합 관계보다 더 강한 관계로 구성
  포함되는 쪽(부분)에서 포함하는 쪽(전체)으로 속이 채워진 마름모를 연결하여 표현 
  - 일반화(상속) 관계 : 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현
  일반적인 개념을 부모(상위)라고 하고, 구체적인 개념을 자식(하위)이라 함
  구체적(하위)인 사물에서 일반적(상위)인 사물 쪽으로 속이 빈 화살표를 연결하여 표현
  - 의존 관계 : 하나의 클래스가 또 다른 클래스를 사용하는 관계
  다른 클래스의 멤버 함수를 사용
  의존 관계는 사물 사이에 서로 연관은 있으나 필요에 따라 서로에게 영향을 주는 짧은 시간 동안만 연관을 유지하는 관계를 표현
  하나의 클래스에 있는 멤버 함수의 인자가 변함에 따라 다른 클래스에 영향을 미칠 때의 관계
  영향을 주는 사물이 영향을 받는 사물 쪽으로 점선 화살표를 연결하여 표현
  - 추상 클래스 : 객체 인스턴스를 생성하지 않고, 단지 유사 클래스들의 공통된 특징을 정의하고, 하나 이상의 추상 메서드와 일반 필드 및 일반 메서드를 포함하는 클래스
  동일한 부모를 가지는 클래스를 묶는 개념으로 상속을 받아서 기능을 확장시키는 것이 목적
  이탤릭체로 클래스 명을 표시하며, 스테레오 타입을 이용하여야 <<abstract>>로 표기
• 객체 (Object) : 클래스에 속한 사물(객체)들, 즉 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램으로 연관된 모든 인스턴스를 표현
• 컴포넌트 (Component) : 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램
• 배치 (Deployment) : 컴포넌트 사이의 종속성을 표현하고, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현하는 다이어그램
• 복합체 구조 (Composite Structure) : 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램
• 패키지 (Package) : 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현한 다이어그램

2. 행위적 다이어그램 (Behavioral Diagram) / 동적 다이어그램 (Dynamic Diagram)

• 유스케이스 (Usecase) : 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
• 시퀀스 (Sequence) : 객체 간 동적 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현한 다이어그램
  - 객체 (Object) : 객체는 위쪽에 표시되며 아래로 생명선을 가짐, 사각형 안에 밑줄 친 이름으로 표시
  - 생명선 (Lifeline) : 객체로부터 뻗어 나가는 점선, 실제 시간이 흐름에 따라 객체의 생명주기 동안 발생하는 이벤트를 명시
  - 실행 (Activation : 활성화) : 직사각형은 오퍼레이션(함수)이 실행되는 시간을 의미, 직사각형이 길어질수록 오퍼레이션 수행 시간이 긺
  - 메시지 (Message) : 객체 간의 상호작용은 메시지 교환으로 이루어짐, 한 객체에서 다른 객체로의 메시지를 전달하여 전달받은 객체의 오퍼레이션을 수행
• 커뮤니케이션 (Communication) : 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램
• 상태 (State) : 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
• 활동 (Activity) : 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
• 타이밍 (Timing) : 객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램

UML 스테레오 타입

1. <<include>>

하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계

 

2. <<extend>>

하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수도 있는 확장 관계

 

3. <<interface>>

모든 메서드가 추상 메서드이며 바로 인스턴스를 만들 수 없는 클래스로 추상 메서드와 상수만으로 구성된 클래스

 

4. <<entity>>

일반적으로 정보 또는 오래 지속되는 연관된 행위를 형상화하는 클래스로 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장되어야 할 정보를 표현하는 클래스

 

5. <<boundary>>

시스템과 외부 액터와의 상호작용을 담당하는 클래스

 

6. <<control>>

시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스

UI 흐름 설계

업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동

UI 시나리오 문서 작성 요건

1. 완전성 (Complete)

UI 시나리오는 누락이 없어야 하고, 최대한 빠짐없이 가능한 한 상세하기 기술

시스템 기능보다 사용자의 태스크에 초점을 맞춰 기술

 

2. 일관성 (Consistent)

서비스에 대한 목표, 시스템 및 사용자의 요구사항이 일관성이 있어야 하고, 모든 문서의 UI 스타일(Flow 또는 Layout)을 일관적으로 구성

 

3. 이해성 (Understandable)

처음 접하는 사람도 이해하기 쉽도록 구성하고 설명해야 하고, 이해하지 못하는 추상적인 표현이나 이해하기 어려운 용어는 사용하지 않아야 함

 

4. 가독성 (Readable)

문서를 쉽게 읽을 수 있어야 하고(문서 템플릿과 타이포그래피), 표준화된 템플릿을 작성하여 적용

버전의 넘버링은 일관성 있게 하고, 시각적인 효과를 위한 하이라이팅은 일관성 있게 활용

 

5. 추적 용이성 (Traceable)

쉽게 추적이 가능해야 하고, 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생하였는지 추적이 쉬워야 함

 

6. 수정 용이성 (Modifiable)

쉽게 변경이 가능해야 하고, 수정 또는 개선 사항을 시나리오에 반영하는 데 있어 쉽게 적용할 수 있어야 함

동일한 수정 사항을 위해 여러 문서를 편집하지 않도록 함

UI 설계 도구

1. 화면 설계 도구 

• 파워 목업 (Power Mockup)
• 발사믹 목업 (Balsamiq Mockup)
• 카카오 오븐 (Oven)

2. 프로토타이핑 도구

• UX 핀 (UXPin)
• 액슈어 (AXURE)
• 네이버 프로토나우 (ProtoNow)

3. UI 디자인 도구

• 스케치 (Sketch)
• 어도비 익스피리언스 디자인 CC (Adobe XD)

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

• 인비전 (Invision)
• 픽사에이트 (Pixate)
• 프레이머 (Framer)