태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'UI 용어'에 해당되는 글 4건

  1. 2013.06.03 UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄 (5) by yesong
  2. 2013.02.25 UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (1) by yesong
  3. 2013.02.20 UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (1) by yesong
  4. 2012.12.26 UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (14) by yesong
2013.06.03 00:02

UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄

글을 시작하며...
1,2,3탄에 이어 이번 포스팅에서는 모바일 UI패턴을 다룬 다양한 웹사이트에서 몇 가지 핵심적인 용어를 모아 정리해 보았습니다. 또한 각 OS의 고유 패턴 중 몇 가지 주요 네비게이션을 비교해보고자 합니다.



1. Splash Screen
프로그램을 로드하는 동안 표시되는 이미지를 말합니다. 평균 2~3초간 지속되는 시간동안 애플리케이션의 로고와 함께 앱에 대해 간략한 소개를 하거나, 로딩 진행률을 애니메이션으로 표시하기도 합니다. Splash Screen에 사용되는 로고나 텍스처를 통해 애플리케이션의 아이덴티티를 표현할 수 있어야 합니다.



2. Coach Marks / Empty Data / Walkthroughs
위의 패턴들은 도움말을 제공할 수 있는 패턴입니다. '이 앱이 얼마나 친절한가?'를 판단할 수 있는 하나의 요소가 될 수 있는데요. 초기 진입 시에만 볼 수 있도록 설계하고 다음 진입 부터는 '설정'같은 메뉴 안에 두어 언제든 도움말을 호출할 수 있도록 합니다.

2.1 Empty Data
데이터가 없는 초기 상태를 표현하는 패턴입니다. 가끔 클라이언트에게 빈 화면에 대한 재미있는 아이데이션을 요청받을 때가 있습니다. 그만큼 빈 화면에 대한 처리는 중요한 요소입니다. 아무것도 없는 빈 화면보다는 "데이터가 없습니다"라고 표시해주거나 그보다는 "이 공간은 어떤 역할을 하는 화면이고 제대로 쓰려면 어떻게 해야 합니다"라고 친절히 말해주는 것이 더 유용합니다.


2.2 Coach Marks
앱을 처음 진입하는 사용자를 위해 간단한 도움말을 제공하는 패턴입니다. 홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시하는 형태입니다.


2.3 Walkthroughs
Coach Mark보다 상세한 도움말을 뜻합니다. Wizard와 같이 앱 초기 진입 시 몇 단계로 걸쳐 상세한 도움말을 제공합니다. 긴 프로세스를 거치고 싶지 않는 사용자를 위해 본 단계를 건너뛰고 바로 홈 화면으로 진입할 수 있는 경로를 주는 것이 중요합니다.



3. Launcher (=Dashboard, Springboards)
응용 프로그램 혹은 앱의 경우 메뉴의 진입점을 아이콘 등으로 표시하는 방식을 뜻합니다. 기능 혹은 카테고리로 메뉴를 분류하며 새로운 컨텐츠를 강조합니다. 스마트폰 초창기 시절 모바일 앱의 메인 화면에서 많이 쓰다가 현재는 Drawer와 같은 패턴을 많이 쓰는 추세입니다. Hub와 같은 역할을 하여 메뉴를 한 눈에 볼 수 있고 쉽게 제어할 수 있습니다. 하지만 모든 메뉴가 동일한 우선 순위를 가진 것처럼 느껴질 수 있으며 메뉴의 개수가 많을 경우 한 화면 안에 표시할 수 없는 단점이 있습니다.



4. Drawer (=Sliding Menu, Side Bar)
평상시에는 닫혔다가 당길 때 열리는 서랍과 같다고 'Drawer'라고 부르기도 하며 슬라이딩되면서 나오는 모션에서 착안하여 'Sliding Menu'라고도 불립니다. 일반적으로 앱의 최상위 메뉴를 표시하며, 최근 활동이나 알림 등 각 앱의 부가적인 기능을 모아볼 수 있는 공간으로 쓰입니다. Tab Bar의 경우 일반적으로 메뉴가 5개가 넘어가는 경우 More메뉴 안에 숨겨야 하는 한계가 있습니다. Launcher 역시 터치 영역을 확보하기 위해서 가급적 9개 이상의 메뉴를 표시하지 않습니다. 이에 반해 Drawer 패턴의 가장 큰 장점은 리스트 기반의 다양한 메뉴를 표시할 수 있다는 점입니다.




5. Swipe Paging / Swipe View (Android) / Flip View (Windows8)
최상위 메뉴 혹은 상세 화면을 좌우로 Swipe하여 항목을 이동한다는 큰 개념은 같지만 이 패턴에 관한 정의가 각 OS에 따라 조금씩 다릅니다.

5.1 Swipe Paging (=Filmstrip)
최상위 레벨의 페이지를 나란히 정렬하는 방식을 말합니다. 대표적으로 iPhone의 날씨앱을 예로 들 수 있는데요. 한 번에 한 페이지씩 볼 수 있으며 사용자는 Swipe동작으로 페이지를 이동합니다. 이 패턴을 사용할 시 중요한 점은 현재 페이지의 위치 정보를 주어야 한다는 것인데요. 대표적으로 Dot Indicator가 쓰이고 있습니다. 하지만 페이지 확장성이 제한적이라는 단점이 있습니다. 아래 오른쪽 화면과 같이 페이지가 많아질수록 사용성은 떨어지게 됩니다.


5.2 Swipe View
Android 표준 가이드에서는 Swipe View라고 정의되어 있으며 두 가지 방식으로 정의하고 있습니다. 상세 화면간 이동을 위해 사용할 것을 제안하고 있으며 또 한가지는 Tab 간 이동 시에 사용됩니다. 이는 요즘 모바일 웹에서 사용되는 패턴과 동일한데요. 아래 그림과 같이 Tab을 터치하여 이동하는 방법 외에 Swipe 동작을 통해 이동할 수 있도록 합니다.


5.3 Flip View
Windows8 표준 가이드에서는 FlipView라고 부르는데, 아래 그림과 같이 상세 화면에서 사용하며 최상위 화면에서는 지양할 것을 권하고 있습니다. 항목을 전환하는 반복적인 동작이 사용자에게 짜증을 일으킬 수 있기 때문입니다.




6. Split View (iOS) / Multi-pane Layout (Android)
효율적인 공간 활용을 위해 태블릿에 탑재된 기본 패턴입니다. 폰에서 목록(List View)과 그에 따른 상세 화면(Detail View)을 각각 따로 제공하는데요, 넓은 공간의 특성 상, 태블릿에서는 두 화면을 결합하여 나란히 표시합니다. 기본적인 원칙은 왼쪽 창에는 목록을 제공하며 오른쪽 창에는 현재 선택된 항목에 대한 상세 화면을 표시하는 것입니다. 이 때, 현재 선택된 항목에 Highlight 표시를 하여 오른쪽 창과의 관계를 인지할 수 있도록 해야 합니다.




시리즈를 마치며...
이번 블로깅을 통해 소개했던 UI 패턴은 극히 일부에 지나지 않습니다. 셀 수 없을 만큼 다양한 패턴이 누군가에 의해 책으로, 혹은 온라인 라이브러리에 저장되어 공유되고 있는데요. 산재된 정보를 정리하고 개념를 비교해보는 과정에서 새로운 관점을 얻을 수 있는 기회였습니다. UX를 이제 막 시작하는 분들께 작은 도움이 되었길 바라면서 글을 마칩니다.
[참고##UI 용어##] [참고##가이드라인##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 5
Ad Test...
2013.02.25 00:32

UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄

1탄 기본적인 전통 UI 용어2탄 최근 웹에서 많이 사용되는 UI 용어에 이어, 이번에도 웹과 앱에서 많이 사용하는 UI 용어를 좀 더 알아보도록 하겠습니다.



1. 라이트 박스(Light Box) 
팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라고 할 수 있습니다. 일반적인 팝업과 다른 점은, 박스를 해제하지 않고는 배경의 요소와 인터랙션 할 수 없다는 점입니다.



2. 토스트 팝업(Toast Pop-up)
마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름입니다. 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모바일의 경우 화면의 중앙에 주로 위치하거나, 최상단에 나오는 경우는 '토스트 노티피케이션(Toast Notification)'이라고 불립니다. 화면 중앙에서 무언가를 알려줄 경우, 작업자의 현재 작업을 너무 많이 방해하게 되고, 그렇다고 PC 하단의 태스크 바나 핸드폰 상단의 노티피케이션 바에서만 표시될 경우 너무 눈에 띄지 않는 단점을 극복하기 위하여 중간적인 형태를 띠고 있는 알림이라 많이 선호되고 있습니다.

Stackoverflow에 따르면 이 용어는 10여년 전에 마이크로소프트 메신저 개발자들이 이 기능을 구현하면서 만든 용어라고 합니다. 영문 위키피디아에 등록된 것은 2005년이니까 8년전이고요, 마이크로소프트 개발자 가이드문서, 안드로이드 개발자 가이드 문서등 대부분의 공식 문서에서 이미 사용하고 있는 단어입니다. 국내에는 아직 알아듣는 사람이 거의 없다고 보셔도 됩니다. 다만 영문 검색해 보면 100만건 이상의 문서가 있고요, 마이크로소프트 개발자 가이드, 안드로이드 개발자 가이드 등 거의 모든 개발자 가이드북에서 공식적으로 사용하는 용어이므로, 개발자분들은 아마 다 아실 듯 합니다.
위키피디아: http://en.wikipedia.org/wiki/Toast_(computing)
안드로이드: http://developer.android.com/guide/topics/ui/notifiers/toasts.html
마이크로소프트: http://msdn.microsoft.com/en-us/library/windows/apps/hh779727.aspx



3. 프로그래스 인디케이터(Progress Indicator)
컨텐츠가 로딩되고 있음을 시각적으로 알리는 컨트롤입니다. 크게 로딩이 완료되는 시기를 예측하기 어려운(Indeterminate), 예측이 가능한(Determinate) 두 타입으로 나눌 수 있습니다. 

트로버(Throbber)
로딩이 완료되는 시기를 예측하기 어려운 경우 제공되는 컨트롤입니다. 개별 애플리케이션이 로딩되는 경우, 주로 해당 소프트웨어나 웹브라우저의 메뉴바 혹은 툴바에 위치하는데 '트로버(Throbber, 고동치는 것)' 또는 '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'라고 부릅니다. 



아워글래스(Hourglass)
시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것을 흔히 경험할 수 있습니다. 프로세스가 끝날 때까지 어떤 것도 클릭할 수 없다는 상황을 알립니다. '아워글래스(Hourglass, 1 시간짜리 모래시계)'라고 하며 Mac에서 사용되는 무지개 빛깔의 로딩 컨트롤의 경우 '스피닝 핀휠(Spinning Pinwheel)'이라고도 부릅니다.


프로그래스바(Progress Bar)
반면, 로딩이 완료되는 시기를 예상할 수 있을 때는 아래와 같은 타입의 인디케이터를 제공합니다. 현재까지 진행된 정도와 남은 양을 모두 확인할 수 있습니다.

프로그래스 바는 아래와 같이 로딩이 완료됨을 예측할 수 없을 때도 사용됩니다. 패턴이 애니메이팅되면서 Throbber와 마찬가지로 무엇이 진행되고 있음을 사용자에게 알립니다.

아래 그림처럼 상황에 따라 전환될 수 있으며 로딩이 완료된 후에는 반드시 완료되었음을 시각적으로 표시해야 합니다.

그 외 크롬의 경우 하단 패널에 파이 형태로 다운로드 상태를 표시하거나 Task Bar에 직접 다운로드 상태를 표시하기도 합니다.



4. 레이블(Label) / 플레이스홀더(Placeholder) 
두 컨트롤은 아래 그림에서 보면 알 수 있듯이 사용자에게 무엇을 입력해야 하는 지를 알려주는 역할을 합니다. '레이블(Label)'은 보통 텍스트 필드 좌측에 단어(주로 간략한 명사)로 제공됩니다. '플레이스홀더(Placeholder)'는 텍스트 필드 안에 새겨져 있는 입력 도우미로서 짧은 구문 형식으로 제공되며 '인풋 프롬프트(Input Prompt)'라고도 불립니다. 플레이스홀더는 진입 시에 제공되지만 문자를 입력하는 순간 사라집니다. 하지만 꽤 많은 경우는 첫 글자를 입력하는 순간이 아니라, 마우스로 클릭만 해도 (즉 포커스가 간 순간) 사라지는 형태를 취하고 있는데, 이 경우 사용자가 레이블을 읽지 않고 무심코 클릭하는 경우 무엇을 입력해야 할 지 난감한 상황이 올 수 있으므로 설계 시 고려해야 합니다. 또한 입력했을 때만 지워지고 입력을 지우면 다시 나타나도록 하여 길을 잃지 않도록 끝까지 안내하는 것이 중요합니다. 

HTML5 표준 가이드에 따르면 플레이스홀더 영역에 들어가야 할 문구는 레이블과는 성격이 달라야 한다고 규정하고 있습니다. 위의 그림처럼 레이블이 '무엇'을 입력해야 할 지를 알려준다면 플레이스홀더 자리에는 '어떻게' 입력해야 하는 지를 예시로 보여주는 것과 같습니다. 하지만 요즘에는 플레이스홀더 자리에 힌트 대신 레이블이 대신 들어가는 방식으로 많이 쓰이고 있는데요(아래 화면 참고), 레이블을 위한 공간이 별도로 필요하지 않으므로 효율적인 공간 활용을 위해 널리 사용되고 있습니다.
Input Box 내의 레이블과 HTML5의 플레이스홀더 사용에 관해 명쾌하게 잘 정리한 블로그(Labels in input fields aren't such a good idea by Laura Kalbag)를 참고하세요. 



5. 인트리깅 브랜치 (Intriguing Branches)
기대하지 않은 곳에 이용자가 관심 있어할 만한 키워드를 하이퍼링크 형태로 제공하는 것을 뜻합니다. 대표적인 예로 글의 본문에 특정 단어 혹은 구절에 링크가 있는 경우가 있으며, 좀 더 구조화된 방법으로 글 작성시 첨부하는 태그나 관련 제품 리스트 등을 나열하는 형태로 제공할 수 있는데요. 때론 글에 관련된 정보를 제공하기 위한 목적으로 사용되고, 사실 그보다 더 자주 상업적인 목적으로 사용됩니다. 기본적으로 인트리깅 브랜치는 이용자의 주의를 끌기 위해 존재하며 잘 사용되었을 때는 사이트에 오래 지속하는 효과를 가져다줍니다.적극적으로 링크를 눌러보는 호기심 많은 이용자 외에도 목적을 달성하고 빨리 완료하고자 하는 사람에게는 스쳐 지나갈 수 있게 설계하는 것이 무엇보다 중요합니다. 또한 인트리깅 브랜치로 관심을 끌려면 무엇을 링크할 것인지, 어떻게 관심을 끌 것인지를 전략적으로 생각해야 합니다. 이를 위해서 Target Audience가 무엇을 관심있어하고 그렇지 않은 지 파악하는 것이 중요하다고 할 수 있습니다. 네이밍도 인트리깅 브랜치에서 매우 중요한 역할을 합니다. Designing Interface 서적에서는 'Help'보다는 'Learn More'같은, 보다 친근하고 본능적인 호기심을 자극하는 언어를 사용하기를 권장하고 있습니다. 마지막으로 이용자는 링크를 클릭했다가도 언제든 처음에 보고 있던 페이지로 쉽게 돌아갈 수 있는 것을 원합니다. 브라우저에서는 '뒤로가기 '버튼을 통해 제공하거나 팝업의 경우 '닫기' 버튼을 제공하며 새로운 브라우저 창을 띄워주는 것도 좋은 방법입니다.



여기까지 주요 패턴을 알아보았는데요, 다음 포스팅에서는 모바일에서 쓰이는 컨트롤에 대해 정리해보려고 합니다. Apple, Android, MS 등 각 제조사에서 제공하는 가이드라인을 비교하면 분류하는 기준도 조금씩 다른데요, 이러한 점을 짚어보고 정의해보도록 하겠습니다.

[참고##UI 용어##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 1
Ad Test...
2013.02.20 00:44

UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄

글을 시작하며...
이번 포스팅에서도 1탄-기본적인 전통 용어-에 이어 UI디테일 용어를 소개해보려고 합니다. 각 제조사의 가이드라인, 서적, 사전을 찾아보면 유사한 의미인데도 다르게 불리는 경우가 많습니다. 어떻게 불리느냐보다는 유사한 점과 다른 점을 비교 분석하며 자신만의 것으로 만드는 과정이 중요하다고 봅니다.



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)하였을 시에만 제공되는데요, 이렇게 상황에 맞게 그때 그때 나타나는 메뉴를 부르는 용어입니다.



여기까지 주요 패턴을 알아보았는데요, 이어지는 포스팅에서도 몇 가지 패턴을 더 소개할 예정입니다. 

 [참고]
 About Face http://books.google.co.kr/books/about/About_Face_3.html?id=9F7gaZKd2rYC&redir_esc=y
 Designing Interface http://designinginterfaces.com/patterns/
 안드로이드 디자인 가이드 http://klutzy.github.com/android-design-ko/
 99 Designs http://wsblog.99designs.com/designer-blog/2012/06/20/7-user-interface-design-trends-you-need-to-know-about/
[참고##UI 용어##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 1
Ad Test...
2012.12.26 07:30

UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄

그리 오래 전은 아니지만 UX라는 분야에 처음 입성했을 때, 머리 속에 가득 찬 아이디어를 우리가 흔히 부르는 Wireframe에 옮기는 데 애를 먹었던 기억이 있습니다. 그림은 대충 그려지는 데 정작 내가 그리고 있는 것이 무엇인지 '정의'를 내릴 수가 없었던 탓이지요. 이처럼 기획자라면 누구나 UI규격서를 설계해 본 적이 있을 것입니다. 이것은 UI기획자와 디자이너 간, 혹은 UI기획자와 개발자 간의 일종의 약속이자 물리적인 결과물입니다. 그렇기 때문에 모든 약속은 명확한 정의가 바탕이 되어야 합니다. 그래야 작업자 간의 원활한 커뮤니케이션을 이끌 수 있으니까요.

이번 포스팅에서는 원활한 커뮤니케이션을 위한 기본적인 조건인 UI컴포넌트 용어를 정리해보려고 합니다. 시리즈의 첫 번째로 가장 기본적인 전통 용어를 정리해보았습니다. (사전에 기재되었거나 각 제조사에서 공식적으로 쓰이고 있는 고유 단어를 기준으로 용어를 선별하였으며, 앨런 쿠퍼의 About Face 서적을 참고로 작성하였습니다.)





드롭다운 리스트 (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 용어##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 14
Ad Test...