UI 요소 용어집: 입력·내비게이션·정보·컨테이너

UI 요소란

UI 요소는 사용자가 화면과 상호작용하게 하는 부품이다. 버튼, 메뉴, 체크박스처럼 익숙한 모양을 맥락에 맞게 쓰면 사용자는 처음 보는 서비스도 고민 없이 쓴다. 이름을 정확히 알면 디자이너와 같은 말로 이야기하고, 제품 전체의 시각적 일관성을 지키기 쉽다.

UI 요소는 하는 일에 따라 네 범주로 나눈다.

범주	하는 일	예
입력 컨트롤(Input Controls)	사용자가 시스템에 정보를 넣는다	회원가입·프로필 수정 화면의 입력 요소
내비게이션(Navigation Components)	제품 안에서 이동을 안내한다	iOS 탭 바, 햄버거 메뉴
정보 요소(Informational Components)	사용자에게 정보를 알려 준다	로더, 툴팁, 뱃지
컨테이너(Containers)	관련된 콘텐츠를 한데 묶는다	카드, 아코디언, 모달

구현할 때는 먼저 해당하는 네이티브 HTML 요소가 있는지 본다. 있으면 키보드·스크린 리더 지원이 따라온다. 없을 때만 ARIA 패턴으로 직접 만든다(ARIA와 접근 가능한 이름).

입력 컨트롤

요소	무엇인가 / 언제 쓰나	구현
버튼(Button)	누르면 동작(제출 등)이 일어난다는 것을 알린다	`<button>`. 이동이면 `<a>`
체크박스(Checkbox)	켜짐·꺼짐 두 상태. 여러 옵션을 동시에 고를 때	`<input type="checkbox">`
라디오 버튼(Radio Buttons)	목록 중 하나만 고를 때	같은 `name`의 `<input type="radio">`를 `<fieldset>`으로 묶는다
토글(Toggle)	켜고 끄는 스위치. 바꾸는 즉시 적용되는 설정에 쓴다	체크박스 + `role="switch"`
드롭다운(Dropdown)	펼쳐서 항목 하나를 고른다. 옵션이 적으면 밖에 나열하는 편이 낫다는 점에서 논란이 있다	`<select>`. 직접 만들면 APG listbox·combobox 패턴
인풋 필드(Input Field)	글자·숫자를 입력한다. 폼뿐 아니라 검색창 등에도 쓴다	`<input>`의 알맞은 `type`(HTML 입력 요소 치트시트)
서치 필드(Search Field)	돋보기가 있는 입력 필드. 시스템 안에서 찾을 것을 입력한다	`<search>` 안의 `<input type="search">`
픽커(Picker)	날짜·시간을 고른다. 형식이 일정해 데이터가 깔끔하다	`<input type="date">`·`time`·`datetime-local`
슬라이더(Slider Controls)	범위 안의 값을 끌어서 조절한다. 볼륨, 밝기, 가격 범위	`<input type="range">`
스테퍼(Stepper)	증가·감소 버튼 두 개로 정해진 단위만큼 값을 바꾼다	`<input type="number" step>` 또는 버튼 두 개 + 값 표시
폼(Form)	관련된 입력을 모아 한 번에 제출한다. 결제·배송 정보 입력	`<form>`(접근 가능한 폼과 오류 처리)

요소	무엇인가 / 언제 쓰나	구현
브레드크럼(Breadcrumb)	사이트 구조에서 지금 위치를 보여 준다. 헨젤과 그레텔의 빵 부스러기에서 온 이름	`<nav aria-label="Breadcrumb">` 안의 `<ol>`, 현재 위치에 `aria-current="page"`
페이지네이션(Pagination)	여러 페이지로 나뉜 콘텐츠에서 위치를 알려 주고 이동하게 한다. 보통 페이지 하단	`<nav>` 안의 링크 목록
사이드바(Sidebar)	페이지 옆에 탐색 링크나 콘텐츠 묶음을 둔다. 늘 보이거나, 안 쓸 때 숨긴다	`<nav>` 또는 `<aside>`
탭 바(Tab Bar)	모바일 앱 아래쪽에서 주요 섹션으로 바로 이동한다	실제로는 화면 이동이므로 `<nav>`의 링크. 같은 화면 안 패널 전환이면 탭 패턴(접근 가능한 위젯)
태그(Tag)	콘텐츠를 분류하고 관련 콘텐츠를 찾게 하는 키워드 레이블	링크 목록
아이콘 메뉴	아래 「아이콘 메뉴 구분하기」	`<button aria-expanded>` + 메뉴

아이콘 메뉴 구분하기

UI 디자이너는 아이콘 메뉴에 음식 이름을 붙이기를 좋아한다.

이름	모양	주로 담는 것
햄버거(Hamburger)	같은 길이의 가로선 셋	전체 메뉴·탐색 링크. 흔히 왼쪽 위
도너(Döner)	아래로 갈수록 짧아지는 가로선	목록의 필터링·정렬
케밥(Kebab)	세로로 늘어선 점 셋 ⋮	항목별 설정·추가 동작
미트볼(Meatballs)	가로로 늘어선 점 셋 ⋯	더 많은 옵션
벤토(Bento)	3×3 격자	앱·서비스 전환

아이콘만 있는 버튼은 보이는 글자가 없으므로 반드시 aria-label로 동작을 이름 붙인다(「메뉴」, 「더 보기」). 모바일에서 햄버거 메뉴처럼 주요 탐색을 숨기면 발견성이 떨어지므로, 핵심 섹션이 몇 개 안 되면 탭 바처럼 드러내는 편이 낫다.

정보 요소

요소	무엇인가 / 언제 쓰나	구현
아이콘(Icon)	정보를 직관적으로 전하는 작은 그림	장식이면 `aria-hidden="true"`, 의미가 있으면 대체 텍스트
로더(Loader)	시스템이 뒤에서 일하는 중이니 기다리라고 알린다	진행 상황을 알리는 `role="status"` 영역
프로그레스 바(Progress Bar)	작업의 진척도·단계를 보여 준다	`<progress>`, 단계 표시는 순서 있는 목록
뱃지(Badge)	확인할 새것이 있음을 알리는 작은 점·숫자. 알림, 오류, 성공도 알린다	숫자를 보이지 않는 텍스트로도 제공한다(「알림 3개」)
툴팁(Tooltip)	인터페이스를 이해하도록 돕는 작은 힌트	`aria-describedby`로 연결. 호버뿐 아니라 포커스에도 뜨고 Esc로 닫혀야 한다
피드(Feed)	활동을 시간순으로 계속 보여 준다. 텍스트·이미지·영상	`role="feed"` 안의 `<article>`
코멘트(Comment)	사용자가 남긴 글을 순서대로 보여 준다. SNS, 블로그	`<article>` 목록

컨테이너

요소	무엇인가 / 언제 쓰나	구현
아코디언(Accordion)	섹션을 펼치고 접는다. 많은 정보를 좁은 공간에	`<details>`/`<summary>`, 하나만 열리게 하려면 `<details name>`
카드(Card)	작은 사각형에 성격이 다른 정보를 담은 모듈. 콘텐츠로 들어가는 입구	`<article>`. 카드 전체를 링크로 만들 때도 링크 텍스트는 제목 하나로
캐러셀(Carousel)	한정된 공간에서 같은 크기의 콘텐츠를 넘겨 본다	자동 재생이면 정지 버튼 필수. 클릭률이 낮아 꼭 필요할 때만 쓴다
모달(Modal)	내용을 별도 레이어로 띄워 응답을 받거나 정보를 준다. 삭제 확인 창	`<dialog>`의 `showModal()`. 포커스 가두기와 Esc 닫기가 기본으로 따라온다

아코디언·탭·캐러셀의 키보드 동작과 마크업은 접근 가능한 위젯: 펼침·탭·캐러셀에, 모달의 포커스 관리는 키보드 접근성과 포커스 관리에 있다.

헷갈리는 짝

짝	가르는 기준
체크박스 vs 라디오	여러 개를 고르나, 하나만 고르나
체크박스 vs 토글	제출해야 반영되나(체크박스), 바로 반영되나(토글)
슬라이더 vs 스테퍼	대략적인 값을 끌어서 고르나, 정확한 값을 한 단위씩 바꾸나
드롭다운 vs 라디오	옵션이 많아 숨겨야 하나, 적어서 한눈에 보여 줄 수 있나
로더 vs 프로그레스 바	끝을 모르나, 진척도를 아나
탭 바 vs 탭	다른 화면으로 이동하나, 같은 화면의 패널을 바꾸나

정리

UI 요소는 입력·내비게이션·정보·컨테이너 네 범주로 나눈다.
이름을 정확히 쓰면 디자이너와의 대화와 제품의 일관성이 쉬워진다.
구현은 네이티브 HTML 요소 → ARIA 패턴 순서로 기댄다.
아이콘 메뉴는 모양마다 담는 것이 다르고, 아이콘 버튼에는 항상 이름을 준다.

버그 제보