Components

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

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

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

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

alerts 테스트 목적 알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다. 확인 항목 알림이 본문 문단과 혼동되지 않는가 경고와 정보의 계층이 분리되는가 긴 메시지가 들어가도 박스가 무너지지 않는가 raw HTML 예시 검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다. 실패 기준 알림이 본문처럼 보여 버리는 경우 색만 바뀌고 의미 구조가 없는 경우

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

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

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

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