2. 화면설계 [사용자 인터페이스]

사용자 인터페이스 (User Interface)

사용자 인터페이스 개요

• 사용자와 시스템 간의 상호작용을 원활하게 도와주는 장치나 소프트웨어
• 사용자 인터페이스의 3가지 분야

    - 정보 제공, 전달을 위한 물리적 제어 분야

    - 컨텐츠의 상세한 표현과 전체적인 구성 분야

    - 모든 사용자가 편리하고 간편하게 사용하게 하는 기능 분야

 

사용자 인터페이스 구분

• CLI (Command Line Interface) : 명령과 출력이 텍스트 형태로 이루어지는 인터페이스
• GUI (Graphic User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 인터페이스
• NUI (Natural User Interface) :  말이나 행동으로 조작하는 인터페이스

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

직관성	- 사용자가 큰 노력 없이도 시스템을 쉽게 이해하고, 쉽게 사용할 수 있게 제작해야함  - 쉬운 검색, 쉬운 사용성, 일관성
유효성	- 사용자의 요구사항이 정확하고 완벽하게 시스템에 반영될 수 있도록 제작해야함
학습성	- 초보자/숙련자 모두 쉽게 배우고 사용할 수 있게 제작해야함  - 쉬운 학습, 쉬운 접근, 쉽게 기억
유연성	- 사용자의 인터랙션을 최대한 포용하며, 사용자의 실수를 방지할 수 있도록 제작해야함  - 오류예방, 실수포용, 오류감지

 

사용자 인터페이스 설계지침

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

UI 표준 및 지침

UI표준 및 지침 개요

    -  UI 표준과 지침을 토대로 기술의 중립성(표준), 보편적 표현 보장성(접근성), 기능의 호환성이 고려되었는지 확인

 

한국형 웹컨텐츠 접근성 지침(KWCAG)

• 장애인 및 비장애인이 동등하게 접근할 수 있는 웹컨텐츠 제작방법 제시
• 웹컨텐츠 접근성 지침 준수를 위한 고려사항

지침	고려사항
인식의 용이성	대체 텍스트를 제공해야함
	멀티미디어 대세 수단을 제공해야함
	컨텐츠를 명료하게 전달해야함
운용의 용이성	키보드만으로도 접근할 수 있어야함
	충분한 시간을 제공해야함
	광과민성 발작 예방
	컨텐츠를 쉽고 편리하게 내비게이션할 수 있어야함
이해의 용이성	읽고 이해하기 쉬워야함
	기능과 실행결과는 예측가능해야함
	선형구조로 작성되고 논리적인 순서를 제공해야함
	입력오류를 방지하거나 정정할 수 있어야함
견고성	마크업 언어의 문법 준수
	접근성이 있어야함

전자정보 웹표준 준수 지침

: 정부기관의 홈페이지 구축시 반영해야 할 최소한의 규약

: 전자정부 웹표준 준수 지침사항(세부)

• 내용의 문법 준수
• 내용과 표현의 분리
• 동작의 기술중립성 보장
• 플러그인의 호환성
• 컨텐츠의 보편적 표현
• 운영체제에 독립적인 컨텐츠 제공
• 부가 기능의 호환성 확보
• 다양한 프로그램 제공

UI설계도구

UI설계도구

: 사용자의 요구사항에 맞게 UI 설계시 사용하는 도구

 

와이어프레임

: 기획 초기단계에서 제작. 페이지에 대한 대략적인 레이아웃 or UI요소 등에 대한 뼈대를 설계

    - 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

목업

: 와이어프레임보다 실제 화면과 유사하게 만드는 정적인 형태의 모형

    - 목업 툴 : 파워 목업, 발사믹 목업 등

 

스토리보드

: 와이어프레임에 컨텐츠에 대한 설명이나 페이지 간 이동 흐름 등을 추가한 문서

    - 디자이너, 개발자가 최종적으로 참고하는 작업지침서

    - 서비스구축을 위한 모든 정보가 담겨있어야함

    - 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

 

프로토타입

: 와이어프레임이나 스토리보드 등에서 인터랙션을 적용해 실제 구현한 것처럼 테스트가 가능한 동적인 형태의 모형

    - 작성방법에 따라 페이퍼/디지털 프로토타입으로 나뉨

    - 프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

유스케이스

: 사용자 측면에서의 요구사항.

    - 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

출처 : https://www.kdata.or.kr/info/info_04_view.html?field=&keyword=&type=techreport&page=297&dbnum=126864&mode=detail&type=techreport

UI요구사항 확인

UI요구사항 확인(개요)

: 새로 개발할 시스템에 적용할 UI관련 요구사항을 조사 및 작성하는 단계

목표 정의	- 사용자들을 대상으로 인터뷰하고, 사용자들의 의견이 수렴된 비즈니스 요구사항 정의 - 인터뷰 진행시 유의사항    > 사업적, 기술적 요구사항을 명확하게 이해    > 가능한 개별적으로 진행    > 1시간을 넘기지 않는 것이 좋음    > 사용자 리서치 시작 전 해야함
활동사항 정의	- 조사한 요구사항을 토대로 앞으로 해야할 활동 정의 - 기술 발전 가능성을 파악 - UI디자인 방향 제시
UI 요구사항 작성	- 여러 경로로 수집된 사용자 요구사항을 검토/분석하여 UI 개발 목적에 맞게 작성 - 실사용자 중심으로 작성 - 여러 사람들의 인터뷰를 통해 다양한 의견 수렴 및 작성
요구사항 요소 확인	- 파악된 요구사항 요소의 종류와 각각의 표현 방식 등 검토 - 요구사항 요소 : 데이터 요구사항, 기능 요구사항, 제품/서비스 품질 요구사항, 제약사항
정황 시나리오 작성	- 사용자의 요구사항을 도출하기 위해 작성함 - 사용자가 목표(요구사항)을 달성하기 위해 수행하는 방법을 순차적으로 묘사 - 개발하는 서비스의 모습을 상상하는 1단계. - 사용자 관점에서 시나리오 작성해야함
요구사항 작성	정활 시나리오를 토대로 작성