IconTile
아이콘을 틴트 라운드 배경에 담는 시각 앵커 — 섹션·행·모달 헤더 앞에서 시선을 잡습니다. 톤 4종 × 크기 3종. 틴트는 구조 신호이지 장식 남발이 아닙니다.
마지막 업데이트 2026-06-26
한눈에#
아이콘 하나를 틴트 라운드 배경에 앉혀 시각 앵커로 만드는 표현 프리미티브입니다 — 섹션 제목·리스트 행·모달 헤더 앞에 두어 시선의 진입점을 만듭니다. 틴트는 구조 신호라 의미가 있을 때만 바꿉니다.
- 톤 4종
- 크기 sm/md/lg
- 틴트=구조 신호
- 아이콘 앵커(장식)
틴트는 배경에만 — 의미는 옆 텍스트가 담고, 타일은 시선의 진입점 역할만 합니다
사용 시점#
아이콘에 시각 무게를 실어 앵커로 쓸 때만 IconTile — 클릭하거나 사람을 표현하면 다른 컴포넌트입니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
아이디어 정리
쓴다 — 섹션·행·모달 헤더 앞에서 아이콘을 틴트 라운드로 앵커(표시 전용)
대신 IconButton — 클릭·실행이 있는 아이콘이면(틴트 타일은 표시 전용)
대신 Avatar — 사람·엔티티를 식별하는 이미지/이니셜이면
변형#
기본 accent로 충분한 경우가 대부분입니다 — 틴트를 색마다 바꾸면 구조 신호가 흐려집니다.
크기#
플레이그라운드#
IconTile를 직접 조작해 보세요
속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.
플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
tone | 'accent' | 'neutral' | 'success' | 'warning' | accent | |
size | 'sm' | 'md' | 'lg' | md | |
children | ReactNode | — | 담을 아이콘 |
ref | Ref<HTMLSpanElement> | — |
접근성#
- 타일은 장식 앵커라 의미를 갖지 않습니다 — 의미는 항상 옆 텍스트가 담습니다
- 내부 아이콘이 순수 장식이면
aria-hidden을 권장합니다(소비자가 부여 — 옆 라벨이 의미를 전달) - 타일 자체가 정보를 전달해야 하는 드문 경우에만
aria-label을 직접 부여하세요 - 톤은 색만으로 의미를 구분하지 않습니다 — 색은 보조 신호이고 텍스트가 정본입니다(색맹 안전)
토큰#
component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).
| 속성 | 토큰 |
|---|---|
| accent | color.primary-subtle + color.primary-text |
| neutral | color.text 6% color-mix + color.text-muted |
| success/warning | base 색 12% color-mix + color.*-text |
| 크기 sm/md/lg | space.8 / space.10 / space.12 (정사각) |
| 형태 | radius.lg(sm은 radius.md) |