바이벌러리
메뉴
외관 및 언어
주제별 용어 · 147 안내서

인터페이스

사람들이 화면에서 사용하는 버튼, 메뉴, 폼 및 기타 부품의 이름을 배우세요.

01 / Atlas

모든 인터페이스 용어

간단한 의미, 예시, 사용 시점, 공식성, 코드명을 포함한 용어 열기

  1. 01 · 핵심

    가격표 Pricing Table

    요금제 표는 비교하기 쉽게 요금제, 가격, 한계, 기능, 구매 조건을 정리해 줘요.

  2. 02 · 더 많은 세부 정보

    강제 색상 모드 Forced Colors Mode

    강제 색상 모드는 여러 페이지 색상 대신 사용자가 선택한 시스템 팔레트를 사용합니다. 이는 컨트롤과 텍스트를 구별하기 쉽게 만들 수 있습니다.

  3. 03 · 핵심

    건너뛰기 링크 Skip Link

    Skip Link는 키보드 사용자가 반복되는 메뉴를 건너뛰게 해줘. 포커스를 메인 내용이나 중요한 곳으로 바로 옮겨주지.

  5. 05 · 더 많은 세부 정보

    경고 대화상자 Alert Dialog

    경고 대화상자는 긴급하게 선택해야 할 때 띄우는 창이에요. 계속하려면 무슨 일이 일어날지 먼저 이해해야 해요.

  6. 06 · 핵심

    골격 Skeleton

    Skeleton은 아직 로딩 중인 내용의 모양처럼 생긴 간단한 임시 화면이야.

  7. 07 · 핵심

    공개 Disclosure

    공개 버튼은 관련 섹션을 보여주거나 숨기는 버튼입니다. 또한 해당 섹션이 열려 있는지 소프트웨어에 알려줍니다.

  9. 09 · 핵심

    구분선 Divider

    divider는 그룹이나 컨트롤, 주제 사이에 보이거나 의미 있는 선이에요.

  10. 10 · 핵심

    구분자 Separator

    구분선은 눈에 보이는 선으로, 부분 사이의 실제 구분을 표시할 수도 있습니다. 사람들이 집중하여 이동할 수 있다면, 그것은 조절 가능한 분할기가 됩니다.

  11. 11 · 핵심

    권한 매트릭스 Permission Matrix

    권한 매트릭스는 선택한 영역에서 각 역할이 어떤 작업을 수행할 수 있는지 보여줍니다. 이를 통해 접근 규칙을 더 쉽게 비교할 수 있습니다.

  13. 13 · 핵심

    날짜 선택기 Date Picker

    날짜 선택기는 달력에서 날짜를 입력하거나 선택할 수 있는 컨트롤입니다. 시간은 선택하지 않습니다.

  14. 14 · 핵심

    내비게이션 레일 Navigation Rail

    내비게이션 레일은 화면 가장자리에서 주요 위치의 짧은 수직 목록입니다. 이는 일반적인 디자인 패턴이지, 웹 표준은 아닙니다.

  17. 17 · 핵심

    다단계 폼 Multi-Step Form

    다단계 폼은 하나의 긴 작업을 더 작은 페이지로 나눕니다. 제출하기 전에 답변을 확인합니다.

  18. 18 · 핵심

    단계들 Steps

    단계는 짧은 과정에서 사람의 위치를 보여줍니다. 과정은 고정된 순서와 끝이 있습니다.

  19. 19 · 핵심

    달력 보기 Calendar View

    달력 보기에서는 일정 항목을 날짜나 시간 슬롯에 배치합니다. 사용자는 하루, 한 주, 또는 한 달 단위로 확인할 수 있습니다.

  20. 20 · 핵심

    대량 작업 Bulk Actions

    대량 작업은 사용자가 여러 항목을 선택하고 선택된 전체 세트에 대해 하나의 작업을 실행할 수 있게 합니다.

  21. 21 · 핵심

    대체 텍스트 Alternative Text

    대체 텍스트는 누군가 이미지 볼 수 없을 때 이미지의 유용한 의미를 설명합니다. 페이지에서 이미지의 역할과 일치해야 합니다.

  23. 23 · 더 많은 세부 정보

    데이터 그리드 Data Grid

    데이터 그리드는 앱 같은 표예요. 사람들이 많은 양의 데이터를 옮기고, 고르고, 정렬하고, 편집할 수 있어요.

  24. 24 · 더 많은 세부 정보

    도구 모음 Toolbar

    도구 모음은 사람들이 자주 사용하는 컨트롤의 이름이 있는 그룹입니다. Tab 키를 누르면 그룹 안으로 들어가고, 화살표 키로 그 안에서 이동할 수 있습니다.

  26. 26 · 핵심

    드롭다운 메뉴 Dropdown Menu

    드롭다운 메뉴는 버튼에서 열리고 버튼 옆에 유지되는 단기 명령 메뉴입니다. 일반적인 시맨틱 패턴은 메뉴 버튼과 메뉴를 함께 사용하는 것입니다.

  28. 28 · 더 많은 세부 정보

    라이브 영역 Live Region

    라이브 영역은 중요한 페이지 텍스트가 변경될 때 보조 기술에 알립니다. 포커스를 이동하지 않고도 업데이트를 알릴 수 있습니다.

  29. 29 · 더 많은 세부 정보

    라이트박스 Lightbox

    라이트박스가 사진이나 영상을 크게 띄워주고 주변은 어둡게 만들어요.

  30. 30 · 핵심

    랜드마크 Landmark

    랜드마크는 페이지의 주요 영역입니다. 보조 기술은 사용자가 그 영역으로 바로 이동할 수 있게 합니다.

  31. 31 · 핵심

    로그인 폼 Sign-In Form

    로그인할 때 계정 정보를 적는 양식이에요. 계정 찾기, 비밀번호 관리자, 에러 확인, 안전한 전송을 꼭 지원해야 해요.

  32. 32 · 더 많은 세부 정보

    로빙 tabindex Roving tabindex

    로빙 tabindex는 그룹에 한 개의 Tab 정지를 제공합니다. 그런 다음 화살표 키로 그룹 내 항목 간 포커스를 이동할 수 있습니다.

  33. 33 · 핵심

    링크 Link

    링크는 누르면 다른 페이지, 파일, 또는 장소를 열어주는 글이나 그림이에요.

  34. 34 · 핵심

    맨 위로 Back to Top

    맨 위로는 긴 페이지에서 쓰는 빠른 단추예요. 누르면 화면과 포커스를 처음으로 돌려줘요.

  35. 35 · 핵심

    메뉴 Menu

    명령 메뉴는 특별한 키보드 포커스 규칙이 적용된 작업 또는 선택 그룹입니다. 일반적으로 버튼이나 다른 명령 영역에서 열립니다.

  37. 37 · 더 많은 세부 정보

    메뉴 버튼 Menu Button

    메뉴 버튼은 작업이나 선택 목록을 엽니다. 메뉴가 열려 있는지 여부를 소프트웨어에 알립니다.

  38. 38 · 더 많은 세부 정보

    메뉴바 Menubar

    메뉴 바는 항상 표시되는 메뉴로, 종종 하나의 가로 행에 있습니다. 그 항목들은 앱 스타일 키보드 규칙으로 명령이나 하위 메뉴를 엽니다.

  39. 39 · 더 많은 세부 정보

    명령 팔레트 Command Palette

    커맨드 팔레트는 키보드로 쓰기 편한 검색 패널이에요. 여러 동작, 페이지, 최근 항목을 열어줘요.

  40. 40 · 핵심

    모달 대화상자 Modal Dialog

    모달 창은 정신을 집중하게 해주는 창이에요. 누군가 닫거나 끝낼 때까지 현재 화면을 가로막아요.

  41. 41 · 핵심

    목록 List

    목록은 따라가기 쉽고 쓸모 있는 순서로 관련 항목들을 보여줘요.

  42. 42 · 더 많은 세부 정보

    목록 상자 Listbox

    리스트박스는 선택 항목의 사용자 정의 목록입니다. 어떤 선택 항목이 활성화되어 있는지와 화살표 키가 목록을 어떻게 이동하는지를 관리합니다.

  43. 43 · 핵심

    목표 크기 Target Size

    목표 크기는 사용자가 컨트롤을 클릭하거나 탭할 수 있는 전체 영역입니다. 시각적으로 보이는 아이콘보다 클 수 있습니다.

  44. 44 · 더 많은 세부 정보

    무한 스크롤 Infinite Scroll

    무한 스크롤은 사용자가 현재 끝에 가까워질 때 더 많은 피드 항목을 로드합니다.

  45. 45 · 핵심

    미디어 플레이어 Media Player

    미디어 플레이어는 소리나 영상을 다루는 컨트롤들의 묶음이에요. 재생, 진행, 소리, 자막 등 여러 가지 재생 옵션이 있어요.

  46. 46 · 핵심

    미터 Meter

    미터기는 알려진 범위 내에서 하나의 측정을 보여줍니다. 또한 낮음, 높음, 최적 범위를 표시할 수 있습니다.

  47. 47 · 더 많은 세부 정보

    바닥 시트 Bottom Sheet

    바텀 시트는 터치하기 편한 패널이에요. 화면 아래에서 올라오다가 정해진 높이에서 멈출 수도 있죠.

  48. 48 · 핵심

    배너 랜드마크 Banner Landmark

    배너 랜드마크는 전체 웹사이트의 주요 헤더 영역입니다. 넓은 공지 스트립 또한 배너라고 부를 수 있지만, 이는 다른 디자인 패턴입니다.

  49. 49 · 핵심

    배지 Badge

    배지는 다른 항목에 붙는 작고 클릭할 수 없는 표시입니다. 배지는 수치, 상태 또는 짧은 신호를 보여주며, 웹 표준이 아닌 디자인 패턴입니다.

  50. 50 · 더 많은 세부 정보

    배지, 칩 및 태그 — 학습 세트 Badge, Chip & Tag — Learning Bundle

    이 학습 번들은 디자인 시스템에 따라 다른 세 가지 라벨을 비교합니다. 배지(badge)는 종종 상태나 수를 표시합니다. 태그(tag)는 콘텐츠를 그룹으로 분류합니다. 칩(chip)은 상호작용할 수 있습니다. 이 번들은 하나의 표준 컴포넌트 용어가 아닙니다.

  51. 51 · 핵심

    버튼 Button

    버튼은 현재 화면에서 무언가를 하게 만들려고 누르는 조종 장치예요.

  53. 53 · 더 많은 세부 정보

    분할 컨트롤 Segmented Control

    Segmented control은 여러 선택지를 한 줄로 묶어서 모드, 필터, 값을 바꾸는 버튼들이야.

  54. 54 · 핵심

    브레드크럼 Breadcrumb

    브레드크럼은 현재 페이지와 그 상위 페이지들을 보여주는 연결된 길이에요.

  56. 56 · 핵심

    빈 상태 Empty State

    목록이나 작업 공간에 현재 내용이 없으면 빈 상태가 나타납니다. 이유를 설명하고 유용한 다음 단계를 제공합니다.

  58. 58 · 핵심

    사이드바 내비게이션 Sidebar Navigation

    사이드바 내비게이션은 열릴 수도 접힐 수도 있는 명명된 링크가 있는 측면 영역입니다. 일반적으로 제품 내 관련 위치를 그룹화합니다.

  59. 59 · 핵심

    사이트 상단 Site Header

    사이트 헤더는 맨 위에 브랜드, 메인 메뉴, 계정, 사이트 전체 도구를 모아둬.

  60. 60 · 핵심

    사이트 하단 Site Footer

    사이트 푸터는 웹사이트 전체에 쓰이는 맨 마지막 구역이야. 보조 링크, 법적 정보, 연락처, 신뢰 정보를 담아둬.

  61. 61 · 핵심

    사회적 증거 Social Proof

    사회적 증거는 사람들이 확인할 수 있는 증거입니다. 이는 관련 있는 사람이나 그룹이 제품을 사용하고, 신뢰하거나, 가치를 둔다고 보여줍니다.

  62. 62 · 더 많은 세부 정보

    삽입 캐럿 Insertion Caret

    삽입 캐럿은 편집 가능한 텍스트에서 깜빡이는 선이에요. 다음에 타이핑하거나 붙여넣을 글자가 나타날 자리를 보여줘요.

  63. 63 · 핵심

    상태 메시지 Status Message

    상태 메시지는 대화 상자를 열거나 포커스를 가져가지 않고 결과, 진행 상황, 또는 대기를 보고합니다.

  64. 64 · 핵심

    색상 선택기 Color Picker

    색상 선택기는 사람들이 색을 고르게 해줘요. 색상 판, 색조 막대, 값, 견본 등을 보여줄 수 있어요.

  65. 65 · 핵심

    서랍 Drawer

    화면 가장자리에서 서랍이 미끄러져 나와요. 뒤에 있는 페이지 일부가 계속 보이죠.

  66. 66 · 핵심

    선택 Select

    Select는 정해진 목록을 열어서 하나의 값을 고르게 해줘.

  67. 67 · 핵심

    설명 목록 Description List

    설명 목록은 각 이름마다 값이나 설명을 짝지어 줘요. 짧고 읽기만 하는 정보에 어울려요.

  68. 68 · 핵심

    설정 페이지 Settings Page

    설정 페이지에는 앱이 작업 전반에서 작동하는 방식을 변경하는 선택 사항이 있습니다. 좋은 기본 설정은 대부분의 사람들이 바로 시작할 수 있게 합니다.

  69. 69 · 핵심

    성공 상태 Success State

    성공 상태는 작업이 완료되었음을 확인합니다. 지속되는 결과와 유용한 다음 단계를 보여줍니다.

  70. 70 · 더 많은 세부 정보

    수치 스테퍼 (시각적 패턴) Numeric Stepper (Visual Pattern)

    숫자 스테퍼는 숫자를 직접 입력할 수 있고, 더하거나 빼는 버튼이 있어요. 기본 숫자 입력이나 ARIA spinbutton 방식을 쓸 수도 있어요. 더하기와 빼기 버튼만 있다고 해서 이런 기능이 저절로 만들어지진 않아요.

  71. 71 · 핵심

    스위치 Switch

    Switch는 설정을 켜거나 끄고, 보통 바로 바뀌어.

  72. 72 · 더 많은 세부 정보

    스크림 Scrim

    Scrim은 팝업 창 뒤에 깔리는 살짝 투명한 어두운 층이야. 팝업 창을 돋보이게 하고 아래 페이지를 못 쓰게 막아놨다는 걸 보여주지.

  73. 73 · 핵심

    스피너 Spinner

    Spinner는 작업이 진행 중임을 알려주기 위해 계속 돌아가. 마칠 시간을 알 수 없을 때 써.

  74. 74 · 더 많은 세부 정보

    스핀버튼 Spinbutton

    스핀버튼은 특정 범위에서 하나의 값을 선택하는 컨트롤의 ARIA 이름입니다. 사용자는 보통 값을 입력하거나 값을 올리거나 내릴 수 있습니다. 숫자 스테퍼는 그 예시 중 하나입니다.

  75. 75 · 핵심

    슬라이더 Slider

    Slider는 막대를 따라 손잡이를 움직여서 하나의 값이나 범위를 고르게 해줘.

  76. 76 · 핵심

    시간 선택기 Time Picker

    시간 선택기는 로컬 시간을 입력하거나 선택하는 컨트롤입니다. 단계 크기와 로컬 표시 형식이 명확해야 합니다.

  77. 77 · 핵심

    시맨틱 HTML Semantic HTML

    시맨틱 HTML은 단순히 보이는 방식이 아니라 HTML 요소가 하는 기능에 따라 선택하는 것을 의미합니다. CSS가 없어도 페이지 구조와 내장된 동작이 유지됩니다.

  78. 78 · 핵심

    아바타 Avatar

    아바타는 작은 사진, 이니셜, 또는 기호예요. 사람, 팀, 봇, 계정을 알아보는 데 도움을 줘요.

  79. 79 · 핵심

    아이콘 Icon

    아이콘은 동작, 물건, 상태, 그룹을 알아보게 돕는 작은 기호예요.

  80. 80 · 핵심

    아코디언 Accordion

    아코디언은 각 섹션의 제목을 눌러 내용을 열고 닫을 수 있게 겹겹이 쌓는 거예요.

  81. 81 · 핵심

    알림 Alert

    알림은 키보드 포커스를 이동하지 않고 발표되는 짧고 중요한 메시지입니다. 사용자가 즉시 응답하도록 요구하지 않습니다.

  83. 83 · 핵심

    앱 내 알림 센터 In-App Notification Center

    앱 내 알림 센터는 유용한 업데이트를 한 곳에 모아둡니다. 각 항목은 무엇이 변경되었는지, 언제 변경되었는지, 읽지 않았는지를 보여줍니다.

  84. 84 · 핵심

    양식 검증 Form Validation

    양식 검증은 규칙과 메시지를 사용하여 누락되거나 잘못된 답변을 찾아 방지하고 설명합니다.

  85. 85 · 핵심

    양식 레이블 Form Label

    Form Label은 무엇을 적어야 하는지 알려줘요. 코드에서는 이 라벨을 알맞은 컨트롤과 이어줘요.

  86. 86 · 핵심

    양식 필드 Form Field

    보이는 라벨, 컨트롤, 도움말, 검사 상태, 그리고 이어진 에러 메시지까지 모두 갖춘 입력칸이에요.

  87. 87 · 핵심

    오류 상태 Error State

    에러 상태는 동작이나 페이지가 실패할 때 계속 표시됩니다. 특정 문제를 설명하고 안전하게 복구할 수 있는 방법을 제공합니다.

  88. 88 · 핵심

    오류 요약 Error Summary

    오류 요약은 양식 상단에 있는 짧은 목록입니다. 각 항목은 오류를 설명하고 해당 필드로 연결됩니다.

  89. 89 · 더 많은 세부 정보

    웹 알림 Web Notification

    웹 알림은 브라우저나 운영 체제가 페이지 외부에 표시하는 메시지입니다. 사용자가 권한을 부여해야 하며, 메시지는 시스템 규칙을 따릅니다.

  90. 90 · 핵심

    이미지 Image

    이미지는 콘텐츠 안에 있는 그림이에요. 목적에 맞게 크기, 로딩, 자르기, 대체 텍스트 규칙이 필요해요.

  91. 91 · 핵심

    인용 Quote

    인용은 누군가의 말을 그대로 적고 그 말이 어디서 왔는지 명확하게 알려줘요.

  92. 92 · 핵심

    읽기 전용 필드 Read-only Field

    읽기 전용 필드는 포커스를 받을 수 있으며 값이 복사될 수 있습니다. 사용자는 값을 수정할 수 없습니다.

  93. 93 · 핵심

    자막 및 전사 Captions and Transcript

    자막은 음성과 유용한 소리와 시간 동기화된 텍스트입니다. 전사는 전체 오디오 또는 비디오의 읽기 가능한 텍스트 버전입니다.

  94. 94 · 핵심

    자주 묻는 질문 FAQ

    FAQ는 결정하거나 도움을 받기 전에 자주 묻는 질문을 모아둔 거예요. 답변은 그 사람들이 아는 단어와 상황을 써요.

  95. 95 · 핵심

    저장된 보기 Saved View

    저장된 보기는 목록이 필터링되고 정렬되며 표시되는 방식을 기억하여 동일한 유용한 보기를 다시 열 수 있습니다.

  96. 96 · 핵심

    전역 검색 Global Search

    전역 검색은 하나의 공유 검색 장소에서 앱 내 다양한 종류의 항목을 찾아줍니다.

  97. 97 · 핵심

    접근 가능 설명 Accessible Description

    접근 가능한 설명은 요소의 접근 가능한 이름이 제공하지 않는 유용한 세부 정보를 추가합니다. 형식, 제한 또는 결과를 설명할 수 있습니다.

  98. 98 · 핵심

    접근 가능 이름 Accessible Name

    접근 가능한 이름은 소프트웨어가 컨트롤이나 이미지에 대해 계산하는 라벨입니다. 화면 읽기 프로그램이 아이템을 식별하는 데 사용합니다.

  101. 101 · 핵심

    진행 표시기 Progress Indicator

    진행 표시는 계속 작업 중이라는 걸 알려줘요. 막대나 원형 모양은 얼마나 진행됐는지 알려주고, 스피너는 얼마나 기다려야 하는지 알 수 없을 때 써요.

  102. 102 · 핵심

    진행 표시줄 Progressbar

    진행 표시줄은 시간 제한이 있는 작업의 완료 정도를 보여줍니다. 사람들은 이를 읽을 수 있지만 직접 제어하지는 않습니다.

  103. 103 · 더 많은 세부 정보

    차트 Chart

    차트는 데이터를 그림으로 바꿔줘요. 비교, 추세, 범위, 또는 연결 관계를 보여줄 수 있어요.

  104. 104 · 핵심

    채팅 UI Chat UI

    채팅 UI는 메시지, 보낸 사람 이름, 입력란, 전송 상태, 첨부 파일을 묶어요. 오류를 고치는 방법도 보여줘요.

  105. 105 · 핵심

    체크박스 Checkbox

    체크박스는 체크하거나 해제할 수 있는 상자예요. 각 선택은 스스로 의미를 가질 수 있어요.

  106. 106 · 핵심

    칩 Chip

    칩은 입력, 필터, 선택 또는 제거 가능한 항목을 나타내는 작은 상호작용 아이템입니다. 그 정확한 동작은 명확해야 합니다.

  107. 107 · 핵심

    카드 Card

    카드는 하나의 주제와 그 세부 내용, 그리고 관련된 행동들을 담은, 경계가 뚜렷한 묶음이에요.

  108. 108 · 핵심

    칸반 보드 Kanban Board

    칸반 보드는 작업이 진행되는 실제 단계를 보여줍니다. 카드가 작업을 나타내고, WIP 제한은 너무 많은 시작을 방지합니다.

  109. 109 · 핵심

    캐러셀 Carousel

    캐러셀은 한 번에 하나나 몇 개의 패널만 보여줘요. 사람들은 화살표, 점, 또는 쓸어넘기기로 움직일 수 있어요.

  110. 110 · 더 많은 세부 정보

    캐스케이더 Cascader

    캐스케이더는 한 번에 한 단계씩 선택지를 보여줘요. 하나를 고르면 그에 맞는 다음 목록이 열려요.

  111. 111 · 더 많은 세부 정보

    컨텍스트 메뉴 Context Menu

    컨텍스트 메뉴는 그것을 연 객체나 영역에 대한 명령을 보여줍니다. 보통 마우스 오른쪽 버튼 클릭이나 컨텍스트 메뉴 키로 열립니다.

  112. 112 · 핵심

    콘텐츠 리플로우 Content Reflow

    콘텐츠 재배치는 내용을 잃거나 기능이 손상되지 않고 페이지를 좁은 공간에 맞춥니다. 대부분의 읽기는 양방향 스크롤을 필요로 하지 않아야 합니다.

  113. 113 · 더 많은 세부 정보

    크기 조절 핸들 Resize Handle

    크기 조절 핸들은 모서리나 구석에 있는 작은 조절하는 부분이에요. 여기를 끌어서 패널, 입력칸, 줄, 물건 등의 크기를 바꿔요.

  114. 114 · 핵심

    키보드 트랩 Keyboard Trap

    키보드 트랩은 포커스가 페이지의 일부로 들어가지만 키보드로 빠져나올 수 없을 때 발생합니다.

  115. 115 · 핵심

    타임라인 Timeline

    Timeline은 사건, 상태, 중요 순간을 하나의 보이는 선을 따라 시간 순서대로 놓아.

  116. 116 · 핵심

    태그 Tag

    태그는 일반적으로 클릭할 수 없는 짧은 레이블입니다. 항목을 그룹화하거나 안정적인 상태를 보여줍니다. 태그는 디자인 패턴이지 웹 표준이 아닙니다.

  117. 117 · 핵심

    탭들 Tabs

    탭은 레이블을 사용하여 하나의 공유 패널에서 콘텐츠를 전환합니다. 주요 작업은 열려 있습니다.

  118. 118 · 핵심

    테이블 Table

    표는 이름표가 붙은 가로줄과 세로줄로 관련된 정보를 정리해. 보기 전용이거나 아주 간단한 기능만 있어.

  119. 119 · 핵심

    텍스트 선택 Text Selection

    텍스트 선택은 표시된 텍스트 범위입니다. 사람들은 텍스트를 복사, 교체, 기록 또는 편집하기 위해 선택합니다.

  120. 120 · 핵심

    텍스트 영역 Textarea

    Textarea는 여러 줄의 글을 칠 수 있는 상자야. 크기를 고정하거나 조절할 수 있어.

  121. 121 · 핵심

    텍스트 필드 Text Field

    Text field는 이름표가 붙은 한 줄짜리 상자야. 거기에 글을 쓰거나 고칠 수 있어.

  122. 122 · 더 많은 세부 정보

    토글 그룹 Toggle Group

    끄고 켤 수 있는 버튼 묶음에 라벨이 붙어 있어요. 한 개 이상의 선택지가 눌린 상태로 남을 수 있어요.

  123. 123 · 핵심

    토스트 알림 Toast

    Toast는 짧은 상태 메시지야. 화면을 막지 않고 보통 혼자 사라져.

  124. 124 · 핵심

    통계 Statistic

    Statistic은 하나의 값을 강조해. 라벨, 단위, 기간, 상황이 그 값의 의미를 설명해줘.

  125. 125 · 핵심

    툴팁 Tooltip

    Tooltip은 버튼 같은 컨트롤에 대한 짧은 설명이야. 마우스를 올리거나 키보드 포커스가 가면 열려. 하지만 버튼처럼 누를 수는 없어.

  126. 126 · 핵심

    트리 뷰 Tree View

    Tree view는 단계가 있는 목록이야. 부모 줄을 열거나 닫아서 안에 있는 자식 항목을 봐.

  127. 127 · 더 많은 세부 정보

    트리 선택 Tree Select

    Tree Select는 열리는 폴더 구조 안에 겹쳐진 선택지를 보여줘. 하나 또는 여러 개를 고를 수 있어.

  128. 128 · 더 많은 세부 정보

    트리그리드 Treegrid

    트리그리드는 자식 행을 가질 수 있는 행이 있는 인터랙티브 표입니다. 사람들은 셀들이 여전히 열에 맞춰 있는 동안 행 수준을 열 수 있습니다.

  129. 129 · 핵심

    파일 업로드 File Upload

    파일 업로드는 기기에서 파일을 선택, 확인, 전송, 관리하는 과정을 포함합니다.

  130. 130 · 핵심

    팝오버 Popover

    팝오버는 여는 버튼에 딱 붙어 있는 작은 패널이에요. 화면을 막지 않고도 여러 내용과 버튼을 담을 수 있어요.

  131. 131 · 핵심

    페이지네이션 Pagination

    페이지네이션은 컬렉션을 번호가 매겨진 페이지로 나누고 어떤 페이지가 열려 있는지 보여줍니다.

  133. 133 · 핵심

    평가 Rating

    평점은 정해진 기준에서 얼마나 좋은지 평가한 것이에요. 별 모양, 숫자, 또는 등급 이름을 쓸 수 있어요.

  134. 134 · 핵심

    포인터 & 커서 Pointer & Cursor

    포인터나 커서는 화면에서 마우스 같은 도구가 있는 곳을 표시해요. 모양에 따라 고르기, 타이핑하기, 끌기, 크기 조절, 기다리기, 또는 할 수 없음을 뜻해요.

  135. 135 · 핵심

    포커스 관리 Focus Management

    포커스 관리는 페이지 변경 후 키보드의 활성 지점을 이동시킵니다. 또한 임시 표면이 닫힐 때 포커스를 반환합니다.

  136. 136 · 핵심

    포커스 순서 Focus Order

    포커스 순서는 키보드 포커스가 페이지를 통해 따라가는 경로입니다. 읽기 및 작업 순서와 일치해야 합니다.

  138. 138 · 핵심

    필터 Filter

    filter는 고른 조건에 맞는 것만 보여주는 도구나 규칙이에요. 원본 데이터를 바꾸지는 않아요.

  139. 139 · 핵심

    햄버거 메뉴 Hamburger Menu

    가로줄이 세 개인 메뉴 버튼이에요. 공간이 좁아서 메뉴를 다 보여줄 수 없을 때 누르면 메뉴가 열려요.

  140. 140 · 핵심

    행동 촉구 Call to Action

    콜 투 액션(CTA)은 사람들을 다음에 해야 할 유용한 단계로 안내하는 명확한 초대장이에요.

  142. 142 · 더 많은 세부 정보

    호버 카드 Hover Card

    hover card는 미리 보기를 풍성하게 보여줘요. 마우스를 올리거나 선택했을 때 뜨지만, 페이지를 막지는 않아요.

  143. 143 · 더 많은 세부 정보

    활동 로그 Activity Log

    활동 로그는 제품 작업을 시간 순서로 나열합니다. 각 행에는 누가 무엇을 어느 항목에 대해 언제 수행했는지가 표시됩니다.

  144. 144 · 핵심

    회원 관리 Member Management

    회원 관리는 허용된 관리자가 사람들을 초대하고, 상태를 확인하며, 역할을 변경하거나 접근을 제거할 수 있는 곳입니다.

  145. 145 · 핵심

    히어로 섹션 Hero Section

    hero section은 페이지의 첫 화면이에요. 누구를 위한지, 어떤 약속을 하는지, 증거는 무엇인지, 다음에 할 행동은 무엇인지 빠르게 알려줘요.

  146. 146 · 더 많은 세부 정보

    ARIA 그리드 ARIA Grid

    ARIA 그리드는 행과 셀의 상호작용 가능한 집합입니다. 화살표 키로 위, 아래, 왼쪽, 오른쪽으로 포커스를 이동합니다.

  147. 147 · 더 많은 세부 정보

    ARIA 피드 패턴 ARIA Feed Pattern

    ARIA 피드 패턴은 변화하는 기사 같은 항목들의 스트림입니다. 사람들이 이동함에 따라 새로운 항목을 추가하거나 오래된 항목을 제거할 수 있습니다.