사용자 인터페이스(UI; User Interface) - ♩

UI의 구분

• CLI(Command Line Interface) : 텍스트 형태로 이루어진 인터페이스
• GUI(Graphical User Interface) : 마우스로 선택해 작업을 하는 그래픽 환경의 인터페이스
• NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
• VUI(Voice User Interface) : 사람의 음성으로 기기를 조작하는 인터페이스
• OUI(Organic User Interface) : 모든 사물과 사용자 간의 상호작용을 위한 인터페이스

---

 

UI의 기본 원칙

• 직관성
• 유효성 : 사용자가 원하는 행동을 정확하고 완벽하게 달성해야 함
• 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함
• 유연성 : 사용자의 요구사항을 최대한 포용하고 실수를 방지할 수 있게 제작되어야 함

---

 

UI의 설계 지침

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

---

 

웹의 3요소

: 웹 표준(Web Standards), 웹 접근성(Web Accessibility), 웹 호환성(Cross Browsing)

---

 

UI 설계 도구

• 와이어프레임(Wireframe) : 레이아웃을 협의하거나 공유하기 위해 사용
  와이어프레임 툴 : 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
• 목업(Mockup) : 와이퍼르에미보다 좀 더 실제 화면과 유사하게 만드는 정적인 유형
  목업 툴 : 파워 목업, 발사믹 목업 등
• 스토리보드(Story Board) : 와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름 등을 추가한 문서, 최종적으로 참고하는 작업 지침서, 작업 산출물
• 프로토타입(Prototype) : 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
  프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등
• 유스케이스(Use Case) : 사용자 측면에서의 요구사항을 다이어그램 형식으로 묘사(유스케이스 명세서)