1. 사용자 인터페이스
사용자 인터페이스 (UI, User Interface)
•
사용자와 시스템 간의 상호작용이 원활하게 이루어지도록 도와주는 장치나 소프트웨어
•
사용자 인터페이스의 3가지 분야
◦
정보 제공과 전달을 위한 물리적 제어에 관한 분야
◦
컨텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
◦
모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야
사용자 인터페이스의 구분
•
CLI (Command Line Interface)
◦
명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
•
GUI (Graphical User Interface)
◦
아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
•
NUI (Natural User Interface)
◦
사용자의 말이나 행동으로 기기를 조작하는 인터페이스
사용자 인터페이스의 기본 원칙
2. UI 표준 및 지침
UI 표준 및 지침
•
UI 표준
◦
전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로, 화면 구성이나 화면 이동 등이 포함된다.
•
UI 지침
◦
UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통의 조건을 의미한다.
UI 스타일 가이드
•
개발자나 디자이너들이 UI를 작성할 때 기준이 되는 규칙들
•
구동 환경, 레이아웃, 네비게이션 등을 정의한다.
UI 스타일 가이드 작성 순서
3. UI 설계 도구
와이어프레임 (Wireframe)
•
페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 도구
•
와이어프레임은 기획 단계의 초기에 제작한다.
•
개발자나 디자니너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 사용한다.
•
페이지의 영역 구분, 컨텐츠, 텍스트 배치 등을 화면 단위로 설계한다.
•
와이어프레임 툴: 손그림, 파워포인트 등
목업 (Mockup)
•
와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
•
디자인, 사용 방법 설명, 평가 등을 위해 만든다.
•
시각적으로만 구성 요소를 배치하는 것으로 실제로 구현되지는 않는다.
스토리보드 (StoryBoard)
•
와이어프레임에 컨텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
•
디자이너와 개발자가 최종적으로 참고하는 작업 지침서
•
서비스 구축을 위한 모든 정보가 들어있다.
프로토타입 (Prototype)
•
와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
◦
인터랙션 (Interaction)
▪
사용자와 시스템을 연결하는 것이 UI라면, 인터랙션은 UI를 통해 시스템을 사용하는 일련의 상호작용을 의미한다.
▪
쉽게 말해, 마우스로 화면의 어떤 아이콘을 클릭하면, 화면이 그에 맞게 반응하는 것을 말한다.
•
사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것이다.
•
일부 핵심적인 기능만을 제공한다.
•
종류
◦
페이퍼 프로토타입
▪
스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 아날로그적인 방법
▪
제작기간이 짧은 경우, 제작 비용이 적을 경우, 업무 협의가 빠를 경우 사용함
◦
디지털 프로토타입
▪
프로그램을 사용하여 작성하는 방법
▪
재사용이 필요한 경우, 산출물과 비슷한 효과가 필요한 경우, 숙련된 전문가가 있을 경우 사용함.
유스케이스 (Use Case)
•
사용자의 요구사항을 기능 단위로 표현하는 것
•
사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다.
•
사용자의 요구사항을 빠르게 파악함으로써 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고, 그 결과를 문서화할 수 있다.
•
일반적으로 다이어그램 형식으로 묘사된다.
4. UI 요구사항 확인
UI 요구사항 확인
•
새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계
•
다양한 경로를 통해 사용자의 요구사항을 조사하고 분석한 후 작성해야한다.
•
UI 요구사항 확인 순서
UI 요구사항 작성 순서
요구사항 요소
5. 품질 요구사항
•
소프트웨어 품질은 소프트웨어에 대한 요구사항이 사용자의 입장에서 얼마나 충족하는가를 나타내는 소프트웨어의 특성의 총체이다.
•
소프트웨어의 품질은 사용자의 요구사항을 충족시킴으로써 확립된다.
•
소프트웨어 품질 관련 표준
ISO/IEC 9126의 소프트웨어 품질 특성
6. UI 설계
UI 설계서
•
사용자의 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서
•
기획자, 개발자, 디나이너 등과의 원활한 의사소통을 위해 작성
•
UI 설계서 작성 순서
UI 흐름 설계
•
업무의 진행 과정이나 수행 절차에 따른 흐름을 파악하여 화면과 폼을 설계하는 단계
•
UI 흐름 설계 순서
UI 상세 설계
•
UI 상세 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계
•
UI 상세 설계를 할 때는 반드시 시나리오를 작성해야 한다.
•
UI 상세 설계 순서
UI 시나리오 문서
•
사용자의 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 다양한 상황에서의 예외 처리 등을 정리한 문서
•
사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사되어 있다.
•
UI 시나리오 문서의 조건
7. HCI / UX / 감성 공학
HCI (Human Computer Interaction or Interface)
•
사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문
•
최종 목표는 시스템을 사용하는데 있어 최적의 사용자 경험(UX)를 만드는 것이다.
•
HCI는 어떤 제품이 좋은 제품인지, 어떻게 하면 좋은 제품을 만들 수 있는지 등을 연구한다.
UX (User Experience)
•
사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험
•
UI가 사용성, 접근성, 편의성을 중시한다면, UX는 이러한 UI를 통해 사용자가 느끼는 만족이나 감정을 중시한다.
•
UX는 기술을 효용성 측면에서만 보는 것이 아니라, 사용자의 삶의 질을 향상시키는 하나의 방향으로 보는 새로운 개념이다.
•
UX의 특징
감성 공학
•
제품이나 작업 환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술
•
인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합 과학이다.
•
감성 공학의 목적은 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것이다.
•
감성 공학은 인간의 감성을 구체적으로 제품 설계에 적용하기 위해 공학적인 접근 방법을 사용한다.