# Tag Group
URL: /components/tag-group
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/tag-group.mdx

아이콘과 텍스트 태그를 수평으로 나열해 여러 속성·상태·메타데이터를 한눈에 보여주는 정보 요약 컴포넌트입니다.

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/tag-group) | Done |
| [Lynx](/lynx/components/tag-group) | Done |
| iOS | Not Ready |
| Android | Done |

## Anatomy

![Tag Group의 Anatomy 이미지. Tag와 Separator로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e2a60005-6546-4dfb-b824-8cd75bbbd353)

Tag Group은 아이콘과 텍스트로 구성된 Tag와 이를 구분하는 Separator로 이루어져 있습니다.

## Properties

### Size

![Tag Group의 Size Property - t2(12pt), t3(13pt), t4(14pt)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8dabe0f4-3c27-4f8e-b150-5228ff0e74f4)

Tag Group은 t2(12pt), t3(13pt), t4(14pt) 세 가지 사이즈가 있습니다.

### Tag Item Tone

![Tag Item의 Tone Property - Neutral Subtle, Neutral, Brand](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e9e2e4f5-d078-45fa-8035-b445928b274d)

Tag Item은 Neutral Subtle, Neutral, Brand 세 가지 색상을 사용할 수 있으며, 각 Item마다 다른 색상을 조합할 수 있습니다.

### Tag Item Weight

![Tag Item의 Weight Property - Regular, Bold](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9717d5d1-1d5f-46ba-b798-9d53b548cb02)

Tag Item의 라벨은 Regular, Bold 두 가지 두께로 표시할 수 있으며, 각 Item마다 다른 두께를 조합할 수 있습니다.

### Tag Item Icon

![Tag Item의 Icon Property - Prefix, Suffix 위치](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/97dd4c98-64ce-4061-ad96-54000c84579d)

Tag Item은 아이콘과 라벨을 함께 사용할 수 있습니다. 아이콘은 라벨의 앞(prefix) 또는 뒤(suffix)에 위치합니다. 앞뒤 모두에 아이콘을 표시하는 것은 권장하지 않습니다.

## Guidelines

### Tag Group의 사용 맥락

![Tag Group 사용 맥락 예시 - 카드, 상세 페이지, 유저 프로필](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1f09a177-a9da-48fd-a778-200a0178edff)

Tag Group은 하나의 UI 요소 안에서 여러 단편적인 정보를 압축적으로 표현하기 위해 사용됩니다. 사용자가 콘텐츠의 핵심 맥락을 빠르게 이해할 수 있도록 돕는 것이 주요 목적입니다.

다음과 같은 UI 상황에서 활용하는 것을 권장합니다:

- 카드형 콘텐츠에서 메타데이터 표시
- 상세 페이지에서 부가 정보 묶음 제시
- 유저 프로필 영역에 활동 요약 정보 표시

### Tag Item의 조합

Tag Item의 Tone, Weight, Layout 속성은 각 Item마다 다르게 적용해 조합할 수 있습니다. 단, 사이즈는 모두 동일하게 사용해야 합니다.

<DoImage body="Tag마다 Tone, Weight, Layout 속성을 다르게 적용할 수 있습니다." alt="Tag Item 조합 Do 예시 - 각 Tag마다 다른 속성 적용" />

<DontImage body="Tag Item은 모두 같은 사이즈를 사용해주세요." alt="Tag Item 조합 Don't 예시 - 서로 다른 사이즈 사용" />

### Tag 내용 작성하기

Tag Group은 스캔 가능한 정보를 한 줄에 요약하는 목적을 갖기 때문에, 텍스트는 가능한 한 짧고 명확해야 합니다. 가능한 줄바꿈이 발생하지 않도록 6~10자 내로 정보를 표시해주세요.

<DoImage body="텍스트는 불필요한 조사·접속어를 제외하고 간결하게 작성합니다." alt="Tag 내용 작성 Do 예시 - 간결한 텍스트" />

<DontImage body="텍스트는 가능한 줄바꿈되지 않도록 짧고 명확하게 작성해주세요." alt="Tag 내용 작성 Don't 예시 - 긴 텍스트로 줄바꿈 발생" />

### Tag 우선순위 설정

![Tag 우선순위 설정 예시 - 말줄임 처리](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/35a68814-49c8-4568-99c9-51d2a8ae6fbc)

태그 길이가 지나치게 긴 경우, 화면 너비 제약으로 일부 태그에 말줄임 처리(ellipsis)가 필요할 수 있습니다. 이때 태그의 우선순위를 지정하면 우선순위가 낮은 태그부터 말줄임이 적용됩니다.

우선순위를 지정하지 않으면 태그 내용이 줄바꿈되어 표시됩니다.

### Tag의 줄바꿈

![Tag 줄바꿈 예시 - 문자 단위 줄바꿈](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0334df5f-7330-4f0c-b104-adb029f3abd3)

Tag Group은 기본적으로 한 줄에 정보를 요약하도록 설계되어 있습니다. 하지만 태그 정보가 말줄임(Ellipsis)될 때 사용자가 정보를 제대로 이해하기 어렵다면, 줄바꿈을 허용하는 것이 더 적절할 수 있습니다. 폰트 스케일링으로 텍스트 크기를 크게 설정한 경우에도 줄바꿈이 발생할 수 있습니다.

Tag Group 내 태그는 '문자 단위(word-break: break-all)'로 줄바꿈됩니다. 이는 태그가 여러 줄로 표시되더라도 하나의 정보 단위로 인지되도록 하기 위함입니다.

## Specification

### Tag Group

Component spec (JSON): /rootage/components/tag-group.json

### Tag Group Item

Component spec (JSON): /rootage/components/tag-group-item.json