Chapter01 UI 요구사항 확인 (중요도: ★★★)
◆ UI(User Interface): 사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 물리적, 가상의 매개체
◆ UI유형(CG NO)
- CLI(Command Line Interface): 명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
- GUI(Graphical User Interfae): 그래픽 환경을 기반으로 한 마우스나 전자펜을 이용한 사용자 인터페이스
- NUI(Natural User Interface): 신체 부위를 이용하는 사용자 인터페이스
- OUI(Organic User Interface): 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스
UI 설계 원칙 (직유 학유)
| 설계 원칙 | 설명 | 부특성 |
| 직관성 (Intuitiveness) | 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함 | 쉬운 검색 쉬운 사용성 일관성 |
| 유효성 (Efficiency) | 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작 | 쉬운 오류 처리 및 복구 |
| 학습성 (Learnability) | 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작 | 쉽게 학습 쉬운 접근 쉽게 기억 |
| 유연성 (Flexibility) | 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작 | 오류 예방 실수 포용 오류 감지 |
◆ UI 설계 지침(사일단결 가표접명오): 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결
◆ UI 품질 요구사항(ISO/IEC 9126 기반)(기신사효유이)
- 기능성: 실제 수행 결과와 품질 요구사항과의 차이를 분석, 시스템 동작을 관찰하기 위한 품질 기준
- 적절성, 정밀성, 상호 운용성, 보안성, 호환성
- 신뢰성: 시스템이 일정한 시간 또는 작동되는 시간동안 의도하는 기능을 수행함을 보증하는 품질 기준
- 성숙성, 고장 허용성, 회복성
- 사용성: 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준
- 이해성, 학습성, 운용성
- 효율성: 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준
- 시간 효율성, 자원 효율성
- 유지보수성: 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질 기준
- 분석성, 변경성, 안정성, 시험성
- 이식성: 다른 플랫폼에서도 추가 작업 없이 얼마나 쉽게 적용 가능한가에 대한 품질 기준
- 적용성, 설치성, 대체성
◆ UI 표준: 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약
(액정 스패조) UI 표준 구성- 전체적인 UX 원칙 / 정책 및 철학 / UI 스타일 가이드 / UI 패턴 모델 정의 / UI 표 준 수립을 위한 조직 구성
◆ CRUD(Create, Read, Update, Delete): 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능
◆ UI 개발을 위한 주요 기법
- 3C 분석: 고객(Customer), 자사(Company), 경쟁사(Competitor)를 비교하고 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법
- SWOT 분석: 기업의 내/외부 환경을 분석하여 Strength(강점), Weakness(약점), Opportunity(기회), Treat(위협) 요인을 규정하고 이를 토대로 경영 저냑을 수립하는 방법
- 시나리오 플래닝: 상황 변화를 사전에 예측하고 다양한 시나리오를 섥{ㅖ하여 불확실성을 제거하는 경영 전략 방법
- 사용성 테스트: 사용자가 직접 제품을 사용하면서 시나리오에 맞춰 과제를 수행한 후 질문에 응답하는 테스트
- 워크숍: 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 세미나
◆ UI 화면 설계 구분(와스프)
- 와이어프레임: 화면 단위의 레이아웃을 설계하는 작업 (ppt, 키노트, 스케치, 일러스트)
- 스토리보드: 서비스 구축을 위한 모든 정보(정책, 프로세스,와이어프레임, 기능 정의 등)가 담겨 있는 설계 산출물 (ppt, 키노트, 스케치)
- 프로토타입: 정적인 화면(와이어프레임, 스토리보드)에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형. 전체적인 기능을 간략한 형태로 구현한 시제품 (HTML, CSS)
Chapter02 UI 설계 (중요도: ★★★)
◆ UML(Unified Modeling Language): 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
◆ UML 특징(가구명문): 가시화 언어, 구축 언어, 명세화 언어, 문서화 언어
◆ UML 구성요소(사관다):
- 사물 Things
- 관계 Relationships
- 다이어그램 Diagrams
◆ UML다이어그램
- 구조적 다이어그램 / 정적 다이어그램(클객컴배복패)
- 클래스(Class): 클래스의 속성 및 연산과 클래스간 정적인 관계를 표현
- 객체(Object): 클래스에 속한 사물(객체 =인스턴스)를 특정 시점의 객체와 객체 사이의 관계로 표현
- 컴포넌트(Component): 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계 표현
- 배치(Deployment): 컴포넌트 사이의 종속성을 표현하고, 물리적 요소들의 위치를 표현
- 복합체 구조(Composite Structure): 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현
- 패키지(Package): 유스케이스, 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계
- 행위적 다이어그램 / 동적 다이어그램(유시쿼상활타)
- 유스케이스(Usecase): 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 곤점에서 표현
- 시퀀스(Sequence): 객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
- 커뮤니케이션(Communication): 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 객체 간의 연관까지 표현
- 상태(State): 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현
- 활동(Activity): 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현
- 타이밍(Timing): 객체 상태 변화와 시간 제약을 명시적으로 표현
UML의 관계(Relationships)
UML의 관계는 사물과 사물 사이의 연관성을 표현하는 것이다.
UML의 관계(연집복 일의실)
| 구분 | 설명 | 예시 |
| 연관 관계 (Association) | 2개 이상의 사물이 서로 관련된 상태를 화살표 실선으로 표현 양방향 관계의 경우 화살표를 생략하고 실선 표현 | |
| 집합 관계 (Aggregation) | 포함되는 쪽(부분)에서 포함하는 쪽(Whole)으로 속이 빈 마름모를 연결하여 표현 | |
| 복합 관계 (Composition) | 포함 관계는 집합 관계의 특수한 형태로, 포함하는 사물의 변화가 포함되는 사물에 영향을 미치는 관계를 표현 포함되는 쪽(부분)에서 포함하는 쪽(전체)으로 속이 채워진 마름모를 연결하여 표현 | |
| 일반화 관계 (Generalization) | 일반화 관계는 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현 일반적인 개념을 부모(상위)라고 하고, 구체적인 개념을 자식(하위)이라 함 구체적(하위)인 사물에서 일반적(상위)인 사물 쪽으로 속이 빈 화살푤르 연결하여 표현 | |
| 의존 관계 (Dependency) | 의존 관계는 사물 사이에 서로 연관은 있으나 필요에 따라 서로에게 영향을 주는 짧은 시간 동안만 연관을 유지하는 관계를 표현 영향을 주는 사물이 영향을 받는 사물 쪽으로 점선 화살표를 연결하여 표현 | |
| 실체화 관계 (Realization) | 실체화 관계는 사물이 할 수 있거나, 해야하는 기능(행위, 인터페이스)으로 서로를 그룹화할 수 있는 관계를 표현 사물에서 기능 쪽으로 속이 빈 점선 화살표를 연결하여 표현 |
유스케이스 다이어그램의 구성요소
- 유스케이스(Usecase)
- 액터(Actor)
- 시스템(System)
UI 시나리오 문서의 요건(완일이가 추수)
- 완전성 (Complete)
- 누락되지 않도록 최대한 상세하게 기술
- 기능보다 사용자의 태스크에 초점
- 일관성 (Consistent)
- 서비스 목표, 요구사항, 스타일 등이 모두 일관성 유지
- 이해성 (Understandable)
- 누구나 쉽게 이해할 수 있도록 불분명하거나 추상적인 표현은 배제
- 가독성 (Readable)
- 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록
- 하이퍼링크를 지정하여 문서들이 서로 참조될 수 있도록 지정
- 수정 용이성 (Modifiable)
- 시나리오의 수정이나 개선이 용이해야 함
- 추적 용이성 (Traceable)
- 변경 사항을 쉽게 추적할 수 있어야 함
◆ UI 설계 도구의 유형
- 화면 설계 도구: 파워목업, 발사믹목업, (카카오)오븐
- 프로토타이핑 도구: UX핀, 액슈어, 네이버 프로토나우
- UI 디자인 도구: 스케치, Adobe XD
- UI 디자인 산출물로 작업하는 프로토타피핑 도구: 인버전, 픽사에이트, 프레이머