2nd/10_Wiki/Topics/모듈식 CSS(Modular CSS).md

모듈식 CSS(Modular CSS)

📌 Brief Summary

모듈식 CSS(CSS Modules)는 로컬 범위(Local scope)의 CSS 클래스 이름을 자동으로 생성하여 컴포넌트 단위로 스타일을 캡슐화하는 CSS 아키텍처 및 도구입니다 [1, 2]. 빌드 타임에 클래스 이름을 고유한 식별자로 변환하여 글로벌 네임스페이스 충돌을 원천적으로 방지하며, 표준 CSS 문법을 유지하면서도 대규모 프론트엔드 프로젝트에서 뛰어난 안정성과 유지보수성을 제공합니다 [1, 3].

📖 Core Content

• 작동 원리 및 주요 특징: CSS Modules는 자바스크립트 컴포넌트로 CSS 파일을 임포트할 때, 빌드 도구(Webpack, Vite 등)가 사람이 읽을 수 있는 클래스 이름을 고유한 식별자(예: Button_button__x9KdL)로 변환하는 방식으로 작동합니다 [1, 4]. 이 과정에서 런타임 자바스크립트 실행 없이 정적 CSS를 생성하므로 오버헤드가 발생하지 않습니다 [3, 5]. 표준 CSS 문법은 물론 미디어 쿼리, 복잡한 애니메이션, 의사 요소(pseudo-elements) 등을 제약 없이 사용할 수 있으며, Sass(SCSS)와 같은 전처리기와도 매끄럽게 통합됩니다 [1, 6].

• 장점 (유지보수 및 성능): 가장 큰 장점은 완벽한 로컬 스코프(Local scope)를 통한 캡슐화로, 다른 컴포넌트와의 스타일 충돌이나 스타일 누수(Leakage)를 방지한다는 것입니다 [1, 2]. 제로 런타임 오버헤드 덕분에 렌더링 성능이 매우 우수하며 브라우저 캐싱을 효과적으로 활용할 수 있습니다 [7, 8]. 또한 타입스크립트(TypeScript)와 결합하여 빌드 타임에 오타를 잡을 수 있으며, 여러 팀이 협업하는 환경에서 클래스 명명에 대한 논쟁을 줄이고 컴포넌트의 소유권을 명확히 할 수 있습니다 [9].

• 단점 및 한계: 로직이 담긴 자바스크립트 파일과 스타일이 담긴 CSS 파일 두 곳을 오가며 작업해야 하는 컨텍스트 스위칭(Context switching)의 번거로움이 있습니다 [5]. 또한, 스타일 충돌은 방지되지만 클래스 이름 자체는 개발자가 직접 지어주어야 하므로 작명 피로도(Naming fatigue)가 여전히 존재합니다 [5]. 더불어 컴포넌트의 props나 상태에 따라 동적으로 스타일을 할당하려면 문자열 연결이나 헬퍼 라이브러리를 거쳐야 하며, CSS와 자바스크립트 간의 데이터 공유가 까다로운 편입니다 [5, 6].

• 실무 전략 및 권장 사항: CSS Modules는 복잡한 커스텀 디자인 시스템이나 정교한 애니메이션이 필요하며, 기존 바닐라 CSS나 SCSS 기반의 환경에서 마이그레이션하려는 조직에 가장 적합한 전략으로 평가받습니다 [8, 10]. 2025년 기준, Next.js App Router(React Server Components)와 같은 최신 환경에서는 성능 오버헤드가 큰 런타임 CSS-in-JS를 대신할 가장 훌륭한 대안 중 하나로 강력히 권장됩니다 [11, 12]. 실무에서는 완벽한 캡슐화의 이점을 누리면서도 CSS Modules 파일 내부적으로 BEM(Block Element Modifier) 네이밍 규칙을 일부 결합하여 가독성을 높이는 방법도 널리 사용됩니다 [13].

🔗 Knowledge Connections

• Related Topics: BEM, Tailwind CSS, CSS-in-JS, CSS 구조 설계 방식
• Projects/Contexts: React 서버 컴포넌트 (RSC) 및 Next.js 환경, 대규모 프론트엔드 프로젝트 아키텍처
• Contradictions/Notes: 소스에 따르면, 전통적인 BEM 방식은 개발자의 수동적인 규칙 준수에 의존하기 때문에 실수로 인한 스타일 충돌 가능성이 남아 있는 반면, CSS Modules는 빌드 도구를 통해 식별자를 생성함으로써 이를 시스템적으로 완벽히 자동화하여 해결합니다 [2, 14]. 또한 Tailwind CSS는 파일을 이동할 필요 없이 빠른 개발이 가능하지만 마크업(HTML/JSX)이 매우 장황해진다는 단점이 있는 반면, CSS Modules는 마크업을 깔끔하게 유지할 수 있는 대신 스타일 파일과 로직 파일을 오가는 컨텍스트 스위칭 비용이 발생합니다 [5, 15].

---

Last updated: 2026-04-26