[License] 02. 화면 설계 [정보처리기사 실기]

# UI 요구사항 확인

UI (User Interface)

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

정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면

 

CLI (Command Line Interface) 정적인 텍스트 기반 인터페이스

명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스 (Dos)

 

GUI (Graphical User Interface) 그래픽 반응 기반 인터페이스

마우스나 전자펜을 이용하는 사용자 인터페이스 (키보드, 마우스)

 

NUI (Natural User Interface) 직관적 사용자 반응 기반 인터페이스

키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스 (터치, 음성)

 

OUI (Organic User Interface) 유기적 상호작용 기반 인터페이스

현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스

 

UI 설계원칙 - 직유학유

직관성 (Intuitiveness)

누구나 쉽게 이해하고 쉽게 사용할 수 있게 제작 한다

 

유효성 (Effciency)

정확하고 완벽하게 사용자의 목표가 달성될 수 있게 제작 한다

 

학습성 (Learnability)

누구나 쉽게 배우고 사용할 수 있게 제작 한다

 

유연성 (Flexibility)

요구사항을 최대한 수용하고 실수를 방지할 수 있도록 제작 한다

 

UI 설계지침

사용자 중심 : 사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경 제공

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

단순성 : 조작방법은 가장 간단하게 작동

결과예측가능 : 작동시킬 기능만 보고도 결과예측이 가능하게

가시성 : 주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능하게

표준화 : 디자인을 표준화하여 선행학습 이후 쉽게 사용가능하게

접근성 : 다양한 계층을 수용할 수 있게

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

오류발생해결 : 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야한다

 

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

기능성 (Functionality) : 실제 사용시 정확하지 않은 결과가 발생활 확률을 위한 품질 기준

적절성 (Suitality), 정밀성 (Accuracy), 상호운용성 (Interoperability), 보안성 (Security), 호환성 (Compliance)

 

신뢰성 (Reliability) : 작동되는 시간동안 의도하는 기능을 수행함을 보증하는 품질 기준

성숙성 (Maturity), 고장허용성 (Fault tolerance), 회복성 (Recoverability)

 

사용성 (Usablity) :사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준

이해성 (Understadability), 학습성 (Learnability), 운용성(Operabilitly)

 

효율성 (Efficiency) : 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준

시간효율성 (Time Behaviour), 자원효율성 (Resource Behaviour)

 

유지보수성 (Maintainability) : 요구사항을 개선하고 확장하는데 있어 얼마나 용이한가에 대한 품질 기준

분석성 (Analtzability), 변경성 (changeability), 안정성 (stability), 시험성 (Testability)

 

이식성 (Portability) : 다른 플랫폼 에서도 많은 추가작업 없이 얼마나 쉽게 적용 가능한가에 대한 품질 기준

적용성 (Adaptability), 설치성 (Installability), 대체성 (Replaceability)

 

UI 표준

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

 

UI 스타일 가이드

UI의 통일과 일관적인 화면구성을 위해서 시스템이 지켜야할 UI 요소 정의와 화면설계원칙을 제시한다

 

3C 분석

고객 (Customer), 자사 (Company), 경쟁사 (Competitor)를 비교하고 분석하여 어떻게 이길지 분석

 

SWOT 분석

강점 (Strength), 약점 (Weakness), 기회 (Opportunity), 위협 (Threat) 토대로 경영전략 세우는것

 

시나리오 플래닝

불확실성이 높은 상황변화를 사전에 예측하고 시나리오 설계해 불확실성을 제거하는 전략

 

사용성 테스트

사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제수행 후 답 테스트

 

페르소나 정의

잠재적 사용자의 행동 패턴을 응집시켜놓은 가상의 사용자

 

콘셉트 모델 정의

다양한 아이디어들을 간편하게 시각화하여 표현할 수 있는 방법

 

와이어프레임

서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업

 

스토리보드

UI화면설계를 위해서 와이어프레임 (UI, UX), 기능에대한 정의, 데이터베이스 연동 등

구축하는 서비스를 위한 대부분 정보가 수록된 문서

 

프로토타입

실제 구현된것 처럼 시뮬레이션 할 수 있는 모형

 

UML (Unified Modeling Language)

객체지향 소프트웨어 개발과정에서 산출물을 명세화, 시각화, 문서화 할때

사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링언어

 

UML 특징

가시화언어

오류가 적고 의사소통이 용이

 

구축언어

UML을 소스코드로 변환하여 구축가능

 

명세화언어

정확한 모델 제시

 

문서화 언어

의사소통의 문서

 

UML 구성요소

사물 (Things)

추상적인 개념으로 주제를 나타내는 요소, 명사/동사

 

관계 (Relationships)

사물과 사물을 연결하여 관계를 표현, 형용사/부사

 

다이어그램 (Diagrams)

사물과 관계를 모아 그림으로 표현한 형태

 

UML 다이어그램

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

 

클래스 (Class)

클래스 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램

클래스, 속성, 연산/메서드, 접근제어자

 

연관 (Association) 실선

집합 (Aggregation) 속이 빈 마름모

복합 (Composition) 속이 채워진 마름모

일반화 (Generalization) 속이 빈 화살표

의존 (Dependency) 점선 화살표

실체화 (Realization) 속이 빈 점선 화살표

 

객체 (Object)

인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현한 다이어그램

 

컴포넌트 (Component)

컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램

컴포넌트, 인터페이스, 의존관계

 

배치 (Deployment)

컴포넌트 사이의 종속성을 표혀느 위치를 표현하는 다이어그램

 

복합체구조 (Composite Structure)

내부 구조를 표현하는 다이어그램

 

패키지 (Package)

패키지들의 관계를 표현한 다이어그램

패키지, 의존관계

 

 

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

 

유스케이스 (Usecase)

시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현한 다이어그램

유스케이스, 액터, 시스템, 시나리오, 이벤트의 흐름

 

시퀀스 (Sequence)

동적 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현한 다이어그램

객체, 생명선, 실행, 메시지

 

커뮤니케이션 (Communication)

동작에 참여하는 객체들이 주고 받는 메시지를 표현하고 객체간의 연관 까지 표현하는 다이어그램

액터, 객체, 링크, 메시지

 

상태 (State)

클래스의 상태 변화 혹은 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램

상태, 시작상태, 종료상태, 전이, 이벤트, 전이조건

 

활동 (Activity)

객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램

시작점, 전이, 액션, 종료점, 조건노드, 병합노드, 포크노드, 조인노드, 구획면

 

타이밍 (Timing)

시간 제약을 명시적으로 표현하는 다이어그램

 

UML 확장 모델의 스테레오 타입 (Stereotype)

UML의 기본적 요소 이외의 새로운 요소를 만들어 내기 위한 확장 매커니즘이다

스테레오타입은 << >> (길러멧 : Guillemet) 기호를 사용하여 표현한다

 

<<include>> : 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함관계

<<extend>> : 하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행 할 수도 아닐수도 있는 확장관계

<<interface>> : 모든 메서드가 추상 메서드이며 바로 인스턴스를 만들수 없는 클래스

<<entity>> : 오래 지속되는 연관된 행위를 형상화하는, 기억장치에 저장되어야 할 정보를 표현하는 클래스

<<boundary>> : 시스템과 외부 액터와의 상호작용을 담당하는 클래스

<<control>> : 시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스

 

UI 시나리오 문서의 작성요건

완전성 (Complete) : 누락없이 가능한 상세하게 기술

일관성 (Consistent) : 요구사항이 일관성있고 모든 문서의 UI 스타일을 일관적으로 구성

이해성 (UInderstandable) : 처음 접하는 사람도 이해가 쉽도록

가독성 (Readable) : 문서를 쉽게 읽을 수 있어야 한다

추적 용이성 (Traceable) : 쉽게 추적이 가능 쉽게 해야한다

수정 용이성 (Modifiable) : 쉽게 변경이 가능해야하고 여러 문서를 편집하지 않도록

 

 

화면설계도구

파워목업

파워포인트에 목업 기능을 사용할 수 있도록 지원하는 툴

 

발사믹 목업

스케치한 느낌으로 빠르고 심플하게 서비스 컨셉을 전달할 수 있는 목업도구

 

카카오 오븐

카카오에서 제작한 온라인 프로토타이핑 도구

 

 

프로토타이핑 도구

UX핀

웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구

 

액슈어

UI 설계보다는 스토리보드에 포함되는 정책, 플로차트, 디스크립션 까지 모두 작성 가능 도구

 

네이버 프로토나우

네이버에서만든 툴로 스토리보드, 플로차트 등의 기능지원 가능 도구

 

 

UI 디자인 도구

스케치

다양한 목업, 템플릿을 활용한 레이아웃 중심의 UI디자인 설계 지원도구

 

어도비 익스피리언스 디자인 CC

UI 디자인에 최적화된 툴, 포토샵, 일러스트와 연동 지원

 

 

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

인비전

포토샵, 스케치 등 디자이너가 작업한 결과를 사이트에 올리고 UI를 연결하는 도구

 

픽사에이트

구글이 인수한 프로토타이핑 툴로 아마존, 애플, 페이스북, 구글 등이 사용한다

 

프레이머

커피 스크립트라고 하는 개발 언러를 사용하는 코드기반의 프로토타이핑 도구