[정보처리기사 실기] 2. 화면 설계 - UI 요구사항 확인, UI 설계

UI: 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 매개체, UX가 UI 포함

 

UI 유형

CLI	정적인 텍스트 기반 인터페이스
GUI	그래픽 환경 기반으로 마우스, 전자펜을 이용
NUI	키보드나 마우스 없이 신체 부위를 이용
OUI	현실에 존재하는 모든 사물이 입출력장치로 변화

 

UI 설계 원칙

직관성	누구나 쉽게 이해하고 사용할 수 있음
유효성	완벽하게 사용자의 목표를 달성할 수 있음
학습성	누가나 쉽게 배우고 사용할 수 있음
유연성	사용자의 요구사항을 최대한 수 있음

 

 

UI 화면 설계 구분

와이어프레임	서비스의 흐름을 공유하기 위해 화면 단위의 레이아웃 설계
스토리보드	서비스 구축을 위한 모든 정보가 담겨있는 산출
프로토타입	정적인 화면으로 설계된것에 동적 효과 적용

 

목업 Mockup: 제품이나 서비스의 디자인을 시각적으로 보여주기 위한 모형

 

 

---

UML(Unified Modeling Language)

: OOP 개발 과정에서 산출물 모델링 기술과 방법론을 통합해서 만든 범용 모델링 언어

 

UML 구성요소

사물	주제를 나타내는 요소로 명사나 동사를 의미
관계	사물의 의미, 연결해서 관계를 표현
다이어그램	사물과 관계를 모아 그림으로 표현한 형태

 

UML 다이어그램

구조적 다이어그램

클래스	클래스 속성 및 연산과 클래스 간 정적인 관계 표현
객체	인스턴스를 특정 시점의 객체 사이의 관계로 표현
컴포넌트	시스템을 구성하는 컴포넌트 사이의 의존관계
배치	컴포넌트 사이의 종속성 표현
복합체 구조	클래스가 복합 구조를 갖는 경우 그 내부 구조 표현
패키지	유스케이스나 클래스 등이 모델 요소들을 그룹화한 페키지 관계 표현

 

 

행위적 다이어그램

유스케이스	시스템이 제공하는 기능과 관련 외부 요소 표현
시퀀스	객체 간 동적 상호 작용을 메시지 흐름으로 표현
커뮤니케이션	객체들이 주고받는 메시지 표현
상태	객체가 속한 클래스의 상태 변화 혹은 상호작용 표현
활동	시스템이 어떤 기능을 수행하는지 조건에 다른 처리의 흐름을 순서대로 표현
타이밍	객체 상태 변화와 시간 제약을 명시적으로 표현

 

UML 유형

• 클래스 다이어그램: 클래스 속성및 연산과 클래스 간의 정적인 관계를 표현
• 유스케이스 다이어그램: 시스템이 제공하는 기능과 외부 요소를 사용자 관점에서 표현
• 시퀀스 다이어그램: 객체 간 상호작용을 메시지 흐름으로 표현
• 패키지 다이어그램: 패키지 사이의 의존관계
• 활동 다이어그램: 처리과정 수행동안 일어나는 일을 단계적으로 표현
• 상태 다이어그램: 한 객체가 자신이 속한 클래스 상태 변화에 따라 상태가 어떻게 변하는지
• 커뮤니케이션 다이어그램: 동작에 참여하는 객체들이 주고받는 메시지 표현
• 컴포넌트 다이어그램: 물리적 컴포넌트와 그들 사이의 의존관계