responsive QA

반응형 구현은 폭별로 레이아웃, 글자, 상태를 함께 점검한다

메타 뷰포트와 유연한 레이아웃을 먼저 확인하고, 미디어 쿼리는 콘텐츠가 답답해지는 폭에서 필요한 규칙만 보탠다.

폭별 관찰 지점

desktop

넓은 화면

최대 폭, 컬럼 수, 줄 길이가 과하게 퍼지지 않는지 확인한다.

tablet

중간 화면

flex-wrap과 grid minmax가 줄바꿈을 자연스럽게 만드는지 본다.

phone

작은 화면

한 열 배치, 터치 간격, 긴 텍스트 줄바꿈을 마지막으로 확인한다.

실행 순서

meta fluid query text test

CSS 도구를 고르기 전에 콘텐츠 폭이 먼저 줄어드는지 보고, 부족한 지점에서만 breakpoint를 추가한다.

검증 매트릭스

레이아웃

열 수, gap, wrapping

Flexbox

한 방향 정렬과 줄바꿈이 필요한 컴포넌트에 적합하다.

CSS Grid

카드 목록처럼 행과 열을 함께 조절해야 할 때 유리하다.

Styled

상태 기반 반응형 규칙은 컴포넌트와 가까이 둘 수 있다.