04. 화면 설계
UI 요구사항 확인
UI | User Interface
개념
컴퓨터, 웹 사이트, 시스템 등의 정보기기와 사용자가 서로 상호작용을 할 수 있도록 연결해주는 매개체
디스플레이 화면, 아이콘, 검색창, 키보드, 문자, 색상, 폰트 등의 여러 요소들이 포함
UI의 핵심은 특별한 설명 없이 사용자 누구나 알아보기 쉽고 편리하게 이용할 수 있도록 만든 보편적이고 직관적인 디자인이어야 함
UX 개념
사용자가 컴퓨터, 웹사이트, 시스템 등 정보기기의 UI를 직/간접적으로 이용하여 경험한 모든 것
모바일 화면에 대한 사용자의 경험, 포장박스를 개봉할 때의 느낌, 디바이스 인터페이스를 사용하며 느끼는 만족감이나 불편함 등 사용할 떄의 모든 행동, 느낌, 감정 등이 UX에 포함
사용자들의 경험을 분석하여 사용자의 불만족을 최소화하고, 보다 편리하게 이용할 수 있도록 디자인
UX는 UI를 기반으로 사용자들의 공감과 만족을 이끌어내는 역할을 함
유형
CLI | Command Line Interface- 사용자가 컴퓨터 자판을 이용해 명령(text)을 입력하여 컴퓨터를 조작하는 시스템
GUI | Graphical User Interface- 그래픽과 텍스트로 이루어져 있어 사용자의 입력이나 출력이 마우스 등을 통해 이루어짐
AUI | Auditory User Interface- 보다 나은 사용자 경험을 제공하기 위해 만들어진 임베디드 사운드
VUI | Voice User Interface- 사람의 음성으로 기기를 조작하는 인터페이스
OUI | Organic User Interface- 모든 사물과 사용자간의 상호작용을 위한 인터페이스
NUI | Natural User Interface- 특별한 하드웨어 없이 인간의 자연스러운 움직임(멀티터치, 동작인식 등)을 인식하여 정보를 제공
설계 원칙
직관성 : 누구나 쉽게 이해하고 사용 가능
유효성 : 사용자의 목적을 정확하게 달성
학습성 : 누구나 쉽게 배우고 익히기 가능
유연성 : 사용자의 요구사항을 최대한 수용하며 오류를 최소화
UI 표준
개념
- 시스템 구축 시 전체 시스템에 포함될 모든 UI에 공통적으로 적용할 내용으로, 화면 구성이나, 화면 이동, 콘텐츠의 배치 등
설계 절차
UI 개발목표 및 범위 수립
UI 전략 수립
사용자 요구사항 분석
UI 상세 설계
구현
테스트
관련 용어
웹 표준- 월드 와이드 웹(WWW)의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격
웹 호환성- 이용자의 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공할 수 있는 것
웹 접근성- 장애인과 비장애인 모두가 동등하게 웹 사이트에 접근하여 이용할 수 있도록 보장하는 방식
반응형 웹- PC, Mobile 등 다양한 디바이스에서 화면 크기에 맞추어 하나의 사이트를 보여줌
Infographic- 정보와 그래픽의 합성어로 복잡한 정보를 쉽고 빠르게 전달하기 위해 정보를 분석&정리하여 차트, 그래프, 아이콘, 그래픽스, 이미지 등을 활용하여 시각화 한 것
Brand Identity- 사용자에게 전달하고자 하는 특정 브랜드의 가치와 의미를 반영한 심적 표상
Navigation- 하이퍼링크를 따라 웹 공간의 정보를 요청하고 받아오는 웹 브라우징을 의미하며, 웹 사이트를 탐색하기 위한 도구라는 뜻
Accordion- 사용자가 원하는 정보만 선택적으로 볼 수 있게 접을 수 있는 내용 패널
Placeholder- 사용자가 값을 입력하는 데 참고할 수 있도록, 입력 필드에 제공되는 간략한 텍스트 도움말
Filtering- 원하지 않는 데이터를 차단하거나, 원하는 데이터만 볼 수 있도록 해주는 기능
Input Form- 다양한 입력 필드로 구성되어, 사용자가 웹 서버로 전송할 정보를 입력할 수 있는 웹 문서의 일부
Input Field- 사용자가 정보를 입력하거나 선택하는데 이용되는 사용자 인터페이스 요소
Thumbnail- 커다란 이미지를 축소하여 제공한 이미지
Label- 입력폼을 구성하는 다양한 입력 필드를 식별하기 위해 사용하는 명칭
Alternative Text- 콘텐츠를 대신하기 위해 제공되는 텍스트
Focus- 웹 페이지에서 사용자가 선택한 해당 요소에 있을 때, 해당 요소에 Focus가 있다고 함
UI 지침
설계 지침
사용자 중심- 사용자가 이해하기 편하고 쉽게 사용할 수 있는 환경을 제공(실사용자에 대한 이해가 바탕)
일관성- 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠른 습득이 가능한 설계
단순성- 조작 방법은 가장 간단하게 작동이 가능하도록 하여 인지적 부담을 감소시켜야 함
결과 예측 가능- 작동시킬 기능만 보고도 결과 예측이 가능해야 함
가시성- 주요 기능을 메인 화면에 노출하여 조작이 쉽게 함
표준화- 디자인을 표준화하여 기능 구조의 선행학습 이후 쉽게 사용할 수 있어야 함
접근성- 사용자의 직무, 연령, 성별 등 다양한 계층을 수용해야 함
명확성- 사용자가 개념적으로 쉽게 인지해야 함
오류 발생 해결- 사용자가 오류에 대한 상황을 정확히 인지할 수 있어야 함
필요성
구현하고자 하는 결과의 오류를 최소화하고 적은 노력으로 구현하는 결과 획득
막연한 작업 기능에 대해 구체적인 방법을 제시
사용자의 편의성을 높임으로써 작업 시간 단축과 업무에 대한 이해도 상승
정보 제공자와 공급자의 원활하고 쉬운 매개 역할을 수행
요구사항
기능적 요구사항
시스템의 입력으로 무엇이 포함되어야 하나?
시스템의 출력으로 무엇이 포함되어야 하나?
시스템이 어떤 데이터를 저장해야 하나?
시스템이 어떤 연산을 수행해야 하나?
비기능적 요구사항
사용성, 효율성, 신뢰성, 유지 보수성, 재사용성 등 품질에 관한 요구사항
플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항
비용, 일정 등 프로젝트 계획에 관한 요구사항
UI 설계
UI 설계 프로세스
설계 단계
문제 정의
사용자 모델 정의
작업 분석
컴퓨터 오브젝트 및 기능 정의
사용자 인터페이스 정의
디자인 평가
흐름 설계
화면에 표현되어야 할 기능을 작성
- 기능적 요구사항 정리
- 시스템의 입/출력값 분석
- 연산과 데이터 분석
- 비기능적 요구사항 정리
- 시스템의 성능에 대한 분석
- 시스템 제약사항 분석
화면의 입력 요소를 확인
화면에 표현되어야 할 기능 확인
화면의 입력 요소 확인
화면 간 이동과 흐름 확인
UI 요구사항을 통해 유스케이스를 설계
UI 요구사항을 바탕으로 액터별 시나리오 구상
유스케이스를 설계
기능 및 양식(Form) 확인
- 기능에 맞는 양식을 정의
- Input Box
- Combo Box
- Radio Button
- Check Box
감성공학
개념
인간의 심상을 구체적인 물리적 설계 요소로 번역하여 이를 실현하는 기술
인간의 감성과 이미지를 물리적인 디자인 요소로 해석하여 구체적 제품으로 만들어내는 공학적 접근 방법
마음속의 이미지 파악(심리학) + 형상화(인간공학) + 구체적인 제품 생산(생산공학)
요소화 -> 형상화 -> 구현 -> 생산
제품과 관련된 인간의 감성
감각적 감성 : 제품에 관하여 사용자가 느끼는 감성, 제품의 외관, 색상, 디자인에 관련된 것
기능적 감성 : 제품의 성능과 사용 시 편리함에 대한 것
문화적 감성 : 개인이 속한 사회나 문화에 관련된 것
감성공학의 접근 방법
1류 접근 방법
의미 미분법
인간의 감성을 표현하는 어휘를 이용하여 제품에 대한 이미지를 조사하고, 그 분석을 통해 제품 디자인 요소 연계
2류 접근 방법
문화적 감성의 일부를 반영한 개념
1류와 기본틀은 같으나, 감성 어휘 수집의 전 단계에서 평가자들의 생활 양식을 고려하는 것이 추가
제품에 대한 소비자군의 소속지역, 생활양식, 의식문화가 많은 영향을 미칠 때 사용하는 접근 방법
1류와 함께 감성의 심리적 특성을 강조한 접근 방법
3류 접근 방법
특정 시제품을 사용하여 감각 척도를 계측하고, 정량화된 값을 환산
대상 제품의 물리적 특성에 대한 객관적 지표 연관분석을 통해 제품 설계에 응용
인간 감각계측과 이의 활용이 강조된 접근 방법
UI 설계 도구
Wireframe
선(Wire)으로 틀(Frame)을 잡는다는 뜻
화면 단위의 레이아웃을 설계하는 작업
간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사
내용, 구조, 흐름, 기능 등이 포함
제작 방법에 제한은 없지만, 실무에서는 손그림이나 파워포인트로 작성
StoryBoard
개발 후 완성된 콘텐츠의 최종 결과를 예상할 수 있는 기초 문서
디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
정책, 프로세스 및 콘텐츠 구성, 와이어 프레임, 기능 정의 등 서비스 구축을 위한 대부분의 정보가 수록
작성 절차
표지
- 프로젝트명, 문서버전, 최종업데이트 일자, 작성자 등을 작성
문서의 버전
- 변경된 문서버전, 변경일, 변경된 내용, 작성자 등이 포함
Index 작성
- 스토리보드를 빠르게 찾아갈 수 있는 차례를 작성
Information Architecture 작성
- 소프트웨어의 사이트맵을 작성
공통모듈 작성
- 스토리보드 전반에서 사용될 공통모듈 작성
- 웹의 경우 기본 구성화면(Header, Footer, GNB, LNB 등)의 내용을 공통 모듈 정의서로 작성
화면설계와 description 작성
- 실제로 구현될 화면을 설계
- 해당 화면에서 설명이 필요한 부분에 넘버링을 하고, 설명을 따로 기입
Prototype
실제 서비스와 흡사한 모형을 만드는 작업
와이어프레임이나, 스토리보드에 인터렉션(동적효과)을 적용함으로써 실제 구현된 것처럼 시뮬레이션 가능
실제 개발하는 것보다 단시간에 구현이 가능하기에 사용자 경험에 대한 테스트를 진행 가능
Mockup
디자인, 사용방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
시각적으로만 구성요소를 배치하는 것으로 일반적으로 실제적 구현 하지 않음
파워목업, 발사목 목업 등
Use Case
사용자 측면의 요구사항
사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
다이어그램 형태로 제작