AI label

AI label (AI 라벨)

AI 라벨은 UI에서 AI 인스턴스(instance)를 나타내는 표시예요. AI 아이콘의 시각적 인식을 통해 AI 투명성을 확보하고, 설명 가능성(explainability) 팝오버를 여는 트리거 역할을 함으로써 AI 설명 가능성으로 가는 핵심 경로가 됩니다.

출처: AI label

본문

새로워졌어요! AI label은 이제 안정(stable) 컴포넌트가 되었어요. AI 라벨은 이전에 "AI Slug"라고 불렸는데, 용도를 더 잘 반영하도록 이름이 변경됐습니다.

개요 (Overview)

AI 라벨은 단순히 UI에 AI 사례가 있음을 알리는 표시 이상의 의미를 가져요. AI 설명 가능성으로 이어지는 일관된 경로이기도 하며, 기존 제품 안의 동작·인터랙션과도 자연스럽게 협력할 만큼 유연합니다.

AI 라벨은 AI로 또는 AI와 함께 무언가가 생성되는 모든 시나리오에서 사용하도록 설계됐어요. 어떤 인터페이스 수준에서든 AI의 투명성, 책임감, 설명 가능성을 강화하기 위해서죠. 이는 또한 IBM 제품 어디에서든 식별 가능한 방식으로 AI 사례를 더 효과적으로 인식하고 기억하게 해줍니다.

변형 (Variants)

변형 (Variant)	용도 (Purpose)
Default	대부분의 컴포넌트와 컨테이너 유형 사용 사례에서 쓰는 기본 AI 라벨. 광범위한 AI 인스턴스와 집중된 AI 인스턴스 모두에 사용할 수 있어요.
Inline	작고 집중된 AI 인스턴스에서만 쓰는 특수한 유형의 AI 라벨로, 텍스트 콘텐츠와 함께 인라인으로 자주 배치돼요.

기본(왼쪽), 인라인(오른쪽)

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

AI 생성 콘텐츠 표시 (Mark AI-generated content)

AI 투명성이 핵심이며, AI 라벨은 인터페이스에 제시된 모든 AI 인스턴스를 표시하는 접근 가능하고 인터랙티브한 요소예요.

AI에 대한 일관된 시각적 기준점 제공 (Provides a consistent visual reference point for AI)

인식과 회상을 위해 사용자는 AI가 어떻게 만들어졌는지 더 자세히 이해해야 할 때 찾아볼 수 있는 일관되고 식별 가능한 시각적 기준이 필요해요.

설명 가능성으로 가는 경로 (A pathway to explainability)

사용자는 AI가 어떻게 만들어졌는지에 대한 더 많은 세부 정보에 접근하는 방법을 명확히 이해해야 해요. AI 라벨에서 설명 가능성으로 이어지는 다리를 제공하면, 사용자는 AI 모델에 대해 더 배울 수 있는 인식 가능한 위치를 얻게 됩니다.

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

장식으로 사용하지 마세요 (Don't use the AI label as decoration)

AI 라벨은 어떤 양식(modality)이나 컴포넌트가 AI를 사용하고 있음을 엄격히 표시하기 위한 것이에요.

AI 라벨 동작을 수정하지 마세요 (Don't modify AI label behaviors)

AI 라벨은 설명 가능성으로 가는 경로로 설계됐어요. 추가 동작을 넣으면 불명확하고 일관성 없는 기대를 만들 수 있습니다.

AI 액션의 트리거로 사용하지 마세요 (Don't use the AI label as a trigger for AI actions)

AI 라벨은 UI 아이콘이 아니며, "재생성(regenerate)" 같은 AI 액션을 실행하기 위해 버튼이나 다른 콜투액션(CTA)과 함께 쓰면 안 돼요. 그런 유형의 AI 액션은 각각 자체 UI 아이콘을 갖습니다.

포맷 (Formatting)

구조 (Anatomy)

• AI 인디케이터 / 버튼: AI가 존재함을 표시하고 설명 가능성 팝오버를 여는 버튼 트리거예요. 기본(default) 또는 인라인(inline) 변형일 수 있어요.
• 텍스트 라벨: 인공지능(artificial intelligence)의 텍스트 약어로, 필요에 따라 번역될 수 있어요.
• 설명 가능성 팝오버 (Explainability popover): AI 설명 가능성 콘텐츠와 인터랙티브 요소가 들어 있는 영역이에요.

크기 (Sizing)

기본 크기 (Default sizes)

기본 AI 라벨은 UI 아이콘과 픽토그램 크기의 범위를 아우릅니다. 어떤 크기를 쓸지는 그것이 있는 영역의 중요도와 위계, 또는 다른 버튼 같은 주변 콘텐츠에 따라 결정돼요. 다른 고스트(gGhost) 아이콘 버튼 옆에 배치할 때는 광학적으로 동일한 무게감을 갖도록 버튼 크기보다 한 단계 작게 하는 것을 보통 권장합니다.

기본 크기 (Default size)	높이 (px/rem)
Mini	16 / 1
2x small (2xs)	20 / 1.25
Extra small (xs)	24 / 1.5
Small (sm)	32 / 2
Medium (md)	40 / 2.5
Large (lg)	48 / 3
Extra large (xl)	64 / 4

인라인 크기 (Inline sizes)

인라인 AI 라벨 텍스트의 크기는 함께 배치되는 텍스트의 크기와 일치해야 해요. 예를 들어 14px 글꼴 크기의 테이블 행에 인라인 AI 라벨을 넣는다면, 역시 14px 글꼴을 가진 중간 크기(medium) 인라인 AI 라벨과 맞추면 됩니다.

인라인 크기 (Inline size)	높이 (px/rem)	사용 사례 (Use case)
Small (sm)	16 / 1	12px 타입과 함께
Medium (md)	18 / 1.125	14px 타입과 함께
Large (lg)	22 / 1.375	16px 타입과 함께

배치 (Placement)

AI 라벨은 사용자가 인터페이스에서 AI의 존재를 식별할 수 있도록 양식(modality)에 따라 일관된 위치에 배치해야 해요. 일관된 배치는 사용자의 인식과 회상을 강화합니다. 이 배치 지침은 왼쪽에서 오른쪽 읽기 순서를 전제로 하며, 오른쪽에서 왼쪽(RTL)이라면 위치를 좌우 반전해야 해요.

컨테이너 안 (In containers)

AI 라벨은 적절한 마진과 함께 컨테이너의 오른쪽 위에 배치해야 해요. AI 라벨을 컨테이너의 가장자리에 딱 붙게(flush) 배치하지 마세요.

입력 요소 안 (In inputs)

드롭다운, 텍스트/숫자 입력 등 폼 입력 요소의 오른쪽 중앙에 AI 라벨을 배치하세요.

다른 아이콘과 함께 (With other icons)

AI 라벨 옆에 다른 아이콘들이 있다면, AI 라벨은 아이콘 그룹의 가장 왼쪽 위치에 배치해야 해요.

예외적으로 아이콘이 크기나 위치를 바꾸는 인터랙션 상태(확장 가능한 검색, 정렬 토글 등)를 가질 때가 있어요. 이런 경우에는 AI 라벨을 이 예외 아이콘들의 오른쪽에, 하지만 여전히 다른 아이콘 유형들의 왼쪽에 배치합니다.

데이터 테이블 안 (In data tables)

데이터 테이블 안에서 AI 라벨의 위치는 데이터의 어느 부분이 AI로 생성됐는지에 따라 달라져요. 자세한 내용은 데이터 테이블 컴포넌트 페이지의 AI 존재(AI presence) 섹션을 참고하세요.

• 테이블 전체에 AI가 존재한다면, 테이블 헤더의 오른쪽 위에 AI 라벨을 배치하세요.
• 한 컬럼 전체에 AI가 존재한다면, 컬럼 헤더의 맨 오른쪽에 AI 라벨을 배치하세요. 테이블 컬럼의 정렬 아이콘은 이제 AI 라벨의 왼쪽에 나타납니다.
• 한 행 전체에 AI가 존재한다면, 행의 맨 왼쪽, 선택·확장 컨트롤의 왼쪽에 AI 라벨을 배치하세요.
• 단일 셀에 AI가 존재한다면, 셀 텍스트의 인라인 왼쪽에 AI 라벨을 배치하세요.

폼 안 (In forms)

폼 안의 AI 라벨 위치는 AI가 폼 전체에 걸쳐 있는지, 특정 부분에만 있는지에 따라 달라질 수 있어요. 자세한 지침은 폼 컴포넌트 페이지의 AI 존재(AI presence) 섹션을 참고하세요.

• 폼 전체에 AI가 존재한다면, 폼 헤더의 오른쪽 위에 AI 라벨을 배치하세요.
• 폼의 일부 부분에만 AI가 존재한다면, AI 라벨은 AI로 생성된 컴포넌트나 섹션 안에 임베드되어야 해요.

가시성 수준 (Levels of visibility)

AI 라벨은 페이지의 여러 수준에 나타날 수도 있고, 한 번만 나타날 수도 있어요. AI 설명 가능성 팝오버의 콘텐츠는 단일 AI 인스턴스에 집중될 수도, 여러 인스턴스를 광범위하게 다룰 수도 있습니다. 모든 시나리오가 수용 가능하고 가능하지만, 가시성 수준은 설명 가능성의 필요성과/또는 AI 콘텐츠와 인간 콘텐츠를 구분할 필요성에 따라 달라져요.

가시성 수준 (Visibility level)	사용 사례 (Use case)
집중 (Focused)	섹션 내의 개별 AI 발생에 사용
광범위 (Broad)	페이지의 한 섹션에 걸친 AI 사용 요약에 사용

집중(Focused) AI 라벨을 사용하세요:

• 사용자가 개별 AI 인스턴스에 대한 설명을 필요로 할 때.
• 사용자가 AI와 비-AI 콘텐츠를 구분해야 할 때.

데이터 테이블의 단일 셀 안에 집중 AI 라벨을 적용한 예시예요.

광범위(Broad) AI 라벨을 사용하세요:

• 사용자가 인스턴스별로 AI에 대한 구체적인 설명을 필요로 하지 않을 때.
• 사용자가 인스턴스 수준에서 AI에 대해 조치를 취할 필요가 없을 때.

데이터 테이블의 한 컬럼 전체에 광범위 AI 라벨을 적용한 예시예요.

집중과 광범위 AI 라벨을 함께 사용하기 (Using both focused and broad AI label)

경험 전반에 AI가 표면화될 때는 집중과 광범위 AI 라벨을 함께 사용하되, 다음 조건을 충족해야 해요:

• 개별 AI 인스턴스는 여전히 설명이 필요하다.
• 사용자는 AI와 비-AI 콘텐츠를 구분해야 한다.
• 사용자는 인스턴스 수준에서 AI에 대해 조치를 취해야 한다.

전체 채팅 대화에는 광범위 AI 라벨을, 단일 메시지에는 집중 AI 라벨을 적용한 예시예요.

콘텐츠 (Content)

현지화 (Localization)

AI 라벨의 AI 약어는 영어 용어 artificial intelligence를 나타내요. 이 약어는 다른 언어로 현지화될 수 있습니다. 다른 언어의 약어 예시는 다음과 같아요.

• AI: 중국어, 인도네시아어, 이탈리아어, 일본어, 한국어, 라틴아메리카 스페인어
• IA: 유럽 스페인어, 브라질 포르투갈어, 프랑스 프랑스어
• KI: 독일어
• ИИ: 러시아어, 불가리아어

설명 가능성 템플릿 (Explainability template)

설명 가능성 팝오버는 구성 가능한 콘텐츠 영역이에요. Carbon for AI는 설명 가능성 콘텐츠를 만들기 위한 권장 콘텐츠 템플릿을 제공합니다. 템플릿은 네 가지 주요 콘텐츠 섹션으로 나뉘어요:

• 개요 (Overview)
• 뒷받침하는 세부 정보 (Supporting details)
• 산출물과 리소스 (Artifacts and resources)
• 추가 작업 (Additional actions)

IBM 직원 전용: 설명 가능성 팝오버용 콘텐츠를 디자인하는 방법에 대한 자세한 정보와 지침은 Design for AI의 AI 설명 가능성 팝오버(AI explainability popover) 패턴을 참고하세요.

동작 (Behaviors)

상태 (States)

AI 라벨에는 활성(enabled), 호버(hover), 포커스(focus)라는 세 가지 인터랙션 상태가 있어요. AI 라벨은 비활성(disabled) 또는 읽기 전용(read-only) 상태의 일부로 절대 비활성화되면 안 됩니다. 상태에 대해 더 알아보려면 스타일 탭을 참고하세요.

활성(왼쪽), 호버(가운데), 포커스(오른쪽)

클릭 가능 영역 (Clickable areas)

기본 AI 라벨에서 클릭 가능 영역은 아이콘 전용 고스트 버튼처럼 추가 외부 영역 없이 아이콘으로 제한돼요. 인라인 AI 라벨은 클릭 대상 영역에 포함되는 약간의 여분 패딩을 가집니다.

설명 가능성 팝오버 (Explainability popover)

팝오버는 AI 라벨을 클릭해 접근하는 설명 가능성의 첫 번째 레이어예요. 이는 주문형(on-demand)으로 더 많은 세부 정보를 파고들 수 있으면서도 설명 가능성에 접근하는 일관된 사전 방식(up-front way)을 제공합니다. 경험에서 AI를 설명해야 할 때마다 이 팝오버를 사용하세요.

팝오버 열고 닫기 (Opening and dismissing the popover)

AI 라벨은 설명 가능성 팝오버를 여는 트리거예요. 인터랙션은 토글팁(toggletip)처럼 동작해서, 사용자가 AI 라벨에서 클릭하거나 탭으로 벗어날 때까지 팝오버가 열린 채 유지됩니다. 설명 가능성 팝오버의 키보드 인터랙션에 대한 자세한 내용은 접근성 탭을 참고하세요.

팝오버 방향 (Popover orientation)

팝오버는 사용자의 시야 밖으로 벗어나지 않도록 화면에서 가장 좋은 방향으로 자동 배치돼야 해요. 이는 프리미티브 캐럿-팁 팝오버(popover)와 동일한 정렬을 따릅니다.

되돌리기 기능 (Revert function)

사용자는 AI가 제안한 콘텐츠를 직접 재정의할 수 있지만, 처음에 제안된 AI 콘텐츠로 프로그래밍 방식으로 되돌아갈 수 있어야 해요. 이런 경우 사용자가 콘텐츠를 재정의하면 AI 존재 스타일링이 제거되고, AI 라벨은 "되돌리기(revert)" 액션 아이콘 전용 버튼으로 대체됩니다. 사용자가 되돌리기 액션을 실행하면 AI 생성 콘텐츠가 AI 존재 스타일링과 AI 라벨과 함께 다시 나타나요.

관련 컴포넌트 (Related)

가이드라인 (Guidelines)

• Carbon for AI

컴포넌트 (Components)

• Checkbox
• Data table
• Date picker
• Dropdown
• Form
• Modal
• Number input
• Popover
• Radio button
• Select
• Tag
• Text input
• Tile

Design for AI (IBM 직원 전용)

• AI label placement
• AI explainability popover

더 알아보기 (Learn more)

AI 라벨은 AI 투명성·책임감·설명 가능성을 위한 일관된 진입점이에요. Default와 Inline 변형, 크기 체계, 배치 규칙을 상황에 맞게 적용하고, 설명 가능성 팝오버를 통해 사용자가 AI의 세부 정보를 쉽게 파고들 수 있게 만들면 됩니다. 장식용이 아니라 반드시 AI 존재를 표시하는 용도로만 사용하고, 다른 AI 액션 아이콘과의 역할도 명확히 구분하세요.