컴포넌트는 사용자 인터페이스의 주요 구성 요소입니다. 재사용 가능한 컴포넌트 라이브러리를 구축하면 디자인 및 기술 부채를 줄이고 제품 개발 워크플로우를 향상시킬 수 있습니다. 핵심 컴포넌트는 의미를 잃지 않고는 더 작은 단위로 분해될 수 없습니다.

보조 기술로 콘텐츠 영역에 포커스할 때 트리거 요소의 추가 컨텍스트를 알려야 합니다.

콘텐츠와 트리거 관계

아코디언은 콘텐츠 가시성을 전환하기 위한 두 가지 상태를 가집니다. 아코디언 트리거에 아이콘이 표시되는 경우, 상태에 따라 시각적으로 구분되어야 합니다.

활성 상태

콘텐츠 영역은 다른 컴포넌트를 포함한 다양한 유형의 콘텐츠를 지원할 수 있을 만큼 유연해야 합니다.

구성

상태 전환 시 사용자가 컴포넌트의 동작을 이해하고 따라갈 수 있도록 미묘한 애니메이션을 추가합니다.

전환 애니메이션

아코디언은 트리거 요소가 클릭되었을 때 콘텐츠 영역의 가시성을 전환합니다.

아코디언

보조 기술을 사용할 때 알림은 접근성 역할을 올바르게 알려야 합니다.

접근성 역할

알림의 액션은 텍스트와 연관되어야 하며 사용자에게 전달된 메시지에 대응할 수 있는 방법을 제공해야 합니다.

보조 액션

알림의 역할에 따라 시각적 모양을 구분하는 것이 중요합니다. 역할 구분을 위해 배경색을 사용하는 경우, 알림 내부에 표시되는 콘텐츠와의 대비율이 충분한지 확인하세요.

색상

아이콘은 알림의 역할을 설명하고 색맹인 사용자에게 추가적인 힌트를 제공합니다.

아이콘 지원

알림은 뷰포트 크기에 맞게 조정될 수 있으며, 일반적으로 모바일에서는 공간을 절약하기 위해 전체 너비로 표시됩니다.

반응형

긴 알림 메시지의 경우 제목을 지원하면 사용자가 메시지의 맥락을 더 빠르게 이해할 수 있습니다.

제목 지원

알림은 전체 페이지나 특정 영역에 대한 중요한 메시지를 표시합니다.

알림

아바타가 장식용이 아닌 이미지에 사용되고 내용에 대한 텍스트 표현이 없는 경우 접근성 레이블을 제공해야 합니다.

접근성 레이블

이미지 없이 사용할 때는 아바타 형태에 배경색을 적용해야 합니다. 아이콘과 텍스트가 WCAG AA 표준에 따라 배경과 충분한 대비율을 가지는지 확인하세요.

여러 아바타를 함께 쌓아서 사용자 그룹을 표현할 수 있습니다.

아바타 그룹

아바타는 이미지를 형태에 맞게 마스킹해야 하며, 알 수 없는 데이터 소스에서 이미지를 가져올 수 있으므로 모든 이미지 크기에서 작동해야 합니다.

이미지

이미지를 전달하지 않거나 이미지 로딩 오류가 발생할 경우, 아바타는 다른 이미지, 아이콘 또는 텍스트 이니셜로 대체할 수 있어야 합니다.

이미지 대체

아바타는 사용되는 영역에 따라 사각형이나 원형과 같은 여러 형태를 지원할 수 있습니다.

형태

아바타를 사용하는 맥락이 다양하므로 컴포넌트에 대한 다양한 크기가 필요합니다. 일반적인 프로젝트의 경우 최소 2-3개의 다른 크기를 사용하고 작은 크기를 반드시 포함하세요.

크기

사용자 사진, 조직 또는 다른 유형의 콘텐츠를 시각적으로 표현하는 썸네일입니다.

아바타

배지는 제품에서 다양한 역할을 수행할 수 있으며, 각 역할에 대해 미리 정의된 색상을 사용하면 사용자가 의미를 이해하는 데 도움이 됩니다. 색상을 변경할 때는 WCAG AA 표준에 따라 텍스트와 배경 간의 대비율이 충분한지 확인하세요.

배지는 선택된 값을 동적으로 표시하는 데 사용될 수 있으며, 이를 해제할 수 있는 방법이 있어야 합니다.

해제 액션

배지는 내부에 텍스트 내용 없이 사용될 수 있습니다. 이 경우 일반적으로 올바른 형태를 유지하기 위해 스타일을 변경해야 합니다.

빈 상태

배지의 의미를 더 잘 설명하기 위해 텍스트 옆에 아이콘을 표시할 수 있습니다. 작은 배지의 경우에도 아이콘 내용을 인식할 수 있는지 확인하세요.

알림 표시기와 같은 상태 배지로 사용될 때는 해당 요소를 기준으로 위치를 지정할 수 있어야 합니다.

위치 지정

배지는 사용되는 위치에 따라 여러 크기로 제공될 수 있습니다. 예를 들어, 마케팅 페이지에는 큰 크기를 사용할 수 있습니다.

제품 내 배지가 표시되는 위치에 따라 여러 컴포넌트 변형을 지원할 수 있습니다. 예를 들어, 너무 많은 주의를 끌지 않도록 페이드된 배경을 사용하는 배지를 만들 수 있습니다.

변형

객체의 상태나 사용자 입력을 나타내는 간단한 요소입니다.

배지

경로 탐색 항목이 부모 컨테이너에 맞지 않는 경우, 목록은 사용자에게 관련 있는 항목만 표시되도록 항목을 축소하는 기능을 지원해야 합니다.

축소 상태

사용자가 특정 페이지로 이동하는 것을 방지하기 위해 목록의 각 항목을 개별적으로 비활성화할 수 있습니다.

비활성화 상태

아이콘은 경로 탐색 항목이 연결하는 페이지의 역할을 전달하는 데 도움이 됩니다. 대부분의 경우 목록의 임의 항목에만 사용하는 것이 아니라 일관되게 사용되도록 해야 합니다.

사용 맥락에 따라 경로 탐색 목록의 항목은 다른 구분자 스타일을 사용할 수 있습니다.

사용자 정의 구분자

현재 페이지의 위치를 이해하고 상위 페이지로 이동할 수 있도록 도와주는 최상위 제품 탐색 기능입니다.

경로 탐색

키보드나 보조 기술을 사용하여 포커스될 때 버튼은 시각적 포커스 표시가 있어야 합니다.

포커스 표시

버튼은 버튼이나 링크의 접근성 역할을 올바르게 알려야 하며, 전달된 속성을 기반으로 자동으로 해결해야 합니다.

버튼이 눌리거나, 값 선택에 사용되거나, 페이지의 다른 요소를 토글할 때 시각적 표시를 제공하세요.

버튼은 제품에서 다양한 역할을 수행할 수 있으며, 각 역할에 대해 미리 정의된 색상을 사용하면 사용자가 의미를 이해하는 데 도움이 됩니다. 색상을 변경할 때는 WCAG AA 표준에 따라 텍스트와 배경 간의 대비율이 충분한지 확인하세요.

버튼이 상호작용할 수 없음을 시각적으로 보여주고 누르는 것을 제한합니다.

마우스 커서를 올렸을 때 버튼이 상호작용 가능함을 명확히 보여주세요.

호버 상태

아이콘은 레이블 옆에 사용될 때 버튼의 목적을 쉽게 전달하거나, 공간이 부족할 때 텍스트 없이 사용될 수 있습니다. 아이콘만 사용할 때는 접근성 레이블을 제공해야 합니다.

버튼을 누른 후 사용자가 결과를 기다려야 할 때를 표시합니다. 스피너를 사용하여 이 상태를 표시할 경우, 원래 버튼의 너비나 높이가 변경되지 않도록 하세요.

로딩 상태

버튼이 사용되는 위치에 따라 여러 크기로 제공될 수 있습니다. 예를 들어, 애플리케이션의 밀집된 영역에는 작은 크기를 사용할 수 있습니다.

여러 버튼을 사용할 때는 기본 액션과 보조 액션을 구분할 수 있어야 합니다. 버튼은 사용자에게 다른 역할을 수행하거나 다양한 표면에서 사용될 수 있으며, 그에 따라 외관이 변경되어야 합니다.

단일 단계 작업에 사용되는 상호작용 요소입니다.

버튼

달력 날짜는 키보드와 보조 기술로 포커스할 수 있어야 합니다. 날짜 탐색은 키보드 화살표나 스크린 리더 탐색으로 이루어져야 하며, 열이나 행 밖으로 탐색하여 월을 전환하는 것을 지원해야 합니다.

키보드 탐색

선택된 날짜는 포커스될 때 보조 기술이 알려야 합니다.

상태 안내

사용자가 날짜 선택을 더 쉽게 탐색할 수 있도록 날짜 숫자와 함께 요일 이름의 짧은 레이블을 제공하세요.

요일 이름

달력은 제품이 지원하는 모든 국가 지역에 맞게 현지화되어야 합니다. 여기에는 날짜 형식과 요일의 올바른 순서가 포함됩니다.

국제화

달력은 다양한 제품 영역과 뷰포트에서 사용될 수 있습니다. 두 개 이상의 월을 표시하거나 세로 레이아웃을 위한 다양한 표시 모드를 지원하세요.

표시 모드

사용자가 긴 날짜 범위를 탐색하는 데 도움이 되도록 달력은 표시되는 월을 쉽게 전환할 수 있는 방법을 제공해야 합니다.

월 선택

달력은 단일 날짜와 선택 범위를 지원해야 합니다. 선택된 날짜는 시각적으로 강조되어야 하며, 선택된 날짜 사이의 범위가 사용자에게 보여야 합니다.

선택 상태

하나 이상의 월의 날짜를 표시하는 그리드로, 사용자가 단일 날짜나 날짜 범위를 선택할 수 있게 합니다.

달력

카드는 일반적으로 카드 하단에 배치되는 작업과 함께 사용되거나, 카드 자체가 탭 가능하고 작업을 나타낼 수 있습니다.

보조 작업

콘텐츠 구성

여러 카드를 단일 콘텐츠 섹션 목록으로 그룹화할 수 있습니다.

카드 그룹

카드는 미디어 콘텐츠와 자주 사용됩니다. 가장 인기 있는 옵션은 콘텐츠 상단에 전체 너비 영역을 두거나 카드의 한쪽에 영역을 두는 것입니다.

미디어 섹션

모바일 뷰포트에서는 콘텐츠를 위한 공간을 절약하기 위해 카드가 일반적으로 전체 너비를 차지합니다.

주제와 관련 작업에 대한 정보를 그룹화하는 컨테이너입니다.

카드

체크박스 선택은 키보드로 트리거되어야 합니다. 이를 위해 네이티브 요소를 사용하면 이러한 상호작용이 자동으로 제공됩니다.

키보드 지원

체크박스가 선택되고 폼 제출에 사용될 때 표시됩니다.

체크 상태

체크박스 상호작용을 방지하고 제출된 폼 값에서 해당 값을 제거하기 위해 비활성화 상태를 사용하세요.

오류가 체크박스 필드와 관련있을 때 폼 유효성 검사를 위해 오류 상태를 사용하세요. 항상 다른 필드 색상과 함께 텍스트 오류를 사용하세요.

오류 상태

체크박스는 동시에 여러 값을 처리하기 위해 그룹화될 수 있습니다.

체크박스 그룹

체크박스에 선택 가능한 하위 요소가 있고 일부만 선택되었을 때 시각적으로 표시합니다.

중간 상태

체크박스 필드와 연결된 텍스트 레이블이 있어야 합니다. 레이블을 클릭해도 체크박스 선택이 되어야 합니다. 레이블이 페이지에 렌더링되지 않더라도 보조 기술은 여전히 이를 알려야 합니다.

레이블

목록에서 하나 또는 여러 값을 선택하는 데 사용되는 폼 필드입니다.

체크박스

구분선이 레이아웃에서 장식적이지 않은 역할을 수행하는 경우, 보조 기술이 그 역할을 알려야 합니다.

구분선은 수평 및 수직 콘텐츠 목록 모두를 분리해야 합니다.

방향

시각적 콘텐츠 분리를 위한 요소

구분선

드롭다운 콘텐츠가 열리면 포커스 링은 콘텐츠 영역 안으로 이동하고 닫힐 때 트리거 요소로 돌아가야 합니다.

포커스 트래핑

드롭다운은 키보드와 보조 기술에 접근 가능해야 합니다. 사용자는 별도의 닫기 작업을 사용하거나 콘텐츠 영역 밖으로 탭하여 드롭다운을 닫을 수 있어야 합니다.

드롭다운은 컨텍스트 메뉴, 제품 탐색 등 다양한 목적으로 사용될 수 있습니다. 콘텐츠 영역은 다른 컴포넌트를 포함한 다양한 유형의 콘텐츠를 지원할 수 있을 만큼 유연해야 합니다.

드롭다운은 호버 이벤트에서 콘텐츠를 표시하는 것을 지원해야 합니다. 키보드 사용자의 경우 트리거가 포커스되면 동일한 동작이 발생해야 합니다.

호버 트리거

드롭다운 콘텐츠는 화면에서 트리거 요소의 현재 위치를 기반으로 표시되어야 하며 항상 사용자에게 보여야 합니다.

동적 위치 지정

드롭다운 콘텐츠가 모바일 기기에서 데스크톱과 동일한 방식으로 화면에 맞지 않는 경우 조정되어야 합니다.

사용자가 트리거할 수 있는 상황별 작업 목록입니다.

드롭다운

아이콘은 대부분 장식적 요소로 사용됩니다. 아이콘이 상호작용 가능하도록 의도된 경우, 그 기능은 버튼, 링크 또는 다른 상호작용 컴포넌트를 사용하여 포함되어야 합니다.

상호작용

아이콘은 디자인 시스템 토큰에서 사용할 수 있는 색상 값을 지원해야 합니다. 또한 부모 요소로부터 색상을 상속받는 것을 지원하는 것이 좋은 방법입니다.

아이콘은 제품 전반에 걸쳐 일관된 경험을 제공하기 위해 여러 가지 미리 정의된 크기를 가져야 합니다. 텍스트 크기와 맞추기 위해 타이포그래피 쌍을 이 크기 값에 사용할 수 있습니다.

SVG 자산의 모양을 제어하기 위한 래퍼

아이콘

이미지가 장식용이 아닌 경우, 이미지 내용을 설명하는 대체 텍스트를 제공해야 합니다.

대체 텍스트

화면 밀도에 따라 다양한 크기의 여러 이미지 자산을 로드하고 사용자에게 적절한 것을 제공하는 것을 지원해야 합니다.

화면 밀도 지원

이미지 URL이 잘못되었거나 정의되지 않은 경우 대체 요소를 표시합니다. 이는 배경이 있는 빈 상자, 아이콘 또는 정적 플레이스홀더 이미지가 될 수 있습니다.

이미지는 지원되는 크기 측면에서 유연해야 합니다. 너비와 높이를 지원하는 것 외에도, 부모 요소를 기반으로 비율을 동적으로 조정하기 위한 종횡비 지원을 추가하세요.

이미지를 표시하고 동작을 제어하기 위한 유틸리티입니다.

링크는 전달된 속성을 기반으로 버튼 또는 링크 접근성 역할을 자동으로 해결하고 올바르게 알려야 합니다.

링크는 제품에서 다양한 역할을 수행할 수 있으며, 각 역할에 대해 미리 정의된 색상을 사용하면 사용자가 의미를 이해하는 데 도움이 됩니다. 링크는 텍스트 요소이므로 다른 텍스트 내용과 마찬가지로 부모 요소에서 정의된 색상을 자동으로 상속받을 수 있어야 합니다.

링크가 상호작용할 수 없음을 시각적으로 보여주고 누르는 것을 제한합니다.

링크는 텍스트 요소의 일부로 사용될 때 타이포그래피 스타일을 상속받을 수 있어야 합니다.

폰트 상속

링크의 목적을 전달하기 위해 링크 옆에 아이콘을 사용할 수 있습니다. 텍스트 레이블 없이 링크 내에서 아이콘을 사용해서는 안 됩니다.

텍스트 단락 내에서 사용될 때 링크는 텍스트 흐름을 깨지 않고 여러 줄 표시를 지원해야 합니다.

여러 줄 표시

텍스트 단락 내에서 탐색에 사용되는 상호작용 텍스트 요소입니다.

링크

보조 기술은 올바른 역할과 표시된 항목 수로 목록을 알려야 합니다.

목록 항목 콘텐츠 영역은 다른 컴포넌트를 포함한 다양한 유형의 콘텐츠를 지원할 수 있을 만큼 유연해야 합니다.

목록 항목은 글머리 기호, 번호 매기기 및 기타 스타일과 순서 유형을 사용할 수 있습니다.

순서

목록은 항목 목록을 표시하는 데 사용됩니다.

목록

로딩 표시기가 독립적으로 사용되는 경우, 로딩 중인 콘텐츠 영역에 대한 접근성 레이블을 제공하세요.

로딩 표시기는 시스템 모션 설정과 동기화되어야 하며 모션 감소 설정이 켜져 있을 때 애니메이션 속도를 줄여야 합니다.

모션 감소

로딩 표시기는 다양한 역할을 가진 요소 내에서 사용될 수 있으며 해당 색상 구성표를 따라야 합니다.

일부 경우에는 대기 시간을 결정할 수 없습니다. 로딩 표시기는 로딩이 완료되거나 오류가 발생할 때까지 표시되어야 합니다. 다른 경우에는 로딩이 완료될 때까지 남은 시간을 표시하는 것이 더 좋습니다.

로딩 시간

로딩 표시기는 렌더링되는 영역의 크기에 따라 여러 크기를 제공할 수 있습니다.

프로세스가 얼마나 걸릴지 알려주지 않고 진행 상황을 전달하는 애니메이션 요소입니다.

로딩 표시기

모달이 열릴 때 사용자 포커스는 첫 번째 포커스 가능한 요소로 이동하고 그 안에 갇혀 있어야 합니다. 모달이 닫힐 때 포커스는 마지막 활성 요소로 돌아가야 합니다.

Esc 키를 눌러 모달을 닫을 수 있어야 하며, 모달 컨테이너 내의 모든 포커스 가능한 요소는 키보드 탐색으로 접근할 수 있어야 합니다.

모달은 올바른 접근성 역할을 사용해야 하며, 제목과 부제목 요소로 레이블이 지정되어야 합니다. 눈에 보이는 제목이나 부제목이 없는 경우 접근성 레이블을 대신 사용할 수 있습니다.

제목과 부제목 레이블링

모달의 콘텐츠가 실행 가능할 수 있으므로 작업 요소를 위한 영역이 필수적입니다. 이 영역은 일반적으로 모달 컨테이너의 하단에 위치합니다.

모달은 열려 있을 때 콘텐츠를 차단하므로 간단한 닫기 방법을 제공해야 합니다. 이는 별도의 닫기 버튼이나 보조 작업 중 하나일 수 있습니다.

닫기 작업

메인 콘텐츠 영역은 다른 컴포넌트를 포함한 다양한 유형의 콘텐츠를 지원할 수 있을 만큼 유연해야 합니다.

모달은 화면 중앙에 위치하거나 화면 양쪽에서 슬라이딩 시트로 표시될 수 있습니다.

표시하는 콘텐츠에 따라 모달의 높이와 너비를 변경하는 것을 지원하세요.

중요한 정보나 실행 가능한 콘텐츠를 제공하기 위해 메인 콘텐츠 앞에 나타나는 컨테이너입니다.

모달

페이지네이션은 보조 기술을 위해 단순히 숫자만 알리는 대신 각 페이지에 대한 명확하고 동적인 레이블을 제공해야 합니다.

전체 페이지 레이블 알림

페이지네이션은 선택된 페이지가 포커스될 때 이를 알려야 합니다.

상태 알림

페이지에 표시되는 페이지네이션된 항목의 수를 선택할 수 있는 옵션을 제공합니다.

페이지당 항목 수

사용 가능한 전체 페이지 수를 미리 알 수 없는 경우, 페이지를 개별적으로 탐색하기 위한 다른 표시 모드를 사용하세요.

불확정 페이지 수

선택된 페이지 주변에 렌더링되는 페이지의 범위를 정의합니다. 이는 제한된 수의 페이지만 렌더링하지만 사용자가 한 번에 1페이지씩 이동하는 것보다 빠르게 탐색할 수 있게 해줍니다.

페이지 표시 범위

목록에서 선택된 페이지를 시각적으로 강조하고 상호작용할 수 없게 만듭니다.

선택된 페이지 상태

페이지네이션은 페이지 범위에서 선택을 가능하게 합니다.

페이지네이션

인터페이스에 레이블을 표시할 수 없는 경우를 위해 접근성 레이블을 추가하기 위한 지원을 제공하세요.

지속 시간

진행 막대가 담당하는 내용을 설명하는 레이블을 시각적으로 표시하기 위한 지원을 제공하세요.

오래 걸리거나 여러 단계로 구성된 작업의 진행 상황을 표시하는 막대입니다.