UI 컴포넌트 이름, 헷갈리는 요소의 표준 명칭 찾기
UI 컴포넌트 이름은 W3C ARIA APG, 구글 머티리얼, 애플 HIG 세 공식 문서가 기준이다. 토스트와 스낵바, 아코디언과 디스클로저처럼 자주 뒤섞이는 짝을 출처별로 구분하고 이름 찾는 순서를 정리했다.
UI 컴포넌트 이름이 헷갈릴 때는 세 곳의 공식 문서를 기준으로 삼으면 된다. 웹 위젯은 W3C의 ARIA Authoring Practices Guide(APG), 안드로이드와 웹은 구글 머티리얼 디자인, iOS와 macOS는 애플 휴먼 인터페이스 가이드라인(HIG)이다. 이 글은 웹·앱 개발자가 자주 마주치는 요소의 표준 이름과, 토스트와 스낵바처럼 자주 뒤섞여 쓰이는 짝을 이 세 출처 기준으로 짚는다. 특정 UI 라이브러리(MUI·Ant Design 등)의 컴포넌트명이 아니라 표준과 디자인 시스템 용어가 기준이며, 2026년 7월 기준 APG 문서에는 서른 개 안팎의 위젯 패턴이 정리돼 있다.
이름을 정확히 부르면 뭐가 달라지나
답부터 말하면 커뮤니케이션 비용과 접근성에서 갈린다. 디자이너가 스펙에 '디스클로저'라고 적어 둔 요소를 개발자가 '아코디언'으로 알아들으면, 어긋난 채로 구현이 굴러간다. 문서 검색도 마찬가지다. '밑에서 올라오는 창'으로는 아무것도 못 찾지만 bottom sheet나 action sheet로 검색하면 공식 가이드가 바로 나온다.
더 실무적인 이유는 ARIA 역할(role, 요소가 스크린 리더에 어떤 위젯으로 읽힐지 지정하는 값) 때문이다. APG는 각 패턴을 특정 role과 속성에 대응시킨다. 예를 들어 툴팁은 role 값으로 tooltip, 모달 창은 dialog를 쓰고, 아코디언과 디스클로저의 열림 상태는 aria-expanded 속성으로 표시한다. 요소를 잘못 부르면 잘못된 role을 붙이게 되고, 스크린 리더 사용자에게 엉뚱하게 읽힌다. 이름은 곧 구현 계약이다.
표준 이름은 어디서 확인하나
가장 먼저 볼 곳은 목적에 따라 갈린다. 웹 접근성 패턴이면 W3C APG, 크로스플랫폼이나 안드로이드면 머티리얼, 애플 생태계면 HIG다. 세 문서의 관장 주체와 범위를 정리하면 다음과 같다.
| 출처 | 관장 주체 | 주로 다루는 범위 |
|---|---|---|
| ARIA APG | W3C | 웹 위젯 접근성 패턴 |
| 머티리얼 디자인 | 구글 | 안드로이드·웹 컴포넌트 |
| 휴먼 인터페이스 가이드라인 | 애플 | iOS·macOS 등 컴포넌트 |
세 곳 모두 같은 요소를 조금씩 다르게 부르므로, 팀이 어느 플랫폼을 주로 다루는지에 따라 기준 문서를 하나 정해 두는 편이 낫다. 링크는 W3C APG, 머티리얼 디자인 컴포넌트, 애플 HIG다.
자주 헷갈리는 이름 짝
이름이 뒤섞이기 쉬운 대표적인 짝을 출처 기준으로 구분한다.
토스트와 스낵바
구글 머티리얼 디자인 문서는 둘을 이렇게 나눈다. 스낵바(snackbar)는 방금 한 동작에 관한 한 줄 메시지로, 텍스트 액션 버튼을 하나까지 붙일 수 있다. 토스트(toast)는 안드로이드 전용이고 액션 없이 정보만 잠깐 띄운 뒤 스스로 사라진다. 정리하면 사용자가 누를 게 있으면 스낵바, 그냥 알리기만 하면 토스트다. 웹 라이브러리들이 이 둘을 뭉뚱그려 '토스트'라 부르는 경우가 많은데, 원래 기준은 액션 유무다.
다이얼로그와 모달, 얼럿 다이얼로그
APG 기준으로 모달 다이얼로그(dialog)는 본문 위에 겹쳐 뜨면서 뒤쪽을 조작 불가 상태로 만드는 창이다. 얼럿 다이얼로그(alertdialog)는 그중에서도 중요한 메시지를 전하고 응답을 받는 특수한 모달이라 role 값이 따로 있다. '모달'은 창이 뒤를 막는 방식을 가리키는 말이라, 요소 이름으로는 '모달 다이얼로그'가 정확한 표현이다.
아코디언과 디스클로저
APG는 아코디언(accordion)을 세로로 쌓인 여러 헤딩의 집합으로, 각 헤딩이 자기 섹션을 열고 닫는 구조로 정의한다. 반면 디스클로저(disclosure)는 버튼 하나가 콘텐츠 한 덩어리를 보이거나 숨기는 단일 토글이다. 접었다 펴진다고 다 아코디언이 아니다. 섹션이 여러 개 묶여 있으면 아코디언, 하나면 디스클로저다.
콤보박스와 셀렉트
흔히 '드롭다운'이라 부르는 것도 실제로는 여러 요소다. APG의 콤보박스(combobox)는 입력창에 팝업 목록이 붙어 타이핑으로 걸러 고르는 위젯이고, 팝업에 뜨는 목록 자체는 리스트박스(listbox)다. 타이핑 없이 선택만 하는 네이티브 요소는 HTML의 <select> 태그다. 자동완성 검색창을 만들면서 <select>를 떠올리면 접근성 구현이 어긋난다.
플랫폼마다 달라지는 이름
디자인 시스템마다 같은 모양을 다른 이름으로 부르기 때문이다. 대표적으로 화면을 몇 개 구간으로 나눠 뷰를 전환하는 막대형 컨트롤을, 애플 HIG는 세그먼트 컨트롤(segmented control)로, 머티리얼은 세그먼트 버튼(segmented button)으로 부른다. 애플 문서는 이를 두 개 이상의 세그먼트가 각각 버튼처럼 동작하며 서로 다른 뷰를 보여 주는 컨트롤로 설명한다.
화면 아래에서 올라오는 선택 메뉴도 그렇다. 애플은 액션 시트(action sheet)라 부르고, 머티리얼에는 스탠더드와 모달 두 종류의 보텀 시트(bottom sheet)가 있는데 그중 아래에서 올라와 뒤를 덮는 모달 보텀 시트가 액션 시트에 대응한다. 또 공유 버튼을 눌렀을 때 뜨는 앱 목록은 애플 문서상 정식 명칭이 액티비티 뷰(activity view)이고 흔히 셰어 시트(share sheet)라 부른다. 콘텐츠 위에 잠깐 떠서 정보를 주는 팝오버(popover)도 애플의 정식 용어다. 같은 요소를 검색할 때는 대상 플랫폼의 이름으로 찾아야 결과가 나온다.
이름이 기억 안 날 때 찾는 순서
요소 이름이 떠오르지 않을 때 쓰는 순서는 단순하다.
- 먼저 그 요소가 하는 일을 한 문장으로 적는다. '탭하면 아래에서 선택지가 올라온다'처럼 동작 위주로 쓴다.
- 웹이면 APG 패턴 목록을 훑어 동작이 맞는 패턴을 찾는다. 접근성 role까지 같이 나온다.
- APG에 없으면 대상 플랫폼 문서로 간다. 안드로이드와 웹은 머티리얼, iOS는 HIG다.
- 이름을 찾으면 그 role과 속성을 확인해 마크업에 반영한다. 이름과 구현이 한 번에 정리된다.
이 순서의 앞 두 단계를 대신해 주는 도구도 생겼다. 디자이너 @argofowl이 2026년 7월 공개한 namethatui.com은 '보이지만 이름을 모르는 UI 요소들의 사전'이다. "the text gets cut off with three dots"처럼 서툰 자연어 묘사로 검색하면 표준 명칭과 함께 코딩 에이전트용 프롬프트 문구를 돌려주고, 검색이 들어올 때마다 새 단어를 학습해 내장 사전이 자란다. 등록된 요소는 67개가 넘는다. macOS 쪽 32종(NSWindow·NSAlert 같은 AppKit·SwiftUI 요소)과 웹 쪽 35종(카드·모달·캐러셀·토스트)을 다루고, AppKit과 SwiftUI·네이티브와 웹의 용어 차이를 정리한 가이드에 60여 개 요소의 플랫폼 간 번역 표도 붙어 있다.
제작자는 공개 트윗에서 "나는 원래 디자이너라, 에이전트에게 프롬프트할 때 가장 큰 저항이 요소들의 이름을 모른다는 것이었다"며 만든 이유를 밝혔고, 이 트윗은 조회 77만을 넘겼다. AI 에이전트에게 UI 수정을 시킬 때 요소의 정확한 이름을 쓰면 프롬프트 정확도가 올라가니, 이름 찾기 도구가 곧 프롬프팅 도구가 되는 셈이다.
이 순서를 팀에서 한 번 공유해 두면 '그 밑에서 올라오는 거'라는 표현이 스펙 문서에서 사라진다. 기준 문서와 용어 짝을 팀 문서로 남겨 둘 곳이 필요하다면 사내 지식베이스 구축 방식을 비교한 글이 도움이 된다. 이름을 맞추는 데 드는 시간은 몇 분이지만, 어긋난 이름으로 구현했다가 되돌리는 비용은 그보다 훨씬 크다.