UI 컴포넌트 용어

UI 기획자와 디자이너, 개발자가 협업할 때는 화면 요소를 정확하게 지칭하는 공통 언어가 필요하다. 각자 부르는 이름이 달라지면 커뮤니케이션이 무너지고 결과물의 품질도 흔들린다. 앨런 쿠퍼의 About Face를 비롯해 제조사 공식 가이드라인에서 정의한 표준 용어를 익히는 것이 UX 신입 디자이너의 첫걸음이다.

입력 컨트롤 영역에서는 드롭다운 리스트(목록에서 하나를 선택), 콤보 상자(직접 입력도 가능한 드롭다운), 라디오 버튼(단일 선택), 체크 박스(다중 선택), 버트콘(버튼과 아이콘의 결합), 스피너(숫자를 증감하는 컨트롤), 다이얼/놉(회전 메타포로 값을 조절), 슬라이더(범위가 정해진 직관적 입력), 텍스트 입력 필드/텍스트 영역이 핵심 요소다. 툴팁은 버트콘처럼 아이콘만으로 식별이 어려운 요소에 말풍선 형태로 설명을 제공한다.

내비게이션 영역에서는 드롭다운 메뉴(풀다운 메뉴), 리본 메뉴(MS Office 2007에서 도입된 탭+툴바 결합 형태), 트리 메뉴(계층 구조 표시), GNB(Global Navigation Bar, 사이트 전체에 고정되는 최상위 메뉴), LNB(Local Navigation Bar, 진입 메뉴에 따라 변경되는 서브 메뉴)로 구분된다. 대화 상자(Dialog Box)는 사용자 확인·공지·속성 설정·진행 상황 표시 등 여러 목적으로 호출되는 인터랙션 요소다.

웹과 앱에서 자주 쓰이는 추가 용어로는 라이트 박스(Light Box)와 토스트 팝업(Toast Pop-up)이 있다. 라이트 박스는 팝업 노출 시 배경 화면이 어두워지며 사용자의 집중을 유도하는 Modal Dialog 방식으로, 해제 전까지 배경 요소와 상호작용할 수 없다. 토스트 팝업은 토스터에서 빵이 튀어오르는 형태에서 이름이 유래한 알림 패턴으로, PC에서는 화면 우측 하단, 모바일에서는 중앙이나 최상단에 짧은 시간 표시 후 사라진다. 현재 작업을 크게 방해하지 않으면서도 눈에 띄는 중간 강도의 알림 방식으로 광범위하게 채택되었다.

검색 인터랙션 용어도 중요하다. 순간 검색(Incremental Search)은 사용자가 검색어를 입력하기 전부터 결과를 실시간으로 보여주는 방식으로, 입력 후 엔터를 누르는 기존 방식보다 검색 시간을 단축한다. 구글의 Instant Search, 야후의 Search Direct가 대표 사례다. 자동 완성과의 차이는 추천 검색어 제안(자동 완성) vs. 실제 결과 화면 표시(순간 검색)에 있다. 컨텍스트 메뉴(Context Menu)는 선택한 항목에 관련된 메뉴를 팝업으로 제공하는 것으로 마우스 우클릭으로 호출된다. MRU(Most Recently Used) 리스트는 사용자의 마지막 행위를 기록해 기본값으로 제안하는 패턴이다. 어댑티브 메뉴(Adaptive Menu)는 MRU 개념을 메뉴에 적용해 자주 쓰는 항목을 상위에 노출하는 방식이다. 메가메뉴(Mega Drop-down Menu)는 GNB 항목에 마우스 오버 시 대형 드롭다운으로 많은 하위 메뉴를 한 번에 보여주는 방식으로 주로 대형 쇼핑몰에 사용된다.

모바일 앱 UI 패턴으로는 스플래시 스크린(Splash Screen), 코치 마크(Coach Marks), 빈 데이터 상태(Empty Data), 워크스루(Walkthrough)가 주요 용어다. 스플래시 스크린은 앱 로딩 중 2~3초간 표시되는 브랜드 이미지로 앱 아이덴티티를 전달한다. 코치 마크는 초기 진입 시 UI 사용 방법을 안내하는 오버레이 패턴이며, Empty Data는 데이터가 없는 초기 상태를 안내하는 화면이다. 각 OS의 고유 내비게이션 패턴도 구분해 이해해야 한다.

핵심 내용

  • UI 규격서는 기획자-디자이너-개발자 간 약속이므로 용어의 정확한 정의가 전제
  • 입력 컨트롤: 드롭다운 리스트, 콤보 상자, 라디오 버튼, 체크박스, 스피너, 슬라이더, 텍스트 필드
  • 내비게이션: GNB(전역), LNB(로컬), 드롭다운/리본/트리 메뉴로 구분
  • 슬라이더는 입력 범위를 시각적으로 제한해 오입력 방지가 가능한 직관적 컨트롤
  • 리본 메뉴는 시각적 직접성이 장점이나 복잡해 보이는 단점이 있어 지속 개선 중
  • 라이트 박스: Modal Dialog 패턴, 배경 딤처리로 집중 유도, 해제 전 배경 상호작용 불가
  • 토스트 팝업: 짧게 나타났다 사라지는 비모달 알림, MS 메신저 개발자들이 명명
  • 모바일 패턴: Splash Screen, Coach Marks, Empty Data, Walkthrough가 주요 용어
  • 순간 검색(Incremental Search): 입력 중 실시간으로 결과를 보여주는 검색 패턴
  • 컨텍스트 메뉴: 선택 항목에 맞는 팝업 메뉴(우클릭), 상황 맥락에 따른 빠른 접근
  • 어댑티브 메뉴: 사용 빈도 높은 항목을 상위에 배치하는 적응형 메뉴
  • 메가메뉴: GNB에서 대형 드롭다운으로 다수 하위 메뉴를 한 번에 제공하는 패턴

관련 개념

  • 디자인 시스템 — UI 컴포넌트 용어 체계는 디자인 시스템의 언어적 기반이 됨
  • UX와 UI의 차이 — UI 컴포넌트는 UX 설계를 화면 위에 구현하는 수단

출처

최종 업데이트: 2026-04-06 | 출처 4개