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

2013. 2. 25. 00:32ㆍUI 가벼운 이야기
알 수 없는 사용자

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 용어##]

관련글

댓글 2

티스토리툴바