디자인 시스템

디자인 토큰

공유 가치의 이름을 지정하고 관리합니다.

접근성

제품을 보고 조작하는 다양한 방법으로 사용할 수 있는지 확인하십시오.

확인 항목 10개 디자인 시스템

간격/그리드

콘텐츠와 화면이 변경될 때 레이아웃 리듬을 일관되게 유지하세요.

컬러 시스템

모든 인터페이스에서 명확한 역할을 갖고 의미를 유지하는 색상을 사용하세요.

확인 항목 8개

인터페이스 구성요소

각 구성요소의 구조, 변형, 상태를 확인하세요.

디자인 시스템

아코디언

쉽게 찾고 탐색할 수 있으면서도 콘텐츠를 축소할 수 있습니다.

배너

중요한 정보를 올바른 맥락에 배치하세요.

라디오 버튼

단일 선택을 명확하고 조작하기 쉽게 만듭니다.

툴팁

필수 정보를 숨기지 않고 설명을 추가합니다.

모달 대화상자

결정에 집중하고 마감 라인을 쉽게 찾을 수 있습니다.

입력 필드

정보 필드에 올바르게 입력하고 오류를 바로잡는 데 도움이 됩니다.

버튼

활성화 후 작업과 응답을 명확하게 합니다.

토글

효과를 추측할 필요 없이 상태를 변경합니다.

서랍

메인 화면 컨텍스트를 유지하면서 보조 콘텐츠를 엽니다.

날짜 선택기

형식이나 기간을 혼동하지 않고 날짜를 선택하는 데 도움이 됩니다.

탐색경로

콘텐츠 구조에서 백업 위치와 경로를 나타냅니다.

확인 항목 4개 디자인 시스템

경고

무슨 일이 일어났는지, 어떤 조치가 필요한지 보고하세요.

해골

레이아웃을 건너뛰지 않고 예정된 콘텐츠를 나타냅니다.

확인 항목 5개 디자인 시스템

회전목마

위치를 제어하면서 콘텐츠를 순차적으로 탐색할 수 있습니다.

슬라이더

제어된 값이나 값 범위를 선택하는 데 도움이 됩니다.

토스트

작업을 방해하지 않고 작업 후 짧은 피드백.

탭

동일한 수준의 콘텐츠 영역 간에 전환합니다.

체크박스

여러 항목을 선택하거나 독립적인 선택을 활성화합니다.

검색창

명확한 범위와 응답으로 검색을 시작하세요.

로드 중

작업이 진행 중이며 처리가 필요한 시기를 나타냅니다.

아이콘

어떤 크기에서도 아이콘을 알아볼 수 있고 의미 있게 유지하세요.

확인 항목 5개 디자인 시스템

테이블

스캔 및 비교를 위해 구조화된 데이터를 제시합니다.

확인 항목 10개 디자인 시스템

카드

정보와 작업을 스캔하기 쉬운 하나의 단위로 수집하세요.

확인 항목 5개 디자인 시스템

배지

주요 콘텐츠를 침해하지 않고 수량이나 상태를 추가하세요.

확인 항목 4개 디자인 시스템

아바타

신원을 보여주고 통제된 사진 업데이트를 제공하세요.

드롭다운 메뉴

관리하기 쉬운 메뉴에 관련 작업을 추가하세요.