Components

tables 테스트 목적 표는 정보 비교에 강하지만, 화면이 좁아지면 가장 쉽게 깨집니다. 표 자체보다 가독성과 줄바꿈을 함께 확인합니다. 예시 항목 설명 확인 row 1 짧은 값 문제가 없는가 row 2 긴 설명이 들어가는 값 줄바꿈이 자연스러운가 row 3 taxonomy / navigation 폭이 과하지 않은가 확인 항목 헤더가 분명한가 셀 간 간격이 충분한가 모바일에서 가로 스크롤이 필요하면 안내가 있는가

forms 테스트 목적 폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다. raw HTML 예시 이름 입력 도움말은 너무 길지 않게 유지합니다. 확인 항목 라벨이 입력과 제대로 연결되는가 도움말이 입력보다 앞서거나 뒤섞이지 않는가 오류 상태가 색상만으로 표현되지 않는가

cards 테스트 목적 카드는 내용 묶음의 가장 흔한 표현입니다. 제목, 설명, 메타, 링크가 같은 규칙으로 보이는지 확인합니다. 확인 항목 제목 길이가 달라도 높이감이 유지되는가 설명 유무에 따라 카드가 부자연스럽게 바뀌지 않는가 링크가 있는 카드와 없는 카드가 시각적으로 구분되는가 기대 결과 카드는 여러 개가 나열되어도 서로 싸우지 않고, 정보 묶음으로 읽혀야 합니다. ...

embeds 테스트 목적 외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다. 확인 항목 임베드가 페이지 너비를 넘지 않는가 주변 본문과 간격이 충분한가 로딩 실패 시도 페이지가 무너지지 않는가 메모 실제 외부 서비스가 없어도, 이 페이지는 임베드가 들어오는 자리의 여백과 비율을 검증하는 기준이 됩니다. ...

alerts 테스트 목적 알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다. 상세 검증은 content/ko/blog/lab/30-components/info-surface/01-alert.md 번들을 기준으로 확인합니다. ...

buttons 테스트 목적 버튼은 사용자의 행동을 유도하는 가장 중요한 상호작용 요소입니다. primary, secondary, external, utility가 같은 시스템 안에서 분리되어 보여야 합니다. 확인 항목 primary 버튼이 가장 먼저 읽히는가 secondary 버튼이 보조 행동으로 인식되는가 external 행동이 내부 이동과 헷갈리지 않는가 긴 라벨이 줄바꿈되어도 버튼 구조가 유지되는가 shortcode 예시 구조 확인 시작 외부 문서 열기 실패 기준 행동 우선순위가 보이지 않는 경우 라벨이 길 때 버튼 높이가 제멋대로 바뀌는 경우

badges 테스트 목적 배지는 메인 정보가 아니라 보조 신호입니다. 상태, 분류, 짧은 메타가 본문을 가리지 않는지 확인합니다. 확인 항목 짧은 라벨이 적절한 밀도로 보이는가 배지가 줄바꿈될 때 디자인이 깨지지 않는가 색이 정보의 주인공이 되지 않는가 기대 결과 배지는 시선을 빼앗지 않으면서도 맥락을 보강해야 합니다. ...

figures 테스트 목적 figure는 이미지를 설명하고 본문에 다시 연결하는 역할을 합니다. 그림이 있더라도 본문이 끊기지 않아야 합니다. 예시 구조 다이어그램이미지와 캡션이 본문 의미를 보강해야 합니다. ...

Tooltip 테스트 목적 짧고 구체적인 도움말만 제공하는지 확인합니다. 읽는 소스 theme registry, hover/focus, hint text 정상 결과 hover와 focus 모두에서 안내가 보여야 합니다. 실패 기준 접근성 없이 시각만 있는 경우. ...

Toast 테스트 목적 짧고 경량인 피드백만 보여주는지 확인합니다. 읽는 소스 theme registry, transient message, dismissal policy 정상 결과 잠깐 나타나고 다른 surface와 겹치지 않아야 합니다. 실패 기준 지속 노출되거나 snackbar와 책임이 섞이는 경우. ...

Structural Navigation 테스트 목적 화면 제공과 행동 제공이 구조적으로 공존하는지 확인합니다. 읽는 소스 screen-and-action, bottom-destination-switching, navigation-drawer, floating-section-button 정상 결과 카테고리와 하위 페이지가 연결되어야 합니다. 실패 기준 정보 구조와 행동 구조가 뒤섞이는 경우. ...

State Feedback 테스트 목적 진행, 대기, 로딩이 안정적으로 표현되는지 확인합니다. 읽는 소스 progress, skeleton, loading-overlay 정상 결과 카테고리와 하위 페이지가 연결되어야 합니다. 실패 기준 상태 표시만 있고 변화가 보이지 않는 경우. ...

Snackbar 테스트 목적 하단 고정 메시지와 실행 취소 행동을 확인합니다. 읽는 소스 theme registry, live region, action button 정상 결과 자동 닫힘과 행동 버튼이 함께 보입니다. 실패 기준 본문 플로우를 가리거나 접근성 피드백이 없는 경우. ...

Skeleton 테스트 목적 콘텐츠 자리 보존과 layout shift 방지를 확인합니다. 읽는 소스 theme registry, placeholder blocks, loading transition 정상 결과 자리만 먼저 유지되어야 합니다. 실패 기준 실제 콘텐츠보다 시각 강조가 커지는 경우. 복구 방법 자리, 폭, 높이, 전환 시간을 다시 맞춥니다. ...

Side Sheet 테스트 목적 넓은 화면과 좁은 화면에서 분기되는지 확인합니다. 읽는 소스 theme registry, side panel, responsive breakpoint 정상 결과 측면 패널이 본문을 과도하게 가리지 않아야 합니다. 실패 기준 좁은 화면에서 레이아웃이 무너지는 경우. ...

Screen and Action 테스트 목적 한 화면에서 내용과 행동이 동시에 살아 있는지 확인합니다. 읽는 소스 theme registry, screen content, action row 정상 결과 화면과 버튼이 서로 간섭하지 않아야 합니다. 실패 기준 액션만 강조되어 화면이 사라지는 경우. ...

Progress 테스트 목적 determinate / indeterminate 구분이 맞는지 확인합니다. 읽는 소스 theme registry, progress value, completion state 정상 결과 완료율이 숫자와 막대로 같이 보여야 합니다. 실패 기준 값이 없는데도 완료처럼 보이는 경우. 복구 방법 결정형/비결정형을 분리합니다. ...

Popup Overlay 테스트 목적 레이어가 앵커와 포커스를 올바르게 다루는지 확인합니다. 읽는 소스 tooltip, popover, menu, dialog, bottom-sheet, side-sheet 정상 결과 카테고리와 하위 페이지가 연결되어야 합니다. 실패 기준 오버레이가 문맥과 분리되지 않는 경우. ...

Popover 테스트 목적 앵커 기준으로 떠 있는 표면인지 확인합니다. 읽는 소스 theme registry, anchor positioning, dismiss 정상 결과 앵커와 패널 관계가 보여야 합니다. 실패 기준 앵커를 잃거나 닫힘 조건이 없는 경우. 복구 방법 포커스, 위치, 닫힘 정책을 재조정합니다. ...

Notification Center 테스트 목적 누적 메시지와 읽음 상태를 확인합니다. 읽는 소스 theme registry, notification list, empty state 정상 결과 읽음/안읽음이 구분되어야 합니다. 실패 기준 리스트 구조가 흐트러지거나 빈 상태가 없는 경우. ...

Notification 테스트 목적 알림이 상태와 의미를 정확히 전달하는지, 본문을 압도하지 않는지 확인합니다. 읽는 소스 badge, snackbar, toast, banner, inline-warning, notification-center 정상 결과 카테고리와 세부 페이지 링크가 명확해야 합니다. 실패 기준 카테고리 요약만 있고 실제 페이지로 내려가지 못하는 경우. ...

Navigation Drawer 테스트 목적 큰 화면과 작은 화면의 분기 상태를 확인합니다. 읽는 소스 theme registry, drawer, breakpoint behavior 정상 결과 드로어와 본문이 역할을 나눠야 합니다. 실패 기준 화면 폭에 따라 본문을 지나치게 가리는 경우. ...

Menu 테스트 목적 선택 목록과 키보드 이동이 정상인지 확인합니다. 읽는 소스 theme registry, menu state, active item 정상 결과 활성 항목과 선택 항목이 분명해야 합니다. 실패 기준 단순 링크 모음처럼만 보이는 경우. ...

Loading Overlay 테스트 목적 전체 차단 여부와 과도함을 확인합니다. 읽는 소스 theme registry, blocking overlay, loading state 정상 결과 짧은 작업에는 과하지 않아야 합니다. 실패 기준 오버레이가 항상 남아있거나 조작을 과하게 막는 경우. ...

Inline Warning 테스트 목적 본문 흐름을 깨지 않는 경고인지 확인합니다. 읽는 소스 theme registry, body copy, contextual warning 정상 결과 경고가 문장 안에서 자연스럽게 읽혀야 합니다. 실패 기준 색 강조만 과도하거나 의미 구조가 없는 경우. ...

Info Surface Removal 테스트 목적 독립 삭제가 가능한지 확인합니다. 읽는 소스 theme registry, lab-only assets, removal scope 정상 결과 공용 기능과 번들 전용 기능의 경계가 분명해야 합니다. 실패 기준 번들 삭제만으로 공용 기능이 깨지는 경우. ...

Info Surface Overview 테스트 목적 설정 → 데이터 → 템플릿 → JS → CSS → 결과 흐름이 한 화면에서 이어지는지 확인합니다. 읽는 소스 theme registry, color system, header toggle, lab partial/shortcode, render output 정상 결과 현재 적용값과 실제 렌더 프리뷰가 동시에 보여야 합니다. ...

Info Surface Checklist 테스트 목적 설정, 렌더, 접근성, 반응형, 삭제 가능성을 한 번에 점검합니다. 읽는 소스 theme registry, page links, render result 정상 결과 체크 항목이 실제 페이지와 연결되어야 합니다. 실패 기준 목록만 있고 실제 검증이 없는 경우. ...

Floating Section Button 테스트 목적 떠 있는 버튼이 섹션 콘텐츠를 가리지 않는지 확인합니다. 읽는 소스 theme registry, floating action, section boundary 정상 결과 버튼이 섹션 행동을 돕되 가리지 않아야 합니다. 실패 기준 플로팅 요소가 본문 위를 과도하게 덮는 경우. ...

Dialog 테스트 목적 행동을 멈추게 하는 모달인지 확인합니다. 읽는 소스 theme registry, confirm/dismiss, modal surface 정상 결과 확인·취소가 구분되어야 합니다. 실패 기준 모달 차단과 destructive 흐름이 없는 경우. 복구 방법 모달성, 포커스, 버튼 위계를 다시 맞춥니다. ...

cta 테스트 목적 CTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다. 확인 항목 행동 문구가 짧고 분명한가 보조 설명이 있더라도 주 행동을 가리지 않는가 외부 링크와 내부 링크가 구분되는가 예시 구조 검토 요청 평일 기준 1영업일 내 확인 ...

Bottom Sheet 테스트 목적 하단에서 올라오는 보조 콘텐츠인지 확인합니다. 읽는 소스 theme registry, modal/standard sheet, responsive height 정상 결과 모바일 기준에서 안정적으로 보여야 합니다. 실패 기준 높이 과다 또는 콘텐츠가 잘리는 경우. ...

Bottom Destination Switching 테스트 목적 모바일 우선 내비게이션 전환을 확인합니다. 읽는 소스 theme registry, bottom destination nav, touch target 정상 결과 목적지 전환이 한눈에 보여야 합니다. 실패 기준 하단 내비게이션이 서로 겹치는 경우. ...

Banner 테스트 목적 전역 공지 surface가 전체 사용자에게 전달되는지 확인합니다. 읽는 소스 theme registry, global notice, dismiss policy 정상 결과 문맥 상단에 안정적으로 보여야 합니다. 실패 기준 닫기 정책이 없거나 반복 노출이 과한 경우. ...

Badge 테스트 목적 배지가 보조 신호로 유지되는지 확인합니다. 읽는 소스 theme registry, label density, inline rendering 정상 결과 짧은 신호만 보여야 합니다. 실패 기준 배지가 본문보다 앞서 시선을 빼앗는 경우. 복구 방법 숫자, 점, 상태 라벨의 우선순위를 낮춥니다. ...