UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄
2012. 12. 26. 07:30ㆍUI 가벼운 이야기
그리 오래 전은 아니지만 UX라는 분야에 처음 입성했을 때, 머리 속에 가득 찬 아이디어를 우리가 흔히 부르는 Wireframe에 옮기는 데 애를 먹었던 기억이 있습니다. 그림은 대충 그려지는 데 정작 내가 그리고 있는 것이 무엇인지 '정의'를 내릴 수가 없었던 탓이지요. 이처럼 기획자라면 누구나 UI규격서를 설계해 본 적이 있을 것입니다. 이것은 UI기획자와 디자이너 간, 혹은 UI기획자와 개발자 간의 일종의 약속이자 물리적인 결과물입니다. 그렇기 때문에 모든 약속은 명확한 정의가 바탕이 되어야 합니다. 그래야 작업자 간의 원활한 커뮤니케이션을 이끌 수 있으니까요.
드롭다운 리스트 (Drop-down List)
객관식 문제에서 볼 수 있는 선택지와 유사한 개념입니다. 맨 처음 진입 시에는 프로그램에서 지정한 기본값이 보여지다가 화살표 버튼을 누르면 숨어 있던 다른 항목들이 나타납니다. 이 중 특정 항목을 선택하게 되면 기본값이 사용자가 선택한 항목으로 바뀌는데, 이로써 사용자는 자신이 원하는 항목이 선택된 것임을 인지할 수 있습니다. 반면 처음부터 펼쳐진 형태는(즉 드롭다운 하지 않는 형태는) 그냥 리스트 박스라고 부릅니다.
콤보 박스 (Combo Box)
드롭다운 리스트와 입력 필드 기능을 결합(그래서 콤보!)한 형태입니다. 사용자가 직접 정보를 입력하거나 나열된 항목들 중에서 하나의 항목을 선택하여 정보를 입력할 수 있습니다. 흔히 Office Tool에서 개체 혹은 텍스트 속성을 입력할 때 사용됩니다.
라디오 버튼 (Radio Button)
윈도우나 팝업의 선택 영역에서 어느 하나를 선택 또는 취소하기 위해 사용하는 버튼입니다. 일련의 선택 항목 중 단 하나의 항목만 선택할 수 있습니다.
체크 박스 (Check Box)
반면, 또 다른 선택 수단인 체크 박스는 동시에 여러 개를 선택할 때 사용됩니다. 틱 박스(Tick Box)라고도 불립니다. 또한 다중 선택 뿐만 아니라 On/Off 개념으로 사용되기도 하는데요. 라디오 버튼과 체크 박스 이 두 컴포넌트는 모바일 환경에서도 널리 사용되어 사용자에게 매우 친숙한 컨트롤입니다.
토글 (Toggle Button/Switch)
On/Off를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼(위) 혹은 토글 스위치(아래)라고 부릅니다. 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각(눌린) 상태로 변하는데 해당 항목이 실행되고 있음(On)을 의미하며, 다시 누를 시에는 볼록한 원래 상태(Off)로 되돌아옵니다. 토글 스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요합니다.
버트콘 (Butcon) / 툴바 (Tool Bar)
버트콘이란 버튼과 아이콘의 조합으로서 앨런 쿠퍼가 그의 저서 About Face에서 이 용어를 정의하였습니다. 쉽게 말해 버튼 기능이 있는 아이콘입니다. 리본 메뉴, 툴바에 적용되면서 기존 문자 중심의 드롭다운 메뉴를 대체할 강력한 컴포넌트로 자리잡았습니다. 그리고 이러한 버트콘을 사용자의 기호 및 필요에 따라 바(Bar)형태로 모아놓은 것이 툴바입니다. MS에 의해 처음으로 소개된 개념으로 '도구 모음'이라고도 불립니다.
툴팁 (Tooltip)
사용자가 특정한 메뉴에 마우스 롤오버 시 약 1~2초 뒤에 해당 메뉴에 대한 설명이 말풍선 형태로 제공됩니다. 위에 정의한 버트콘은 사용자가 학습하기 전에는 식별이 어려울 수 있다는 치명적인 단점이 있는데, 툴팁은 이 점을 잘 보완할 수 있는 도구입니다.
스피너 (Spinner)
대표적인 숫자 입력 컨트롤입니다. 편집 필드와 우측 옆의 작고 납작한 두 개의 화살표으로 구성되어 있습니다. 현재 필드에 입력된 숫자값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나 혹은 편집 필드에 직접 원하는 숫자값을 입력할 수 있습니다.
다이얼 (Dial)
일전에 pxd에서 주제로 다룬 '스큐어모피즘'의 예라고 볼 수 있는데요. 놉(Knob)이라고도 불리며, 실제 기계의 메타포를 적용시킨 사례입니다. 현실에서는 사용자가 손으로 직접 다이얼을 잡고 좌우측으로 돌려 값을 조절하는데, 컴퓨터에서는 마우스 드래그(Drag) 혹은 클릭(Click)동작으로 대신합니다. 주로 음향을 조절할 때 쓰이기 때문에 Garage band 같은 작곡 응용프로그램에서 많이 쓰입니다.
슬라이더 (Slider)
리얼메타포를 사용하고 있는 또 다른 경우입니다. 콤보 상자의 경우 사용자가 입력 가능한 범위를 모르는 상태에서 입력하는 상황에 처할 수 있는데 반해, 슬라이더는 입력값이 제한되어 있음을 시각적으로 인지할 수 있습니다. 다시 말해 사용자가 부적절한 값을 입력할 가능성이 없기 때문에 상당히 직관적인 컨트롤이라고 할 수 있습니다.
입력 필드 (Text Input Field)
사용자가 키보드로 직접 텍스트를 입력하는 곳으로서 편집 필드 또는 텍스트 상자 등으로도 불립니다. 특정 항목의 속성을 입력할 때 외에도 검색, 정보 입력 등 상황에 따라 각기 다른 목적으로 사용됩니다. 여러 줄을 입력할 수 있을 때는 입력 영역(Text Area)이라고도 부릅니다.
드롭다운 메뉴 (Drop-down Menu)
풀다운 메뉴(Pull-down Menu)라고도 하며, 가장 전형적이고 어디에서나 볼 수 있는 메뉴 스타일입니다. 메뉴의 제목이 표시되어 있는 곳을 선택하면 메뉴가 아래로 펼쳐집니다. 메뉴 내의 항목으로 마우스의 포인터를 옮기면 그에 따라 각 항목이 반전되고, 클릭하면 그 항목이 선택 및 실행됩니다. 약 3년 전부터는 드롭다운 메뉴의 변형인 메가 메뉴(2편에서 소개할 예정)가 널리 활용되고 있습니다.
리본 메뉴 (Ribbon Menu)
기존에 있는 텍스트 기반의 드롭다운 메뉴를 보완하기 위해 MS에서 툴바에 탭을 결합한 형태를 선보입니다. MS Office 2007부터 도입되었는데요. 위 화면에서 알 수 있듯이 눈에 익숙한 버트콘의 조합으로만 이루어져 있거나, 버트콘으로만 식별하기 어려운 메뉴의 경우 버튼에 icon과 메뉴명을 함께 표기하고 있습니다. 드롭다운 메뉴에만 익숙했던 사용자는 이러한 리본 메뉴를 처음 접할 시에 매우 당황하지만 지속적인 사용 과정을 거침으로써 반복적이고 자주 접근하는 메뉴를 자연스럽게 사용할 수 있게 됩니다. 이처럼 시각적인 요소를 보완하여 드롭다운 메뉴보다 직접적인 장점이 있지만 모든 메뉴를 풀어놓기 때문에 복잡해보이는 단점도 있습니다. 결국 한글 오피스에서는 드롭다운 메뉴와 리본 메뉴를 모두 제공하는 다소 부자연스러운 해결책을 내놓고 있는데, 이처럼 리본 메뉴는 앞으로도 개선될 여지가 있다고 봅니다.
트리 메뉴 (Tree Menu)
목록의 보기 방식 중 하나로서 계층 구조를 표시하는 데 유용합니다. 윈도우 탐색기에서 대표적으로 쓰이고 있습니다.
GNB (Global Navigation Bar)
웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말합니다. 쉽게 말해 웹사이트에서 항상 표시되는 메뉴로서 탑 메뉴, 메인 메뉴라고도 불립니다. 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치하며 바(Bar), 탭(Tab), 드롭다운 메뉴 등의 메뉴 형태로 제공됩니다.
LNB (Local Navigation Bar)
서브 메뉴라고 불리며 웹사이트의 좌측에 주로 위치합니다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공됩니다.
대화 상자 (Dialog Box)
사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻기 위해 사용자가 하던 일을 잠시 멈추게 하는 창을 말합니다. 우리에게는 팝업(Pop-up)이라는 용어가 보다 익숙한데요, 대화 상자라고 부르는 이유는 말 그대로 컴퓨터와 사용자 사이에 대화를 제공하기 때문입니다. 대화 상자는 목적에 따라 다양한 형태로 호출됩니다. 크게 오류 등 공지가 필요한 경우, 사용자가 선택한 대상의 속성을 지정하는 경우, 작업의 진행 상황을 알리는 경우, 사용자가 선택한 사항을 재 확인하는 경우 등으로 나뉠 수 있습니다.
여기까지 기본적으로 알아야 할 컨트롤을 정리해보았습니다. 다음 포스팅에서는 앞서 정의한 컨트롤을 바탕으로 응용된 개념 및 새롭게 추가된 컨트롤에 대해 알아보도록 하겠습니다.
[참고: 안드로이드 디자인 가이드 http://klutzy.github.com/android-design-ko/]
[참고##가이드라인##]
[참고##UI 용어##]
이번 포스팅에서는 원활한 커뮤니케이션을 위한 기본적인 조건인 UI컴포넌트 용어를 정리해보려고 합니다. 시리즈의 첫 번째로 가장 기본적인 전통 용어를 정리해보았습니다. (사전에 기재되었거나 각 제조사에서 공식적으로 쓰이고 있는 고유 단어를 기준으로 용어를 선별하였으며, 앨런 쿠퍼의 About Face 서적을 참고로 작성하였습니다.)
관련 글
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄
드롭다운 리스트 (Drop-down List)
객관식 문제에서 볼 수 있는 선택지와 유사한 개념입니다. 맨 처음 진입 시에는 프로그램에서 지정한 기본값이 보여지다가 화살표 버튼을 누르면 숨어 있던 다른 항목들이 나타납니다. 이 중 특정 항목을 선택하게 되면 기본값이 사용자가 선택한 항목으로 바뀌는데, 이로써 사용자는 자신이 원하는 항목이 선택된 것임을 인지할 수 있습니다. 반면 처음부터 펼쳐진 형태는(즉 드롭다운 하지 않는 형태는) 그냥 리스트 박스라고 부릅니다.
콤보 박스 (Combo Box)
드롭다운 리스트와 입력 필드 기능을 결합(그래서 콤보!)한 형태입니다. 사용자가 직접 정보를 입력하거나 나열된 항목들 중에서 하나의 항목을 선택하여 정보를 입력할 수 있습니다. 흔히 Office Tool에서 개체 혹은 텍스트 속성을 입력할 때 사용됩니다.
라디오 버튼 (Radio Button)
윈도우나 팝업의 선택 영역에서 어느 하나를 선택 또는 취소하기 위해 사용하는 버튼입니다. 일련의 선택 항목 중 단 하나의 항목만 선택할 수 있습니다.
체크 박스 (Check Box)
반면, 또 다른 선택 수단인 체크 박스는 동시에 여러 개를 선택할 때 사용됩니다. 틱 박스(Tick Box)라고도 불립니다. 또한 다중 선택 뿐만 아니라 On/Off 개념으로 사용되기도 하는데요. 라디오 버튼과 체크 박스 이 두 컴포넌트는 모바일 환경에서도 널리 사용되어 사용자에게 매우 친숙한 컨트롤입니다.
토글 (Toggle Button/Switch)
On/Off를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼(위) 혹은 토글 스위치(아래)라고 부릅니다. 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각(눌린) 상태로 변하는데 해당 항목이 실행되고 있음(On)을 의미하며, 다시 누를 시에는 볼록한 원래 상태(Off)로 되돌아옵니다. 토글 스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요합니다.
버트콘 (Butcon) / 툴바 (Tool Bar)
버트콘이란 버튼과 아이콘의 조합으로서 앨런 쿠퍼가 그의 저서 About Face에서 이 용어를 정의하였습니다. 쉽게 말해 버튼 기능이 있는 아이콘입니다. 리본 메뉴, 툴바에 적용되면서 기존 문자 중심의 드롭다운 메뉴를 대체할 강력한 컴포넌트로 자리잡았습니다. 그리고 이러한 버트콘을 사용자의 기호 및 필요에 따라 바(Bar)형태로 모아놓은 것이 툴바입니다. MS에 의해 처음으로 소개된 개념으로 '도구 모음'이라고도 불립니다.
툴팁 (Tooltip)
사용자가 특정한 메뉴에 마우스 롤오버 시 약 1~2초 뒤에 해당 메뉴에 대한 설명이 말풍선 형태로 제공됩니다. 위에 정의한 버트콘은 사용자가 학습하기 전에는 식별이 어려울 수 있다는 치명적인 단점이 있는데, 툴팁은 이 점을 잘 보완할 수 있는 도구입니다.
스피너 (Spinner)
대표적인 숫자 입력 컨트롤입니다. 편집 필드와 우측 옆의 작고 납작한 두 개의 화살표으로 구성되어 있습니다. 현재 필드에 입력된 숫자값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나 혹은 편집 필드에 직접 원하는 숫자값을 입력할 수 있습니다.
다이얼 (Dial)
일전에 pxd에서 주제로 다룬 '스큐어모피즘'의 예라고 볼 수 있는데요. 놉(Knob)이라고도 불리며, 실제 기계의 메타포를 적용시킨 사례입니다. 현실에서는 사용자가 손으로 직접 다이얼을 잡고 좌우측으로 돌려 값을 조절하는데, 컴퓨터에서는 마우스 드래그(Drag) 혹은 클릭(Click)동작으로 대신합니다. 주로 음향을 조절할 때 쓰이기 때문에 Garage band 같은 작곡 응용프로그램에서 많이 쓰입니다.
슬라이더 (Slider)
리얼메타포를 사용하고 있는 또 다른 경우입니다. 콤보 상자의 경우 사용자가 입력 가능한 범위를 모르는 상태에서 입력하는 상황에 처할 수 있는데 반해, 슬라이더는 입력값이 제한되어 있음을 시각적으로 인지할 수 있습니다. 다시 말해 사용자가 부적절한 값을 입력할 가능성이 없기 때문에 상당히 직관적인 컨트롤이라고 할 수 있습니다.
입력 필드 (Text Input Field)
사용자가 키보드로 직접 텍스트를 입력하는 곳으로서 편집 필드 또는 텍스트 상자 등으로도 불립니다. 특정 항목의 속성을 입력할 때 외에도 검색, 정보 입력 등 상황에 따라 각기 다른 목적으로 사용됩니다. 여러 줄을 입력할 수 있을 때는 입력 영역(Text Area)이라고도 부릅니다.
드롭다운 메뉴 (Drop-down Menu)
풀다운 메뉴(Pull-down Menu)라고도 하며, 가장 전형적이고 어디에서나 볼 수 있는 메뉴 스타일입니다. 메뉴의 제목이 표시되어 있는 곳을 선택하면 메뉴가 아래로 펼쳐집니다. 메뉴 내의 항목으로 마우스의 포인터를 옮기면 그에 따라 각 항목이 반전되고, 클릭하면 그 항목이 선택 및 실행됩니다. 약 3년 전부터는 드롭다운 메뉴의 변형인 메가 메뉴(2편에서 소개할 예정)가 널리 활용되고 있습니다.
리본 메뉴 (Ribbon Menu)
기존에 있는 텍스트 기반의 드롭다운 메뉴를 보완하기 위해 MS에서 툴바에 탭을 결합한 형태를 선보입니다. MS Office 2007부터 도입되었는데요. 위 화면에서 알 수 있듯이 눈에 익숙한 버트콘의 조합으로만 이루어져 있거나, 버트콘으로만 식별하기 어려운 메뉴의 경우 버튼에 icon과 메뉴명을 함께 표기하고 있습니다. 드롭다운 메뉴에만 익숙했던 사용자는 이러한 리본 메뉴를 처음 접할 시에 매우 당황하지만 지속적인 사용 과정을 거침으로써 반복적이고 자주 접근하는 메뉴를 자연스럽게 사용할 수 있게 됩니다. 이처럼 시각적인 요소를 보완하여 드롭다운 메뉴보다 직접적인 장점이 있지만 모든 메뉴를 풀어놓기 때문에 복잡해보이는 단점도 있습니다. 결국 한글 오피스에서는 드롭다운 메뉴와 리본 메뉴를 모두 제공하는 다소 부자연스러운 해결책을 내놓고 있는데, 이처럼 리본 메뉴는 앞으로도 개선될 여지가 있다고 봅니다.
트리 메뉴 (Tree Menu)
목록의 보기 방식 중 하나로서 계층 구조를 표시하는 데 유용합니다. 윈도우 탐색기에서 대표적으로 쓰이고 있습니다.
GNB (Global Navigation Bar)
웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말합니다. 쉽게 말해 웹사이트에서 항상 표시되는 메뉴로서 탑 메뉴, 메인 메뉴라고도 불립니다. 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치하며 바(Bar), 탭(Tab), 드롭다운 메뉴 등의 메뉴 형태로 제공됩니다.
LNB (Local Navigation Bar)
서브 메뉴라고 불리며 웹사이트의 좌측에 주로 위치합니다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공됩니다.
대화 상자 (Dialog Box)
사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻기 위해 사용자가 하던 일을 잠시 멈추게 하는 창을 말합니다. 우리에게는 팝업(Pop-up)이라는 용어가 보다 익숙한데요, 대화 상자라고 부르는 이유는 말 그대로 컴퓨터와 사용자 사이에 대화를 제공하기 때문입니다. 대화 상자는 목적에 따라 다양한 형태로 호출됩니다. 크게 오류 등 공지가 필요한 경우, 사용자가 선택한 대상의 속성을 지정하는 경우, 작업의 진행 상황을 알리는 경우, 사용자가 선택한 사항을 재 확인하는 경우 등으로 나뉠 수 있습니다.
여기까지 기본적으로 알아야 할 컨트롤을 정리해보았습니다. 다음 포스팅에서는 앞서 정의한 컨트롤을 바탕으로 응용된 개념 및 새롭게 추가된 컨트롤에 대해 알아보도록 하겠습니다.
[참고: 안드로이드 디자인 가이드 http://klutzy.github.com/android-design-ko/]
[참고##가이드라인##]
[참고##UI 용어##]