Tile

Tile (타일)

타일은 정보, 시작하기, 사용 방법, 다음 단계 등 매우 다양한 콘텐츠를 표시할 수 있는 유연성이 뛰어난 컴포넌트예요.

출처: Tile

본문

AI 라벨이 있는 타일은 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다.

개요 (Overview)

타일은 다양한 콘텐츠와 중첩 컴포넌트를 담을 수 있고 인터랙티브 기능을 가질 수 있는 컴포넌트예요. 타일은 보통 그룹으로 배치되며 UI 배경과 다른 색이고 그리드에 반응합니다. 타일은 사전 설정된 스타일이 없고 의도적으로 유연해서, 제품 팀이 특정 사용 사례에 맞는 타일 콘텐츠를 결정할 수 있습니다.

타일과 카드 (Tiles versus cards)

타일은 단순하고 기초적이에요. 카드는 매우 복잡할 수 있습니다. 카드는 타일 기반 위에 구축되며 정보 위계, 여러 동작, 오버플로 메뉴, 선택 가능한 기능 등 다양한 패턴을 가져요. Carbon에는 카드 패턴이 없지만, 아래의 패턴 자산 라이브러리(PAL) 생태계 내의 여러 카드 패턴으로 연결해 줍니다.

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

타일은 카드와 다른 모듈을 만드는 단축키를 제공하는 재사용 가능한 컴포넌트예요. 타일을 사용해 관련 정보를 유연한 컨테이너로 그룹화하세요. 타일을 사용하는 일반적인 사용 사례는 다음과 같아요.

  • 관련된 정보나 동작의 그룹을 담을 때
  • 사용자가 동작을 취하거나 탐색하도록 안내할 때
  • 단일 또는 다중 선택을 위한 옵션을 제시할 때
  • 많은 양의 콘텐츠를 숨기거나 보여줄 때

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

타일은 페이지 배경 레이어와 같은 평면에 있으며 고도(elevation)가 없어요. 타일은 필수 정보를 정리하며 같은 페이지의 콘텐츠와 동일한 시각적 위계를 가집니다.

타일에 그림자(drop shadow)를 추가하고 이를 2차 정보, 동작, 알림을 드러내는 데 사용하지 마세요. 대신 고도가 있고 이 사용 사례에 적합한 모달, 팝오버, 다이얼로그를 사용하세요.

변형 (Variants)

타일은 기능이 다를 수 있으며 기반(base), 클릭 가능(clickable), 선택 가능(selectable), 확장 가능(expandable)의 네 가지 방식으로 구현됩니다. 이 타일 변형들은 더 복잡한 카드 기능을 만들 때 다양한 사용 사례를 지원하도록 유연합니다.

Variant Purpose
Base 기능, 플랜, 제공 서비스 같은 높은 수준의 짧고 소화하기 쉬운 콘텐츠 조각용이에요.
Clickable 동작을 촉구하거나, 주제에 대한 다른 정보 조각으로 탐색·안내할 때용이에요. 이 변형에는 사용 가능한 기능 플래그가 있어요.
Selectable 가격 플랜 집합처럼 구조화된 방식으로 사용자에게 옵션을 제시할 때용이에요. 이 변형에는 사용 가능한 기능 플래그가 있습니다.
Expandable 특정 정보 조각에 집중하기 위해 많은 양의 콘텐츠를 숨기고 드러낼 때용이에요. 이 변형에는 사용 가능한 기능 플래그가 있어요.

기능 플래그 (Feature flags)

타일의 클릭 가능, 선택 가능, 확장 가능 변형에 기능 플래그가 추가되어 접근성을 개선하고, 기능이 아닌 시각적 모양만 바꿉니다. 코드별 기능 플래그 정보는 Code 탭을 참고하세요. 이 현재 타일 변형들은 더 이상 사용되지 않지는 않지만, 앞으로는 제품에 기능 플래그 타일을 사용하도록 권장해요. 향후 다음 메이저 릴리스(v12)가 출시되면 이 기능 플래그들이 컴포넌트의 기본 버전이 됩니다.

타일에 가해진 기능 플래그 변경 사항은 다음과 같아요.

  • 클릭 가능, 선택 가능, 확장 가능 타일 변형에 테두리가 추가되어 조작 가능함을 시각적으로 나타냅니다.
  • 단일 선택 타일 아이콘은 체크마크 아이콘에서 라디오 버튼 아이콘으로, 다중 선택 타일 아이콘은 체크마크 아이콘에서 체크박스 아이콘으로 바뀌었어요. 이 아이콘들은 선택을 하기 전 호버에서만 보이던 것이 활성(enabled) 상태에서 나타납니다.

포맷 (Formatting)

크기 (Sizing)

타일 너비는 넓은(wide), 좁은(narrow), 콘덴스드(condensed)라는 세 가지 기본 거터 모드에 따라 달라져요. 타일 높이는 간격 토큰을 사용하고 종횡비를 따르면서 그 안에 배치된 콘텐츠에 따라 달라집니다. 최소 타일 높이는 2:1 종횡비예요. 콘텐츠가 커지면 콘텐츠 영역 안의 섹션 사이에 세로 간격을 설정하세요.

정렬 (Alignment)

타일 그룹 (Tile groups)

타일 그룹은 강한 관계를 가진 타일을 정렬할 때 유용해요. 타일 그룹은 보통 왼쪽에서 오른쪽으로 가로로 흐르며, 내비게이션이나 카탈로그 타일처럼 위계적 중요성을 가집니다.

그룹에서 타일 변형을 일치시키세요. 그룹에서 서로 다른 타일 변형을 섞지 마세요.

레이아웃 (Layout)

타일에는 표준(standard), 세로 메이슨리(vertical masonry), 가로 메이슨리(horizontal masonry)의 세 가지 기본 레이아웃이 있어요. 표준 레이아웃이 가장 흔히 사용됩니다.

  • 표준 레이아웃에서 타일은 그룹의 다른 모든 타일과 높이와 너비가 같아요.
  • 세로 메이슨리 레이아웃에서 타일은 높이가 다를 수 있지만 너비는 일관됩니다.
  • 가로 메이슨리 레이아웃에서 타일은 너비가 다를 수 있어요. 타일의 서로 다른 행은 높이가 다를 수 있지만, 한 행 안의 타일은 높이가 일관적이어야 합니다.

콘텐츠 (Content)

주요 요소 (Main elements)

타일 텍스트 (Tile text)

타일 텍스트는 콘텐츠에 따라 달라질 수 있어요. 제목 텍스트, 본문 텍스트, 라벨 텍스트로 구성될 수 있고 인터랙티브 요소를 포함할 수 있습니다.

추가 가이드 (Further guidance)

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

기반 (Base)

기반 타일은 제공되는 기능이나 서비스 같은 정보를 사용자에게 표시하는 데 사용해요. 기반 타일은 콘텐츠를 홍보하는 마케팅 페이지나 인터랙티브성이 높은 대시보드에서 자주 볼 수 있습니다. 이 타일에는 버튼이나 링크 같은 내부 콜투액션(CTA)을 가질 수 있어요.

구조 (Anatomy)

  • 컨테이너(Container): 타일 안의 모든 콘텐츠를 담아요.
  • 텍스트(Text): 타일 안의 텍스트예요.
  • 인터랙티브 요소(Interactive elements, 선택): 타일 안에서 인터랙티브한 링크나 버튼 같은 요소예요.

정렬 (Alignment)

기반 타일 안에 인터랙티브 요소를 배치할 때는 링크를 타일 왼쪽 아래에 놓고, 버튼은 아래에서 너비를 가로질러 콜투액션 항목을 나타내세요.

기반 타일 아래에서 링크를 왼쪽 정렬하세요. 기반 타일 아래에서 버튼을 너비 방향으로 펼치세요.

상태 (States)

기반 타일은 마우스나 키보드로 조작할 수 없기 때문에 활성 상태만 있어요. 기반 타일 상태에 대한 자세한 내용은 Style 탭을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

기반 타일은 그 안에 인터랙티브 요소가 없으면 마우스로 조작할 수 없어요. 인터랙티브 요소는 클릭하고 활성화할 수 있습니다.

키보드 (Keyboard)

  • 기반 타일은 인터랙티브 요소를 담고 있지 않으면 포커스를 받지 않아요.
  • Tab 키는 기반 타일 안의 인터랙티브 요소를 논리적 순서로 앞으로 포커스를 이동시켜요.
  • Shift + Tab 키는 기반 타일 안의 인터랙티브 요소를 논리적 순서로 뒤로 포커스를 이동시켜요.
  • Enter 키는 기반 타일의 인터랙티브 요소를 활성화합니다.

클릭 영역 (Clickable areas)

기반 타일은 그 안에 링크나 버튼 같은 클릭할 수 있는 인터랙티브 요소를 가질 수 있어요.

클릭 가능 (Clickable)

클릭 가능 타일은 사용자를 새 페이지로 리다이렉트하는 내비게이션 요소로 사용될 수 있어요. 이런 상황에서는 타일 전체가 클릭 가능한 상태입니다. 접근성 문제 때문에 클릭 가능 타일은 별도의 내부 CTA를 담을 수 없지만, 픽토그램, 아이콘, 또는 일러스트레이션·이미지 같은 미디어를 담을 수 있습니다.

클릭 가능 타일에는 사용 가능한 기능 플래그가 있어요.

구조 (Anatomy)

  • 컨테이너(Container): 타일 안의 모든 콘텐츠를 담아요.
  • 텍스트(Text): 타일 안의 텍스트예요.
  • 아이콘(Icon): 타일이 내비게이션용임을 시각적으로 나타내는 아이콘이에요.
  • 테두리(Border): 타일이 인터랙티브함을 시각적으로 나타내는 테두리예요.

정렬 (Alignment)

아이콘 (Icons)

클릭 가능 타일에서는 $icon-interactive 색상 토큰과 짝을 이루는 화살표 아이콘을 사용하세요. 내비게이션을 나타내도록 아이콘을 오른쪽 아래에 배치합니다. 타일 전체가 이미 클릭 가능하므로 인터랙티브 링크나 버튼 같은 여러 클릭 대상을 두어 사용자를 혼란스럽게 하지 마세요.

화살표 아이콘이 단독일 때는 오른쪽 정렬하세요. 추가 텍스트가 있을 때는 화살표 아이콘을 오른쪽 정렬하세요. 장식 아이콘이나 픽토그램이 있을 때는 화살표 아이콘을 오른쪽 정렬하세요. 클릭 가능 타일에 인터랙티브 링크나 컴포넌트를 추가하지 마세요.

상태 (States)

클릭 가능 타일에는 활성, 호버, 포커스, 비활성 상태가 있어요. 자세한 내용은 Style 탭을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

클릭 가능 타일은 타일 컨테이너 안의 아무 곳이나 클릭하면 트리거됩니다.

키보드 (Keyboard)

  • Tab 키는 클릭 가능 타일을 논리적 순서로 앞으로 포커스를 이동시켜요.
  • Shift + Tab 키는 클릭 가능 타일을 논리적 순서로 뒤로 포커스를 이동시켜요.
  • Enter 키는 타일을 활성화하고 목적지로 이동시킵니다.

클릭 영역 (Clickable areas)

클릭 가능 타일은 타일 컨테이너의 아무 곳이나 클릭해 트리거할 수 있어요.

선택 가능 (Selectable)

선택 가능 타일은 사용자가 선택할 수 있는 서로 다른 옵션을 제시하는 데 사용돼요. 선택 가능 타일은 CTA가 타일의 클릭 대상 외에 자신만의 클릭 대상을 가진다면 문서 링크 같은 내부 CTA를 담을 수 있습니다. 선택 가능 타일은 단일 선택 또는 다중 선택을 가질 수 있어요.

선택 가능 타일에는 사용 가능한 기능 플래그가 있습니다.

단일 선택 (Single-select)

사용자가 타일 그룹에서 한 타일만 선택할 수 있을 때 단일 선택 타일을 사용하세요.

다중 선택 (Multi-select)

사용자가 타일 그룹에서 여러 타일을 선택할 수 있을 때 다중 선택 타일을 사용하세요.

구조 (Anatomy)

  • 컨테이너(Container): 타일 안의 모든 콘텐츠를 담아요.
  • 텍스트(Text): 타일 안의 텍스트예요.
  • 아이콘(Icon): 타일이 선택 가능함을 시각적으로 나타내는 라디오 또는 체크박스 아이콘이에요.
  • 테두리(Border): 타일이 인터랙티브함을 시각적으로 나타내는 테두리예요.

상태 (States)

선택 가능 타일에는 활성, 호버, 호버 선택됨, 선택됨, 포커스, 비활성 상태가 있어요. 자세한 내용은 Style 탭을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

클릭 가능 타일은 타일 컨테이너 안의 아무 곳이나 클릭하면 트리거됩니다.

키보드 (Keyboard)

  • Tab 키는 선택 가능 타일을 논리적 순서로 앞으로 포커스를 이동시켜요.
  • Shift + Tab 키는 선택 가능 타일을 논리적 순서로 뒤로 포커스를 이동시켜요.
  • Enter 키는 타일을 선택합니다.

클릭 영역 (Clickable areas)

선택 가능 타일은 타일 컨테이너의 아무 곳이나 클릭해 선택할 수 있어요.

확장 가능 (Expandable)

확장 가능 타일은 사용자에게 추가 정보를 나타내거나 숨기는 데 사용되며, 콘텐츠에 따라 다르게 펼쳐지고 접힐 수 있어요. 확장 가능 타일에 인터랙티브 요소가 없으면 타일의 아무 곳이나 클릭해 타일을 펼치고 접습니다. 인터랙티브 요소가 있으면 쉐브론(chevron) 아이콘 버튼이 타일을 펼치고 접습니다.

확장 가능 타일에는 사용 가능한 기능 플래그가 있어요.

인터랙티브 요소 없을 때 (Without interactive elements)

인터랙티브 요소가 없을 때는 컨테이너 확장 기능을 사용해 타일을 펼치고 접으세요.

인터랙티브 요소가 있을 때 (With interactive elements)

인터랙티브 요소를 포함할 때는 버튼 확장 기능을 사용해 타일을 펼치고 접으세요.

구조 (Anatomy)

  • 컨테이너(Container): 타일 안의 모든 콘텐츠를 담아요.
  • 텍스트(Text): 타일 안의 텍스트예요.
  • 인터랙티브 요소(Interactive elements, 선택): 타일 안에 배치된 링크나 버튼 같은 인터랙티브 요소예요.
  • 아이콘(Icon): 타일이 확장 가능함을 시각적으로 나타내는 아이콘이에요.
  • 테두리(Border): 타일이 인터랙티브함을 시각적으로 나타내는 테두리예요.

상태 (States)

확장 가능 타일에는 활성, 호버, 포커스, 비활성 상태가 있어요. 자세한 내용은 Style 탭을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

  • 인터랙티브 요소 없이: 타일 컨테이너 안의 아무 곳이나 클릭해 타일을 펼쳐요.
  • 인터랙티브 요소와 함께: 타일 오른쪽 아래의 버튼을 클릭해 타일을 펼쳐요.

키보드 (Keyboard)

  • Tab 키는 타일을 통해 앞으로 포커스를 이동시켜요. 인터랙티브 요소가 있으면 Tab 키는 논리적 순서로 앞으로 포커스를 이동시킵니다.
  • Shift + Tab 키는 타일을 통해 뒤로 포커스를 이동시켜요. 인터랙티브 요소가 있으면 Tab 키는 논리적 순서로 앞으로 포커스를 이동시킵니다.
  • Enter 키는 타일을 펼치고 접어요.

클릭 영역 (Clickable areas)

확장 가능 타일에 인터랙티브 요소가 없으면 타일 컨테이너의 아무 곳이나 클릭해 펼치거나 접을 수 있어요. 인터랙티브 요소가 있으면 오른쪽 아래 모서리의 버튼을 클릭해 펼치거나 접을 수 있습니다. 타일 안의 인터랙티브 요소도 클릭할 수 있고 자신만의 클릭 대상을 가져요.

AI 프레즌스 (AI presence)

타일에는 컨테이너에 AI 라벨이 있을 때 AI 시각적 스타일을 취하는 수정이 있어요. AI 변형은 설명 가능성 팝오버의 시각적 표시자이자 트리거인 AI 라벨의 추가를 제외하고 일반 버전과 동일하게 동작합니다.

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

그리드 (Grid)

그리드에서 타일을 올바르게 만드는 방법에 대해 알아보려면 Carbon의 2x 그리드를 참고하세요.

종횡비 (Aspect ratio)

종횡비는 타일과 이미지를 만들 때 중요해요. 더 자세한 가이드는 Carbon의 종횡비와 그 구현을 참고하세요.

버튼 (Buttons)

확실하지 않다면 타일 안에서 전체 폭(full-span) 버튼 정렬을 사용하세요. 더 자세한 가이드는 Carbon의 버튼을 참고하세요.

링크 (Link)

링크는 맥락에 따라 변형이 있어요. 더 자세한 가이드는 Carbon의 링크를 참고하세요.

간격 (Spacing)

간격은 명확하고 기능적인 레이아웃을 전달하는 데 도움을 줘요. 더 자세한 가이드는 Carbon의 간격을 참고하세요.

참고 자료 (References)

Hagan Rivers, Interactions design with cards/tiles (Medium, 2017)

더 알아보기 (Learn more)

타일은 매우 유연한 콘텐츠 컨테이너로, 기반·클릭 가능·선택 가능·확장 가능이라는 네 가지 변형을 용도에 맞게 골라 쓸 수 있어요. 카드처럼 복잡한 패턴이 필요하면 카드 패턴을, 2차 정보를 드러내야 한다면 모달·팝오버·다이얼로그를 대신 고려하세요. 그룹으로 배치할 때는 변형을 섞지 말고 표준·세로 메이슨리·가로 메이슨리 레이아웃을 잘 활용하는 게 좋습니다.