2020년 정보처리기사 실기 정리 #6

UI

넓은 의미에서 사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 물리적, 가상의 매개체
좁은 의미에서 정보 기기나 SW의 화면 등에서 사람이 접하게 되는 화면

 

UI의 유형 (CGNO)

CLI
텍스트 기반 인터페이스
명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스

 

GUI
그래픽 반응 인터페이스
그래픽 환경을 기반으로 마우스나 펜을 이용하는 사용자 인터페이스

 

NUI
직관적 사용자 반응 기반 인터페이스
키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스

 

OUI
유기적 상호작용 인터페이스
현실에 존재하는 모든 사물이 입출력장리초 변화할 수 있는 사용자 인터페이스

 

UI 설계 원칙 (직유학연)

직관성
누구나 쉽게 이해하고 사용할 수 있어야 함
쉬운 검색, 사용성, 일관성

 

유효성
정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작
쉬운 오류 처리 및 복구

 

학습성
초보와 숙련자 모두 쉽게 배우고 사용할 수 있게 제작
쉽게 학습 및 기억, 쉬운 접근,

 

유연성
사용자 인터랙션을 포용하고 실수를 방지할 수 있도록 제작
오류 예방 및 감지, 실수 포용

 

UI 설계 지침 (사일단결 가표접명오)

사용자 중심
사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공해 실 사용자에 대한 이해가 바탕이 되어야 함

 

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

 

단순성
조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화

 

결과 예측 가능
작동시킬 기능만 보고도 결과 예측이 가능해야 함

 

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

 

표준화
디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용 가능해야 함

 

접근성
사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함

 

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

 

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

 

UI 요구사항

사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준

 

UI 요구사항의 구분

기능적 요구사항 : 시스템의 입출력, 데이터, 연산 및 시스템이 제공하는 기능, 서비스에 대한 요구사항
비기능적 요구사항 : 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항

 

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

 

UI 표준 구성 (액정스페조)

전체적인 UX 원칙
사용자의 관점에서 업무를 효율적으로 수행할 수 있는 UX 원칙 정의

 

정책 및 철학
조직의 목표나 정체성을 포함하는 정책 및 철학 설정

 

UI 스타일 가이드
UI에 대한 구동 환경 및 레이아웃 등을 정의

 

UI 패턴 모델 정의
CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의

 

UI 표준 수립을 위한 조직 구성
UI 팀 및 표준 개발팀을 주축으로 추진 조직 구성

 

UI 스타일 가이드 구성 (유레메공 기구)

UI 구동 환경 정의 > 레이아웃 정의 > 메뉴 네비게이션 정의 > 공통 표준화면 정의 > 기능 정의 > 구성요소 정의

 

UI 지침

UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항을 규정하는 가이드 라인

 

UI 개발을 위한 주요 기법

3C 분석
고객, 자사, 경쟁사를 비교, 분석해 어ᄄᅠᇂ게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법

 

SWOT 분석
기업 내부 환경과 외부 환경을 분석해 강점, 약점, 기회, 위협 요인을 규정하고 이를 토대로 경영 전력을 수립하는 방법

 

시나리오 플래닝
불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의한 방법

 

사용성 테스트
사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞춰 과제를 수항한 후 질문에 답하도록 하는 테스트

 

워크숍
소집단 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나

 

사용자 요구사항 도출 (페콘사유)

활동	설명	세부 수행 활동
페르소나 정의	잠재적 사용자의 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상 사용자	페르소나 분류, 정의, 작성, 활용
콘셉 모델 정의	여러 추상적인 콘셉들 사이 관계를 보여주는 다이어그램 다양한 아이디어들을 간편하게 시각화하여 표현할 수 있는 유용한 방법으로 아이디어를 잘 전달하고 생각의 과정을 효율적으로 이끌어줌	콘셉 모델 정의 브레인 스토밍 활용
사용자 요구사항 정의	리서치 및 페르소나 결과물을 토대로 요구사항을 도출하고 우선순위를 정함	요구사항 매트릭스 작성 정황 시나리오 제작 정황 시나리오로부터 요구사항 도출
UI 컨셉션	정리된 요구사항을 구체화하는 단계로 화면 디자인 단계 전 대표 화면 설계를 진행하는 단계	대표 화면 와이어 프레임 스케치 정보 구조 설계 페이퍼 프로토타입을 통한 스토리 보드 설계

 

UI 화면 설계 구분 (와스프)

구분 : 와이어 프레임
설명 : 이해관계자들과의 화면 구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업
도구 : 파워포인트, 키노트, 스케치, 일러스트

 

구분 : 스토리보드
설명 : 서비스 구축을위한 모든 정보가 담겨 있는 설계 산출물
도구 : 파워포인트, 키노트, 스케치

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

 

UI 화면 설계 구분 (개서스메추)

전체 개요 작성 > 서비스 흐름 작성 > 스타일 확정 > 메뉴별 화면 설계도 작성 및 상세설명 > 추가 관련 정보 작성

 

UI 프토타입 제작 및 검토 프로세스 (아유프적)

SW 아키텍처 설계 원리 확인 > 프로토타입 유스케이스 작성 > UI 요구사항을 반영한 프로토타입 제작 > UI 적정성 검토

 

UI 흐름 설계

업무의 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동

 

UI 설계 원리

구분 : 실행 차를 줄이기 위한 UI 설계 원리
설계 원리 : 사용 의도 파악
설명 : 사용자의 목적을 명확히 파악해 불필요한 기능 때문에 성능이 떨어지지 않도록 해야 함

 

설계 원리 : 행위 순서 규정
설명 : 사용자 행위의 순서를 세분화 시킨 뒤 순서대로 명확하게 제시

 

설계 원리 : 행위의 순서대로 실행
설명 : 과도한 상호작용으로 작업이 원활히 진행되지 못하는 상황이 발생되지 않도록 고려

 

구분 : 평가 차를 줄이기 위한 UI 설계 원리
설계 원리 : 수행한 키 조작 결과를 사용자가 빠르게 자각하도록 유도
설명 : 가능한 빠른 처리를 통해 즉각적으로 반응되도록 해야 함

설계 원리 : 키 조작으로 변화된 시스템 상태를 사용자가 쉽게 인지하도록 유도
설명 : 사용자가 수행한 행위로 인해 변화된 시스템의 상태를 사용자가 직관적으로 인지할 수 있도록 시스템 설계

 

설계 원리 : 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
설명 : 미리보기 기능처럼 예상 결과를 사전에 제시할 수 있다면 제공해야 함

 

UI 흐름 설계 수행 절차 (적기요유기)

UI 설계안의 적정성 확인 > 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토 > 화면 입력 요소 및 유스케이스를 통한 UI 요구사항 확인 > 유스케이스 설계* > 기능 및 양식 확인

 

유스케이스 설계

UI 요구사항을 바탕으로 액터별 시나리오 구상
각각의 액터가 어떤 행위를 하는지 작성 함
액터 시스템의 외부에 있고 시스템과 상호작용을 하는 사람 또는 시스템

 

UI 요구사항을 바탕으로 액터 세분화
액터의 상호작용을 생각하고 비슷한 행위를 하는 액터를 그룹으로 지정하여 부모 액터 정의

 

UI 유스케이스 설계
각 입력 요소들의 형태와 입력 방법 구상, 각 요소들 설계
각 화면 요소들의 배치 구상

 

UI 상세설계 프로세스 (확구사 설폼)

UI 요구사항 최종 확인 > UI 구조 설계 > 사용자 기반 메뉴 구조 설계 > 화면 설계 > 하위 시스템 단위의 내·외부 상세 화면과 폼 설계

 

UI 검토 및 보안

UI 검토 수행
UI 스토리보드 활용을 통해 페이퍼 프로토타입의 평가는 짧은 단위로 개발 및 평가를 반복하여 확인

 

UI 검토 보완
UI 검토 수행을 통한 사용자 평가 결과를 토대로 설계를 보안

 

사용성 검토 및 검증 수행
고수준의 프로토타입을 활용하여 내부 개발자 및 전문가들의 UI 사용성 평가를 통해 개선 사항을 지속적으로 반영

 

UI 설계 도구

사용자와 시스템 사이에 의사소통 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구

 

화면 설계 도구

파워 목업, 발사믹 목업, 카카오 오븐

 

프로토타이핑 도구

UX핀, 액슈어, 네이버 프로토나우

 

UI 디자인 도구

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

 

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

인비전, 픽사에이트, 프레이머