[UI/UX]용어 정리

개발일기·2022년 3월 1일

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

햄버거 메뉴(hamburger menu)(drawer menu)

도시락 메뉴(도시락 버튼)

케밥메뉴
미트볼메뉴
메가메뉴

GNB (Global Navigation Bar)
탑 메뉴, 메인 메뉴라고도 불리며 주로 웹사이트의 상단 혹은 좌측에 위치해있고
바(Bar), 탭(Tab), 드롭다운 메뉴 등의 형태로 제공된다.

LNB (Local Navigation Bar)
서브 메뉴라고 불리며 웹사이트의 좌측에 위치하는 메뉴.

대화 상자 (Dialog Box)
사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻는 창이다.
프로그램을 종료하기 전이나 저장하기 전에 많이 쓰인다.

증분 탐색 (Incremental Search)
순간검색이라고 불리며 구글 검색에서 많이 쓰인다.
자동완성하고는 차이가 있다.

컨텍스트 메뉴(Context Menu)
팝업메뉴, 바로가기 메뉴라고 불리며 마우스 오른쪽 버튼을 누를 시 호출되는 메뉴다.

어뎁티브 메뉴(Adaptive Menu)
자주 사용하거나 빈도수가 높은 항목들을 메뉴로 모아둔 것.
MS-Office에서 사용됐었다.

테어오프 메뉴(Tear-off Menu)
메뉴 바를 드래그하여 임의의 장소에 배치하거나 창 형태로 분리 되는 메뉴
포토샵에서 많이 사용된다.

메가메뉴(Mega Drop-down Menu)
특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴. 메뉴 안에서 카테고리별로 분류하고 그 안에서도 상세 분류를 표시할 수 있으며 쇼핑몰이나 마켓 사이트에서 자주 사용된다.

MRU(Most Recently Used) 리스트
가장 최근에 한 작업목록을 레지스트리에 저장해두고 따로 보여주는 리스트다.
윈도우나 엑셀등에서 가장 최근에 사용한항목 리스트가 그 예시이다.

컨텍스트-센서티브 내비게이션(Context-sensitive Navigation)
특정 상황에서만 나타나는 메뉴. 평소에는 숨겨져 있다 마우스 포인터를 해당 이미지로 옮기는 순간에 표시가 된다.

라이트 박스(Light Box)
팝업이 뜨는 동시에 주변 화면이 어두워지거나 밝아지는 박스, 라이트 박스 처리된 영역은 컨트롤이 불가능하고 사용자가 팝업에 집중하도록 시각적인 알림이 부가된다. 일반적인 팝업과 차이는 박스를 닫지않고 배경을 클릭하거나 컨트롤을 할 수 없다.

토스트 팝업(Toast Pop-up)
주로 모니터의 우측 하단에서 몇 초간 나타났다가(예 : 윈도우 알림) 사라지며 모바일에서는 화면의 중앙에 주로 위치하는데(시스템 알림), 최상단에 위치할 경우 '토스트 노티피케이션(Toast Notification)'으로 불린다.

  • 프로그래스 인디케이터(Progress Indicator)
    컨텐츠가 로딩중임을 알리는 컨트롤. 크게 로딩이 완료되는 시기를 예측불가(Indeterminate)타입과, 예측가능(Determinate)타입으로 나뉘어진다.

1) 트로버(Throbber)
로딩이 완료되는 시기 예측불가에 제공되는 컨트롤. 주로 '로딩중입니다'라는 안내멘트와 함께 '트로버(Throbber, 고동치는 것)', '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'형태로 표시된다.

2) 아워글래스(Hourglass)
시스템 전체가 로딩 중일때 마우스포인터가 바뀌면서 아무것도 클릭할 수 없는 상황의 알림. '아워글래스(Hourglass, 1 시간짜리 모래시계)'라고 하며 Mac에서는 '스피닝 핀휠(Spinning Pinwheel)'이라는 무지개 빛깔의 로딩 컨트롤이 사용된다.

3) 프로그래스바(Progress Bar)
로딩이 완료되는 시기를 예측가능할 때 사용하는 컨트롤.
바(Bar)형태로 제공되며, 현재까지 진행된 정도와 남은 양을 모두 확인할 수 있습니다.
예측불가일때도 사용이 가능한데 바의 패턴이 애니메이션화가 되거나 가려지면서 진행 정도는 알수 없게 표시가 된다.

스플래시 스크린(Splash Screen, Launch screen)
어플리케이션이 준비,로딩하는 동안 표시되는 이미지 및 화면을 말한다. 로딩하는 대기시간동안 애플리케이션의 로고를 보여주거나, 로딩 진행률을 애니메이션으로 표시한다.

Empty Data
데이터가 없을때의 초기 상태를 보여주는 화면. 일종의 예외페이지로 "데이터가 없습니다"라고 표시된 화면이나 초기화면을 제공한다.

Coach Marks
앱에 최초 실행시 반투명한 배경에 도움말이 표시되는 화면. 각 메뉴에 대한 도움말이 한 번에 표시하는 형태

Walkthroughs
앱을 최초 실행시 나타나는 상세한 도움말 (예: 듀토리얼). 기본 슬라이드 형태의 화면을 몇 단계에 걸쳐 상세한 도움말을 제공하며, 도움말을 이용하고 싶지 않은 사용자에게 건너뛰기와 같은 앱으로 바로 진입할 수 있는 버튼을 제공한다.

참고 : https://story.pxd.co.kr/616

Floating Menus (플로팅 메뉴)
스크롤 이동할 때 함께 따라다니는 메뉴, 평소에는 하나의 메뉴나 아이콘형태만 노출되어 있거나 숨겨져 있는 상태로 있다 클릭이나 마우스 호버 시, 여러 메뉴가 팝업형태로 띄우는형식으로 노출된다.

참고 : https://yozm.wishket.com/magazine/detail/972/
https://demun.tistory.com/1909

0개의 댓글