[정보처리기사 실기] 정처기 실기 대비 정리 요약 / CH2. 화면 설계

CH2. 화면 설계

 

UI 요구사항 확인

• UI 요구사항 확인
• UI 표준
• UI 지침
• 스토리보드

UI 설계

• UML

---

UI (User Interface, 사용자 인터페이스)

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

 

UX (User Experience, 사용자 경험)

제품과 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험 (UI를 포함하고 있다)

 

UI 유형 [CG NO]

CLI (Command Line Interface) : 명령어를 텍스트로 입력하여 조작

GUI (Graphical User Interface) : 그래픽 환경을 기반으로 한 마우스나 전자펜을 이용

NUI (Natural User Interface) : 신체 부위를 이용 / 터치, 음성

OUI (Organic User Interface) : 현실에 존재하는 모든 사물이 입출력장치로 변화

 

UI 설계원칙 [직유 학유]

직관성

유효성

학습성

유연성

 

UI 설계지침 [사일단결 가표접명오]

사용자 중심

일관성 : 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠르게 습독할 수 있도록 설계

단순성

결과 예측 가능

가시성

표준화

접근성

명확성 : 사용자가 개념적으로 쉽게 인지해야 함

오류 발생 해결

 

UI 품질 요구사항 (ISO/IEC 9126 기반) [기신사효유이]

기능성 - 적절성 / 정밀성 / 상호 운용성 / 보안성 / 호환성

신뢰성 - 성숙성 / 고장 허용성 / 회복성

사용성 - 이해성 / 학습성 / 운용성

효율성 - 시간 효율성 / 자원 효율성

유지보수성 - 분식성 / 변경성 / 안정성 / 시험성

이식성 - 적용성 / 설치성 / 대체성

 

UI 표준

디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약

 

레이아웃

상단(Top) / 왼쪽(Left) / 콘텐츠(Contents) / 하단(Footer)

 

스토리보드(Storyboard)

UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서 (설계 산출물)

 

UI 화면 설계 구분 [와스프]

와이어 프레임 : 화면 단위의 레이아웃을 설계하는 작업

스토리보드

프로토타입 : 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형

 

---

UML (Unified Modeling Language, 표준화된 모델링 언어)

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

 

UML 구성요소 [사관다]

사물(Things) : 추상적인 개념으로, 주제를 나타내는 요소

관계(Relationships) : 사물과 사물을 연결하여 관계를 표현하는 요소

다이어그램(Diagrams) : 사물과 관계를 모아 그림으로 표현한 형태

 

UML 다이어그램

1. 구조적(정적) 다이어그램

• 클래스(Class) : 객체지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
• 객체(Object) : 인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램
• 컴포넌트(Component) : 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타낸 다이어그램
• 배치(Deployment) : 컴포넌트 사이의 종속성을 표현하고, 물리적 요소들의 위치를 표현하는 다이어그램
• 복합체 구조(Composite Structure) : 클래스나 컴포넌트가 복합구조를 갖는 경우 그 내부 구조를 표현하는 다이어그램
• 패키지(Package) : 유스케이스나 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계를 표현한 다이어그램

2. 행위적(동적) 다이어그램

• 유스케이스(Usecase) : 시스템이 제공하고 잇는 기능 및 관련 외부 요소를 사용자의 관점에서 표현하는 다이어그램
• 시퀀스(Sequence) : 객체 간 동적 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현한 다이어그램
• 커뮤니케이션(Communication) : 객체들이 주고 받는 메시지를 표현하고, 객체 간의 연관까지 표현하는 다이어그램
• 상태(State) : 하나의 객체가 자신이 속한 클래스의 상태변화 혹은 상태가 어떻게 변화하는지 표현하는 다이어그램
• 활동(Activity) : 시스템의 기능을 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
• 타이밍(Timing) : 객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램

 

UML 관계 [연집복 일의실]

연관 : 축구팀 ㅡ 공격수

집합 : 컴퓨터 ◇ㅡ 프린터

복합 : 문 ◆ㅡ 열쇠

일반화 : 커피 ◁ㅡ 아메리카노

의존 : 할인율 <--- 등급

실체화 : 날 수 있다 ◁--- 새

 

UI 화면 버튼

Input Box : 값을 입력하는 버튼 / 이름 : [입력]

Compbo Box : 값을 선택 + 입력 하는 버튼 / 번호 : [010 선택]-[입력]-[입력]

Radio Box : 많은 값들 중에서 하나만 선택하는 버튼 / 성별 : ●남 ○여

Check Box : 많은 값들 중 한개 또는 여러개 선택가능한 버튼 / 취미 : ■게임 ■영화 □공부

 

UI 시나리오 문서의 작성 요건 [완일이가 추수]

완전성

일관성

이해성

가독성

추적 용이성

수정 용이성

 

UI 디자인 산출물로 작업하는 프로토타이핑 도구

인비전 (Invision)

픽사에이트 (Pixate) : 2015년 구글이 인수한 프로토타이핑 툴 / 모바일 앱 프로토타이핑 최적화

프레이머 (Framer) : 커피 스크립트 개발 언어 사용 / 코드 기반의 프로토타이핑 도구

 

---

단답형

 

리치 클라이언트 (Rich Client)

SW의 실행을 클라이언트에서 책임지는 기술로 서버는 클라이언트에서 요청한 SW의 실행 코드를 스트림 형태로 제공하고, 클라이언트는 서버로부터 스트리밍되는 SW 코드를 클라이언트 PC의 자원을 이용하여 실행하는 기술

 

씬 클라이언트 (Thin Client)

SW의 실행을 전적으로 서버에서 책임지는 기술로 서버에서 가상 머신을 이용하여 클라이언트의 데이터와 소프트웨어를 관리 및 실행하는 기술

 

SSO (Single Sign On)

한 번의 로그인을 통해 여러 다른 사이트들을 자동적으로 접속하여 이용하는 방법

 

정황 시나리오

요구사항 정의에 사용되는 초기 시나리오 / 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞추는 시나리오

 

액터(Actor)

시스템의 외부에 있고 시스템과 상호작용을 하는 사람 또는 시스템