블로그

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

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

footer 테스트 목적 푸터는 사이트 끝이 아니라 보조 탐색의 출발점입니다. 링크가 너무 많아도 안 되고, 너무 적어도 정보가 사라집니다. 확인 항목 정책 링크와 보조 링크가 분리되는가 복잡한 정보가 한 화면에 과밀하지 않은가 언어별 푸터 문맥이 일관적인가

header 테스트 목적 헤더는 사이트의 첫 인상입니다. 브랜드, 주요 메뉴, 언어 전환, 검색 진입점이 서로 싸우지 않아야 합니다. 확인 항목 메뉴가 너무 많아 첫 화면을 침범하지 않는가 모바일에서 메뉴가 자연스럽게 접히는가 현재 섹션이 적절히 강조되는가 기대 결과 헤더는 존재감은 분명하되, 콘텐츠보다 앞서 나가지 않아야 합니다. ...

mixed composition 테스트 목적 실제 글은 한 가지 마크업만 쓰지 않습니다. 문단과 표와 이미지와 shortcode가 섞여도 의미 계층이 유지되어야 합니다. 예시 먼저 개요를 읽습니다. 표로 비교합니다. shortcode로 보조 정보를 확인합니다. 이미지로 레이아웃을 검증합니다. 혼합 구성여러 마크업이 섞여도 본문 흐름이 유지되어야 합니다. ...

home 테스트 목적 홈은 가장 먼저 보이는 페이지이자, 가장 적게 설명해야 하는 페이지입니다. 진입점은 분명해야 하지만 첫 화면이 너무 무거우면 안 됩니다. 확인 항목 상단 네비게이션이 먼저 보이는가 핵심 섹션으로 바로 이동할 수 있는가 요약 정보가 첫 화면을 과하게 차지하지 않는가 카드 수가 많아져도 질서가 유지되는가 기대 결과 홈은 목록 페이지가 아니라 항해 지도처럼 보여야 합니다. 가장 중요한 영역을 먼저, 나머지는 자연스럽게 아래에 배치합니다. ...

markdown extended 테스트 목적 확장 마크다운 요소가 글의 의미를 해치지 않고 잘 붙는지 확인합니다. 확인 항목 표가 좁은 화면에서 무너지지 않는가 긴 링크와 긴 단어가 줄바꿈 정책을 깨지 않는가 강조와 취소선이 과도하지 않은가 예시 항목 설명 강조 중요한 문장에만 사용 취소선 변경 전후를 보여줄 때만 사용 긴 링크 본문 폭을 확인하는 엣지 케이스