Chapter1. UI 요구사항 확인
1. UI
- 개념 : 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체(좁은 의미 : 정보 기기나 SW의 화면)
- 유형
- CLI(Command Line Interface) : 명령어
- GUI(Graphical User Interface) : 그래픽 환경 기반 마우스나 전자펜
- NUI(Natural User Interface) : 키보드나 마우스 없이 신체 부위 이용
- OUI(Organic User Interface) : 현실에 존재하는 모든 사물이 입출력장치임
- 설계 원칙
- 직관성 : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함
- 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
- 학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작
- 유연성 : 사용자의 요구사항을 최대한 수용하고, 실수를 방지할 수 있도록 제작
- 품질 요구사항(ISO/IEC 9126기반) : 기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성
2. UI 지침
- UI 화면 설계
- 와이어프레임 : 이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업
- 스토리보드 : 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의, DB 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
- 프로토타입 : 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형
3. UI 프로토타입 제작 및 목업
- 프로토타입
- 장점 : 사용자 설득과 이해 쉬움, 개발 시간 감소, 오류 사전 발견을 통한 예방 가능
- 단점 : 수정 과정 증가 시 작업 시간 증가 위험, 요구사항에 대한 적절한 타협 필요, 자원 효율성 관점에서는 필요 이상의 많은 자원 소모
- 목업 : 제품이나 서비스의 디자인을 시각적으로 보여주기 위한 모형
- 디자인을 보여주고, 이를 수정하거나 개선하기 위해 사용
Chapter2. UI 설계
1. UML
- 개념 : 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
- 특징 : 가시화 언어, 구축 언어, 명세화 언어, 문서화 언어
- 구성 요소 : 사물, 관계, 다이어그램
- 다이어그램
- 구조적 다이어그램 / 정적 다이어그램
- 클래스 다이어그램 : 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
- 구성요소 : 클래스, 속성, 연산/메서드, 접근 제어자
- 관계 : 연관(축구팀-수비수), 의존(수업-교수), 일반화 관계(차-자가용,택시), 실체화(리트리버-강아지), 포함(엔진-피스톤,플러그), 집합(차-엔진,바퀴)
- 객체 다이어그램 : 클래스에 속한 사물들, 즉 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램
- 컴포넌트 다이어그램 : 시스템을 구성하는 컴포넌트와 그들 사이의 읜존 관계를 나타내는 다이어그램
- 구성요소 : 컴포넌트, 인터페이스, 의존 관계
- 배치 다이어그램 : 컴포넌트 사이의 종속성을 표현하고, 결과물, 프로세스, 컴포넌트 등 물리적 요소들의 위치를 표현하는 다이어그램
- 복합체 구조 다이어그램 : 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램
- 패키지 다이어그램 : 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현한 다이어그램
- 행위적 다이어그램 / 동적 다이어그램
- 유스케이스 다이어그램 : 시스템이 제공하고 이쓴 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
- 구성요소 : 유스케이스, 액터, 시스템, 시나리오, 이벤트의 흐름
- 관계 : 포함, 확장, 일반화
- 시퀀스 다이어그램 : 객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름으로 표현한 다이어그램
- 커뮤니케이션 다이어그램 : 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램
- 상태 다이어그램 : 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
- 구성요소 : 상태, 시작 상태, 종료 상태, 전이, 이벤트, 전이 조건
- 활동 다이어그램 : 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
- 구성요소 : 시작점, 전이, 액션/액티비티, 종료점, 조건 노드, 병합 노드, 포크 노드, 조인 노드, 구획면
- 타이밍 다이어그램 : 객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램
클래스 다이어그램
유스케이스 다이어그램
시퀀스 다이어그램
패키지 다이어그램
활동 다이어그램
상태 다이어그램
커뮤니케이션 다이어그램
컴포넌트 다이어그램