Chip
정보를 간결하게 나타내는 작은 태그 형태의 UI 요소로, 텍스트나 아이콘을 포함하여 선택, 필터링 등의 기능을 제공합니다. 사용자가 쉽게 삭제하거나 상호작용할 수 있는 인터페이스를 제공합니다.Anatomy
Anatomy
- Container
- Label
Type
Type
Basic chip
여러 옵션 중 하나 혹은 여러 개를 선택할 때 사용됩니다. 전체 결과값에서 선택한 항목들의 결과만 선별해서 보여주는 필터의 역할을 합니다.
Input chip
사용자가 선택한 항목이나 입력한 텍스트를 태그화하거나 카테고리화할 때 사용되며 경우에 따라 삭제가 가능합니다. ex) 이메일 앱에서 수신인 입력 시, 입력된 각 이메일 주소 옆에 칩을 생성하여 사용자가 쉽게 관리할 수 있도록 합니다.
Anchor chip
특정 구역으로 빠르게 이동하기 위해 사용됩니다. 클릭 또는 탭 시 지정된 구역으로 스크롤됩니다.
Action chip
특정 작업이나 명령을 실행하기 위해 사용됩니다. 디자인 변경이 가능하며, 클릭 또는 탭 시 지정된 동작(ex: 연관 검색어 페이지 이동, 선택한 태그 검색 등)이 즉시 발생합니다.
Usage
Usage
Do
용도에 맞는 형태를 사용하도록 합니다. 레이블은 간결한 단어를 권장하며, 부득이하게 길게 사용될 경우 최대 20자를 넘지 않도록 하고, 말줄임표를 사용합니다.
Don’t
Chip의 형태나 컬러를 변경하지 않습니다. 레이블은 간결하게 유지하며, 두 줄 처리를 하지 않습니다.
Do
Tab과 함께 사용할 경우, 섹션의 계층 구조를 파악한 후 가이드가 권장하는 결합형태를 사용합니다.
Don’t
Tab을 사용해야 할 경우에 Chip을 사용하는 것은 권장되지 않습니다.
© KYOBO BOOK CENTRE교보문고 바로가기