UI 기획 용어

드롭다운 리스트 (Drop-down List)

콤보 박스 (Combo Box)
드롭다운 리스트와 입력 필드 기능을 결합

라디오 버튼 (Radio Button)

토글 (Toggle Button/Switch)

툴팁 (Tooltip)

스피너 (Spinner)

다이얼 (Dial)

슬라이더 (Slider)

입력 필드 (Text Input Field)

드롭다운 메뉴 (Drop-down Menu)

리본 메뉴 (Ribbon Menu)

트리 메뉴 (Tree Menu)

GNB (Global Navigation Bar)

LNB (Local Navigation Bar)

대화 상자 (Dialog Box)

1. 라이트 박스(Light Box)
팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데

2. 토스트 팝업(Toast Pop-up)
마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름입니다. 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모바일의 경우 화면의 중앙에 주로 위치하거나, 최상단에 나오는 경우는 '토스트 노티피케이션(Toast Notification)'

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

트로버(Throbber)
로딩이 완료되는 시기를 예측하기 어려운 경우 제공되는 컨트롤

'트로버(Throbber, 고동치는 것)' 또는 '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'

아워글래스(Hourglass)
시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것

프로그래스바(Progress Bar)
반면, 로딩이 완료되는 시기를 예상할 수 있을 때

4. 레이블(Label) / 플레이스홀더(Placeholder)
두 컨트롤은 아래 그림에서 보면 알 수 있듯이 사용자에게 무엇을 입력해야 하는 지를 알려주는 역할

'레이블(Label)'은 보통 텍스트 필드 좌측에 단어(주로 간략한 명사)로 제공됩니다. '플레이스홀더(Placeholder)'는 텍스트 필드 안에 새겨져 있는 입력 도우미로서 짧은 구문 형식으로 제공되며 '인풋 프롬프트(Input Prompt)'라고도 불립니다. 플레이스홀더는 진입 시에 제공되지만 문자를 입력하는 순간 사라집니다.

레이블이 '무엇'을 입력해야 할 지를 알려준다면 플레이스홀더 자리에는 '어떻게' 입력해야 하는 지

5. 인트리깅 브랜치 (Intriguing Branches)

이용자가 관심 있어할 만한 키워드를 하이퍼링크 형태로 제공하는 것

글의 본문에 특정 단어 혹은 구절에 링크가 있는 경우

1. 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와 같은 역할을 하여 메뉴를 한 눈에 볼 수 있고 쉽게 제어할 수 있습니다. 하지만 모든 메뉴가 동일한 우선 순위를 가진 것처럼 느껴질 수 있으며 메뉴의 개수가 많을 경우 한 화면 안에 표시할 수 없는 단점이 있습니다.