17강. 컴포넌트 스타일링과 CSS 구조화

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

컴포넌트가 늘면서 .title, .card 같은 클래스가 서로 덮어쓸 수 있습니다. 앱 전체 규칙과 컴포넌트 전용 스타일을 구분해 관리해야 합니다.

✓2. 학습 목표

• 전역 CSS와 CSS Modules의 적용 범위를 구분한다.
• 디자인 토큰을 CSS 사용자 지정 속성으로 정의한다.
• 상태와 구조를 의미하는 클래스 이름을 적용한다.

◇3. 핵심 개념

index.css에는 리셋, 글꼴, 색상 변수처럼 앱 전체에 적용할 규칙을 둡니다. *.module.css는 import한 컴포넌트 안에서 고유한 클래스 이름으로 변환되어 충돌을 줄입니다.

인라인 스타일은 계산된 소량의 값에는 유용하지만 hover, media query, 재사용 규칙은 CSS가 더 적합합니다. 스타일 파일을 컴포넌트 가까이에 두면 변경 범위를 찾기 쉽습니다.

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

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

:root {
  font-family: Inter, Pretendard, system-ui, sans-serif;
  color: #e7e9f3;
  background: #10121a;
  --surface: #1a1d29;
  --line: #303446;
  --accent: #8b5cf6;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; }
button, input, select { font: inherit; }

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

.card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.title { margin: 0; font-size: 1.2rem; }
.score { color: #c4b5fd; font-weight: 700; }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

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

import styles from './GameCard.module.css';
import type { Game } from '../types/game';

export function GameCard({ game }: { game: Game }) {
  return (
    <article className={styles.card}>
      <p>{game.releaseDate}</p>
      <h2 className={styles.title}>{game.title}</h2>
      <p className={styles.score}>{game.score}점</p>
      <button className={styles.button} type="button">관심 게임</button>
    </article>
  );
}

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

Vite가 CSS Module import를 클래스 이름 객체로 바꿉니다. styles.card는 빌드 때 고유한 이름이 되어 다른 파일의 card와 충돌하지 않습니다. 전역 변수는 모듈 안에서도 상속되어 공통 색상을 재사용합니다.

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

• 모든 스타일을 전역에 작성: 리셋·토큰만 전역에 두고 컴포넌트 규칙은 모듈로 옮깁니다.
• CSS Module을 일반 문자열로 사용: className={styles.card}처럼 import 객체를 사용합니다.
• 포커스 윤곽선 제거: 마우스 없이도 위치를 알 수 있게 :focus-visible 스타일을 제공합니다.
• 색상 값을 파일마다 반복: 자주 쓰는 값은 사용자 지정 속성으로 정의합니다.

✎7. 직접 실습

FilterBar.module.css를 만들고 label, input, select, 버튼을 정렬하세요. 오류, 성공, 강조 색상을 전역 변수로 정의해 상태 메시지에도 재사용하세요.

?8. 이해 점검 질문 3개

1. CSS Modules가 클래스 충돌을 줄이는 방식은 무엇인가요?
2. 전역 CSS에 남겨 두기 좋은 규칙은 무엇인가요?
3. 포커스 스타일이 키보드 사용자에게 필요한 이유는 무엇인가요?

■9. 핵심 요약

전역 CSS는 기반 규칙과 토큰을, CSS Modules는 컴포넌트 전용 규칙을 담당합니다. 스타일의 범위를 코드 책임과 맞추면 확장이 쉬워집니다.