블로그

short post 이 글은 짧지만 구조가 보이도록 작성했습니다. 실제 서비스에서는 짧은 공지나 소개 글이 이런 형식을 자주 씁니다. 확인 포인트 첫 문단만 읽어도 주제가 보이는가 불필요하게 장황하지 않은가 짧아도 결론이 있는가 중간 길이 글 보기 ...

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

categories 테스트 목적 카테고리는 넓은 분류입니다. term이 늘어나도 목록의 질서가 유지되는지 확인합니다. 확인 항목 목록 페이지가 비어도 깨지지 않는가 term 페이지로 이동이 자연스러운가 blog 글과 taxonomy 연결이 정상인가

typography language 테스트 목적 한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다. 확인 항목 제목의 줄바꿈이 과도하지 않은가 영문 약어가 본문보다 튀지 않는가 숫자와 단위가 문단 흐름을 깨지 않는가 코드와 본문이 같은 톤으로 섞이지 않는가 예시 Hugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다. ...

tags 테스트 목적 태그는 세밀한 연결입니다. 너무 많아지면 정보가 흐려지므로, term 페이지와 목록의 균형을 확인해야 합니다. 확인 항목 짧은 태그가 읽기 좋게 배치되는가 태그 목록이 과밀해도 정렬이 유지되는가 연결된 글 수가 늘어나도 UI가 무너지지 않는가

theme shortcodes 테스트 목적 테마 shortcode는 디자인 시스템과 연결되어야 합니다. 토큰, spacing, 색상, 레이아웃 가정을 별도로 유지하지 않는지 확인합니다. 예시 다음 검증 페이지 보기 ...

pagination 테스트 목적 목록이 길어질수록 페이징의 품질이 중요해집니다. 현재 위치, 이전/다음 관계, 버튼 크기가 안정적이어야 합니다. 확인 항목 현재 페이지가 충분히 강조되는가 이전/다음 이동이 직관적인가 숫자 범위가 너무 넓거나 좁지 않은가

flat pages 테스트 목적 평면 페이지는 구조가 얕아서 단순해 보이지만, 실제로는 경로와 메타데이터를 가장 깔끔하게 보여 줍니다. 확인 항목 상위 섹션 없이도 페이지가 독립적으로 보이는가 breadcrumb가 과하지 않은가 본문과 메타가 균형을 이루는가

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

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