2020 정보처리기사 - 화면 설계

ㆍUI

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

 

ㆍUI 유형

유형	특징	설명
CLI	정적인 텍스트 기반	명령어를 텍스트로 입력하여 조작.
GUI	그래픽 반응 기반	그래픽 환경을 기반으로 한 마우스 등을 이용하여 조작
NUI	직관적 사용자 반응 기반	신체 부위를 이용하여 조작 [터치, 음성 포함]
OUI	유기적 상호작용 기반	현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있다.

 

ㆍUI 분야

물리적 제어 분야 : 정보 제공과 기능 전달을 위한 하드웨어 기반

디자인적 분야 : 콘텐츠의 정확하고 상세한 표현과 전체적 구성

기능적 분야 : 사용자의 편의성에 맞춰 쉽고 간단하게 사용 가능.

 

ㆍUI 설계 원칙

직관성 : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야함.

유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작

학습성 : 초보와 숙련자 모두 쉽게 배우고 사용할 수 있게 제작

유연성 : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작

 

ㆍUI 요구사항

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

 

ㆍ요구사항 구분

기능적 요구사항, 비기능적 요구사항.

 

ㆍUI 표준

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

 

ㆍUI 표준 구성

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

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

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

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

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

 

ㆍUI 구동 환경

컴퓨터 OS 확인 : 기업이 운영하는 업무와 운영체제 확인

웹 브라우저 확인 : 익스플로러, 크롬, 파이어폭스 등 기업환경에 가장 적합한 것으로 확정

모니터 해상도 확인 : 1280X1024 기본 설정. 스크롤이 생기지 않도록 설정

프레임세트 확인 : 속도 및 업무 편의성을 고려하여 각 영역별 프레임을 구분해 적용.

 

ㆍ레이아웃 정의

화면 구조 정의 : 기본 배치는 상단, 왼쪽, 콘텐츠 부분으로 설계.

상단 메뉴 구성 : 필수적용사항, 로고, 로그인 사용자, 바로가기 메뉴, 주 메뉴 존재.

좌측 메뉴 구성 : 선택적용사항, 서브 메뉴, 배너 존재

콘텐츠 구성 : 필수적용사항, 메인 이미지, 시스템별 구성 콘텐츠 존재.

 

ㆍ구성요소 정의

그리드 : UI를 구성하는 방법 중 테이블 형태로 구성

버튼/컨트롤 타입 : 기능 버튼, 검색 버튼 등 다양한 형태로 구분해 제작

PAGE 요소 : 폰트 규정, 아이콘 요소, 정보입력 등으로 구성

ALERT 요소 : 정보누락/오류 시 ALERT, 업무처리완료 ALERT 등

 

ㆍUI 지침

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

목표 정의 - 프로젝트 계획 - 요구사항 정의 - 설계 및 구현 - 테스트 - 배포 및 관리

 

ㆍUI 개발을 위한 주요 기법

ㆍ3C 분석 : 고객(Customer), 경쟁 자사(Company), 경쟁사(Competitor)를 비교, 분석하여 어떻게 차별화를 두어 경쟁에서 이길 것인가 분석.

ㆍSWOT 분석 : 기업의 내외부 환경을 분석하여 강점(Strength), 약점(Weakness), 기회(Opportunity), 위협(Threat)요인을 규정하고 이를 토대로 경영 전략을 수립

ㆍ시나리오 플래닝 : 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 전략

ㆍ사용성 테스트 : 사용자가 직접 테스트해보면서 미리 작성된 시나리오에 맞춰 수행한 후 질문에 답하도록 하는 테스트.

ㆍ워크숍 : 소집단 인원으로 특정 문제나 새로운 지식,아이디어 등을 교환하고 검토하는 연구회 및 세미나

 

ㆍ사용자 요구사항 도출

페르소나 정의 : 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자

콘셉트 모델 정의 : 여러가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램

사용자 요구사항 정의 : 리서치 및 페르소나 결과물을 토대로 요구사항을 도출하고 우선순위를 정함

UI 컨셉션 : 요구사항을 구체화하는 단계.

 

ㆍ와이어 프레임

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

 

ㆍ스토리보드

콘텐츠 구성, 와이어 프레임 등 서비스 구축을 위한 모든 정보가 담겨있는 설계 산출물.

 

ㆍ스토리보드 작성 절차

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

 

ㆍ스토리보드 작성 시 유의사항

일관된 기호 표시, 공통 영역의 정의, 영역별 세부 설계, 버전 업 관리

 

ㆍ프로토 타입

실제 와이어프레임, 스토리보드에 동적효과를 적용하여 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형.

 

ㆍUI 설계서 구성요소

UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의, 시스템 구조, 사이트 맵, 프로세스 정의, 화면 설계

 

ㆍUI 설계 도구

사용자와 시스템 사이에 의사소통할 수 있도록 UI 설계를 지원하는 도구

 

ㆍ화면 설계 도구

파워 목업 : 파워포인트에 추가 메뉴를 설치해 목업기능을 사용할 수 있도록 지원하는 툴.

발사믹 목업 : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구.

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

 

ㆍ프로토타이핑 도구

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

액슈어 : UI 설계보다는 스토리보드에 포함되는 정책, 플로차트 등 모두 작성 가능한 도구

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

 

ㆍUI 디자인 도구

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

어도비 익스피리언스 디자인 CC : UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구