브레이크포인트를 정할 때 가장 흔한 방법은 기기 목록을 참고하는 것입니다. 휴대전화 · 태블릿 · 노트북 · 데스크톱 네 구간을 잡고 각 구간의 대표 폭을 씁니다. 이 방법의 문제는 두 가지입니다 — 기기 목록이 매년 바뀌고, 화면 폭과 기기 종류가 더 이상 일치하지 않습니다.
기기 이름으로 정하면 왜 낡나
같은 “태블릿” 안에도 세로로 든 좁은 화면과 가로로 든 넓은 화면이 있고, 접히는 기기는 한 대가 두 구간을 오갑니다. 터치가 되는 노트북은 폭은 넓은데 손가락으로 조작합니다. 브라우저 창을 반으로 줄여 쓰는 사람도 많습니다. 폭은 알 수 있지만 기기는 알 수 없습니다.
그래서 CSS 안의 @media (min-width: 768px) 옆에 “아이패드” 라고 적힌 주석은 몇 년 지나면 사실이 아닌 설명이 됩니다. 그 주석을 믿고 값을 조정한 사람은 실재하지 않는 기기를 위해 화면을 고치게 됩니다.
무너지는 지점을 찾는 방법
대신 화면에게 직접 물어봅니다. 컴포넌트 하나를 브라우저에 띄우고 창을 아주 좁은 폭에서부터 천천히 넓히면서, 보기 불편해지는 순간을 기록합니다. 그 폭이 기준선입니다.
무너지는 신호는 대체로 정해져 있습니다. 본문 한 줄이 너무 길어져 눈이 다음 줄을 찾기 어려워지는 지점, 카드 제목이 네 줄로 접히는 지점, 표의 열이 서로 밀려 붙는 지점, 버튼 두 개가 겹치기 직전인 지점입니다. 이 중 하나라도 나오면 거기가 배치를 바꿀 자리입니다.
중요한 것은 이렇게 찾은 값이 페이지가 아니라 컴포넌트의 것이라는 점입니다. 카드 그리드가 무너지는 폭과 내비게이션이 무너지는 폭은 서로 다릅니다. 두 값을 하나로 합치려 하면 한쪽은 반드시 이르거나 늦습니다.
개수는 적을수록 좋습니다
기준선이 일곱 개쯤 되었다면 대개 중간 상태를 유동적으로 만들지 않았다는 뜻입니다. 글자 크기와 여백을 단계마다 다시 선언하고 있으면 폭이 조금만 어긋나도 어색해지고, 그 어색함을 기준선으로 메우게 됩니다. 다음 회차의 유동 크기가 이 문제를 정면으로 다룹니다.
단위는 px 대신 rem 을 씁니다. @media (min-width: 48rem) 는 브라우저의 기본 글자 크기 설정을 존중하므로, 글자를 크게 쓰는 사용자에게는 배치가 조금 더 일찍 바뀝니다 — 글자가 커졌으니 한 줄에 들어가는 글자 수도 줄어든 상태이고, 따라서 더 일찍 바뀌는 편이 옳습니다.
한 걸음 더 가면 컨테이너 질의가 있습니다. 부모에 container-type: inline-size 를 선언해 두면 자식은 @container (min-width: 30rem) 로 자기 자신이 놓인 칸의 폭을 기준으로 판단합니다. 같은 카드가 넓은 본문에서는 가로형으로, 좁은 사이드바에서는 세로형으로 스스로 바뀝니다 — 컴포넌트의 기준선을 컴포넌트가 갖는 가장 정확한 형태입니다.
테마가 이미 정해 둔 기준선을 확인하고 조정하는 이야기는 테마 · 플러그인 아카이브에 있고, 화면 구조까지 포함한 정비를 한 번에 맡기고 싶다면 최적화 지원 사업에 포함돼 있습니다.
다음 회차
기준선을 줄이는 가장 확실한 방법은 단계 사이를 유동적으로 만드는 것입니다. 다음 회차는 clamp() 하나로 글자 크기와 여백을 이어 붙이는 방법입니다.