Tag

Tag (태그)

태그는 사람이 선택한 값의 표현이에요. 이메일의 수신자나 플래너 작업의 범주처럼요. 선택한 항목을 시각적으로 보여주는 작은 조각이라고 생각하면 쉬워요.

태그는 사람들이 선택을 변경하거나 제거할 수 있다는 것을 알게 해 주는 시각적 패턴을 만들어요. 사람들이 바꿀 수 없는 시스템 생성 데이터를 보여주려면 badge를 대신 사용하세요.

출처: React Tag 문서

본문

Types (유형)

Tag (태그) — 정보만 제공하면 되고 가능한 액션이 해제(dismissal)뿐일 때 태그를 사용하세요.

Interaction tag (상호작용 태그) — 태그가 나타내는 것과 관련된 더 많은 정보나 액션을 제공할 수 있을 때 상호작용 태그를 사용하세요.

Behavior (동작)

Dismissal (해제)

두 태그 유형 모두 선택적으로 해제할 수 있어요. 해제 액션을 활성화해서 사람들이 자신의 선택을 되돌릴 수 있게 하세요. 예를 들어 Planner 작업의 범주 태그에서 해제 액션을 선택하면 선택이 지워지고 태그가 화면에서 제거돼요.

해제할 수 없는 태그는 현재 맥락에서 선택을 편집할 수 없다는 것을 전달해요. 편집 가능 상태에 들어가면 사람들이 선택을 바꿀 수 있다는 시각적 패턴을 이어가기 위해 사용하세요.

Interaction tag primary and secondary actions (상호작용 태그의 기본·보조 액션)

해제 가능성에 더해 상호작용 태그는 다른 하나의 액션을 가질 수 있어요. 현재 작업에 무관하거나 방해가 될 수 있는 액션은 포함하지 마세요. 기본 액션(primary action)은 태그가 나타내는 대상과 직접 관련되어야 해요. 예를 들어 사람을 나타내는 태그를 선택하면 그 사람에 대한 더 많은 정보를 보여주는 팝오버가 열릴 수 있어요.

상호작용 태그의 보조 액션(secondary action)은 항상 해제(dismiss)예요.

Reflow and overflow (리플로우와 오버플로)

기본적으로 태그는 컨테이너에 맞지 않으면 다음 줄로 리플로우돼요.

선택적으로, 같은 크기의 태그를 사용하고 기본 텍스트를 +n으로 바꿔서 오버플로 태그를 포함할 수 있어요. 여기서 n은 표시되지 않는 태그의 수예요.

오버플로를 나타내는 태그는 상호작용 태그여야 해서, 사람들이 상호작용해 더 많은 정보를 얻을 수 있게 해요.

줄바꿈 동작이 있는 태그

오버플로 동작이 있는 태그

리플로우와 오버플로 동작을 적용할 때는 사람의 목표를 고려하세요. 예를 들어 어떤 사람이 태그를 편집하거나 제거할 목록을 보는 것이 도움이 된다면, 모든 태그가 보이도록 줄바꿈이 되게 하세요.

Layout (레이아웃)

최소한 추가 작은(extra small) 태그 사이에는 4픽셀, 작은(small) 태그 사이에는 6픽셀, 중간(medium) 태그 사이에는 8픽셀의 공간이 있어야 해요.

태그 주변에 공간을 적절히 적용하는 방법을 배우려면 layout and spacing 가이드라인을 읽어 보세요.

Medium (중간)

Small (작음)

Extra small (추가 작음)

Accessibility (접근성)

Tag interaction states (태그 상호작용 상태)

기본적으로 태그에는 상호작용 상태가 없고 정적 요소예요. 선택적 해제가 활성화되면 hover와 focus 상태도 태그 컨테이너 전체에 활성화돼요.

상호작용 태그는 항상 사용 가능한 액션이 있기 때문에 상호작용 상태가 항상 활성화돼요.

Truncation (잘림)

태그 콘텐츠를 자르지 마세요. 태그가 무엇을 나타내는지 한눈에 이해해서 어떻게 상호작용해야 하는지 알 수 있게 하는 것이 중요해요.

Content (콘텐츠)

Tag text and validation (태그 텍스트와 검증)

최소한 태그는 텍스트 콘텐츠가 필요해요. 태그 안에 텍스트 문자열을 직접 만들어야 할 일은 없어야 해요. 대부분의 경우 태그 콘텐츠는 사람이 입력하는 정보와 일치하는 백엔드 데이터베이스 항목에서 나와요.

때로는 사람이 입력한 것이 백엔드 데이터베이스의 어떤 것과도 일치하지 않을 수 있어요. 이런 경우 태그는 입력을 그대로 표시할 수 있어요. 예를 들어 외부 이메일 주소는 백엔드 데이터베이스에 없을 수 있어요.

Show the most important info (가장 중요한 정보 보여주기)

태그는 기본 콘텐츠와 보조 콘텐츠를 포함할 수 있어요. 태그가 관련 정보를 표시하도록 하세요. 예를 들어 누군가 검색 바에 별칭을 입력해서 채팅을 시작한다면, 표시되는 태그는 별칭이 아니라 수신자의 이름이어야 해요.

태그는 주요 정보에 사용하세요

태그 안의 무관한 정보는 스캔하기 어렵게 만들어요

더 알아보기 (Learn more)

• Tag 스토리북 및 React 가이드: react.fluentui.dev
• 상호작용 태그와 함께 사용하는 Popover
• 변경할 수 없는 시스템 데이터를 표시하려면 Badge 참고
• 태그 여백과 크기에 대한 자세한 내용은 Layout and spacing 참고