UI 기본 개념 (Concept of User Interface)
UI 설계(User Interface Design, 사용자 인터페이스 설계)는 사용자가 제품을 쉽게 이해하고, 효과적으로 사용할 수 있도록 시각적이고 인터랙티브한 요소를 구성하는 작업이다. UI 구성 요소들은 사용자와 시스템 간의 정보를 교환하고 조정하는 수단이 되기에, 소프트웨어를 이해하기 쉽고 효율적으로 사용할 수 있도록 구성해야 한다.
사용성 (Usability)
UI 설계 결과는 소프트웨어의 비기능적 품질 중 “사용성”을 좌우한다. 이때, 사용성이란 일반적으로 시스템이 얼마나 사용하기 편한지를 나타내는 척도이다. 인간과 컴퓨터 상호 작용을 개선하기 위한 방법, 기술을 포함하는 사용의 용이성에 대한 연구를 설묭하는 용어로도 쓰인다.
사용성에 영향을 주는 요소는 다음과 같다.
- `학습용이성(Learnability)`: 처음 사용하는 것이 얼마나 쉬운가에 대한 척도
- `효율성(Efficiency)`: 작업 수행 방법을 배운 사용자가 작업을 쉽게 수행할 수 있어야 함
- `기억용이성(Memorability)`: 애플리케이션을 오랫동안 사용하지 않고 다시 사용하더라도 동작 방식이 쉽게 기억 나야 함.
- `낮은 오류율`: 오류가 거의 없어야 하며, 오류가 발생하더라도 쉽게 복구되어야 함
멘탈 모델 (Mental Model)
멘탈 모델을 현실 세계의 사물이나 과정이 어떻게 작동하는지에 대한 개인의 이해이다. 이는 사용자의 행동 결과와 특정 작업을 수행하는데 필요한 행동을 예측할 수 있도록 한다. 멘탈 모델은 소프트웨어 사용에서도 중요한데, 잘못된 멘탈 모델로 접근하게 되면 프로그램 작동이 어려워지게 된다.
개발자는 사용자의 멘탈 모델을 중심으로 디자인해야 한다. 이는 사용자의 UI 학습 곡선을 완만하게 하며 이를 통해 빠른 적응을 이끌 수 있다.
피드백 (Feedback)
사용자는 명령에 대한 진행 상황과 입력 내용을 해석하는 방법을 알고 싶어한다. 피드백은 시스템 상태와 사용자의 지시에 대한 효과를 보여준다. 대표적으로 Spinner와 같은 Loading UI는 웹페이지가 로딩되고 있음을 나타낸다.
피드백은 반응한 시간에 따라 다르게 줄 수 있다. 0.1초 내에 수행되는 작업을 사용자에게 즉각적인 것처럼 보이기에 피드백을 줄 필요가 없으며, 0.1~1.0초 정도 걸리는 작업은 지연이 느껴지지만 특별한 피드백이 필요하지 않다.
그러나 1초 이상 지속되는 작업에 대한 응답은 피드백을 제공하는 것이 유익하다. 회전구, 바퀴 등의 애니메이션 아이콘은 1초 이상 걸리는 작업에 대한 피드백으로 적합하다. 만약 10초 이상 지속되는 작업은 작업 소요 시간을 나타내는 진행 표시기(프로그레스 바)나 완료율 표시기가 적합하다.
제약 (Constraint)
일반적인 사용자들은 소프트웨어 사용 시 메뉴얼을 읽기 싫어하기에 직관적으로 파악 가능한 UI를 설계하는 것이 중요하다. 사용자들은 선택에 익숙하지 않기에 많은 옵션을 제공하는 것은 좋은 UI 설계 사례는 아니다. 또한 사용자를 두렵게 하는 경고 메세지나, 혼동을 유발하는 UI도 바람직하지 않다.
UI 설계 원리 (UI Design Principles)
UI는 단순히 관심을 끄는 것이 아니라 시스템 설계 목적을 달성하고 시스템 사용에 도움을 주는 것에 초점을 맞춘다. 따라서 UI 설계의 기본 원리를 잘 따라서 개발하는 것이 중요하다.
단순하고 자연스럽게 만들기
UI가 잘못 해석되지 않도록 추가로 설명하는 정보를 주지 않고 단순하게 하는 것이 좋다. 사용자에게 친숙한 단어와 개념들을 사용하고 미니멀리즘 디자인을 선호해야 한다.
안전한 사용과 오류 회복이 쉽게 하기
시스템을 사용하면서 탐색하는 과정 가운데 잘못된 결과를 피하도록 하고, 혹여나 사용자가 실수하더라도 큰 피해를 입지 않게 하고, 실수했을 때 쉽게 복구할 수 있도록 설계해야 한다. 실수 가능성이 있는 행동은 미리 경고하거나 방지 장치를 마련하고, 되돌리기(Undo)가 가능하도록 하는 것이 좋다. 또한 오류 메시지는 친절하게 작성하는 것이 좋다.
직접 조작하고 바로 피드백 받기
사용자가 어떤 대상에 대해 작업을 수행하는 경우, 해당 작업이 개체에 미치는 영향을 즉각적으로 나타나게 하는 것이 좋다. 파일 탐색기에서 파일을 선택하여 드래그할 때, 파일이 이동하는 것을 직접 느끼도록 UI를 구성하는 것이 “직접 조작하고 바로 피드백 받기”의 대표적인 예시이다.
일관성을 유지하기
UI가 일관성을 가져야 사용자는 이전에 사용해 본 지식과 경험을 토대로 다른 소프트웨어에서도 쉽게 사용할 수 있다. 사용자의 기대와 일치하는 일관성에 충돌이 생기면 좁은 범위 일관성은 넓은 범위 일관성보다 우선된다. 결국, 이를 위해서는 플랫폼 규약 및 표준을 따르고 표준 요소들을 사용하는 것이 중요하다.
즉각적으로 만족시키기
사용자는 소프트웨어 사용 후 몇 초 내에 어느 정도의 성공을 거두어야 만족한다. 따라서 즉각적인 만족으로 사용자에게 신뢰감을 주는 것이 좋다. 사용자가 원할 만한 작업을 먼저하고 프로그램 설정하는 쉬운 일은 나중에 하는 것이 좋다.
단축 명령 제공하기
다양한 사용자를 수용하기 위해서는 단축 명령을 제공하는 것이 좋다. 전문 사용자들을 효율적으로 작업하는데 관심이 많기 때문이다. “바로 가기” 등을 활용하며 효율적으로 사용하게 하는 것이 좋다. 그러나 전문 사용자를 지원하기 위해 UI를 구성하더라도 초보 사용자에게 부정적인 영향을 미치지 않도록 해야 한다.
인식하기 쉽게 만들기
대부분의 사용자들은 복잡한 인터페이스를 분석할 시간, 에너지, 인내심이 없다. 따라서 사용자는 잘 읽지 않고 긴 시간을 투자하지 않음을 기억하고 UI를 설계해야 한다. 설명서가 필요 없는 UI를 위해서 노력하고, 설명서나 도움말을 최후의 수단이 되어야 한다.
공간 기억을 활용하기
사람들은 의식적/무의식적으로 공간 기억을 사용하여 UI의 개체나 명령을 찾아가는 경향이 있다. UI의 요소나 메뉴 옵션을 다시 정렬하면 위치를 기억하는 공간 메모리가 손상될 수 있다. 따라서 일관성을 갖추고 공간 기억을 활용하는 UI를 설계하는 것이 좋다.
접근성을 고려하기
UI 접근성이 좋은 시스템은 사용자를 넓히고 사용자 경험(UX)을 풍요롭게 한다. 장애인 등의 접근성을 높이는 것은 소프트웨어의 경쟁력을 높인다.
UI 설계 과정 (UI Design Process)
UI를 설계하기 위해야 할 작업들은 다음과 같다.
사용자 분석
UI 설계자는 소프트웨어를 사용할 사용자를 분석한다. 사용자의 지식 및 역량 수준에 따라 디자인 세부 사항이 변경되기에 사용자 분석은 중요하다. 사용자의 목표는 무엇인지, 사용 스킬과 경험은 무엇인지에 대한 질문을 고려하는 것은 UI 설계 전략을 세우는데 도움이 된다.
태스크 분석
UI를 설계하려면 소프트웨어가 수행해야 할 작업을 분석해야 한다. 유스케이스 별로 UI 흐름을 파악하는 것이 중요하며, UI 흐름은 하나의 주요 작업을 더 작은 하위 작업으로 나누는 계층적 방식으로 표현된다.
UI 설계 구현
UI 작업에 대한 정보를 얻고 GUI를 디자인하고 코드로 구현한다. UI 설계 과정에서 자주 사용되는 개념은 다음과 같다.
- `마법사(Wizard)`: 미리 저장된 순서로 사용자가 절차를 쉽게 따라오도록 안내한다.
- `사이트 이동경로(Breadcrumbs)`: 웹사이트나 애플리케이션에서 사용자의 위치를 표시하는 내비게이션
- `메타포(Metaphor)`: 사용자의 개념적 인식 모델을 말한다. 이를 통해 사용자가 개념적 인식 방식으로 프로그램의 작동을 예측하고 조작한다.
사용성 테스트
UI 설계 과정에서 사용자가 실제로 인터페이스를 어떻게 사용하는지 관찰하고, 문제점을 찾아 개선하기 위해 수행하는 테스트이다. 사용자 테스트는 다음의 절차에 따라 진행된다.
- `테스트 목적 설정`: UI 테스트의 목적을 명확히 한다. 학습성, 오류율, 예측성 등의 사용자의 여러 측면에서 상대적 우선 순위가 무엇인지 결정한다.
- `대표 사용자 선정`: 대표적인 사용자 샘플을 찾는다.
- `설문 준비 및 테스트`: 테스트 대상을 준비하고 사전/사후 테스트 설문지 및 작업 시나리오를 정의하여 참가자에게 수행하도록 요청한다. 사용성 테스트를 수행하고 데이터를 기록하며, 수행한 테스트의 데이터와 관찰 결과를 분석한다.
UI 요소 (UI Components)
UI는 시스템과 상호 작용하기 위한 그래픽 요소들을 제공한다. 그래픽 UI 요소를 사용하여 소프트웨어를 해석하고 사용한다. GUI(Graphic User Interface)는 소프트웨어와 상호작용하기 위해서 구성 요소를 제공한다. 이는 단순히 예쁜 그림이 아니라, 기능성과 미적 균형을 함께 갖춘 중요한 UI 구성 요소이다. GUI에는 다음과 같은 요소들이 사용된다.
- `윈도우(Window)`: 프로그램이나 애플리케이션의 독립된 작업 영역. 일반적으로 사용자가 정보를 입력하거나 기능을 수행할 수 있는 창을 의미함. 예: 설정 창, 팝업 창 등.
- `탭(Tab)`: 하나의 화면 안에서 여러 내용을 구분해 보여줄 수 있는 요소. 사용자가 클릭하면 콘텐츠 영역이 전환됨. 예: 브라우저의 탭, 설정 페이지의 탭 메뉴.
- `메뉴(Menu)`: 사용자가 선택할 수 있는 기능이나 옵션 목록. 드롭다운, 햄버거 메뉴, 사이드 메뉴 등이 포함됨.
- `아이콘(Icon)`: 기능이나 의미를 직관적으로 표현한 작은 그래픽. 예: 휴지통, 설정, 홈 아이콘 등.
- `커서(Cursor)`: 사용자가 현재 어디에 있는지 보여주는 지시자. 마우스 커서, 텍스트 입력 커서 등이 있음.
- `명령 버튼(Command Button)`: 특정 동작을 실행하는 버튼. 예: 저장, 제출, 확인, 취소 등.
- `다이얼로그(Dialog)`: 사용자에게 정보를 전달하거나 확인/입력을 요구하는 팝업 창. 예: 경고창, 파일 열기 창.
- `텍스트 박스(Text Box)`: 사용자가 텍스트를 입력할 수 있는 필드. 예: 검색창, 로그인창의 아이디/비밀번호 입력란.
- `토글 버튼(Toggle Button)`: 두 가지 상태(예: 켜기/끄기)를 전환할 수 있는 버튼. 상태 유지형 버튼이라고도 함.
- `리스트 박스(List Box)`: 여러 항목 중에서 하나 또는 여러 개를 선택할 수 있는 박스 형태의 목록.
- `드롭다운 리스트(Dropdown List)`: 사용자가 선택할 수 있는 항목이 숨겨져 있다가 클릭 시 펼쳐지는 형태의 목록.
- `라디오 버튼(Radio Button)`: 여러 항목 중 하나만 선택 가능할 때 사용하는 원형 버튼.
- `체크 박스(Checkbox)`: 여러 항목 중 복수 선택 가능할 때 사용하는 네모난 체크용 UI 요소.
화면 및 출력 설계
화면 설계
화면 설계는 사용자가 시스템과 직접 상호작용하는 화면(UI)을 어떻게 구성할지 설계하는 과정이다. 사용자가 시스템을 쉽고 편리하게 사용할 수 있게 하며, 입력, 탐색, 클릭, 이동 등 사용자 행동 흐름을 고려한 화면 구성해야 한다.
출력 설계
출력 설계는 시스템이 사용자에게 보여주는 최종 결과물(출력 정보)을 어떻게 제시할지 설계하는 과정이다. 정보를 명확하고 이해하기 쉽게 전달하는 것이 목표이며, 사용자나 관리자 등이 보고 판단할 수 있도록 구성해야 한다.
