UI 설계

1. UI 설계를 위한 UML

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

• UML의 특징
  • 가시화 언어
  • 구축 언어
  • 명세화 언어
  • 문서화 언어

• UML의 구성요소
  • 사물
  • 관계
  • 다이어그램

• UML 다이어그램
  • 구조적(정적) 다이어그램
    • 클래스
    • 객체
    • 컴포넌트
    • 배치
    • 복합체 구조
    • 패키지
  • 행위적(동적) 다이어그램
    • 유스케이스
    • 시퀀스
    • 커뮤니케이션
    • 상태
    • 활동
    • 타이밍

• UML 확장 모델의 스테레오 타입
  • UML의 스테레오 타입은 '<<>>' (길러멧) 기호를 사용하여 표현
    • <>
    • <>
    • <>
    • <>
    • <>
    • <>

• 클래스 다이어그램
  • 객체지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
  • 구성요소
    • 클래스 이름
    • 속성
    • 연산
    • 접근 제어자 == 접근 제한자
    • 관계
  • 클래스 간의 관계
    • 연관 관계 == 실선
    • 집합 관계 == 빈 마름모
    • 복합 관계 == 채워진 마름모
    • 일반화 관계 == 빈 화살표
    • 의존 관계 == 점선 화살표
    • 추상 클래스 == <>
    • 인터페이스 == <>
    • 실체화관계 == 그룹화

• 유스케이스 다이어그램
  • 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
  • 구성요소
    • 유스케이스
    • 액터
    • 시스템
    • 시나리오
    • 이벤트의 흐름
  • 다이어그램 관계
    • 액터와 유스케이스, 유스케이스와 유스케이스
    • 포함관계
    • 확장관계
    • 일반화관계

• 시퀀스 다이어그램
  • 객체 간 상호작용을 메시지 흐름으로 표현한 다이어그램
  • 구성요소
    • 액터
    • 객체
    • 생명선
    • 활성화
    • 메시지

• 패키지 다이어그램
  • 시스템의 서로 다른 패키지들 사이의 의존 관계를 표현하기 위한 다이어그램
  • 구성요소
    • 패키지
    • 의존관계

• 활동 다이어그램
  • 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
  • 구성요소
    • 시작점
    • 전이
    • 액션/액티비티
    • 조건 (판단)
    • 노드
    • 병합 노드
    • 포크 노드
    • 조인 노드
    • 구획면

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

• 커뮤니케이션 다이어그램
  • 시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램
  • 구성요소
    • 액터
    • 객체
    • 링크
    • 메시지

• 컴포넌트 다이어그램
  • 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램
  • 구성요소
    • 컴포넌트
    • 인터페이스
    • 의존 관계

2. UI 흐름 설계

• UI 흐름 설계
  • 업무의 흐름이나 업무 수행과 관련된 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동

• UI 설계서 구성
  • UI 설계서 표지
  • UI 설계서 개정 이력
  • UI 요구사항 정의
  • 시스템 구조
  • 사이트 맵
  • 프로세스 정의
  • 화면 설계

• UI 흐름 설계 수행 절차
  • UI 설계안의 적정성 확인
  • 화면과 폼의 흐름 설계
    • 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토
    • 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
    • UI 유스케이스 설계
    • 기능 및 양식 확인

3. UI 상세설계

• UI 상세설계 프로세스
  • UI 요구사항 최종 확인
  • UI 구조 설계
  • 사용자 기반 메뉴 구조 설계
  • 화면 설계
  • 하위 시스템 단위의 내외부 상세 화면과 폼 설계

• UI 검토 및 보완
  • UI 검토 수행
  • UI 검토 보완
  • 사용성 검토 및 검증 수행

• UI 시나리오 문서의 작성 요건
  • 완전성
  • 일관성
  • 이해성
  • 가독성
  • 추적 용이성
  • 수정 용이성

4. UI 설계 도구

• UI 설계 도구의 개념
  • UI 설계 도구는 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구

• UI 개발 단계별 활용 가능한 설계 도구
  • 분석, 설계, 구현의 절차를 거쳐 요구사항에 부합하는 화면의 구현을 이룸

• UI 설계 도구의 유형
  • 화면 설계 도구
    • 파워 목업
    • 발사믹 목업
    • 카카오 오븐
  • 프로토타이핑 도구
    • UX핀
    • 액슈어
    • 네이버 프로토나우
  • UI 디자인 도구
    • 스케치
    • 어도비 익스피리언스
  • UI 디자인 산출물로 작업하는 프로토타이핑 도구
    • 인비전
    • 픽사에이트
    • 프레이머

Question

• 패키지 다이어그램?
• combo box?
• UI 시나리오 문서 작성 요건 중 완전성?
• UI 시나리오 문서 작성 요건 중 가독성?
• UML 다이어그램 관계 중 일반화관계?
• 커뮤니케이션 다이어그램?
• 상태 다이어그램?
• UML 구성요소 세 가지?
• 시퀀스 다이어그램
• UML 스테레오 타입?
• 추상 클래스?
• UI 흐름 설계?