2. 화면 설계 (UI 요구사항 확인 / UI 설계)

🔢

01. UI 요구사항 확인

02. UI 설계

---

01. UI 요구사항 확인 

UI(User Interface)

- 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체

UX(User eXperience)

- 제품과 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험

 

UI 유형

CLI (Command Line Interface)	정적인 텍스트 기반 인터페이스	명령어 텍스트 입력
GUI (Graphical User Interface)	그래픽 반응 기반 인터페이스	마우스, 전자펜 이용
NUI (Natural User Interface)	직관적 사용자 반응 기반 인터페이스	키보드/마우스 없이 신체 부위 터치 및 음성
OUI (Organic User Interface)	유기적 상호 작용 기반 인터페이스	사용자의 동작, 환경, 물리적인 상호작용을 반영하는 인터페이스 기술

 

 

UI 설계 원칙

직유학유

직관성 Intuitiveness 인투잇티브너스	누구나 쉽게 이해, 쉽게 사용	일관성 / 쉬운 사용
유효성 Efficiency	정확, 완벽하게 사용자 목표 달성	쉬운 오류 처리 및 복구
학습성 Learnability	초보도 쉽게 배우고 사용할 수 있게 제작	쉽게 학습 / 쉽게 기억
유연성 Flexibility	실수 방지, 사용자 요구사항 최대 수용	오류 예방 / 실수포용 / 오류 감지

 

 

UI 설계 지침

사용자 중심
일관성
단순성
결과 예측 가능
가시성
표준화
접근성
명확성
오류 발생 해결

 

 

UI 품질 요구사항 (ISO/IEC 1926 기반)

기신사효유이

1. 기능성 (Functionality)	실제 수행 결과 - 품질 요구사항 차이 분석 및 시스템의 동작 관찰하기 위한 품질기준
2. 신뢰성 (Reliability)	시스템이 일정한 시간, 정해진 시간동안 의도하는 기능 수행 보증하는 품질기준
3. 사용성 (Usability)	사용자와 컴퓨터 사이 발생하는 어떤한 행위를 정확하고 쉽게 인지할 수 있는 품질기준
4. 효율성 (Effciency)	할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질기준
5. 유지보수성 (Maintainability)	요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질기준
6. 이식성 (Portability)	다른 OS에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가에 대한 품질기준

 

1. 기능성 (Functionality)

• 적절성
• 정밀성
• 상호 운용성
• 보안성
• 호환성

2. 신뢰성 (Reliability)

• 성숙성
• 고장 허용성
• 회복성

3. 사용성 (Usability)

• 이해성
• 학습성
• 운용성

4. 효율성 (Effciency)

• 시간 효율성
• 자원 효율성

5. 유지보수성 (Maintainability)

• 분석성
• 변경성
• 안정성
• 시험성

6. 이식성 (Portability)

• 적용성
• 설치설
• 대체성

---

02. UI 설계

UML (Unified Modeling Language)

- 객체지향 SW 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통해 만든 표준 모델링 언어

 

UML의 특징

가구명문

가시화 언어	개념 모델 작성 시 오류가 적교 의사사통 용이
구축 언어	다양한 개발 언어로 실행 시스템의 예측 가능 UML을 소스코드로 변환하여 구축가능, 역 변환하여 역공학 가능
명세화 언어	정확한 모델 제시, 완전한 모델 작성 가능
문서화 언어	시스템에 대한 평가 및 의사사통의 문서

 

 

UML의 구성요소

띵다리 or 사관다

사물 (Things)	추상적인 개념으로 주제를 나타내는 요소
관계 (Relationships)	사물의 의미 확장, 명확하게 하는 요소 사물과 사물 연결, 관계를 표현하는 요소
다이어그램 (Diagram)	사물, 관계를 모아 그림으로 표현한 형태 형식, 목적에 따라 9가지로 정의

 

 

UML의 구성요소 中 다이어그램의 구분

* 구조적 다이어그램 (Structural Diagram) = 정적 다이어그램 (Static Diagram)

클객컴배복패

클래스 (Class)	클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현 클래스 / 속성 / 연산 / 접근제어자(-private,+public,#protect,~default) 클래스간 관계(연의일실포집) : 연관 / 의존 / 일반화 / 실체화 / 포함(복잡) / 집합
객체 (Object)	클래스에 속한 사물들, 인스턴스 특정 시점의 객체와 객체 사이의 관계로 표현
컴포넌트 (Component)	시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존관계를 표현. 물리적 구조 표현 컴포넌트 / 인터페이스 / 의존관계
배치 (Deployment)	컴포넌트 사이의 종속성을 표현. 결과물 / 프로세스 / 컴포넌트 등 물리적 요소들이 위치를 표현
복합적 구조 (Composite Structure)	클래스나 컴포넌가 복합 구조를 갖는 경우 그 내부 구조를 표현
패키지 (Package)	유스케이스나 클래스 등 모델 요소들을 서로 다른 패키지들 사이 의존관계를 표현 패키지(📁 / 의존관계(<<import>>, <<access>>)

 

* 행위적 다이어그램 (Behavioral Diagram) = 동적 다이어그램 (Dynamic Diagram)

유시커상활타

유스케이스 (Usecase)	시스템이 제공하는 기능, 그 관련 외부 요소를 사용자의 관점에서 표현 유스케이스(⬭) / 액터(ጿ) / 시스템 / 시나리오 / 이벤트의 흐름 액터 ↔ 유케 or 유케↔유케 사이 나타내는 관계 : 포함(include) / 확장(extend) / 일반화(-▷)
시퀀스 (Sequence)	객체 간 동적 상호 작용을 시간점 개념을 중심으로 메시지 흐름으로 표현 액터 (ጿ) / 객체(□) / 생명선(점선) / 활성화(점선에박스) / 메시지(→)
커뮤니케이션 (Communication)	동작에 참여하는 객체들이 주고 받는 메시지를 표현 + 객체간의 연관까지 표현 시스템, 객체들이 시간의 흐름에따라 상호작용 하는 과정을 표현 액터 (ጿ) / 객체 (□) / 링크(실선) / 메시지(→)
상태 (State)	하나의 객체가 자신이 속한 클래스 상태 변화, 다른 객체와 상호 작용에따라 상태가 어떻게 변화하는지 표현 상태(■둥근네모) / 시작상태(●) / 종료상태(⊙) / 전이(→) / 이벤트(내용→) / 전이조건([조건]→)
활동 (Activity)	시스템이 어떤 기능을 수행하는지 객체 처리 로직이나 조건에 따른 처리 흐름을 순서대로 표현 시작점 / 전이 / 액션 / 종료점 / 조건노드 / 병합노드 / 포크노드
타이밍 (Timing)	객체 상태 변화의 시간 제약을 명시적으로 표현