UI 기본 개념
UI(User Interface)는 사용자가 소프트웨어를 사용할 수 있도록 해주는 인터페이스를 의미합니다.
좋은 UI는 소프트웨어를 이해하기 쉽고 효율적으로 사용할 수 있도록 만들어 주기도 하지만 나쁜 UI는 소프트웨어 품질을 하락하게 만들기도 합니다.
UI 설계
UI를 설계하는 것은 심리학이나 인간공학, 사회학 등 여러 분야의 지식과도 관련이 있습니다. 아래와 같은 개념들은 UI 설계를 위해 적용될 수 있는 지식들입니다.
- 인간 컴퓨터 상호 작용
- 인터랙션 디자인
- 사용자 경험(UX: User Experience)
- 인간공학
사용성
사용성(Usability)는 시스템이 얼마나 사용하기 편한지를 나타내는 척도로 사용됩니다. 사용성에 영향을 주는 요소는 다음과 같습니다.
- 학습용이성 - 처음 사용할 때 얼마나 빠르게 사용할 수 있게 되는지?
- 효율성 - 작업 수행의 효율이 좋은가(보통 속도)?
- 기억용이성 - 다시 사용할 때 적응이 쉽게 이루어지는가?
- 낮은 오류율 - 오류 없이 사용할 수 있는가?
- 자신감과 만족 - 소프트웨어를 사용할 때 만족감이 느껴지는가?
UI 설계 원리
좋은 UI를 구성하기 위해서는 일반적으로 아래와 같은 설계 원리를 따르는 것이 좋습니다.
설계 원리
- 단순하고 자연스럽게 만들어라
- 안전한 사용과 오류 회복이 쉽게 하라
- 직접 조작하고 바로 피드백 받게 하라
- 일관성을 유지하라
- 즉각적으로 만족시켜라
- 단축 명령을 제공하라
- 인식하기 쉽게 만들라
- 공간 기억을 활용하라
- 접근성이 좋게 하라
- 도움말과 문서는 최후의 수단
피드백
많은 사용자들은 인내심이 크지 않습니다. 사용자의 행위에 따른 피드백을 제공하지 않으면 사용자는 자신의 진행상황을 확인하지 못합니다. 이것은 사용자 경험을 부정적으로 만들 수 있는 요인이 됩니다.
따라서 프로그래스바(progress bar)나 스니펫(snippet) 등을 이용해 작업이 진행 중이라는 것을 표시해주는 것이 좋습니다.
제약
일반적인 사용자들은 매뉴얼을 읽지 않습니다. 선택이 많은 주문은 선뜻 손이 가지 않는 것처럼 선택지들은 때때로 부정적인 감정을 들게 합니다. 그래서 사용자들의 행동에 제약을 가지게 함으로써 단순하고 자연스러운 사용이 가능하도록 할 수 있습니다. 또한 가능성을 제약하는 것은 직관적인 사용이 가능하도록 도울 수 있습니다.
UI 설계 과정
UI 설계 과정은 누가 무엇을 어떻게 할 것인지를 결정하고 이에 따라 UI를 구성한 뒤 테스트를 거칩니다.
- 사용자 분석
- 사용자 분석은 UI를 누가 사용할 것인지를 분석하는 작업입니다. 사용자에 따라 인터페이스를 복잡하거나 간결한 방향으로 전환할 수 있습니다.
- 이상적으로 볼때 UI는 모든 사용자 유형에 적합해야 합니다.
- 태스크 분석
- 소프트웨어가 무엇을 할 것인지 분석하는 작업입니다. UI 시나리오라고도 볼 수 있으며 유스케이스별로 흐름을 파악하여 분석할 수 있습니다.
- UI 설계와 구현
- 실제로 UI를 디자인하고 구현하는 작업입니다.
- 마법사 - 미리 저장된 순서대로 사용자를 안내합니다.
- 사이트 이동경로 - 브레드크럼(Breadcrumbs)을 이용해 경로를 나타냅니다.
- 메타포 - 사용자가 생각할 수 있는 개념적인 모델입니다.
- 실제로 UI를 디자인하고 구현하는 작업입니다.
멘탈 모델(mental model)이란 현실 세계의 사물이나 과정이 어떻게 작동하는지에 대한 개인의 이해를 말합니다. 내부 구조에 대한 이해를 가진 개발자와 모르는 사용자는 시스템에 대한 멘탈 모델이 다를 수 밖에 없습니다. 따라서 좋은 UI는 다수가 공유하는 멘탈 모델을 만족할 수 있어야 합니다.
- 사용성 테스트
- 사용성 테스트는 개발과 관련 없는 인원들로 진행하는 것이 좋습니다.
- 테스트 데이터를 기록하여 테스트 목적에 해당하는 정도를 구할 수 있습니다.
UI 요소
UI 요소(=컴포넌트)란 화면에서 각 기능을 구성하는 최소의 단위입니다. 컴포넌트는 다음과 같은 특징을 가집니다.
- 재사용 가능
- 일관성과 통일성
- 보편적인 사용 규칙
전통적인 요소들
웹과 모바일 앱이 흥하기 전에도 UI 요소는 존재했습니다. 자주 사용되는 UI 요소들은 다음과 같습니다.
- 윈도우
- 탭
- 메뉴
- 아이콘
- 커서
- 명령 버튼
- 다이얼로그 박스
- 텍스트 박스
- 토글 버튼
- 리스트 박스
- 드롭다운 리스트 박스
- 라디오 버튼
- 체크 박스
모바일 및 웹 UI 컴포넌트
개발 환경의 변화 및 사용자 경험 상승을 위해 다양한 컴포넌트가 개발되어 사용되고 있습니다. UI 컴포넌트의 종류는 크게 4가지로 볼 수 있습니다.
입력 컨트롤
입력 컨트롤(input control)은 말 그대로 사용자로부터 정보를 받을 때 사용하는 요소로 사용자의 액션(action)을 받아들이는 컴포넌트라고 생각할 수 있습니다.
탐색 컴포넌트
탐색 컴포넌트(navigational components)는 다른 페이지나 섹션으로 이동할 수 있는 메뉴나 탭 등의 컴포넌트라고 생각할 수 있습니다.
정보 컴포넌트
정보 컴포넌트란 사용자에게 정보를 전달하는 컴포넌트로 아이콘이나 툴팁 프로그래스 바 등이 있습니다.
컨테이너
컨테이너란 관련된 정보들을 하나로 묶어서 보여줄 수 있는 컴포넌트를 의미합니다. 예를 들어 카드나 리스트 그리드 뷰 형태의 컴포넌트들이 있습니다.
