반응형 레이아웃

같은 사이트라도 작은 휴대폰과 넓은 데스크톱에서 좋아 보이는 배치는 다릅니다. 화면 너비에 따라 레이아웃이 알아서 바뀌도록 만드는 것을 반응형(responsive) 디자인이라고 합니다. 이 챕터에서는 그중에서도 권장되는 방식인 모바일 우선(mobile-first) 설계를 배웁니다. 모바일 우선이란 가장 좁은 화면을 기본으로 먼저 만들고, 화면이 넓어질 때 스타일을 더해 가는 순서를 말합니다.

왜 모바일을 기본으로 두는가

좁은 화면은 보여 줄 공간이 적어 꼭 필요한 것만 세로로 쌓게 됩니다. 이 기본 위에 넓을 때만 가로 배치나 여백을 더하는 편이, 반대로 데스크톱을 먼저 만들고 좁힐 때 무엇을 숨길지 고민하는 것보다 단순합니다. 군더더기 없이 시작해 점점 더하는 방향이 사고를 가볍게 합니다.

기본 스타일은 모든 화면에 적용되고, 접두어가 붙은 스타일은 그 너비 이상에서만 추가로 적용됩니다. 즉 작은 화면이 출발점이고 큰 화면이 덧칠입니다.

브레이크포인트

레이아웃이 바뀌는 너비 경계를 브레이크포인트(breakpoint)라고 합니다. Tailwind는 이 경계마다 접두어를 제공합니다. 접두어가 없는 클래스는 모든 화면에, md:가 붙은 클래스는 중간 화면 이상에서만 적용됩니다.

세로에서 가로로

대표적인 반응형 패턴은 모바일에서 세로로 쌓인 카드를 넓은 화면에서 가로 여러 칸으로 펼치는 것입니다. flex-col은 세로 정렬, md:flex-row는 중간 화면 이상에서 가로 정렬입니다.

<div class="flex flex-col gap-4 md:flex-row">
  <div class="card">카드 1</div>
  <div class="card">카드 2</div>
  <div class="card">카드 3</div>
</div>

그리드 칸 수 늘리기

그리드를 쓰면 칸 수를 너비에 따라 늘릴 수 있습니다. 모바일은 한 칸, 태블릿은 두 칸, 데스크톱은 세 칸으로 자연스럽게 확장합니다.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  ...
</div>

• grid-cols-1 — 기본(모바일)은 한 칸으로 세로로 쌓습니다.
• md:grid-cols-2 — 태블릿 이상에서 두 칸으로 나눕니다.
• lg:grid-cols-3 — 데스크톱 이상에서 세 칸으로 펼칩니다.

1. 모바일 기준으로 세로 배치를 먼저 완성합니다.
2. 좁은 화면에서 이미 보기 좋은지 확인합니다.
3. md:, lg: 접두어로 넓을 때의 배치를 더합니다.
4. 브라우저 너비를 줄였다 늘리며 단계마다 점검합니다.