1. UI 요구사항 확인
| 중분류 | 소분류 | 키워드 |
| UI 개념 및 유형 | UI와 UX | - UI : 사용자 인터페이스 - UX : 사용자 경험 |
| UI 유형 | - CLI - GUI - NUI - VUI - OUI |
|
| UI 설계 원칙 및 지침 | UI 설계 원칙 (지유학연) |
- 직관성 - 유효성 - 학습성 - 유연성 |
| UI 품질 | UI 품질 요구사항 (기신사 효유이) |
- 기능성 : 적절성, 정밀성, 상호 운용성, 보안성, 호환성 - 신뢰성 : 성숙성, 고장 허용성, 회복성 - 사용성 : 이해성, 학습성, 운용성 - 효율성 : 시간 효율성, 자원 효율성 - 유지보수성 : 분석성, 변경성, 안정성, 시험성 - 이식성: 적용성, 설치성, 대체성 |
1.1 UI 개념 및 유형
(1) UI와 UX
| 구분 | 설명 |
| UI (User Interface) |
- 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체 - 사용자 중심으로 설계되어야 한다 |
| UX (User eXperience) |
- 제품과 시스템 서비스 등을 사용자가 직, 간접적으로 경험하면서 느끼고 생각하는 총체적 경험을 의미 |
(2) UI 유형
| UI 종류 | 설명 |
| CLI (Command Line Interface) |
- 텍스트 형태로 이루어진 인터페이스 |
| GUI (Graphical User Interface) |
- 마우스를 선택하여 작업하는 그래픽 환경의 인터페이스 |
| NUI (Natural User Interface) |
- 사용자의 말이나 행동으로 기기를 조작하는 인터페이스 |
| VUI (Voice User Interface) |
- 사람의 음성으로 기기를 조작하는 인터페이스 |
| OUI (Organic User Interface) |
- 사물과 사용자 간의 상호작용을 위한 인터페이스 |
1.2 UI 설계 원칙 및 지침
(1) UI 설계 원칙
| 설계 원칙 (지유학연) | 설명 |
| 직관성 (Intuitiveness) |
- 누구나 쉽게 이해하고, 쉽게 사횽할 수 있어야 한다 |
| 유효성 (Efficiency) |
- 정확하고 완벽하게 사용자의 목표가 달성 될 수 있도록 제작해야 한다 |
| 학습성 (Learnability) |
- 누구나 쉽게 배우고 사용할 수 있어야 한다 |
| 유연성 (Flexibility) |
- 사용자의 요구사항을 최대한 수용하고 실수를 방지할 수 있도록 제작해야 한다 |
1.3 UI 품질
(1) UI 품질 요구사항
| 품질 요구사항 (기신사 효유이) | 설명 |
| 기능성 | - 실제 수행 결과와 품질 요구사항과의 차이를 분석하여 시스템 동작을 관찰하기 위한 품질 기준 - 적절성, 정밀성, 상호 운용성, 보안성, 호환성 |
| 신뢰성 | - 시스템이 일정한 시간 또는 작동되는 시간동안 의도하는 기능을 수행함을 보증하는 품질 기준 - 성숙성, 고장 허용성, 회복성 |
| 사용성 | - 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준 - 이해성, 학습성, 운용성 |
| 효율성 | - 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준 - 시간 효율성, 자원 효율성 |
| 유지보수성 | - 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질 기준 - 분석성, 변경성, 안정성, 시험성 |
| 이식성 | - 다른 플랫폼에서도 추가 작업 없이 얼마나 쉽게 적용가능한가에 대한 품질 기준 - 적용성, 설치성, 대체성 |
2. UI 지침
| 중분류 | 소분류 | 키워드 |
| SW 개발 단계별 UI 지침 | 목표 정의 | - 3C 분석 - SWOT 분석 - 시나리오 플래닝 (Scenario Planning) - 워크숍 (Workshop) |
| 프로젝트 계획 | - 프로파일 - 리서치 |
|
| 요구사항 정의 | - 페르소나 - 브레인 스토밍 - 요구사항 매트릭스 - 정황 시나리오 |
|
| 설계 및 구현 | - UI 시나리오 문서 | |
| 테스트 | - 사용성 테스트 (Usability Test) | |
| UI 화면 설계 | UI 화면 설계 | - 와이어프레임 - 스토리타입 - 프로토타입 |
2.1 SW 개발 단계별 UI 지침
🤔 UI 표준이란?
디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면 구성 등에 관한 규약
🤔 UI 지침이란?
UI 표준에 따라 개발 시 지켜야하는 가이드라인
| 개발 단계 | 구분 | 설명 |
| 목표 정의 | 3C 분석 | - Customer (고객), Company(회사), Competitor(경쟁사) 비교 분석 |
| SWOT 분석 | - Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 분석 | |
| 시나리오 플래닝 | - 다양한 시나리오를 설계하여 분확실성 제거 | |
| 워크숍 | - 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어를 교환하고 검토하는 세미나 | |
| 프로젝트 계획 | 프로파일 | - 한정적으로 특징을 가지는 그룹화된 값 |
| 리서치 | - 설문이나 조사 | |
| 요구사항 정의 | 페르소나 | - 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴 응집 |
| 브레인스토밍 | - 자유로운 분위기에서 집단에 소속된 인원들이 자발적으로 아이디어 회의 | |
| 요구사항 매트릭스 | - 요구사항을 검토, 데이터, 기능, 품질, 제약 사항을 고려한 요구사항 표 | |
| 정황 시나리오 | - 요구사항 정의에 사용되는 초기 시나리오 | |
| 설계 및 구현 | UI 시나리오 문서 | - 인터페이스 기능 구조, 대표 화면, 인터렉션 흐름, 다양한 상황 예외처리 - 시나리오 문서 작성요건 : 완전성, 일관성, 이해성, 가독성, 추적 용이성, 수정 용이성 |
| 테스트 | 사용성 테스트 | - 사용자에게 직접 제품을 사용하며, 시나리오에 답하도록하는 테스트 |
2.2 UI 화면 설계
| 구분 | 설명 |
| 와이어 프레임 | - 화면 단위의 레이아웃을 설계 |
| 스토리보드 | - 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물 |
| 프로토타입 | - 정적인 화면에 동적 효과를 적용하여 실제 구현된 것 처럼 시뮬레이션 할 수 있는 모형 - 전체적인 기능을 간략한 형태로 구현한 시제품 |
3. UI 설계
| 중분류 | 소분류 | 키워드 |
| UML 개념 및 구성 요소 | UML의 개념 | - 객체 지향 소프트웨어 개발 산출물 문서화 표준 모델링 언어 |
| UML 구성요소 (사관다) |
- 사물 - 관계 - 다이어그램 |
|
| UML 특성 | - 가시화 언어 - 구축 언어 - 명세화 언어 - 문서화 언어 |
|
| UML 다이어그램 |
구조적(정적) 다이어그램 (클객컴 배복패) |
- 클래스 - 객체 - 컴포넌트 - 배치 - 복합체 - 패키지 |
| 행위적(동적) 다이어그램 (유시커 상활타) |
- 유스케이스 - 시퀀스 - 커뮤니케이션 - 상태 - 활동 - 타이밍 |
|
| UML 상세 표현 | 스테레오 타입 | <<>> |
| 클래스 다이어그램 관계 표현 | 포함관계 단방향 연관관계 일반화 관계 집합 관계 양방향 연관관계 의존관계 실체화 관계 |
|
| 클래스 다이어그램 접근 제어자 | public + : 클래스 외부 접근 허용 private - : 클래스 내부 접근 허용 protected # : 동일 패키지/파생 클래스에서 접근 default ~ : 동일 패키지 클래스에서 접근 |
3.1 UML 개념 및 구성요소
(1) UML 개념 및 구성요소
🤔 UML(Unified Modeling Language)이란?
객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
UML 구성요소 (사관다)
| 구성 요소 | 설명 |
| 사물 | - 주제를 나타내는 요소 |
| 관계 | - 사물과 사물을 연결하여 관계를 표현하는 요소 |
| 다이어그램 | - 사물과 관계를 모아 그림으로 표현한 형태, 9가지로 정의한다 |
(2) UML 특성
| 종류 | 설명 |
| 가시화 언어 | - 오류가 적고, 의사소통이 용이 |
| 구축 언어 | - UML을 소스 코드로 변환하여 구축 가능, 역변환하여 역공학 가능 |
| 명세화 언어 | - 정확한 모델 제시, 완벽한 모델 작성 가능 |
| 문서화 언어 | - 시스템에 대한 평가 및 의사소통의 문서 |
3.2 UML 다이어그램
(1) 구조적(정적) 다이어그램
| 정적 다이어그램 (클객컴 배복패) | 예시 |
| 클래스 다이어그램 : 클래스의 정적 구조를 표현, 클래스 간 관계 표현 |
 |
| 객체 다이어그램 : 객체 정보 표현 |
 |
| 컴포넌트 다이어그램 : 컴포넌트 구조 사이의 관계 표현 |
 |
| 배치 다이어그램 : 물리 구조 표현, 컴포넌트의 종속성을 표현 |
 |
| 복합체 구조 다이어그램 : 복합 구조의 클래스와 컴포넌트 내부 구조 표현 |
 |
| 패키지 다이어그램 : 패키지 관계 표현 |
 |
(2) 행위적(동적) 다이어그램
| 동적 다이어그램 종류 (유시커 상활타) | 예시 |
| Use Case 다이어그램 : 사용자 관점에서 시스템 행위 표현 |
 |
| 시퀀스 다이어그램 : 객체 간 상호작용을 메시지 흐름으로 표현 |
 |
| 커뮤니케이션 다이어그램 : 객체들이 주고 받는 메시지 표현 |
 |
| 상태 다이어그램 : 객체가 어떻게 변화하는지 표현 |
 |
| 활동 다이어그램 : 업무 처리(연산) 과정을 표현 |
 |
| 타이밍 다이어그램 : 객체 상태 변화와 시간 제약을 명시적으로 표현 |
 |
| 상태 머신 다이어그램 : 객체의 생명주기를 표현 |
 |
3.3 UML 상세 표현
(1) 스테레오 타입
<<>> : 길러멧 (Guilemet)
(2) 클래스 다이어그램 관계 표현
| 종류 |
설명 | 표시 |
| 포함관계 | 전체/부분 객체 라이프 타임 의존적 |  |
| 단방향 연관관계 | 한쪽은 알지만 반대쪽은 상대방의 존재 모름 |  |
| 일반화 관계 | 상속관계를 표현하며 하위 모듈이 상위 모듈보다 더 구체적인 개념을 가진다 |  |
| 집합관계 | 클래스 사이 전체나 부분이 같은 관계로, 서로 독립적 |  |
| 양방향 연관관계 | 양쪽 클래스가 서로의 존재를 인식 |  |
| 의존 관계 | 연관관계와 같으나 짧은 시간 동안 유지됨 |  |
| 실체화 관계 | 책입 집합 인터페이스와 실제로 실현한 클래스들의 사이를 표현 |  |
(3) 클래스 다이어그램 접근 제어자
| 종류 | 설명 |
| public ( + ) | - 클래스 외부 접근 허용 |
| private ( - ) | - 클래스 내부 접근 허용 |
| protected ( # ) | - 동일 패키지/파생 클래스에서 접근 |
| default ( ~ ) | - 동일 패키지 클래스에서 접근 |
728x90