UI의 구조와 요소

작업을 하다보면 서로 언어를 이해하지못하거나 어떻게 설명을 해야할지몰라 난감한 경우가 있다. 그래서 그런 문제를 조금이라도 보완 하고자 한다.
 
난생처름 방문하는 웹사이트 또는 모바일 앱에서도 아마 여러분은 원하는 정보를 찾으려면 어디로 가야할지 대략 감이 올것이다. 호텔예약 앱,커머스 앱, 금융 앱처럼 각 서비스 측 가능성을 멘탈모델(Mental Model) 이라고한다. 
사용자 경험을 설계하는것은 무에서 유를 만드는 창작 활동과는 다르다. (디자이너는 예술가가 아니다)
 
사람들에게 익숙한 경험을 통해 직관성을 높여야한다. 만약 지나치게 창의적이거나 관습을 무시하고 UI를 디자인 한다면 사용자는 이를 낯설게 여길 것이다. 이를 '멘탈 모델 부조화 (Memtal Model Discordance)가 일어났다'고 표현한다.
멘탈 모델 부조화가 일어나면 사용자는 즉각 서비스를 '사용하기 불편하다'고 인식한다. 따라서 디자이너는 통상적으로 활용하는 UI구조와 요소에 무엇이 있는지 또 각 요소는 어떤 역할을 하는지 파악해야 한다. 
 

멘탈 모델/멘탈 모델 부조화
멘탈 모델은 사물이 어떻게 작동할 것이라 유추하는 인간의 사고 과정을 구조화한 것을 뜻한다. (ex. 링크를 클릭하면 새로운 창이 뜰 거라는 기대감) 즉, 사람들은 자신의 경험을 토대로 사물의 작동 방식을 이해하려는 습성이 있다. 멘탈 모델 부조화는 사물의 작동 방식이 예상에서 벗어나는 것을 의미한다.

 

[UI의 구조]

웹사이트 구조
가로형: 위에서 헤더, 콘텐츠, 푸터로 나뉘어 있다.
세로형: 왼쪽이 헤더, 오른쪽 상단이 콘텐츠, 그 아래가 푸터로 나뉘어 있다.
(이는 보편적인 구성으로, 정보의 성격에 따라 달라질 수 있다.)
 
모바일 사이트 구조
모바일 사이트 구조는 대게 화면 위에 내비게이션을 배치하거나 맨 아래에 탭바를 둬 사이트의 핵심 메뉴, 기능 등을 표시한다. 

 

[UI의 요소]

체크박스 (Check Box)
다중 선택이 필요할 때 사용한다. 항목이 길거나 용어가 비슷하면 유저가 판단을 빨리 내리기가 어려우니 이름이 간단하고 명확히 구분할 수 있는 선택지로 구성하면 효율적이다.

 

라디오 버튼 (Radio Button)
체크 박스와 달리 한 번만에 한 항목한 선택할 수 있다.

 

드롭다운 목록 (Dropdown List)
라디오 버튼과 마찬가지로 한번 에 한 항목만 선택할 수 있고 항목 수가 많을 때 주로 사용한다. 클릭하면 펼쳐지는 형태여서 공간을 아낄 수 있다. 단, 너무 많은 항목을 한 번에 제공하지 않도록 주의해야 한다.
스피너 (Spinner) 숫자를 입력할 때 사용하는 인터페이스로, 사용자가 직접 입력하거나 오른쪽 화살표로 값을 조정할 수 있다.

 

토글버튼 (Toggle Button)
2가지 모즈 중 1가지를 선택할 때 사용하며 각 버튼의 시각적 대비가 강하게 디자인하는 것이 좋다. 주로 즉각적인 응답이 필요 할 때 자주 사용한다.
(ex. 와이파이,알림 설정 혹은 다크모드 설정)

텍스트 필드 (Text Field)
사용자가 텍스트를 입력하는 영역. 주로 상자 형태이며, 해당영역을 선택했을 때 입력을 하지 않아도 동작하고 있다는 신호로 깜박이는 커서 또는 상자 테두리에 컬러를 넣는다.
대체로 짧은 텍스트를 입력할 때 사용하며 한줄 이상 입력하는 텍스트 필드는 입력 영영 (Text Area) 이라고 부른다.

날짜/시간 피커 (Data and Time Picker)
화면 크기에 한계가 있는 모바일에서 공간을 절약하며 날짜/시간을 선택할 수 있는 영역, 보통 달력 모양으로 디자인하며 사용자가 선택한 날짜와 시간은 시스템에 입력된다.

 

검색 필드 (Search Field)
사용자가 키워드를 입력해 관련성 높은 결과를 찾을 때 사용하는 UI. 검색 필드는 보통 한 줄로 길게 디자인하며 관련 키워드를 제공 하기도 한다.

브레드 크럼 (Breadcrunb)
웹/앱에서 사용자의 위치를 파악하기 위한 디자인 요소로, 현재 페이지와 이전 페이지를 구분해서 디자인하며 현재 페이지와 이전 페이지를 클릭해 이동할 수 있다.

페이징 (Pagination)
한페이지에 나오는 콘텐츠양이 일정량을 넘을 때 분류하고 남은 페이지가 얼마나 되는지 보여주는 UI. 사용자는 페이징을 통해 전체 콘텐츠 양을 가늠할 수 있다. 많은 양의 페이지를 건널뛸 때 용이하다.

슬라이더 (Slider)
사용자가 워하는 대로 값을 조정하는 영역. 대표적으로 음량 및 밝기 조절에 사용된다. 여행입에서 날짜 같은 범위를 적용할 때도 사용한다.

태그 (Tags)
유사한 콘텐츠를 분류하기 위한 인터페이스로, 사용자가 원하는 태그를 추가할 수 있는 형태도 았다.

 

이미지 캐러셀 (Image Carousel)
여러 장의 이미지를 좌우로 이동하며 볼 수 있는 인터페이스로, 이미지가 얼마만큼 더 있는지를 알려 주는 인디케이터 (Indicator) 가 하단에 있다. 캐러셀 이미지는 대부분 고유한 링크값을 가진다.

알림 (Notification)
새로운 정보가 도착했다는 것을 알리는 인터페이스. 화면에서 가장 주목성이 높은 색으로 디자인하며 사용자가 알림을 확인하면 사라진다.

 

진행 바 (Progress Bar)
로딩이 길 때 사용하는 인터페이스. 로딩이 얼만큼 진행되었는지를 표현하며 보통 퍼센트 단위로 표현한다. 왼쪽에서 오른쪽으로 진행되는 것이 일반적이며 짧은 로딩에는 사용하지 않는다.

스피너 로딩 (Spinner Loading)
진행 바보다 짧은 로딩에 사용하는 인터페이스로, 진척도를 알 수 없기 때문에 4초 이상 로딩이 예상된다면 스피너 로딩은 피하는 것이 좋다. 숫자 입력 컨트롤인 스피너와 용어상 헷갈리지 않게 주의하자.

툴팁 (Tooltip)
기능 아이콘에 추가 설명이 필요할 때 마우스 포인트를 얹으면 나타나는 설명 창이다. 모바일에선 툴팁 유도를 위해 물음표 아이콘을 사용하기도 한다.

 

팝업 (Pop up)
사용자 진행을 돕거나 시스템 오류 같은 공지가 필요할 때 사용한다. 마치 사용자와 시스템이 대화를 나누는 것처럼 보여 대화 상자 (Dialog Box)라고도 부른다.

 

아코디언 (Accordion)
전달할 내용이 많고 항목에 따라 내용이 나뉠 때 사용하는 인터페이스로, 익숙한 폴더 위계 형태를 딴다. 사용자의 편의를 위해 히나를 미리 열어두는 경우도 있다 (가로 형태는 잘 사용하지 않는다.)

툴바 (Tool Bar)
주요 기능을 모아 놓은 인터페이스로, 도구 모음이라고도 부른다. 주로 오피스 제품군, 그래픽 편집기, 웹 브라우저 같은 소프트웨어에서 볼 수 있다.

 

GNB (Global Navigation Bar)
주로 웹 페이지 상단에 있으며 클릭하면 링크된 페이지로 이동할 수 있다. 브래드크럼과 마찬가지로 사용자의 현재 위치를 알리는 역할도 하고 있어 사용자가 있는 페이지는 밑줄이나 색으로 표시하기도 한다.

LNB (Leftl Navigation Bar)
일반적으로 화면 왼쪽에 위치하는 메뉴 형태로 SNB (Side Navigation Bar) 라고도 불린다. 탭바 (Tad Bar)
모바일 앱 하단에 표시되는 아이콘 모음으로, 페이지를 이동할 수 있다.

모달윈도우 (Modal Window)
기존 페이지와 부모-자식 관계의 창이 뜰때 집중력을 높이기 위해 배경을 어둡게 하는 인터페이스. 이때 창을 제외한 영역은 제아 할 수 없다. (모달 윈도우는 배경과 구분되도록 명도를 확실히 조정하는것이 좋다.)

토스트 팝업 (Toast pop-up)
진행에 필요한 간단한 피드백을 제공할 때 사용하는 인터페이스. 화면에서 작은 영역을 차지하며 모달 윈도우와 달리 팝업을 제외한 영역을 차지하며 모달 윈도우와 달리 팝업을 제외한 영역을 제어할 수 있다. (토스트 팝업이란 명칭은 토스터에서 빵이 튀어나오는 모습과 비슷해서 지어진 이름이다.)

빈 화면 (Empty Data)
표시할 데이터가 없을때 띄우는 화면이다. 단순히 데이터가 없다고 표현하는 것은 사용자 입장에서 정보를 얻을 수 없는 부정적인 이미지를 주므로 현재 상태에 대한 명확한 설명을 하는것이 바람직하다. 서비스 성격에 맞는 아이디어를 녹이는 것도 좋다.

 

코치 마크 (Cosch Marks)
사용자가 처음 앱을 열었을 때 중요 기능을 미리 알려 주는 인터페이스로, 진행에 필요한 기능을 사전에 학습시키는 역할을 한다. 단, 사전 학습니 필요할 정도로 기능이 다양하거나 인터페이스가 낯설때만 사용하는 것이 좋으며 설명이 필요 없을 정도로 간단한 앱에서는 지양한다.

출처: 사용자를 사로잡는 UI.UX 실전가이드 | 저자_김성연 (우디) | 발행일자_2021.12.15