gabiadesign | UI Pattern 용어 정리 #1
32927
single,single-post,postid-32927,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
designgabia_layout01

UI Pattern 용어 정리 #1

UI Pattern이란 UI를 구성하는 요소 중 그 쓰임새에 따른 UI 컴포넌트나 UI 컴포넌트가 조합된 형태를 의미합니다. 사용자들이 인터페이스를 매개로 각자의 목표를 수행하기 위해 여러가지 행동을 하게 되는데 해당 행동을 인터페이스 상에서 가장 효과적으로 구현 할 수 있도록 패턴화 한것이 UI Pattern입니다.

효과적인 UI 디자인을 위해서 이미 널리 사용되고 있는 UI Pattern에 대해 숙지하고 기본을 이해하는 선에서 UI를 배치하고 커스터마이징하는게 필요하겠습니다.

이번 포스팅에서는 원활한 커뮤니케이션을 위한 기본적인 조건인 UI컴포넌트의 명칭과 그 쓰임새를 정리해보려고 합니다.

UI Pattern은 사용자의 행동 유형에 따라 4가지로 나눌 수 있습니다.
1. 데이터 입력 (Input Data)
2. 데이터 출력 (Output Data)
3. 길 찾기 (Way Finding)
4. 검색 (검색)

 

101dropdownlist-overview

드롭다운 리스트 (Drop-down List)
객관식 문제에서 볼 수 있는 선택지와 유사한 개념입니다. 맨 처음 진입 시에는 프로그램에서 지정한 기본값이 보여지다가 화살표 버튼을 누르면 숨어 있던 다른 항목들이 나타납니다. 이 중 특정 항목을 선택하게 되면 기본값이 사용자가 선택한 항목으로 바뀌는데, 이로써 사용자는 자신이 원하는 항목이 선택된 것임을 인지할 수 있습니다. 반면 처음부터 펼쳐진 형태는(즉 드롭다운 하지 않는 형태는) 그냥 리스트 박스라고 부릅니다.

 

1023

콤보 박스 (Combo Box)
드롭다운 리스트와 입력 필드 기능을 결합(그래서 콤보)한 형태입니다. 사용자가 직접 정보를 입력하거나 나열된 항목들 중에서 하나의 항목을 선택하여 정보를 입력할 수 있습니다. 흔히 Office Tool에서 개체 혹은 텍스트 속성을 입력할 때 사용됩니다.

 

103_OBEbmzhSXm7J6W9GO08YmA

라디오 버튼 (Radio Button)
윈도우나 팝업의 선택 영역에서 어느 하나를 선택 또는 취소하기 위해 사용하는 버튼입니다. 일련의 선택 항목 중 단 하나의 항목만 선택할 수 있습니다.

 

104_checkbox_3state

체크 박스 (Check Box)
반면, 또 다른 선택 수단인 체크 박스는 동시에 여러 개를 선택할 때 사용됩니다. 틱 박스(Tick Box)라고도 불립니다. 또한 다중 선택 뿐만 아니라 On/Off 개념으로 사용되기도 하는데요. 라디오 버튼과 체크 박스 이 두 컴포넌트는 모바일 환경에서도 널리 사용되어 사용자에게 매우 친숙한 컨트롤입니다.

 

105_kyQnd

토글 버튼 (Toggle Button, Switch)
On/Off를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼(위) 혹은 토글 스위치(아래)라고 부릅니다. 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각(눌린) 상태로 변하는데 해당 항목이 실행되고 있음(On)을 의미하며, 다시 누를 시에는 볼록한 원래 상태(Off)로 되돌아옵니다. 토글 스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요합니다.

 

106_toolbar-and-menu-template
툴바 (Tool Bar) / 버트콘 (Butcon)
버트콘이란 버튼과 아이콘의 조합으로서 앨런 쿠퍼가 그의 저서 About Face에서 이 용어를 정의하였습니다. 쉽게 말해 버튼 기능이 있는 아이콘입니다. 리본 메뉴, 툴바에 적용되면서 기존 문자 중심의 드롭다운 메뉴를 대체할 강력한 컴포넌트로 자리잡았습니다. 그리고 이러한 버트콘을 사용자의 기호 및 필요에 따라 바(Bar)형태로 모아놓은 것이 툴바입니다. MS에 의해 처음으로 소개된 개념으로 ‘도구 모음’이라고도 불립니다.

 

107_1_0_CgVWY0DVf9jThS27

툴팁 (Tooltip)
사용자가 특정한 메뉴에 마우스 롤오버 시 약 1~2초 뒤에 해당 메뉴에 대한 설명이 말풍선 형태로 제공됩니다. 위에 정의한 버트콘은 사용자가 학습하기 전에는 식별이 어려울 수 있다는 치명적인 단점이 있는데, 툴팁은 이 점을 잘 보완할 수 있는 도구입니다.

 

108_spinner

스피너 (Spinner)
대표적인 숫자 입력 컨트롤입니다. 편집 필드와 우측 옆의 작고 납작한 두 개의 화살표으로 구성되어 있습니다. 현재 필드에 입력된 숫자값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나 혹은 편집 필드에 직접 원하는 숫자값을 입력할 수 있습니다.

 

109_ui-designs-interface-inspiration-9

다이얼 (Dial)
놉(Knob)이라고도 불리며, 실제 기계의 메타포를 적용시킨 사례입니다. 현실에서는 사용자가 손으로 직접 다이얼을 잡고 좌우측으로 돌려 값을 조절하는데, 컴퓨터에서는 마우스 드래그(Drag) 혹은 클릭(Click)동작으로 대신합니다. 주로 음향을 조절할 때 쓰이기 때문에 Garage band 같은 작곡 응용프로그램에서 많이 쓰입니다.

 

110_ranger-slider-gabrielsmelo

슬라이더 (Slider)
리얼메타포를 사용하고 있는 또 다른 경우입니다. 콤보 상자의 경우 사용자가 입력 가능한 범위를 모르는 상태에서 입력하는 상황에 처할 수 있는데 반해, 슬라이더는 입력값이 제한되어 있음을 시각적으로 인지할 수 있습니다. 다시 말해 사용자가 부적절한 값을 입력할 가능성이 없기 때문에 상당히 직관적인 컨트롤이라고 할 수 있습니다.

 

111_0_1n_g109Y4GWtWURm

입력 필드 (Text Input Field)
사용자가 키보드로 직접 텍스트를 입력하는 곳으로서 편집 필드 또는 텍스트 상자 등으로도 불립니다. 특정 항목의 속성을 입력할 때 외에도 검색, 정보 입력 등 상황에 따라 각기 다른 목적으로 사용됩니다. 여러 줄을 입력할 수 있을 때는 입력 영역(Text Area)이라고도 부릅니다.

 

113_1_cC48fdRzsAZnqGt8CJfdqA

드롭다운 메뉴 (Drop-down Menu)
풀다운 메뉴(Pull-down Menu)라고도 하며, 가장 전형적이고 어디에서나 볼 수 있는 메뉴 스타일입니다. 메뉴의 제목이 표시되어 있는 곳을 선택하면 메뉴가 아래로 펼쳐집니다. 메뉴 내의 항목으로 마우스의 포인터를 옮기면 그에 따라 각 항목이 반전되고, 클릭하면 그 항목이 선택 및 실행됩니다. 약 3년 전부터는 드롭다운 메뉴의 변형인 메가 메뉴가 널리 활용되고 있습니다.

 

115_Example_of_a_ribbon_(user_interface_element)

리본 메뉴 (Ribbon Menu)
기존에 있는 텍스트 기반의 드롭다운 메뉴를 보완하기 위해 MS에서 툴바에 탭을 결합한 형태를 선보입니다. MS Office 2007부터 도입되었는데요. 위 화면에서 알 수 있듯이 눈에 익숙한 버트콘의 조합으로만 이루어져 있거나, 버트콘으로만 식별하기 어려운 메뉴의 경우 버튼에 icon과 메뉴명을 함께 표기하고 있습니다. 드롭다운 메뉴에만 익숙했던 사용자는 이러한 리본 메뉴를 처음 접할 시에 매우 당황하지만 지속적인 사용 과정을 거침으로써 반복적이고 자주 접근하는 메뉴를 자연스럽게 사용할 수 있게 됩니다. 이처럼 시각적인 요소를 보완하여 드롭다운 메뉴보다 직접적인 장점이 있지만 모든 메뉴를 풀어놓기 때문에 복잡해보이는 단점도 있습니다. 결국 한글 오피스에서는 드롭다운 메뉴와 리본 메뉴를 모두 제공하는 다소 부자연스러운 해결책을 내놓고 있는데, 이처럼 리본 메뉴는 앞으로도 개선될 여지가 있다고 봅니다.

 

106_60a64b4290f7d3d675a59f33ce5d5cd3--user-interface-ui

트리 메뉴 (Tree Menu)
목록의 보기 방식 중 하나로서 계층 구조를 표시하는 데 유용합니다. 윈도우 탐색기에서 대표적으로 쓰이고 있습니다.

 

116_1718204450909DA00D

GNB (Global Navigation Bar)
웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말합니다. 쉽게 말해 웹사이트에서 항상 표시되는 메뉴로서 탑 메뉴, 메인 메뉴라고도 불립니다. 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치하며 바(Bar), 탭(Tab), 드롭다운 메뉴 등의 메뉴 형태로 제공됩니다.

 

117_d93ba093d99b80f306995060a50b0215_12913_1

LNB (Local Navigation Bar)
서브 메뉴라고 불리며 웹사이트의 좌측에 주로 위치합니다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공됩니다.

 

118_1455763991remodal

대화 상자 (Dialog Box)
사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻기 위해 사용자가 하던 일을 잠시 멈추게 하는 창을 말합니다. 우리에게는 팝업(Pop-up)이라는 용어가 보다 익숙한데요, 대화 상자라고 부르는 이유는 말 그대로 컴퓨터와 사용자 사이에 대화를 제공하기 때문입니다. 대화 상자는 목적에 따라 다양한 형태로 호출됩니다. 크게 오류 등 공지가 필요한 경우, 사용자가 선택한 대상의 속성을 지정하는 경우, 작업의 진행 상황을 알리는 경우, 사용자가 선택한 사항을 재 확인하는 경우 등으로 나뉠 수 있습니다.
증분 탐색 (Incremental Search)
Incremental Search로 검색하면 ‘증분 탐색’이라고 번역이 되어 있는데 ‘순간 검색’이라고 용어가 통일되어 사용되는 추세입니다. 기본적인 의미는 ‘자동 완성’과 구별됩니다. 사용자가 특정 단어를 검색하기 위해 검색어를 입력할 때, 검색어를 예상해서 리스트로 제공하는 화면을 ‘자동 완성’이라고 한다면, 사용자가 목표 검색어를 입력하기 전에 검색어를 예상하고 제공하는 결과 화면은 ‘순간 검색’입니다. 주요 검색 엔진을 통해 해당 기능을 간단하게 비교해 보도록 하겠습니다.

 

201_025E40365120B8EA1E

구글의 Instant Search/Instant Previews
구글의 ‘순간 검색(Instant Search)’은 검색어를 입력하는 동시에 결과 화면이 나타납니다. 그렇기 때문에 타사의 방식처럼 검색어를 입력한 후 ‘엔터키’ 혹은 ‘검색’ 버튼을 누를 필요가 없습니다. 또한 각 검색 결과 옆에 위치한 Cue를 선택할 시 해당 웹페이지의 미리 보기 화면이 나타나는데 이를 ‘순간 미리보기(Instant Previews)’라고 합니다. 그리고 이 미리보기 화면에서 링크와 관련된 정보라고 판단되는 부분에 Highlight 표시(붉은색 박스)와 간단한 캡션이 제공됩니다. 구글이 야심차게 내놓은 순간 검색 서비스는 메인 화면을 되도록 빨리 벗어나게 하기 위한 구글의 의도가 잘 반영된 결과물이며, 실제로 검색에 소요되는 시간을 획기적으로 단축하는 데 기여했다고 보여집니다.

202_2726EF33511C885601
네이버의 정답형 자동 완성
반면 네이버는 ‘정답형 자동 완성’기능을 제공하고 있습니다. 검색어를 입력했을 때 자동 완성 영역에 추천 검색어 뿐만 아니라 관련 결과값이 함께 나타나도록 만든 것인데요. 자동 완성과 순간 검색의 장점(검색 결과가 실시간으로 제공됨)을 혼합한 하이드리드 형태라고 볼 수 있겠네요. 예를 들어 사용자가 검색 필드에 ‘부산광역시 지역번호’를 입력할 시 자동 완성 영역에 실제 지역번호인 ‘051’이 제공됩니다. ‘페이스북’을 입력하면 바로가기 URL이 리스트에 제공됩니다. 아래 화살표 키를 눌러 포커스를 맞춘 후 Enter 키를 누르니 페이스북 홈으로 바로 이동합니다. 마우스를 사용하지 않고 원하는 경로로 바로 이동할 수 있는 점이 편리하게 느껴졌습니다. 모든 검색어에 적용되는 것은 아니고 현재는 시험적으로 국가, 지역번호, 공공기관, 학교 등과 같은 공적인 기관 혹은 로또 당첨 번호에 우선 적용하고 있다고 합니다.

203_263DDD4E511DDAB21A
야후의 Search Direct
야후 역시 ‘서치 다이렉트’라는 검색 서비스를 제공하고 있습니다. 입력하지 않고 커서만 올려놓은 상태에서는 인기 검색어 랭킹이 나오다가(네이버에서는 최근 검색어가 보여지는데 반해), 입력하는 동시에 좌측에는 추천 검색어 영역, 우측에 현재 포커스된 추천 검색어에 대한 추천 결과가 나타납니다. 이 추천 결과에 외부 링크를 나열하기보다는 자체 컨텐츠에서 꺼낸 해답을 직접 제공하는 것이 서비스의 기본 아이디어입니다. 기존 결과 화면에서 일일이 링크를 클릭하여 결과를 얻는 것과는 다르게, 이용자가 원하는 정답을 직관적으로 제공한다는 점에서 타 검색엔진과는 차별화된 시도가 엿보입니다.

 

204_1510053C5120B78334

그 외에 뮤직 검색의 경우 아티스트, 앨범, 곡 3가지의 카테고리에 따른 추천 검색어를 표시합니다. 아티스트를 입력했지만 기대하지 않았던 관련 앨범 정보와 대표곡명을 함께 알려주기 때문에, 이용자 입장에서 얻는 컨텐츠를 생각한다면 역시 일반적인 자동 완성에서 한 단계 더 나아갔다고 볼 수 있습니다.
도서 검색의 경우 야후의 Search Direct와 유사한 형태로 제공합니다. 내가 찾는 책이 소설인지, 언제 출판되었는지, 가격이 얼마인지, 얼만큼 할인된 가격인지, 구입하면 얼만큼 적립되는지, 그리고 마지막으로 ‘장바구니 담기’버튼까지 제공되고 있네요.
이렇게 조금씩 다른 형태로 존재하며 각 검색 엔진마다 지향하는 바는 분명 조금씩 다릅니다. 하지만 크게 보았을 때 ‘얼마나 이용자가 원하는 정보를 빠른 시간 내에 정확히 안내할 것인가’라는 큰 공통된 줄기를 읽을 수 있습니다.

 

205_12672E375120B94416

모바일에서의 순간 검색
사실 Incremental Search는 우리가 피처폰(Feature Phone)에서부터 사용했던 방식입니다. 주소록에서 이름을 입력하면 아래에 관련 결과가 리스트로 제공되고 선택하는 일련의 과정은 우리에게 매우 익숙합니다. 스마트폰에서도 웹 검색 뿐만 아니라 애플리케이션에 이런 순간 검색을 기본으로 탑재하고 있습니다.

 

206_iOSMenuStyle_iTunes
컨텍스트 메뉴(Context Menu)
사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것을 컨텍스트 메뉴라고 합니다.. ‘팝업 메뉴’ 혹은 ‘바로 가기 메뉴’라고도 하며 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출됩니다. 단추가 하나 밖에 없는 마우스를 사용하는 경우 키보드 클릭 조합(Mac OS의 Ctrl+Click)을 사용할 수 있습니다. (피츠를 알려주는 퀴즈에서 이 컨텍스트 메뉴에 관해 Magic Pixel을 잘 활용한 예라고 소개한 바 있습니다.)

 

208_MRU
MRU(Most Recently Used) 리스트
사용자가 특정 종류의 행위를 했을 때 마지막 행위를 레지스트리에 기록해두는 것을 말합니다. 예를 들면, 인터넷 상에서 파일 다운로드 시 마지막으로 저장했던 폴더를 기본 폴더로 보여주거나 윈도우 시작 메뉴에서 특정 응용프로그램 리스트를 확장할 시 보여지는 최근 항목을 예로 들 수 있습니다.

 

209_113C9845511A0CEF2C
어뎁티브 메뉴(Adaptive Menu)
MRU 리스트 개념을 메뉴에 도입한 방식으로, 사용자의 검색 히스토리나 빈도수가 높은 항목들을 메뉴에 우선적으로 나타나게 하는 것을 말합니다. 위 화면과 같이 자주 쓰는 메뉴만 보여지며 확장 버튼을 눌러 모든 메뉴를 확인할 수 있습니다. MS Office Tool 2000, 2003에서 기본 설정으로 제공되다가 리본 메뉴가 출현하면서 현재는 폐기되었습니다.

 

210_TearOffToolsMenuInHyperCard
테어오프 메뉴(Tear-off Menu)
‘떼어내다, 벗기다’의 의미를 가진 테어오프 메뉴는 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴입니다.  해당 도구가 Window형식으로 분리됩니다.

 

210_e313e633b4b51453a930f750ea865bad
메가메뉴(Mega Drop-down Menu)
메가 메뉴란 글로벌 내비게이션 바(GNB)에 위치한 특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴를 말합니다. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있으며 메가 메뉴 안에서도 상세 분류를 할 수 있습니다. 카테고리를 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며 주로 쇼핑몰 같은 대형 웹사이트에 적용됩니다.
요즘은 메가 메뉴에 텍스트와 이미지를 혼합하는 방식이 많이 사용되고 있습니다. 확실히 이미지를 적절한 상황에 잘 사용했을 때 메뉴를 인지하기가 한결 수월하게 느껴집니다. 또한 단순히 메뉴를 나열하는 데 그치지 않고 표시하는 정보도 유연해지고 있습니다. 위의 그림처럼 BMW는 자사의 모델명을 글로벌 내비게이션에 배치하고 메가 메뉴에 해당 모델 시리즈를 소개하고 있습니다. 기존 메뉴와 차별화된 점이 매우 신선했습니다. 그렇다면 메가 메뉴의 몸집이 이렇게 커지는 것이 좋은 일일까요? 메뉴에 마우스를 드래그 하는 동작으로 사용자가 기대하는 것은 그렇게 큰 역할은 아닐 것이라는 생각이 듭니다. 화면을 반 이상 가린다거나 너무 많은 정보를 표시하려고 한다면 답답하거나 거부감마저 들 수 있을 것입니다. 언제까지나 ‘사용자가 목표 메뉴를 찾아가기 쉽게 구성해야 한다’는 기본 목적에 충실해야 한다는 점을 염두해두어야 합니다.

 

211_035BB53C51DE269A32
컨텍스트-센서티브 내비게이션(Context-sensitive Navigation)
특정 상황에서만 제공되는 컨트롤입니다. 위에서 정의한 컨텍스트 메뉴와도 맥락이 유사한데, 팝업 형태가 아닌 다양한 방식으로 사용될 수 있다는 점이 다릅니다. 위의 화면처럼 사진 상단에 있는 메뉴 버튼은 평소에는 나타나지 않다가 마우스 포인터를 해당 사진 영역 안에 옮기는 순간 나타납니다. 리치 인터페이스 디자인 서적에서는 ‘마우스오버 노출도구’ 라고도 정의하였는데 포함되는 개념입니다.

 

 

 

john

john / Gabia UI Designer