모르면 곤란한 UIUX 용어집 - 1
여러분은 다 알고 계신가요?
저는 처음에 UIUX 디자이너로 일할 때 '모달'이라는 단어를 듣고 알아듣지 못했습니다. 사실 '모달'뿐만 아니라 공부해야 할 단어는 많았고, 그럴 때마다 UIUX 업무를 소화하는데 반드시 알아야 하는 단어집이 있으면 좋겠다고 생각하곤 했습니다.
그래서 오늘은 https://story.pxd.co.kr/616 의 글에 약간의 살을 덧붙여 용어집을 4편의 글로 '리마스터' 해보려고 합니다.
'다음편 보러가기'
모르면 곤란한 UIUX 용어집 -2
https://brunch.co.kr/@bundi/42
Index 목차
Selection : 옵션을 선택하는데 주로 쓰이는 요소
1. Drop-down List
2. Combo Box
3. Radio Button / Check Box / Toggle
Tools : 입력, 선택, 조정 등 상호작용이 만드는 요소
4. Butcon / Tool Bar
5. Tooltip
6. Spinner
7. Dial
8. Slider
9. Text Input Field
Menus : 메뉴 구조와 관련된 요소
10. Drop-down Menu - 드롭 다운 메뉴
11. Ribbon Menu - 리본 메뉴
12. Tree Menu - 트리 메뉴
Navigations : 메뉴를 담고 있는 내비게이션과 관련된 요소
13. GNB (Global Navigation Bar)
14. LNB (Local Navigation Bar)
15. SNB(Side Navigation Bar)
16. FNB (Footer Navigation Bar)
Communication : 시스템적 소통, 결정에 관련된 요소
17. Dialog box
1. Drop-down List
말 그래도 아래로 쏟아지는(Drop-down) 리스트 형태입니다. 아래로 쏟아지지 않고 처음부터 모든 선택지가 보이는 리스트는 보통 'List Box'라고 부릅니다. 초기 상태에서는 해당 리스트가 어떤 선택지를 담고 있는지를 표현하거나, 사용자가 가장 많이 선택할만한 옵션을 설정해두곤 합니다 (ex- 이메일 주소를 입력할 때 '@직접 입력' 또는 많이 사용하는 '@naver.com'을 디폴트로 해두는 경우). 사용자가 옵션을 선택 시 선택한 옵션으로 값을 바꿔주어야 하며, 이를 시각적으로 명확하게 표현해주는 것이 중요합니다.
가장 선택할만한 옵션을 디폴트로 설정한 경우
선택된 옵션을 시각적으로 강조
쇼핑에서 효과적입니다.2. Combo Box
'콤보'하면 어떤 생각이 드시나요? 저는 영화관에서 팝콘과 음료를 함께 파는 그런 콤보가 생각이 납니다. 콤보 박스 역시 비슷합니다. 콤보 박스는 '드롭 다운 리스트 + 입력 필드'의 결합입니다. 콤보 박스에서는 앞서 살펴본 드롭 다운 리스트처럼 선택지 사이에서 고를 수도 있고, 동시에 입력 필드에 직접 값을 입력하여 선택할 수 있습니다. 텍스트 크기, 수량 선택처럼 자세하고 명확한 값을 요구하는 내용에 사용하면 좋습니다. 또는 선택지가 엄청 많을 경우 텍스트를 통해 선택지를 선택하는 방식으로도 활용할 수 있습니다.
직접 입력하거나, 드랍 다운 리스트에서 선택하거나
이렇게 많은 선택지 사이에서 고민하는 것보단
텍스트로 입력 (또는 입력할 때마다 선택지 자동 선택) 하는 것이 편리합니다
폰트나 글자 크기를 설정할 때도 유용합니다.3. Radio Button / Check Box / Toggle
https://brunch.co.kr/@bundi/38 제가 전에 작성한 글을 한번 읽어보시길 추천합니다.
간단히 요약하자면 라디오 버튼은 '한 가지' 옵션을 선택, 체크 박스는 '여러 개'옵션을 선택, 토글은 상태를 On/Off 형태로 전환 시에 사용합니다. 사용자가 선택할 수 있는 옵션에 알맞은 방식을 채택해야 합니다.
한 가지만 선택해야 할 때 > 라디오 버튼
여러 개를 선택할 수 있을 때 > 체크 박스
스위치처럼 On/Off 기능이 필요할 때 > 토글
이런 형태의 토글도 존재합니다.4. Butcon / Tool Bar
버트콘이란 'Button + Icon' 이 조합된 단어입니다. 즉 아이콘 형태를 한 버튼이라는 뜻입니다. 그리고 버트콘이 가장 빈번하게 사용되는 곳이 바로 툴바입니다. 툴바는 사용자가 사용하는 기능들을 버트콘으로 만들고, 버트콘들을 바 형태의 영역에 나열한 공간입니다. 경험상 버트콘이라는 말은 Icon, Icon Button 등으로도 사용합니다.
편집 프로그램에서 필수적으로 쓰이고 있는 툴바.
툴바에 지배당하던 시기를 기억하십니까?5. Tooltip
툴팁은 버트콘, 버튼 등에 마우스를 올려놨을 때(hover 상태) 1~2초 뒤에 나타나는 안내 메시지입니다. 단순 버트콘만으로 기능을 가늠하기 어려울 때 도움을 주기 위해 사용됩니다. 모바일에서는 hover가 제한될 수 있기 때문에, 애매한 아이콘은 툴팁보다는 텍스트와 함께 사용하는 것을 추천합니다. 툴팁의 핵심은 '아이콘만으로 파악하기 힘든 기능을 직접 알려주는 것'입니다.
마우스를 올려두면 나타나는 툴팁.
텍스트뿐만 아니라, 기능을 좀 더 자세하게 설명하고 있는 포토샵.
아이콘만으로 모든 정보를 알 수 없기 때문에, 게임에서도 툴팁을 적극적으로 사용합니다.6. Spinner
스피너는 대표적인 숫자 입력 컨트롤입니다. 콤보 박스처럼 편집 필드와 함께 우측 옆의 작고 납작한 두 개의 화살표로 구성되어 있습니다. 현재 필드에 입력된 숫자 값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나 혹은 편집 필드에 직접 원하는 숫자 값을 입력할 수 있습니다.
가장 클래식한 스피너의 모습.
모바일에서는 이런 형태로도 사용됩니다.7. Dial
놉(Knob)이라고도 불립니다. 현실의 버튼을 그대로 옮겨온 듯한 '스큐어모피즘'의 좋은 예시이기도 합니다. 현실에서는 사용자가 다이얼을 잡고 왼쪽 오른쪽으로 돌려서 값을 조절한다면, 컴퓨터/스마트폰에서는 드래그 혹은 클릭으로 값을 조절합니다. 주로 음향 편집 프로그램에서 많이 사용합니다.
스큐어모피즘의 대표주자
로직에서 사용 중인 다이얼 UI8. Slider
현실세계의 조작 방식을 그대로 가져온 또 다른 경우입니다. 콤보 박스는 사용자가 선택 가능한 최소, 최대 범위를 모를 수 있지만, 슬라이더는 입력 값이 제한되어있음을 시각적으로 인지할 수 있습니다. 때문에 사용자가 부적절한 값을 입력할 가능성이 없는 직관적인 컨트롤입니다. 뿐만 아니라 슬라이더는 값을 선택하는 과정이 직관적이기 때문에 사용자가 유연하게 조작하며 변화를 감지해야 하는 곳에 사용하면 효과적입니다. 슬라이더가 주로 사용되는 곳은 볼륨 조절, 동영상 재생 바, 밝기 조절 등이 있습니다.
직관적인 변화를 감지할 수 있는 곳에 주로 사용 중인 슬라이더.9. Text Input Field
말 그대로 텍스트를 입력할 수 있는 영역입니다. 편집 필드, 텍스트 상자 등으로도 불립니다. 다양한 상황에 맞게 각기 다른 목적으로 사용됩니다. 한 줄 이상을 입력할 수 있는 공간은 Text Area라고도 불립니다.
10. Drop-down Menu - 드롭 다운 메뉴
앞서 살펴본 드롭 다운 리스트와 비슷하게, 이번에는 아래로 쏟아지는 메뉴입니다. Pull-down Menu라고도 불리며, 가장 일반적인 메뉴 구성 스타일입니다. 메뉴의 제목을 선택하면, 하위 메뉴가 아래로 쏟아집니다. 최근에는 드롭 다운 메뉴가 더욱 확장된 형태(Mega Menu)로 많이 사용되고 있습니다.
*Mega Menu는 곧 다시 다루겠습니다.
11. Ribbon Menu - 리본 메뉴
일반적인 드롭 다운 메뉴를 보완하기 위해 만들어진 메뉴입니다. 툴바에 탭을 접목시킨 형태로, 탭을 번갈아가며 다양한 메뉴를 확인할 수 있습니다. 리본 메뉴의 단점은 처음에는 복잡해 보일 수 있어 사용자를 당황시킬 수 있지만, 지속적인 사용 과정을 거치다 보면 많은 메뉴를 자연스럽게 활용 가능하다는 장점도 있습니다. 리본 메뉴는 주로 MS Office 게열 프로그램에서 사용 중입니다.
12. Tree Menu - 트리 메뉴
트리 메뉴는 나무 가지치기를 보듯, 메뉴의 계층 구조를 파악하는데 특화되어있습니다. 가장 대표적으로 쓰이는 곳은 탐색기입니다. 메뉴의 구조가 복잡하거나, 구조도를 명확히 파악해야 하는 상황에서 사용하는 것이 좋습니다.
13. GNB (Global Navigation Bar)
14. LNB (Local Navigation Bar)
15. SNB(Side Navigation Bar)
16. FNB (Footer Navigation Bar)
내비게이션에 관해 잘 정리해주신 글이 있어서 먼저 공유합니다 https://hanyonghee9264.github.io/front&design/2019/12/28/Front&Design-Web-Design(GNB-LNB-SNB-FNB)/.
내비게이션은 메뉴를 묶어놓은 영역입니다. 사용자는 다양한 메뉴를 내비게이션을 통해 오갈 수 있습니다. GNB는 글로벌 내비게이션으로, 언제 어디서든 접근할 수 있는 내비게이션입니다. 주로 화면 최 상단에 고정되어 있습니다. LNB는 로컬 내비게이션으로, 항상 보이는 건 아니지만 선택된 메뉴에 따라 선택적으로 표시되는 세부 내비게이션입니다. SNB는 사이드 내비게이션으로 LNB의 한 종류이며 화면 한쪽 구석을 차지합니다. FNB는 흔히 말하는 Footer에 해당되는 내비게이션으로 화면 최 하단에 위치합니다.
LNB 이자 SNB
17. Dialog box
팝업이라는 익숙한 용어로 불리기도 합니다. 대화 상자는 팝업의 일종이기는 하지만, 일반적인 팝업보다는 중요한 메시지를 담고 있습니다. 대화 상자라고 불리는 이유는, 말 그대로 컴퓨터/스마트폰과 사용자 사이의 대화를 제공하기 때문입니다. 사용자의 지시사항이나 어떤 사항에 대한 결정을 묻기 위해서 컴퓨터/스마트폰은 사용자의 업무를 잠시 멈추고 대화 상자를 팝업 합니다. 주로 오류와 같은 중요한 공지가 필요한 경우, 사용자가 중요한 결정을 내려야 하는 경우, 작업의 진행상황을 알려야 할 경우, 사용자의 선택을 다시 한번 확인해야 하는 경우 등에 사용됩니다.
보안과 같은 중대 사항은 반드시 물어보는 게 좋습니다.
정말 이걸 삭제하시는 겁니까?라고 대화를 거는 컴퓨터.
대화 상자지만, 이미 대화가 불가능한 경우.'모르면 곤란한 UIUX 용어집 - 2'로 돌아오겠습니다.
감사합니다.
