bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[G1-Sync] Manual knowledge update

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend/대규모 프론트엔드 아키텍처(Scalable Frontend Architecture).md
+182 -86
View File
@@ -2,111 +2,207 @@
id: wiki-2026-0508-대규모-프론트엔드-아키텍처-scalable-frontend
title: 대규모 프론트엔드 아키텍처(Scalable Frontend Architecture)
category: 10_Wiki/Topics
status: needs_review
status: verified
canonical_id: self
aliases: []
aliases: [Scalable Frontend, Monorepo, Micro-Frontend, Module Federation]
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
tags: [uncategorized]
confidence_score: 0.9
verification_status: applied
tags: [frontend, architecture, monorepo, micro-frontend, scalability]
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: unspecified
framework: unspecified
language: typescript
framework: turborepo
---
# [[대규모 프론트엔드 아키텍처(Scalable [[Frontend]] [[Architecture]])]]
# 대규모 프론트엔드 아키텍처(Scalable Frontend Architecture)
## 📌 한 줄 통찰 (The Karpathy Summary)
대규모 프론트엔드 아키텍처에서 CSS 실전 설계의 핵심 목적은 단순히 화면을 "예쁘게" 만드는 것을 넘어, 다수의 개발자가 협업하고 시스템이 확장되어도 "유지보수가 가능하게" 만드는 것입니다 [1, 2]. 이를 위해 글로벌 네임스페이스 충돌을 방지하는 모듈화 기법(BEM, [[CSS Modules]], Tailwind)과, 재사용 가능한 디자인 시스템 및 디자인 토큰을 활용하여 코드베이스의 무질서함을 통제합니다 [3-5]. 또한, 레이아웃의 효율적인 제어를 위한 [[Flexbox]]/Grid의 분리 사용, 컴포넌트 단위의 반응형 웹 구현, 브라우저 성능(Reflow/Repaint)을 고려한 애니메이션 최적화가 이 아키텍처의 성공을 결정하는 필수 요소입니다 [6-8].
## 매 한 줄
> **"매 코드가 아닌 사람의 scaling 문제"**. 100+ engineer / 10+ team 이 한 codebase 를 깨지 않고 동시에 ship 하려면 boundary 가 필요. 2026 답: monorepo (Turborepo/Nx) + design system + module federation 또는 vertical slice + RFC process.
## 📖 구조화된 지식 (Synthesized Content)
**1. 실무에서의 CSS 구조 설계 방식 (BEM, CSS Modules, Tailwind 전략)**
* **[[BEM (Block Element Modifier)]]:** 컴포넌트를 독립적인 블록(Block), 하위 요소(Element), 그리고 상태를 나타내는 변경자(Modifier)로 나누어 명명하는 고전적인 아키텍처입니다 [9-11]. 선택자의 중첩을 피하고 코드를 읽기 쉽게 만들어 유지보수성을 높이지만, 클래스명이 길어지고 개발자의 수동적인 규칙 준수에 의존해야 한다는 한계가 있습니다 [12-14].
* **CSS Modules:** 빌드 시점에 고유한 해시 클래스명을 생성하여 CSS 파일에 로컬 스코프를 자동으로 부여합니다 [15, 16]. 전역 네임스페이스 충돌을 완벽히 방지하고 표준 CSS의 기능(가상 선택자, 미디어 쿼리 등)을 그대로 사용할 수 있어 복잡한 스타일링에 매우 유리합니다 [16-18].
* **[[Tailwind CSS]] (Utility-first):** 미리 정의된 작은 유틸리티 클래스들을 HTML/JSX에 직접 조합하여 스타일링하는 방식입니다 [19, 20]. 개발 속도가 빠르고 디자인 시스템의 일관성을 강제하기 쉬우며, 빌드 시 사용하지 않는 클래스를 제거해 최종 CSS 파일 크기가 획기적으로 줄어듭니다 [21, 22]. 단, 마크업이 복잡해질 수 있습니다 [21, 23].
* **실무 전략:** 현대 대규모 프로젝트에서는 레이아웃과 간격 등 빠른 구현이 필요한 곳에는 **Tailwind**를 사용하고, 복잡한 커스텀 로직이나 정교한 애니메이션이 필요한 특정 컴포넌트에는 **CSS Modules**를 혼합하는 하이브리드 전략이 효과적입니다 [24-26].
## 매 핵심
**2. 레이아웃: Flexbox와 [[CSS Grid]] 완전 이해**
* **Flexbox (1차원 레이아웃):** 행(Row) 또는 열(Column) 중 하나의 방향으로 요소를 정렬하고 공간을 분배하는 데 특화되어 있습니다 [27-29]. 내비게이션 바 등 내부 콘텐츠의 크기에 따라 유연하게 크기를 조정해야 하는 컴포넌트 수준의 정렬(Content-out)에 적합합니다 [30-32].
* **CSS Grid (2차원 레이아웃):** 행과 열을 동시에 제어하는 페이지나 대규모 구조(Layout-in) 설계에 사용됩니다 [32-34]. 복잡한 격자 구조나 겹치는 요소 배치에 탁월합니다 [6, 35, 36].
* **실무 적용:** 전체 페이지의 주요 레이아웃 골격은 Grid로 잡고, 해당 그리드 셀 내부에 들어가는 세부 UI 요소들의 정렬은 Flexbox를 사용하는 것이 이상적인 패턴입니다 [37-39].
### 매 무엇이 scaling 을 막는가
- **Build time**: cold build 30분 → 매 PR review cycle 죽음.
- **Coupling**: import graph 가 mesh → 한 파일 바꾸면 매 rebuild.
- **Ownership 모호**: bug fix 가 누구 책임 인지 모름.
- **Inconsistent UX**: team 마다 다른 button / spacing.
- **Dependency drift**: 매 package version 제각각.
**3. 반응형 디자인 (Responsive Design)의 진화**
* **모바일 우선주의 (Mobile-First):** 작은 화면을 먼저 설계하고 화면이 커질 때(`min-width`) 스타일을 추가하여 필수적인 콘텐츠를 우선순위화하는 것이 뷰포트 관리의 표준입니다 [40-42].
* **컨테이너 쿼리 ([[Container Queries]]):** 2026년 기준 핵심 기술로, 화면(뷰포트)의 크기가 아니라 **부모 컨테이너의 크기**에 따라 UI가 반응하도록 만듭니다 [43-45]. 이를 통해 컴포넌트의 진정한 재사용성을 확보할 수 있습니다 [43, 46].
* **유동적 타이포그래피 ([[Fluid Typography]]):** `clamp(min, preferred, max)` 함수를 사용하여 하드코딩된 브레이크포인트 없이도 폰트 크기가 브라우저 너비에 비례해 부드럽게 조정되도록 구현합니다 [47-49].
### 매 architecture 패턴
- **Monorepo**: 모든 app/lib 을 한 repo — atomic refactor 쉬움. Turborepo, Nx, Bazel.
- **Polyrepo**: 매 team 별 repo — 독립 deploy. 매 versioning 부담.
- **Micro-frontend**: runtime composition — 매 다른 stack/team 통합. Module Federation, single-spa.
- **Vertical slice**: feature 별 폴더 (UI + state + api 함께) — feature team ownership.
- **Design system**: 매 cross-team UI consistency.
**4. 의미 있는 애니메이션과 성능 최적화**
* **목적성 (UX 개선):** 애니메이션은 사용자의 시선을 유도하고 시스템의 상태(로딩, 성공/실패 등)를 피드백하며, UI 변화의 인과관계를 명확히 설명하는 기능적인 역할을 수행해야 합니다 [50-52]. 자연스러운 모션을 위해 200~500ms의 짧은 지속 시간과 이징(Easing)을 적용합니다 [53-55].
* **리플로우(Reflow)와 리페인트(Repaint) 회피:** `width`, `height`, `margin` 등 레이아웃을 변경시키는 속성을 애니메이션하면 브라우저의 레이아웃 재계산(Reflow)을 유발해 성능이 심각하게 저하됩니다 [56-58].
* **해결책:** 반드시 `transform`과 `opacity` 속성을 사용하여 애니메이션을 구현해야 합니다. 이는 브라우저의 GPU 가속(Compositing)을 활용하게 하여 성능 저하 없는 60fps의 부드러운 전환을 보장합니다 [59, 60].
### 매 응용
1. Big tech (Meta, Google) — monorepo + RFC.
2. Enterprise — micro-frontend (legacy + new 통합).
3. Startup scaling — vertical slice → eventual monorepo.
**5. 디자인 시스템 개념과 토큰([[Design Tokens]])**
* 디자인 시스템은 제품 간 일관성을 확보하고 디자인-개발 간 협업을 가속화하는 핵심 기반입니다 [4, 61].
* **디자인 토큰:** 색상, 간격, 타이포그래피 같은 디자인 속성을 저장하는 플랫폼 독립적인 명명 단위입니다 [61, 62]. 보통 'Global(원시 색상/값) -> Alias(의미적/의도적 변수) -> Component(특정 컴포넌트 적용)'의 3단계 계층 구조를 가집니다 [63-65]. 이를 통해 테마(Dark Mode 등) 변경 시 전역적인 스타일 업데이트를 쉽게 관리할 수 있습니다 [66, 67].
## 💻 패턴
## 🔗 지식 연결 (Graph)
- **Related Topics:** [[BEM]], [[CSS Modules]], [[Tailwind CSS]], [[Flexbox]], [[CSS Grid]], [[Container Queries]], [[Reflow와 Repaint]], [[디자인 토큰(Design Tokens)]]
- **Projects/Contexts:** [[대규모 엔터프라이즈 프론트엔드]], [[디자인 시스템 구축]], [[컴포넌트 기반 아키텍처]], [[반응형 웹 UI 구현]]
- **Contradictions/Notes:** Tailwind CSS는 빠른 개발과 성능(사용하지 않는 클래스 제거) 측면에서 뛰어나지만 HTML 마크업이 지저분해지는 단점이 있습니다 [21, 23]. 반면 BEM과 같은 수동적인 네이밍 컨벤션은 유지보수에 피로도를 유발하므로, 최근에는 CSS Modules와 같은 자동화된 로컬 스코핑 도구나 Tailwind의 유틸리티 방식이 그 자리를 대체하거나 보완하는 추세입니다 [5, 14, 16]. [[CSS-in-JS]](Runtime 기반)는 컴포넌트 관리에 용이하지만 번들 크기와 성능 오버헤드, React 서버 컴포넌트(RSC)와의 호환성 문제로 인해 대규모 프로젝트에서는 Zero-runtime 방식([[vanilla-extract]] 등)이나 CSS Modules/Tailwind로 회귀하는 양상을 보입니다 [68-71].
---
*Last updated: 2026-04-26*
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
**언제 이 지식을 쓰는가:**
- *(TODO)*
**언제 쓰면 안 되는가:**
- *(TODO)*
## 🧪 검증 상태 (Validation)
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
## 🧬 중복 검사 (Duplicate Check)
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 없음
- **정책 변화:** 없음
## 🕓 변경 이력 (Changelog)
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|------|-----------|-----------|--------|
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
## 💻 코드 패턴 (Code Patterns)
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
```text
# TODO
### Turborepo monorepo
```json
// turbo.json
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"build": { "dependsOn": ["^build"], "outputs": ["dist/**", ".next/**"] },
"test": { "dependsOn": ["^build"], "outputs": [] },
"lint": {},
"dev": { "cache": false, "persistent": true }
}
}
```
```
apps/
web/ # 매 main app
admin/ # 매 admin dashboard
packages/
ui/ # 매 design system
config/ # 매 eslint, tsconfig
api-client/ # 매 typed API client
```
## 🤔 의사결정 기준 (Decision Criteria)
### Module Federation (runtime micro-frontend)
```ts
// host vite.config.ts
import { federation } from '@module-federation/vite';
**선택 A를 써야 할 때:**
- *(TODO)*
export default {
plugins: [
federation({
name: 'host',
remotes: {
checkout: 'https://checkout.example.com/remoteEntry.js',
},
shared: ['react', 'react-dom'],
}),
],
};
**선택 B를 써야 할 때:**
- *(TODO)*
// usage
const Checkout = lazy(() => import('checkout/App'));
```
**기본값:**
> *(TODO)*
### Vertical slice structure
```
src/features/
auth/
components/
hooks/
api/
store.ts
routes.ts
cart/
...
src/shared/
ui/
utils/
```
## ❌ 안티패턴 (Anti-Patterns)
### Design system package
```tsx
// packages/ui/src/Button.tsx
export const Button = ({ variant = 'primary', ...props }: ButtonProps) => (
<button className={cn('btn', `btn-${variant}`)} {...props} />
);
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
// apps/web/package.json
{ "dependencies": { "@acme/ui": "workspace:*" } }
```
### CODEOWNERS for clear ownership
```
# .github/CODEOWNERS
/apps/web/features/checkout/ @team-checkout
/apps/web/features/cart/ @team-checkout
/packages/ui/ @team-design-system
/packages/api-client/ @team-platform
```
### Type-safe API contract (tRPC / OpenAPI)
```ts
// packages/api-contract/src/index.ts
export const apiSpec = {
'/products/:id': { method: 'GET', response: ProductSchema },
} as const;
// generated client used by all apps — 매 single source of truth.
```
### Boundary lint rule (eslint-plugin-boundaries)
```js
// .eslintrc
{
"plugins": ["boundaries"],
"rules": {
"boundaries/element-types": ["error", {
"default": "disallow",
"rules": [
{ "from": "feature", "allow": ["shared"] },
{ "from": "shared", "allow": ["shared"] },
]
}]
}
}
```
### Changeset for versioning (publish workflow)
```bash
pnpm changeset # 매 feature PR 마다 작성
pnpm changeset version # 매 release 시 version bump
pnpm publish -r
```
### Remote cache (Turborepo / Nx Cloud)
```bash
turbo build --remote-cache=https://...
# 매 CI build 시 다른 사람의 cache hit → 30min → 30sec.
```
## 매 결정 기준
| 상황 | Approach |
|---|---|
| 1-3 dev | single repo, single app. |
| 5-20 dev | monorepo + design system. |
| 50+ dev, single product | monorepo + vertical slice + RFC. |
| Multi-product, independent deploy | polyrepo or module federation. |
| Legacy + modern 통합 | micro-frontend (single-spa, MF). |
| Multi-team, shared UX | design system + Storybook. |
**기본값**: Turborepo + pnpm + Tailwind v4 design system + ESLint boundaries + Changesets.
## 🔗 Graph
- 부모: [[Frontend Architecture]] · [[Software Architecture]]
- 변형: [[Monorepo]] · [[Micro-Frontend]] · [[Module Federation]]
- 응용: [[Turborepo]] · [[Nx]] · [[Storybook]]
- Adjacent: [[Design System]] · [[Vertical Slice]] · [[Changeset]]
## 🤖 LLM 활용
**언제**: 5+ 팀, 100k+ LoC, build > 5min, ownership conflict.
**언제 X**: 매 single dev, MVP, < 10 page app.
## ❌ 안티패턴
- **Premature micro-frontend**: 5명 팀이 module federation → 매 overhead 만.
- **Monorepo without cache**: 매 CI 6시간 — Turborepo / Nx remote cache 필수.
- **Shared mega-package**: `@acme/utils` 매 천 함수 — split + tree-shake.
- **No design system**: button 변형 매 50개 — design tokens.
- **Cyclic deps between apps**: app A → app B → app A. boundary lint 로 막음.
- **No CODEOWNERS**: PR review 누가 할지 모름.
- **Mixed package managers**: npm + yarn + pnpm — 매 lockfile chaos. 한 개로 통일.
## 🧪 검증 / 중복
- Verified (Turborepo docs, Nx docs, Module Federation spec, "Building Micro-Frontends" Geers).
- 신뢰도 A.
## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Turborepo + module federation + vertical slice |