(정보처리기사 실기) 화면 설계

 

UI 요구사항 확인

UI : 사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 매개체, 사람이 접하는 화면

UI유형 

-CLI(Command Line interface) :텍스트

-GUI(Graphical User Interface)  : 그래픽

-NUI(NaturalUser Interface) : 신체부위, 터치, 음성

-OUI(Organic User Interface) : 모든 사물이 입출력

 

UI 분야

-물리적 제어분야

-디자인적 분야

-기능적 분야

 

UI 설계 원칙

-직관성 : 누구나 쉽게 이해하고 사용

-유효성 : 정확하고 완벽하게 목표 달성 할 수 있도록

-학습성 : 모두가 쉽게 배울 수 있게

-유연성 : 사용자의 인터렉션을 최대한 포용, 실수 방지

 

UI 설계 지침

-사용자 중심

-일관성

-단순성

-결과 예측 가능

-가시성 : 쉬운 조작

-표준화

-접근성 : 다양한 계층(연령, 성별) 수용

-명확성

-오류 발생 해결

 

UI 요구사항 : 시스템을 구축하여 얻고자 하는 최종 목적

UI 요구사항 구분

기능적 요구사항 : 기능 ,서비스

비기능적 요구사항 : 신뢰성, 사용성, 효율성, 유지보수성 

 

UI 표준 : 전체 시스템에 공통으로 적용되는 화면간 이동, 화면 구성 등의 제약

 

UI표준 구성

-전체적인 UX 원칙

-정책 및 철학

-UI 스타일 가이드

-UI패턴 모델 정의

-UI 표준 수립을 위한 조직 구성

 

UI구동 환경 정의

-OS 확인

-웹 브라우저 확인

-모니터 해상도 확인

-프레임세트 확인

 

레이아웃 정의

-화면 구조 정의 : 상단, 왼쪽, 컨텐츠로 설계

-상단 메뉴 구성 정의 : 필수적 적용, 로고, 로그인 사용자, 주메뉴

-좌측 메뉴 구성 정의 : 서브메뉴, 배너

-내용 구성 정의 : 필수적 적용, 메인 이미지

-하단 메뉴 구성 정의 : 회사 CI, 저작권

-사용 환경에 맞춰 페이지 폭 정의  : 브라우저 사이즈에 따라 폭 크기 적용

 

상단 메뉴 구성

- 로고 구역

- 접속자 정보

- 바로 가기 메뉴

- 주 메뉴

 

구성요소 

-그리드

-버튼/컨트롤 타입 : 기능, 검색 등 

-Page 요소: 폰트 규정, 아이콘 요소, 체크박스 등

-팝업 요소 : 윈도, 레이어

-Alert 요소 : 정보 누락, 업무 처리 완료, 수정 등

 

UI 패턴 모델 : CRUD기반 데이터의 입력과 출력을 처리하는 화면 흐름, 표준 프레임 워크와 유스케이스 이용

패턴별 표준 개발 방법 정의

-업무 화면 클라이언트 정의

-서버 컨트롤러 정의

-서버 메시지 및 예외 처리 정의 : 종류 S(system), E(error), I(information)

-클라이언트 - 서버간 데이터 변환 정의

-기업 포털 연계 정의

-보고서 정의

-외부 컴포넌트 연계 정의 

 

UI 지침

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

 

UI표준 적용을 위한 환경 분석

-사용자 트렌트 분석

-기능 및 설계 분석 : 기능조작, 오류 방지, UI전달력, 최소한의 조작으로 처리 가능 여부 확인

 

UI 개발 목표 및 범위 정의

- 경영진의 UI 관련 개발 요구 사항 조사 및 정의

- 자사-타사 사용자 분석(3C) 및 트렌트 분석

- 관계자 간 개발 목표 협의 및 공유 워크숍

 

UI개발을 위한 주요 기법

-3C분석 : 고객(Customer), 자사(company), 경쟁사 비교(competitor)

-SWOT 분석 : 강점, 약점, 기회, 위협 분석

-시나리오 플래닝 : 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오 설계

-사용성 테스트 : 사용자가 직접 제품을 사용하면서 시나리오에 맞춰 진행

-워크숍 : 소집단으로 모여 새로운 지식, 기술, 아이디어를 검토

 

사용자 분석 및 니즈(Needs) 조사 : 최신 트렌드, 경쟁사 동향을 통해 정의된 핵심 기능 관련, 예상 타깃 고객층의 프로파일을 기술하고 정의

- 리서치 대상 선정 및 내용 설계 : 고품질의 결과를 얻기 위해 적절한 대상자를 선정 후 리서치 설계

-리서치 진행 : 사용자의 불편 사항과 니즈를 파악하기 위한 단계

-리서치 결과 정리 : 결과 분석을 토대로 핵심 이슈 도출 

 

사용자 요구사항 도출

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

-콘셉트 모델 정의 : 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램, 다양한 아이디어들을 간편하게 시각화

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

-UI 컨셉션 : 정리된 요구사항을 구체화 하는 단계, 대표 화면 설계

 

테스트, 배포 및 관리

- 테스트 계획 수립 단계를 거쳐 실제 사용성 테스트를 수행

-사용성 테스트 결과를 분석하여 객관적이고 정량화된 값을 도출/개선

-사용자 중심 소프트웨어 매뉴얼 작성

 

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

 

스토리보드

스토리보드 : 프로세스 및 콘텐츠의 구성, 와이어 프레임, 기능에 대한 정의등의 정보가 수록된 문서

 

UI 화면 설계 부분

-와이어 프레임 : 이해 관계자들과 화면 구성 협의, 서비스의 흐름을 공유하기 위해 사용

-스토리 보드 : 정책, 프로세스 ,콘텐츠 구성, 와이어 프레임, 기능 정의 등 서비스 구축을 위한 정보가 담긴 산출물

-프로토 타입 : 동적 효과를 적용하기 위해 실제 구현된 것처럼 시물레이션 하는 모형

 

스토리보드 작성 절차

1. 전체 개요 작성

2.서비스 흐름 작성

3.스타일 확정

4.매뉴별 화면 설계도 작성 및 상세 설명

5.추가 관련 정보 작성

 

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

-일관된 기호의 표시

-공통 영역의 정의

-영역별 세부 설계

-버전 업 관리 

 

프로토 타입 : 성능, 구현 가능성, 운용 가능성을 평가 하거나 요구 사항을 더 잘 이해하기 위해 전체적인 기능을 간략한 형태로 구현한 시제품

프로토 타입의 의의 : 설계 및 개발에 들어가는 총 비용과 노력 절감 가능

장점 

-사용자 설득과 이해가 쉽다

-개발 시간 감소

-오류 사전 발견 가능

 

단점

-수정 과정 증가시 작업 시간 증가 위험

-요구사항에 적절한 타협 필요

-자원 효율성 관점에서는 필요 이상의 자원 소모

 

UI 프로토타입 유형

아날로그 : 종이와 펜을 이용

- 제작 기간이 짧은 경우

-제작 비용이 적은 경우

 

디지털 : 디지털 편집기, HTML등을 활용

-재사용이 필요한 경우

-숙련된 전문가가 있을 경우

 

UI 프로토 타입 계획시 고려 사항

- 프로토타입 목표 확인 : 아키텍처 검증

-프로토타입 환경 확인 : 솔루션, 인프라환경 준비 필요, 툴 마련

-프로토타입 일정 확인 :  아키텍처 확정 이후 실제 분석 작업이 완료 되기 이전에 진행

-프로토타입 범위 확인 : 아키텍처의 핵심이 되는 요소를 프로토타입의 범위로 설정

-프로토타입 인원 확인 : 솔루션 담당자, 인프라 담장자, 개발환경 리더, 공통 모듈 개발자, 프로토타입 개발자

-프로토타입 아키텍처 검증 확인 : 비즈니스 요구사항을 만족 할 수 있는지 검증

-프로토타입 이슈 및 해결

-프로토타입 가이드 확정 : 검증 하려고 한 가이드를 프로토타입 하면서 수정 및 최종 확정

-프로토타입 개발 생산성 확인 : 가장 많은 시간이 소요 되는 구간을 찾기

-프로토타입 결과 시연 

 

UI 프로토 타입 작성시 고려 사항

-프로토타입 계획 작성

-프로토타입 범위 확인 : 범위나 리스크

-프로토타입 목표 확인 :얻고자 하는는 목표

-프로토타입 기간 및 비용 확인

-프로토타입 산출물 확인  : 실제 개발에 참조 될 수준이어야 한다

-프로토타입 유의사항 확인 : 적은 인원, 최소 기간으로 위험요소 식별

 

UI 설계 

UI흐름 설계 : 일력의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현

 

UI설계서 구성요소

-UI 설계서 표지 : 프로젝트 명 또는 시스템 명

-UI 설계서 개정 이력 : 초안 작성, 초기버전 1.0

-UI 요구 사항 정의 : 요구사항 재확인 및 정리

-시스템 구조 : 프로토타입 재확인

-사이트 맵 : 시스템 구조를 사이트 맵 형태로 작성

-프로세스 정의 : 프로세스들을 진행되는 순서에 맞춰 정리

-화면 설계 : 페이지별로 필요한 화면 설계

 

UI 설계 원리

실행차를 줄이기 위한 UI 설계 원리

- 사용 의도 파악

- 행위 순서 규정

- 행위의 순서대로 실행

 

평가차를 줄이기 위한 UI 설계 원리

-수행한 키 조작 결과를 사용자가 빠르게 자각 하도록 유도

-키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록

-사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록

 

UI설계 도구 

UI설계 도구 유형

화면 설계 도구

-파워 목업 : 파워 포인트

-발사믹 목업 : 스케치한 느낌

-카카오 오븐 : 온라인 프로토타이핑 도구

 

프로토타이핑 도구

-UX핀 : 웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업 

-액슈어 : 스토리보드에 포함 되는 정책

-네이버 프로토나우 

 

UI 디자인 도구

- 스케치 : 목업 & 템플릿

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

 

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

-인비전 : 포토샵, 스케치 등으로 작업한 결과를 업로드하고 UI를 연결해 간단한 인터랙션을 한다.

-픽사에이트 : 모바일 앱 프로토타이핑 최적화

-프레이머 : 커피 스크립드 코드 기반의 프로토타이핑 도구