////
/

Chips

Chips help people enter information, make selections, filter content, or trigger actions
칩은 사람들이 정보를 입력하고, 선택하고, 콘텐츠를 필터링하거나, 작업을 트리거하는 데 도움이 됩니다.
•
Use chips to show options for a specific context 칩을 사용하여 특정 상황에 맞는 옵션 표시하기
•
Four types: assist, filter, input, and suggestion
•
Chip elevation defaults to 0 but can be elevated if they need more visual separation
칩의 elevation 기본값이 0이지만 시각적 구분(이미지 위 등)이 더 필요한 경우 높일 수 있습니다.

Usage

Chips help people enter information, make selections, filter content, or trigger actions. They're best used to help users accomplish their current task faster and easier.
칩은 사람들이 정보를 입력하고, 선택하고, 콘텐츠를 필터링하거나, 작업을 트리거하는 데 도움이 됩니다. 칩은 사용자가 현재 작업을 더 빠르고 쉽게 완료할 수 있도록 돕는 데 가장 잘 사용됩니다.

Chips aren’t buttons(칩은 버튼이 아니다)

Chips and buttons are similar; they both provide visual cues to prompt users to take actions and make selections.
칩과 버튼은 사용자에게 행동을 취하고 선택하도록 유도하는 시각적 단서를 제공한다는 점에서 비슷합니다.
However, while buttons are expected to appear consistently and with familiar calls to action, chips should be dynamic to the situation, and appear as a group of interactive elements. 그러나 버튼은 익숙한 클릭 유도 문안과 함께 일관되게 표시되어야 하는 반면, 칩은 상황에 따라 동적으로 표시되어야 하며 대화형 요소의 그룹으로 표시되어야 합니다.
Use chips to enhance the user's current journey and encourage action, and buttons to progress through the product and take significant actions.
칩을 사용하여 사용자의 현재 여정을 개선하고 행동을 유도하고, 버튼을 사용하여 제품을 진행하며 중요한 조치를 취하도록 유도하세요.
•
Use chips to present contextual, supplemental options 칩을 사용하여 상황에 맞는 보조 옵션 제공
•
Avoid replacing major actions with chips. Actions that progress users to the next or previous step should always be displayed as buttons. 주요 동작을 칩으로 대체하지 마세요. 사용자를 다음 단계 또는 이전 단계로 안내하는 동작은 항상 버튼으로 표시해야 합니다.
Chips should dynamically offer various actions depending on the current task, whereas a button should be a persistent fixture of a layout.
칩은 현재 작업에 따라 다양한 동작을 동적으로 제공해야 하는 반면, 버튼은 레이아웃의 고정된 고정물이어야 합니다.
Chips represent forking paths for a current task, while buttons represent linear steps.
칩은 현재 작업의 분기 경로를 나타내며, 버튼은 선형적인 단계를 나타냅니다.
•
Use buttons for the final step in a user journey 사용자 여정의 마지막 단계에 버튼 사용
•
Avoid using chips to finish or progress in a user journey 사용자 여정을 완료하거나 진행하기 위해 칩을 사용하지 마십시오.
Multiple chips should appear together in a set, whereas there should be no more than 3 buttons in a single arrangement.
여러 개의 칩이 한 세트에 함께 표시되어야 하며, 하나의 배열에 3개 이하의 버튼이 있어야 합니다.
Chip sets can be scrolled horizontally.
칩 세트는 가로로 스크롤할 수 있습니다.
•
Chips can be scrolled horizontally 칩을 가로로 스크롤할 수 있습니다.
•
Don’t display a single chip by itself. Chips should appear in a set. 하나의 칩을 단독으로 표시하지 마세요. 칩은 세트로 표시해야 합니다.
chip
button
현재 작업에 따라 다양한 동작을 동적으로 제공
버튼은 레이아웃의 고정된 고정물 (일관됨)
상황에 맞는 보조 옵션 제공
1. 다음 단계 또는 이전 단계로 안내하는 동작 2. 사용자 여정의 마지막 단계에 버튼 사용
1. 여러 개의 칩이 한 세트에 함께 표시(단독 사용 불가) 2. 칩 세트는 가로로 스크롤할 수 있습니다.
하나의 배열에 3개 이하의 버튼

Assist chips

Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen. Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI. 어시스트 칩은 홈 화면에서 캘린더 이벤트 열기와 같이 여러 앱에 걸쳐 스마트하거나 자동화된 작업을 나타냅니다. 어시스트 칩은 마치 사용자가 어시스턴트에게 작업을 완료하도록 요청한 것처럼 작동합니다. UI에서 동적으로 상황에 맞게 표시되어야 합니다.
An alternative to assist chips are buttons, which should appear persistently and consistently.
어시스트 칩의 대안으로는 버튼이 있으며, 버튼은 지속적이고 일관되게 표시되어야 합니다.
•
The text in most assist chips begins with a short verb (like Get or Add) 대부분의 어시스트 칩의 텍스트는 짧은 동사(예: Get 또는 Add)로 시작됩니다.
•
An assist chip can surface supplemental information like a calendar event, as well as provide contextual actions 어시스트 칩은 캘린더 이벤트와 같은 추가 정보를 표시할 수 있을 뿐만 아니라 상황에 맞는 작업을 제공할 수도 있습니다.
•
During an interaction, assist chips can transform into modals, transition into full-screen views of new content, or readjust to display more results inline 상호작용 중에 어시스트 칩은 모달로 변환되거나, 새 콘텐츠의 전체 화면 보기로 전환되거나, 더 많은 결과를 인라인으로 표시하도록 재조정될 수 있습니다.
•
Tapping an assist chip triggers a contextual action 어시스트 칩을 탭하면 상황에 맞는 동작이 트리거됩니다.
•
Assist chips can show progress and confirmation feedback 지원 칩은 진행률 및 확인 피드백을 표시할 수 있습니다.
•
Assist chips should be shown underneath primary content 지원 칩은 기본 콘텐츠 아래에 표시되어야 합니다.

Filter chips

Filter chips use tags or descriptive words to filter content. They can be a good alternative to segmented buttons or checkboxes when viewing a list or search results. 필터 칩은 태그 또는 설명 단어를 사용하여 콘텐츠를 필터링합니다. 목록이나 검색 결과를 볼 때 세분화된 버튼이나 체크박스를 대체할 수 있는 좋은 대안이 될 수 있습니다.
Tapping on a filter chip activates it and appends a leading checkmark icon to the starting edge of the chip label. 필터 칩을 탭하면 활성화되고 칩 레이블의 시작 가장자리에 선행 체크 표시 아이콘이 추가됩니다.
Write filter chips with nouns that describe the category to include in the results. Avoid negative phrases like "Exclude images".
필터 칩은 결과에 포함할 카테고리를 설명하는 명사로 작성하세요. '이미지 제외'와 같은 부정적인 문구는 피하세요.
•
단일 선택일 수도 있고, 다중 선택일수도 있다. 하지만 칩 세트 동작을 혼합하면 안된다. 한페이지의 모든 칩세트는 단일선택 또는 다중 선택이어야한다.
•
필터 칩은 더 많은 필터링 옵션을 위한 메뉴를 열 수 있습니다.

Input chips

Input chips represent discrete pieces of information entered by a user, such as Gmail contacts or filter options within a search field. 입력 칩은 Gmail 연락처나 검색 필드 내의 필터 옵션과 같이 사용자가 입력한 개별 정보를 나타냅니다.
They enable user input and verify that input by converting text into chips. 입력 칩은 텍스트를 칩으로 변환하여 사용자 입력을 활성화하고 해당 입력을 확인합니다.
Input chips can support editing to change their contents, such as correcting an email address. In edit mode, the chip reverts back to a text string. Editing can be triggered by interacting with the chip, either by selecting it or by a second interaction after selection. 입력 칩은 이메일 주소 수정과 같은 내용 변경을 위한 편집을 지원할 수 있습니다. 편집 모드에서는 칩이 텍스트 문자열로 되돌아갑니다. 편집은 칩을 선택하거나 선택 후 두 번째 상호 작용을 통해 칩과 상호 작용하여 트리거할 수 있습니다.

Suggestion chips

Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as possible responses or search filters. 제안 칩은 가능한 답변이나 검색 필터와 같이 동적으로 생성된 제안을 제시하여 사용자의 의도를 좁히는 데 도움이 됩니다.
Write suggestion chips as nouns or short phrases, depending on context. Avoid exceeding 20 characters when possible.
문맥에 따라 명사 또는 짧은 문구로 제안 칩을 작성하세요. 가급적 20자를 넘지 않도록 하세요.
•
The text labels within suggestion chips are most often nouns or short phrases 제안 칩 내의 텍스트 레이블은 대부분 명사나 짧은 문구입니다.
•
Suggestion chips can offer quick-reply options in a chat or email app 제안 칩은 채팅 또는 이메일 앱에서 빠른 응답 옵션을 제공할 수 있습니다
•
A suggestion chip can help the user start a search 추천 칩은 사용자가 검색을 시작하는 데 도움이 될 수 있습니다.