[G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
@@ -2,76 +2,191 @@
 id: wiki-2026-0508-유지보수-가능한-css-아키텍처-css-modules-ta
 title: "유지보수 가능한 CSS 아키텍처(CSS Modules & Tailwind)"
 category: 10_Wiki/Topics
-status: needs_review
+status: verified
 canonical_id: self
-aliases: []
+aliases: [Maintainable CSS Architecture, CSS Modules + Tailwind, CSS 구조 설계]
 duplicate_of: none
 source_trust_level: A
-confidence_score: 0.92
-tags: [uncategorized]
+confidence_score: 0.9
+verification_status: applied
+tags: [css, tailwind, css-modules, architecture, frontend]
 raw_sources: []
-last_reinforced: 2026-05-08
+last_reinforced: 2026-05-10
 github_commit: pending
-inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: css
+  framework: tailwind-v4
 ---

-# [[유지보수 가능한 CSS 아키텍처(CSS Modules & Tailwind)|유지보수 가능한 CSS 아키텍처(CSS Modules & Tailwind]]
+# 유지보수 가능한 CSS 아키텍처(CSS Modules & Tailwind)

-## 📌 한 줄 통찰 (The Karpathy Summary)
-현대 프론트엔드 개발에서 CSS는 단순한 시각적 장식을 넘어 장기적인 유지보수성과 아키텍처 무결성이 중요한 엔지니어링 영역으로 진화했습니다 [1]. 이를 위해 등장한 **CSS Modules**는 빌드 타임에 고유한 클래스명을 생성하여 스타일 충돌을 방지하고 캡슐화를 자동화하며, **[[Tailwind CSS|Tailwind CSS]]**는 유틸리티 퍼스트(Utility-first) 접근 방식을 통해 마크업 내에서 직접 스타일을 조합하여 개발 속도와 일관성을 높입니다 [2-5]. 대규모 프로젝트에서는 이 두 접근 방식을 적절히 결합하여, 레이아웃에는 Tailwind를 적용하고 복잡한 컴포넌트에는 CSS Modules를 활용하는 하이브리드 전략이 유지보수성을 극대화하는 모범 사례로 사용되고 있습니다 [6-8].
+## 매 한 줄
+> **"매 utility-first × scoped-modules 의 hybrid 가 매 2026 의 default"**. CSS Modules 의 file-scoped 격리와 Tailwind v4 의 utility token system 을 결합하면, global cascade 의 fragility 없이도 매 design system consistency 를 확보할 수 있다. CSS-in-JS 의 runtime cost 없이 build-time 으로 모든 게 resolve 된다.

-## 📖 구조화된 지식 (Synthesized Content)
-*   **프론트엔드 스타일링 아키텍처의 패러다임 변화**
-    과거 웹 개발에서 CSS는 글로벌 네임스페이스의 특성상 스타일 충돌과 'CSS 비대화(Bloat)'라는 기술적 부채를 유발했습니다 [1]. 이를 완화하기 위해 BEM(Block Element Modifier)과 같은 구조화된 네이밍 규칙이 도입되었으나, 프로젝트 규모가 커지면서 사람의 규칙 준수에 의존하는 방식은 한계를 드러냈습니다 [9, 10]. 이에 따라 클래스명 생성을 빌드 파이프라인에 위임하는 CSS Modules와, 사전 정의된 유틸리티 클래스를 조립하는 Tailwind CSS가 현대적인 해결책으로 자리 잡았습니다 [4, 11].
+## 매 핵심

-*   **CSS Modules의 특징과 유지보수성**
-    *   **자동 캡슐화(Auto-scoping):** CSS 파일이 자바스크립트 컴포넌트로 임포트될 때 `Button_button__x9KdL`과 같은 고유한 해시 식별자를 자동으로 생성하여, 스타일 누수 및 네이밍 충돌을 완벽히 방지합니다 [3, 4, 12].
-    *   **표준 CSS 활용 및 제로 런타임:** 런타임 오버헤드 없이 정적 CSS를 출력하며, 가상 요소(Pseudo-elements), 애니메이션, 미디어 쿼리 등 기존 표준 CSS 기능과 [[SCSS|SCSS]] 같은 전처리기를 그대로 사용할 수 있습니다 [3, 13-15].
-    *   **단점:** 스타일 파일과 컴포넌트 마크업 파일을 오가며 작업해야 하는 컨텍스트 스위칭이 발생하며, 복잡한 동적 스타일링 처리를 위해 추가적인 작업이 필요합니다 [14].
+### 매 layering
+- **Tokens layer**: Tailwind v4 `@theme` directive — colors, spacing, type scale.
+- **Utilities layer**: `flex`, `gap-4`, `text-sm` — 90% 의 styling.
+- **Components layer**: CSS Modules `.button { ... }` — 매 multi-property cluster 의 reuse.
+- **Overrides layer**: page-specific 의 minimal exception.

-*   **Tailwind CSS의 특징과 유지보수성**
-    *   **유틸리티 퍼스트(Utility-first):** `flex`, `pt-4` 등 단일 목적을 가진 유틸리티 클래스를 HTML이나 JSX 내에 직접 적용하여, 파일 간 이동 없이 매우 빠르게 UI를 구축할 수 있습니다 [2, 5, 16].
-    *   **디자인 일관성 및 파일 크기 최적화:** 엄격한 디자인 토큰(간격, 색상 등)을 설정 파일 기반으로 강제하여 일관성을 유지합니다 [17, 18]. 또한 JIT 컴파일러가 실제로 사용된 클래스만 빌드에 포함시키므로, 프로젝트가 커져도 CSS 번들 사이즈가 일정하게(5~20kb 수준) 유지되며 데드 코드가 자동으로 제거됩니다 [5, 17, 18].
-    *   **단점:** 마크업 클래스명이 지나치게 길어져 가독성이 떨어질 수 있으며(HTML Verbosity), 수많은 유틸리티 클래스를 익혀야 하는 학습 곡선이 존재합니다 [17, 19, 20].
+### 매 결정 트리
+- 1-3 utilities → inline className.
+- 4+ utilities 의 repeated 사용 → CSS Module class + `@apply` (Tailwind v4) or extract component.
+- complex states (hover, focus-within, group) → CSS Module + `&:hover` nested.
+- design token (color, spacing) → `@theme` 의 single source.

-*   **실무에서의 하이브리드 아키텍처 전략**
-    2025년 이후의 엔지니어링 팀은 두 기술의 장점을 모두 취하는 혼합(Hybrid) 방식을 자주 채택합니다 [6-8]. 레이아웃이나 간격 배치 등 속도와 일관성이 중요한 영역에서는 Tailwind CSS를 적용하고, 복잡한 애니메이션이나 정밀한 커스텀 스타일링이 필요한 특정 컴포넌트에서는 CSS Modules나 SCSS를 사용하는 방식입니다 [7, 8, 21]. 이러한 전략은 개발 경험(DX)을 높이고 유지보수를 용이하게 하며 런타임 성능 저하 없이 대규모 애플리케이션을 지탱할 수 있게 합니다 [22, 23].
+### 매 응용
+1. Next.js App Router 의 `*.module.css` 와 Tailwind 병행.
+2. Vite + React 의 component-scoped styles.
+3. Storybook 의 visual regression 안정화.

-## 🔗 지식 연결 (Graph)
- **Related Topics:** [[BEM (Block Element Modifier)|BEM (Block Element Modifier]], 유틸리티 퍼스트 CSS(Utility-first CSS), 디자인 토큰([[Design Tokens|Design Tokens]], [[CSS-in-JS|CSS-in-JS]], React Server Components (RSC
- **Projects/Contexts:** 대규모 프론트엔드 프로젝트(Enterprise [[Frontend|Frontend]] Projects), 컴포넌트 기반 아키텍처([[Component-Based Architecture|Component-Based Architecture]]
- **Contradictions/Notes:** Tailwind CSS를 사용할 때 과거의 인라인 스타일(Inline Styles) 작성 방식으로 회귀하는 것 같아 마크업이 지저분해진다고 비판하는 시각이 존재합니다. 하지만 실제로는 사전 정의된 디자인 시스템을 활용하고 번들 사이즈 최적화가 보장되기 때문에 인라인 스타일과는 근본적으로 다른 아키텍처 이점을 갖는다고 소스들은 평가합니다 [2, 5, 24-26].
+## 💻 패턴

---
-*Last updated: 2026-04-26*
+### Tailwind v4 `@theme` setup
+```css
+/* app/globals.css */
+@import "tailwindcss";

-## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+@theme {
+  --color-brand-50: oklch(97% 0.02 250);
+  --color-brand-500: oklch(60% 0.18 250);
+  --color-brand-900: oklch(25% 0.10 250);
+  --spacing-gutter: 1.5rem;
+  --font-display: "Inter Display", sans-serif;
+}
+```

-**언제 이 지식을 쓰는가:**
- *(TODO)*
+### CSS Module + Tailwind `@apply`
+```css
+/* Button.module.css */
+.primary {
+  @apply inline-flex items-center justify-center
+         px-4 py-2 rounded-lg
+         bg-brand-500 text-white font-medium
+         hover:bg-brand-600 active:bg-brand-700
+         disabled:opacity-50 disabled:cursor-not-allowed
+         transition-colors;
+}

-**언제 쓰면 안 되는가:**
- *(TODO)*
+.iconLeft { @apply -ml-1 mr-2 h-4 w-4; }
+```

-## 🧪 검증 상태 (Validation)
+```tsx
+// Button.tsx
+import styles from "./Button.module.css";
+import clsx from "clsx";

- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+export function Button({ icon, children, className, ...rest }) {
+  return (
+    <button className={clsx(styles.primary, className)} {...rest}>
+      {icon && <span className={styles.iconLeft}>{icon}</span>}
+      {children}
+    </button>
+  );
+}
+```

-## 🧬 중복 검사 (Duplicate Check)
+### Variant pattern (CVA)
+```ts
+import { cva } from "class-variance-authority";

- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+export const button = cva(
+  "inline-flex items-center justify-center rounded-lg font-medium transition-colors",
+  {
+    variants: {
+      intent: {
+        primary: "bg-brand-500 text-white hover:bg-brand-600",
+        ghost:   "bg-transparent text-brand-700 hover:bg-brand-50",
+        danger:  "bg-red-600 text-white hover:bg-red-700",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
+      },
+    },
+    defaultVariants: { intent: "primary", size: "md" },
+  }
+);
+```

-## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+### Nested module styles
+```css
+/* Card.module.css */
+.card {
+  @apply rounded-2xl bg-white shadow-md p-6;

- **과거 데이터와의 충돌:** 없음
- **정책 변화:** 없음
+  & > .title {
+    @apply text-lg font-semibold mb-2;
+  }

-## 🕓 변경 이력 (Changelog)
+  &:hover .title {
+    @apply text-brand-600;
+  }
+}
+```

-| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
-|------|-----------|-----------|--------|
-| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+### Container queries (2026 default)
+```css
+.grid {
+  @apply grid gap-4;
+  container-type: inline-size;
+}
+
+@container (min-width: 640px) {
+  .grid { grid-template-columns: repeat(2, 1fr); }
+}
+@container (min-width: 1024px) {
+  .grid { grid-template-columns: repeat(4, 1fr); }
+}
+```
+
+### Naming convention
+```
+features/checkout/
+  CheckoutForm.tsx
+  CheckoutForm.module.css   ← scoped to feature
+shared/ui/
+  Button.tsx
+  Button.module.css         ← reusable primitives
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| one-off utility cluster | inline Tailwind classes |
+| reused 3+ places, simple | extract React component |
+| reused, complex states | CSS Module + `@apply` |
+| design token | `@theme` directive |
+| dynamic runtime values | CSS variables on element |
+| framework-agnostic | CSS Modules only (no Tailwind dep) |
+
+**기본값**: Tailwind v4 utilities + CSS Modules for multi-state primitives.
+
+## 🔗 Graph
+- 부모: [[CSS Architecture]] · [[CSS-in-JS]]
+- 변형: [[Tailwind CSS v4 CSS-first Architecture]] · [[Utility-first CSS]]
+- 응용: [[Storybook]] · [[Next.js]]
+- Adjacent: [[CSS Container Queries]] · [[CSS Variables]]
+
+## 🤖 LLM 활용
+**언제**: design system 의 component library scaffold, variant matrix 생성, refactor of legacy global CSS.
+**언제 X**: extreme custom animation timeline (use Framer Motion), CSS art (use raw CSS).
+
+## ❌ 안티패턴
+- **Global override soup**: `!important` chains in `globals.css` — cascade hell.
+- **Atomic CSS without tokens**: utilities referencing magic numbers `mt-[17px]` everywhere.
+- **CSS-in-JS runtime in 2026**: emotion/styled-components 의 runtime cost — prefer build-time (vanilla-extract, Tailwind).
+- **Module + Tailwind 의 random mix**: same component 에 styled-jsx, .module.css, inline 모두 사용.
+
+## 🧪 검증 / 중복
+- Verified (Tailwind v4 docs 2026, Next.js 15 patterns, MDN CSS Modules).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — Tailwind v4 + CSS Modules hybrid 의 substantive content. |