---
{"id":"tile","title":"타일·카드 표면","category":"컴포넌트","order":51,"summary":"관련 정보·행동을 한 묶음으로 표시의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/tile/usage"]}
---

# 타일·카드 표면

## 목적과 사용

관련 정보·행동을 한 묶음으로 표시에 사용합니다. 모든 내용을 카드로 감싸거나 중첩 클릭 대상을 만들지 않습니다.

## 구성과 변형

제목, 내용, 선택적 메타·주 행동·보조 행동. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- TILE-01 MUST: 읽기 전용·이동형·선택형·펼침형을 구분합니다.
- TILE-02 MUST: 카드 안 버튼·링크가 있으면 중첩 interactive 요소를 만들지 않습니다.
- TILE-03 SHOULD: 같은 계층 카드의 제목·간격·메타 순서를 맞춥니다.
- TILE-04 MUST: 카드를 클릭할 수 있다면 키보드로 같은 동작을 수행할 수 있습니다.

## 접근성

정보 표면에는 불필요한 tab stop을 추가하지 않고, 행동에만 이름·역할을 제공합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: 서버 정보와 명시적인 상세 링크 / 피함: 클릭 div 안의 삭제 버튼 충돌.

## 우리 구현과 연결

Blesta 신규 독립 정보 표면은 기존 wk-solid-surface 계약을 참조합니다. Carbon Tile 스타일을 복제하지 않습니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

텍스트 길이·동일 높이 강제에 의한 누락·작은 화면·중첩 클릭을 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.