(정보처리기사 실기) 화면 설계
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를 연결해 간단한 인터랙션을 한다.
-픽사에이트 : 모바일 앱 프로토타이핑 최적화
-프레이머 : 커피 스크립드 코드 기반의 프로토타이핑 도구