콘텐츠 순위
핵심 제목, 주요 액션, 상태 정보, 보조 설명의 우선순위를 먼저 정한다.
content first레이아웃 전환
grid 열 수, sidebar 위치, card 밀도를 폭 기준에 맞춰 바꾼다.
breakpoint터치 영역
모바일에서는 버튼 간격과 입력 필드 높이가 조작 가능한지 확인한다.
tap target실데이터 검증
긴 한국어 제목, 영문 URL, 숫자 표가 깨지지 않는지 실제 콘텐츠로 본다.
real copy320-480
단일 열과 핵심 액션을 우선한다.
보조 설명은 접거나 순서를 뒤로 보내되 기능 자체는 숨기지
않는다.
mobile
768+
목록과 상세, 필터와 결과를 나란히 배치할 수 있다.
밀도가 늘어도 스캔 순서가 유지되어야 한다.
tablet
1200+
여백을 키우기보다 비교, 탐색, 상태 정보를 더 잘
배치한다.
너무 긴 줄 길이는 가독성을 떨어뜨린다.
desktop
반응형 QA
CSS 기준
@media (max-width: 640px) {
.layout { grid-template-columns: 1fr; }
}