gabiadesign | UI Pattern 용어 정리 #2
33250
single,single-post,postid-33250,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-3.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
designgabia_layout02

UI Pattern 용어 정리 #2

01_1 01_03

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

 

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

 

 

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

 

3_1

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

 

3_223_2

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

 

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

 


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

4_1

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

 

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

 

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

 

7_11

Empty Data
데이터가 없는 초기 상태를 표현하는 패턴입니다. 아무것도 없는 빈 화면보다는 “데이터가 없습니다”라고 표시해주거나 그보다는 “이 공간은 어떤 역할을 하는 화면이고 제대로 쓰려면 어떻게 해야 합니다”라고 친절히 말해주는 것이 더 유용합니다.

 

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

 

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

 

8

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

 

9_1  9

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

 

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

 

 

 

john

john / Gabia UI Designer