18강. 반응형 UI 만들기

?1. 이번 강의에서 해결할 문제

데스크톱에서 만든 필터와 카드 그리드가 작은 화면에서는 잘리거나 너무 좁습니다. 기기 이름이 아니라 콘텐츠가 깨지는 지점을 기준으로 레이아웃을 바꿉니다.

✓2. 학습 목표

• 모바일 우선으로 기본 레이아웃을 작성한다.
• Grid의 auto-fit과 minmax로 유연한 카드 목록을 만든다.
• 콘텐츠 기준 breakpoint와 접근성 설정을 적용한다.

◇3. 핵심 개념

반응형 UI는 뷰포트에 맞춰 콘텐츠가 읽히고 조작 가능하도록 변하는 화면입니다. 작은 화면을 기본으로 작성하고 공간이 충분할 때 media query로 열을 늘리면 규칙이 단순합니다.

고정 너비 대신 min(), minmax(), clamp() 같은 유연한 값을 사용합니다. 브라우저를 확대해도 가로 스크롤이나 잘림이 없는지 확인합니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/App.module.css

.shell {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: 1.5rem 4rem;
}

.gameGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.filters {
  display: grid;
  gap: 0.75rem;
  margin-block: 1.5rem;
}

@media (min-width: 48rem) {
  .filters {
    grid-template-columns: 2fr 1fr auto;
    align-items: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

파일 경로: game-release-dashboard/src/App.tsx

import styles from './App.module.css';
import { FilterBar } from './components/FilterBar';
import { GameList } from './components/GameList';

export default function App() {
  return (
    <main className={styles.shell}>
      <h1>Release Radar</h1>
      <section className={styles.filters}><FilterBar /></section>
      <section className={styles.gameGrid} aria-label="게임 목록">
        <GameList />
      </section>
    </main>
  );
}

→5. 코드가 동작하는 이유

shell은 화면보다 넓어지지 않으면서 최대 폭을 제한합니다. auto-fit은 들어갈 수 있는 만큼 열을 만들고, minmax는 카드가 16rem보다 좁아질 상황에서 다음 줄로 보냅니다. 48rem 이상에서만 필터가 가로로 배치됩니다.

!6. 자주 하는 실수와 해결법

• 기기 모델별 breakpoint 작성: 콘텐츠가 실제로 답답해지는 폭을 기준으로 정합니다.
• 카드에 고정 px 너비: 컨테이너에 맞는 유연한 트랙을 사용합니다.
• 모바일에서 글자와 버튼을 지나치게 축소: 크기보다 흐름과 줄바꿈을 먼저 바꿉니다.
• 가로·세로 화면만 확인: 200% 확대, 긴 제목, 키보드 탐색도 테스트합니다.

✎7. 직접 실습

320px, 768px, 1440px 너비에서 필터와 카드가 각각 어떻게 배치되는지 확인하세요. 40자 이상의 게임 제목을 넣고 카드 밖으로 넘치지 않게 수정하세요.

?8. 이해 점검 질문 3개

1. 모바일 우선 CSS의 기본 규칙은 어느 화면에 적용되나요?
2. auto-fit과 minmax 조합이 카드 수를 유연하게 만드는 원리는 무엇인가요?
3. breakpoint를 기기 이름보다 콘텐츠 기준으로 잡아야 하는 이유는 무엇인가요?

■9. 핵심 요약

반응형 화면은 유연한 폭과 그리드를 기본으로 하고 필요한 지점에서만 레이아웃을 바꿉니다. 다양한 폭과 확대 상태를 실제로 확인해야 완성됩니다.