2013. 2. 20. 00:44ㆍUI 가벼운 이야기
글을 시작하며...
이번 포스팅에서도 1탄-기본적인 전통 용어-에 이어 UI디테일 용어를 소개해보려고 합니다. 각 제조사의 가이드라인, 서적, 사전을 찾아보면 유사한 의미인데도 다르게 불리는 경우가 많습니다. 어떻게 불리느냐보다는 유사한 점과 다른 점을 비교 분석하며 자신만의 것으로 만드는 과정이 중요하다고 봅니다.
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄
▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄
1. 증분 탐색 (Incremental Search)
Incremental Search로 검색하면 '증분 탐색'이라고 번역이 되어 있는데 '순간 검색'이라고 용어가 통일되어 사용되는 추세입니다. 기본적인 의미는 '자동 완성'과 구별됩니다. 사용자가 특정 단어를 검색하기 위해 검색어를 입력할 때, 검색어를 예상해서 리스트로 제공하는 화면을 '자동 완성'이라고 한다면, 사용자가 목표 검색어를 입력하기 전에 검색어를 예상하고 제공하는 결과 화면은 '순간 검색'입니다. 주요 검색 엔진을 통해 해당 기능을 간단하게 비교해 보도록 하겠습니다.
구글의 Instant Search/Instant Previews
구글의 '순간 검색(Instant Search)'은 검색어를 입력하는 동시에 결과 화면이 나타납니다. 그렇기 때문에 타사의 방식처럼 검색어를 입력한 후 '엔터키' 혹은 '검색' 버튼을 누를 필요가 없습니다. 또한 각 검색 결과 옆에 위치한 Cue를 선택할 시 해당 웹페이지의 미리 보기 화면이 나타나는데 이를 '순간 미리보기(Instant Previews)'라고 합니다. 그리고 이 미리보기 화면에서 링크와 관련된 정보라고 판단되는 부분에 Highlight 표시(붉은색 박스)와 간단한 캡션이 제공됩니다. 구글이 야심차게 내놓은 순간 검색 서비스는 메인 화면을 되도록 빨리 벗어나게 하기 위한 구글의 의도가 잘 반영된 결과물이며, 실제로 검색에 소요되는 시간을 획기적으로 단축하는 데 기여했다고 보여집니다.
네이버의 정답형 자동 완성
반면 네이버는 '정답형 자동 완성'기능을 제공하고 있습니다. 검색어를 입력했을 때 자동 완성 영역에 추천 검색어 뿐만 아니라 관련 결과값이 함께 나타나도록 만든 것인데요. 자동 완성과 순간 검색의 장점(검색 결과가 실시간으로 제공됨)을 혼합한 하이드리드 형태라고 볼 수 있겠네요. 예를 들어 사용자가 검색 필드에 '부산광역시 지역번호'를 입력할 시 자동 완성 영역에 실제 지역번호인 '051'이 제공됩니다. '페이스북'을 입력하면 바로가기 URL이 리스트에 제공됩니다. 아래 화살표 키를 눌러 포커스를 맞춘 후 Enter 키를 누르니 페이스북 홈으로 바로 이동합니다. 마우스를 사용하지 않고 원하는 경로로 바로 이동할 수 있는 점이 편리하게 느껴졌습니다. 모든 검색어에 적용되는 것은 아니고 현재는 시험적으로 국가, 지역번호, 공공기관, 학교 등과 같은 공적인 기관 혹은 로또 당첨 번호에 우선 적용하고 있다고 합니다.
야후의 Search Direct
야후 역시 '서치 다이렉트'라는 검색 서비스를 제공하고 있습니다. 입력하지 않고 커서만 올려놓은 상태에서는 인기 검색어 랭킹이 나오다가(네이버에서는 최근 검색어가 보여지는데 반해), 입력하는 동시에 좌측에는 추천 검색어 영역, 우측에 현재 포커스된 추천 검색어에 대한 추천 결과가 나타납니다. 이 추천 결과에 외부 링크를 나열하기보다는 자체 컨텐츠에서 꺼낸 해답을 직접 제공하는 것이 서비스의 기본 아이디어입니다. 기존 결과 화면에서 일일이 링크를 클릭하여 결과를 얻는 것과는 다르게, 이용자가 원하는 정답을 직관적으로 제공한다는 점에서 타 검색엔진과는 차별화된 시도가 엿보입니다.
그 외에 뮤직 검색의 경우 아티스트, 앨범, 곡 3가지의 카테고리에 따른 추천 검색어를 표시합니다. 아티스트를 입력했지만 기대하지 않았던 관련 앨범 정보와 대표곡명을 함께 알려주기 때문에, 이용자 입장에서 얻는 컨텐츠를 생각한다면 역시 일반적인 자동 완성에서 한 단계 더 나아갔다고 볼 수 있습니다.
도서 검색의 경우 야후의 Search Direct와 유사한 형태로 제공합니다. 내가 찾는 책이 소설인지, 언제 출판되었는지, 가격이 얼마인지, 얼만큼 할인된 가격인지, 구입하면 얼만큼 적립되는지, 그리고 마지막으로 '장바구니 담기'버튼까지 제공되고 있네요.
이렇게 조금씩 다른 형태로 존재하며 각 검색 엔진마다 지향하는 바는 분명 조금씩 다릅니다. 하지만 크게 보았을 때 '얼마나 이용자가 원하는 정보를 빠른 시간 내에 정확히 안내할 것인가'라는 큰 공통된 줄기를 읽을 수 있습니다.
모바일에서의 순간 검색
사실 Incremental Search는 우리가 피처폰(Feature Phone)에서부터 사용했던 방식입니다. 주소록에서 이름을 입력하면 아래에 관련 결과가 리스트로 제공되고 선택하는 일련의 과정은 우리에게 매우 익숙합니다. 스마트폰에서도 웹 검색 뿐만 아니라 애플리케이션에 이런 순간 검색을 기본으로 탑재하고 있습니다.
2. 컨텍스트 메뉴(Context Menu)
사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것을 컨텍스트 메뉴라고 합니다.. '팝업 메뉴' 혹은 '바로 가기 메뉴'라고도 하며 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출됩니다. 단추가 하나 밖에 없는 마우스를 사용하는 경우 키보드 클릭 조합(Mac OS의 Ctrl+Click)을 사용할 수 있습니다. (피츠를 알려주는 퀴즈에서 이 컨텍스트 메뉴에 관해 Magic Pixel을 잘 활용한 예라고 소개한 바 있습니다.)
3.MRU(Most Recently Used) 리스트
사용자가 특정 종류의 행위를 했을 때 마지막 행위를 레지스트리에 기록해두는 것을 말합니다. 예를 들면, 인터넷 상에서 파일 다운로드 시 마지막으로 저장했던 폴더를 기본 폴더로 보여주거나 윈도우 시작 메뉴에서 특정 응용프로그램 리스트를 확장할 시 보여지는 최근 항목을 예로 들 수 있습니다.
4.어뎁티브 메뉴(Adaptive Menu)
MRU 리스트 개념을 메뉴에 도입한 방식으로, 사용자의 검색 히스토리나 빈도수가 높은 항목들을 메뉴에 우선적으로 나타나게 하는 것을 말합니다. 위 화면과 같이 자주 쓰는 메뉴만 보여지며 확장 버튼을 눌러 모든 메뉴를 확인할 수 있습니다. MS Office Tool 2000, 2003에서 기본 설정으로 제공되다가 리본 메뉴가 출현하면서 현재는 폐기되었습니다.
5.테어오프 메뉴(Tear-off Menu)
'떼어내다, 벗기다'의 의미를 가진 테어오프 메뉴는 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴입니다. 혹은 아래의 그림처럼 도구 툴의 가장자리에 있는 Cue를 선택할 시 해당 도구가 Window형식으로 분리됩니다.
6.메가메뉴(Mega Drop-down Menu)
얼마 전 pxd에서 포스팅한 Global Navigation Bar 디자인에서도 메가 메뉴에 대한 소개한 바가 있듯이, 메가 메뉴란 글로벌 내비게이션 바(GNB)에 위치한 특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴를 말합니다. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있으며 메가 메뉴 안에서도 상세 분류를 할 수 있습니다. 카테고리를 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며 주로 쇼핑몰 같은 대형 웹사이트에 적용됩니다.
요즘은 메가 메뉴에 텍스트와 이미지를 혼합하는 방식이 많이 사용되고 있습니다. 확실히 이미지를 적절한 상황에 잘 사용했을 때 메뉴를 인지하기가 한결 수월하게 느껴집니다. 또한 단순히 메뉴를 나열하는 데 그치지 않고 표시하는 정보도 유연해지고 있습니다. 위의 그림처럼 BMW는 자사의 모델명을 글로벌 내비게이션에 배치하고 메가 메뉴에 해당 모델 시리즈를 소개하고 있습니다. 기존 메뉴와 차별화된 점이 매우 신선했습니다. 그렇다면 메가 메뉴의 몸집이 이렇게 커지는 것이 좋은 일일까요? 메뉴에 마우스를 드래그 하는 동작으로 사용자가 기대하는 것은 그렇게 큰 역할은 아닐 것이라는 생각이 듭니다. 화면을 반 이상 가린다거나 너무 많은 정보를 표시하려고 한다면 답답하거나 거부감마저 들 수 있을 것입니다. 언제까지나 '사용자가 목표 메뉴를 찾아가기 쉽게 구성해야 한다'는 기본 목적에 충실해야 한다는 점을 염두해두어야 합니다.
7.컨텍스트-센서티브 내비게이션(Context-sensitive Navigation)
특정 상황에서만 제공되는 컨트롤입니다. 위에서 정의한 컨텍스트 메뉴와도 맥락이 유사한데, 팝업 형태가 아닌 다양한 방식으로 사용될 수 있다는 점이 다릅니다. 위의 화면처럼 사진 상단에 있는 메뉴 버튼은 평소에는 나타나지 않다가 마우스 포인터를 해당 사진 영역 안에 옮기는 순간 나타납니다. 리치 인터페이스 디자인 서적에서는 '마우스오버 노출도구' 라고도 정의하였는데 포함되는 개념입니다. 혹은 Gmail에서 삭제, 스팸처리 등의 메뉴는 메일 리스트를 선택(Check)하였을 시에만 제공되는데요, 이렇게 상황에 맞게 그때 그때 나타나는 메뉴를 부르는 용어입니다.
여기까지 주요 패턴을 알아보았는데요, 이어지는 포스팅에서도 몇 가지 패턴을 더 소개할 예정입니다.