반응형 디자인

🎯 학습 목표

이 강을 마치면 여러분은 하나의 웹 페이지가 휴대폰·태블릿·컴퓨터 등 어떤 화면 크기에서도 잘 보이도록 만드는 반응형 디자인을 할 수 있게 됩니다. 오늘날 사람들은 다양한 크기의 기기로 웹을 봅니다. 큰 화면에 맞춘 페이지가 작은 휴대폰에서 엉망으로 보이면 안 되겠지요. 이번 강은 그 문제를 해결하는 핵심 기법을 다룹니다.

구체적으로는 세 가지를 배웁니다. 첫째, 모바일 대응의 필수 설정인 viewport를 이해합니다. 둘째, 화면 크기에 따라 스타일을 바꾸는 미디어 쿼리를 익힙니다. 셋째, 좋은 반응형 전략인 모바일 우선 설계를 살펴봅니다.

📱 반응형 디자인이란

이 섹션에서는 반응형 디자인의 개념부터 살펴보겠습니다.

반응형 디자인이란, 하나의 페이지가 보는 기기의 화면 크기에 반응해 배치와 모양을 스스로 조절하는 것을 말합니다. 예를 들어 컴퓨터에서는 세 칸으로 나란히 보이던 카드가, 좁은 휴대폰에서는 한 칸씩 세로로 쌓이도록 바뀌는 것입니다. 모바일용과 데스크톱용 페이지를 따로 만드는 것이 아니라, 같은 페이지가 상황에 맞게 변하는 것이 핵심입니다.

사실 앞서 배운 도구들 중에도 반응형의 씨앗이 있었습니다. 11강의 상대 단위(%·rem), 17강의 flex-wrap, 18강의 auto-fill 그리드는 모두 화면 크기에 유연하게 적응하는 성질을 갖고 있었습니다. 이번 강에서는 여기에 더해, 화면 크기에 따라 스타일을 명시적으로 바꾸는 방법을 배웁니다. 그 전에 반드시 해야 할 기본 설정부터 봅시다.

🔧 필수 설정 — viewport

이 섹션에서는 모바일 대응의 첫 단추인 viewport 설정을 살펴보겠습니다.

반응형 디자인을 하려면, HTML 문서의 <head>에 viewport 메타 태그를 반드시 넣어야 합니다.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

이 한 줄이 왜 필요할까요? 이것이 없으면, 휴대폰 브라우저는 페이지를 넓은 데스크톱 크기로 그린 다음 통째로 축소해서 보여 줍니다. 그 결과 글자가 깨알같이 작아져 읽으려면 손가락으로 확대해야 합니다. 이 태그는 브라우저에게 '이 페이지를 기기의 실제 너비(width=device-width)에 맞춰서, 확대하지 말고(initial-scale=1.0) 보여 줘'라고 알려 줍니다.

이 설정이 있어야 비로소 페이지가 모바일에서 제대로 된 크기로 표시되고, 뒤에 배울 미디어 쿼리도 올바로 작동합니다. 반응형 작업을 시작할 때 가장 먼저 챙겨야 할 것이니, 이 태그를 넣는 것을 습관으로 삼으세요. 거의 모든 웹 페이지가 이 한 줄로 시작합니다.

🎚️ 미디어 쿼리 — 화면 크기별 스타일

이 섹션에서는 반응형 디자인의 핵심 도구, 미디어 쿼리를 살펴보겠습니다.

미디어 쿼리(media query)는 '특정 조건일 때만 이 스타일을 적용하라'고 지정하는 CSS 문법입니다. 주로 조건으로 화면 너비를 씁니다. 기본 형태는 다음과 같습니다.

/* 화면 너비가 768px 이하일 때만 적용 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

이 코드를 읽어 봅시다. @media (max-width: 768px)는 '화면 너비가 768px 이하일 때'라는 조건입니다. 그 중괄호 안에 적은 스타일은 그 조건을 만족할 때만 적용됩니다. 위 예시는 화면이 768px 이하(대략 태블릿·휴대폰)로 좁아지면, 16강에서 배운 대로 flex 방향을 column으로 바꿔 가로 배치를 세로 배치로 전환합니다. 화면이 그보다 넓으면 이 스타일은 무시되고 원래 가로 배치가 유지됩니다.

여기서 조건의 기준이 되는 값(768px 등)을 브레이크포인트(breakpoint)라 합니다. '이 지점에서 디자인이 바뀐다'는 분기점입니다. 흔히 휴대폰·태블릿·데스크톱을 나누는 몇 개의 브레이크포인트를 정해 두고, 각 구간에 맞는 스타일을 미디어 쿼리로 지정합니다. 이렇게 하면 하나의 CSS로 여러 화면 크기에 대응할 수 있습니다.

📲 모바일 우선 설계

이 섹션에서는 반응형을 짤 때 권장되는 전략, 모바일 우선 설계를 살펴보겠습니다.

미디어 쿼리를 쓰는 방식에는 두 가지 접근이 있습니다. 하나는 데스크톱을 기본으로 만들고 작은 화면용을 max-width로 덧붙이는 방식이고, 다른 하나는 모바일을 기본으로 만들고 큰 화면용을 min-width로 덧붙이는 방식입니다. 오늘날 널리 권장되는 것은 후자, 즉 모바일 우선(mobile-first) 설계입니다.

/* 기본: 모바일 (좁은 화면) */
.container {
  flex-direction: column;
}

/* 화면이 넓어지면: 데스크톱 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

이 방식은 가장 작고 단순한 모바일 화면을 기본으로 만든 뒤, 화면이 넓어질 때(min-width) 추가 스타일을 얹는 순서로 작성합니다. 이렇게 하는 이유가 있습니다. 첫째, 오늘날 웹 이용자의 상당수가 모바일이므로 모바일을 먼저 챙기는 것이 합리적입니다. 둘째, 단순한 것(모바일)에서 복잡한 것(데스크톱)으로 더해 가는 방식이 코드 관리에 더 깔끔합니다. 처음에는 어느 방식이든 괜찮지만, 모바일 우선의 흐름을 익혀 두면 실무에서 큰 도움이 됩니다.

⚠️ 반응형 디자인을 다룰 때의 주의점

이 섹션에서는 흔한 실수를 정리하겠습니다.

첫 번째, viewport 태그를 빠뜨리는 것입니다. 이 태그가 없으면 미디어 쿼리를 아무리 잘 짜도 모바일에서 제대로 작동하지 않습니다. 반응형 작업의 맨 처음에 반드시 넣으세요.

두 번째, 고정 px 크기에만 의존하는 것입니다. 너비를 전부 px로 고정하면 화면이 좁아질 때 가로 스크롤이 생기거나 요소가 잘립니다. 앞서 배운 %·rem·fr 같은 유연한 단위와 flex-wrap을 함께 활용하세요.

세 번째, 브레이크포인트를 너무 많이 만드는 것입니다. 화면 크기마다 세세하게 나누면 관리가 어려워집니다. 보통 몇 개의 주요 분기점(예: 태블릿, 데스크톱)만 잡아도 충분합니다.

📝 핵심 요약

이번 강에서는 반응형 디자인을 배웠습니다.

• 반응형 디자인 — 하나의 페이지가 화면 크기에 반응해 배치를 바꾸는 것으로, 상대 단위·flex-wrap 등이 그 바탕입니다.
• viewport — 모바일에서 실제 크기로 표시되게 하는 필수 메타 태그로, 반드시 head에 넣습니다.
• 미디어 쿼리 — @media (max-width/min-width: ...)로 특정 화면 크기에서만 스타일을 적용하며, 그 기준을 브레이크포인트라 합니다.
• 모바일 우선 — 모바일을 기본으로 만들고 min-width로 큰 화면 스타일을 더해 가는, 오늘날 권장되는 전략입니다.

이제 다양한 화면에 대응하는 법까지 익혔습니다. 다음 강에서는 요소에 부드러운 움직임을 더하는 전환과 애니메이션을 배워, 페이지에 생동감을 불어넣는 법을 익히겠습니다. 다음 강 「전환과 애니메이션」에서 이어가겠습니다.

📚 참고 자료

• 반응형 디자인 — MDN Web Docs
• 미디어 쿼리 사용하기 — MDN Web Docs
• viewport 메타 태그 — MDN Web Docs