2024.03.19(화) 

UI 용어 정리 3편

화면설계 혹은 디자인 시스템 관리에 있어 도움이 될 수 있는 용어들을 공유드립니다.

UI 용어 관련 1편과 2편은 아래 링크 참고해 주세요. 


 UI 용어 1편

 UI 용어 2편

01. 버트콘/툴바(Butcon / Tool Bar) : 버트콘이라 부르며 아이콘 형태를 한 버튼을 의미합니다. 피그마, 포토샵, 일러스트 툴바가 대표적으로 많이 활용되고 있는데요, 버트콘에 마우스를 대면(호버_hover라고 부름) 안내 메시지가 나타나는데 이를 툴팁(Tooltip)이라고 합니다. 모바일 앱 경우 호버가 제한될 수 있어 주로 아이콘과 텍스트를 함께 사용합니다. 


02. 툴팁(Tool Tip) : 일러스트 프로그램은 툴팁을 애니메이션으로 보여주고 있어요. 이를 'content-rich tips'라고 부르고 있습니다.


01. 파비콘/패비콘(Favicon): 브라우저 탭에 표시되는 아이콘 (상세정보 : UI 용어 2편


02. 브라우저 타이틀: 파비콘(01) 옆 노출되는 텍스트를 칭합니다.

01. 메뉴(Menu): 특정 작업 필요시 나타나는 옵션 목록으로 위 그림과 같이 상단 혹은 하단에 위치할 수 있고, 왼쪽 
오른쪽 버튼으로 클릭할 수 있어 트리거 구조 및 형태가 다양하다는 것을 알 수 있습니다. 


02. 트리거(Trigger) :  메뉴 리스트가 표시될 수 있도록 표시되는 부분으로 메뉴버튼(햄버거 버튼, 벤토 버튼 혹은 
콤보 버튼 등)이 포함됩니다. 트리거 요소를 클릭시 메뉴 리스트가 노출됩니다. 


03. 서브메뉴 인디케이터 버튼(Submenu Indicator Button) :  클릭시 하위 리스트가 노출된다는 것을 알려주는 
버튼


04.  단축키 안내(Keyboard Shortcut) 


05.  구분선(Divider) :  섹션을 구분짓는 선


06.  서브메뉴(Submenu) :  하위 메뉴


07.  선택안내 표시 (Selected Item) :  해당 항목 선택시 나타나는 노출 화면 (복수, 단수 선택 가능)

01. 추가 옵션 메뉴(Overflow Menu): 추가 옵션 사항들을 모두 노출하는데에 있어 공간제약이 있는 경우 오버플로우 메뉴 혹은 팝 오버 메뉴를 사용합니다. 추가옵션 메뉴는 주로 간단한 텍스트 형식으로 노출 됩니다. 


02. 팝 오버 메뉴(Tab Tip / Popover): 사용자가 요소나 영역을 탭할 때 열리는 컨테이너로 상황에 맞는 정보나 옵션을 제공하며 라디오 버튼 및 어떤 부분을 설정하거나 선택에 필요한 부분들을 포함시킵니다. (예 : 기사 읽기 속도 조절, 자막 설정 등)

메뉴 기능 설정시 고려해볼 사항: 리스트 중복 선택 가능 여부 & 삭제하기(Delete)와 같은 주의가 필요한 부분에 대한 안내 사항 혹은 변화포인트(색상 혹은 폰트 굵기 변화 등)

일반적으로 많이 볼 수 있는  Vertical Menu 외에도 Pointing Menu, Tab 형태의 메뉴 등 여러가지 메뉴들이 
있습니다. 



위 내용 혹은 궁금한 부분이 있으시면 아래 '주제 제안하기'링크로 공유 주세요. 확인 후 공유들릴 수 있도록 하겠습니다. 다음 편에는 디자인 작업시 알아두면 좋은 DP, DPI, Pixel에 대한 내용으로 돌아올게요! 


관련 콘텐츠