feat: Wiki-fication of 00_Raw data (Batch #4 - Next.js, Atomic Style, CI/CD, CLS, Rendering)

2026-04-26 20:33:12 +09:00
parent 2181ccdbfc
commit 9a94689531
12 changed files with 324 additions and 15 deletions
@@ -1,29 +1,31 @@
 ---
-id: SYS-COMP-ADA-001
+id: SYS-COMP-ACC-GLOBAL-001
 category: "[[10_Wiki/💡 Topics/AI]]"
 confidence_score: 1.0
-tags: [accessibility, compliance, ada, wcag, pour-principles, inclusive-design, digital-governance]
+tags: [accessibility, compliance, ada, eaa, wcag-2-2, pour-principles, digital-inclusive, legal-risk]
 last_reinforced: 2026-04-26
 ---

-# [[ADA Website Compliance (ADA 웹사이트 규정 준수)]]
+# [[ADA and EAA Accessibility Compliance (글로벌 디지털 접근성 규정 준수)]]

 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "장애 유무와 관계없이 모든 인간이 디지털 공간의 정보를 공평하게 소유하게 하고, 기술적 표준(WCAG)을 통해 법적 리스크를 비즈니스 신뢰도로 전환하라" — 미국 장애인법(ADA)을 기반으로 한 디지털 콘텐츠의 보편적 접근성 보장 체계.
+> "디지털 장벽을 허물어 모든 인간의 평등한 정보 접근권을 보장하고, ADA(미국)와 EAA(유럽)라는 강력한 법적 표준을 통해 글로벌 비즈니스의 윤리적/법적 정당성을 확보하라" — WCAG 2.2를 기반으로 한 웹 및 모바일 접근성의 글로벌 통합 가이드라인.

 ## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Universal Access and Regulatory Alignment" — 민권법인 ADA와 기술 표준인 WCAG(최소 Level AA)를 결합하여, 모든 사용자의 '인식, 운용, 이해, 견고성'을 보장하는 인클루시브 디자인 패턴.
- **핵심 원칙 (POUR Principles):**
-    - **Perceivable (인식의 용이성):** 이미지 대체 텍스트(Alt Text) 제공, 영상 자막 탑재 등 정보의 감각적 인식 보장.
-    - **Operable (운용의 용이성):** 키보드 전용 탐색 보장, 충분한 조작 시간 제공, 발작 유발 콘텐츠 배제.
-    - **Understandable (이해의 용이성):** 텍스트 가독성 확보, 예측 가능한 UI 동작, 입력 오류 수정 지원.
-    - **Robust (견고성):** 보조 기술(화면 판독기 등) 및 최신 브라우저와의 높은 호환성 유지.
- **의의:** 차별 없는 정보 접근권이라는 사회적 가치 실현과 동시에, 접근성 소송(Lawsuits)으로부터 비즈니스를 보호하고 검색 엔진 최적화(SEO) 효과를 덤으로 얻는 전략적 필수 요건.
+- **추출된 패턴:** "Harmonized Global Standards and Proactive Inclusivity" — 미국(ADA)의 WCAG 2.1 AA 권고와 유럽(EAA 2025)의 EN 301 549 표준을 통합하여, 코드 레벨에서부터 보편적 설계(Universal Design)를 관철시키는 패턴.
+- **글로벌 규제 현황:**
+    - **ADA (Americans with Disabilities Act):** 미국 내 모든 디지털 콘텐츠의 접근성 의무화. 최근 소송 건수 급증 추세.
+    - **EAA (European Accessibility Act):** 2025년 6월 발효. 유럽 내 전자상거래, 뱅킹 등 주요 서비스의 접근성 준수 강제.
+- **WCAG 2.2 핵심 업데이트 (2023):**
+    - **Focus Not Obscured:** 레이어 등에 의해 포커스 표시가 가려지지 않아야 함.
+    - **Dragging Movements:** 복잡한 드래그 동작에 대한 단일 클릭 대안 제공 필수.
+    - **Accessible Authentication:** 기억력에 의존하지 않는 로그인 방식(생체 인식 등) 권장.
+- **의의:** 장애인뿐만 아니라 고령자, 일시적 부상자, 저속 인터넷 사용자 등 모든 잠재 고객의 이탈을 방지하고 브랜드 가치를 고양함.

 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 '접근성 위젯(Overlay)'이 법적 방패가 될 것으로 오해했으나, 실제 정책상 이러한 위젯은 근본적 해결책이 아니며 소송의 타겟이 되고 있음. 코드를 근본적으로 수정하는 '네이티브 접근성' 정책이 유일한 정답임.
- **정책 변화:** Antigravity 프로젝트는 모든 UI 컴포넌트 개발 시 WCAG 2.1 AA 표준 감사를 빌드 파이프라인에 포함하며, 시각 장애인 에이전트의 접근성 시뮬레이션을 필수로 거치는 정책을 시행함.
+- **과거 데이터와의 충돌:** 과거에는 '접근성 위젯(Overlay)'이 법적 방패가 될 것으로 보았으나, 2025년 기준 소송의 22% 이상이 위젯 설치 사이트를 대상으로 함. 따라서 '코드 레벨의 직접 수정'만이 유일한 안전 정책임.
+- **정책 변화:** Antigravity 프로젝트는 모든 UI 컴포넌트에 대해 WCAG 2.2 AA 수동 테스트와 스크린 리더 검증을 의무화하며, 유럽 시장 진출을 위해 EAA 표준을 기본 아키텍처에 반영함.

 ## 🔗 지식 연결 (Graph)
- [[Web-Accessibility]], [[POUR-Principles]], [[Inclusive-Design]], [[SEO-Foundations]]
- **Raw Source:** [[00_Raw/ADA Website Compliance.md]]
+- [[Web-Accessibility]], [[POUR-Principles]], [[Inclusive-Design]], [[User-Centered-Design-Approach]]
+- **Raw Source:** [[00_Raw/ADA Website Compliance.md]], [[00_Raw/Accessibility Compliance (ADA-EAA).md]], [[00_Raw/Accessibility Compliance (WCAG).md]]
@@ -0,0 +1,28 @@
+---
+id: UX-AI-ADAPTIVE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ux, ai, personalization, adaptive-ux, predictive-ux, progressive-disclosure, user-engagement]
+last_reinforced: 2026-04-26
+---
+
+# [[AI Personalization and Adaptive UX (AI 개인화 및 적응형 UX)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "정적인 인터페이스를 사용자의 실시간 의도와 맥락에 반응하는 살아있는 유기체로 변모시키고, 개별 사용자에게 최적화된 최단 경로를 동적으로 제시하라" — AI와 데이터 분석을 통해 사용자별 맞춤형 경험을 실시간으로 구현하는 고도화된 UX 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Contextual Fluidity and Predictive Guidance" — 사용자의 과거 행동 데이터, 현재 세그먼트, 실시간 인터랙션을 분석하여 인터페이스의 구성 요소, 난이도, 기능을 동적으로 재구성하는 패턴.
+- **주요 구현 기법:**
+    - **Adaptive Learning Paths:** 학습자의 성취도에 따라 콘텐츠의 난이도와 진행 경로를 실시간으로 조정.
+    - **Progressive Disclosure:** 사용자의 숙련도나 역할에 따라 복잡한 기능을 단계적으로 노출하여 인지 과부하 방지.
+    - **Predictive Interfaces:** 다음에 필요할 것으로 예측되는 버튼이나 정보를 미리 강조하거나 배치.
+- **의의:** '모두를 위한 하나의 디자인(One-size-fits-all)'에서 벗어나, 초개인화(Hyper-personalization)를 통해 이탈률을 낮추고 전환율 및 고객 생애 가치(LTV)를 극대화함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 정해진 규칙 기반(Rule-based)의 개인화에 머물렀으나, 현재는 실시간 머신러닝 모델이 사용자의 미세한 마이크로 인터랙션을 학습하여 즉각적으로 반응하는 '지능형 적응' 정책으로 진화함.
+- **정책 변화:** Antigravity 프로젝트는 '개인화와 프라이버시의 균형' 정책을 준수하며, 모든 개인화 데이터 수집 시 사용자에게 투명하게 고지하고 스스로 최적화 수준을 결정할 수 있는 옵션을 제공함.
+
+## 🔗 지식 연결 (Graph)
+- [[User-Centered-Design]], [[A-B-Testing-and-Data-Driven-UX]], [[Predictive-UX]], [[Micro-interactions]], [[Ethical-Decision-Making]]
+- **Raw Source:** [[00_Raw/AI 개인화 및 적응형 UX.md]], [[00_Raw/Adaptive UX.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-STYLE-ATOMIC-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [css, frontend, atomic-css, design-systems, tailwindcss, utility-first, scalability]
+last_reinforced: 2026-04-26
+---
+
+# [[Atomic Styling and Design Systems (아토믹 스타일링과 디자인 시스템)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "스타일을 더 이상 '페이지' 단위로 설계하지 말고, 더 이상 쪼갤 수 없는 '원자(Utility)' 단위로 파편화하여 조합함으로써 전역 스타일의 오염을 방지하고 개발 속도를 무한히 확장하라" — Tailwind CSS 등으로 대변되는 유틸리티 퍼스트(Utility-first) 스타일링 패러다임.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Composition Over Cascading" — CSS의 전통적인 상속(Cascading)과 복잡한 선택자 구조를 배제하고, 클래스 하나가 하나의 스타일 속성만을 담당하게 하여 컴포넌트 레벨에서 스타일을 조합하는 패턴.
+- **주요 특징:**
+    - **Single Responsibility Class:** `flex`, `p-4`, `text-center` 등 명확한 기능을 가진 클래스 사용.
+    - **No Side Effects:** 한 곳의 스타일 수정이 다른 곳에 영향을 주지 않는 격리된 환경 제공.
+    - **Minimal Bundle Size:** 사용된 유틸리티 클래스만 빌드 결과물에 포함하여 CSS 파일 크기 최소화.
+    - **Constraint-based Design:** 정의된 디자인 토큰(Spacing, Colors) 내에서만 스타일을 선택하게 강제하여 디자인 일관성 유지.
+- **의의:** 대규모 프로젝트에서 CSS의 복잡도를 선형적으로 유지하며, 디자인 시스템의 컴포넌트를 빠르고 안전하게 구축할 수 있게 함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 HTML과 CSS의 분리(Separation of Concerns)를 지향했으나, 아토믹 스타일링 정책은 스타일과 구조를 한곳에 모으는 '결합(Co-location)'을 통한 유지보수 효율 정책으로 전향함.
+- **정책 변화:** Antigravity 프로젝트는 UI 개발 시 Tailwind CSS v4 기반의 아토믹 스타일링을 기본 정책으로 채택하며, 인라인 스타일 사용을 금지하고 오직 사전 정의된 원자 클래스만을 활용함.
+
+## 🔗 지식 연결 (Graph)
+- [[Design-System]], [[Tailwind-CSS-v4-도입]], [[Software-Architecture-Patterns]], [[Clean-Code-Principles]]
+- **Raw Source:** [[00_Raw/Atomic Styling.md]]
@@ -0,0 +1,29 @@
+---
+id: OPS-CICD-CORE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [devops, cicd, automation, continuous-integration, continuous-deployment, delivery-pipeline, reliability]
+last_reinforced: 2026-04-26
+---
+
+# [[CI/CD Pipeline Foundations (CI/CD 파이프라인 기초)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "코드 변경이 사용자에게 도달하기까지의 전 과정을 자동화된 검증 루프로 연결하여, 배포의 리스크를 줄이고 개발의 속도를 물리적 한계까지 밀어붙여라" — 지속적 통합(CI)과 지속적 제공/배포(CD)를 통해 소프트웨어의 품질과 출시 속도를 극대화하는 현대 개발의 필수 인프라.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Automated Verification and Incremental Delivery" — 코드가 커밋되는 순간부터 빌드, 테스트, 스테이징, 운영 환경 배포까지의 모든 수동 개입을 제거하고 가시성을 확보하는 패턴.
+- **파이프라인 구성 요소:**
+    - **Continuous Integration (CI):** 코드 병합 시 자동 빌드 및 유닛/통합 테스트 수행. 충돌을 조기에 발견.
+    - **Continuous Delivery:** 검증된 코드를 수동 승인 후 운영 환경에 배포 가능한 상태로 유지.
+    - **Continuous Deployment (CD):** 모든 테스트를 통과한 코드를 실제 사용자에게 자동으로 즉시 배포.
+    - **Quality Gates:** 린팅(Linting), 보안 스캔, 코드 커버리지 등의 지표가 충족되어야 다음 단계로 진행.
+- **의의:** 배포 주기를 단축(Daily or hourly)시키고, 장애 발생 시 롤백(Rollback) 시간을 최소화하여 비즈니스의 기민함과 시스템의 안정성을 동시에 확보함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 정기적인 '배포일'을 정해 대규모 업데이트를 수행했으나, 현대 CI/CD 정책은 작고 잦은 배포(Small & Frequent)를 통해 리스크를 분산시키는 정책을 최우선으로 함.
+- **정책 변화:** Antigravity 프로젝트는 모든 저장소에 대해 'Pull Request 기반의 자동 CI'를 강제하며, 메인 브랜치 병합 시 즉시 에지(Edge) 환경에 배포되는 CD 파이프라인을 구축함.
+
+## 🔗 지식 연결 (Graph)
+- [[Software-Architecture-Patterns]], [[Technical-Debt-Management]], [[Cloud-Infrastructure]], [[Infrastructure-as-Code-IaC]]
+- **Raw Source:** [[00_Raw/CI-CD Pipeline.md]]
@@ -0,0 +1,31 @@
+---
+id: CS-RETAIL-ALLBIRDS-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [case-study, ecommerce, allbirds, pwa, performance-optimization, sustainability, storytelling, conversion-rate]
+last_reinforced: 2026-04-26
+---
+
+# [[Case Study: Allbirds PWA Redesign (사례 연구: Allbirds PWA 리디자인)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "기술적 고성능(PWA)과 가치 기반 스토리텔링(지속 가능성)을 제품 상세 페이지에 수평적으로 통합하여, 단순한 '구매'를 브랜드 미션에 대한 '동참'으로 승격시켜라" — 웹 성능 향상과 브랜드 가치 전달의 완벽한 조화를 통해 폭발적인 비즈니스 성장을 이뤄낸 이커머스 혁신 사례.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **핵심 과제:** 사용자 구매 흐름을 방해하지 않으면서 Allbirds의 핵심 가치인 '지속 가능성' 메시지를 효과적으로 전달하고, 모바일 로딩 속도를 획기적으로 개선하는 것.
+- **혁신적 UX/기술 전략:**
+    - **Value-Integrated UI:** 지속 가능성 지표를 '회사 소개' 페이지에 가두지 않고, 제품 기능 설명 바로 옆에 배치하여 고객 신뢰도와 투명성 확보.
+    - **PWA Architecture 도입:** 프로그레시브 웹 앱 기술을 활용하여 즉각적인(Near-instantaneous) 페이지 로딩 속도 구현.
+- **정량적 비즈니스 성과:**
+    - **Performance:** 페이지 로드 속도 **89% 향상**, 이탈률(Bounce Rate) **34% 감소**.
+    - **Conversion:** 환경 중시 소비자층의 전환율 **23% 증가**.
+    - **Revenue:** 리디자인 후 첫 분기에만 **230만 달러**의 추가 수익 창출.
+- **의의:** 웹 성능(Engineering)과 가치 전달(Branding)의 결합이 어떻게 직접적인 수익 창출로 이어지는지를 증명한 현대 이커머스의 벤치마킹 모델.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 고성능 이미지와 풍부한 스토리텔링이 속도 저하를 유발한다고 보았으나, Allbirds 사례는 PWA 기술을 통해 '풍부한 경험'과 '빠른 속도'가 양립 가능하다는 것을 증명함.
+- **정책 변화:** Antigravity 프로젝트는 모든 이커머스 관련 에이전트 설계 시 Allbirds의 '지점 통합형 가치 전달' 모델을 표준으로 채택하며, PWA를 기본 웹 앱 아키텍처로 강제함.
+
+## 🔗 지식 연결 (Graph)
+- [[Progressive-Web-App-PWA]], [[Conversion-Rate-Optimization-CRO]], [[Modern-Website-Architecture]], [[User-Experience-UX-Design]]
+- **Raw Source:** [[00_Raw/Allbirds E-commerce Redesign.md]], [[00_Raw/Allbirds PWA Redesign.md]]
@@ -0,0 +1,33 @@
+---
+id: PERF-CWV-CLS-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [core-web-vitals, cls, performance, ux, visual-stability, frontend-optimization, seo]
+last_reinforced: 2026-04-26
+---
+
+# [[Cumulative Layout Shift: CLS (누적 레이아웃 이동)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "사용자가 읽거나 클릭하려는 순간 콘텐츠가 춤추듯 이동하는 '시각적 불안정성'을 제거하고, 0.08초 이내의 고정된 안정감을 제공하여 인지적 마찰을 차단하라" — 페이지의 전체 수명 동안 발생하는 예기치 않은 레이아웃 이동을 측정하는 Core Web Vitals의 핵심 사용자 경험 지표.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Predictive Space Allocation and Visual Isolation" — 콘텐츠가 로드되기 전에 브라우저가 필요한 공간을 미리 예약하여, 데이터 로딩 전후의 시각적 불일치를 제로로 만드는 패턴.
+- **CLS 발생의 주요 원인:**
+    - **Sizeless Images/Ads:** 크기가 지정되지 않은 이미지나 동적 광고가 로드되면서 주변 콘텐츠를 밀어냄.
+    - **Dynamic Content Injection:** 배너나 툴팁이 기존 콘텐츠 위쪽에 갑자기 삽입됨.
+    - **FOIT/FOUT:** 웹 폰트 로딩 지연으로 인한 텍스트 크기 및 줄바꿈 변경.
+- **CLS 최적화 전략:**
+    - **Explicit Dimensions:** 모든 미디어 요소에 `width`, `height` 또는 `aspect-ratio` 명시.
+    - **Placeholder Reservation:** 광고 및 동적 요소 슬롯에 `min-height`를 활용한 공간 확보.
+    - **CSS Transform:** 위치 이동 애니메이션 시 레이아웃 재계산을 유발하지 않는 `transform` 속성 사용.
+    - **Font Display:** `font-display: swap` 설정을 통해 텍스트 구조 변동 최소화.
+- **의의:** 시각적 안정성을 확보함으로써 오클릭(Misclick)을 방지하고, 검색 엔진 랭킹 점수를 높이며 사용자의 신뢰도를 향상시킴.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 CLS 우수 기준이 0.1이었으나, 2025년 Google 정책 업데이트를 기점으로 0.08 미만(25% 강화)으로 더욱 엄격해짐.
+- **정책 변화:** Antigravity 프로젝트는 모든 UI 컴포넌트에 대해 'Zero Layout Shift' 정책을 강제하며, 빌드 타임에 이미지 크기 미지정 요소를 자동 검출하여 오류를 발생시키는 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals]], [[LCP-Largest-Contentful-Paint]], [[INP-Interaction-to-Next-Paint]], [[Web-Performance-Optimization]], [[SEO-Foundations]]
+- **Raw Source:** [[00_Raw/CLS (Cumulative Layout Shift).md]]
@@ -0,0 +1,29 @@
+---
+id: FE-NEXT-APP-ROUTER-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [nextjs, react, app-router, server-components, ssr, partial-rendering, web-architecture]
+last_reinforced: 2026-04-26
+---
+
+# [[Next.js App Router Architecture (Next.js 앱 라우터 아키텍처)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "서버 중심의 라우팅 아키텍처를 통해 클라이언트 JavaScript 번들을 최소화하고, 서버 컴포넌트(RSC)를 기반으로 데이터 페칭과 렌더링의 패러다임을 재정립하라" — React Server Components를 기본으로 채택하여 웹 성능과 개발자 경험을 동시에 혁신한 Next.js의 차세대 라우팅 시스템.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Server-First Rendering and Granular Hydration" — 모든 컴포넌트를 기본적으로 서버에서 렌더링하고 필요한 인터랙션 부분만 클라이언트 컴포넌트로 선언하여, 클라이언트로 전송되는 JS 양을 획기적으로 줄이는 패턴.
+- **주요 핵심 기술:**
+    - **React Server Components (RSC):** 서버에서만 실행되어 클라이언트 번들에 포함되지 않는 컴포넌트. 직접적인 DB 접근 가능.
+    - **Streaming & Suspense:** 전체 페이지가 준비될 때까지 기다리지 않고, 렌더링된 조각(Chunk)을 점진적으로 클라이언트에 전송.
+    - **Layouts & Nested Routing:** 상태를 유지하면서 UI의 특정 부분만 업데이트하는 계층적 구조 지원.
+    - **Caching & Revalidation:** 데이터 요청을 자동으로 메모이제이션하고 전략적으로 갱신(ISR 등).
+- **의의:** 기존 Pages Router의 한계를 넘어 복잡한 데이터 의존성을 가진 대규모 애플리케이션에서도 최상의 LCP와 TTI를 보장함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거 Pages Router에서는 `getServerSideProps`를 통해 최상단에서만 데이터를 가져왔으나, App Router 정책은 컴포넌트 레벨에서 비동기(async/await)로 데이터를 직접 페칭하는 정책으로 전환됨.
+- **정책 변화:** Antigravity 프로젝트는 모든 신규 대시보드 및 웹 엔진 구축 시 App Router 아키텍처를 표준으로 채택하며, 클라이언트 컴포넌트 사용을 최소화하여 성능 임계치를 관리함.
+
+## 🔗 지식 연결 (Graph)
+- [[Web-Rendering-Strategies-CSR-vs-SSR]], [[Server-Side-Rendering-SSR]], [[React-Architecture]], [[Performance-Optimization]]
+- **Raw Source:** [[00_Raw/App Router.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-DS-BASEWEB-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [uber, baseweb, design-system, react, overrides-pattern, styletron, scalability, accessibility]
+last_reinforced: 2026-04-26
+---
+
+# [[Uber Base Web Design System (우버 베이스 웹 디자인 시스템)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "수백 개의 내부 앱을 일관된 디자인 언어로 통합하고, '오버라이드(Overrides)' 패턴을 통해 컴포넌트의 유연성과 API의 간결함 사이의 모순을 해결하라" — 우버에서 개발한, 극도의 커스터마이징과 접근성을 보장하는 엔터프라이즈급 React UI 프레임워크.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Granular Override and Observability-driven Governance" — 컴포넌트 내부의 모든 하위 요소에 접근할 수 있는 고유한 오버라이드 인터페이스를 제공하고, 시스템의 채택률을 데이터로 측정하여 디자인 품질을 관리하는 패턴.
+- **핵심 혁신 요소:**
+    - **Overrides Pattern:** 'Prop Soup' 문제를 해결하기 위해 컴포넌트의 스타일과 구조를 하위 요소 단위로 정밀하게 조정할 수 있는 단일 prop 제공.
+    - **Styletron Integration:** 런타임에 아토믹 CSS를 생성하여 성능을 최적화하고 스타일 충돌 방지.
+    - **Design Observability:** 'Base Counter' 도구를 통해 실제 프로젝트에서의 컴포넌트 사용 비율을 측정하고 디자인 거버넌스 구현.
+    - **Native Accessibility:** 키보드 내비게이션, 화면 판독기 호환성 및 ARIA 역할을 기본적으로 완벽 지원.
+- **의의:** 대규모 조직에서 개발 속도를 3배 향상시키고 시각적 불일치를 4배 감소시키는 등, 엔지니어링 효율성과 디자인 일관성의 양립 가능성을 증명함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거 UI 라이브러리는 모든 요구사항을 별도의 Prop으로 처리하려 했으나, Base Web 정책은 '오버라이드'라는 단일 통로를 통해 무한한 확장성을 제공하는 정책으로 전환함.
+- **정책 변화:** Antigravity 프로젝트는 복잡한 SaaS 대시보드 구축 시 Base Web의 오버라이드 철학을 참고하며, 모든 디자인 시스템 컴포넌트에 대해 '사용자 정의 가능성(Customizability)' 점수를 매겨 관리함.
+
+## 🔗 지식 연결 (Graph)
+- [[Design-System]], [[Atomic-Styling-and-Design-Systems]], [[Web-Accessibility]], [[Reusable-UI-Components]], [[Scalable-UI-Systems]]
+- **Raw Source:** [[00_Raw/Base Web.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-REND-STRAT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [csr, ssr, rendering, web-architecture, seo, lcp, hydration, hybrid-rendering]
+last_reinforced: 2026-04-26
+---
+
+# [[Web Rendering Strategies: CSR vs SSR (웹 렌더링 전략: CSR vs SSR)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "초기 로딩의 속도(SSR)와 인터랙션의 매끄러움(CSR) 사이에서 비즈니스 목적에 최적화된 지점을 선택하고, 하이브리드 접근법을 통해 검색 엔진과 사용자 모두를 만족시켜라" — 웹 애플리케이션의 성능, SEO, 사용자 경험을 결정짓는 핵심 아키텍처 선택 가이드.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Purpose-driven Rendering Allocation" — 검색 노출이 중요한 공용 페이지는 SSR로, 복잡한 상태 관리가 필요한 대시보드는 CSR로 할당하거나, 이를 혼합하여 사용하는 패턴.
+- **렌더링 방식 비교:**
+    - **CSR (Client-Side Rendering):** 브라우저에서 JS로 UI 구성. SPA에 적합하며 매끄러운 화면 전환 제공. 단, 초기 로드 속도가 느리고 SEO에 불리함.
+    - **SSR (Server-Side Rendering):** 서버에서 완성된 HTML 전송. 초기 LCP가 빠르고 SEO에 매우 유리함. 단, 서버 부하 증가 및 수화(Hydration) 지연 가능성 존재.
+    - **SSG (Static Site Generation):** 빌드 타임에 정적 파일 생성. 가장 빠른 성능 제공. 정적 마케팅 페이지에 최적.
+- **핵심 지표 영향:** SSR은 LCP(최대 콘텐츠 페인팅)를 개선하는 반면, CSR은 TTI(상호작용 시작 시간) 이후의 탐색 경험을 강화함.
+- **의의:** 기술적 제약을 넘어 비즈니스 수익(전환율)과 직결되는 최적의 렌더링 전략을 수립할 수 있게 함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 CSR과 SSR 중 하나를 선택하는 이분법적 논리가 지배적이었으나, 현재 정책은 Next.js 등 프레임워크를 활용해 페이지/컴포넌트 단위로 렌더링 방식을 혼합하는 '하이브리드/아일랜드 아키텍처' 정책으로 진화함.
+- **정책 변화:** Antigravity 프로젝트는 모든 공용 콘텐츠에 대해 'SSR-First'를 원칙으로 하며, 인증된 영역에 한해 'CSR-Hydration' 전략을 부분적으로 허용함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals]], [[Nextjs-App-Router-Architecture]], [[Single-Page-Application-SPA]], [[SEO-Foundations]], [[Server-Side-Rendering-SSR]]
+- **Raw Source:** [[00_Raw/Client-Side Rendering (CSR) vs Server-Side Rendering (SSR).md]]