Chip Usage
짧은 텍스트, 속성, 상태를 시각적으로 표현하기 위해 사용됩니다.
Layout
Spacing
Static Chip
정보 표기 목적으로 여러 chip이 함께 배치될 때, 가독성을 위해 chip 간 간격은 spacing/100을 유지해야 합니다. chip 내부의 텍스트가 길어지거나 너무 많아지는 경우를 위해 자동으로 줄 바꿈될 수 있도록 flex-wrap을 고려할 수 있습니다. 이 경우, 줄 간 간격은 spacing/100을 적용합니다.
Interactive Chip
데이터 필터링 등 여러 chip이 그룹으로 배치될 때 chip 간 spacing/100 간격을 적용하나, 데이터 입력 목적으로 input field 내부에 chip을 삽입할 때는 chip 간 spacing/50 간격을 적용합니다.
Placement
Static Chip
데이터를 보조적으로 표현하기 위한 수단으로 사용되며, 정보 전달의 주체가 아니라 맥락을 보강하는 장치로 기능합니다. 카드, 데이터 그리드, 선택지와 같은 데이터 디스플레이 컴포넌트 내부에서 태그나 상태 라벨처럼 활용되며, 해당 데이터의 성격을 빠르게 식별할 수 있도록 배치되어야 합니다.
Interactive Chip
주로 사용자가 직접 조작하는 데이터 입력, 선택 또는 필터링 맥락에서 사용할 수 있습니다. 사용자가 입력이나 선택을 직관적으로 확인하고 수정할 수 있는 위치에 배치되어야 합니다.
데이터 입력 맥락에서는 입력 필드나 선택 컨트롤과 물리적으로 가까운 위치에 배치하여 사용자가 자신의 입력과 선택 결과를 직관적으로 확인할 수 있도록 합니다.
데이터 선택 또는 필터링 맥락에서는 조건으로 제공되는 chip들을 그룹 형태로 모아 정렬하여 보여주어야 합니다. 필터링 시, 결과 콘텐츠와 인접하게 배치하여 조건에 대한 결과를 직관적으로 이해하기 용이하도록 합니다.
사용자의 입력이나 선택 결과를 시각적으로 표현하는 용도로 배치합니다.
특정 액션의 실행을 목적으로 사용하지 않습니다.
주요 CTA 영역에 배치하지 않습니다.
내비게이션 목적으로 사용하지 않습니다.
Sizing
Chip의 너비는 불필요한 여백 없이 내용물 길이에 맞추어 적용합니다. 여러 chip이 함께 배치될 때는, chip의 너비가 부모 컨테이너의 60%를 초과하지 않도록 설계하는 것이 권장됩니다. 이 경우, 내부 텍스트는 말 줄임표를 통해 표현할 수 있습니다.
Chip의 너비는 내용물 길이에 맞추어 유연하게 적용합니다.
여러 chip이 함께 배치되는 경우 chip의 너비가 컨테이너의 60%를 초과하지 않도록 설계합니다.
Chip 내부에 불필요한 여백을 삽입하지 않습니다.
Content
Static Chip
Static chip은 정보 전달이 주목적이므로 텍스트를 간결하고 명확하게 작성합니다. 주로 상태, 카테고리, 속성과 같은 메타 정보를 표현할 때 사용하며, 주요 액션 요소보다 보조적인 시각 계층을 유지해야 합니다.
Interactive Chip
데이터 입력 맥락에서 interactive chip을 활용할 때는 사용자가 선택하거나 입력한 항목을 시각적으로 보여주고, 필요 시 제거하거나 수정할 수 있도록 설계합니다. 텍스트는 선택된 조건이나 입력 내용을 명확히 표현해야 하며, 제거 인터랙션이 동반되는 경우 chip 내부에 제거 아이콘 버튼을 함께 배치합니다. 일정 너비를 초과할 경우에는 내부 텍스트를 truncate 하여 표현합니다.
데이터 필터링 맥락에서 활용할 때는 chip의 텍스트가 필터링 조건을 직관적으로 드러내도록 간결하게 작성합니다.
Behaviors
Data Input
데이터 입력 맥락에서 interactive chip은 텍스트 입력 또는 항목 선택 시 해당 값을 시각적으로 보여주는 역할을 합니다. 사용자가 선택/입력한 항목을 즉시 확인하고, 필요시 제거하거나 수정할 수 있도록 설계해야 합니다. 또한, 원활한 제어를 위해 마우스 및 키보드 입력 지원이 권장됩니다.
필드 내 인터랙션
다중 항목의 입력이 지원되는 필드에서, 입력 값이 chip으로 표현될 수 있습니다. Chip 내부 제거 아이콘 버튼을 클릭하거나 Delete 키를 누르면 해당 항목이 입력 목록에서 제거됩니다.
사용자가 입력한 항목과 결과 간 연결이 직관적으로 유지되도록, 입력 필드와 물리적으로 인접하게 배치되어야 합니다.
키보드 내비게이션
Chip이 포커스를 가졌을 때 방향키로 이전/다음 chip 간 이동이 가능합니다. Backspace 키를 입력 시, 직전 chip이 제거되는 흐름을 지원합니다.
