디자인 아틀라스▣UI 컴포넌트
아코디언, 토스트, 스켈레톤 — 인터페이스를 이루는 부품의 정확한 이름과 쓰임. — 53개 항목
날짜 선택기Date picker
입력창을 누르면 달력이 팝업으로 열리고, 날짜 하나를 고르면 값이 채워지며 닫히는 폼 컨트롤.
캘린더 뷰Calendar view
한 달치 날짜를 격자로 펼쳐두고, 날짜마다 있는 일정을 점이나 라벨로 보여주는 화면.
컨텍스트 메뉴Context menu
마우스 오른쪽 버튼(또는 길게 누르기)으로 커서 위치에 여는, 지금 클릭한 대상에 한정된 명령 목록.
스플릿 버튼Split button
왼쪽은 즉시 실행되는 기본 동작, 오른쪽은 대안 동작 목록을 펼치는 화살표로 나뉜 두 부분짜리 버튼.
숫자 입력Number input
값 하나를 1단위(또는 정해진 step)로 늘리고 줄이는 −/+ 버튼과 직접 타이핑도 되는 입력창.
태그 입력Tag input
입력창에 값을 치고 Enter를 누르면 지워지지 않는 칩으로 쌓이고, 입력창은 비워져 다음 값을 받는 필드.
OTP 입력OTP input
문자 메시지 등으로 받은 짧은 인증번호를 빠르게 채워 넣도록 만든 고정 길이 입력.
색상 선택기Color picker
정해진 팔레트나 색상환에서 색 하나를 고르는 컨트롤. 스와치 그리드나 네이티브 OS 피커로 만듭니다.
서식 툴바Rich text toolbar
굵게·기울임·밑줄처럼 지금 선택한 글자에 서식을 켜고 끄는 토글 버튼들이 늘어선 줄.
칸반 보드Kanban board
할 일 → 진행 중 → 완료처럼 상태를 나타내는 여러 열에 카드를 드래그로 옮겨 진행 상황을 관리하는 보드.
정렬 가능한 목록Sortable list
손잡이 아이콘을 끌어 항목의 순서를 바꾸는 세로 목록.
가상 리스트Virtual list
스크롤 위치를 보고 지금 화면에 보이는 몇 개(+여유 버퍼)만 실제 DOM에 그리는 긴 목록 기법.
크기 조절 패널Resizable panels
두 영역 사이의 드래그 가능한 구분선으로 사용자가 직접 비율을 조절하는 레이아웃.
아바타 그룹Avatar group
여러 사용자를 좁은 가로 폭에 겹쳐 쌓고, 다 들어가지 않는 나머지는 "+2"처럼 숫자로 묶어 보여주는 패턴.
접이식 사이드바Collapsible sidebar
라벨이 보이는 넓은 사이드바와 아이콘만 남는 좁은 레일 사이를 토글 버튼으로 오가는 패널.
메뉴바Menubar
파일·편집·보기처럼 가로로 늘어선 최상위 항목마다 하위 명령 메뉴를 펼치는, 데스크톱 앱 상단의 막대.
툴바Toolbar
버튼 여러 개를 한 줄에 모아, Tab은 통째로 건너뛰고 안에서는 방향키로만 이동하게 만드는 컨테이너.
사이드 시트Sheet (side panel)
화면 가장자리에서 밀려 들어오는, 모달로도 비모달로도 쓸 수 있는 패널. 최신 디자인 시스템은 이를 "시트"라 부릅니다.
아코디언Accordion
제목을 누르면 본문이 펼쳐지고 닫히는 세로 목록. 대개 한 번에 하나만 열리게 제한합니다.
탭Tabs
가로로 나열된 제목 중 하나를 골라, 그에 맞는 콘텐츠 패널 하나만 보여주는 내비게이션.
모달Modal
화면 전체를 어둡게 덮고 그 위에 뜨는, 응답하기 전까지 뒤의 페이지와 상호작용을 막는 대화상자.
드로어Drawer
화면 가장자리에서 옆으로 미끄러져 들어오는 패널. 모바일에서 아래에서 올라오면 "바텀시트"라고 부릅니다.
토스트Toast
화면 한쪽 구석에 잠깐 나타났다 몇 초 뒤 스스로 사라지는 짧은 상태 메시지.
툴팁Tooltip
마우스를 올리거나 키보드로 포커스했을 때 나타나는, 클릭할 수 없는 짧은 보조 설명.
팝오버Popover
버튼을 누르면 그 옆에 나타나는, 링크나 버튼 같은 조작 가능한 콘텐츠를 담은 작은 패널.
드롭다운 메뉴Dropdown menu
버튼을 누르면 아래로 펼쳐지는 명령 목록. 하나를 고르면 즉시 실행되고 목록이 닫힙니다.
콤보박스Combobox
텍스트를 입력하면 후보 목록이 걸러지는, 입력과 선택이 합쳐진 폼 컨트롤.
토글 스위치Toggle switch
켜짐/꺼짐 두 상태를 손잡이가 좌우로 미끄러지며 누르는 즉시 전환하는 컨트롤.
체크박스Checkbox
여러 항목 중 몇 개든 자유롭게 고를 수 있는 사각형 선택 컨트롤. 하위가 일부만 선택되면 "부분 선택(-)" 상태도 가집니다.
라디오 버튼Radio button
여러 선택지 중 정확히 하나만 고를 수 있는 원형 컨트롤. 하나를 고르면 같은 그룹의 나머지는 자동으로 풀립니다.
세그먼티드 컨트롤Segmented control
알약 모양 배경이 선택된 항목 뒤로 미끄러지는, 라디오처럼 정확히 하나만 고르는 버튼 묶음.
슬라이더Slider
트랙을 따라 손잡이를 움직여 값 하나(또는 범위)를 고르는 컨트롤.
스테퍼Stepper
여러 단계로 이루어진 작업에서 지금 몇 번째 단계인지 번호와 연결선으로 보여주는 표시.
프로그레스 바Progress bar
작업이 얼마나 끝났는지를 채워지는 막대 길이로 보여주는, 읽기 전용 표시기.
스피너Spinner
얼마나 걸릴지 알 수 없는 작업 중임을 알리는, 계속 도는 원형 표시기.
스켈레톤Skeleton
실제 콘텐츠가 도착하기 전, 그 레이아웃 모양을 흉내 낸 회색 블록으로 로딩 중임을 보여주는 상태.
배지Badge
아이콘이나 버튼 모서리에 붙어 개수나 상태를 알려주는 작은 점 또는 숫자.
아바타Avatar
사용자를 나타내는 원형 이미지, 또는 이미지가 없을 때 이니셜·아이콘으로 대체되는 조각.
브레드크럼Breadcrumb
지금 보고 있는 페이지가 사이트 계층 구조 어디에 있는지 ">"로 이어 보여주는 내비게이션.
페이지네이션Pagination
긴 목록을 여러 페이지로 나누고 번호를 눌러 이동하는 내비게이션.
캐러셀Carousel
여러 장의 콘텐츠를 하나씩 옆으로 넘기며 순환해서 보여주는 슬라이드 묶음.
칩Chip
작은 알약 모양의 독립된 라벨. 필터를 켜고 끄거나, 눌러서 스스로 삭제되는 용도로 흔히 씁니다.
커맨드 팔레트Command palette
단축키(주로 ⌘K)로 열어서 타이핑만으로 앱 안의 어떤 명령이든 검색해 실행하는 전역 검색창.
별점Rating
별 같은 아이콘을 채워서 5점 만점 등 정해진 척도의 점수를 주고받는 컨트롤.
트리뷰Tree view
폴더처럼 접고 펼 수 있는 계층 목록. 가지를 열면 그 안의 항목이 들여쓰기로 나타납니다.
하단 내비게이션Bottom navigation
모바일 화면 아래 고정돼 3~5개의 주요 화면을 아이콘과 라벨로 오가는 내비게이션 바.
FAB
화면 한쪽 구석에 떠서, 그 화면에서 가장 중요한 동작 하나를 즉시 실행하는 원형 버튼.
검색창Search bar
돋보기 아이콘과 함께 텍스트를 입력해 콘텐츠를 찾는 입력 필드. 흔히 입력하는 즉시 아래로 제안이 나타납니다.
드롭존Dropzone
파일을 끌어다 놓을 수 있는 영역. 파일이 위로 올라오면 테두리가 반응해 놓을 수 있음을 알려줍니다.
햄버거 메뉴Hamburger menu
가로줄 3개로 된 아이콘 버튼. 누르면 숨어 있던 내비게이션(주로 드로어)이 나타납니다.
내비게이션 레일Navigation rail
화면 왼쪽에 세로로 붙어, 아이콘 중심으로 주요 화면을 오가는 좁은 내비게이션 바.
데이터 테이블Data table
행과 열로 정리된 데이터를 보여주고, 흔히 헤더를 눌러 정렬하거나 행을 선택할 수 있는 표.
타임라인Timeline
시간 순서대로 일어난 일들을 점과 세로선으로 이어 보여주는 목록.