사용자 인터페이스

IT위키
스타벅스 (토론 | 기여)님의 2020년 9월 30일 (수) 18:43 판

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를 종합적으로 관리

같이 보기