사용자 인터페이스

UI; User Interface

사용자와 시스템 간의 상호작용을 원활하게 도와주는 장치나 소프트웨어

3가지 분야

• 정보 제공과 전달을 위한 물리적 제어에 관한 분야
• 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
• 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

구분

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

기본 원칙

• 직관성: 누구나 쉽게 이해하고 사용할 수 있어야 한다.
• 유효성: 사용자의 목적을 정확하게 달성하여야 한다.
• 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.
• 유연성: 사용자의 요구사항을 최대한 수용하며, 오류를 최소화하여야 한다.

UI 설계

설계 지침

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

UI 설계 도구

• 와이어프레임
  • 기획 초기 단계에서 제작하는 것으로 페이지에 대한 대략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계
  • 관련 도구 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

• 목업
  • 와이어프레임보다 좀 더 실제 화면과 유사하게 만드는 정적인 형태의 모형
  • 관련 도구 : 파워 목업, 발사믹 목업 등

• 스토리보드
  • 와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름 등을 추가한 문서
  • 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
  • 서비스 구축을 위한 모든 정보가 담겨 있어야 함
  • 관련 도구 : 파워포인트, 키노트, 스케치, Axure 등

• 프로토타입
  • 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
  • 작성 방법에 따라 페이퍼/디지털 프로토타입으로 나눔
  • 관련 도구 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

• 유스케이스
  • 사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술하는 표준 방법
  • 관련 도구: UML 다이어그램

UX와의 차이

UX는 사용자의 경험을 기반으로 사용자의 편의성과 몰입도를 높이는 관점

• UI의 주요 평가항목: 사용성/접근성/편의성
• UX의 주요 평가항목: 목입도/만족도/재접근률
• 일반적으로 UI 또는 UX만 단독으로 고려할 수 없으므로 UI/UX를 종합적으로 관리

같이 보기

• UI/UX