[정보처리기사] 화면설계

사용자 인터페이스

 

사용자의 만족도에 가장 큰 영향을 미치는 요소

소프트웨어 영역 중 가장 많은 변경이 발생

 

구분

 

CLI(Command Line Interface) : 텍스트 형태의 명령

GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하는 그래픽 환경

NUI(Natural User Interface) : 사용자의 말과 행동이 기기를 조작

 

사용자 인터페이스의 기본원칙

 

직관성, 유효성(목적부합), 학습성, 유연성(요구사항 수용)

 

사용자 인터페이스 설계시 고려 사항

 

사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

 

 

UI 설계 도구

 

와이어 프레임(Wireframe) : 화면 단위로 개략적인 레이아웃이나 UI 요소 뼈대 설계

 

유스케이스 (UseCase) : 사용자가 원하는 목표 달성을 위한 내용기술(사용자 측 요구사항)

 

스토리 보드(Story Board) : 화면 단위의 와이어 프레임에 페이지간 이동 흐름과 컨텐츠 설 명을 추가, 좌측 UI화면 우측은 디스크립션(description)

 

목업(Mockup) : 와이어프레임보다 좀 더 리얼하게 시각적 구성요소를 배치하는 정적 모형

 

프로토타입(Prototype) : UI를 통한 상호작용(인터랙션)을 적용하여 실제 구현 테스트가 가능 한 동적 형태의 모형

 

UI 표준 및 지침

 

UI 표준 : 모든 UI에 공통 적용되는 내용(화면구성, 화면이동)

UI 지침 : UI 요구사항, 구현 시 제약사항, UI개발 과정 중 지켜야 할 공통조건

 

 

웹의 3요소

 

웹표준(Web Standards) : 다른 기종과 플랫폼에서도 적용가능하도록 구현

웹접근성 : 누구나 어떤 환경에서도 웹사이트 정보에 접근가능

웹호환성 : 다른 환경(하드웨어, 소프트웨어)에서도 동등ㅇ한 서비스 제공

 

 

UI 스타일 가이드( UI 작성 시 기준이 되는 규칙 )

 

1) 구동환경 정의 : OS, 웹 브라우저, 모니터 해상도, 프레임 세트 정하기

(*프레임 세트 : 업무처리의 편의성을 고려하여 화면을 TOP, Left, Contents로 구분)

 

2) 레이아웃 정의 : 화면 구조를 정의, 각 영역의 메뉴를 구성

 

Top Area(필수 영역) : 시스템 로고, 주메뉴, 로그인 사용자

Left Area(선택 영역) : 서브 메뉴, 배너

Contents Area(필수 영역) : 메인 이미지, 컨텐츠

Footer Area(선택영역) : 회사 CI, Copyrights

 

3) 네비게이션 정의 : 사용자가 원하는 정보를 빠르게 찾기 위해 메뉴 타입을 선택 구현

 

4) 기능 정의 : 시스템을 사용하는 과정에서 일어날 모든 활동과 필요한 데이터 간의 관계를 논리적인 모델로 상세화

 

프로세스 모델링 정의 : 모든 활동을 업무 기능 모델링으로 정의

데이터 모델 정의 : 엔티티(Entity) 간의 관계를 논리적 데이터 모델로 정의

 

5) 구성요소 정의 : 화면에 표시할 그리드나 버튼을 정의

 

 

UI 요구사항 확인

 

UI 관련 요구사항을 조사

 

1) 목표정의

 

비즈니스 요구사항 정의 (목표)

사용자 인터뷰 진행 ( 개별적, 많고 다양한 의견, 한 시간 이하로)

인터뷰는 사용자 리서치를 하기 전 시작한다.

 

2) 활동사항 정의

 

요구사항을 토대로 해야 할 활동 사항

사용자와 회사의 비전 일치

예산과 일정 결정

...

 

3) UI 요구사항 작성

 

실사용자 중심으로 수렴된 정보를 검토 분석(전체적 구조 파악 및 검토)

 

3-1) 요구사항 요소 확인

데이터 요구 : 이메일 속성은 제목, 발신일, 참조인, 답변으로 구성된ㄷ.

기능 요구 : 이메일은 읽거나 삭제하고 보관된다.

제품 서비스의 품질 : 시스템이 파일을 얼마나 빠르게 처리할 수 있는지 여부

제약사항 : 개발에 필요한 비용 및 규제

 

3-2) 정황 시나리오 작성

사용자의 요구사항을 도출하기 위한 방법, 사용자가 목표 달성하기 위해 수행되는 과정을 순차적으로 묘사(육하원칙에 따라 간결하고 명확하게 작성)

 

3-3) 요구사항 작성

요구사항은 정황시나리오를 토대로 작성한다.

 

UI 프로토타입

 

요구사항을 기반으로 한 동적 형태의 모형

개발자가 맞게 해석했는지 검증을 위한 테스트 모형

핵심적인 기능을 제공, 프로토 타입 지속적으로 개선 보완

실제 사용자를 대상으로 테스트하는 것이 좋음

 

종류

 

- 페이퍼 프로토 타입(Paper Prototype)

 

스케치, 글, 그림 아날로그 방법

 

장점

비용이 저렴

즉석 생성 가능

즉시 변경 가능

고객이 과도히 기대를 안 한다

 

단점

테스트하기 부적당

상호관계가 많으면 부적당

공유하기에 부적당

 

- 디지털 프로토타입(Digital Prototype)

 

프로그램을 사용하여 작성

 

장점

최종 제품과 비슷하게 테스트

수정하기 쉽다

재사용이 가능

 

단점

프로그램 사용법을 익혀야 한다.

UI 프로토 타입 제작 단계

 

1단계 : 요구사항 분석 (사용자 관점 요구사항 확정까지 수행)

2단계 : 핵심기능 중심으로 프로토 타입 작성

3단계 : 사용자가 프로토타입 검증, 다양한 추가 및 수정의견 제안

4단계 : 수정과 합의, 보완작업, 작업 완료 후 3단계로 복귀

사용자(최종 결정권자)가 승인 완료할 때까지 반복

 

 

UI 흐름설계

 

절차에 따른 대략적 흐름을 파악하여 화면과 폼 설계

 

1) 기능 작성

 

화면에 표현할 기능 작성

 

기능적 요구사항 :입력값, 출력값, 저장값, 연산에 관한 요구사항 분석

비기능적 요구사항 : 품질 및 시스템 환경에 관한 요구사항 분석

 

2) 입력 요소확인

 

화면에 입력할 요소확인

 

기능 : 사용자가 자신의 계정인 아이디와 패스워드를 입력할 수 있어야 한다.

입력요소 : 사용자 계정 아이디, 패스워드 입력

화면 : 로그인 화면

화면 간 흐름 : 로그인 성공시 도서 검색화면, 실패시 다시 로그인 화면

 

3) 유스케이스 설계

 

UI 요구사항을 기반으로 UI 유스케이스 설계

 

4) 기능 및 양식 확인 (폼 설계)

 

텍스트 박스 : 입력이 가능

콤보박스 : 목록에서 항목 선택

라디오 박스 : 여러 값 중 하나만 선택

체크 박스 : 여러 값 중 하나 이상 선택

 

UI 상세 설계

 

실제 설계 및 구현을 위해 모든 화면에 대해 자세히 설계

 

1) 요구사항 확인

 

요구사항을 최종적으로 확인하는 단계( 요구사항 정의서 )

 

2) UI 설계서 표지 및 개정 이력 작성

 

다른 문서와 혼동되지 않도록 프로젝트명이나 시스템명을 포함

수정(개정) 될 때 마다 어떤 부분이 수정되었는지 정리해놓은 문서

 

초안 작성 (Version 1.0)

변경사항이 있을 때마다 0.1씩 증가

 

3) UI 구조 설계

 

UI 요구사항 + UI 프로토타입으로 UI 구조 설계

 

4) 메뉴 구조 설계

 

사이트 맵 구조를 통해 사용자 기반 메뉴 구조를 설계

사이트맴구조 설계 -> 사이트맵의 상세내용 표로 정리 -> 프로세스 정의서 작성

 

5) 화면 설계

 

필요한 화면 설계

 

 

용어 

 

HCI ( Human Computer Interation or Interface )

 

사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문

최종 목표는 시스템을 사용하는데 있어 최적의 사용자 경험(UX)을 만드는 것이다. 

 

UX ( User Experience )

 

사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게되는 총체적인 경험

UX는 기술을 효용성 측면 뿐만아니라 사용자의 삶의 질 향상시키는 방향으로 보는 개념

 

주관성(Subjectivity) 사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적임

정황성(Contextuality) : 경험이 일어나는 상황 또는 주변 환경에 영향을 받음

총체성(Holistic) : 개인이 느끼는 총체적인 심리적, 감성적인 결과임

 

감성공학

 

제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제자하는 기술

인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것

 

 

---

 

 

참고자료

2021 시나공 정보처리기사 실기