feat: Wiki-fication of 00_Raw data (Batch #6~#8 - Arch, Refactoring, Debugging, 2025 Standards)

2026-04-26 20:44:14 +09:00
parent 9f9b5ee0c3
commit 5f09bb85ee
39 changed files with 1180 additions and 5 deletions
@@ -2,7 +2,7 @@
 id: MKT-AI-SEARCH-001
 category: "[[10_Wiki/💡 Topics/AI]]"
 confidence_score: 1.0
-tags: [ai-search, geo, aeo, semantic-entity-mapping, seo, future-of-search, knowledge-graph]
+tags: [ai-search, geo, aeo, semantic-entity-mapping, seo, future-of-search, knowledge-graph, generative-engine-optimization]
 last_reinforced: 2026-04-26
 ---

@@ -14,15 +14,15 @@ last_reinforced: 2026-04-26
 ## 📖 구조화된 지식 (Synthesized Content)
 - **추출된 패턴:** "From Keyword Density to Entity Authority" — 파편화된 단어의 빈도보다는 지식 간의 관계와 전문성(E-E-A-T)을 중심으로 AI 모델의 지식 그래프(Knowledge Graph)에 편입되는 패턴.
 - **AI 검색 최적화의 핵심 진화:**
-    - **GEO (Generative Engine Optimization):** 생성형 모델이 문맥을 이해하고 자연스럽게 인용할 수 있도록 풍부한 시맨틱 메타데이터 제공.
+    - **GEO (Generative Engine Optimization):** 생성형 모델이 문맥을 이해하고 자연스럽게 인용할 수 있도록 풍부한 시맨틱 메타데이터 제공. 깔끔한 코드, 빠른 로딩 속도, 의미론적으로 풍부한 웹페이지 구조가 핵심 신호로 작용.
    - **AEO (Answer Engine Optimization):** 특정 질문에 대한 '직접적인 해답'으로서의 권위 확보.
    - **Semantic Entity Mapping:** 콘텐츠 내의 고유 명사와 개념들이 어떻게 연결되는지 명시하여 AI의 추론 효율 극대화.
- **의의:** 인간 사용자를 위한 가독성과 AI 에이전트를 위한 기계 가독성(Machine Readability)을 동시에 만족시켜, 지식의 유통 수명을 연장함.
+- **의의:** 인간 사용자를 위한 가독성과 AI 에이전트를 위한 기계 가독성(Machine Readability)을 동시에 만족시켜, 지식의 유통 수명을 연장하고 차세대 검색 환경에서의 도달 범위를 확장함.

 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
 - **과거 데이터와의 충돌:** 전통적 SEO는 키워드 밀도(Keyword Density)를 중시했으나, AI 검색 최적화 정책은 '의미론적 엔티티 매핑'과 '맥락적 정합성' 정책을 최우선으로 함. 또한 JS 실행에만 의존하는 SPA의 구조적 모순을 지적하며 SSR/SSG로의 근본적 회귀 정책을 강조함.
 - **정책 변화:** Antigravity 프로젝트는 모든 지식 자산에 대해 'Agent-First Access' 정책을 적용하며, AI 크롤러가 정보를 수집할 때 연산 자원을 최소화할 수 있도록 경량화된 시맨틱 마크업을 제공함.

 ## 🔗 지식 연결 (Graph)
- [[AI-Answer-Engine-Optimization]], [[Generative-Engine-Optimization]], [[Knowledge-Graph-Foundations]], [[Semantic-Search-with-AI]], [[Ontology-Engineering]]
- **Raw Source:** [[00_Raw/AI Search Optimization.md]]
+- [[AI-Answer-Engine-Optimization]], [[Generative-Engine-Optimization]], [[Knowledge-Graph-Foundations]], [[Semantic-Search-with-AI]], [[Ontology-Engineering]], [[AI-Overviews-and-SGE]]
+- **Raw Source:** [[00_Raw/AI Search Optimization.md]], [[00_Raw/Generative Engine Optimization.md]]
@@ -0,0 +1,30 @@
+---
+id: CS-FE-MIGRATION-KIWI-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [case-study, kiwi-com, frontend-migration, nextjs, mono-repo, orbit-design-system, scalability, web-performance]
+last_reinforced: 2026-04-26
+---
+
+# [[Case Study: Kiwi.com Frontend Migration (사례 연구: Kiwi.com 프런트엔드 마이그레이션)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "거대한 항공 서비스의 복잡도를 모노레포와 자체 디자인 시스템(Orbit)으로 통합 관리하고, Next.js 마이그레이션을 통해 SEO와 성능이라는 두 마리 토끼를 한꺼번에 포획하라" — 대규모 글로벌 플랫폼의 기술적 성숙도를 증명한 프런트엔드 현대화 사례.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **핵심 과제:** 파편화된 다수의 마이크로 서비스와 일관성 없는 UI, 그리고 검색 노출(SEO)의 한계를 극복하기 위한 전사적 프런트엔드 재설계.
+- **주요 전략 및 기술 스택:**
+    - **Next.js adoption:** SSR/SSG를 통한 초기 로딩 속도 향상 및 강력한 SEO 최적화 기반 구축.
+    - **Orbit Design System:** 일관된 사용자 경험과 개발 속도 향상을 위해 우버의 Base Web 철학을 참고한 자체 오픈소스 UI 라이브러리 운영.
+    - **Monorepo Architecture (pnpm):** 수백 개의 패키지와 서비스를 하나의 저장소에서 관리하여 의존성 충돌 방지 및 빌드 파이프라인 최적화.
+    - **TypeScript & Cypress:** 타입 안전성 확보 및 철저한 E2E 테스트를 통한 배포 안정성 강화.
+- **정량적 성과:** 페이지 로딩 속도의 획기적 단축, 개발 주기의 단축, 그리고 전 세계 검색 결과에서의 가시성 대폭 향상.
+- **의의:** 기술 부채가 누적된 대규모 시스템이 어떻게 점진적으로 현대화될 수 있는지에 대한 실질적 이정표 제공.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 유연성을 위해 서비스별로 자유로운 기술 스택 사용을 허용했으나, Kiwi.com 사례는 '전사적 표준화 정책'과 '통합 디자인 언어 정책'이 대규모 조직에서 훨씬 강력한 효율을 낸다는 것을 증명함.
+- **정책 변화:** Antigravity 프로젝트는 대규모 플랫폼 설계 시 Kiwi.com의 모노레포 및 디자인 시스템 기반 협업 모델을 벤치마킹하며, 모든 공유 패키지의 버전 관리를 자동화하는 정책을 도입함.
+
+## 🔗 지식 연결 (Graph)
+- [[Modern-Frontend-Engineering-Architecture]], [[Design-System]], [[Nextjs-App-Router-Architecture]], [[Scalable-Frontend-Architecture]], [[Uber-Base-Web-Design-System]]
+- **Raw Source:** [[00_Raw/Kiwi.com Migration.md]], [[00_Raw/kiwi.com 마이그레이션 프로젝트.md]]
@@ -0,0 +1,30 @@
+---
+id: FE-ARCH-STRUCT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [frontend, architecture, folder-structure, scalability, modularity, atomic-design, clean-architecture]
+last_reinforced: 2026-04-26
+---
+
+# [[Frontend Architecture and Folder Structure (프런트엔드 아키텍처 및 폴더 구조)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "파일이 어디에 있는지 고민하는 시간을 제로로 만들고, 프로젝트 규모가 커져도 복잡도가 선형적으로 유지되도록 관심사 분리(SoC)에 기반한 물리적/논리적 영토를 명확히 획정하라" — 확장성과 협업 효율을 결정짓는 프런트엔드 프로젝트의 설계 지도.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Domain-Driven and Feature-Encapsulated Structuring" — 공통 컴포넌트 중심의 구조에서 벗어나, 기능(Feature)이나 도메인 단위로 관련 로직(Hooks, Components, Types, Utils)을 응집시키는 패턴.
+- **표준 폴더 구조 아키텍처:**
+    - **`/src/components`:** 여러 곳에서 재사용되는 범용 UI 원자(Buttons, Inputs).
+    - **`/src/features`:** 특정 비즈니스 기능(Auth, Cart, Profile) 단위로 캡슐화된 폴더. 각 폴더 내에 해당 기능 전용 자산 포함.
+    - **`/src/hooks`:** 범용 커스텀 훅들.
+    - **`/src/pages` / `/src/app`:** 라우팅 진입점 및 페이지 레이아웃.
+    - **`/src/assets` & `/src/styles`:** 이미지, 폰트 및 전역 CSS 설정.
+- **의의:** 의존성 방향을 명확히 하여 코드 변경의 파급 효과를 제한하고, 새로운 팀원이 프로젝트에 빠르게 적응할 수 있는 높은 관측성을 제공함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 `components`, `containers`, `actions`, `reducers` 등 기술적 계층으로 폴더를 나누었으나(Layered Architecture), 현대 정책은 관련 있는 기능을 한곳에 모으는 '도메인/피처 중심 정책'으로 전환됨.
+- **정책 변화:** Antigravity 프로젝트는 모든 저장소에 대해 'Feature-first' 폴더 구조를 강제하며, 각 피처 폴더 밖으로 유출되는 의존성은 엄격히 검토되는 'Strict Encapsulation' 정책을 고수함.
+
+## 🔗 지식 연결 (Graph)
+- [[Scalable-Frontend-Architecture]], [[Atomic-Styling-and-Design-Systems]], [[Clean-Code-Principles]], [[Modular-Monolith]]
+- **Raw Source:** [[00_Raw/Frontend Folder Structure.md]]
@@ -0,0 +1,32 @@
+---
+id: FE-DEBUG-TEST-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [frontend, debugging, testing, devtools, chrome, logging, troubleshooting]
+last_reinforced: 2026-04-26
+---
+
+# [[Frontend Debugging and Testing (프런트엔드 디버깅 및 테스트)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "단순히 코드가 '돌아가게' 만드는 것을 넘어, 브라우저가 해석하는 런타임의 진실을 도구(DevTools)로 투시하고 잠재적 버그를 사전에 차단하는 자동화된 가드레일을 구축하라" — 고품질 프런트엔드 제품을 보장하는 기술적 추론 및 검증 프로세스.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Runtime Inspection and Automated Verification" — 브라우저 개발자 도구를 통한 실시간 상태 분석과 단위/통합 테스트를 결합하여 개발 주기를 가속화하는 패턴.
+- **핵심 디버깅 기술:**
+    - **Chrome DevTools Mastering:** Elements(DOM/CSS), Console, Sources(Breakpoints), Network(API), Performance(Bottlenecks) 탭의 숙련된 활용.
+    - **Source Maps:** 난독화된 프로덕션 코드에서도 원본 소스 위치를 정확히 식별.
+    - **Conditional Logging:** 불필요한 로그 노출 없이 특정 조건에서만 디버그 정보를 출력하는 로깅 전략.
+- **테스트 전략:**
+    - **Unit Testing:** Vitest/Jest를 활용한 순수 함수 및 컴포넌트 로직 검증.
+    - **Integration Testing:** React Testing Library를 통한 컴포넌트 간 상호작용 및 DOM 렌더링 결과 확인.
+    - **E2E Testing:** Playwright/Cypress를 활용한 실제 사용자 여정(User Journey) 자동화 검증.
+- **의의:** 디버깅 시간을 단축시켜 개발 생산성을 높이고, 회귀 버그(Regression Bugs)를 방지하여 소프트웨어의 장기적인 신뢰성을 확보함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 `console.log`에만 의존했으나, 현대 정책은 브라우저 중단점(Breakpoints)과 상태 관측 도구(React DevTools 등) 활용을 기본 원칙으로 함. 또한 테스트 코드를 '나중에' 짜는 관행을 버리고 기능 개발과 동시에 테스트를 구축하는 정책을 지향함.
+- **정책 변화:** Antigravity 프로젝트는 모든 치명적인 비즈니스 로직에 대해 80% 이상의 테스트 커버리지를 강제하며, 디버그 모드에서만 활성화되는 상세 추적 로그(Verbose Tracing) 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[React-Error-Boundaries-and-Handling]], [[Frontend-Performance-Optimization-Guide]], [[Sentry-LogRocket-Monitoring]], [[Clean-Code-Principles]]
+- **Raw Source:** [[00_Raw/Frontend Debugging.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-PERF-GUIDE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [frontend, performance, optimization, checklist, lighthouse, code-splitting, lazy-loading, caching]
+last_reinforced: 2026-04-26
+---
+
+# [[Frontend Performance Optimization Guide (프런트엔드 성능 최적화 가이드)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "불필요한 리소스 전송을 최소화하고, 브라우저의 렌더링 경로를 효율적으로 관리하여 사용자에게 밀리초 단위의 쾌적함을 선사하라" — 사용자 유지율과 전환율을 결정짓는 프런트엔드 엔지니어링의 핵심 지표 관리 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Lean Delivery and Progressive Hydration" — 초기 번들 크기를 줄이고 필요한 시점에 리소스를 지연 로딩하여, 사용자가 체감하는 첫 유의미한 페인팅(FCP) 시간을 단축하는 패턴.
+- **실전 최적화 체크리스트:**
+    - **Resource Loading:** 이미지 최적화(WebP, Lazy Load), 폰트 서브셋 활용, 중요 리소스 우선순위(Preload/Prefetch) 설정.
+    - **JavaScript Bundle:** Route-based Code Splitting, 대형 라이브러리 Tree-shaking, 미사용 코드 제거.
+    - **Rendering Efficiency:** 불필요한 리렌더링 방지(`React.memo`, `useMemo`), 가상화 리스트(`react-window`) 적용.
+    - **Network & Caching:** HTTP/2+ 활용, CDN 배포, 정적 자산의 강력한 캐시 정책(E-tag, Cache-Control).
+- **의의:** 저사양 기기나 열악한 네트워크 환경의 사용자까지 포용하며, 비즈니스 수익과 검색 엔진 랭킹을 동시에 향상시킴.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 모든 리소스를 하나로 합쳐서(Bundling) 전송했으나, 현대 정책은 지연 로딩(Lazy Loading)과 증분 전송 정책으로 전환됨. 또한 '서버 사이드 렌더링(SSR)'이 단순히 SEO를 넘어 성능 최적화의 필수 요소 정책으로 정착됨.
+- **정책 변화:** Antigravity 프로젝트는 모든 웹 자산에 대해 Lighthouse 성능 점수 90점 이상 유지를 강제하며, 번들 크기가 20% 이상 증가할 경우 자동 알림 및 검토 루프에 진입하는 'Performance Budget' 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals-Metrics]], [[Web-Rendering-Strategies-CSR-vs-SSR]], [[Image-Optimization]], [[Frontend-Performance-Checklist]]
+- **Raw Source:** [[00_Raw/Frontend Performance Checklist.md]], [[00_Raw/Frontend Performance Optimization.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-TEAM-COLLAB-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [frontend, team-collaboration, governance, code-reviews, documentation, standard-operating-procedures]
+last_reinforced: 2026-04-26
+---
+
+# [[Frontend Team Collaboration and Governance (프런트엔드 팀 협업 및 거버넌스)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "코드의 품질은 개발자의 재능이 아니라 팀이 합의한 '시스템(규칙)'에서 나오며, 명확한 협업 프로토콜을 통해 지식의 파편화를 방지하고 제품의 일관성을 수호하라" — 대규모 조직에서 프런트엔드 개발의 예측 가능성과 효율성을 보장하는 거버넌스 체계.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Standardized Workflow and Collective Responsibility" — PR 템플릿, 코드 리뷰 가이드라인, 자동화된 린팅/포맷팅 규칙을 통해 개인의 편차를 줄이고 팀 전체의 역량을 상향 평준화하는 패턴.
+- **협업 핵심 요소:**
+    - **Code Governance:** ESLint, Prettier 설정을 통한 코드 스타일 강제. Husky를 활용한 Git Hooks 자동화.
+    - **Review Protocol:** 의미 있는 커밋 메시지 규칙(Conventional Commits), PR 단위의 작업 정의, 건설적인 코드 리뷰 문화.
+    - **Documentation Strategy:** 기술 설계 문서(RFC), Storybook을 활용한 컴포넌트 시각적 문서화, Wiki 기반의 도메인 지식 공유.
+    - **Standard Operating Procedures (SOP):** 버그 리포팅, 배포 승인 프로세스, 온보딩 가이드 등 반복적인 업무의 표준화.
+- **의의:** 개발 속도의 병목을 제거하고 코드의 기술 부채 누적을 방지하며, 팀원 변경 시에도 프로젝트의 연속성을 유지함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 개인의 코딩 스타일을 존중했으나, 현대 정책은 '팀 스타일 최우선 정책'으로 전환됨. 또한 문서화를 개발의 '부수적인 일'이 아닌 '개발의 일부 정책'으로 간주하여 병행 작업을 강제함.
+- **정책 변화:** Antigravity 프로젝트는 모든 PR에 대해 최소 2인 이상의 승인(Approval)을 필수 정책으로 하며, 매 분기마다 기술 부채를 전담 처리하는 'Gardening Week' 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Git-Branching-Strategies-and-Workflows]], [[Pull-Request-Workflow]], [[Clean-Code-Principles]], [[Technical-Debt-Management]]
+- **Raw Source:** [[00_Raw/Frontend Team Collaboration.md]]
@@ -0,0 +1,32 @@
+---
+id: OPS-GIT-BRANCH-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [git, version-control, branching-strategy, gitflow, trunk-based-development, collaboration, devops]
+last_reinforced: 2026-04-26
+---
+
+# [[Git Branching Strategies and Workflows (Git 브랜칭 전략 및 워크플로우)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "코드 변경의 격리와 통합을 체계적으로 관리하여 메인 브랜치의 안정성을 수호하고, 팀의 규모와 릴리스 주기에 최적화된 협업의 고속도로를 설계하라" — 소프트웨어 형상 관리의 효율성을 결정짓는 팀 표준 워크플로우.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Stability-driven Isolation and Continuous Integration" — 새로운 기능이나 버그 수정 작업을 독립된 브랜치에서 수행하고, PR 검증을 거쳐 안정된 코드만 메인 트렁크에 합류시키는 패턴.
+- **팀 규모별 최적 전략:**
+    - **Feature Branch Workflow:** 소규모 팀(2-5인)에 적장. 메인 브랜치에서 짧은 수명의 기능 브랜치를 분기하여 작업 후 병합.
+    - **Trunk-Based Development:** 고도로 숙련된 팀 및 강력한 CI/CD 환경에 적합. 메인 브랜치에 작고 잦은 커밋을 직접 또는 짧은 PR로 병합.
+    - **Git Flow:** 정기적 릴리스가 필요한 대규모 엔터프라이즈 프로젝트에 적합. `develop`, `release`, `hotfix` 등 엄격한 브랜치 계층 구조 사용.
+- **핵심 거버넌스:**
+    - **Naming Convention:** `feature/`, `bugfix/`, `hotfix/` 등 접두사 활용. 티켓 ID 포함 권장.
+    - **Commit Discipline:** Conventional Commits 준수. 의미 있는 최소 단위의 커밋.
+    - **Merge Strategy:** 깔끔한 히스토리를 위한 Squash Merge 및 병합 후 브랜치 즉시 삭제.
+- **의의:** 코드 충돌을 최소화하고, 배포 리스크를 분산시키며, 협업 과정에서의 혼선을 제거하여 개발 생산성을 극대화함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 무거운 Git Flow를 모든 프로젝트에 적용하려 했으나, 현대 정책은 팀 규모와 속도에 맞춰 더 가벼운 'GitHub Flow'나 'Trunk-Based Development' 정책으로 유연하게 전환하는 추세임.
+- **정책 변화:** Antigravity 프로젝트는 모든 저장소에 대해 'Feature Branch' 방식을 기본 정책으로 하며, 메인 브랜치로의 직접 커밋을 기술적으로 차단(Protected Branch)하고 반드시 PR 리뷰를 거치도록 함.
+
+## 🔗 지식 연결 (Graph)
+- [[Frontend-Team-Collaboration-and-Governance]], [[Pull-Request-Workflow]], [[CI-CD-Pipeline-Foundations]], [[Clean-Code-Principles]]
+- **Raw Source:** [[00_Raw/Git Branching Strategies.md]]
@@ -0,0 +1,29 @@
+---
+id: MKT-GOOG-2025-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [google, seo, page-experience, core-web-vitals, inp, search-ranking, 2025-update]
+last_reinforced: 2026-04-26
+---
+
+# [[Google Page Experience 2025 Update (구글 페이지 경험 2025 업데이트)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "단순한 로딩 속도를 넘어 사용자와의 '상호작용 품질(INP)'과 '시각적 안정성(CLS)'을 검색 순위의 핵심 변수로 격상시키고, 기술적 성능을 비즈니스의 가시성과 직결시켜라" — 2025년 구글 검색 알고리즘의 핵심인 사용자 경험 신호 체계.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Interaction-Centric Ranking and Performance Hardening" — FID가 폐지되고 모든 상호작용의 지연을 측정하는 INP가 도입됨에 따라, 런타임 자바스크립트 실행 효율이 검색 랭킹의 가장 강력한 신호가 된 패턴.
+- **2025년 업데이트 핵심 요소:**
+    - **INP (Interaction to Next Paint) 정착:** 사용자의 모든 클릭, 탭, 키보드 입력에 대한 반응성을 200ms 이내로 유지해야 함.
+    - **Strict CLS Threshold:** 시각적 안정성 우수 기준이 0.1에서 0.08로 강화됨.
+    - **Mobile-First Indexing Completion:** 모바일 환경에서의 경험이 데스크톱 랭킹까지 결정하는 구조의 고착화.
+    - **HTTPS & Security:** 안전한 브라우징 환경이 페이지 경험의 기본 전제로 작용.
+- **의의:** 기술적 최적화가 마케팅 성과(SEO)로 직결됨을 명시하며, 개발자와 마케터 간의 긴밀한 협력을 요구함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 초기 로딩 시간(LCP)만 좋으면 상위 랭킹이 가능했으나, 2025년 정책은 페이지 로드 이후의 '지속적인 상호작용성(INP)' 정책을 동일한 비중으로 반영함.
+- **정책 변화:** Antigravity 프로젝트는 모든 웹 자산에 대해 'Google Search Console - Core Web Vitals' 리포트의 모든 지표를 'Good' 등급으로 유지하는 것을 마케팅 KPI의 기본 정책으로 설정함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals-Metrics]], [[Interaction-to-Next-Paint-INP]], [[Cumulative-Layout-Shift-CLS]], [[SEO-Foundations]], [[Modern-Website-Architecture]]
+- **Raw Source:** [[00_Raw/Google Page Experience 2025 Update.md]], [[00_Raw/Google Page Experience 2025.md]]
@@ -0,0 +1,32 @@
+---
+id: FE-SSR-HYDRA-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [react, ssr, hydration, hydration-mismatch, debugging, frontend-performance, nextjs]
+last_reinforced: 2026-04-26
+---
+
+# [[Hydration Mismatch and SSR Debugging (수화 불일치 및 SSR 디버깅)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "서버가 구워낸 HTML과 클라이언트가 렌더링한 초기 결과물이 1비트라도 다를 때 발생하는 경고를 무시하지 말고, 정적 일관성을 확보하여 불필요한 전체 리렌더링의 늪에서 탈출하라" — SSR 환경에서 서버와 클라이언트 간의 렌더링 트리 정합성을 유지하기 위한 기술적 가이드.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Pre-rendering Consistency and Client-only Escape" — 서버와 클라이언트의 렌더링 결과가 일치해야 한다는 SSR의 대전제를 준수하되, 브라우저 전용 데이터(window, localStorage)가 필요한 경우 'useEffect' 이후로 렌더링을 지연시키는 패턴.
+- **수화 불일치(Hydration Mismatch)의 주요 원인:**
+    - **Browser-only APIs:** 서버에는 없는 `window`, `document` 객체를 초기 렌더링 시점에 직접 참조.
+    - **Non-deterministic Data:** `Math.random()`이나 `new Date()` 등 서버와 클라이언트에서 값이 달라지는 로직 사용.
+    - **Invalid HTML Structure:** `p` 태그 안에 `div`를 넣는 등 브라우저가 강제로 수정하는 비정상적인 HTML 구조.
+- **해결 및 디버깅 전략:**
+    - **Isomorphic Consistency:** 공통 상수나 환경 변수를 사용하여 양쪽 환경의 초기 값을 일치시킴.
+    - **Two-pass Rendering:** `isMounted` 상태 등을 활용하여 서버 렌더링 시에는 공통 UI를, 클라이언트 마운트 이후에 브라우저 전용 UI를 렌더링.
+    - **Suppression Tag:** 극히 제한적인 상황에서만 `suppressHydrationWarning` 속성 사용.
+- **의의:** 불필요한 UI 흔들림(Flicker)을 방지하고, 브라우저의 렌더링 성능 최적화(Hydration 효율성)를 보장함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 수화 불일치 경고를 사소한 경고 정책으로 보았으나, 현대 React 정책은 이를 성능 저하와 버그의 전조로 간주하여 엄격히 관리할 것을 요구함. 특히 Next.js 15+ 환경에서는 빌드 타임에 이를 더 공격적으로 검출 정책화함.
+- **정책 변화:** Antigravity 프로젝트는 모든 SSR 컴포넌트에 대해 'Zero Hydration Warning' 정책을 시행하며, 브라우저 전용 로직은 반드시 전용 커스텀 훅(`useIsMounted`)을 통해서만 처리하도록 강제함.
+
+## 🔗 지식 연결 (Graph)
+- [[Web-Rendering-Strategies-CSR-vs-SSR]], [[Server-Side-Rendering-SSR]], [[Nextjs-App-Router-Architecture]], [[Frontend-Debugging-and-Testing]]
+- **Raw Source:** [[00_Raw/Hydration Mismatch.md]]
@@ -0,0 +1,30 @@
+---
+id: PERF-IMG-OPT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [image-optimization, web-performance, webp, avif, lazy-loading, responsive-images, lcp]
+last_reinforced: 2026-04-26
+---
+
+# [[Image Optimization for Web Performance (웹 성능을 위한 이미지 최적화)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "시각적 품질은 유지하되 파일 크기는 물리적 최소치로 압축하고, 사용자의 화면에 나타날 때만 리소스를 전송하여 초기 로딩의 거대한 장벽을 제거하라" — LCP 성능을 결정짓는 프런트엔드 리소스 관리의 핵심.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Next-gen Formats and Adaptive Delivery" — WebP/AVIF 같은 차세대 포맷을 사용하고, 기기의 해상도(srcset) 및 뷰포트 위치(Lazy Load)에 따라 최적의 이미지를 선별적으로 전송하는 패턴.
+- **이미지 최적화 기술:**
+    - **Modern Formats:** JPEG/PNG 대비 30~50% 더 높은 압축률을 가진 WebP 및 AVIF 채택.
+    - **Responsive Images:** `srcset`과 `sizes` 속성을 활용하여 화면 크기에 맞는 이미지 서빙.
+    - **Native Lazy Loading:** `loading="lazy"` 속성을 통해 스크롤 시점에 이미지 다운로드.
+    - **Aspect Ratio Boxes:** 이미지 로드 전 공간을 미리 확보하여 CLS 방지.
+    - **Image CDNs:** 이미지를 동적으로 크롭하고 압축하여 전송하는 외부 서비스 활용.
+- **의의:** 웹사이트 전송 용량의 60% 이상을 차지하는 이미지를 최적화함으로써 LCP를 단축하고 모바일 데이터 사용량을 절감함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 이미지를 무조건 합쳐서(Sprite) 요청 수를 줄였으나, 현대 정책은 개별 이미지의 포맷 최적화와 필요 시점 로딩 정책을 선호함.
+- **정책 변화:** Antigravity 프로젝트는 모든 신규 이미지 자산에 대해 AVIF 포맷 사용을 기본 정책으로 하며, 고해상도 원본 이미지를 직접 서빙하는 행위를 엄격히 금지함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals-Metrics]], [[Largest-Contentful-Paint-LCP]], [[Cumulative-Layout-Shift-CLS]], [[Frontend-Performance-Optimization-Guide]]
+- **Raw Source:** [[00_Raw/Image Optimization.md]]
@@ -0,0 +1,29 @@
+---
+id: UX-INCLUSIVE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [inclusive-design, ux, accessibility, universal-design, diversity, empathy, digital-equity]
+last_reinforced: 2026-04-26
+---
+
+# [[Inclusive Design and UX (인클루시브 디자인과 UX)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "평균적인 사용자를 위한 설계를 넘어 극단적 제약(장애, 환경, 연령)을 가진 사용자의 문제부터 해결하고, 그 결과로 모두에게 더 편리하고 혁신적인 경험을 제공하라" — 인간의 다양성을 설계의 중심에 두는 보편적 디자인 철학.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Solve for One, Extend to Many" — 특정 제약을 가진 한 사람을 위해 최적의 경험을 설계하면, 그 혜택이 일시적 제약을 겪거나 상황적 한계에 있는 대다수의 사용자에게도 전이되는 패턴.
+- **인클루시브 UX의 핵심 차원:**
+    - **Physical & Sensory Inclusion:** 시각/청각 장애인을 위한 스크린 리더 호환 및 자막 제공.
+    - **Cognitive Inclusion:** 학습 장애나 인지 저하 사용자를 위한 직관적 인터페이스 및 쉬운 언어 사용.
+    - **Situational Inclusion:** 야외 햇빛 아래의 저대비 환경이나 소음 속에서의 영상 시청 환경 고려.
+    - **Cultural & Linguistic Inclusion:** 다양한 언어와 문화적 배경을 가진 사용자를 위한 다국어 및 현지화 최적화.
+- **의의:** 디지털 소외 계층을 줄여 사회적 책임을 다하고, 시장 도달 범위를 최대로 확장하여 비즈니스 지속 가능성을 확보함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 접근성(Accessibility)을 '법적 준수'의 부수적인 작업으로 보았으나, 현대 정책은 인클루시브 디자인을 '혁신의 원동력 정책'으로 간주함.
+- **정책 변화:** Antigravity 프로젝트는 모든 디자인 리뷰 단계에서 '인클루시브 체크리스트' 통과를 의무화하며, 고령자 및 아동 사용자를 포함한 극한 환경 테스트 정책을 상시 운영함.
+
+## 🔗 지식 연결 (Graph)
+- [[ADA-and-EAA-Accessibility-Compliance]], [[POUR-Principles]], [[UX-Design-Principles]], [[User-Centered-Design-Approach]]
+- **Raw Source:** [[00_Raw/Inclusive Design.md]], [[00_Raw/Inclusive UX Design.md]]
@@ -0,0 +1,28 @@
+---
+id: FE-REND-ISR-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [nextjs, isr, rendering, web-architecture, ssg, performance, scalability, seo]
+last_reinforced: 2026-04-26
+---
+
+# [[Incremental Static Regeneration: ISR (점진적 정적 재생성)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "전체 사이트를 다시 빌드하지 않고도 정적 페이지를 백그라운드에서 실시간으로 업데이트하여, 정적 사이트의 성능(SSG)과 동적 데이터의 최신성(SSR)을 완벽하게 결합하라" — 대규모 콘텐츠 사이트의 확장성과 속도를 해결하는 차세대 렌더링 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Stale-While-Revalidate at Scale" — 사용자에게는 일단 캐시된 정적 페이지를 즉시 서빙하고, 설정된 주기마다 백그라운드에서 데이터를 갱신하여 다음 사용자에게 최신 페이지를 제공하는 패턴.
+- **ISR의 핵심 메커니즘:**
+    - **Revalidate Interval:** 초 단위로 갱신 주기를 설정 (예: 60초).
+    - **Background Regeneration:** 주기가 지난 후 첫 요청이 들어오면 기존 페이지를 즉시 보여주되, 서버는 백그라운드에서 새 페이지를 생성.
+    - **Atomic Replacement:** 생성이 완료되면 기존 캐시를 새 페이지로 교체.
+- **의의:** 수백만 개의 페이지를 가진 이커머스나 뉴스 사이트에서도 빌드 시간을 획기적으로 줄이면서도 최신 정보를 유지할 수 있게 함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 실시간 정보를 위해 무조건 SSR을 사용했으나, 이는 서버 부하를 가중시켰음. ISR 정책은 '수용 가능한 수준의 최신성'을 타협 정책으로 채택하여 서버 비용과 사용자 경험을 최적화함.
+- **정책 변화:** Antigravity 프로젝트는 상품 상세 페이지 및 카테고리 목록에 대해 기본적으로 ISR 정책을 적용하며, 재고 정보와 같은 극도로 민감한 데이터에 한해서만 부분적인 클라이언트 사이드 데이터 페칭 정책을 결합함.
+
+## 🔗 지식 연결 (Graph)
+- [[Static-Site-Generation-SSG]], [[Server-Side-Rendering-SSR]], [[Web-Rendering-Strategies-CSR-vs-SSR]], [[Nextjs-App-Router-Architecture]]
+- **Raw Source:** [[00_Raw/Incremental Static Regeneration (ISR).md]]
@@ -0,0 +1,33 @@
+---
+id: PERF-CWV-INP-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [core-web-vitals, inp, performance, responsiveness, interaction, main-thread, frontend-optimization]
+last_reinforced: 2026-04-26
+---
+
+# [[Interaction to Next Paint: INP (상호작용 다음 페인트까지의 지연 시간)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "단 한 번의 빠른 반응이 아니라, 사용자가 페이지를 떠날 때까지 수행하는 모든 상호작용의 지연을 감시하고, 0.2초 이내의 즉각적인 응답성을 일관되게 보장하라" — FID를 대체하여 웹사이트의 전체적인 반응성을 측정하는 2024년 이후 Core Web Vitals의 핵심 지표.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Continuous Responsiveness and Task Yielding" — 긴 작업을 작게 쪼개어 브라우저가 사용자 입력과 렌더링 업데이트 사이에 숨 쉴 틈(Yield)을 주는 패턴.
+- **INP의 핵심 메커니즘:**
+    - **Input Delay:** 사용자 입력 후 이벤트 핸들러가 실행되기 전까지의 대기 시간 (주로 메인 스레드 점유로 발생).
+    - **Processing Time:** 이벤트 핸들러 자체의 실행 시간.
+    - **Presentation Delay:** 이벤트 처리 후 실제 화면에 변경 사항이 그려지기까지의 시간.
+- **주요 최적화 전략:**
+    - **Breaking Up Long Tasks:** 50ms 이상의 무거운 동기 작업을 `scheduler.yield()`나 `setTimeout`으로 분할.
+    - **Web Workers:** 복잡한 연산을 메인 스레드 밖으로 오프로드.
+    - **Optimization of Third-party Scripts:** 상호작용을 저해하는 광고/분석 스크립트의 실행 지연.
+    - **Event Debouncing/Throttling:** 잦은 이벤트 발생을 제한하여 렌더링 부하 감소.
+- **의의:** 사용자의 입력에 즉각적으로 반응하는 웹사이트를 통해 심리적 마찰을 줄이고 비즈니스 전환율을 높임.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거 FID는 첫 번째 상호작용의 지연만 측정했으나, INP 정책은 '전체 세션 중 가장 긴 지연 시간'을 측정 정책으로 삼아 훨씬 엄격한 최적화를 요구함.
+- **정책 변화:** Antigravity 프로젝트는 모든 동적 리스트 렌더링 시 가상화(Virtualization) 적용을 의무화하며, 100ms 이상의 메인 스레드 차단 작업 발생 시 빌드 경고 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals-Metrics]], [[JavaScript-Optimization-Patterns]], [[Google-Page-Experience-2025-Update]], [[Frontend-Performance-Optimization-Guide]]
+- **Raw Source:** [[00_Raw/INP (Interaction to Next Paint).md]], [[00_Raw/Interaction to Next Paint (INP).md]]
@@ -0,0 +1,29 @@
+---
+id: MKT-SEO-JSONLD-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [json-ld, structured-data, schema-markup, seo, rich-results, aeo, ai-crawling]
+last_reinforced: 2026-04-26
+---
+
+# [[JSON-LD Structured Data (JSON-LD 구조화된 데이터)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "웹페이지의 콘텐츠를 기계가 읽을 수 있는 명시적인 지식 그래프(Knowledge Graph)로 기술하고, 검색 결과에서 화려한 리치 스니펫과 AI 엔진의 직접 인용권을 획득하라" — 구글이 가장 선호하는 시맨틱 마크업 표준 형식.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Linked Data and Machine-Readable Context" — 텍스트 사이에 마크업을 섞는 대신, 별도의 JSON 블록으로 엔티티(Product, Person, Event 등)의 속성과 관계를 선언하는 패턴.
+- **주요 활용 및 효과:**
+    - **Rich Results:** 별점, 가격, 재고 여부, FAQ 등을 검색 결과 페이지(SERP)에 직접 노출하여 클릭률(CTR) 향상.
+    - **Knowledge Panel:** 인물이나 기관의 정보를 지식 패널에 정확히 연동.
+    - **AI AEO/GEO Optimization:** AI 크롤러가 콘텐츠의 핵심 실체를 오해 없이 수집하도록 돕는 결정적 신호 제공.
+- **구현 방식:** HTML의 `<head>` 영역에 `<script type="application/ld+json">` 블록 삽입.
+- **의의:** 단순한 키워드 최적화를 넘어, 지식의 맥락을 검색 엔진과 AI에게 명확히 전달하여 디지털 정보의 권위를 확보함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 Microdata나 RDFa 방식이 혼용되었으나, 현대 구글 정책은 구현과 관리가 용이한 'JSON-LD 전용 정책'을 권고함.
+- **정책 변화:** Antigravity 프로젝트는 모든 블로그 포스트와 상품 페이지에 대해 JSON-LD 자동 생성 정책을 시행하며, 배포 전 '리치 결과 테스트' 도구를 통한 유효성 검증을 의무화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Structured-Data-Markup]], [[SEO-Foundations]], [[AI-Answer-Engine-Optimization]], [[Search-Engine-Optimization-SEO]]
+- **Raw Source:** [[00_Raw/JSON-LD.md]]
@@ -0,0 +1,30 @@
+---
+id: PERF-JS-OPT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [javascript, performance, optimization, inp, code-splitting, tree-shaking, web-workers, main-thread]
+last_reinforced: 2026-04-26
+---
+
+# [[JavaScript Optimization Patterns (자바스크립트 최적화 패턴)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "전송되는 번들 크기를 극한으로 깎고, 메인 스레드를 점유하는 긴 작업을 잘게 쪼개어(Yield), 브라우저가 사용자의 입력에 즉각적으로 반응할 수 있는 '숨 쉴 틈'을 확보하라" — INP 성능 향상을 위한 현대 자바스크립트 실행 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Static Reduction and Runtime Yielding" — 빌드 시점의 불필요한 코드 제거(Tree Shaking)와 런타임 시점의 메인 스레드 점유 분산(Yielding)을 결합한 패턴.
+- **핵심 최적화 기법:**
+    - **Code Splitting & Tree Shaking:** 사용하지 않는 코드를 제거하고, 필요한 시점에만 모듈을 로드하여 초기 파싱 시간 단축.
+    - **Breaking Up Long Tasks:** 50ms 이상의 작업을 작은 단위로 분할하여 브라우저 렌더링 스케줄러에게 제어권을 양보.
+    - **Web Workers:** 복잡한 연산을 별도의 백그라운드 스레드로 이전하여 메인 스레드 프리징 방지.
+    - **Debounce & Throttle:** 고빈도 이벤트(Scroll, Resize, Search)의 핸들러 실행 횟수 제한.
+    - **requestIdleCallback:** 중요도가 낮은 작업을 브라우저의 유휴 시간에 배치.
+- **의의:** 자바스크립트 실행으로 인한 UI 프리징을 제거하여 Core Web Vitals의 INP 지표를 획기적으로 개선하고 실질적인 사용자 만족도를 높임.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 모든 기능을 하나의 거대한 라이브러리에 의존하는 경향이 있었으나, 현대 정책은 '경량 모듈 정책'과 '필요 시 로드 정책'을 최우선으로 함.
+- **정책 변화:** Antigravity 프로젝트는 모든 동기적 루프에 대해 50ms 초과 시 경고 정책을 시행하며, CPU 집약적인 데이터 처리 로직은 반드시 웹 워커(Web Worker) 사용 정책을 준수하도록 함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals-Metrics]], [[Interaction-to-Next-Paint-INP]], [[Frontend-Performance-Optimization-Guide]], [[Clean-Code-Principles]]
+- **Raw Source:** [[00_Raw/JavaScript Optimization.md]]
@@ -0,0 +1,29 @@
+---
+id: CS-KISS-PRINCIPLE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [software-design, kiss-principle, simplicity, clean-code, refactoring, maintainability]
+last_reinforced: 2026-04-26
+---
+
+# [[KISS Principle in Software Design (KISS 원칙: 단순함의 미학)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "복잡성은 시스템의 적이다. 해결책을 필요 이상으로 똑똑하게 만들려 하지 말고, 누구나 단번에 이해할 수 있는 가장 단순한 구조를 유지하여 소프트웨어의 생존력을 확보하라" — Keep It Simple, Stupid(KISS)라는 설계의 근본 철학.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Intentional Simplicity and Reduction of Overhead" — 과도한 추상화나 불필요한 기능을 제거하고, 문제의 본질에 가장 가깝고 명확한 코드를 작성하는 패턴.
+- **KISS 원칙의 실천 지침:**
+    - **Avoid Over-engineering:** 미래에 일어날지도 모르는 복잡한 시나리오를 대비해 미리 코드를 복잡하게 만들지 말 것 (YAGNI와 일맥상통).
+    - **Single Responsibility:** 하나의 함수나 컴포넌트가 하나의 역할만 명확히 수행하게 하여 논리적 복잡도 감소.
+    - **Declarative Approach:** 코드가 '어떻게(How)' 동작하는지보다 '무엇을(What)' 하는지 명확히 나타내어 가독성 향상.
+    - **Small Modules:** 거대한 로직을 이해하기 쉬운 작은 단위로 쪼개어 인지적 부하(Cognitive Load) 경감.
+- **의의:** 유지보수 비용을 낮추고 버그 발생 확률을 줄이며, 새로운 팀원이 프로젝트에 빠르게 기여할 수 있는 낮은 진입 장벽 제공.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 자신의 기술력을 과시하기 위한 '영리하고 복잡한 코드(Clever Code)'가 선호되기도 했으나, 현대 정책은 '지속 가능한 단순성 정책'을 최우선으로 함.
+- **정책 변화:** Antigravity 프로젝트는 코드 리뷰 시 '불필요한 복잡도'를 중대한 결함으로 간주하며, 시니어 개발자일수록 더 단순한 해결책을 제시할 것을 의무화하는 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Clean-Code-Principles]], [[YAGNI-Principle]], [[Software-Architecture-Patterns]], [[Refactoring-Techniques]]
+- **Raw Source:** [[00_Raw/KISS Principle.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-ARCH-LARGE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [architecture, large-scale, frontend, monorepo, fsd, scalability, maintainability, modularity]
+last_reinforced: 2026-04-26
+---
+
+# [[Large-scale Application Architecture Patterns (대규모 애플리케이션 아키텍처 패턴)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "코드의 양이 늘어나도 복잡도의 엔트로피가 발산하지 않도록 엄격한 계층 구조(FSD)와 통합 관리 체계(Monorepo)를 구축하고, 의존성의 방향을 단방향으로 강제하여 시스템의 수명을 연장하라" — 수천 명의 개발자가 동시에 협업할 수 있는 프런트엔드 설계의 최상위 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Hierarchical Decoupling and Unified Governance" — 애플리케이션을 책임 범위에 따라 수직적으로 계층화하고, 물리적으로는 모노레포를 통해 자산을 공유하여 응집도는 높이고 결합도는 낮추는 패턴.
+- **핵심 아키텍처 요소:**
+    - **Feature-Sliced Design (FSD):** `Shared` → `Entities` → `Features` → `Widgets` → `Pages` → `App` 순으로 의존성을 제한하는 계층적 설계.
+    - **Monorepo Strategy:** `pnpm workspaces`나 `Turborepo`를 활용하여 다수의 서비스와 공용 라이브러리를 하나의 코드베이스에서 효율적으로 관리.
+    - **Micro-frontends:** 거대한 앱을 독립적으로 배포 가능한 단위로 쪼개어 팀 간의 간섭 최소화 (Module Federation 등).
+    - **Design Token System:** 스타일 속성을 변수화하여 전체 프로젝트의 일관성을 중앙 제어.
+- **의의:** 프로젝트 규모가 커짐에 따라 발생하는 스파게티 코드와 의존성 지옥을 방지하고, 지속 가능한 개발 속도를 유지함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 무조건적인 코드 분리(Micro-services)가 정답인 것처럼 여겨졌으나, 현대 정책은 과도한 분절이 초래하는 복잡도를 경계하며 '모듈식 모놀리스(Modular Monolith)'나 '고성능 모노레포 정책'을 선호함.
+- **정책 변화:** Antigravity 프로젝트는 모든 엔터프라이즈급 제품 개발 시 FSD(Feature-Sliced Design) 아키텍처 준수를 의무화하며, 의존성 규칙 위반 시 빌드 단계에서 차단하는 'Architecture Linting' 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Frontend-Architecture-and-Folder-Structure]], [[Modular-Monolith]], [[Monorepo]], [[Clean-Architecture-Implementation]]
+- **Raw Source:** [[00_Raw/Large-scale Application Architecture.md]]
@@ -0,0 +1,34 @@
+---
+id: PERF-CWV-LCP-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [core-web-vitals, lcp, performance, loading, web-vitals, seo, frontend-optimization]
+last_reinforced: 2026-04-26
+---
+
+# [[Largest Contentful Paint: LCP (최대 콘텐츠 페인팅)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "사용자가 보고 싶어 하는 가장 큰 주인공(이미지나 텍스트)을 2.5초 이내에 무대 위에 올리고, 로딩의 지루함이 이탈의 원인이 되지 않도록 전송 경로의 모든 저항을 제거하라" — 페이지 로딩 성능을 측정하는 가장 직관적인 Core Web Vitals 지표.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Hero Element Prioritization and Critical Path Acceleration" — 뷰포트 내 가장 큰 요소(Hero image, Banner 등)를 식별하고, 해당 요소를 렌더링하기 위한 중요 경로(Critical Path)를 최단 시간으로 압축하는 패턴.
+- **LCP의 4대 하위 지표:**
+    - **TTFB (Time to First Byte):** 서버로부터 첫 번째 바이트가 도착하는 시간.
+    - **Resource Load Delay:** LCP 요소의 로딩이 시작되기까지의 지연.
+    - **Resource Load Duration:** 리소스 자체의 다운로드 시간.
+    - **Element Render Delay:** 리소스 로드 후 실제 화면에 그려지기까지의 지연.
+- **LCP 최적화 전략:**
+    - **Preload Critical Images:** LCP 후보가 될 이미지는 `<link rel="preload">`로 우선순위 격상.
+    - **Server-Side Rendering (SSR):** 초기 HTML에 콘텐츠를 포함하여 렌더링 지연 제거.
+    - **Image Compression & Next-gen Formats:** AVIF/WebP 사용으로 전송 용량 최소화.
+    - **Eliminate Render-blocking Resources:** 렌더링을 방해하는 JS/CSS 비동기 로드.
+- **의의:** 사용자가 웹사이트의 가치를 체감하는 결정적 순간을 가속화하여 사용자 경험 점수를 극대화함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 전체 로드 시간(Window Load)이 중요했으나, 현대 정책은 실제 사용자가 보는 '가장 큰 요소'의 렌더링 완료 정책(LCP)을 유일한 진실 정책으로 채택함.
+- **정책 변화:** Antigravity 프로젝트는 모든 랜딩 페이지의 LCP 요소를 수동 지정하여 최우선 순위로 관리하며, LCP 요소에 대해 지연 로딩(Lazy Loading) 적용을 엄격히 금지함.
+
+## 🔗 지식 연결 (Graph)
+- [[Core-Web-Vitals-Metrics]], [[Image-Optimization-for-Web-Performance]], [[Web-Rendering-Strategies-CSR-vs-SSR]], [[Frontend-Performance-Optimization-Guide]]
+- **Raw Source:** [[00_Raw/Largest Contentful Paint (LCP).md]], [[00_Raw/LCP (Largest Contentful Paint).md]]
@@ -0,0 +1,29 @@
+---
+id: PERF-LAZY-LOAD-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [performance, lazy-loading, optimization, frontend, images, code-splitting, lcp]
+last_reinforced: 2026-04-26
+---
+
+# [[Lazy Loading Strategies (지연 로딩 전략)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "모든 것을 한꺼번에 가져오려는 욕심을 버리고, 사용자의 시선이 닿는 그 순간에만 필요한 정보를 전송하여 초기 로딩의 거대한 장벽을 무너뜨려라" — 초기 로딩 속도 향상과 자원 절약을 위한 기술적 '기다림'의 미학.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "On-demand Resource Delivery and Deferred Hydration" — 초기 뷰포트에 보이지 않는 이미지, 비디오, 스크립트, 컴포넌트를 사용자가 해당 위치로 스크롤하거나 상호작용할 때까지 로딩을 유예하는 패턴.
+- **분야별 적용 기술:**
+    - **Native Image Lazy Loading:** `<img loading="lazy">`를 통한 브라우저 기본 최적화.
+    - **Intersection Observer API:** 뷰포트 진입 여부를 감지하여 동적으로 리소스 로드.
+    - **Code Splitting (Dynamic Import):** 특정 라우트나 무거운 컴포넌트(`React.lazy`, `Suspense`)를 사용 시점에만 다운로드.
+    - **Infinite Scroll / Virtual Lists:** 대량의 데이터를 페이지 하단 도달 시점에 추가 로드.
+- **의의:** 초기 번들 크기를 줄여 FCP(First Contentful Paint)를 개선하고, 사용하지 않는 리소스 전송에 따른 네트워크 비용을 절감함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 무조건적인 지연 로딩이 선(善)으로 여겨졌으나, 현대 정책은 'LCP 요소(가장 큰 이미지 등)'에 대해서는 지연 로딩을 금지 정책으로 삼음. 첫 화면의 주인공은 지연 없이 즉시 로드(Eager Load)되어야 함.
+- **정책 변화:** Antigravity 프로젝트는 뷰포트 밖의 모든 미디어 자산에 대해 지연 로딩을 기본 정책으로 강제하며, LCP 후보 요소에 `loading="lazy"`가 포함된 경우 빌드 오류를 발생시키는 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Frontend-Performance-Optimization-Guide]], [[Largest-Contentful-Paint-LCP]], [[Image-Optimization-for-Web-Performance]], [[JavaScript-Optimization-Patterns]]
+- **Raw Source:** [[00_Raw/Lazy Loading.md]]
@@ -0,0 +1,33 @@
+---
+id: FE-DEBUG-MEMORY-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [javascript, performance, debugging, memory-leak, heap-snapshot, devtools, chrome]
+last_reinforced: 2026-04-26
+---
+
+# [[Memory Leak Debugging in JavaScript (자바스크립트 메모리 누수 디버깅)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "더 이상 필요하지 않은 데이터가 가비지 컬렉터(GC)에 의해 회수되지 않고 점유되는 현상을 추적하고, 브라우저 힙(Heap)의 비정상적 비대를 사전에 차단하여 런타임 안정성을 확보하라" — 장기 세션 애플리케이션의 성능 저하와 크래시를 방지하는 고도의 디버깅 기술.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Snapshot Comparison and Reference Tracking" — 특정 시점의 메모리 스냅샷을 비교하여 해제되지 않은 객체와 그 참조 경로를 식별하는 패턴.
+- **주요 원인 및 해결책:**
+    - **Global Variables:** 의도치 않게 전역 객체에 할당된 변수 제거.
+    - **Forgotten Timers/Listeners:** 컴포넌트 언마운트 시 `clearTimeout`이나 `removeEventListener`를 호출하지 않아 발생하는 누수.
+    - **Closures:** 상위 스코프의 변수를 불필요하게 오래 점유하는 클로저 식별.
+    - **Detached DOM Nodes:** DOM에서는 삭제되었으나 JS 변수가 참조하고 있어 메모리에 남아있는 노드 제거.
+- **디버깅 도구 활용:**
+    - **Chrome DevTools Memory Tab:** Heap Snapshot을 찍어 객체 수 증가 추이 확인.
+    - **Allocation Instrumentation on Timeline:** 메모리 할당이 발생하는 시점 실시간 관측.
+    - **Performance Monitor:** CPU와 메모리 사용량 실시간 모니터링.
+- **의의:** 애플리케이션의 점진적 속도 저하(Sluggishness)를 방지하고, 사용자에게 일관된 쾌적함을 제공함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 메모리 누수를 드문 현상으로 여겼으나, 현대의 복잡한 SPA 환경에서는 세션이 길어짐에 따라 '누적되는 누수 정책'이 심각한 사용자 경험 저하를 유발함.
+- **정책 변화:** Antigravity 프로젝트는 모든 복잡한 위젯(차트, 에디터 등) 개발 시 언마운트 후 메모리 잔류 여부 테스트를 필수 정책으로 하며, 메모리 사용량이 임계치 이상 상승할 경우 자동 경고 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Frontend-Debugging-and-Testing]], [[JavaScript-Optimization-Patterns]], [[React-Error-Boundaries-and-Handling]], [[Frontend-Performance-Optimization-Guide]]
+- **Raw Source:** [[00_Raw/Memory Leak Debugging.md]]
@@ -0,0 +1,30 @@
+---
+id: UX-MICRO-INT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ux, micro-interactions, feedback-loops, animation, user-engagement, delightful-ux, state-feedback]
+last_reinforced: 2026-04-26
+---
+
+# [[Micro-interactions and Feedback Loops (마이크로 인터랙션과 피드백 루프)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "사용자의 아주 작은 동작(클릭, 호버, 스크롤)에도 제품이 살아있음을 느끼게 하는 미세한 반응을 설계하고, 시스템의 현재 상태를 우아하게 전달하여 심리적 안정감과 즐거움을 선사하라" — 사용자 경험의 디테일을 완성하는 마이크로 디자인 요소.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Trigger-Action-Feedback Loop" — 사용자의 입력(Trigger)에 대해 시스템이 규칙(Rule)에 따라 반응하고, 그 결과(Feedback)를 시각적/청각적/촉각적 애니메이션으로 즉각 전달하는 패턴.
+- **마이크로 인터랙션의 4단계 구조:**
+    - **Trigger:** 사용자가 행동을 시작하는 신호 (버튼 클릭 등).
+    - **Rules:** 트리거 발생 시 시스템이 어떻게 작동할지 결정하는 논리.
+    - **Feedback:** 사용자가 일어난 일을 알 수 있게 하는 반응 (버튼 색상 변화, 로딩 스피너).
+    - **Loops & Modes:** 인터랙션의 메타 규칙 (반복 여부, 환경에 따른 변화).
+- **효과:** 사용자가 시스템을 제어하고 있다는 확신 제공, 작업 완료 확인, 긍정적인 브랜드 이미지 형성, 사용자 이탈 방지.
+- **의의:** 기능적 완성을 넘어 '사랑받는 제품'으로 나아가는 감성적 UX의 정수.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 애니메이션을 리소스 낭비로 보기도 했으나, 현대 정책은 '적절한 애니메이션은 정보 전달의 필수 정책'으로 간주함. 다만, 의미 없는 과도한 애니메이션은 지양해야 함.
+- **정책 변화:** Antigravity 프로젝트는 모든 상호작용 요소(버튼, 링크, 폼)에 대해 0.1초 이내의 즉각적인 피드백 애니메이션 정책을 시행하며, 접근성을 고려하여 애니메이션 감소(Reduced Motion) 옵션 대응 정책을 필수로 함.
+
+## 🔗 지식 연결 (Graph)
+- [[UX-Design-Principles]], [[User-Centered-Design-Approach]], [[Inclusive-Design-and-UX]], [[Mobile-First-Responsive-Design-Principles]]
+- **Raw Source:** [[00_Raw/Micro-interactions.md]]
@@ -0,0 +1,29 @@
+---
+id: UX-MOBILE-FIRST-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [mobile-first, responsive-design, ux, css-grid, flexbox, progressive-enhancement, mobile-indexing]
+last_reinforced: 2026-04-26
+---
+
+# [[Mobile-First Responsive Design Principles (모바일 우선 반응형 설계 원칙)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "가장 작은 화면과 가장 열악한 네트워크 환경을 설계의 기준점으로 삼아 핵심 가치에 집중하고, 화면이 커짐에 따라 경험을 점진적으로 확장(Progressive Enhancement)하라" — 모바일 트래픽 60% 시대의 웹 디자인 필수 생존 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Mobile-Centric Constraints and Desktop Expansion" — 정보 밀도가 높은 데스크톱이 아닌, 공간이 제한된 모바일에서 가장 중요한 콘텐츠를 먼저 배치하고 확장하는 패턴.
+- **핵심 기술 및 전략:**
+    - **Fluid Layouts:** 고정 폭 대신 `%`, `vw`, `vh` 등 유연한 단위를 사용하고, CSS Grid와 Flexbox로 적응형 레이아웃 구축.
+    - **Media Queries (Min-width):** 모바일 스타일을 기본으로 작성하고, `@media (min-width: ...)`를 통해 큰 화면용 스타일을 덧붙임.
+    - **Touch-Friendly UI:** 최소 44x44px 이상의 터치 타겟 확보 및 스와이프 제스처 고려.
+    - **Performance Priority:** 불필요한 데스크톱용 리소스가 모바일에서 다운로드되지 않도록 최적화.
+- **의의:** Google의 모바일 우선 인덱싱(Mobile-first Indexing)에 완벽히 대응하며, 기기 종류에 상관없이 일관된 가치를 제공함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 데스크톱 버전을 만든 후 요소를 숨기거나 줄이는 '우아한 퇴보(Graceful Degradation)' 방식을 썼으나, 현대 정책은 반대로 모바일에서 시작해 확장하는 '점진적 향상(Progressive Enhancement) 정책'을 표준으로 함.
+- **정책 변화:** Antigravity 프로젝트는 모든 웹 레이아웃 설계 시 모바일 시안(360px) 작성을 첫 번째 의무 정책으로 하며, 모바일 성능 점수가 데스크톱보다 높게 유지되도록 하는 'Mobile-Performance-Priority' 정책을 시행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Modern-Web-Design-Best-Practices-2025]], [[UX-Design-Principles]], [[Responsive-Images]], [[SEO-Foundations]]
+- **Raw Source:** [[00_Raw/Mobile-First Design.md]], [[00_Raw/Mobile-First Responsive Design.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-ARCH-MODERN-2025-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [frontend, architecture, 2025, modern-web, engineering-standards, observability, scalability]
+last_reinforced: 2026-04-26
+---
+
+# [[Modern Frontend Engineering Architecture (현대 프런트엔드 엔지니어링 아키텍처)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "단순한 UI 구현을 넘어 성능, 보안, 접근성, 그리고 비즈니스 로직의 견고함을 아우르는 통합적 엔지니어링 체계를 구축하고, 0.1초의 응답성이 비즈니스의 승패를 결정함을 인지하라" — 2025년 기준 최첨단 프런트엔드 기술 생태계의 정수.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Unified Product Engineering and Runtime Resilience" — 설계에서 배포까지의 전 과정에 자동화된 검증(Linting, Testing)과 실시간 관측성(Monitoring)을 결합하여, 대규모 트래픽에서도 흔들림 없는 사용자 경험을 제공하는 패턴.
+- **2025년 아키텍처의 4대 기둥:**
+    - **Server-First Hybrid Rendering:** Next.js App Router 등을 활용하여 서버와 클라이언트의 역할을 재정의하고 LCP를 극대화.
+    - **Domain-Driven Design (DDD):** FSD(Feature-Sliced Design) 패턴을 통해 대규모 코드베이스의 복잡도 제어.
+    - **Zero-Runtime Styling:** Tailwind CSS v4나 CSS-in-JS의 정적 추출을 통해 런타임 오버헤드 제거.
+    - **Proactive Observability:** 에러 발생 후 대응이 아닌, Sentry/LogRocket 등을 통해 사용자 마찰 지점을 선제적으로 식별.
+- **의의:** 프런트엔드를 단순한 '화면'이 아닌 하나의 독립적이고 견고한 '분산 시스템'으로 격상시킴.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 무거운 JS 라이브러리를 자유롭게 추가했으나, 현대 정책은 '번들 크기 최소화 정책'과 '서버 컴포넌트 우선 정책'을 통해 브라우저 부하를 줄이는 정책을 최우선으로 함.
+- **정책 변화:** Antigravity 프로젝트는 모든 모듈 설계 시 'Offline-first'와 'Accessiblity-by-default' 정책을 내재화하며, 인공지능 에이전트의 지식 수집 효율을 위한 'Machine-Readable Metadata' 포함 정책을 의무화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Large-scale-Application-Architecture-Patterns]], [[Nextjs-App-Router-Architecture]], [[Core-Web-Vitals-Metrics]], [[Frontend-Team-Collaboration-and-Governance]]
+- **Raw Source:** [[00_Raw/Modern Frontend Engineering Architecture.md]]
@@ -0,0 +1,30 @@
+---
+id: UX-DESIGN-2025-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [web-design, ux, 2025, best-practices, accessibility, performance, ai-personalization, dark-mode]
+last_reinforced: 2026-04-26
+---
+
+# [[Modern Web Design Best Practices 2025 (현대 웹 디자인 모범 사례 2025)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "시각적 화려함을 넘어 데이터에 기반한 개인화와 극한의 사용 편의성을 결합하고, 인간 사용자와 AI 크롤러 모두에게 명확한 가치를 전달하는 '지능형 인터페이스'를 구축하라" — 2025년 웹 디자인의 기술적/미학적 표준 가이드라인.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Intent-Driven Personalization and Frictionless Interaction" — 사용자의 과거 행동과 현재 맥락을 파악하여 인터페이스를 동적으로 재구성하고, 목표 달성까지의 클릭 수와 인지적 부하를 최소화하는 패턴.
+- **2025년 핵심 베스트 프랙티스:**
+    - **Adaptive UX:** AI를 활용하여 사용자 맞춤형 레이아웃, 추천 상품, 온보딩 흐름을 실시간 제공.
+    - **Micro-interactions & Motion:** 상태 변화를 설명하는 유의미한 애니메이션을 통해 시스템의 생동감과 신뢰도 향상.
+    - **Advanced Accessibility (WCAG 2.2):** 고대비 모드, 포커스 상태 명확화 등 모든 사용자층을 포용하는 설계 내재화.
+    - **Dark Mode First:** 단순 옵션을 넘어 눈의 피로도를 낮추고 배터리를 절약하는 다크 모드 기반의 고도화된 컬러 팔레트 운영.
+    - **Privacy-Centric Design:** 사용자 데이터를 존중하고 투명하게 관리함을 시각적으로 증명하는 신뢰 구축 디자인.
+- **의의:** 디자인이 단순히 '보기 좋은 것'을 넘어 비즈니스 수익(전환율)과 브랜드 로열티를 결정짓는 핵심 전략 자산임을 증명함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 정적인 '완성된 시안'을 중시했으나, 현대 정책은 사용자에 따라 변하는 '유동적 인터페이스 정책'으로 전환됨. 또한 화려한 그래픽보다 'Core Web Vitals 성능 정책'을 디자인의 상위 제약 조건으로 수용함.
+- **정책 변화:** Antigravity 프로젝트는 모든 디자인 결과물에 대해 'Accessibility Score'와 'Performance Impact' 분석 보고서 제출 정책을 의무화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Modern-Frontend-Engineering-Architecture]], [[UX-Design-Principles]], [[Inclusive-Design-and-UX]], [[AI-Personalization-and-Adaptive-UX]], [[A-B-Testing-and-Data-Driven-UX]]
+- **Raw Source:** [[00_Raw/Modern Web Design Best Practices for 2025.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-ERR-BOUND-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [react, error-handling, error-boundaries, observability, fallback-ui, ux, resilience]
+last_reinforced: 2026-04-26
+---
+
+# [[React Error Boundaries and Handling (React 에러 경계 및 예외 처리)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "애플리케이션의 특정 부분에서 발생한 예외가 전체 시스템을 붕괴시키지 않도록 격리하고, 사용자에게는 우아한 폴백(Fallback) UI를 제공하여 서비스의 회복 탄력성을 확보하라" — 선언적 에러 처리를 통해 런타임 안정성을 극대화하는 React의 핵심 안전 장치.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Graceful Degradation and Isolated Resilience" — 하위 컴포넌트 트리에서 발생한 에러를 포착하여 에러 로그를 기록하고, 깨진 컴포넌트 대신 미리 준비된 대체 UI를 렌더링하는 패턴.
+- **2025년 기준 에러 관리 핵심 요소:**
+    - **Declarative Error Boundaries:** 클래스 컴포넌트나 `react-error-boundary` 라이브러리를 사용하여 에러 발생 구역을 명확히 선언.
+    - **Fallback UI Strategy:** 스켈레톤 화면이나 "잠시 후 다시 시도해 주세요" 메시지 등 사용자 경험을 저해하지 않는 대체 화면 구성.
+    - **Observability Integration:** Sentry, LogRocket 등을 통해 에러의 맥락(Stack Trace, 사용자 세션)을 자동으로 수집 및 분석.
+    - **Recovery Loops:** 에러 발생 시 사용자가 직접 초기화(Reset)하거나 시스템이 자동 재시도하는 매커니즘 구축.
+- **의의:** 예측 불가능한 런타임 에러로부터 전체 앱의 화이트아웃(White-out) 현상을 방지하고 비즈니스 연속성을 보장함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 `try-catch`를 남발하여 명령형으로 에러를 처리했으나, 현대 정책은 컴포넌트 레벨의 선언적 에러 경계(Error Boundary) 사용을 원칙으로 함. 또한 비동기 에러(API 호출 등)는 에러 경계에서 기본적으로 잡히지 않으므로, 전역 에러 핸들러나 별도의 상태 관리 정책이 병행되어야 함.
+- **정책 변화:** Antigravity 프로젝트는 모든 주요 도메인 엔티티(결제, 인증, 콘텐츠)를 독립된 에러 경계로 감싸는 'Fault-Tolerant UI' 아키텍처를 강제하며, 모든 치명적 에러는 0.5초 이내에 모니터링 시스템에 리포팅되어야 함.
+
+## 🔗 지식 연결 (Graph)
+- [[React-Architecture]], [[UX-Design-Principles]], [[Sentry-LogRocket-Monitoring]], [[Frontend-Performance-Optimization-Guide]]
+- **Raw Source:** [[00_Raw/React Error Boundaries.md]], [[00_Raw/Error Handling in 2025.md]]
@@ -0,0 +1,30 @@
+---
+id: FE-REFACT-LEGACY-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [react, refactoring, legacy-code, technical-debt, hooks, typescript, modularity]
+last_reinforced: 2026-04-26
+---
+
+# [[Refactoring Legacy React Codebases (레거시 React 코드 리팩토링)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "코드를 한꺼번에 뒤엎으려는 유혹을 뿌리치고, 정상 작동하는 기능을 보호하며 점진적으로 현대적인 패턴(Hooks, TS, Modularity)으로 이식하여 시스템의 부패를 멈춰라" — 기술 부채를 자산으로 전환하는 전략적 코드 현대화 프로세스.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Incremental Modernization and Safe Extraction" — 대규모 변경 대신, 컴포넌트 하나씩 또는 로직 한 단위씩을 추출하여 최신 React 패턴으로 교체하고 테스트로 검증하는 패턴.
+- **리팩토링 핵심 단계:**
+    - **Identify Technical Debt:** 거대 컴포넌트(God Components), 복잡한 클래스 생명주기 로직, 타입 정의 부재 식별.
+    - **Establish Safety Net:** 변경 전 기존 동작을 검증할 수 있는 단위/통합 테스트 코드 확보.
+    - **Logic Extraction (Hooks):** 클래스 컴포넌트의 복잡한 로직을 커스텀 훅으로 추출하여 기능과 UI 분리.
+    - **Incremental TypeScript Adoption:** 가장 핵심적인 데이터 모델부터 점진적으로 타입을 적용.
+    - **Component Decomposition:** 거대 컴포넌트를 작고 명확한 책임을 가진 하위 컴포넌트로 분해.
+- **의의:** 서비스 중단 없이 코드의 유지보수성을 향상시키고, 최신 에코시스템(Next.js, Server Components 등)으로의 마이그레이션 기반을 마련함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 '빅뱅 방식(전체 재작성)'이 효율적이라고 생각하기도 했으나, 현대 정책은 리스크 관리 차원에서 '점진적 리팩토링 정책'을 압도적으로 선호함.
+- **정책 변화:** Antigravity 프로젝트는 모든 신규 기능 개발 시 관련 레거시 코드의 10% 리팩토링을 병행하는 'Boy Scout Rule' 정책을 시행하며, 리팩토링 시 테스트 커버리지 유지를 의무화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Clean-Code-Principles]], [[Custom-Hooks-Patterns]], [[Technical-Debt-Management]], [[Frontend-Architecture-and-Folder-Structure]]
+- **Raw Source:** [[00_Raw/Legacy React Code Refactoring.md]], [[00_Raw/Refactoring Legacy React Codebases.md]]
@@ -0,0 +1,29 @@
+---
+id: FE-GATSBY-SSG-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [gatsby, ssg, react, graphql, seo, web-performance, static-site-generation]
+last_reinforced: 2026-04-26
+---
+
+# [[Static Site Generation with Gatsby (Gatsby를 활용한 정적 사이트 생성)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "빌드 타임에 모든 데이터를 수집하여 완벽한 HTML로 구워내고, 브라우저가 실행되기도 전에 콘텐츠를 즉시 노출하는 극강의 SEO 최적화 아키텍처를 구축하라" — React와 GraphQL을 결합하여 콘텐츠 중심 웹사이트의 성능 한계를 돌파한 정적 사이트 생성기(SSG).
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Pre-baked Content and GraphQL Data Mesh" — CMS, 마크다운, 데이터베이스 등 흩어진 데이터를 GraphQL로 통합하여 빌드 시점에 정적 자산으로 변환하는 패턴.
+- **Gatsby의 핵심 강점:**
+    - **Extreme Performance:** 빌드 시 최적화된 HTML/CSS/JS 생성. 이미지 최적화 플러그인을 통한 LCP 극대화.
+    - **GraphQL Unified Layer:** 다양한 소스의 데이터를 하나의 쿼리 언어로 일관되게 처리.
+    - **Rich Plugin Ecosystem:** SEO, Progressive Web App(PWA), 분석 도구 등을 플러그인만으로 손쉽게 확장.
+    - **Security:** 서버 측 실행 로직이 없어 해킹 위협으로부터 상대적으로 안전함.
+- **의의:** 블로그, 문서 사이트, 마케팅 페이지 등 콘텐츠 업데이트 빈도가 낮고 검색 엔진 노출이 최우선인 비즈니스에 최상의 솔루션 제공.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 과거에는 모든 웹 앱을 클라이언트 사이드(CSR)로 구축했으나, Gatsby 정책은 '미리 구워진(Pre-rendered)' HTML을 제공하는 SSG 정책을 통해 성능과 SEO의 모순을 해결함. 다만 실시간 데이터 변경이 잦은 서비스에는 적합하지 않은 정책임.
+- **정책 변화:** Antigravity 프로젝트는 대내외 기술 블로그 및 문서 사이트 구축 시 Gatsby 아키텍처를 표준 정책으로 채택하며, 빌드 시간을 단축하기 위한 증분 빌드(Incremental Builds) 설정을 의무화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Static-Site-Generation-SSG]], [[SEO-Foundations]], [[Core-Web-Vitals-Metrics]], [[React-Architecture]]
+- **Raw Source:** [[00_Raw/Gatsby.md]]