사용자 인터페이스
From IT Wiki
(Redirected from UI)
UI; User Interface
사용자와 시스템 간의 상호작용을 원활하게 도와주는 장치나 소프트웨어
3가지 분야[edit | edit source]
- 정보 제공과 전달을 위한 물리적 제어에 관한 분야
- 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
- 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야
구분[edit | edit source]
- CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이루어지는 인터페이스
- GUI(Graphic User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 인터페이스
- NUI(Natural User Interface) : 말이나 행동으로 조작하는 인터페이스
기본 원칙[edit | edit source]
- 직관성: 누구나 쉽게 이해하고 사용할 수 있어야 한다.
- 유효성: 사용자의 목적을 정확하게 달성하여야 한다.
- 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.
- 유연성: 사용자의 요구사항을 최대한 수용하며, 오류를 최소화하여야 한다.
UI 설계[edit | edit source]
설계 지침[edit | edit source]
- 사용자 중심
- 일관성
- 단순성
- 결과 예측 가능
- 가시성
- 표준화
- 접근성
- 명확성
- 오류 발생 해결
UI 설계 도구[edit | edit source]
- 와이어프레임
- 기획 초기 단계에서 제작하는 것으로 페이지에 대한 대략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계
- 관련 도구 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
- 목업
- 와이어프레임보다 좀 더 실제 화면과 유사하게 만드는 정적인 형태의 모형
- 관련 도구 : 파워 목업, 발사믹 목업 등
- 스토리보드
- 와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름 등을 추가한 문서
- 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
- 서비스 구축을 위한 모든 정보가 담겨 있어야 함
- 관련 도구 : 파워포인트, 키노트, 스케치, Axure 등
- 프로토타입
- 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
- 작성 방법에 따라 페이퍼/디지털 프로토타입으로 나눔
- 관련 도구 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등
- 유스케이스
- 사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술하는 표준 방법
- 관련 도구: UML 다이어그램
UX와의 차이[edit | edit source]
UX는 사용자의 경험을 기반으로 사용자의 편의성과 몰입도를 높이는 관점
- UI의 주요 평가항목: 사용성/접근성/편의성
- UX의 주요 평가항목: 몰입도/만족도/재접근률
- 일반적으로 UI 또는 UX만 단독으로 고려할 수 없으므로 UI/UX를 종합적으로 관리
