사용자 인터페이스

From IT Wiki
Revision as of 20:53, 24 September 2020 by 이수민 (talk | contribs) (새 문서: '''User Interface''' '''사용자와 시스템 간의 상호작용을 원활하게 도와주는 장치나 소프트웨어''' == 3가지 분야 == * 정보 제공과 전달을 위...)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

User Interface

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

3가지 분야

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

구분

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

기본 원칙

  • 직관성
  • 유효성
  • 학습성
  • 유연성

설계 지침

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

UI 설계 도구

  • 와이어프레임
    • 기획 초기 단계에서 제작하는 것으로 페이지에 대한 대략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계
    • 관련 도구 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
  • 목업
    • 와이어프레임보다 좀 더 실제 화면과 유사하게 만드는 정적인 형태의 모형
    • 관련 도구 : 파워 목업, 발사믹 목업 등
  • 스토리보드
    • 와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름 등을 추가한 문서
    • 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
    • 서비스 구축을 위한 모든 정보가 담겨 있어야 함
    • 관련 도구 : 파워포인트, 키노트, 스케치, Axure 등
  • 프로토타입
    • 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
    • 작성 방법에 따라 페이퍼/디지털 프로토타입으로 나눔
    • 관련 도구 : HTML/CSS, Axure, Flinto, 네이버 포로토나우, 카카오 오븐 등
  • 유스케이스
    • 사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술하는 표준 방법
    • 관련 도구: UML 다이어그램

같이 보기