모바일 대응을 “데스크톱 화면을 좁은 화면에 맞게 줄이는 일” 로 생각하면 작업이 끝없이 늘어납니다. 브레이크포인트를 하나 넣고, 거기서 깨진 것을 고치고, 그러다 다른 폭에서 또 깨집니다. 이 반복의 원인은 실력이 아니라 작업의 순서입니다.
좁은 화면에서 시작하면 결정이 줄어듭니다
넓은 화면에서 좁은 화면으로 가는 방향은 빼기입니다. 이미 자리를 차지하고 있는 것들 중 무엇을 버릴지, 무엇을 접을지, 무엇을 아래로 내릴지 매번 정해야 합니다. 그런데 그 화면은 애초에 모든 요소가 다 보이는 것을 전제로 설계됐기 때문에, 무엇을 빼도 설계가 어긋납니다.
반대 방향은 더하기입니다. 좁은 화면에서는 선택지가 거의 없습니다 — 한 줄로 세우고, 중요한 것을 위에 둡니다. 그렇게 순서가 한 번 정해지면 넓은 화면에서 할 일은 남는 가로 공간을 어떻게 쓸지 정하는 것뿐입니다. “무엇을 버릴까” 라는 결정이 통째로 사라집니다.
그 순서가 곧 문서 구조입니다
좁은 화면에서 강제로 정해진 한 줄 순서는 배치 이상의 의미가 있습니다. 그것이 그대로 HTML 의 문서 순서가 되기 때문입니다. 화면 낭독기는 이 순서로 읽고, 키보드 이동도 이 순서를 따르며, 검색엔진도 이 순서로 문서의 중요도를 이해합니다.
데스크톱 배치를 먼저 정하면 이 순서가 시각적 위치에 끌려갑니다. 오른쪽 사이드바가 마크업에서는 본문보다 앞에 오는 식입니다. 넓은 화면에서는 아무 문제가 없지만, 좁아지는 순간 사이드바가 본문 위에 얹히고 낭독 순서도 그렇게 됩니다. 그때 CSS 로 위치만 바꿔 덮으면 화면과 순서가 어긋나 오히려 나빠집니다.
도구의 문제가 아니라 CSS 의 방향입니다
“모바일 우선” 을 디자인 도구에서 좁은 아트보드를 먼저 그리는 일로만 이해하면 절반입니다. 결과를 실제로 가르는 것은 CSS 를 어느 방향으로 쓰느냐입니다. 기본 선언을 좁은 화면 기준으로 두고, min-width 질의로 넓어질 때만 더합니다.
예를 들어 기본은 .cards { display: grid; gap: 1rem; } 한 줄이고, 넓어질 때 @media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } 를 더합니다. 반대로 두 칸을 기본으로 두고 max-width 로 되돌리는 구조는 폭마다 되돌리기 선언이 쌓이고, 그 선언들은 서로를 덮습니다.
워드프레스에서는 테마가 이 방향을 이미 정해 둔 경우가 많습니다. 테마를 고를 때 무엇을 보는지는 테마 · 플러그인 아카이브에 정리돼 있고, 이미 운영 중인 사이트의 화면을 손보는 절차는 작업 과정에서 볼 수 있습니다.
다음 회차
순서가 정해졌다면 다음은 언제 배치를 바꿀지입니다. 다음 회차의 결론을 미리 말하면 — 그 시점은 기기 이름이 아니라 콘텐츠가 알려 줍니다.