01 UI 요구사항 확인
▶ UI 설계 원칙(직유학유)
⦁ 직관성(Intuitiveness) : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 한다.
⦁ 유효성(Efficiency) : 정확하고 완벽하게 사용자의 목표가 달성 될 수 있도록 제작한다.
⦁ 학습성(Learnability) : 모두가 쉽게 배우고 사용할 수 있어야 한다.
⦁ 유연성(Flexibility) : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작
▶ UI 설계 지침
⦁ 단순성 : 조작 방법은 가장 간단하게 작동되도록 해 인지적 부담 최소화
⦁ 가시성 : 주요 기능을 메인 화면에 노출해 쉬운 조작이 가능해야 함
⦁ 일관성 : 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계
⦁ 명확성 : 사용자가 개념적으로 쉽게 인지해야 함
▶ UI 품질 요구사항(ISO/IEC 9126 기반)
⦁ 기능성(Functionality) : 적절성, 정밀성, 상호 운용성, 보안성, 호환성
⦁ 신뢰성(Reliability) : 성숙성, 고장 허용성, 회복성
⦁ 사용성(Usability) : 이해성, 학습성, 운용성
⦁ 효율성(Efficiency) : 시간 효율성, 자원 효율성
⦁ 유지보수성(Maintainability) : 분석성, 변경성, 안정성, 시험성
⦁ 이식성(Portability) : 적용성, 설치성, 대체성
▶ UI 개발을 위한 주요 기법
⦁ 3C 분석 : 고객(Customer), 자사(Company), 경쟁사(Competitor) 비교하고 분석
⦁ SWOT 분석 : 기업 내부 환경과 외부환경을 분석해 Strength, Weakness, Opportunity, Threat 요인을 규정하고 이를 토대로 경영 전략 수립
⦁ 시나리오 플래닝 : 상황 변화를 사전에 예측하고 다양한 시나리오 설계하는 방법
⦁ 사용성 테스트(Usability Test) : 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행 한 후, 질문에 답하도록 하는 테스트
▶ UI 화면 설계 구분
⦁ 스토리 보드 : 정책, 프로세스, 와이어 프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 정보가 수록된 문서, 디자이너와 개발자가 최종적으로 참고하는 산출 문서
⦁ 와이어 프레임 : 화면 단위의 레이아웃을 설계한는 작업
⦁ 프로토타입 : 정적인 화면(와이어 프레임, 스토리보드)에 동적 효과를 적용해 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형
02 UI 설계
▶ UML(Unified Modeling Language)
객체지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화 할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
▶ UML의 구성요소
사물, 관계, 다이어그램
▶ UML 다이어그램
◇ 구조적(Structural) 다이어그램 / 정적(Static) 다이어그램
⦁ 클래스 : 클래스의 속성 및 연산과 클래스 간 정적 관계를 표현한 다이어그램
⦁ 객체 : 클래스에 속한 사물, 인스턴스
⦁ 컴포넌트 : 컴포넌트와 그들 사이의 의존 관계
⦁ 배치(Deployment) : 컴포넌트 사이의 종속성, 물리적 요소들의 위치
⦁ 복합체 구조(Composite Structure) : 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램
⦁ 패키지 : 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계, 서로 다른패키지들 사이의 의존 관계 표현
◇ 행위적(Behavioral) 다이어그램/ 동적(Dynamic) 다이어그램
⦁ 유스케이스 : 시스템이 제공하고 있는 기능 관련된 외부 요소를 사용자의 관점에서 표현
⦁ 시퀀스(Sequence) : 객체 간 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
⦁ 커뮤니케이션 : 동작에 참여하는 객체들이 주고받는 메시지, 객체 간의 연관
⦁ 상태(State) : 상호작용에 따라 상태가 어떻게 변화하는지
⦁ 활동(Activity) : 어떤 기능을 수행하는지, 객체의 처리 로직, 조건에 따른 처리의 흐름
⦁ 타이밍 : 객체 상태 변화와 시간 제약을 명시적으로 표현
▶ UML/클래스 간의 관계
⦁ 연관 관계
⦁ 집합 관계 : 하나의 객체에 여러 개의 독립적인 객체들이 구성
⦁ 복합 관계 : 영구적, 집합 관계보다 더 강한 관계
⦁ 일반화 관계 : 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지 표현
⦁ 의존 관계 : 하나의 클래스가 또 다른 클래스 사용
▶ UI 시나리오 문서의 작성 요건
완전성, 일관성, 이해성, 가독성, 추적 용이성, 수정 용이성