칩·태그, 제대로 쓰는 팁
칩의 사용방법과 좋은 사례
칩의 구성
칩은 정보를 입력하거나 선택하고, 콘텐츠를 필터링하기 위한 컴포넌트입니다. 태그라고도 불리는 칩은 다음과 같은 요소로 구성됩니다.
➊ Container (컨테이너)
➋ Label Text (레이블)
➌ Leading Icon or Image (Optional) (선행 아이콘 · 텍스트)
➍ Trailing Icon (Required for input chips, optional for filter chips) (후행 아이콘)
칩의 종류
칩은 구성요소에 따라 4가지의 종류로 분류할 수 있습니다.
➊ Assist Chip (지원형 칩)
➋ Filter Chip (필터형 칩)
➌ Input Chip (입력형 칩)
➍ Suggestion Chip (제안형 칩)
종류별 칩의 사용방법
종류별 칩의 사용 방법을 아래에 이어서 알아보도록 하겠습니다.
➊ Assist Chip (지원형 칩)
지원형 칩은 캘린더 이벤트를 여는 것과 같이 자동화된 작업을 수행합니다. 지원형 칩의 대안으로는 버튼을 사용할 수도 있습니다.
일정 이벤트와 같은 보충 정보를 표시하고, 상황에 맞는 작업을 제공합니다.
일반적으로는 기본 콘텐츠 아래에 표시될 수 있습니다.
➋ Filter Chip (필터형 칩)
필터형 칩은 태그나 설명적 단어를 사용하여 콘텐츠를 필터링합니다. 필터형 칩을 선택하면 활성화되고, 선행 아이콘이 추가됩니다.
여러 개의 칩을 선택할 수도, 단일 칩을 선택할 수도 있습니다. 이는 세그먼트 버튼, 라디오 버튼에 대한 대안으로 사용됩니다. 그러나 페이지의 모든 칩 세트는 단일 선택 또는 다중 선택 중 하나여야 합니다.
삭제 아이콘을 통해 필터를 제거하거나, 메뉴를 통해 더 많은 필터링 옵션을 열 수 있습니다.
➌ Input Chip (입력형 칩)
입력형 칩은 메일 주소나 검색 필드 내의 옵션 등 사용자가 입력한 개별적인 정보를 나타냅니다. 이는 사용자가 입력할 수 있도록 하고, 텍스트를 칩으로 변환하여 입력됨을 나타냅니다.
입력형 칩은 메일 주소 수정과 같이 내용을 변경하기 위한 편집모드를 지원할 수 있습니다.
단일 필드에는 여러 개의 입력형 칩이 포함될 수 있으며, 해당 칩을 다시 정렬하거나 다른 필드로 이동할 수 있습니다.
➍ Suggestion Chip (제안형 칩)
제안형 칩은 제안을 제시하여 사용자의 의도를 좁히는데 도움을 줍니다. 맥락에 따라 명사나 짧은 문구로 작성할 수 있습니다.
제안형 칩은 사용자가 빠른 답장 옵션을 선택하거나 검색을 하는데 도울 수 있습니다.
칩의 좋은 사례
칩 컴포넌트의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
CanvaCanva는 그라디언트 색상의 컨테이너를 가진 지원형 칩을 제공하고 있습니다. 리치한 비주얼의 아이콘을 통해 메인 페이지에서 사용자의 행동을 유도합니다.
EbayEbay는 다른 쇼핑 앱과 유사하게 검색 창 아래에 필터형 칩을 제공하고 있습니다. 가로로 스크롤링하여 더 많은 칩을 확인할 수 있습니다.
RedditReddit의 관심사 선택 페이지에서는 카테고리별 세부 항목을 필터형 칩으로 선택할 수 있습니다. 가로로 스크롤되는 칩이 두 줄로 구성된 점이 인상적입니다.
마치며
Apple의 Human Interface Guideline에서는 칩을 컴포넌트에 따로 구성해두지 않은 것으로 보입니다. 또한 본 글에서 소개한 M3의 분류는 Input, Choice, Filter, Action 4가지로 분류한 이전 M2 버전과는 달라진 모습입니다. M2의 Action 칩이 M3에서는 Assist 및 Suggestion 칩으로 분리되고, Choice 칩은 Filter 칩의 하위로 편입되었다고 합니다.
칩 컴포넌트의 구성요소는 아이콘의 유무나 위치 외에는 크게 달라질 부분이 없으므로, 비주얼보다는 기능적으로 분류되어 보입니다. 가이드마다 이러한 분류는 다를 수 있으므로 엄격히 따질 필요는 없겠으나, 칩의 종류별로 고려할 사항이 다르기 때문에 한 번 확인해 보시면 좋을 것 같습니다.
칩에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다!
