Tag

Tag (태그)

태그는 항목을 설명하는 키워드로 라벨을 붙이거나, 분류하거나, 정리할 때 사용하는 컴포넌트예요. 콘텐츠가 여러 카테고리에 매핑되어 있고 사용자가 그것들을 구분할 방법이 필요할 때 유용하게 씁니다.

출처: Tag

본문

AI 라벨이 있는 Tag가 이제 안정(stable) 버전으로 제공돼요. 이 추가 사항은 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성(explainability) 기능을 도입합니다.

개요 (Overview)

태그는 서로 다른 항목에 라벨을 붙이거나, 분류를 만들거나, 데이터를 필터링하거나, 옵션을 선택·해제하거나, 다른 뷰에서 여러 관련 태그를 펼쳐 보여주는 기능을 담당해요. 이런 다양한 사용 사례를 지원하기 위해 태그에는 읽기 전용(read-only), 제거 가능(dismissible), 선택 가능(selectable), 운영(operational)의 네 가지 변형이 있습니다.

언제 사용할까요 (When to use)

• 콘텐츠가 여러 카테고리에 매핑되고, 사용자가 그것들을 구분할 방법이 필요할 때
• 분류, 라벨링, 또는 읽기 전용 상황에 사용할 때
• 페이지, 컴포넌트 안에서, 또는 검색 기능과 함께 데이터를 필터링하는 방식으로 사용할 때
• 채팅 흐름에서 결정을 내리고 채팅을 진행할 때
• 사용자가 만든 사용자 정의 라벨링을 만들 때, 그리고 만든 라벨을 제거해야 할 때
• 팝오버, 모달, 상세 뷰처럼 여러 태그의 오버플로(overflow)를 볼 때

언제 사용하지 말아야 할까요 (When not to use)

• 완전히 다른 페이지로 이동시키거나 현재 경험에서 별도의 탭으로 이동시키는 링크로 태그를 사용하지 마세요.
• 혼란을 막고 우발적 클릭을 줄이기 위해 여러 기능을 가진 태그 사용은 피하세요.

변형 (Variants)

Variant	Purpose
Read-only tag	인터랙티브 기능이 없고 주로 분류와 라벨링에 사용되는 태그예요.
Dismissible tag	제거하거나, 닫거나, 삭제할 수 있는 태그예요. 주로 필터링과 사용자 생성 콘텐츠에 사용됩니다.
Selectable tag	선택하거나 선택 해제할 수 있는 태그로, 페이지 맥락에서 데이터를 필터링하는 선택 항목으로 자주 쓰여요. 채팅 흐름에서 채팅을 진행시킬 결정을 내리는 데도 사용할 수 있습니다.
Operational tag	상호작용하면 팝오버, 모달, 브레드크럼 상세 뷰처럼 추가 태그나 오버플로 태그를 펼쳐 보여줘요.

포맷 (Formatting)

구조 (Anatomy)

읽기 전용, 제거 가능, 선택 가능, 운영 태그는 모두 컨테이너, 텍스트 제목, 그리고 선택적인 장식 아이콘을 더할 수 있는 옵션으로 구성돼요. 제거 가능 태그에는 태그를 필터링하거나 제거할 수 있는 추가 닫기(close) 아이콘이 포함됩니다. 선택 가능 태그와 운영 태그에는 컨테이너 테두리가 포함되어, 한눈에 이 변형들이 인터랙티브함이 높고 다르게 동작함을 나타냅니다.

1. 읽기 전용 태그

A. 장식 아이콘(선택) B. 제목 C. 컨테이너

2. 제거 가능 태그

A. 장식 아이콘(선택) B. 제목 C. 컨테이너 D. 닫기 아이콘

3. 선택 가능 태그

A. 장식 아이콘(선택) B. 제목 C. 컨테이너 E. 테두리

4. 운영 태그

A. 장식 아이콘(선택) B. 제목 C. 컨테이너 E. 테두리

크기 (Sizing)

태그에는 작은(small), 중간(medium), 큰(large) 세 가지 크기가 있어요. 좁거나 인라인 공간에는 작은 태그를 사용하세요. 중간 태그 크기가 기본이며 가장 흔히 사용됩니다. 태그가 페이지의 주요 작업이거나 초점이 될 때, 화면 공간이 더 넉넉할 때, 또는 높이 32px인 다른 컴포넌트 옆에 태그가 위치할 때는 큰 태그를 사용하세요.

배치 (Placement)

태그의 컨테이너를 근처의 다른 컴포넌트나 텍스트에 세로로 정렬하세요. 태그의 제목을 페이지의 다른 텍스트와 세로 정렬하기 위해 태그 컨테이너를 그리드 거터(gutter)에 걸치게 하지 마세요. 태그를 그룹으로 배치할 때는 위·아래·왼쪽·오른쪽에 태그 사이를 8px 띄우는 것을 권장합니다.

콘텐츠 (Content)

주요 요소 (Main elements)

제목 (Title)

• 태그 제목은 간결하고 유익해야 해요.
• 태그 제목은 몇 단어로 태그를 설명하거나, 가능하면 20자 미만이어야 합니다.
• 사용자 정의 카테고리 이름이나 시스템 생성 문자열처럼 필요할 때만 긴 제목 콘텐츠를 태그에 포함하세요.

오버플로 콘텐츠 (Overflow content)

태그 제목이 태그 컨테이너의 사용 가능한 공간에 맞기 너무 길면 제목을 줄임표(ellipsis)로 잘라낼 수 있어요. 마우스로는 호버 시 브라우저 툴팁에서 전체 제목을 보여주고, 키보드로는 포커스 시 툴팁에서 전체 제목을 보여줍니다. 잘림은 주어진 사용 사례에 가장 좋은 위치(제목의 시작, 중간, 끝)에 설정하세요.

태그 제목이 태그 컨테이너 안에서 여러 줄로 줄바꿈되는 것은 피하세요. 이는 태그의 모양과 전통적인 태그 형태의 온전함을 해칠 수 있는데, 태그는 콤팩트한 형태여야 해요. 또한 그룹 안에 배치되면 다른 태그와 정렬이 어긋날 수도 있습니다.

오버플로된 태그 제목 텍스트의 전체 길이를 보여주려면 브라우저 툴팁을 사용하세요. 오버플로된 태그 제목 텍스트를 여러 줄로 줄바꿈하지 마세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

상태 (States)

네 가지 태그 변형은 각각 다른 상태를 가져요.

• 읽기 전용 태그: 활성, 비활성, 스켈레톤
• 제거 가능 태그와 운영 태그: 활성, 호버, 포커스, 클릭 시(on click), 비활성, 스켈레톤
• 선택 가능 태그: 활성, 호버, 포커스, 선택됨, 비활성, 스켈레톤

태그 상태에 대한 자세한 내용은 스타일 탭을 참고하세요.

State	When to use
Enabled	태그가 활성 상태이지만 사용자가 직접 상호작용하지 않을 때예요. 보통 컴포넌트의 기본 또는 일반 상태라고 부릅니다.
Hover	사용자가 마우스 커서로 태그 위를 지나가며 상호작용하려 할 때예요 (읽기 전용 태그 제외).
Focus	사용자가 태그를 탭하거나 클릭하면 포커스되어 컴포넌트로 성공적으로 이동했음을 나타내요 (읽기 전용 태그 제외).
On click	사용자가 태그를 제거하거나 추가 태그 리스트를 펼치기 위해 enter, space, 또는 클릭을 누를 때예요.
Selected	사용자가 태그를 선택하거나 선택 해제하기 위해 enter, space, 또는 클릭을 누를 때예요.
Disabled	권한, 의존성, 선행 조건 때문에 사용자가 태그와 상호작용할 수 없을 때예요. 비활성 상태는 컴포넌트에서 인터랙티브 기능을 완전히 제거합니다. 스타일은 WCAG 대비 준수 대상이 아닙니다.

인터랙션 (Interactions)

마우스 (Mouse)

• 읽기 전용 태그: 호버 시 마우스 커서 외의 마우스 기능을 얻지 않으며 인터랙티브 기능이 없어요.
• 제거 가능 태그: 태그의 제목 영역 위를 호버하면 마우스 커서를 얻어요. 닫기 아이콘 위를 호버하면 아이콘에 배경색 변경과 마우스 포인터가 생깁니다. 닫기 아이콘 영역을 클릭하면 태그가 제거되거나 닫히거나 삭제돼요.
• 선택 가능 태그: 호버 시 전체 배경색 변경과 마우스 포인터를 얻어요. 태그의 아무 곳이나 클릭하면 선택된 상태가 됩니다. 선택된 상태에서 태그의 아무 곳이나 다시 클릭하면 선택이 해제됩니다.
• 운영 태그: 호버 시 배경색 변경과 마우스 포인터를 얻어요. 태그의 아무 곳이나 클릭하면 팝오버, 모달, 브레드크럼 뷰에서 더 많은 관련 태그를 보는 방법을 펼쳐 보여줍니다.

키보드 (Keyboard)

• 읽기 전용 태그: 키보드로 조작할 수 없고 인터랙티브 기능이 없어요.
• 제거 가능 태그: Tab 키로 닫기 아이콘 영역에 포커스를 받아요. Enter 또는 Space 키를 누르면 태그를 제거, 닫거나 삭제합니다.
• 선택 가능 태그: Tab 키로 컨테이너에 포커스를 받아요. Enter 또는 Space 키를 누르면 태그를 선택하거나 선택 해제합니다. 태그 그룹 안에서 탐색하려면 Tab 키로 그룹 안의 다른 태그로 포커스를 이동하세요.
• 운영 태그: Tab 키로 컨테이너에 포커스를 받아요. Enter 또는 Space 키를 누르면 팝오버, 모달, 브레드크럼 뷰에서 추가 관련 태그를 펼쳐 보여줍니다.

클릭 영역 (Clickable areas)

읽기 전용 태그는 클릭할 수 없고 상호작용할 수 없어요. 제거 가능 태그는 태그를 제거하거나 닫을 수 있는 닫기 아이콘 주변에 클릭 영역이 있어요. 선택 가능 태그와 운영 태그의 컨테이너는 태그를 선택하거나 더 많은 태그를 보기 위해 클릭할 수 있습니다.

읽기 전용 태그 (Read-only tag)

읽기 전용 태그는 분류와 라벨링에 사용되며 인터랙티브 기능이 없어요. 읽기 전용 태그는 여러 색상 선택지로 제공되며, 여러 카테고리를 구분하기 위해 선택적인 장식 아이콘을 사용할 수 있습니다.

디자인에서 태그를 라벨이나 분류로 사용하려면 색상이나 아이콘 같은 수정자를 사용해 그 차이를 나타내세요.

라벨이나 카테고리로 구분하기 쉽게 다른 태그 라벨이나 카테고리를 구분할 때는 색상을 사용하세요. 라벨이나 카테고리로 쓰일 태그라면 모든 태그에 같은 색을 사용하지 마세요.

제거 가능 태그 (Dismissible tag)

제거 가능 태그는 사용자가 태그를 제거하거나, 닫거나, 삭제할 수 있게 해줘요. 제거 가능 태그는 페이지나 페이지의 구역 안에서 키워드를 검색하거나 필터링하기 위해 검색 컴포넌트와 함께 자주 사용됩니다.

제거 가능 태그는 인스턴스에 적용되고 나중에 필요하면 제거할 수 있는 사용자 생성 라벨로도 사용될 수 있어요. 사용자가 닫거나 제거할 수 있기 때문에 항상 영구적으로 유지할 의도라면 제거 가능 태그를 사용하지 마세요.

선택 가능 태그 (Selectable tag)

선택 가능 태그는 사용자가 그것을 선택하거나 선택 해제할 수 있게 해줘요. 태그만을 선택 방법으로 사용하는 폼, 채팅에서 결정을 내리고 채팅을 진행하는 데, 그리고 페이지나 컴포넌트 안의 콘텐츠를 필터링하는 선택 항목으로 사용될 수 있습니다.

어떤 경우에는 폼 전체가 일관되게 태그를 폼 선택 스타일로 사용할 때 선택 가능 태그가 전통적인 폼 컴포넌트의 대안이 될 수 있어요. 선택 가능 태그는 다중 선택 또는 단일 선택 사용 사례에 사용할 수 있습니다. 이 태그들은 선택되거나 선택되지 않은 태그 사이의 눈에 띄는 차이를 보장하기 위해 항상 높은 대비를 유지해야 해요.

선택 가능 태그가 그룹일 때, 태그가 몇 개뿐이라면 더 쉽게 훑어보기 위해 가로 정렬을 권장합니다. 태그가 여섯 개 이하일 때는 태그 그룹을 한 줄에 가로로 유지하세요. 그룹에서 선택할 태그가 많으면 가로 정렬을 권장하지 않아요. 한 줄에 가로로 배치하기에 너무 많으면 태그를 줄바꿈해 다른 줄을 만들도록 하세요. 태그 수가 다섯 줄 이상의 줄바꿈을 초과하면 멀티셀렉트 드롭다운 같은 다른 컴포넌트를 사용 사례에 고려해 보세요.

그룹의 태그를 몇 줄로 줄바꿈하세요. 그룹의 태그를 다섯 줄 이상으로 줄바꿈하지 마세요.

운영 태그 (Operational tag)

운영 태그는 사용자가 팝오버나 브레드크럼 상세 뷰에서 펼쳐진 모든 태그의 더 포괄적인 뷰를 볼 수 있게 해줘요. 완전히 다른 페이지로 이동시키거나 현재 경험에서 별도의 탭으로 이동시키는 링크로 태그를 사용하지 마세요.

수정자 (Modifiers)

장식 아이콘 (Decorative icons)

장식 아이콘은 태그 제목 앞에 옵니다. 장식 아이콘은 선택사항이며 태그 제목을 시각적으로 지원하는 데 자주 사용됩니다. 간격이 콤팩트한 작은 태그 크기에서는 장식 아이콘을 사용하지 않기를 권장해요. 어떤 아이콘 형태와 테두리가 있는 태그 사이에 시각적 긴장이 생길 수 있기 때문입니다.

태그 색상 (Tag colors)

읽기 전용, 제거 가능, 운영 태그는 다양한 색상으로 제공되며, 컴포넌트 토큰을 사용하는 IBM 디자인 언어 컬러 팔레트의 값을 갖습니다. 다른 카테고리나 라벨을 나타내려면 여러 색상을 사용하는 것이 권장됩니다. 선택 가능 태그는 이런 색상으로 제공되지 않으며, 대신 코어 토큰을 사용합니다.

AI 프레즌스 (AI presence)

태그에는 컴포넌트에 AI가 있을 때 AI 라벨을 내장하는 수정 사항이 있어요. AI 변형은 인라인 AI 라벨의 추가를 제외하고 일반 버전과 동일하게 동작하는데, 이 라벨은 시각적 표시자이자 설명 가능성 팝오버의 트리거 역할을 합니다. 인터랙티브 AI 라벨을 허용하는 태그 변형은 읽기 전용 태그와 제거 가능 태그뿐이에요.

AI 설계에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

더 알아보기 (Learn more)

태그는 콘텐츠를 분류하고 라벨링할 때 가장 자주 쓰는 컴포넌트예요. 읽기 전용, 제거 가능, 선택 가능, 운영이라는 네 변형을 용도에 맞게 골라 쓰되, 읽기 전용은 분류·라벨링, 제거 가능은 필터링·사용자 라벨, 선택 가능은 데이터 필터링·채팅 결정, 운영은 오버플로 태그 펼치기에 주로 활용해요. 제목은 20자 안팎으로 간결하게 유지하고, 긴 제목은 줄임 처리 후 툴팁으로 보여주는 게 좋습니다.