docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: wiki-2026-0508-유지보수-가능한-대규모-프론트엔드-css-설계
|
||||
title: 유지보수 가능한 대규모 프론트엔드 CSS 설계
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [Scalable CSS Architecture, CSS at Scale, Design System CSS]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [frontend, css, architecture, design-system]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: css
|
||||
framework: tailwind-css
|
||||
---
|
||||
|
||||
# 유지보수 가능한 대규모 프론트엔드 CSS 설계
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 CSS 는 매 N 명 의 개발자 가 매 6개월 후 의 코드 base 에서 매 두려움 없이 수정할 수 있어야 한다"**. 매 대규모 CSS 의 적은 매 specificity 폭주, 매 dead code, 매 inconsistent spacing. 매 2026 의 정답 — utility-first (Tailwind 4) + design tokens + CSS Layers + container queries.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 4 개 의 추상 레벨
|
||||
- **Tokens**: color, spacing, typography 의 매 raw value (CSS custom property).
|
||||
- **Primitives**: Box, Stack, Grid 의 매 layout primitive.
|
||||
- **Components**: Button, Card, Modal — 매 design system 의 unit.
|
||||
- **Patterns**: Page-level 조합.
|
||||
|
||||
### 매 방법론 비교
|
||||
- **BEM**: `.block__element--modifier`. 매 명시적이지만 매 verbose.
|
||||
- **CSS Modules**: 매 file-scoped, 매 collision 없음.
|
||||
- **CSS-in-JS**: styled-components, Emotion — 매 runtime cost.
|
||||
- **Utility-first (Tailwind)**: 매 2026 의 default — 매 zero runtime, JIT.
|
||||
- **Vanilla Extract / Panda**: 매 typed CSS, build-time.
|
||||
|
||||
### 매 응용
|
||||
1. Design System 구축 (Material, Ant, Chakra).
|
||||
2. Multi-brand whitelabel (token swap).
|
||||
3. Dark mode / theming.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Design tokens (CSS Custom Properties)
|
||||
```css
|
||||
:root {
|
||||
--color-primary-500: oklch(60% 0.2 270);
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--radius-md: 0.5rem;
|
||||
--font-body: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-primary-500: oklch(75% 0.2 270);
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Layers (cascade 제어)
|
||||
```css
|
||||
@layer reset, base, components, utilities;
|
||||
|
||||
@layer reset { *, *::before, *::after { box-sizing: border-box; } }
|
||||
@layer base { body { font-family: var(--font-body); } }
|
||||
@layer components { .btn { padding: var(--space-2); } }
|
||||
@layer utilities { .mt-4 { margin-top: var(--space-4); } }
|
||||
```
|
||||
|
||||
### Tailwind 4 (CSS-first config)
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-brand-500: oklch(60% 0.2 270);
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
```
|
||||
```html
|
||||
<button class="bg-brand-500 px-4 py-2 rounded-md text-white">매 Click</button>
|
||||
```
|
||||
|
||||
### Container queries (매 layout-aware component)
|
||||
```css
|
||||
.card-container { container-type: inline-size; }
|
||||
|
||||
.card { display: grid; grid-template-columns: 1fr; }
|
||||
|
||||
@container (min-width: 30rem) {
|
||||
.card { grid-template-columns: 200px 1fr; }
|
||||
}
|
||||
```
|
||||
|
||||
### 컴포넌트 + variants (CVA)
|
||||
```typescript
|
||||
import { cva } from "class-variance-authority";
|
||||
|
||||
export const button = cva("rounded-md font-medium", {
|
||||
variants: {
|
||||
intent: {
|
||||
primary: "bg-brand-500 text-white",
|
||||
ghost: "bg-transparent text-brand-500",
|
||||
},
|
||||
size: { sm: "px-2 py-1", md: "px-4 py-2", lg: "px-6 py-3" },
|
||||
},
|
||||
defaultVariants: { intent: "primary", size: "md" },
|
||||
});
|
||||
```
|
||||
|
||||
### Logical properties (i18n-ready)
|
||||
```css
|
||||
.card {
|
||||
padding-inline: var(--space-4); /* LTR / RTL 모두 동작 */
|
||||
margin-block-end: var(--space-2);
|
||||
border-inline-start: 2px solid var(--color-accent);
|
||||
}
|
||||
```
|
||||
|
||||
### Style scoping (CSS Modules)
|
||||
```typescript
|
||||
import styles from "./Card.module.css";
|
||||
export const Card = ({ children }) => <div className={styles.card}>{children}</div>;
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| New project (2026) | Tailwind 4 + CVA + design tokens |
|
||||
| Existing BEM codebase | 매 점진적 migration + Layers |
|
||||
| Component library 출시 | CSS Modules or Vanilla Extract |
|
||||
| Multi-brand SaaS | CSS custom properties + theme swap |
|
||||
|
||||
**기본값**: **Tailwind 4 + CVA + CSS custom property tokens + Container queries**.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[CSS_Architecture_and_Styling|CSS Architecture]] · [[Design System]]
|
||||
- 변형: [[BEM]] · [[CSS Modules]] · [[CSS_Architecture_and_Styling|CSS-in-JS]]
|
||||
- 응용: [[CSS_Architecture_and_Styling|Tailwind CSS]] · [[vanilla-extract]] · [[Theming]]
|
||||
- Adjacent: [[컨테이너 쿼리 (Container Queries)|Container Queries]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 design system 구축, 매 large team, 매 multi-brand product.
|
||||
**언제 X**: 매 single-page landing, 매 prototype.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Specificity 전쟁**: `!important` 남발 → 매 cascade 붕괴.
|
||||
- **Magic numbers**: `padding: 13px` — 매 token 미사용.
|
||||
- **Global selector overuse**: `div > p > span` — 매 brittle.
|
||||
- **Dead CSS**: 매 unused selector 누적 → 매 bundle bloat.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Tailwind 4 docs, MDN CSS Layers, CSS Tricks).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — scalable CSS 7 patterns |
|
||||
Reference in New Issue
Block a user