chore(wiki): reinforce knowledge batch #11-#12 (240 docs milestone)

00_Raw/2026-04-26-Skybound_Combat_SFX_Weapon_Nerf_Background_Scroll_Stability.md

@@ -0,0 +1,177 @@
+# Skybound Combat SFX Weapon Nerf Background Scroll Stability
+
+작성일: 2026-04-26 15:29 KST
+
+## 요청 요약
+
+- 모든 스킬의 피격 효과음이 없는 것 같다.
+- 적기의 탄환에 플레이어가 맞았을 때 피격음이 필요하다.
+- 적기가 탄환을 발사할 때도 발사음이 필요하다.
+- Stage 1~3 플레이 기준 무기 업그레이드가 너무 쉽게 강해져 Stage 1 클리어 후 천하무적처럼 느껴진다.
+- Stage 8까지 있는 게임인데 초반 성장 상향폭이 심각하게 오버스펙이다.
+- 배경 스크롤 속도가 너무 느리므로 약 3배 빠르게 조정해 속도감을 높이고 싶다.
+- 특정 스킬 사용 시 배경이 위아래로 튀는 느낌이 있어 랙처럼 보인다.
+- 스킬과 상관없이 배경은 자연스럽고 일정하게 움직여야 한다.
+
+## 핵심 문제
+
+이번 문제는 세 가지 시스템이 동시에 연결되어 있었다.
+
+### Combat SFX 라우팅 누락
+
+게임 내부에서는 `hit`, `crit-hit`, `explosion_medium`, `enemy-fire`, `bomb-trigger` 같은 SFX 이벤트 이름이 발생하고 있었다.
+
+하지만 일부 이벤트 이름은 실제 wav 버퍼가 없거나 절차적 사운드 함수로 연결되지 않았다.
+
+그 결과:
+
+- 스킬이 적을 맞혀도 피격 사운드가 거의 들리지 않았다.
+- 적 탄환 발사음이 없었다.
+- 플레이어 피격음도 상황별로 충분히 구분되지 않았다.
+
+### 성장 곡선 과상승
+
+무기 레벨업과 패시브 효과가 초반부터 너무 큰 폭으로 상승했다.
+
+특히 다음 요소가 초반 무적감을 만들었다.
+
+- 무기 데이터의 `perLevel` 증가폭
+- Fire Rate / Damage Amp / Cooldown Reduce 패시브
+- 일부 Legacy 무기 시스템의 별도 성장 수치
+- EVO 보너스의 과도한 배율
+
+Stage 1~3에서는 사용자가 빌드 방향을 잡는 단계여야 하는데, 기존 수치는 이미 엔드게임급 효율을 너무 빨리 제공했다.
+
+### 배경 스크롤과 화면 흔들림 결합
+
+기존 렌더링 순서는 화면 흔들림을 먼저 적용한 뒤 배경을 그렸다.
+
+그래서 스킬이나 크리티컬이 `shakeAmount`를 크게 만들면 배경까지 같이 흔들렸다.
+
+또한 배경 스크롤 속도가 `tensionLevel`과 연결되어 있어 상황에 따라 속도가 미세하게 바뀌며 덜 안정적으로 보일 수 있었다.
+
+## 적용한 변경
+
+### Combat SFX 절차적 라우팅 추가
+
+`AudioManager`에 다음 SFX 라우팅을 추가했다.
+
+- `hit`
+- `skill-impact`
+- `deep-hit`
+- `impact_heavy`
+- `crit-hit`
+- `enemy-fire`
+- `sniper-shot`
+- `enemy-explode`
+- `explosion_medium`
+- `nova-burst`
+- `nova-guardian`
+- `gatling-fire`
+- `drone-fire`
+
+외부 wav 파일이 없어도 Web Audio 기반 절차적 사운드가 재생되도록 했다.
+
+또한 너무 많은 타격음이 동시에 나지 않도록 짧은 throttle을 넣었다.
+
+### 스킬별 피격/발사 이벤트 보강
+
+`WeaponBehaviorEngine`에 스킬 충돌 사운드 이벤트를 추가했다.
+
+적용 대상:
+
+- Beam 계열 타격
+- Orbit 계열 접촉 타격
+- Auto Target 계열 타격
+- Zone 계열 지속 피해
+- Zone 폭발 피해
+- Drone 발사
+- Data-driven projectile 발사
+
+`CombatSystem`에는 적기 발사 시 `enemy-fire` 이벤트를 추가했다.
+
+플레이어 피격은 `PLAYER_HIT` 이벤트의 `sfx` 값에 따라 가벼운 피격음 또는 깊은 피격음으로 나눠 재생하도록 했다.
+
+### 무기/패시브 성장폭 대폭 감소
+
+`weaponBehaviors.resolveValue()`에서 레벨당 증가폭을 42%만 반영하도록 조정했다.
+
+의도:
+
+- 레벨업이 빌드 확장으로 느껴지되, 초반부터 적을 화면 밖에서 삭제하지 않게 한다.
+- Stage 1~3에서 성장 여지를 남기고 Stage 8까지 지속될 곡선을 만든다.
+
+추가로 다음 수치도 낮췄다.
+
+- Fire Rate Boost: +10% → +4% per level
+- Damage Amp: +10% → +4% per level
+- Cooldown Reduce: -6% → -2.5% per level
+- Armor Plating: -5% → -2.5% per level
+- Crit Scanner: +5% → +2% per level
+- Speed Boost: +8% → +4% per level
+
+EVO 보너스도 전반적으로 낮춰, 진화가 강력한 선택지는 되지만 즉시 게임을 끝내는 수준이 되지 않게 했다.
+
+### Legacy 무기 성장도 조정
+
+별도 코드로 동작하던 Legacy 무기도 함께 낮췄다.
+
+적용:
+
+- Energy Shield 개수/속도 감소
+- Gatling cooldown/damage/speed 하향
+- Plasma Guard 피해량 하향
+- Hyper Laser fire gap/damage 하향
+- Nova Burst damage/radius/knockback/shake 하향
+
+의도:
+
+- Data-driven 무기만 하향하고 Legacy 무기가 계속 오버스펙으로 남는 문제를 막는다.
+
+### 배경 스크롤 3배 가속 및 안정화
+
+배경 속도를 기존 대비 약 3배 빠르게 조정했다.
+
+기존:
+
+- stage speed + tension 기반
+- 화면 흔들림 적용 후 배경 렌더링
+
+변경:
+
+- stage speed 기반의 일정한 스크롤
+- `tensionLevel`과 분리
+- 배경을 먼저 렌더링
+- 이후 적/탄막/플레이어/스킬 레이어에만 shake 적용
+
+의도:
+
+- 스킬 사용과 상관없이 배경은 항상 자연스럽고 일정하게 흐른다.
+- 큰 스킬이나 크리티컬에도 배경이 위아래로 튀지 않는다.
+- 비행 속도감이 기존보다 강하게 느껴진다.
+
+## 수정 파일
+
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/audio/AudioManager.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/hooks/useGameEngine.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/WeaponBehaviorEngine.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/CombatSystem.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/config/weaponBehaviors.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/ProgressionSystem.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/ModularWeaponSystem.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/GameRenderer.ts`
+
+## 검증
+
+- `npm run build` 성공
+- 출력 디렉터리: `dist/37`
+
+## 후속 플레이테스트 체크 포인트
+
+- 각 스킬이 적에게 피해를 줄 때 피격음이 들리는지 확인한다.
+- 적기가 발사할 때 적당한 발사음이 들리는지 확인한다.
+- 플레이어가 적 탄환에 맞을 때 피격음이 분명히 들리는지 확인한다.
+- Stage 1 클리어 후에도 Stage 2~3에서 긴장감이 유지되는지 확인한다.
+- 무기 업그레이드가 “강해지지만 압도적이지 않은” 정도인지 확인한다.
+- 배경 스크롤이 기존보다 빠르게 느껴지는지 확인한다.
+- Nova Burst 등 큰 스킬 사용 시 배경이 흔들리지 않고, 전투 오브젝트만 흔들리는지 확인한다.

00_Raw/2026-04-26-Skybound_HUD_Dock_Button_Fit_and_NoScroll_Tactical_Upgrade.md

@@ -0,0 +1,77 @@
+# Skybound HUD Dock Button Fit and NoScroll Tactical Upgrade
+
+작성일: 2026-04-26 15:07 KST
+
+## 요청 요약
+
+- 사이드 HUD 하단의 전체 화면, 설정, 일시 정지 버튼 3개가 백판 밖으로 벗어난다.
+- 버튼 3개가 백판 안에 잘 정렬되도록 크기를 줄여야 한다.
+- Tactical Upgrade 화면은 크게 보이는 점은 좋다.
+- 다만 기본 선택지 전체가 스크롤 없이 한 화면에 보여야 한다.
+
+## 핵심 문제
+
+사이드 도크의 하단 버튼은 도크 폭보다 버튼 3개의 총 너비가 커지면서 백판을 침범했다.
+
+Tactical Upgrade 모달은 이전 패스에서 텍스트 잘림을 막기 위해 카드가 내용 기반으로 커지도록 바꿨지만, 그 결과 3개 옵션과 `Skip Upgrade`를 모두 보여주기에는 세로 밀도가 낮아졌다.
+
+즉 이번 문제는 다음 두 가지였다.
+
+- HUD 버튼은 고정 폭 백판 안에 맞지 않았다.
+- 레벨업 카드들은 읽기 좋지만 너무 커서 4번째 선택지가 아래로 밀렸다.
+
+## 적용한 변경
+
+### Side Dock 하단 버튼 정렬
+
+Desktop Side Dock 상태에서 하단 utility 버튼 영역을 3칸 grid로 고정했다.
+
+변경:
+
+- 버튼 영역을 `repeat(3, 28px)`로 고정
+- 버튼 크기 28px로 축소
+- gap과 padding 축소
+- 아이콘 크기 축소
+- 백판 내부에서 overflow가 생기지 않도록 처리
+
+의도:
+
+- 전체 화면, 설정, 일시 정지 버튼이 하나의 정돈된 컨트롤 그룹처럼 보이게 한다.
+- 사이드 도크의 백판 밖으로 버튼이 튀어나오지 않게 한다.
+
+### Tactical Upgrade No-Scroll Layout
+
+기본 선택지 구성인 `3개 스킬 카드 + Skip Upgrade`가 스크롤 없이 한 화면에 들어오도록 조정했다.
+
+변경:
+
+- 모달의 전체 큰 실루엣은 유지
+- 헤더와 슬롯 배지의 세로 여백 축소
+- 카드 높이와 padding 축소
+- 아이콘 박스 크기 축소
+- 타입 태그와 추천 사유 배지 크기 축소
+- 작은 화면에서는 보조 설명만 줄이고 핵심 정보는 유지
+- 기본 상태에서 `skill-grid`는 스크롤 없이 표시되도록 처리
+
+의도:
+
+- Tactical Upgrade 화면은 크게 유지하되, 선택 가능한 모든 항목을 한눈에 보여준다.
+- 사용자가 스크롤 여부를 신경 쓰지 않고 바로 선택할 수 있게 한다.
+- 텍스트 잘림을 다시 만들지 않으면서 세로 밀도를 높인다.
+
+## 수정 파일
+
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/LevelUpModal.css`
+
+## 검증
+
+- `npm run build` 성공
+- 출력 디렉터리: `dist/35`
+
+## 후속 플레이테스트 체크 포인트
+
+- 사이드 도크 하단 버튼 3개가 백판 안에 균등하게 들어가는지 확인한다.
+- Tactical Upgrade에서 3개 카드와 `Skip Upgrade`가 스크롤 없이 보이는지 확인한다.
+- 작은 화면에서 카드 텍스트가 다시 잘리지 않는지 확인한다.
+- 보조 설명이 줄어도 선택에 필요한 정보가 충분한지 확인한다.

00_Raw/2026-04-26-Skybound_Tactical_Bomb_SFX_Routing_Fix.md

@@ -0,0 +1,69 @@
+# Skybound Tactical Bomb SFX Routing Fix
+
+작성일: 2026-04-26 15:14 KST
+
+## 요청 요약
+
+- 폭탄을 사용할 때 효과음이 들리지 않는다.
+- 시각 효과는 있는데 폭탄 사용의 타격감이 부족하다.
+
+## 핵심 문제
+
+폭탄 사운드 자체는 `AudioManager.playTacticalBomb()`에 이미 절차적 사운드로 구현되어 있었다.
+
+하지만 실제 폭탄 사용 시 `PlayerSystem`은 `bomb-trigger`라는 SFX 이벤트를 발생시키고 있었고, `useGameEngine`의 SFX 라우터는 이 이벤트를 별도로 처리하지 않았다.
+
+그 결과:
+
+- `bomb-trigger`가 일반 `playSFX('bomb-trigger')`로 전달되었다.
+- `bomb-trigger`라는 이름의 로드된 오디오 버퍼가 없었다.
+- 따라서 폭탄 발동 시 실제 사운드는 재생되지 않았다.
+
+## 적용한 변경
+
+### 폭탄 이벤트 직접 라우팅
+
+`useGameEngine`의 SFX 이벤트 처리에 `bomb-trigger` 분기를 추가했다.
+
+변경:
+
+- `bomb-trigger` 이벤트 수신 시 `audioManager.playTacticalBomb()` 직접 호출
+
+의도:
+
+- 폭탄 사용 즉시 절차적 폭발 사운드가 재생되게 한다.
+- 외부 wav 파일 없이도 일관된 폭탄 사운드를 보장한다.
+
+### AudioManager fallback 라우팅 추가
+
+`AudioManager.playSFX()`에도 `bomb-trigger`와 `tactical-bomb` 이름을 폭탄 사운드로 라우팅했다.
+
+의도:
+
+- 다른 시스템에서 `playSFX('bomb-trigger')`를 직접 호출하더라도 무음이 되지 않게 한다.
+- 폭탄 사운드 이벤트 이름이 여러 경로에서 사용되어도 안전하게 동작하게 한다.
+
+### Mute 처리 보강
+
+`playTacticalBomb()`에 mute 상태 체크를 추가했다.
+
+의도:
+
+- 다른 SFX와 동일하게 mute 상태에서는 폭탄 사운드도 재생되지 않게 한다.
+
+## 수정 파일
+
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/audio/AudioManager.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/hooks/useGameEngine.ts`
+
+## 검증
+
+- `npm run build` 성공
+- 출력 디렉터리: `dist/36`
+
+## 후속 플레이테스트 체크 포인트
+
+- `Space` 또는 폭탄 입력 시 폭발음이 즉시 들리는지 확인한다.
+- 폭탄 시각 효과와 사운드 타이밍이 잘 맞는지 확인한다.
+- 폭탄 사운드가 너무 크거나 BGM을 과하게 덮지 않는지 확인한다.
+- mute 상태에서 폭탄 사운드가 재생되지 않는지 확인한다.

00_Raw/AI Answer Engine Optimization.md

@@ -0,0 +1,19 @@
+# [[AI Answer Engine Optimization]]
+
+## 📌 Brief Summary
+AI Answer Engine Optimization(AEO)은 기존의 전통적인 검색 엔진 결과 페이지(SERP) 전략을 넘어 ChatGPT, Gemini, Perplexity와 같은 AI 답변 엔진(Answer Engines) 및 생성형 AI 검색 시스템에 맞춰 웹사이트를 최적화하는 최신 SEO 접근 방식입니다[1, 2]. AI 크롤러가 콘텐츠를 효과적으로 추출하고 인용할 수 있도록 시맨틱 HTML, 구조화된 데이터, 그리고 사전 렌더링된 HTML을 제공하여 머신러닝 모델의 이해도를 높이는 것이 핵심입니다[3, 4]. 이는 JavaScript 실행을 생략하는 대규모 AI 에이전트의 특성에 대응하여 브랜드의 콘텐츠 가시성을 확보하는 데 필수적인 과정입니다[2, 3].
+
+## 📖 Core Content
+* **전통적 SERP에서 AEO로의 진화:** 2026년의 웹사이트 최적화 과제는 단순한 구글의 '블루 링크' 노출을 넘어 AI 기반 콘텐츠 검색 시스템을 충족시키는 방향으로 확장되었습니다[2, 5]. 방대한 규모로 작동하는 AI 모델 훈련용 크롤러(예: GPTBot, ClaudeBot 등)는 리소스 비용 문제로 JavaScript(JS)를 실행하지 않는 경우가 많습니다[3]. 따라서 JS 실행 벽(Execution Wall) 뒤에 갇힌 콘텐츠는 AI 오버뷰(SGE)에 포함되거나 답변의 출처로 인용되지 못합니다[3].
+* **사전 렌더링된 HTML의 제공:** AI 검색 엔진 최적화의 새로운 핵심 지주는 AI 봇이 사이트의 콘텐츠를 정확하게 합성할 수 있도록 고품질의 '사전 렌더링된 HTML(Pre-rendered HTML)'을 명시적으로 제공하는 것입니다[6]. 이는 클라이언트 측 렌더링(CSR)의 한계를 극복하기 위해 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 도입해야 함을 의미합니다[3, 6].
+* **시맨틱 HTML을 통한 구조화:** AI 크롤러가 핵심 콘텐츠와 단순 내비게이션 크롬(Navigation Chrome)을 쉽게 구분할 수 있도록 돕기 위해 `<main>`, `<article>`, `<header>`와 같은 시맨틱 HTML 태그를 활용하는 깔끔한 구조(Clean structure)가 요구됩니다[4].
+* **구조화된 데이터(Schema Markup) 적용:** Schema.org의 JSON-LD 마크업을 구현하면 AI 크롤러에게 페이지에 포함된 내용이 무엇인지 명시적인 신호를 제공할 수 있습니다[4]. 이는 특정 섹션이 사용자의 질문에 대한 정확한 답변임을 구글 및 AI 엔진에 알림으로써 AI 오버뷰에 채택될 기회를 크게 높여줍니다[7].
+* **직접적인 답변 포맷팅(Direct Answer Formatting):** 콘텐츠를 명확한 질문(H2 태그 활용)과 그에 따르는 간결한 답변 구조로 조직화하면, AI 생성 오버뷰에서 해당 페이지가 직접적인 인용 출처로 선택될 가능성이 증가합니다[4].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Generative Engine Optimization]], [[Server-Side Rendering (SSR)]], [[Semantic HTML]], [[Structured Data Markup]]
+- **Projects/Contexts:** [[SEO for Single Page Applications]], [[Modern Web Design Best Practices]]
+- **Contradictions/Notes:** 싱글 페이지 애플리케이션(SPA)의 기본 아키텍처인 순수 클라이언트 사이드 렌더링(CSR) 방식은 사용자에게는 빠르고 유연한 인터랙션을 제공하지만, JavaScript 실행 비용을 아끼려는 AI 크롤러에게는 콘텐츠를 노출시키지 못하는 구조적인 모순을 낳습니다. 따라서 소스들은 AI 엔진의 원활한 크롤링과 인용을 보장하기 위해 반드시 SSR, SSG 등의 서버 렌더링 접근법이 병행되어야 한다고 강조합니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/Accessibility Compliance (ADA-EAA).md

@@ -0,0 +1,31 @@
+# [[Accessibility Compliance (ADA/EAA)]]
+
+## 📌 Brief Summary
+웹 접근성 준수(Accessibility Compliance)는 시각, 청각, 신체적 및 인지적 장애를 가진 모든 사용자가 웹사이트, 모바일 앱 등 디지털 자산에 동등하게 접근하고 이용할 수 있도록 보장하는 필수적인 과정입니다 [1, 2]. 미국의 미국 장애인법(ADA)과 유럽의 유럽 접근성법(EAA) 등의 규제는 W3C가 제정한 웹 콘텐츠 접근성 지침(WCAG)을 법적 및 기술적 표준으로 채택하고 있습니다 [3, 4]. 최신 웹 아키텍처 및 UX 설계에서 접근성 준수는 단순한 법적 의무를 넘어 검색 엔진 최적화(SEO) 향상, 사용자 경험 강화, 그리고 브랜드 신뢰도 구축을 위한 핵심 모범 사례로 자리 잡았습니다 [1, 5, 6].
+
+## 📖 Core Content
+
+**법적 요구사항 및 주요 규제 동향**
+*   **미국 장애인법(ADA):** 미국 법무부(DOJ)는 ADA Title II에 따라 2026년 4월 24일까지 주 및 지방 정부, 공공 기관의 웹사이트가 WCAG 2.1 Level AA 표준을 의무적으로 준수하도록 규정했습니다 [7-9]. 민간 기업의 경우에도 명시적인 법적 규정은 아니지만, 이 기준이 ADA 소송을 피하기 위한 실질적인 표준으로 적용되고 있습니다 [10, 11].
+*   **유럽 접근성법(EAA):** 2025년 6월 28일부터 발효된 EAA에 따라 유럽 내에서 전자상거래, 뱅킹, 통신 및 교통 등의 서비스를 제공하는 기업은 WCAG 2.1 Level AA에 매핑되는 EN 301 549 표준을 반드시 충족해야 합니다 [4, 12].
+*   웹사이트가 규제를 준수하지 않을 경우 법적 소송의 위험에 직면하게 되며, 실제로 2025년 상반기 ADA 웹사이트 관련 소송 건수는 전년 대비 37% 증가했습니다 [9]. 
+
+**접근성의 핵심 원칙 (POUR) 및 WCAG 요구사항**
+*   **POUR 원칙:** 모든 WCAG 표준은 인지 가능성(Perceivable), 운용 가능성(Operable), 이해 가능성(Understandable), 견고성(Robust)이라는 4가지 원칙에 기반을 두고 설계됩니다 [13, 14].
+*   **WCAG 2.1 주요 기준:** 시각 장애인 및 저시력자를 위한 스크린 리더 호환 및 의미 있는 대체 텍스트(Alt Text) 제공, 배경과 텍스트 간 최소 4.5:1의 색상 대비 유지, 마우스 없이 키보드만으로 모든 인터랙티브 요소 조작 가능, 오디오/비디오 콘텐츠에 대한 캡션 및 대본 제공 등이 필수적입니다 [15-18].
+*   **WCAG 2.2 신규 기준 (2023년 도입):** 인지 장애 및 모바일 기기 사용자를 위해 기준이 더욱 강화되었습니다. 겹치는 요소에 의해 포커스가 가려지지 않게 하는 'Focus Not Obscured', 명확한 포커스 표시인 'Focus Appearance', 복잡한 드래그 동작의 대안을 제공하는 'Dragging Movements', 암기력에 의존하지 않는 로그인 수단을 제공하는 'Accessible Authentication', 중복 입력을 줄이는 'Redundant Entry' 등의 9가지 새로운 기준이 추가되었습니다 [19-23].
+
+**접근성 구현을 위한 웹 디자인 모범 사례**
+*   접근성은 디자인 프로세스의 초기 단계부터 고려되어야 하며, 자동화된 검사 도구(예: WAVE, axe)와 스크린 리더(NVDA, JAWS)를 통한 수동 테스트를 병행하는 포괄적인 감사가 필요합니다 [15, 24, 25].
+*   버튼 색상의 고대비 적용, 명확한 제목 계층 구조, 그리고 키보드 내비게이션 최적화는 장애인뿐만 아니라 느린 인터넷 환경의 사용자나 일시적 장애를 겪는 모든 사용자의 경험을 향상시킵니다 [26, 27].
+*   서드파티 벤더가 제공하는 도구(결제 포털, 등록 시스템 등) 역시 WCAG 준수 여부를 확인하여 계약에 포함시켜야 접근성 누락을 방지할 수 있습니다 [28].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Web Content Accessibility Guidelines (WCAG)]], [[SEO (Search Engine Optimization)]], [[Visual Hierarchy]], [[User-Centered Design Approach]]
+- **Projects/Contexts:** 
+  - [[Telemedicine Platform Redesign]]: 원격 의료 플랫폼에서 환자와 의료진을 위해 HIPAA 준수와 더불어 스크린 리더 호환성, 고대비 모드, 다국어 지원 등을 구축해 접근성 및 사용성을 크게 개선한 사례 [29, 30].
+  - [[Online Learning Management System]]: 하이브리드 학습 환경으로 전환하는 대학교에서 시각장애인용 스크린 리더 호환성 및 키보드 내비게이션 등 포괄적인 접근성 기능을 LMS에 통합하여 94%의 접근성 준수 등급을 달성한 사례 [31, 32].
+- **Contradictions/Notes:** 웹사이트에 단순히 "접근성 위젯(accessibility widgets)"이나 오버레이를 추가하는 것은 근본적인 해결책이 될 수 없습니다. 2025년 상반기 ADA 접근성 소송의 22.6%가 이러한 자동화 위젯을 설치한 웹사이트를 대상으로 제기되었으므로, 코드 레벨(Code level)에서의 직접적인 개선 및 구조적 수정이 법적 위험을 줄이는 확실한 방법입니다 [33, 34].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Code Splitting.md

@@ -0,0 +1,22 @@
+# [[Code Splitting]]
+
+## 📌 Brief Summary
+코드 스플리팅(Code Splitting)은 자바스크립트 애플리케이션의 거대한 단일 번들을 더 작은 청크(chunk) 단위로 분할하여 필요할 때만 비동기적으로 로드(on-demand)하도록 만드는 최적화 기법입니다 [1, 2]. 이를 통해 초기 자바스크립트 번들 크기를 50~100KB 수준으로 줄여 사용자가 의미 있는 콘텐츠를 더 빨리 볼 수 있게 해줍니다 [3]. 결과적으로 초기 로드 시간, TTFB(Time to First Byte), TTI(Time to Interactive)를 대폭 단축하여 코어 웹 바이탈(Core Web Vitals) 및 검색 엔진 최적화(SEO) 성능을 크게 향상시킵니다 [4, 5].
+
+## 📖 Core Content
+*   **기본 작동 원리와 React API 적용:**
+    최신 React 애플리케이션에서는 `React.lazy`와 `Suspense` API를 통해 손쉽게 코드 스플리팅과 지연 로딩(Lazy Loading)을 구현할 수 있습니다 [4]. `React.lazy`는 동적 가져오기(dynamic import)를 통해 컴포넌트를 일반적인 렌더링 방식으로 처리하게 해주며, `Suspense`는 해당 컴포넌트가 로드될 때까지 대기하는 동안 스켈레톤 화면이나 로딩 스피너와 같은 대체(fallback) UI를 제공합니다 [4, 6].
+*   **라우트 및 컴포넌트 기반 분할 (Route & Component-level Splitting):**
+    가장 효과적이고 일반적으로 권장되는 분할 지점은 라우트(Route) 단위입니다 [7]. 사용자가 특정 페이지로 이동할 때만 해당 라우트의 코드를 로드함으로써 초기 번들 크기를 급격히 줄일 수 있으며, React Router의 프레임워크 모드에서는 라우트 기반 분할이 기본적으로 자동 적용됩니다 [1, 8]. 또한, 차트, 에디터, 탭, 모달 등 초기 화면에 당장 보이지 않거나 용량이 큰 UI 요소에 대해서는 컴포넌트 수준의 분할을 추가로 적용할 수 있습니다 [7, 9].
+*   **성능 지표(Core Web Vitals)와 SEO에 미치는 영향:**
+    분할되지 않은 2MB 이상의 거대한 자바스크립트 번들은 브라우저의 메인 스레드를 막아 INP(Interaction to Next Paint)를 높이고 LCP(Largest Contentful Paint)를 지연시킵니다 [5, 10]. 코드 스플리팅을 적절히 구성하면 메인 번들 크기를 1.8MB에서 320KB까지 줄이는 등의 최적화가 가능해져, INP 점수를 100ms 가량 향상시키고 전체적인 페이지 상호작용성과 SEO 랭킹을 방어할 수 있습니다 [10, 11].
+*   **최적화 모범 사례 및 주의사항:**
+    웹팩 매직 주석(Webpack Magic Comments) 등을 사용한 사전 페치(Prefetching)나 사전 로딩(Preloading)을 통해 사용자 경험을 매끄럽게 만들 수 있습니다 [12]. 또한, 네트워크 오류나 청크 로딩 실패 상황을 우아하게 처리하기 위한 에러 바운더리(Error Boundaries) 구현이 필수적입니다 [13]. 다만, 지나치게 세밀한 단위로 과도하게 분할(Over-splitting)하는 것은 오히려 네트워크 오버헤드를 증가시켜 성능을 저하시키므로 주의해야 합니다 [7, 8].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Lazy Loading]], [[Core Web Vitals]], [[Interaction to Next Paint (INP)]], [[Largest Contentful Paint (LCP)]], [[React Router]], [[Suspense]]
+- **Projects/Contexts:** [[Next.js]], [[React Applications]], [[E-commerce Optimization]]
+- **Contradictions/Notes:** 소스에 따르면 코드 스플리팅은 초기 로딩 속도와 웹 성능 향상을 위해 필수적인 기법이지만, 무분별하게 과도한 분할(over-splitting)을 적용할 경우 브라우저가 너무 많은 청크를 로드해야 하므로 오히려 네트워크 오버헤드(overhead)가 증가해 성능이 악화될 수 있다는 점을 경고하고 있습니다 [7, 8, 14]. 
+
+---
+*Last updated: 2026-04-26*

00_Raw/Core Web Vitals 최적화.md

@@ -0,0 +1,31 @@
+# [[Core Web Vitals 최적화]]
+
+## 📌 Brief Summary
+Core Web Vitals는 구글이 웹페이지의 실제 사용자 경험을 로딩 속도, 상호작용성, 시각적 안정성 측면에서 객관적으로 평가하기 위해 제정한 핵심 성능 지표입니다 [1-3]. 2025년 업데이트를 통해 기존의 상호작용 지표였던 FID(First Input Delay)가 사용자 상호작용의 전체 지연 시간을 측정하는 INP(Interaction to Next Paint)로 공식 대체되었습니다 [1, 4, 5]. 이 지표들을 최적화하는 것은 단순히 페이지 속도를 개선하는 것을 넘어, 최신 검색 엔진 최적화(SEO) 순위를 높이고 전환율과 사용자 만족도를 극대화하는 모던 웹 엔지니어링의 필수 과제입니다 [6-8].
+
+## 📖 Core Content
+**1. 핵심 지표별 이해와 최적화 전략**
+*   **LCP (Largest Contentful Paint - 로딩 성능):** 뷰포트 내에서 가장 큰 메인 콘텐츠(주로 히어로 이미지나 큰 텍스트 블록)가 화면에 표시될 때까지의 시간을 측정합니다 [9-11].
+    *   *문제 원인:* 렌더링을 차단하는 CSS/JS 리소스, 느린 서버 응답 시간(TTFB), 최적화되지 않은 대용량 이미지, 클라이언트 사이드 렌더링(CSR) 환경에서의 렌더링 지연이 주요 원인입니다 [12, 13].
+    *   *최적화 방법:* 차세대 이미지 포맷(WebP, AVIF) 사용 및 압축, LCP 리소스에 `fetchpriority="high"` 적용 및 사전 로드(preload), 정적 에셋의 CDN 제공을 적용해야 합니다 [9, 14-16]. 또한, SSR(Server-Side Rendering)을 도입하고 중요 CSS(Critical CSS)를 인라인으로 처리하여 로딩 속도를 향상할 수 있습니다 [16-18].
+*   **INP (Interaction to Next Paint - 상호작용성):** 사용자의 상호작용(클릭, 탭, 키 입력 등) 발생 후 브라우저가 다음 프레임을 표시할 때까지 걸리는 전체 응답 시간을 측정합니다 [4, 19, 20].
+    *   *문제 원인:* 메인 스레드를 차단하는 무거운 JavaScript 작업(50ms 초과), 과도한 서드파티 스크립트 실행, 복잡한 DOM 조작 및 프레임워크(React 등)의 불필요한 리렌더링이 INP 저하를 일으킵니다 [21, 22].
+    *   *최적화 방법:* 연산이 무거운 작업은 Web Workers를 이용해 메인 스레드 밖으로 오프로드(Offload)하고, 긴 작업은 50ms 이하의 청크 단위로 분할하여 브라우저에 제어권을 양보(`setTimeout` 활용)해야 합니다 [19, 23-25]. 더불어 서드파티 스크립트 지연(defer), 이벤트 핸들러 최적화(디바운스/스로틀), React 환경에서의 코드 스플리팅(Code Splitting) 및 점진적 하이드레이션(Progressive Hydration)의 도입이 필수적입니다 [22, 26-28].
+*   **CLS (Cumulative Layout Shift - 시각적 안정성):** 페이지가 로드되는 동안 사용자에게 예상치 못한 레이아웃의 이동이 얼마나 일어나는지 측정합니다 [9, 29, 30].
+    *   *문제 원인:* `width` 및 `height` 속성이 지정되지 않은 이미지 및 비디오, 기존 콘텐츠 위로 동적으로 삽입되는 광고, 웹 폰트 로딩 지연으로 인한 텍스트 폰트 깜빡임(FOIT/FOUT), 레이아웃을 다시 계산하게 만드는 애니메이션 속성 사용 등이 있습니다 [29, 31].
+    *   *최적화 방법:* 미디어 요소에 명시적인 크기를 지정하고, 광고나 동적 임베드를 위한 공간을 `min-height`나 `aspect-ratio`를 이용해 미리 확보해 두어야 합니다 [32-34]. 웹 폰트는 `font-display: swap` 또는 `optional`을 사용하여 처리하며, 애니메이션은 레이아웃 재계산을 유발하지 않는 CSS `transform` 속성으로 제어해야 합니다 [34, 35].
+
+**2. 성능 측정 도구 및 모니터링**
+*   *실험실 데이터(Lab Testing):* 통제된 환경에서 기술적 결함을 분석하기 위해 Google Lighthouse, WebPageTest, Chrome DevTools, PageSpeed Insights 등을 사용해 병목 구간을 진단합니다 [36, 37].
+*   *실제 사용자 데이터(RUM):* 사용자 체감 성능 모니터링을 위해 Google Search Console(Core Web Vitals 보고서), GTmetrix, New Relic, Datadog RUM 등을 활용해 지속적으로 성과 예산을 모니터링하고 회귀(Regression)를 방지해야 합니다 [38-41].
+
+**3. 비즈니스 및 SEO 관점의 효과**
+최적화가 되지 않은 사이트에서 Core Web Vitals의 모든 지표를 "Good(우수)" 수준으로 끌어올리면 평균적으로 전환율 25% 상승, 이탈률 35% 감소, 방문자당 수익이 30% 개선되는 효과를 거둘 수 있습니다 [42, 43].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Search Engine Optimization (SEO)]], [[First Contentful Paint (FCP)]], [[Time to First Byte (TTFB)]], [[JavaScript Optimization]]
+- **Projects/Contexts:** [[React SEO 및 성능 최적화]], [[이커머스 웹사이트 속도 및 전환율 개선]], [[웹 접근성 및 모바일 최적화]]
+- **Contradictions/Notes:** 소스 [44]은 2025년 Google의 Core Web Vitals 기준이 더욱 엄격해져 LCP 2.0초 미만, CLS 0.08 미만, INP 150ms 미만을 달성해야 한다고 주장합니다 [45]. 하지만 소스 [46], [47], [48], [49] 등 다른 여러 최신 문서에서는 여전히 LCP 2.5초 이하, CLS 0.1 이하, INP 200ms 이하를 '우수(Good)' 기준으로 명시하고 있어, 기준 임계값에 대한 정보 간의 불일치가 존재합니다 [4, 10, 32, 50, 51].
+
+---
+*Last updated: 2026-04-26*

00_Raw/E-commerce Migration Case Study.md

@@ -0,0 +1,24 @@
+# [[E-commerce Migration Case Study]]
+
+## 📌 Brief Summary
+이 주제는 기존 프론트엔드 구조(예: 단일 페이지 애플리케이션)를 현대적인 웹 아키텍처로 마이그레이션하여 검색 엔진 최적화(SEO)와 Core Web Vitals 지표를 크게 개선한 이커머스 웹사이트의 실제 성공 사례를 다룹니다. 렌더링 방식을 클라이언트 사이드 렌더링(CSR)에서 점진적 정적 재생성(ISR)이나 서버 사이드 렌더링(SSR)으로 전환하고 프론트엔드 성능을 최적화함으로써 인덱싱 비율, 페이지 로드 속도, 유기적 트래픽, 그리고 비즈니스 전환율을 획기적으로 높인 구체적인 결과들을 설명합니다.
+
+## 📖 Core Content
+제공된 소스에서는 이커머스 마이그레이션 및 성능 최적화가 비즈니스 지표에 미친 영향을 보여주는 두 가지 주요 사례 연구를 제시합니다.
+
+*   **패션 이커머스 사이트의 Next.js 마이그레이션 사례 (Create React App에서 Next.js로 전환)**
+    *   **마이그레이션 이전 (CSR 방식):** 10,000개의 제품을 보유한 패션 이커머스 사이트로, 기존에는 Create React App을 이용한 클라이언트 사이드 렌더링(CSR)으로 구축되어 있었습니다 [1, 2]. 당시 제품의 40%만 검색 엔진에 인덱싱되었고, 평균 첫 바이트 도달 시간(TTFB)은 200ms, 최대 콘텐츠 풀 페인트(LCP)는 4.2초로 'Poor(나쁨)' 상태였습니다 [1, 2]. 월 유기적 트래픽은 50,000건, 수익은 $200,000이었습니다 [1, 2].
+    *   **주요 변경 사항:** 카테고리 페이지에는 정적 생성(Static generation)을 적용했고, 제품 페이지에는 1시간(3600초) 단위로 업데이트되는 점진적 정적 재생성(ISR)을 도입했습니다 [3, 4]. 또한, 리치 리절트를 위한 제품 스키마(Product schema) 적용, WebP 포맷을 활용한 Next.js Image 컴포넌트 도입, 그리고 코드 스플리팅을 통해 메인 JS 번들 크기를 1.8MB에서 320KB로 대폭 축소했습니다 [3, 4].
+    *   **마이그레이션 이후 결과:** 두 명의 엔지니어가 6주간 작업한 결과, 인덱싱 비율이 95%로 증가했고 평균 TTFB는 50ms로 단축되었습니다 [3-6]. LCP는 1.8초로 향상되어 'Good(좋음)' 기준을 충족했습니다 [3, 4]. 결과적으로 유기적 트래픽은 70% 증가한 85,000건, 월 수익은 75% 증가한 $350,000를 기록하여 연간 180만 달러의 추가 매출(ROI)을 달성했습니다 [3-6].
+
+*   **리테일 패션 스토어의 Core Web Vitals 최적화 사례**
+    *   **최적화 이전:** 무거운 제품 이미지와 동적 광고 배치로 인해 LCP가 4.2초(나쁨)였으며, 누적 레이아웃 이동(CLS)은 0.28(나쁨), 상호작용 지연 시간(INP)은 480ms(개선 필요)를 기록했습니다 [7].
+    *   **주요 변경 사항 및 결과:** 고급 이미지 압축 기술을 적용하고, 레이아웃 이동을 막기 위해 광고 공간을 미리 확보했으며, JavaScript 실행 시간을 37% 줄이는 최적화를 수행했습니다 [7]. 불과 3개월 후 LCP는 2.1초(좋음), CLS는 0.06(좋음), INP는 180ms(좋음)로 모두 눈에 띄게 개선되었습니다 [7]. 이 성능 향상 덕분에 유기적 트래픽이 32% 상승하고 전환율이 22% 증가했습니다 [7].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Client-Side Rendering (CSR)]], [[Incremental Static Regeneration (ISR)]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]], [[Largest Contentful Paint (LCP)]], [[Cumulative Layout Shift (CLS)]]
+- **Projects/Contexts:** [[Next.js Migration]], [[E-commerce Website Optimization]]
+- **Contradictions/Notes:** 소스 내에서 이커머스 마이그레이션 결과에 대한 상충되는 주장은 발견되지 않으며, 렌더링 방식의 현대화(CSR에서 ISR 등) 및 프론트엔드 성능 최적화가 이커머스 트래픽과 매출 증가에 직접적으로 긍정적인 영향을 미친다는 점이 공통적으로 입증되고 있습니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/E-commerce Migration to Next.js Case Study.md

@@ -0,0 +1,17 @@
+# [[E-commerce Migration to Next.js Case Study]]
+
+## 📌 Brief Summary
+이 주제는 10,000개의 제품을 보유한 패션 이커머스 사이트가 기존의 CSR(Client-Side Rendering) 기반 Create React App 환경에서 Next.js 기반으로 마이그레이션한 실제 사례를 다룹니다. 이 마이그레이션은 검색 엔진 색인률, 로딩 성능(LCP), 유기적 트래픽을 극적으로 개선하기 위해 수행되었습니다. 결과적으로 렌더링 전략의 전환과 웹 성능 최적화를 통해 사이트의 매출이 대폭 향상되는 직접적인 비즈니스 성과를 창출했습니다.
+
+## 📖 Core Content
+* **마이그레이션 이전 상태 및 문제점 (CSR 환경):** 기존 이커머스 사이트는 Create React App을 사용한 클라이언트 사이드 렌더링(CSR) 방식으로 구축되어 있었습니다 [1]. 전체 10,000개의 제품 중 40%인 4,000개만 검색 엔진에 색인되었으며, 평균 TTFB(Time to First Byte)는 200ms, 평균 LCP(Largest Contentful Paint)는 4.2초로 성능이 매우 저조(Poor)했습니다 [1]. 당시 유기적 검색 트래픽은 월 50,000명, 유기적 검색을 통한 매출은 월 20만 달러에 머물렀습니다 [1].
+* **최적화 및 마이그레이션 실행 (Next.js 도입):** 두 명의 엔지니어가 6주에 걸쳐 Next.js로의 마이그레이션을 완료했습니다 [2]. 주요 변경 사항으로는 카테고리 페이지(`/category/*`)에 빌드 타임 정적 생성(SSG)을 도입하고, 제품 페이지에는 1시간 단위 업데이트(`revalidate: 3600`)를 적용한 점진적 정적 재생성(ISR) 방식을 채택한 것이 포함됩니다 [3]. 또한 풍부한 검색 결과(Rich results)를 위해 제품 스키마(Product schema) 구조화 데이터를 추가하고, WebP 포맷과 Next.js Image 컴포넌트를 활용해 이미지를 최적화했습니다 [3]. 더불어 코드 스플리팅을 통해 메인 자바스크립트 번들의 크기를 1.8MB에서 320KB로 크게 축소했습니다 [3].
+* **마이그레이션 이후 성과 및 비즈니스 영향:** Next.js ISR을 적용한 후, 제품 색인률은 기존 40%에서 95%(9,500/10,000)로 급증했습니다 [3]. ISR 캐시 적중 덕분에 평균 TTFB는 50ms로 단축되었고, 평균 LCP는 1.8초로 떨어져 Core Web Vitals에서 'Good' 등급을 달성했습니다 [3]. 비즈니스 측면에서는 유기적 트래픽이 월 85,000명으로 70% 증가했으며, 매출은 월 35만 달러로 75% 상승하여 결과적으로 월 15만 달러, 연간 180만 달러의 추가 수익(ROI)을 창출했습니다 [2, 3].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Incremental Static Regeneration (ISR)]], [[Client-Side Rendering (CSR)]], [[Largest Contentful Paint (LCP)]], [[Core Web Vitals]], [[Code Splitting]], [[Image Optimization]]
+- **Projects/Contexts:** [[React SEO Guide]], [[E-commerce Web Development]], [[Web Performance Optimization]]
+- **Contradictions/Notes:** 기존 CSR 기반의 React 앱은 초기 HTML이 비어 있어 검색 엔진 색인 지연 및 성능(LCP) 문제를 초래했으나, Next.js의 SSR/SSG/ISR 기능을 통해 웹 성능과 SEO 트래픽을 동시에 획기적으로 개선할 수 있음을 완벽하게 증명한 사례입니다 [1, 3]. 
+
+---
+*Last updated: 2026-04-26*

00_Raw/First Contentful Paint (FCP).md

@@ -0,0 +1,21 @@
+# [[First Contentful Paint (FCP)]]
+
+## 📌 Brief Summary
+First Contentful Paint(FCP)는 웹 성능 지표 중 하나로, 사용자의 화면에 첫 번째 텍스트나 이미지가 렌더링되는 데 걸리는 시간을 측정합니다 [1, 2]. 이 지표는 초기 콘텐츠 표시 성능에 집중하며, 지연될 경우 사용자의 사이트 체류 시간과 전반적인 페이지 경험에 부정적인 영향을 미칩니다 [2, 3]. 
+
+## 📖 Core Content
+*   **역할 및 측정 기준:** FCP는 화면에 첫 번째 콘텐츠(텍스트 또는 이미지)가 그려지는 시점을 측정하여 사용자가 사이트 로딩을 체감하는 첫 순간을 나타냅니다 [1]. 이는 페이지의 메인 콘텐츠가 표시되는 시점을 측정하는 LCP(Largest Contentful Paint)와는 명확히 구분되는 지표입니다 [2].
+*   **임계값 및 비즈니스 영향:** FCP의 권장 임계값은 1.5초 미만 [1] 혹은 1.8초 이하 [4-6]로 정의됩니다. FCP 기준을 충족하지 못하고 지연될 경우, 사용자의 사이트 체류 시간이 9%가량 감소하며 Google의 페이지 경험 점수(Page Experience Score)에도 악영향을 미칩니다 [3].
+*   **최적화 전략:** 
+    *   기술적 웹 성능 최적화를 위해 중요한(Critical) CSS를 인라인으로 처리하고, 렌더링을 차단하는 리소스를 최소화해야 합니다 [7].
+    *   `preconnect`나 `dns-prefetch`와 같은 리소스 힌트를 활용하고 폰트 로딩을 최적화하며 서버 응답 시간을 단축하는 것이 좋습니다 [7].
+    *   React 기반의 단일 페이지 애플리케이션(SPA)에서는 서버 사이드 렌더링(SSR)을 도입하여 초기 HTML을 제공함으로써 FCP를 빠르게 달성할 수 있습니다 [8, 9].
+    *   또한, 라우트 및 컴포넌트 수준에서의 코드 분할(Code-splitting)과 지연 로딩(Lazy loading)을 적용하면 초기 번들 크기를 줄여 FCP 성능을 향상시킬 수 있습니다 [10, 11].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[Server-Side Rendering (SSR)]], [[Render-Blocking Resources]]
+- **Projects/Contexts:** [[Google Page Experience 2025]], [[React SEO Optimization]], [[Frontend Performance Optimization]]
+- **Contradictions/Notes:** 소스 6은 FCP가 2025년부터 1.5초 미만의 기준을 가진 새로운 Core Web Vitals 지표로 공식 추적된다고 주장합니다 [1, 12]. 반면, 소스 14, 15 및 28에서는 FCP를 보조 메트릭(Supporting metrics)으로 분류하거나 좋은 점수의 기준을 1.8초 이하로 명시하여 기준치에 약간의 의견 차이가 존재합니다 [4-6].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Frontend Performance Optimization.md

@@ -0,0 +1,30 @@
+# [[Frontend Performance Optimization]]
+
+## 📌 Brief Summary
+프론트엔드 성능 최적화는 웹사이트의 로딩 속도, 상호작용성, 시각적 안정성을 향상시켜 사용자 경험과 검색 엔진 순위(SEO)를 극대화하는 일련의 과정 및 기술적 실천을 의미한다 [1-3]. 2025년을 기준으로 핵심 웹 바이탈(Core Web Vitals)의 최신 지표인 LCP, INP, CLS를 충족하기 위해 이미지 및 리소스 최적화, 코드 분할(Code Splitting), 렌더링 차단 요소 제거, 효율적인 렌더링 전략(SSR, SSG) 등이 동원된다 [1, 4-7]. 이를 성공적으로 구현하면 웹사이트의 이탈률을 줄이고 궁극적으로 전환율 및 수익성을 대폭 높일 수 있다 [8, 9].
+
+## 📖 Core Content
+
+*   **핵심 웹 바이탈(Core Web Vitals) 최적화 전략:**
+    *   **LCP (Largest Contentful Paint):** 페이지의 주요(가장 큰) 콘텐츠가 시각적으로 로드되는 시간을 측정하며, 2.0초 또는 2.5초 이내로 최적화해야 한다 [2, 5, 10]. LCP를 개선하려면 WebP나 AVIF와 같은 차세대 이미지 포맷 사용, 중요 리소스 사전 로드(preload), CDN(콘텐츠 전송 네트워크) 활용, 서버 응답 시간(TTFB) 최적화, 그리고 서버 사이드 렌더링(SSR) 적용이 필요하다 [11-15].
+    *   **INP (Interaction to Next Paint):** 2025년부터 기존 FID를 대체한 지표로, 버튼 클릭이나 키보드 입력 등 사용자 상호작용 후 브라우저가 화면을 업데이트할 때까지의 전체 지연 시간을 측정하며 150ms~200ms 이하 유지가 목표이다 [1, 2, 4, 5, 16]. 메인 스레드를 차단하는 무거운 JavaScript 실행을 방지하기 위해, 작업을 50ms 이하의 청크로 분할하거나 Web Workers를 통해 연산을 분리하고 불필요한 서드파티 스크립트를 지연(defer)시켜야 한다 [16-20].
+    *   **CLS (Cumulative Layout Shift):** 페이지가 로드되는 동안 발생하는 예기치 않은 레이아웃 이동을 측정하며, 시각적 안정성을 위해 0.08에서 0.1 미만으로 유지해야 한다 [2, 5, 11, 12]. 이를 방지하려면 이미지 및 비디오에 명시적인 `width`와 `height` 속성을 지정하고, 동적 광고나 콘텐츠가 들어갈 공간을 미리 확보해야 하며, 폰트 로드 시 `font-display: swap` 또는 `optional`을 지정해야 한다 [12, 21-23].
+
+*   **코드 분할(Code Splitting) 및 지연 로딩(Lazy Loading):**
+    *   초기 로딩 시 전체 애플리케이션 코드를 한 번에 다운로드하는 큰 번들 사이즈 문제를 해결하기 위해, 코드를 더 작은 청크(chunk)로 나누어 필요할 때만 로드하는 방식이다 [6].
+    *   React 환경에서는 `React.lazy`와 `Suspense`를 결합하거나 라우트 기반 분할(Route-Based Splitting)을 통해 특정 라우트나 무거운 컴포넌트(예: 차트, 에디터 등)에만 지연 로딩을 적용한다 [24-28].
+    *   이는 초기 번들 크기를 50~100KB 수준으로 줄여 TTFB와 TTI(Time to Interactive)를 획기적으로 향상시킨다 [29, 30]. 단, 화면 상단(Above-the-fold)의 중요한 콘텐츠나 영웅 이미지(Hero image)를 지연 로딩할 경우 오히려 LCP가 악화될 수 있으므로 주의해야 한다 [31].
+
+*   **렌더링 아키텍처 (Rendering Architecture):**
+    *   자바스크립트가 브라우저에서 화면을 전부 구성하는 클라이언트 사이드 렌더링(CSR)은 빈 HTML 스켈레톤을 먼저 제공하므로 검색 엔진 크롤링과 성능 지표(FCP)에 악영향을 미친다 [32, 33].
+    *   대신 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR)을 사용하여 미리 렌더링된 완벽한 HTML을 브라우저나 크롤러에 전달하면 로딩 속도와 SEO 문제를 동시에 해결할 수 있다 [34-36].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Code Splitting]], [[Server-Side Rendering (SSR)]], [[Lazy Loading]], [[React Router]]
+- **Projects/Contexts:** [[홈페이지 구조 & UX modern website architecture best practices landing page UX patterns examples homepage layout structure case study react router best practices seo basics for react websites web performance optimization frontend checklist core web vitals optimization guide]]
+- **Contradictions/Notes:** 
+  - 코어 웹 바이탈의 엄격성에 대한 차이: 소스 [5]는 2025년 기준 LCP를 2.0초 미만, CLS를 0.08 미만으로 더욱 엄격해진 임계값을 제시하지만, 소스 [2] 및 [10] 등에서는 여전히 LCP 2.5초 이하, CLS 0.1 이하를 양호한(Good) 기준으로 명시하고 있어 소스 간 기준 임계값에 약간의 편차가 존재한다.
+  - 동적 렌더링(Dynamic Rendering)에 대한 평가: 소스 [34]은 동적 렌더링을 봇 트래픽 해결을 위한 차선책('Good' SEO Impact)으로 소개하지만, 소스 [37]는 2026년 기준 이는 사용자 대상과 봇 대상을 다르게 보여주는 클로킹(Cloaking)으로 간주될 수 있어 구글이 명시적으로 사용 중단(Deprecated)을 권장하는 기법이라고 경고한다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/Modern Website Architecture.md

@@ -0,0 +1,25 @@
+# [[Modern Website Architecture]]
+
+## 📌 Brief Summary
+현대의 웹사이트 아키텍처는 고성능 기술 구조와 전환(Conversion) 중심의 사용자 경험(UX)이 완벽하게 통합된 생태계를 의미합니다 [1]. 과거 디자인과 엔지니어링이 분리되어 있던 것과 달리, 현재는 밀리초 단위의 지연이나 미세한 레이아웃 이동조차 비즈니스의 생존을 위협하는 요소로 간주되어 엄격한 코어 웹 바이탈(Core Web Vitals) 성능을 요구합니다 [1]. 더불어 React와 같은 최신 프레임워크 환경에서 서버 사이드 렌더링(SSR), 동적 라우팅, 그리고 모바일 우선주의 접근법을 활용하여 검색 엔진 최적화(SEO)와 압도적인 사용자 속도 경험을 동시에 달성하는 것이 핵심입니다 [1-3].
+
+## 📖 Core Content
+
+*   **구조적 계층 및 디자인 철학**
+    현대 웹 아키텍처의 기본 철학은 정보의 밀도를 낮추고 인지적 명확성을 높이는 '빌보드(Billboard)' 모델로의 전환입니다 [4]. 모든 기능과 콘텐츠를 헤더에 쑤셔 넣던 과거 방식에서 벗어나, 여백, 시각적 계층 구조, 명확한 제목을 통해 사용자의 여정을 논리적으로 안내합니다 [4]. 또한 시각적 안정성을 유지하기 위해 모바일 우선(Mobile-first) 적응형 디자인과 시맨틱 HTML5 및 스키마 마크업을 활용하여 접근성과 AI 검색 엔진의 크롤링을 돕는 구조를 갖추어야 합니다 [5-7].
+*   **렌더링 전략 (Rendering Strategies) 및 SEO**
+    전통적인 클라이언트 사이드 렌더링(CSR) 기반의 단일 페이지 애플리케이션(SPA)은 빈 HTML 셸을 제공하여 검색 엔진의 크롤링 지연 및 SEO 하락 문제를 발생시킵니다 [8-10]. 이를 극복하기 위해 현대 아키텍처는 **서버 사이드 렌더링(SSR)**, **정적 사이트 생성(SSG)**, 그리고 두 가지의 장점을 결합한 **점진적 정적 재생성(ISR)** 방식을 전략적으로 활용합니다 [3, 11, 12]. 이는 검색 엔진 봇에 즉각적인 콘텐츠를 제공하고 초기 로드 속도를 극대화하여 랭킹 상승과 원활한 사용자 경험을 보장합니다 [3, 13, 14].
+*   **성능 최적화와 코어 웹 바이탈 (Core Web Vitals)**
+    최신 웹 아키텍처는 구글의 2025년 기준 엄격해진 코어 웹 바이탈을 충족해야 합니다. LCP(Largest Contentful Paint)는 2.0초 미만, CLS(Cumulative Layout Shift)는 0.08 미만, 그리고 새롭게 도입된 INP(Interaction to Next Paint)는 150ms 또는 200ms 미만으로 유지해야 합니다 [7, 15, 16]. 이를 위해 WebP/AVIF 이미지 최적화, 렌더링 차단 리소스 제거, 웹 워커(Web Workers)를 이용한 과도한 JavaScript 분산 실행, 레이아웃 이동 방지를 위한 명시적 크기 지정 등이 필수적으로 수반됩니다 [17-20].
+*   **프런트엔드 애플리케이션 라우팅 및 상태 관리**
+    React Router v6.4+와 같은 최신 라우팅 기술은 단순한 페이지 이동을 넘어 데이터 패칭과 상태 관리를 중앙에서 조율합니다 [21]. 중첩 라우팅(Nested Routing)을 통해 UI를 계층적으로 구성하며, **Loader**와 **Action** API를 사용하여 컴포넌트가 렌더링되기 전에 데이터를 병렬로 미리 가져와 '워터폴(Waterfall)' 지연 문제를 해결합니다 [22, 23]. 또한, 코드 스플리팅(Code Splitting) 및 지연 로딩(Lazy Loading)을 통해 초기 JavaScript 번들 크기를 줄여 성능을 대폭 향상시킵니다 [24-26].
+*   **접근성(Accessibility)과 상호 운용성(Baseline)**
+    모든 사용자를 포용하기 위해 WCAG 2.1 및 최신 2.2 AA 표준 준수가 필수적입니다 [27]. 이는 키보드 내비게이션 지원, 초점(Focus)이 다른 콘텐츠에 가려지지 않도록 보장, 복잡한 드래그 제스처의 대안 제공 등을 포함합니다 [28, 29]. 아울러 브라우저 호환성 평가에 있어 개별 브라우저 버전보다는 웹 플랫폼의 안전한 사용 기준점인 '베이스라인(Baseline)'을 통해 폴리필 의존을 줄이고 네이티브 웹 API를 적극 채택하는 추세입니다 [30-32].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[Single Page Applications (SPA)]], [[Web Content Accessibility Guidelines (WCAG)]], [[React Router]], [[Code Splitting]]
+- **Projects/Contexts:** [[Allbirds PWA Redesign]], [[Multi-Brand Marketplace Platform Onboarding Redesign]]
+- **Contradictions/Notes:** SPA 구현 시 CSR은 인터랙션 속도를 높여주지만 초기 렌더링 지연과 검색 엔진 봇의 접근성 부재라는 명확한 단점이 있어, 보안이 필요한 인증 페이지가 아닌 공개 콘텐츠의 경우 CSR만 사용하는 것은 권장되지 않으며 SSR, SSG 또는 ISR로 대체해야 한다고 강조됩니다 [2, 11, 33].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Next.js Framework.md

@@ -0,0 +1,22 @@
+# [[Next.js Framework]]
+
+## 📌 Brief Summary
+Next.js는 빠른 웹 성능과 내장된 SEO 최적화 기능을 갖춘 가장 인기 있는 React 기반 프레임워크이다 [1, 2]. SSR(Server-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration) 등 다양한 서버 측 렌더링 방식을 제공하여 검색 엔진 봇에게 즉각적으로 완전한 HTML을 전달할 수 있도록 돕는다 [2, 3]. 성능 중심의 개발 워크플로우를 지원하므로 전자상거래, 블로그, 랜딩 페이지 등의 Core Web Vitals 점수와 검색 엔진 순위를 높이는 데 탁월하다 [3, 4].
+
+## 📖 Core Content
+* **다양한 렌더링 전략의 통합 지원:** 
+  Next.js는 `getServerSideProps` 함수를 사용해 요청마다 서버에서 HTML을 생성하는 SSR, `getStaticProps`를 통해 빌드 타임에 HTML을 생성하는 SSG를 모두 지원한다 [5, 6]. 또한, 캐시된 정적 페이지를 백그라운드에서 업데이트하는 ISR 방식을 통해 SSR의 최신성과 SSG의 속도(TTFB 20-50ms 수준)를 동시에 달성할 수 있다 [6, 7]. 이는 클라이언트 측 렌더링 지연을 없애고 빠르고 완전한 페이지를 사용자 및 크롤러 봇에 제공한다 [2, 5].
+* **Core Web Vitals 및 성능 최적화:** 
+  Next.js는 라우트 기반 코드 스플리팅(Code Splitting)을 자동으로 수행하여 무거운 자바스크립트 번들을 분할하고 초기 로딩 시간을 줄인다 [8]. 최신의 App Router와 Server Components를 사용하면 페이지의 정적인 부분에 대해 클라이언트로 전송하는 자바스크립트 양을 '0'으로 만들 수 있어 INP(Interaction to Next Paint) 지표 최적화에 놀라운 효과를 발휘한다 [9].
+* **내장된 이미지 최적화 (`next/image`):** 
+  자체적인 이미지 컴포넌트인 `next/image`를 제공하여 이미지를 WebP와 같은 최신 포맷으로 자동 변환하고, 기기 해상도에 맞춰 크기를 조정하며, 지연 로딩(Lazy loading)을 적용한다 [10, 11]. 이는 웹 성능의 주요 지표인 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift) 점수를 큰 폭으로 개선한다 [9-11].
+* **강력한 메타데이터 및 SEO 도구 관리:** 
+  기존 React SPA의 약점이었던 메타데이터 관리를 해결하기 위해 `next/head` 컴포넌트 또는 Metadata API를 제공하여 라우트마다 동적인 타이틀과 Open Graph 태그를 주입할 수 있다 [3, 9, 12]. 또한 `next-sitemap` 패키지를 이용하면 복잡한 설정 없이 XML 사이트맵을 자동으로 생성할 수 있다 [13].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Core Web Vitals]], [[React SEO]], [[Interaction to Next Paint (INP)]]
+- **Projects/Contexts:** [[E-commerce Migration to Next.js]] (기존 순수 CSR 방식의 Create React App 전자상거래 사이트를 Next.js ISR로 마이그레이션하여 오가닉 트래픽 70%, 매출 75% 상승을 달성한 비즈니스 적용 사례 [10, 14])
+- **Contradictions/Notes:** 전통적인 순수 Client-Side Rendering(CSR) 방식은 검색 엔진 봇에게 빈 HTML 셸을 반환하여 인덱싱이 지연되거나 실패할 위험이 크지만, Next.js의 SSR 및 SSG 렌더링 방식을 적용하면 자바스크립트 실행에 의존하지 않고도 봇이 즉시 콘텐츠를 수집할 수 있도록 근본적인 구조를 개선한다 [2, 15, 16].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Next.js SSR Implementation.md

@@ -0,0 +1,18 @@
+# [[Next.js SSR Implementation]]
+
+## 📌 Brief 브요
+Next.js SSR(Server-Side Rendering) 구현은 브라우저 요청 시 서버에서 콘텐츠와 데이터를 사전에 패칭(fetch)하여 완전한 형태의 HTML을 생성한 뒤 클라이언트에게 전달하는 렌더링 방식입니다 [1, 2]. 이는 기본적으로 클라이언트 사이드 렌더링(CSR)을 사용하는 React 애플리케이션이 검색 엔진 크롤링에 취약하고 초기 렌더링 속도가 느린 단점을 극복하기 위해 사용됩니다 [3-5]. Next.js SSR은 SEO를 극대화하고 Core Web Vitals의 핵심 지표인 LCP(Largest Contentful Paint)를 단축하는 등 현대 웹 아키텍처 성능 최적화에 중요한 역할을 합니다 [2, 6].
+
+## 📖 Core Content
+* **SSR 구현 방식 (getServerSideProps):** Next.js에서 SSR을 구현하는 가장 대표적인 방법은 `getServerSideProps` 비동기 함수를 사용하는 것입니다 [2, 6]. 이 함수 내에서 API 등을 통해 서버 측에서 필요한 데이터를 미리 불러온(fetch) 후, 페이지 컴포넌트의 `props`로 전달합니다 [6]. 이를 통해 자바스크립트 실행 대기 시간 없이 콘텐츠가 즉시 채워진 HTML 뼈대를 클라이언트에 전송할 수 있습니다 [2, 6].
+* **SEO (검색 엔진 최적화) 효과:** 전통적인 React CSR 앱은 자바스크립트가 실행되기 전까지 빈 HTML 셸을 제공하므로, Googlebot과 같은 검색 엔진 크롤러가 콘텐츠나 메타데이터를 즉각적으로 인식하는 데 어려움이 있습니다 [3, 7]. Next.js SSR을 적용하면 검색 엔진 봇이 자바스크립트 실행 없이도 메타데이터, 구조화된 데이터, 실제 콘텐츠가 모두 포함된 완전한 HTML을 수신하게 되므로, 크롤링 및 인덱싱 효율이 최우수(Excellent) 등급으로 향상됩니다 [2, 8].
+* **성능 최적화 및 Core Web Vitals:** Next.js SSR 도입은 프론트엔드 성능 최적화와 Core Web Vitals 달성에 크게 기여합니다. 클라이언트 측의 렌더링 지연을 제거함으로써 최대 1,000ms의 LCP(Largest Contentful Paint) 속도 향상을 기대할 수 있는 고급 최적화 전략입니다 [6, 9]. 다만, 데이터가 포함된 완전한 HTML이 사용자에게 처음 보여지는 FCP(First Contentful Paint)는 빠르지만, 서버에서 매 요청을 처리하므로 백엔드 서버 부하가 발생하고 TTFB(Time to First Byte)가 상대적으로 길어질 수 있다는 특징을 고려해야 합니다 [8, 10].
+* **활용 맥락 (Use Cases):** 이 방식은 마케팅 페이지, 블로그, 전자상거래(E-commerce) 플랫폼 등 콘텐츠가 매우 빈번하게 업데이트되거나 사용자 세션과 무관하게 실시간 데이터 제공 및 SEO가 필수적인 페이지에 주로 권장됩니다 [1, 8, 11].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Largest Contentful Paint (LCP)]], [[Search Engine Optimization (SEO)]], [[Core Web Vitals]]
+- **Projects/Contexts:** [[SEO for React Applications]], [[Core Web Vitals Optimization Guide]]
+- **Contradictions/Notes:** 소스에 따르면 Next.js SSR은 초기 HTML 도달 속도와 SEO 측면에서 뛰어나지만, 정적 사이트 생성(SSG)이나 증분 정적 재생성(ISR) 방식(캐시 기반, TTFB 20-50ms 수준)에 비해 매 요청 시마다 서버 리소스를 소모하므로 상대적으로 서버 응답 시간(TTFB 200-800ms)이 느릴 수 있습니다 [10]. 따라서 콘텐츠 변경 빈도와 성능 요구사항에 맞춰 SSR, SSG, ISR을 선택적으로 도입해야 합니다 [1].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Next.js 또는 Remix를 활용한 E-commerce SEO 마이그레이션 적용 사례.md

@@ -0,0 +1,26 @@
+# [[Next.js 또는 Remix를 활용한 E-commerce SEO 마이그레이션 적용 사례]]
+
+## 📌 Brief Summary
+Next.js나 Remix와 같은 최신 프레임워크를 활용하여 기존의 클라이언트 사이드 렌더링(CSR) 기반 E-commerce 웹사이트를 서버 사이드 렌더링(SSR) 또는 점진적 정적 재생성(ISR) 방식으로 마이그레이션하여 검색 엔진 최적화(SEO) 및 웹 성능을 개선한 사례입니다 [1-3]. 이러한 마이그레이션을 통해 검색 엔진의 크롤링 및 색인 생성을 획기적으로 향상시키고, 코어 웹 바이탈(Core Web Vitals) 지표를 개선할 수 있습니다 [1, 2]. 결과적으로 유기적 트래픽(Organic traffic)과 전환율, 그리고 매출을 크게 증가시키는 비즈니스 성과를 창출합니다 [2].
+
+## 📖 Core Content
+*   **마이그레이션 배경 및 문제점:**
+    기존 Create React App (CSR) 기반으로 구축된 10,000개의 제품을 보유한 패션 E-commerce 사이트는 렌더링 지연과 낮은 색인 생성률로 인해 SEO에 큰 어려움을 겪고 있었습니다 [1]. 마이그레이션 이전에는 전체 제품의 40%만이 색인되었으며, TTFB(Time to First Byte)는 200ms, LCP(Largest Contentful Paint)는 4.2초로 'Poor' 등급을 기록했습니다 [1]. 당시 월간 유기적 트래픽은 50,000명, 매출은 20만 달러 수준에 머물렀습니다 [1].
+
+*   **Next.js를 활용한 주요 개선 사항:**
+    이 문제를 해결하기 위해 2명의 엔지니어가 6주간 Next.js ISR을 도입하여 마이그레이션을 진행했으며, 다음과 같은 주요 변경 사항을 적용했습니다 [2, 3]:
+    *   **렌더링 전략 변경:** 카테고리 페이지에는 빌드 타임 렌더링인 정적 생성(Static generation)을 적용하고, 제품 페이지에는 매시간 업데이트되도록 점진적 정적 재생성(ISR, `revalidate: 3600`)을 적용했습니다 [2].
+    *   **구조화된 데이터 적용:** 리치 결과(Rich results) 노출을 위해 제품 스키마(Product schema) 등 구조화된 데이터를 도입했습니다 [2].
+    *   **이미지 최적화:** WebP 포맷과 함께 Next.js Image 컴포넌트를 활용하여 이미지를 최적화했습니다 [2].
+    *   **코드 스플리팅:** 경로(Route) 기반의 코드 스플리팅을 통해 메인 자바스크립트 번들 크기를 1.8MB에서 320KB로 크게 축소했습니다 [2].
+
+*   **마이그레이션 결과 및 비즈니스 성과:**
+    마이그레이션 완료 후 색인 생성률은 40%에서 95%로 급증했습니다 [1, 2]. 또한 ISR 캐시 적중 덕분에 TTFB는 50ms로 단축되고, LCP는 1.8초('Good' 등급)로 크게 개선되었습니다 [2]. 이러한 성능 및 SEO 개선의 결과로 월간 유기적 트래픽은 70% 증가한 85,000명, 유기적 트래픽을 통한 매출은 75% 증가한 35만 달러를 달성하여 월 15만 달러(연간 180만 달러)의 추가 매출이라는 훌륭한 ROI를 기록했습니다 [2, 3].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Incremental Static Regeneration (ISR)]], [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[Search Engine Optimization (SEO)]]
+- **Projects/Contexts:** [[Create React App 기반 패션 E-commerce 플랫폼의 Next.js 전환 프로젝트]]
+- **Contradictions/Notes:** 소스에서는 구체적인 수치와 함께 Next.js를 활용한 패션 E-commerce 마이그레이션 성공 사례를 상세히 제공하고 있습니다 [1, 2]. 반면 Remix의 경우 최신 프레임워크로서 뛰어난 개발자 경험(DX)과 내장된 성능 최적화를 제공하는 훌륭한 대안으로 언급되고 있으나, E-commerce 도메인에 맞춘 구체적인 마이그레이션 수치나 사례 데이터는 소스에 정보가 부족합니다 [4].
+
+---
+*Last updated: 2026-04-26*

00_Raw/POUR Principles.md

@@ -0,0 +1,18 @@
+# [[POUR Principles]]
+
+## 📌 Brief Summary
+POUR 원칙은 웹 접근성 지침(WCAG)의 근간을 이루는 4가지 핵심 원칙을 의미한다 [1-3]. 이는 웹 콘텐츠가 인지 가능(Perceivable), 운용 가능(Operable), 이해 가능(Understandable), 견고해야(Robust) 함을 나타낸다 [1, 2, 4]. 이 원칙들은 스크린 리더기나 키보드 탐색을 필요로 하는 사람들을 포함하여 모든 사용자가 웹사이트를 원활하게 사용할 수 있도록 돕는 설계 기준을 제공한다 [2, 3, 5].
+
+## 📖 Core Content
+* **Perceivable (인지 가능):** 사용자가 웹 페이지의 정보와 사용자 인터페이스 요소를 쉽게 인지할 수 있도록 제공되어야 한다 [6]. 시각이나 청각의 제약이 있는 사용자도 콘텐츠를 파악할 수 있도록 대체 텍스트(alt text), 오디오 및 비디오 자막, 그리고 명확한 색상 대비를 포함해야 한다 [2, 5].
+* **Operable (운용 가능):** 사용자 인터페이스 구성 요소와 내비게이션은 누구나 조작할 수 있어야 한다 [7]. 마우스 없이도 키보드나 음성 명령만으로 모든 기능이 작동해야 하며, 사용자가 작업을 완료할 수 있는 충분한 시간을 제공해야 한다 [2, 5, 7, 8]. 또한 빛이 번쩍이는 요소처럼 발작을 일으킬 수 있는 콘텐츠 디자인을 피해야 한다 [8].
+* **Understandable (이해 가능):** 정보의 내용과 사용자 인터페이스의 작동 방식이 모두 이해하기 쉬워야 한다 [9]. 언어를 단순하게 유지하고 직관적인 내비게이션을 제공해야 하며, 복잡한 CAPTCHA 요소는 피해야 한다 [2, 5]. 양식(form) 작성 시 레이블과 지침을 명확히 하여 사용자의 실수를 방지하고 오류를 쉽게 복구할 수 있도록 도와야 한다 [5, 10].
+* **Robust (견고성):** 보조 기술을 포함한 광범위한 사용자 에이전트(브라우저 등)가 콘텐츠를 신뢰성 있게 해석할 수 있도록 충분히 견고하게 구축되어야 한다 [11]. 이는 웹사이트가 다양한 기기 및 보조 기술과 호환되며, 기술이 발전하더라도 접근성 설계가 지속적으로 기능해야 함을 의미한다 [2, 5].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[WCAG]], [[Web Accessibility]], [[UX Design]]
+- **Projects/Contexts:** [[ADA Website Compliance]], [[Modern Web Design Best Practices]]
+- **Contradictions/Notes:** 소스 내에서 POUR 원칙에 대한 상충되는 주장은 없으며, 제공된 모든 소스가 이를 웹 접근성을 달성하기 위한 보편적이고 필수적인 표준으로 일관되게 설명하고 있습니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/React Application SEO Migration.md

@@ -0,0 +1,26 @@
+# [[React Application SEO Migration]]
+
+## 📌 Brief Summary
+React Application SEO Migration은 전통적인 클라이언트 사이드 렌더링(CSR) 기반의 React 애플리케이션이 가지는 검색 엔진 색인 및 노출 한계를 극복하기 위해, 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)과 같은 SEO 친화적인 아키텍처로 전환하는 과정입니다. 기본 React 앱은 초기 요청 시 빈 HTML 셸만을 제공하여 검색 엔진 봇의 크롤링을 방해하므로, Next.js나 Remix 같은 프레임워크를 도입하여 콘텐츠, 메타데이터, 깔끔한 URL 라우팅이 즉각적으로 제공되도록 구조를 개편하는 것이 핵심입니다. 이를 통해 Core Web Vitals를 개선하고 검색 엔진 순위 및 오가닉 트래픽을 극대화할 수 있습니다.
+
+## 📖 Core Content
+*   **React의 SEO 과제 (CSR의 한계):**
+    기본 React 애플리케이션은 클라이언트 측에서 자바스크립트를 통해 화면을 그리는 CSR 방식을 사용합니다. 이로 인해 구글봇(Googlebot) 등의 검색 엔진이 접근했을 때 초기에는 내용이 없는 빈 HTML 골격(`<div id="root"></div>`)만 보게 됩니다. 봇이 자바스크립트를 다운로드하고 실행할 때까지 기다려야 하는 '2단계 색인(Two-wave indexing)' 과정을 거치게 되며, 이는 크롤링 예산 낭비, 인덱싱 지연, 콘텐츠 누락, 그리고 대규모 자바스크립트 번들로 인한 Core Web Vitals 점수 하락을 초래합니다.
+*   **주요 마이그레이션 전략 (렌더링 방식 개편):**
+    *   **서버 사이드 렌더링 (SSR):** 각 요청마다 서버에서 자바스크립트를 실행하여 완전한 HTML을 생성해 제공하는 방식입니다. 구글봇이 자바스크립트 실행을 기다릴 필요 없이 즉시 콘텐츠를 수집할 수 있습니다. 마케팅 사이트, 블로그, 실시간 동적 콘텐츠에 적합하며 Next.js, Remix 프레임워크를 통해 도입합니다.
+    *   **정적 사이트 생성 (SSG) 및 점진적 정적 재생성 (ISR):** 빌드 시점에 모든 HTML을 사전 생성(SSG)하거나, 백그라운드에서 주기적으로 정적 페이지를 업데이트(ISR)하는 방식입니다. 가장 빠른 로딩 속도와 완벽한 크롤링 환경을 제공하여 전자상거래(E-commerce)나 대규모 문서 사이트에 유리합니다.
+    *   **동적 렌더링 (Dynamic Rendering):** 검색 엔진 봇에게는 사전 렌더링된 HTML을 제공하고, 일반 사용자에게는 CSR을 제공하는 방식(예: Prerender.io 활용)입니다. 단, 이는 SSR 적용이 불가능한 경우의 임시방편(Fallback)입니다.
+*   **성공적인 마이그레이션을 위한 핵심 기술 요건:**
+    *   **라우팅 최적화:** 해시 라우팅(예: `/#/about`)은 검색 엔진이 개별 페이지로 인식하지 못하므로, HTML5 History API를 활용한 `BrowserRouter` 기반의 깔끔한 URL 체계로 전환해야 합니다.
+    *   **동적 메타데이터 및 구조화된 데이터:** 페이지 전환 시 React Helmet(또는 프레임워크 내장 기능)을 사용하여 `<title>`, 메타 설명, Open Graph 태그가 동적으로 업데이트되도록 처리해야 합니다. 또한 검색 엔진이 콘텐츠의 맥락을 이해하도록 JSON-LD 형태의 구조화된 데이터(Schema.org)를 삽입해야 합니다.
+    *   **시맨틱 크롤링 지원:** 내부 내비게이션 요소는 자바스크립트의 `onClick` 이벤트 대신 반드시 표준 `<a href>` 태그(또는 `<Link>` 컴포넌트)를 사용하여 봇이 링크를 따라 정상적으로 이동할 수 있게 만들어야 합니다.
+*   **마이그레이션 효과 (사례 연구):**
+    기존 CSR(Create React App)로 구축된 10,000개 상품 규모의 이커머스 사이트를 Next.js(ISR)로 마이그레이션한 결과, 검색 엔진 색인율이 40%에서 95%로 급증했습니다. 초기 응답 시간(TTFB)은 200ms에서 50ms로 단축되고 LCP(Largest Contentful Paint)는 4.2초(Poor)에서 1.8초(Good)로 개선되었으며, 오가닉 트래픽과 수익이 각각 70%, 75% 증가하는 성과를 달성했습니다.
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Static Site Generation (SSG)]], [[Client-Side Rendering (CSR)]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]], [[Next.js]]
+- **Projects/Contexts:** [[E-commerce Migration to Next.js Case Study]]
+- **Contradictions/Notes:** 동적 렌더링(Dynamic Rendering) 기술에 대해, 소스에서는 봇과 사용자에게 다른 콘텐츠를 보여주게 될 경우 클로킹(Cloaking)으로 간주되어 구글로부터 페널티를 받을 위험이 있다고 경고합니다. 2026년 기준 구글은 이 방식을 권장하지 않으며(Deprecated), 가급적 SSR이나 SSG 아키텍처로 완전히 전환할 것을 권고하고 있습니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/React Router URL Configuration.md

@@ -0,0 +1,31 @@
+# [[React Router URL Configuration]]
+
+## 📌 Brief Summary
+React Router URL Configuration은 React 애플리케이션에서 URL을 특정 UI 컴포넌트 및 동작에 매핑하고 관리하는 설정 방식을 의미합니다 [1, 2]. 이는 부모-자식 간의 중첩 라우트(Nested Routes) 구조를 정의하고, 동적 URL 세그먼트를 처리하며, 검색 엔진 최적화(SEO)에 적합한 클라이언트 사이드 라우팅 환경을 구현하는 데 필수적입니다 [1, 3, 4]. 올바른 URL 구성을 통해 복잡한 애플리케이션 레이아웃을 효과적으로 유지 관리하고, 사용자 탐색 및 상태 동기화 경험을 최적화할 수 있습니다 [5, 6].
+
+## 📖 Core Content
+* **중첩 라우팅 및 URL 계층 구조 (Nested Routes):**
+  React Router를 사용하면 URL에 따라 페이지의 공통 부분(예: 사이드바, 헤더)은 고정된 상태에서 자식 요소만 변경되는 부모-자식 관계의 레이아웃을 구축할 수 있습니다 [1]. 예를 들어, `/dashboard` URL이 부모 레이아웃을 제공하고, `/dashboard/analytics`와 같이 중첩된 URL에 접근 시 `<Outlet />` 컴포넌트를 통해 하위 컴포넌트를 렌더링하도록 구성합니다 [2]. 
+
+* **동적 세그먼트 및 404 에러 처리:**
+  `/:userId`와 같이 URL 내에 동적인 파라미터를 포함하도록 구성할 수 있으며, 이러한 값은 `useParams()` 훅을 통해 쉽게 가져올 수 있습니다 [5, 7]. 또한, 각 라우트 레벨에서 `*` 경로(Catch-all)를 구성하여 예상치 못한 URL 접근 시 전역 404 페이지나 특정 섹션별 Not Found 페이지로 유연하게 처리할 수 있습니다 [5, 7, 8].
+
+* **데이터 형태의 라우트 구성 (Route Configuration as Data):**
+  대규모 애플리케이션의 URL 구성 관리를 위해, JSX 트리가 아닌 JavaScript 객체 배열 형태로 라우트를 정의하고 `useRoutes()` 훅을 사용할 수 있습니다 [5, 7, 8]. 이는 경로 구성을 선언적 데이터로 취급하여 유지보수성과 확장성을 크게 향상시킵니다 [5, 7].
+
+* **SEO 친화적인 URL 구성 (HTML5 History API):**
+  검색 엔진 최적화를 위해서는 `example.com/#/about`과 같은 해시 라우팅(Hash Routing) 방식을 피해야 합니다 [3, 4]. 해시 기반 URL은 검색 엔진이 개별 페이지로 인식하지 않아 크롤링에 실패하게 됩니다 [3, 4, 9]. 대신 `BrowserRouter`를 통한 클린 URL(`example.com/about`)을 사용하여 모든 라우트가 개별적으로 인덱싱될 수 있도록 구성하는 것이 필수적입니다 [3, 4, 9].
+
+* **클라이언트 사이드 라우팅을 위한 서버 설정:**
+  `BrowserRouter` 기반으로 URL을 구성할 경우, 사용자가 특정 URL을 직접 입력해 접속했을 때 서버에서 404 에러를 반환하지 않도록 해야 합니다 [3]. 이를 위해 Nginx, Express, Apache 등의 백엔드 서버는 모든 라우팅 요청에 대해 단일 진입점인 `index.html`을 반환하도록 구성되어야 합니다 [3].
+
+* **URL을 활용한 상태 관리 (URL Search Params):**
+  React Router 환경에서는 임시 UI 상태(예: 리스트 뷰 vs 디테일 뷰 전환)를 독립적인 React 컴포넌트 상태(State)로 관리하기보다는 URL의 Query 파라미터를 이용해 관리하는 것이 권장됩니다 [6, 10]. 이 구성을 통해 불필요한 상태 동기화 버그를 방지하고 URL 자체를 신뢰할 수 있는 단일 출처(Source of truth)로 삼을 수 있습니다 [6, 11].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Single Page Applications (SPA)]], [[Nested Routing]], [[Client-Side Routing]], [[Search Engine Optimization (SEO)]], [[Server-Side Rendering (SSR)]], [[Core Web Vitals]]
+- **Projects/Contexts:** [[복잡한 계층형 대시보드 및 SaaS 플랫폼 UI 네비게이션 설계]], [[SPA 기반 React 웹사이트의 기술적 SEO 개선 및 SSR 마이그레이션 전략]]
+- **Contradictions/Notes:** 해시 라우팅(`HashRouter`)은 서버에 클라이언트 사이드 라우팅을 위한 추가적인 `index.html` 반환 설정을 할 필요가 없어 초기 배포 구성이 간편하다는 장점이 있습니다. 그러나 이는 URL이 제대로 크롤링되지 않아 검색 엔진 랭킹에 치명적인 악영향을 미치므로, SEO가 중요한 현대의 웹 프로덕션 환경에서는 강하게 지양됩니다 [3, 4, 12].
+
+---
+*Last updated: 2026-04-26*

00_Raw/React Router 기반의 중첩 라우트 및 코드 스플리팅 최적화 전략.md

@@ -0,0 +1,29 @@
+# [[React Router 기반의 중첩 라우트 및 코드 스플리팅 최적화 전략]]
+
+## 📌 Brief Summary
+React Router를 활용한 중첩 라우트(Nested Routes)는 애플리케이션의 복잡한 레이아웃과 계층적 내비게이션을 선언적으로 구축하는 방법입니다. 여기에 코드 스플리팅(Code Splitting) 및 지연 로딩(Lazy Loading)을 결합하면 초기 번들 크기를 줄이고 필요한 코드만 로드하여 사용자 경험과 초기 로딩 성능을 최적화할 수 있습니다. 이 두 가지 전략은 대규모 웹 애플리케이션에서 렌더링 효율성을 극대화하고 리소스의 네트워크 병목을 최소화하는 현대 프론트엔드 아키텍처의 핵심입니다.
+
+## 📖 Core Content
+
+**중첩 라우트 (Nested Routes)의 구조와 활용**
+*   **계층적 레이아웃 구성**: 중첩 라우트는 부모 라우트 내에 자식 라우트를 정의하여, 대시보드나 설정 페이지처럼 사이드바나 헤더 등의 UI는 고정하고 나머지 부분만 URL에 따라 동적으로 변경되게 하는 구조를 만듭니다 [1-4].
+*   **컴포넌트 렌더링**: `<Outlet />` 컴포넌트를 사용하여 자식 라우트가 렌더링될 위치(플레이스홀더)를 명시적으로 지정합니다 [3-6].
+*   **기본 뷰 설정**: `index` 속성을 부여하면, 사용자가 부모 라우트의 경로와 정확히 일치하는 URL로 접속했을 때 렌더링될 기본(디폴트) 자식 컴포넌트를 설정할 수 있습니다 [3, 4, 6, 7].
+*   **라우트 보호 및 관리**: 인증(Authentication) 검사 컴포넌트로 라우트를 감싸 접근 권한이 없는 사용자를 리다이렉트하는 보호된 라우트(Protected Routes) 패턴을 구현할 수 있으며, `useRoutes()` 훅을 통해 대규모 앱에서 라우트 구성을 자바스크립트 객체 데이터로 관리할 수 있습니다 [6, 8-10].
+
+**코드 스플리팅 (Code Splitting) 및 지연 로딩 (Lazy Loading) 전략**
+*   **성능 최적화 효과**: 애플리케이션을 여러 개의 작은 청크(Chunk)로 나누어 필요할 때만 로드(지연 로딩)함으로써, 초기 번들 크기를 50~100KB 수준으로 줄이고 TTFB(Time to First Byte) 및 TTI(Time to Interactive)를 크게 개선합니다 [11-14].
+*   **구현 방법**: `React.lazy()`를 사용하여 동적 임포트(Dynamic Import)를 구현하고, 데이터를 기다리는 동안 `<Suspense>` 컴포넌트를 통해 로딩 스피너와 같은 폴백(Fallback) UI를 제공하여 사용자 경험을 향상시킵니다 [15-18].
+*   **분할 전략**: 라우트 레벨에서의 스플리팅이 가장 기본적이고 효과적입니다 [17, 19]. 그 외에도 조건부 로딩, 탭 선택 시 로딩, 화면의 뷰포트에 들어올 때 로드하는 방식(Intersection Observer 활용) 등 무거운 컴포넌트 레벨의 분할을 전략적으로 적용할 수 있습니다 [18, 20, 21].
+
+**React Router 6.4+의 데이터 패칭과 UX 최적화**
+*   **워터폴(Waterfall) 문제 해결**: 전통적인 React 컴포넌트는 렌더링이 완료된 후에야 데이터를 요청하기 때문에 순차적 지연(워터폴)이 발생합니다 [22-24]. React Router v6.4 이상에서는 `loader` 함수를 도입하여 라우트 매칭과 동시에 데이터를 병렬로 가져옴으로써 이 문제를 해결합니다 [24, 25].
+*   **UX 안정성**: 데이터가 준비된 이후에만 컴포넌트가 렌더링되므로 UI 깜빡임이 사라지고, 사용자 내비게이션을 예측하여 라우트를 사전 로드(Preloading)하거나 청크 로딩 실패에 대비해 에러 바운더리(Error Boundaries)를 추가하여 우아하게 실패를 처리하는 것이 모범 사례입니다 [15, 18, 21, 24, 26].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Web Performance Optimization]], [[Core Web Vitals]], [[User Experience (UX) Design]]
+- **Projects/Contexts:** [[싱글 페이지 애플리케이션(SPA) 클라이언트 사이드 렌더링 최적화]], [[대규모 SaaS 대시보드 및 복잡한 계층적 UI 아키텍처 설계]]
+- **Contradictions/Notes:** 코드 스플리팅은 초기 로드 시간을 줄여주지만, 너무 과도하게 분할(Over-splitting)할 경우 관리해야 할 청크가 많아져 오히려 네트워크 오버헤드가 증가하고 UX가 저하될 수 있으므로, 라우트 단위나 무거운 기능(차트, 에디터 등) 위주로 전략적으로 분할해야 합니다 [19, 27, 28].
+
+---
+*Last updated: 2026-04-26*

00_Raw/React SEO Optimization.md

@@ -0,0 +1,32 @@
+# [[React SEO Optimization]]
+
+## 📌 Brief Summary
+React SEO Optimization은 클라이언트 사이드 렌더링(CSR)을 기본으로 하는 React 단일 페이지 애플리케이션(SPA)의 구조적 한계로 인해 발생하는 검색엔진 크롤링 및 인덱싱 지연 문제를 해결하는 기술적 최적화 과정입니다. 검색 엔진 봇과 AI 크롤러가 콘텐츠를 즉시 파악할 수 있도록 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 같은 렌더링 전략을 채택합니다. 또한, 라우팅 구조 개선, 동적 메타 태그 삽입, 코어 웹 바이탈(Core Web Vitals) 향상을 통해 검색 노출 순위와 사용자 경험을 동시에 극대화하는 것을 목표로 합니다.
+
+## 📖 Core Content
+*   **React SEO의 주요 과제**
+    *   **렌더링 지연 및 크롤링 예산 낭비:** 전통적인 React 앱은 초기 요청 시 빈 HTML 쉘(`<div id="root"></div>`)만 제공하므로, 구글봇 등 검색 엔진이 자바스크립트를 다운로드하고 실행해야만 콘텐츠를 파악할 수 있습니다 [1-3]. 이는 초기 HTML 인덱싱 후 자바스크립트 콘텐츠를 나중에 인덱싱하는 '두 단계 인덱싱(Two-wave indexing)'을 유발하며, 시간 지연 및 크롤링 예산 낭비를 초래합니다 [4-6].
+    *   **라우팅 및 소프트 404 문제:** SPA는 존재하지 않는 URL에 대해서도 200 OK 상태 코드를 반환하는 소프트 404 문제를 일으킬 수 있으며, 해시 라우팅(#) 사용 시 검색 엔진이 URL을 독립된 페이지로 인식하지 못하는 문제가 발생합니다 [7, 8].
+    *   **성능 및 코어 웹 바이탈 하락:** 무거운 자바스크립트 번들과 브라우저 메인 스레드를 묶는 하이드레이션(Hydration) 과정은 LCP(Largest Contentful Paint)와 INP(Interaction to Next Paint) 지표를 악화시켜 검색 순위에 악영향을 줍니다 [9-11].
+
+*   **핵심 렌더링 전략**
+    *   **서버 사이드 렌더링 (SSR):** Next.js나 Remix 같은 프레임워크를 활용하여 서버에서 완전한 HTML을 생성해 제공합니다. 크롤러가 자바스크립트 실행 없이도 완성된 콘텐츠, 메타데이터, 구조화된 데이터를 즉시 확인할 수 있어 마케팅 사이트나 동적 콘텐츠에 필수적입니다 [12-14].
+    *   **정적 사이트 생성 (SSG) 및 점진적 정적 재생성 (ISR):** 문서나 랜딩 페이지의 경우 빌드 시점에 HTML을 사전 생성(SSG)하여 가장 빠른 속도를 제공합니다 [15, 16]. 전자상거래나 뉴스 사이트처럼 자주 변경되는 콘텐츠는 백그라운드에서 정적 페이지를 업데이트하는 ISR을 적용하여 빠른 속도와 데이터의 최신성을 모두 확보합니다 [16, 17].
+    *   **동적 렌더링 (Dynamic Rendering):** 봇에게는 사전 렌더링된 HTML을, 일반 사용자에게는 CSR 기반의 앱을 제공하는 폴백(Fallback) 전략입니다 [18, 19].
+
+*   **온페이지(On-Page) 및 라우팅 최적화**
+    *   **동적 메타데이터 관리:** 사용자가 앱 내에서 이동할 때 `<title>`, `<meta>` 설명, Open Graph 태그가 동적으로 업데이트되도록 React Helmet Async 또는 Next.js의 `<Head>` 기능을 사용해야 합니다 [7, 20, 21].
+    *   **라우팅 및 링크 구조:** 해시 라우팅을 피하고 HTML5 History API(`BrowserRouter`)를 사용해 깔끔한 URL을 구성해야 합니다. 내비게이션 시 `onClick` 이벤트 대신 표준 `<a href>` 또는 `<Link>` 컴포넌트를 사용하여 크롤러의 링크 탐색을 보장해야 합니다 [7, 22, 23].
+    *   **구조화된 데이터 (JSON-LD):** 검색 엔진 및 AI 크롤러가 콘텐츠의 문맥을 이해하고 리치 스니펫(Rich Snippets)을 생성할 수 있도록 페이지에 JSON-LD 형식의 Schema 마크업을 삽입합니다 [7, 24, 25].
+
+*   **성능 최적화 (Core Web Vitals 향상)**
+    *   자바스크립트 번들 크기를 줄이기 위해 라우트 기반 코드 분할(Code Splitting)과 지연 로딩(Lazy Loading)을 적용하여 초기 로드 시간을 단축합니다 [26, 27].
+    *   하이드레이션 지연을 줄이고 INP를 개선하기 위해 인터랙티브한 컴포넌트만 선택적으로 하이드레이션하는 부분 하이드레이션(Islands Architecture)이나 React 18의 스트리밍 SSR 기술을 적극 활용합니다 [26-28].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Core Web Vitals]], [[Single Page Applications (SPA)]], [[React Router]]
+- **Projects/Contexts:** [[Next.js SEO Migration]] (Create React App 기반의 CSR 전자상거래 사이트를 Next.js ISR로 마이그레이션하여 오가닉 트래픽 70% 증가 및 인덱싱률 95% 달성을 이뤄낸 사례 [29, 30])
+- **Contradictions/Notes:** 동적 렌더링(Dynamic Rendering)의 경우 과거에는 SPA의 유용한 SEO 해결책이었으나, 2026년 기준으로는 검색엔진에 클로킹(Cloaking)으로 간주될 위험이 있어 구글에서도 명시적으로 권장하지 않으며(Deprecated), SSR이나 SSG를 사용할 수 없을 때만 제한적으로 사용해야 하는 임시방편입니다 [18, 19].
+
+---
+*Last updated: 2026-04-26*

00_Raw/SEO Integration.md

@@ -0,0 +1,19 @@
+# [[SEO Integration]]
+
+## 📌 Brief Summary
+SEO 통합(SEO Integration)은 단순히 키워드를 삽입하는 것을 넘어, 웹사이트의 기획 및 디자인 초기 단계부터 검색 엔진 가시성을 고려하여 기술적 구조, 콘텐츠 프레젠테이션, 사용자 경험(UX)을 결합하는 핵심 설계 방식입니다 [1, 2]. 특히 React와 같은 단일 페이지 애플리케이션(SPA) 환경에서는 검색 엔진 크롤러가 콘텐츠를 즉시 읽고 색인화할 수 있도록 렌더링 방식과 동적 메타데이터를 최적화하는 과정이 필수적으로 수반됩니다 [3, 4]. 이를 통해 유기적 트래픽을 유도하고 검색 엔진 랭킹을 지속적으로 높이며 다가올 AI 검색 환경에도 대비할 수 있습니다 [2, 5].
+
+## 📖 Core Content
+*   **구조적 및 시맨틱 HTML 기반 구축:** 현대적인 SEO 통합은 시맨틱 HTML5 태그(`<header>`, `<main>`, `<article>` 등)를 사용하여 크롤러가 콘텐츠의 의미와 계층 구조를 명확히 이해하도록 돕는 것에서 출발합니다 [6, 7]. 또한 타겟 키워드가 포함된 명확하고 논리적인 URL 구조를 설계하고, 사용자와 검색 엔진 모두가 원활하게 탐색할 수 있도록 체계적인 내부 링크 전략(Internal Linking Strategy)을 구축해야 합니다 [8, 9].
+*   **구조화된 데이터 마크업(Structured Data Markup):** 검색 엔진이 콘텐츠의 맥락을 이해하고 검색 결과에 리치 스니펫(리뷰, FAQ 등)을 생성하도록 JSON-LD와 같은 스키마(Schema) 마크업을 구현해야 합니다 [8, 10]. 이는 향후 AI 기반 검색 엔진(ChatGPT, Perplexity 등) 및 에이전트 크롤러가 콘텐츠를 정확하게 추출하고 인용할 수 있도록 돕는 데에도 매우 중요한 역할을 합니다 [5, 11].
+*   **SPA 및 React 환경의 렌더링 최적화:** 기본적으로 클라이언트 사이드 렌더링(CSR)을 사용하는 전통적인 React 앱은 검색 봇에게 빈 HTML 셸만 제공하므로, JS 실행을 기다리는 동안 색인이 지연되거나 크롤링 예산이 낭비되는 문제가 발생합니다 [3, 4, 12]. 이러한 한계를 극복하기 위해 Next.js나 Remix 같은 프레임워크를 활용하여 **서버 사이드 렌더링(SSR)**, **정적 사이트 생성(SSG)**, 또는 **점진적 정적 재생성(ISR)** 방식을 도입해 크롤러에게 완성된 HTML을 즉시 제공해야 합니다 [13-15].
+*   **라우팅 및 크롤링 가능성(Crawlability) 개선:** 검색 엔진이 SPA 내부의 페이지를 개별적으로 올바르게 색인하려면, 해시 라우팅(`#`)을 피하고 HTML5 History API를 활용한 깔끔한 URL을 유지해야 합니다 [16, 17]. 또한 크롤러는 자바스크립트 기반의 `onClick` 이벤트를 따라가지 못하므로, 반드시 표준 `<a href>` 또는 `<Link>` 태그를 사용해 내부 탐색 구조를 만들어야 합니다 [16-18].
+*   **동적 메타데이터 관리:** 단일 페이지 애플리케이션에서는 페이지 전환 시 브라우저가 새로고침되지 않으므로, 라우트가 변경될 때마다 `<title>`, `<meta description>`, Canonical 태그, Open Graph 태그 등이 동적으로 업데이트되도록 React Helmet과 같은 라이브러리를 사용해 메타데이터를 관리해야 합니다 [16, 17, 19].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Static Site Generation (SSG)]], [[Core Web Vitals]], [[Semantic HTML]], [[Structured Data Markup]]
+- **Projects/Contexts:** [[React SEO Guide]], [[Modern Web Design Best Practices for 2025]], [[SEO for Single Page Applications]]
+- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다. (특정 렌더링 방식을 제외하고 SEO 통합 자체에 대한 상충된 주장이나 모순은 소스에 명시되어 있지 않습니다.)
+
+---
+*Last updated: 2026-04-26*

00_Raw/Schema Markup.md

@@ -0,0 +1,27 @@
+# [[Schema Markup]]
+
+## 📌 Brief Summary
+스키마 마크업(Schema Markup) 또는 구조화된 데이터(Structured Data, JSON-LD)는 검색 엔진이 웹사이트의 콘텐츠 맥락을 텍스트 이상으로 명확히 이해하도록 돕는 기술입니다 [1-3]. 이를 통해 검색 결과에 리뷰, FAQ, 가격, 별점 등의 풍부한 스니펫(Rich Snippets)을 생성할 수 있으며, 최신 AI 개요(AI Overviews) 검색에 콘텐츠가 노출될 확률을 크게 높입니다 [1, 2, 4]. React와 같은 최신 웹 애플리케이션 아키텍처 및 SEO 최적화에서 검색 가시성을 높이기 위해 반드시 구현해야 할 핵심 요소 중 하나로 평가받습니다 [3, 5].
+
+## 📖 Core Content
+* **스키마 마크업의 목적 및 SEO 기여도:**
+  스키마 마크업은 검색 엔진에게 페이지가 '제품'인지, '블로그 게시물'인지, 'FAQ'인지 등에 대한 명확한 컨텍스트를 제공합니다 [2]. 이를 통해 검색 엔진 결과 페이지(SERP)에서 리뷰 평점, 이벤트 날짜 등의 '리치 스니펫(Rich snippets)'과 '지식 패널(Knowledge panels)'을 활성화합니다 [1, 2, 6]. 또한, 검색 엔진의 AI 개요(AI Overviews) 시스템이나 보조 기기(assistive devices)가 콘텐츠를 올바르게 해석하는 데 필수적인 구조적 안정성을 제공합니다 [4, 7].
+
+* **웹사이트 유형별 스키마 적용 사례:**
+  * **전자상거래(E-commerce):** 제품(Product) 스키마를 사용하여 검색 결과에 직접 가격, 재고 여부, 리뷰 평점을 표시하여 클릭률을 높입니다 [8].
+  * **블로그 및 뉴스(Blogs):** 기사(Article) 스키마를 활용하여 콘텐츠의 작성자, 발행일, 헤드라인 등을 명시합니다 [8].
+  * **지역 비즈니스(Local Biz):** LocalBusiness 스키마를 통해 비즈니스 주소와 영업시간을 명확히 전달합니다 [8].
+  * **기타 필수 요소:** FAQ, 빵부스러기(Breadcrumb) 스키마 등이 내비게이션과 정보 전달을 위해 널리 사용됩니다 [6, 9].
+
+* **React 및 모던 웹에서의 기술적 구현 및 주의사항:**
+  * **JSON-LD 주입:** React 앱의 경우, 문서의 `<head>` 영역에 JSON-LD 스크립트 블록을 주입하는 방식으로 스키마 마크업을 구현합니다 [3].
+  * **보안(Security) 고려사항:** 사용자 생성 콘텐츠(UGC)를 사용하여 JSON-LD 데이터를 동적으로 채울 때는 XSS(교차 사이트 스크립팅) 공격을 방지하기 위해 데이터를 반드시 적절히 살균(sanitize) 처리해야 합니다 [8].
+  * **검증 및 모니터링:** Google Rich Results Test나 Schema.org Validator와 같은 분석 도구를 사용하여 마크업 구문이 올바른지, 누락된 구조화 데이터가 없는지 지속적으로 검증해야 합니다 [8, 9].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Search Engine Optimization (SEO)]], [[Structured Data (JSON-LD)]], [[Rich Snippets]], [[Semantic HTML5]]
+- **Projects/Contexts:** [[React SEO Optimization]], [[E-commerce Product Pages]], [[AI Overviews Visibility]]
+- **Contradictions/Notes:** 소스에 따르면 React와 같은 단일 페이지 애플리케이션(SPA)에서 스키마 마크업(JSON-LD)은 트래픽을 유도하는 가장 효과적인 SEO 레버리지 중 하나임에도 불구하고 실제 개발 환경에서는 종종 가장 간과되고(underutilized) 있는 요소로 지적됩니다 [3].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Semantic HTML.md

@@ -0,0 +1,17 @@
+# [[Semantic HTML]]
+
+## 📌 Brief Summary
+시맨틱 HTML(Semantic HTML)은 단순히 콘텐츠의 시각적 형태를 보여주는 것을 넘어, 콘텐츠의 의미와 구조를 명확히 전달하기 위해 특정한 HTML5 태그를 사용하는 웹 개발 방식입니다 [1]. 이는 코드 내에서 목차와 같은 역할을 수행하여 검색 엔진과 화면 판독기(Screen Reader)가 웹사이트의 계층 구조를 정확히 이해하도록 돕습니다 [1, 2]. 결과적으로 웹 접근성(Accessibility)을 향상시키고 SEO 성능을 극대화하는 데 필수적인 요소로 작용합니다 [1, 2].
+
+## 📖 Core Content
+* **구조적 태그의 활용:** 웹 페이지를 구성할 때 의미가 불분명한 `<div>` 태그로 모든 영역을 처리하는 대신, `<header>`, `<main>`, `<article>`, `<nav>`, `<aside>`와 같은 시맨틱 태그를 사용하여 콘텐츠의 계층과 중요도를 명확하게 정의해야 합니다 [1, 2].
+* **검색 엔진 최적화(SEO) 및 AI 검색 노출 향상:** 시맨틱 HTML은 검색 엔진 봇이 콘텐츠의 의미를 쉽게 파악하고 크롤링 및 색인(Index) 작업을 원활하게 수행할 수 있도록 돕습니다 [1, 2]. 특히 AI 개요(AI Overviews)와 같은 최신 검색 결과 영역에 웹사이트의 콘텐츠가 노출될 확률을 높이는 데 직접적으로 기여합니다 [1].
+* **웹 접근성(Accessibility) 강화:** 시맨틱 구조는 훌륭한 구조를 통해 모든 사용자에게 이점을 제공합니다 [3]. 화면 판독기(Screen Readers)가 웹페이지의 계층 구조와 콘텐츠의 맥락을 정확하게 해석할 수 있게 해주어 시각 장애인 등 다양한 사용자의 웹 접근성을 크게 향상시킵니다 [2].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[SEO (Search Engine Optimization)]], [[Web Accessibility (WCAG)]], [[AI Overviews]]
+- **Projects/Contexts:** [[Modern Web Design Best Practices]], [[React SEO Optimization]]
+- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/Semantic HTML5.md

@@ -0,0 +1,17 @@
+# [[Semantic HTML5]]
+
+## 📌 Brief Summary
+시맨틱 HTML5(Semantic HTML5)는 웹페이지의 시각적 형태뿐만 아니라 콘텐츠의 의미와 구조를 명확히 전달하기 위해 특정 HTML 태그를 사용하는 방법론입니다. 이는 검색 엔진의 색인 생성, AI 크롤러의 콘텐츠 추출 및 스크린 리더를 통한 웹 접근성을 향상시키는 현대 웹사이트 아키텍처의 핵심 요소입니다 [1-3].
+
+## 📖 Core Content
+- **명확한 구조적 태그 활용:** 시맨틱 HTML5는 모든 요소를 단순한 `<div>` 태그로 묶는 것을 지양하고, `<header>`, `<main>`, `<article>`, `<nav>`, `<aside>`와 같은 의미 있는 태그를 사용합니다 [1, 2]. 이를 통해 웹사이트의 코드를 마치 잘 정리된 목차(table of contents)처럼 구성할 수 있습니다 [1].
+- **검색 엔진 및 AI 최적화 (SEO & AEO):** 시맨틱 HTML을 사용하면 구글 검색 봇이나 AI 크롤러가 콘텐츠의 계층 구조와 중요도를 정확히 이해할 수 있습니다 [2, 3]. 특히 AI 크롤러가 핵심 콘텐츠를 내비게이션과 같은 부가 요소와 구별하는 데 도움을 주어, 검색 엔진의 AI 오버뷰(AI Overviews)에 노출될 확률을 높이고 구조적 안정성을 강화합니다 [1, 3-5].
+- **웹 접근성(Accessibility) 향상:** 시맨틱 HTML5를 사용한 논리적인 구조화는 스크린 리더 및 보조 기기가 웹페이지의 콘텐츠를 올바르게 해석하고 탐색할 수 있도록 지원하여, 모든 사용자에게 더 나은 웹 경험을 제공합니다 [1, 2, 5].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Search Engine Optimization (SEO)]], [[Accessibility Compliance (WCAG)]], [[AI Search Optimization]], [[Website Structure]]
+- **Projects/Contexts:** [[Modern Website Architecture]]
+- **Contradictions/Notes:** 소스 내에서 상충하는 내용은 없습니다. 
+
+---
+*Last updated: 2026-04-26*

00_Raw/Single Page Application (SPA).md

@@ -0,0 +1,27 @@
+# [[Single Page Application (SPA)]]
+
+## 📌 Brief Summary
+Single Page Application(SPA)은 브라우저가 완전히 새로운 페이지를 로드하는 기본 방식 대신, 웹 서버에서 새로운 데이터를 받아 현재 웹 페이지를 동적으로 다시 작성하여 사용자와 상호 작용하는 웹 애플리케이션입니다 [1]. 이러한 전환은 JavaScript를 통해 클라이언트 측(브라우저)에서 이루어지며, Gmail이나 Spotify와 같이 빠르고 유동적인 앱과 같은 경험을 제공합니다 [1, 2]. 하지만 클라이언트 사이드 렌더링(CSR)에 의존하는 아키텍처 특성상 검색 엔진 크롤러와 AI 에이전트가 콘텐츠를 색인하고 렌더링하는 데 심각한 어려움을 겪는다는 단점이 존재합니다 [3-5].
+
+## 📖 Core Content
+* **동작 원리 및 장점:** 
+  SPA는 초기 셸(Shell)이 로드된 후에는 화면 전환이 즉각적으로 느껴지며, 페이지를 탐색하는 동안에도 오디오가 중단 없이 재생되는 등의 상태 유지(State Persistence)가 가능합니다 [2]. 또한 프론트엔드(UI)와 백엔드(API)를 명확히 분리하여 개발자 경험을 향상시킵니다 [2]. 기본적으로 클라이언트 사이드 렌더링(CSR) 방식을 사용합니다 [6].
+
+* **검색 엔진 최적화(SEO)의 주요 과제:**
+  * **렌더링 지연 (The CSR Gap):** 전통적인 SPA는 빈 HTML 셸을 먼저 로드한 뒤 JavaScript를 통해 콘텐츠를 렌더링합니다. Googlebot은 초기 HTML을 먼저 색인한 뒤 JavaScript를 렌더링하는 대기열(Queue)에 URL을 배치하는 두 단계(Two-wave) 색인 과정을 거치기 때문에, 렌더링 자원 한계와 타임아웃 등으로 검색 결과 반영이 며칠씩 지연되거나 콘텐츠 누락이 발생할 수 있습니다 [4, 7].
+  * **AI 크롤러의 한계:** AI 모델을 훈련시키는 크롤러(예: GPTBot, ClaudeBot)는 비용 및 규모의 문제로 JavaScript 실행을 건너뛰는 경우가 많아, 순수 SPA의 텍스트를 인식하지 못하여 AI 검색 엔진 결과나 답변에 인용되지 못할 수 있습니다 [5].
+  * **코어 웹 바이탈 (Core Web Vitals):** 크고 무거운 JavaScript 번들을 다운로드하고 파싱, 실행하느라 브라우저의 메인 스레드가 멈추는 'Hydration Bloat' 현상이 발생하기 쉽습니다. 이는 사용자 상호작용 지연을 측정하는 핵심 지표인 INP(Interaction to Next Paint) 점수를 악화시켜 페널티를 받을 수 있습니다 [5].
+  * **소프트 404 (Soft 404s) 문제:** 클라이언트 측에서 라우팅이 처리되므로, 존재하지 않는 URL에 접속해도 서버는 정상 상태(200 OK)로 빈 HTML을 반환하고 이후에야 JavaScript가 "Not Found"를 표시합니다. 이는 크롤러에게 콘텐츠가 얇은 유효 페이지로 인식되어 도메인 전체의 품질 점수를 떨어뜨리고 크롤 예산을 낭비하게 만듭니다 [8, 9].
+
+* **SPA 최적화 및 모범 사례:**
+  * **서버 기반 렌더링 도입:** SEO와 성능 문제를 근본적으로 해결하기 위해 순수 CSR 대신 Server-Side Rendering(SSR), Static Site Generation(SSG), 또는 Incremental Static Regeneration(ISR) 방식 등으로 렌더링의 주체를 서버나 빌드 과정으로 옮기는 것이 강력히 권장됩니다 [10-12].
+  * **URL 및 라우팅 설정:** 검색 엔진이 개별 페이지로 색인할 수 있도록 해시 라우팅(`/#/about`)을 피하고 HTML5 History API를 사용하여 깔끔한 URL 구조를 사용해야 합니다 [13]. 또한 내부 내비게이션은 JavaScript의 `onClick` 이벤트 핸들러가 아닌 표준 `<a href>` 태그를 사용해야 크롤러가 링크를 추적할 수 있습니다 [13, 14].
+  * **동적 메타데이터 관리:** 페이지가 전환될 때마다 `<title>`, 메타 설명(Meta Description), 캐노니컬(Canonical) 태그가 동적으로 업데이트되어야 합니다. React Helmet과 같은 도구를 사용하여 메타데이터를 렌더링에 맞게 관리해야 SEO에서 불이익을 받지 않습니다 [15, 16].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Client-Side Rendering (CSR)]], [[Server-Side Rendering (SSR)]], [[Static Site Generation (SSG)]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]], [[Interaction to Next Paint (INP)]]
+- **Projects/Contexts:** [[React Router]], [[Next.js]]
+- **Contradictions/Notes:** 검색 엔진 봇에게는 사전 렌더링된 HTML을 제공하고 일반 사용자에게는 CSR을 제공하는 'Dynamic Rendering(동적 렌더링)' 기법은 과거에 SPA의 대안으로 사용되었습니다. 하지만 2026년 기준 Google은 사용자와 봇에게 다른 콘텐츠를 보여주는 클로킹(Cloaking) 위험이 있다며 명시적으로 권장하지 않고 있으며, SSR이나 SSG를 사용할 수 없는 경우의 최후의 수단으로만 여겨야 합니다 [17, 18].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Static Site Generation (SSG).md

@@ -0,0 +1,20 @@
+# [[Static Site Generation (SSG)]]
+
+## 📌 Brief Summary
+정적 사이트 생성(SSG, Static Site Generation)은 사용자 요청 시점이 아닌 사이트 빌드(Build) 시점에 HTML 페이지를 미리 생성하는 웹사이트 렌더링 아키텍처입니다 [1]. 완성된 정적 파일은 CDN을 통해 사용자에게 즉각적으로 전송되므로, 서버 처리 시간을 단축하여 번개처럼 빠른 로딩 속도를 제공합니다 [1-3]. 압도적인 웹 성능과 검색 엔진 최적화(SEO) 효율을 제공하지만, 실시간으로 자주 변경되는 콘텐츠에는 적합하지 않은 특성이 있습니다 [2, 3].
+
+## 📖 Core Content
+- **렌더링 작동 원리:** SSG는 브라우저가 요청할 때마다 서버가 HTML을 생성하는 대신, 배포 전 빌드 단계에서 미리 모든 HTML 파일을 구성합니다 [1, 4]. 이후 사용자가 접근하면 CDN(콘텐츠 전송 네트워크)을 통해 사전 렌더링된 정적 파일을 지연 없이 즉시 제공합니다 [1, 2].
+- **성능 및 Core Web Vitals 최적화:** 서버 측의 연산 대기 시간이 없기 때문에, 최초 콘텐츠 페인트(FCP)와 상호작용 시작 시간(TTI) 지표에서 매우 뛰어나고 일관된 성능을 보입니다 [5-7]. 이는 구글의 최신 웹 성능 지표인 Core Web Vitals의 LCP(Largest Contentful Paint)를 개선하는 핵심 전략으로 꼽힙니다 [8, 9]. 
+- **SEO(검색 엔진 최적화) 극대화:** 클라이언트 사이드 렌더링(CSR) 환경에서는 검색 엔진 봇(Googlebot)이 자바스크립트를 실행해야만 콘텐츠를 볼 수 있어 색인 지연 문제가 발생합니다 [10, 11]. 반면 SSG는 이미 완전히 렌더링된 HTML 텍스트 및 메타데이터를 즉각적으로 크롤러에게 제공하므로 최고의 크롤링 접근성과 SEO 점수를 보장합니다 [4, 12-14].
+- **가장 적합한 사용 사례:** 실시간 데이터 변동이 적고 빠른 정보 전달이 중요한 공식 문서(Documentation), 블로그, 랜딩 페이지, 마케팅 웹사이트를 구축할 때 가장 이상적인 방식입니다 [1, 2, 4, 12].
+- **아키텍처의 한계:** 콘텐츠가 업데이트될 때마다 사이트 전체를 다시 빌드하고 배포해야 한다는 단점이 있습니다 [3]. 실시간 개인화 기능이나, 수만~수십만 개의 페이지를 보유한 대규모 사이트의 경우 빌드 시간이 기하급수적으로 늘어나는 치명적인 제약이 있습니다 [2, 4].
+- **모던 웹 프레임워크 지원:** Next.js, Gatsby, Hugo, Jekyll 등의 최신 프레임워크에서 SSG를 기본적으로 지원합니다 [1, 15, 16]. 최근에는 이러한 SSG의 한계를 극복하기 위해, 정적 페이지에는 SSG를 사용하고 최신 정보가 필요한 페이지에는 SSR(서버 사이드 렌더링)이나 ISR(증분 정적 재생성)을 결합하는 '하이브리드 렌더링' 아키텍처가 최우선 모범 사례로 활용되고 있습니다 [17].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Incremental Static Regeneration (ISR)]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]]
+- **Projects/Contexts:** [[Next.js]], [[Gatsby]], [[Content Delivery Network (CDN)]]
+- **Contradictions/Notes:** 소스에 따르면 SSG는 성능과 SEO 측면에서 최상의 결과를 보장하지만, 실시간 개인화(Personalization) 경험을 제공하거나 수시로 데이터가 바뀌는 거대한 웹 앱에서는 단독으로 사용할 수 없는 명확한 한계를 가집니다. 따라서, 최신 아키텍처에서는 SSG의 속도와 SSR의 신선도를 결합한 ISR 방식을 대안으로 추천하고 있습니다 [2, 18, 19].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Structured Data (Schema Markup).md

@@ -0,0 +1,21 @@
+# [[Structured Data (Schema Markup)]]
+
+## 📌 Brief Summary
+구조화된 데이터(Schema Markup)는 검색 엔진과 AI 크롤러가 웹사이트 콘텐츠의 문맥과 의미를 명확히 이해하도록 돕는 필수적인 마크업 언어(주로 JSON-LD 형식)이다 [1, 2]. 이를 통해 검색 결과에서 리뷰 별점, 가격, FAQ 등과 같은 리치 스니펫(Rich Snippets)을 생성하여 웹사이트의 가시성을 높인다 [3, 4]. 단순히 텍스트를 제공하는 것을 넘어 데이터의 구조를 정의함으로써, 기존 검색 엔진 결과 페이지(SERP)뿐만 아니라 AI 기반 검색에서도 콘텐츠가 올바르게 인용되도록 지원한다 [2, 4].
+
+## 📖 Core Content
+*   **주요 목적 및 기능:** Schema.org 마크업(주로 JSON-LD 방식)은 검색 엔진이 페이지의 콘텐츠를 단순한 텍스트가 아닌 명확한 '개체(Entity)'로 해석하도록 돕는다 [1, 2]. 이를 통해 해당 페이지가 제품인지, 블로그 게시물인지, FAQ인지, 서비스 목록인지 검색 엔진에 정확히 알릴 수 있으며, 보조 기기나 AI가 콘텐츠를 올바르게 판독하도록 돕는 구조적 안정성을 제공한다 [4, 5].
+*   **리치 스니펫 및 AI 검색 최적화:** 스키마 마크업을 적용하면 검색 결과에 별점, 이벤트 날짜, 가격, 재고 여부 등을 표시하는 리치 스니펫 및 지식 패널 노출 기회를 얻을 수 있다 [3, 4, 6]. 특히 최근에는 AI 개요(AI Overviews)나 ChatGPT, Perplexity 같은 AI 답변 엔진(Answer Engines) 크롤러가 웹사이트의 데이터를 안정적으로 파싱하고 답변에 인용할 수 있도록 돕는 데 핵심적인 역할을 한다 [2, 4, 7].
+*   **분야별 적용 사례 (Use Cases):**
+    *   **이커머스(E-commerce):** Product 스키마를 사용하여 검색 결과에 가격, 재고 상황, 리뷰 평점을 직접 표시한다 [8].
+    *   **블로그/콘텐츠 사이트:** Article 스키마를 사용하여 작성자, 발행일, 헤드라인 등을 명시한다 [8].
+    *   **지역 비즈니스(Local Business):** LocalBusiness 스키마를 활용해 주소와 영업시간을 명확히 전달한다 [8].
+*   **구현 및 유효성 검사:** React, Nuxt와 같은 모던 웹 프레임워크 환경에서 동적으로 삽입하거나 관련 SEO 모듈(예: Nuxt SEO 모듈)을 활용해 구축할 수 있다 [1, 9]. 구현 후에는 구문 오류를 디버깅하고 렌더링을 검증하기 위해 'Google Rich Results Test', 'Schema.org Validator', 'Structured Data Linter', 또는 'Digispot AI Chrome Extension'과 같은 도구를 사용하여 유효성을 검사해야 한다 [8, 10].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[SEO (Search Engine Optimization)]], [[Rich Snippets]], [[JSON-LD]], [[AI Search Optimization]], [[Semantic HTML5]]
+- **Projects/Contexts:** [[React SEO Strategy]], [[Nuxt SPA SEO]], [[AI Overviews (SGE)]]
+- **Contradictions/Notes:** 소스에 따르면, React 앱과 같은 환경에서 JSON-LD를 통해 사용자 생성 콘텐츠(UGC)를 동적으로 스키마에 주입할 때는 XSS(교차 사이트 스크립팅) 공격을 방지하기 위해 마크업 데이터를 철저히 소독(sanitize)해야 한다는 보안상 주의사항이 존재한다 [8].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Time to First Byte (TTFB).md

@@ -0,0 +1,22 @@
+# [[Time to First Byte (TTFB)]]
+
+## 📌 Brief Summary
+Time to First Byte (TTFB)는 웹 브라우저가 사용자 요청에 대한 서버의 응답으로 첫 번째 데이터 바이트를 수신하는 데 걸리는 시간(서버 응답 시간)을 측정하는 성능 지표입니다 [1, 2]. 좋은(Good) TTFB 성능의 기준은 800ms 이하로 간주됩니다 [1, 3]. TTFB는 그 자체로 Core Web Vitals의 랭킹 지표는 아니지만, LCP(Largest Contentful Paint)와 같은 핵심 로딩 성능 지표에 직접적인 영향을 미치는 중요한 보조 지표입니다 [1, 2, 4].
+
+## 📖 Core Content
+- **느린 TTFB의 주요 원인:**
+  최적화되지 않은 백엔드 처리, 데이터베이스 쿼리의 비효율성, 서버 사이드 캐싱(Server-side caching)의 부재, 그리고 오리진 서버와 사용자 간의 지리적 거리 등이 TTFB를 지연시키는 주된 병목 현상입니다 [5, 6].
+
+- **TTFB 개선 및 최적화 전략:**
+  - **서버 및 캐싱 최적화:** 브라우저 캐시 헤더(Cache-Control, ETag) 설정 및 CDN(Content Delivery Network)을 사용하여 HTML을 캐싱함으로써 서버 응답 시간을 단축합니다 [2, 7, 8]. 또한 Redis나 Memcached와 같은 서버 사이드 캐싱 기술을 도입하는 것이 권장됩니다 [7, 8].
+  - **인프라 및 프로토콜 업그레이드:** 데이터베이스 쿼리 속도를 최적화(인덱스 등)하고, HTTP/2 또는 HTTP/3 프로토콜을 채택합니다 [7, 8].
+  - **압축 및 엣지 컴퓨팅:** Gzip보다 압축 효율이 좋은 Brotli 압축을 활성화하고, Cloudflare Workers나 Vercel Edge와 같은 엣지 컴퓨팅(Edge Computing)을 활용하여 물리적 응답 거리를 줄입니다 [7, 8].
+  - **렌더링 아키텍처 개선 (React 생태계):** 전통적인 SSR(Server-Side Rendering)이나 CSR(Client-Side Rendering) 환경에서는 TTFB가 200~800ms까지 걸릴 수 있습니다 [9, 10]. 반면, ISR(Incremental Static Regeneration)이나 SSG(Static Site Generation) 같은 방식을 활용하면 정적 캐시를 통해 TTFB를 20~50ms 수준으로 획기적으로 낮출 수 있습니다 [9-12].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Largest Contentful Paint (LCP)]], [[Core Web Vitals]], [[Incremental Static Regeneration (ISR)]], [[Server-Side Rendering (SSR)]]
+- **Projects/Contexts:** [[Web Performance Optimization]], [[React SEO]]
+- **Contradictions/Notes:** 소스 내에 서로 상충되는 주장은 발견되지 않았습니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/User Experience (UX).md

@@ -0,0 +1,31 @@
+# [[User Experience (UX)]]
+
+## 📌 Brief Summary
+현대 웹 디자인에서 사용자 경험(User Experience, UX)은 사용자가 웹사이트와 상호작용하는 전반적인 경험을 의미하며, 빠르고 직관적이며 접근하기 쉬운 여정을 제공하는 것을 목표로 합니다 [1, 2]. 2025년의 UX는 단순한 시각적 미학을 넘어, 비즈니스 목표(전환율 상승, 참여도 증가 등)와 검색 엔진 최적화(SEO)를 견인하는 전략적 핵심 요소로 기능하고 있습니다 [3-5]. 우수한 UX는 인지적 부하를 줄이고, 마찰을 제거하며, 사용자의 의도와 행동 사이의 간극을 최소화하는 것을 핵심으로 삼습니다 [6-8].
+
+## 📖 Core Content
+* **사용자 중심 설계(User-Centered Design)와 인지적 명확성:**
+  효과적인 UX는 단순한 가정이나 미적 요소가 아닌, 연구와 테스트를 통해 사용자의 니즈와 행동, 목표를 깊이 이해하는 사용자 중심 설계 방법론에 기반합니다 [9]. 사용자가 고민하지 않고 목적지에 도달할 수 있도록 직관적인 내비게이션과 시각적 계층 구조(Visual Hierarchy)를 사용하여 인지적 부하를 줄이는 것이 중요합니다 [6, 10, 11]. 특히 복잡한 SaaS 플랫폼 등에서는 모든 기능을 한 번에 보여주기보다 사용자의 역할에 맞춰 필요한 정보만 점진적으로 노출하는 '점진적 공개(Progressive Disclosure)' 전략이 활용됩니다 [7].
+
+* **성능 최적화 및 코어 웹 바이탈(Core Web Vitals):**
+  웹사이트의 로딩 속도는 UX의 핵심 구성 요소입니다 [12]. 구글의 코어 웹 바이탈(LCP, INP, CLS)은 웹사이트의 로딩 속도, 상호작용 응답성, 시각적 안정성을 측정하며, 이는 실제 사용자 경험의 품질을 나타냅니다 [13-15]. 페이지 반응이 느리거나 콘텐츠 로딩 중 레이아웃이 불안정하게 흔들리면 사용자는 좌절감을 느끼고 이탈하게 되며, 이는 전환율 감소로 직결됩니다 [13, 16]. 
+
+* **접근성(Accessibility)과 포용적 설계:**
+  WCAG(Web Content Accessibility Guidelines) 표준을 준수하여 장애가 있는 사용자를 포함한 모든 사람에게 평등한 디지털 경험을 제공하는 것은 필수적인 UX 관행입니다 [17, 18]. 명확한 색상 대비, 키보드 내비게이션 지원, 화면 낭독기(Screen Reader) 호환성 및 복잡한 제스처에 대한 대안 제공 등은 모든 사용자를 위한 포용적이고 직관적인 웹 환경을 조성합니다 [19-21].
+
+* **적응형 UX(Adaptive UX) 및 AI 기반 개인화:**
+  2025년의 UX는 사용자 행동, 위치, 기기 유형 및 과거 상호작용 데이터를 바탕으로 인터페이스와 콘텐츠를 동적으로 조정하는 적응형 UX를 특징으로 합니다 [22]. AI를 활용한 예측적 UX는 사용자가 묻기 전에 필요로 하는 서비스나 콘텐츠를 추천하여 마찰을 줄이고 개인화된 경험을 제공함으로써 전환율을 크게 향상시킵니다 [22, 23].
+
+* **마이크로 인터랙션(Micro-interactions):**
+  사용자의 행동에 대해 즉각적인 피드백을 제공하는 미세한 애니메이션(버튼 색상 변경, 로딩 상태 표시 등)은 사용자의 불확실성을 줄이고 인터페이스가 살아있고 반응성이 뛰어나다는 느낌을 줍니다 [24, 25]. 이러한 시각적 신호는 전반적인 사용성을 높이고 페이지 체류 시간을 연장하는 데 도움을 줍니다 [26, 27].
+
+* **모바일 퍼스트 및 크로스 브라우저 호환성:**
+  글로벌 웹 트래픽의 절반 이상이 모바일에서 발생함에 따라 모바일 퍼스트 반응형 설계는 선택이 아닌 필수입니다 [28, 29]. 작은 화면의 제약에 맞춰 가장 중요한 콘텐츠와 기능을 우선 배치해야 하며, 동시에 크롬, 사파리 등 다양한 브라우저와 기기 환경에서 레이아웃 깨짐이나 글리치 없이 동일하고 일관된 사용자 경험을 보장해야 합니다 [28, 30, 31].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[User-Centered Design]], [[Visual Hierarchy]], [[Accessibility Compliance (WCAG)]], [[Adaptive UX]], [[Micro-interactions]], [[Mobile-First Responsive Design]]
+- **Projects/Contexts:** [[SaaS & Technology Transformations]], [[E-Commerce Redesign Case Studies]], [[Web Performance Optimization Guidelines]]
+- **Contradictions/Notes:** 소스들은 공통적으로 디자인의 심미성보다 사용자 경험(UX)의 기능적 측면(속도, 명확성, 접근성)이 검색 엔진 최적화(SEO)와 비즈니스 수익성에 훨씬 더 중대한 영향을 미친다고 강조합니다 [3, 4, 32, 33].
+
+---
+*Last updated: 2026-04-26*

00_Raw/법적 규제 및 EAA 2025 마감 기한 대응 프로젝트.md

@@ -0,0 +1,22 @@
+# [[법적 규제 및 EAA 2025 마감 기한 대응 프로젝트]]
+
+## 📌 Brief Summary
+이 프로젝트는 웹 접근성(Web Accessibility)에 대한 전 세계적인 법적 요구 사항, 특히 2025년 6월 28일에 발효되는 유럽 접근성법(EAA) 마감 기한에 맞춰 디지털 자산을 최적화하는 과정입니다 [1, 2]. 전자상거래, 뱅킹, 교통 등 다양한 디지털 서비스를 제공하는 기업들이 법적 제재를 피하고 모든 사용자에게 동등한 사용성을 제공하기 위해 웹사이트와 앱을 WCAG 2.1 Level AA 표준(또는 이에 상응하는 EN 301 549)에 맞게 개편하는 것을 목표로 합니다 [2, 3]. 최신 웹 아키텍처 및 UX 설계에서 접근성은 더 이상 선택이 아닌 법적 필수 요건으로 자리 잡고 있습니다 [4].
+
+## 📖 Core Content
+- **EAA 2025 시행 및 적용 범위:** 2025년 6월 28일부터 발효되는 유럽 접근성법(EAA)은 엄격한 접근성 준수 기준을 요구하며, 이는 정부 사이트뿐만 아니라 전자상거래, 뱅킹, 통신, 교통, 발권, 전자책 등의 디지털 서비스를 제공하는 유럽 연합(EU) 내 민간 기업에도 적용됩니다 [1, 2].
+- **준수해야 할 기술 표준 (WCAG 2.1 AA):** EAA 규정을 준수하기 위해 기업의 디지털 제품은 WCAG 2.1 Level AA에 직접적으로 매핑되는 기술 표준인 'EN 301 549'를 충족해야 합니다 [2]. 미국의 ADA(미국 장애인법) 및 섹션 508, 영국의 평등법(Equality Act), 캐나다의 AODA 등 대부분의 글로벌 접근성 법안 역시 WCAG 2.1 AA를 기준으로 삼고 있습니다 [3, 5, 6]. 
+- **조직의 대응 및 비즈니스 영향:** 접근성 준수 여부는 B2B 거래에서도 매우 중요해졌습니다. 제품 구매자나 조달팀은 입찰 제안서(RFP)에서 VPAT(자발적 제품 접근성 템플릿)와 WCAG 준수 증명을 점점 더 많이 요구하고 있습니다 [7]. 웹사이트가 이러한 표준을 준수하지 않을 경우 소송, 사용자 경험 악화, 심각한 수익 손실 및 평판 훼손 등의 법적·비즈니스적 위험이 발생할 수 있습니다 [3, 8].
+- **성공적인 대응을 위한 실무 지침 (접근성 최적화 체크리스트):**
+  - **콘텐츠 인지 가능성:** 모든 이미지와 아이콘에 대체 텍스트(Alt text)를 추가하고, 오디오 및 비디오 콘텐츠에는 자막이나 스크립트를 제공해야 합니다 [9]. 또한, 명확한 색상 대비와 가독성 높은 폰트를 사용해야 합니다 [9].
+  - **조작 가능성 보장:** 마우스를 사용할 수 없는 사용자를 위해 키보드만으로 모든 내비게이션이 가능하도록 지원해야 하며, 포커스 표시기(Focus indicators)를 항상 시각적으로 노출해야 합니다 [10]. 사용자가 드래그(Dragging)나 호버(Hover) 동작 없이도 작업을 완료할 수 있는 대안을 제공해야 합니다 [10, 11].
+  - **구조와 폼(Form) 개선:** 적절한 헤딩(Heading) 순서(H1 → H2 → H3)를 사용하고, 폼 필드에 일관된 레이블을 지정하여 사용자의 입력 오류를 방지하거나 복구할 수 있도록 도와야 합니다 [10].
+  - **테스트 및 유지보수:** 화면 판독기(Screen reader), 키보드 내비게이션 등 실제 기기와 보조 기술을 혼합하여 테스트해야 하며, 개발 워크플로우에 Axe 기반의 자동화된 접근성 스캔을 통합하여 지속적으로 규정 준수를 모니터링해야 합니다 [10-12].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Web Content Accessibility Guidelines (WCAG)]], [[Americans with Disabilities Act (ADA) Compliance]], [[Inclusive UX Design]]
+- **Projects/Contexts:** [[프론트엔드 성능 최적화 및 UX 개선 프로젝트]], [[다국어 지원 및 글로벌 웹사이트 아키텍처 구축]]
+- **Contradictions/Notes:** 국가별로 적용되는 법률 이름과 정확한 요구 시점에는 차이가 있습니다. 미국의 경우 주로 공공 기관과 연방 계약업체가 ADA 및 Section 508에 따라 WCAG 2.1 AA를 따르는 반면, EU의 EAA는 2025년 6월부터 특정 디지털 서비스를 제공하는 모든 정부 및 민간 기업에까지 광범위하게 의무화된다는 점에서 민간 영역에 미치는 영향력이 매우 강력합니다 [1, 2, 6].
+
+---
+*Last updated: 2026-04-26*

00_Raw/웹사이트 리디자인 및 모바일 우선주의 UX 최적화 프로세스.md

@@ -0,0 +1,31 @@
+# [[웹사이트 리디자인 및 모바일 우선주의 UX 최적화 프로세스]]
+
+## 📌 Brief Summary
+웹사이트 리디자인 및 모바일 우선주의 UX 최적화 프로세스는 데스크톱 기반 디자인을 축소하는 대신, 가장 작은 모바일 화면부터 핵심 기능과 콘텐츠를 설계하고 점차 확장해 나가는 현대 웹 엔지니어링의 필수 전략입니다 [1, 2]. 전 세계 웹 트래픽의 58% 이상이 모바일에서 발생하고 구글이 모바일 우선 색인(Mobile-first indexing)을 적용함에 따라, 이는 사용자의 참여도와 검색 엔진 최적화(SEO) 순위를 결정짓는 핵심 요소가 되었습니다 [1, 3, 4]. 성공적인 리디자인을 위해서는 직관적인 네비게이션, 사용자 행동 데이터에 기반한 지속적인 테스트, 그리고 로드 속도를 획기적으로 줄이는 기술적 개선이 병행되어야 합니다 [5-8].
+
+## 📖 Core Content
+
+* **모바일 우선주의 설계(Mobile-First Design)의 핵심 원칙**
+  모바일 우선 접근법은 단순히 화면 크기를 맞추는 반응형 디자인을 넘어선 개념입니다. 가장 작은 화면(일반적으로 320px 기준)을 먼저 설계함으로써 개발자가 가장 중요한 콘텐츠와 기능의 우선순위를 강제적으로 정하게 만듭니다 [1, 2]. 
+  * **기술적 구현:** CSS Grid와 Flexbox를 활용해 깨지지 않고 유연하게 적응하는 레이아웃을 구축하며, `<picture>` 요소와 `srcset` 속성을 사용해 사용자의 기기 해상도에 맞는 최적화된 이미지를 제공해야 합니다 [2]. 실제 아이폰, 안드로이드 기기에서의 테스트가 강력히 권장됩니다 [2].
+  * **UX 설계 팁:** 모바일 사용자는 주의력이 짧기 때문에 단일 열(Single-column) 레이아웃을 적용하고, 스크롤 없이 볼 수 있는 영역(Above-the-fold)에 강력한 CTA(Call-to-Action)를 배치해야 합니다 [8]. 스크롤을 따라다니는 스티키 바(Sticky bars)와 클릭 투 콜(Click-to-call) 버튼을 활용하면 모바일 환경의 마찰을 줄일 수 있습니다 [8].
+
+* **웹사이트 리디자인 및 UX 최적화 단계**
+  현대적인 리디자인 프로세스는 시각적인 치장에 그치지 않고 데이터와 사용자 중심의 연구에 기반합니다 [9].
+  1. **감사 및 로드맵 수립:** 현재 웹사이트의 디지털 상태를 평가하고, 사용자에게 미치는 영향을 기준으로 취약점을 식별하여 개선 로드맵을 작성합니다 [10, 11]. 
+  2. **콘텐츠 우선 설계(Content-First Strategy):** 로렘 입숨(Lorem Ipsum)과 같은 더미 텍스트를 배제하고 실제 텍스트와 이미지, 데이터를 기반으로 디자인을 시작하여 레이아웃이 메시지를 제약하지 않도록 합니다 [12, 13].
+  3. **사용자 행동 분석 및 테스트:** 페르소나를 구축한 후, 히트맵, 세션 녹화 기능 등을 통해 사용자의 실제 상호작용 데이터를 분석합니다 [6]. 이후 A/B 테스트 및 다변량 테스트(Multivariate testing)를 점진적으로 도입해 디자인 변경 사항의 효과를 데이터로 검증합니다 [7, 14].
+
+* **실제 비즈니스 성과를 창출한 리디자인 사례(Case Studies)**
+  잘 설계된 리디자인은 사용자 경험을 개선하는 것은 물론 실질적인 비즈니스 지표(수익, 이탈률 등)를 크게 향상시킵니다 [15].
+  * **Allbirds (이커머스):** 브랜드의 환경 보호 메시지를 별도 페이지에 숨기는 대신 제품 페이지 여정에 통합했습니다. PWA(Progressive Web App) 기술을 통해 페이지 로드 속도를 89% 단축시켰고, 장바구니 포기율을 43% 낮추었으며, 모바일 전환율을 156% 증가시켰습니다 [16-18].
+  * **구독 박스 서비스:** 복잡한 구독 취소 과정으로 인해 이탈률이 높았던 문제를 해결하기 위해, 사용자가 계정을 완전히 해지하는 대신 '일시 정지(Pause)' 및 '건너뛰기(Skip)'를 선택할 수 있도록 구독 관리 흐름을 리디자인하여 이탈률을 52% 줄였습니다 [19-21].
+  * **다중 브랜드 마켓플라이스:** 벤더(판매자)를 위한 등록 프로세스를 기존 12단계에서 4단계로 단순화하는 맞춤형 대시보드를 구축해 벤더 가입률을 234% 상승시키고 지원 티켓 발생을 45% 감소시켰습니다 [19, 22, 23].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals 최적화]], [[콘텐츠 우선 설계(Content-First Design)]], [[SEO와 모바일 우선 색인(Mobile-First Indexing)]]
+- **Projects/Contexts:** [[A/B 테스트 및 데이터 기반 UX 검증 환경]], [[이커머스 및 SaaS 플랫폼 리디자인 프로젝트]]
+- **Contradictions/Notes:** 데스크톱과 모바일 환경의 최적화가 모두 요구되나, 모바일 사용자는 네트워크 변동성이 크고 프로세서 성능이 상대적으로 낮기 때문에 모바일 기기에서의 Core Web Vitals(특히 INP 및 LCP) 점수는 데스크톱과 차이를 보일 수 있으며, 반응형 이미지 및 사용하지 않는 자바스크립트 축소 등의 추가적인 최적화가 필수적이라는 점을 유의해야 합니다 [24-26].
+
+---
+*Last updated: 2026-04-26*

10_Wiki/Topics/AI/Frontend-Architecture.md

@@ -0,0 +1,30 @@
+---
+id: FE-ARCH-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [frontend, software-architecture, web-development, react, state-management]
+last_reinforced: 2026-04-26
+---
+
+# [[Frontend Architecture (프론트엔드 아키텍처)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "복잡한 UI 상태를 예측 가능한 흐름으로 관리하고, 사용자 경험(UX)을 기술적 구조로 구현하라" — 단순한 화면 구성을 넘어 컴포넌트 설계, 상태 관리 전략, 렌더링 성능 최적화, 그리고 에이전트 인터랙션을 아우르는 현대 웹 기술의 설계도.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** UI를 독립적인 컴포넌트로 분리하고, 단방향 데이터 흐름(Unidirectional Data Flow)을 통해 상태 변화에 따른 부수 효과를 제어하는 선언적 UI 아키텍처 패턴.
+- **핵심 구성 요소:**
+    - **Component-Driven Development (CDD):** 재사용 가능한 원자적 단위의 UI 설계.
+    - **State Management:** 전역 상태(Redux, Zustand)와 로컬 상태의 균형.
+    - **Rendering Strategies:** CSR, SSR, SSG, ISR 등 비즈니스 요구사항에 맞는 렌더링 방식 선택.
+    - **Micro Frontends:** 대규모 애플리케이션을 독립적으로 배포 가능한 작은 단위로 분리.
+    - **AI-Driven UI:** 에이전트의 응답에 따라 실시간으로 변화하는 동적 인터페이스(Generative UI).
+- **의의:** 복잡해지는 웹 애플리케이션의 유지보수성을 확보하고, 초저지연 인터랙션을 보장함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 단순히 정적 페이지를 보여주던 방식에서, 수만 개의 상태를 실시간으로 동기화하고 에이전트와 대화하는 '지능형 애플리케이션 플랫폼'으로 진화.
+- **정책 변화:** Antigravity 프로젝트는 에이전트의 지식 탐색 결과와 지식 지도를 시각화하기 위해 최신 Next.js 기반의 서버 컴포넌트 아키텍처를 표준으로 채택함.
+
+## 🔗 지식 연결 (Graph)
+- [[System-Design-for-AI-Scale]], [[UX-Design]], [[Context-Aware-Computing]], [[Domain-Driven-Design-DDD]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Frontend-Architecture.md]]

10_Wiki/Topics/AI/Functional-Programming.md

@@ -1,27 +1,29 @@
 ---
-id: P-REINFORCE-AI-FUNCTIONAL
+id: FP-001
 category: "[[10_Wiki/💡 Topics/AI]]"
-confidence_score: 0.98
-tags: [Programming, FunctionalProgramming, Declarative, Immutability]
-last_reinforced: 2026-04-20
+confidence_score: 1.0
+tags: [programming, functional-programming, immutability, pure-functions, software-engineering]
+last_reinforced: 2026-04-26
 ---
 
-# [[Functional-Programming]] (함수형 프로그래밍)
+# [[Functional Programming (함수형 프로그래밍)]]
 
 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "상태를 바꾸지 말고, 명확한 수식을 선언하라." 프로그램의 실행보다 데이터의 변환(Transformation)에 집중하며, 부작용(Side Effect)이 없는 순수 함수를 조합하여 복잡성을 관리하는 패러다임이다.
+> "데이터의 상태 변화를 피하고, 순수 함수들의 조합으로 견고한 로직을 조립하라" — 계산을 수학적 함수의 평가로 취급하고 상태 변경 및 가변 데이터를 멀리하여, 병렬 처리에 유리하고 버그가 적은 소프트웨어를 만드는 프로그래밍 패러다임.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-- **Core Concepts**:
-    - **Pure Functions**: 동일한 입력에 언제나 동일한 출력. 외부 상태를 건드리지 않음.
-    - **Immutability**: 데이터는 한 번 생성되면 변하지 않음. 변경이 필요하면 복사본 생성.
-    - **First-class Citizens**: 함수를 변수에 담고, 인자로 전달하고, 결과로 리턴할 수 있음.
-    - **Declarative**: '어떻게(How)'가 아니라 '무엇(What)'을 하는지 명시함.
-- **Benefits**: 테스트와 디버깅이 압도적으로 쉽고, 병렬 처리에 매우 유리하다.
+- **추출된 패턴:** "어떻게(How)" 연산할지보다 "무엇(What)"인지 정의하고, 입력을 넣으면 항상 동일한 출력이 나오는 불변성(Immutability)과 참조 투명성(Referential Transparency)을 유지하는 선언적 코딩 패턴.
+- **핵심 개념:**
+    - **Pure Functions:** 외부 상태를 참조하거나 변경하지 않는 함수. 테스트와 디버깅이 매우 쉬움.
+    - **First-class Citizens:** 함수를 변수에 담고, 인자로 넘기고, 결과로 반환할 수 있음.
+    - **Higher-order Functions:** 함수를 파라미터로 받거나 결과로 반환하는 함수 (map, filter, reduce 등).
+    - **Immutability:** 한 번 생성된 데이터는 수정하지 않고 항상 새로운 데이터를 생성하여 전달.
+- **의의:** 동시성(Concurrency) 문제가 발생하는 멀티코어 환경과 대규모 분산 시스템에서 데이터 일관성을 유지하는 가장 강력한 무기.
 
-## ⚠️ 모순 및 업데이트 (RL Update)
-- 순수 함수형은 현실 세계의 '상태 변화'나 'I/O'를 처리하기가 매우 까다롭다(모나드 등의 난해한 개념 필요). 따라서 현대의 개발 주류는 객체 지향의 구조적 장점과 함수형의 논리적 안정성을 결합한 **'멀티 패러다임(Multi-paradigm)'** 방식으로 정착하고 있다.
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 객체지향(OOP)이 유일한 정답이던 시대를 지나, 데이터 스트림 처리와 비동기 프로그래밍이 중요해지면서 함수형 패러다임이 모든 주류 언어(JS, Java, Python 등)에 깊숙이 침투함.
+- **정책 변화:** Antigravity 프로젝트는 에이전트의 사고 흐름(Chain of Thought)을 처리하는 파이프라인 설계 시, 각 단계를 순수 함수로 정의하여 재현 가능성과 안정성을 확보함.
 
 ## 🔗 지식 연결 (Graph)
-- Related: [[JavaScript-Modern-Patterns]] , [[Reactive-Programming]]
-- Key Concept: [[Referential-Transparency]]
+- [[Determinism-in-Computing]], [[Distributed-Computing]], [[Software-Architecture-Patterns]], [[Parallel-Computing]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Functional-Programming.md]]

10_Wiki/Topics/AI/Fuzzy-Logic.md

@@ -0,0 +1,28 @@
+---
+id: FUZZY-LOGIC-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, fuzzy-logic, logic, control-theory, robotics]
+last_reinforced: 2026-04-26
+---
+
+# [[Fuzzy Logic (퍼지 논리)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "참과 거짓 사이의 무수히 많은 회색 지대를 수학적으로 수용하여 인간다운 판단력을 구현하라" — 0(거짓)과 1(참) 사이의 소수점 값을 허용하는 소속 함수(Membership Function)를 통해, 현실 세계의 모호한 경계와 불확실성을 다루는 논리 체계.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "조금", "적당히", "매우"와 같은 언어적 변수를 수치 범위로 변환(Fuzzification)하고, 이를 바탕으로 규칙 기반 추론을 수행한 뒤 다시 구체적인 행동 값으로 변환(Defuzzification)하는 제어 패턴.
+- **주요 특징:**
+    - **Membership Function:** 어떤 집단에 속하는 정도(Degree)를 정의 (예: 온도 25도는 '적당함'에 0.8, '더움'에 0.2 소속).
+    - **Fuzzy Rules:** "만약 온도가 '조금 더우면', 냉각 팬의 속도를 '적당히 빠르게' 하라"와 같은 직관적 규칙 적용 가능.
+    - **Robustness:** 입력값의 미세한 변화에도 출력이 급격히 변하지 않고 부드럽게 반응함.
+- **의의:** 정교한 수학적 모델링이 어려운 복잡한 시스템(가전제품 제어, 차량 브레이크 시스템, 게임 캐릭터의 성격 표현 등)에서 효율적인 해법 제공.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 엄격한 수식만이 정답이라 믿던 고전적 제어론에서 벗어나, 인간의 경험적 지식을 시스템에 녹여낼 수 있는 유연한 도구로 자리매김.
+- **정책 변화:** Skybound 프로젝트의 적 기체 AI는 플레이어와의 거리에 따라 '도망', '견제', '돌격' 상태를 퍼지 논리로 부드럽게 전환하여, 끊기지 않는 자연스러운 기동을 보여줌.
+
+## 🔗 지식 연결 (Graph)
+- [[Control-Theory]], [[Expert-Systems]], [[Artificial-Life]], [[Decision-Making]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Fuzzy-Logic.md]]

10_Wiki/Topics/AI/G-Stack-Integration-Guide.md

@@ -0,0 +1,31 @@
+---
+id: GSTACK-GUIDE-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [antigravity, g-stack, integration, architecture, project-standard]
+last_reinforced: 2026-04-26
+---
+
+# [[G-Stack Integration Guide (G-Stack 통합 가이드)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "포괄적인 데이터 수집과 구체적인 구현(Concreteness)을 통해 에이전트의 지능을 실제 가치로 치환하라" — Antigravity 프로젝트의 핵심 운영 체계인 G-Stack의 원칙을 모든 레포지토리와 에이전트 스킬에 이식하기 위한 통합 기술 가이드라인.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "추상적 추론보다는 구체적 데이터와 코드"를 우선시하고, 시스템의 모든 로그와 지식을 자산화하여 에이전트의 피드백 루프를 완성하는 정렬(Alignment) 패턴.
+- **3대 핵심 통합 원칙:**
+    - **Boil the Lake (포괄적 처리):** 특정 문제 해결을 위해 파편화된 데이터가 아닌, 가용 가능한 모든 지식(Wiki, Raw, Git)을 인덱싱하고 연결함.
+    - **Concreteness (구체성):** 모호한 답변 대신 실행 가능한 코드, 검증된 수치, 직접적인 파일 링크를 제공함.
+    - **Product Thinking (제품적 사고):** 기술적 구현이 사용자에게 어떤 도구적 가치를 주는지 항상 자문하고 UI/UX에 반영함.
+- **통합 체크리스트:**
+    - 모든 에이전트 출력물에 `Rationale`과 `Confidence Score`가 포함되었는가?
+    - 새로운 지식 생성 시 `10_Wiki`의 카테고리 구조를 준수했는가?
+    - `00_Raw` 데이터 처리 시 `Datacollector`의 파이프라인을 거쳤는가?
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 초기 Antigravity 프로젝트는 단순한 챗봇의 나열이었으나, G-Stack 통합을 통해 지식 기반의 자율적 문제 해결 시스템으로 진화함.
+- **정책 변화:** 모든 에이전트는 작업 시작 전 본 가이드를 참조하여 자신의 작업 범위와 G-Stack 원칙 준수 여부를 자가 점검해야 함.
+
+## 🔗 지식 연결 (Graph)
+- [[GStack-Core-Principles]], [[Antigravity-Project-Overview]], [[Knowledge-Gardening-Protocol]], [[Agent-Interaction-Contracts]]
+- **Raw Source:** [[10_Wiki/Topics/AI/G-Stack-Integration-Guide.md]]

10_Wiki/Topics/AI/GAN.md

@@ -1,32 +1,28 @@
 ---
-id: P-REINFORCE-AUTO-GANN-001
+id: GAN-001
 category: "[[10_Wiki/💡 Topics/AI]]"
-confidence_score: 0.98
-tags: [auto-reinforced, gan, generative-adversarial-networks, deep-learning, unsupervised-learning, ian-goodfellow]
-last_reinforced: 2026-04-20
+confidence_score: 1.0
+tags: [ai, generative-model, gan, neural-networks, image-synthesis]
+last_reinforced: 2026-04-26
 ---
 
-# [[GAN]]
+# [[GAN (Generative Adversarial Networks, 생성적 적대 신경망)]]
 
 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "위조지폐범과 경찰의 지독한 추격전: 속이려는 자(Generator)와 잡으려는 자(Discriminator)를 서로 경쟁시켜, 인간이 진짜와 구별할 수 없을 만큼 정교한 가짜 이미지를 스스로 만들어내게 하는 혁신적인 생성 모델."
+> "위조지폐범과 경찰의 치열한 술래잡기를 통해, 데이터의 본질을 완벽하게 복제하라" — 생성자(Generator)와 판별자(Discriminator)라는 두 신경망이 서로를 속이고 간파하며 함께 성장하여, 실제와 구분할 수 없는 가상 데이터를 생성하는 아키텍처.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-생성적 적대 신경망(GAN, Generative-Adversarial-Networks)은 두 개의 신경망이 서로 대결하며 학습하는 프레임워크입니다. (이안 굿펠로우 제안)
-
-1.  **두 핵심 구조**:
-    *   **Generator (생성자)**: 무작위 노이즈로부터 진짜 같은 데이터를 만듦 (위조지폐범).
-    *   **Discriminator (판별자)**: 입력받은 데이터가 진짜(학습 데이터)인지 가짜(생성물)인지 판별 (경찰).
-2.  **학습 결과**:
-    *   판별자가 더 이상 진짜와 가짜를 구분하지 못할 때(확률 0.5) 최적의 생성 능력을 갖게 됨. (Unsupervised-Learning의 정수)
-3.  **활용**:
-    *   딥페이크, 고해상도 이미지 복원, 게임 그래픽 향상, 데이터 증강.
+- **추출된 패턴:** "경쟁을 통한 진화"라는 동역학적 관점을 학습 프로세스에 도입하여, 명시적인 손실 함수 설계 없이도 복잡한 데이터 분포를 근사하는 적대적 학습 패턴.
+- **작동 원리:**
+    - **Generator:** 무작위 노이즈를 입력받아 실제 데이터와 유사한 가짜 샘플 생성.
+    - **Discriminator:** 입력된 샘플이 실제 데이터인지 생성자가 만든 가짜인지 판별.
+    - **Adversarial Loss:** 생성자는 판별자를 속이려 하고, 판별자는 속지 않으려 하는 제로섬 게임 과정을 통해 모델 고도화.
+- **의의:** 이미지 생성, 스타일 변환, 텍스트-이미지 합성 등 창의적 AI 영역을 개척했으며, 딥페이크 기술의 기술적 토대가 됨.
 
 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
-- **과거 데이터와의 충돌**: 과거에는 학습이 극도로 불안정하고 '모드 붕괴(Mode Collapse, 똑같은 그림만 그리는 현상)' 정책에 시달렸으나, 현대 정책은 WGAN, StyleGAN 등 손실 함수와 아키텍처 개선 정책을 통해 이를 정복함(RL Update).
-- **정책 변화(RL Update)**: 최근에는 확산 모델(Diffusion-Models) 정책에 밀려 생성 주도권 정책을 잃었으나, 생성 속도가 압도적으로 빠르다는 장점을 살려 실시간 그래픽 렌더링이나 가벼운 생성 서비스 정책에서 여전히 핵심 기술로 사용됨.
+- **과거 데이터와의 충돌:** 학습이 매우 불안정하고 모드 붕괴(Mode Collapse) 문제가 고질적이었으나, WGAN, StyleGAN 등 후속 모델을 통해 안정성과 품질을 비약적으로 향상시킴.
+- **정책 변화:** Antigravity 프로젝트는 가상 자산(아이콘, 텍스트 배경 등)의 스타일 일관성을 유지하기 위해 GAN 기반의 스타일 전이 기술을 보조적으로 활용함.
 
 ## 🔗 지식 연결 (Graph)
-- [[Gen-AI]], [[Diffusion-Models]], [[Game-Theory]], [[CV_Synthesis]], [[Unsupervised-Learning]]
-- **Modern Tech/Tools**: StyleGAN3, Pix2Pix, CycleGAN, NVIDIA CANVAS.
----
+- [[Generative-AI-Impact]], [[Deepfake-Technology]], [[Diffusion-Models]], [[Variational-Autoencoders-VAE]]
+- **Raw Source:** [[10_Wiki/Topics/AI/GAN.md]]

10_Wiki/Topics/AI/GNN.md

@@ -0,0 +1,29 @@
+---
+id: GNN-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, deep-learning, gnn, graph-neural-networks, relational-data]
+last_reinforced: 2026-04-26
+---
+
+# [[GNN (Graph Neural Networks, 그래프 신경망)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "개별 데이터가 아닌, 데이터들 사이의 관계(Edge)와 연결망 속에 숨겨진 맥락을 학습하라" — 그래프 구조를 직접 입력으로 받아 노드 간의 메시지 전달(Message Passing)을 통해 정점의 특징을 업데이트하고, 복잡한 네트워크 패턴을 추론하는 신경망 아키텍처.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 이웃 노드들로부터 정보를 수집(Aggregation)하고 자신의 상태를 갱신(Update)하는 과정을 반복하여, 그래프 전체의 구조적 특징을 로컬 노드에 응축시키는 관계 기반 학습 패턴.
+- **주요 태스크:**
+    - **Node Classification:** 특정 노드의 카테고리나 특성 예측.
+    - **Link Prediction:** 두 노드 사이에 새로운 관계가 생길지 예측 (추천 시스템의 핵심).
+    - **Graph Classification:** 분자 구조의 독성 여부 등 그래프 전체의 특성 판별.
+- **대표적 모델:** GCN (Graph Convolutional Networks), GraphSAGE, GAT (Graph Attention Networks).
+- **의의:** 텍스트나 이미지로 표현하기 힘든 지식 그래프, 소셜 네트워크, 단백질 구조 등 복잡계 데이터를 이해하는 유일한 딥러닝 도구.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 그래프를 억지로 벡터화(Node2Vec 등)하여 처리하던 방식에서, 그래프 구조 자체를 신경망 내부로 수용하는 엔드-투-엔드 학습 방식으로 진화.
+- **정책 변화:** Antigravity 프로젝트는 `20_Meta/Graph.json`에 정의된 지식 노드들의 연관성을 정밀하게 분석하기 위해 GAT 아키텍처를 사용하여, 특정 문서가 다른 지식 영역에 미치는 영향력을 수치화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Geometric-Deep-Learning]], [[Graph-Theory]], [[Knowledge-Graph-Foundations]], [[Multi-Agent-Systems-MAS]]
+- **Raw Source:** [[10_Wiki/Topics/AI/GNN.md]]

10_Wiki/Topics/AI/GPT-Architecture-Foundations.md

@@ -0,0 +1,28 @@
+---
+id: GPT-ARCH-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, nlp, gpt, transformer, deep-learning, generative-ai]
+last_reinforced: 2026-04-26
+---
+
+# [[GPT Architecture Foundations (GPT 아키텍처 기초)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "방대한 텍스트의 바다를 스스로 학습하여, 다음에 올 단어를 예측하는 것만으로 우주적 지능에 도달하라" — 트랜스포머의 디코더 블록을 층층이 쌓아 올려, 이전 문맥을 바탕으로 가장 확률 높은 다음 토큰을 생성해 나가는 자기 회귀적(Autoregressive) 언어 모델의 표준.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Next Token Prediction"이라는 단순한 목표 함수를 대규모 데이터와 파라미터에 적용했을 때, 추론과 창의성이라는 상위 인지 능력이 창발(Emergence)하는 스케일링 법칙 패턴.
+- **핵심 구성:**
+    - **Decoder-only Transformer:** 인코더 없이 마스킹된 셀프 어텐션(Masked Self-Attention)만을 사용하여 미래 정보를 차단하고 과거 문맥에만 집중.
+    - **Causal Self-Attention:** 현재 토큰이 이전 토큰들과의 관계만을 계산하도록 강제.
+    - **Pre-training & Fine-tuning:** 방대한 비지도 학습으로 지식을 쌓고, 특정 태스크나 지시 이행(Instruction Following)을 위해 미세 조정.
+- **의의:** 사람이 규칙을 정의하지 않아도 데이터 자체에서 언어의 문법, 논리, 심지어 코딩 능력까지 스스로 습득함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** RNN/LSTM의 순차적 처리 한계를 깨고, 병렬 연산이 가능한 어텐션 메커니즘을 통해 모델 규모의 대형화를 실현함.
+- **정책 변화:** Antigravity 프로젝트의 핵심 엔진(Local/Cloud Brain)은 GPT 아키텍처 기반의 모델들을 사용하며, 프로젝트 특화 지식(Wiki)을 RAG나 Fine-tuning을 통해 통합함.
+
+## 🔗 지식 연결 (Graph)
+- [[Transformer-Architecture-Foundations]], [[LLM]], [[Generative-AI-Impact]], [[Attention-Mechanism]]
+- **Raw Source:** [[10_Wiki/Topics/AI/GPT-Architecture-Foundations.md]]

10_Wiki/Topics/AI/GPU-Architecture.md

@@ -0,0 +1,29 @@
+---
+id: HW-GPU-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [hardware, gpu, cuda, parallel-computing, ai-infrastructure]
+last_reinforced: 2026-04-26
+---
+
+# [[GPU Architecture for AI (AI를 위한 GPU 아키텍처)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "복잡한 소수의 연산 대신, 수만 개의 단순한 행렬 곱셈을 동시에 몰아치듯 처리하라" — 대규모 병렬 처리에 최적화된 하드웨어 구조로, 특히 딥러닝의 핵심인 행렬 연산을 가속화하기 위해 진화한 현대 AI의 심장.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 소수의 강력한 코어를 가진 CPU와 달리, 수천 개의 산술 논리 연산 장치(ALU)를 배치하여 데이터 병렬성(Data Parallelism)을 극대화하는 하드웨어 집약 패턴.
+- **핵심 구성 요소:**
+    - **CUDA Cores:** 범용적인 부동 소수점 연산을 수행하는 최소 단위.
+    - **Tensor Cores:** AI 학습 및 추론에 특화된 고속 행렬 연산 가속기. FP16/BF16 등 혼합 정밀도 연산 지원.
+    - **VRAM (High Bandwidth Memory):** 거대 모델의 파라미터를 저장하고 초고속으로 전송하는 전용 메모리 공간.
+    - **Memory Bandwidth:** 연산 속도만큼이나 중요한 데이터 전송 통로의 너비.
+- **의의:** 무어의 법칙을 넘어 AI 연산 성능을 기하급수적으로 끌어올려 초거대 언어 모델(LLM) 시대를 실현함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 그래픽 렌더링 도구에서 범용 연산 도구(GPGPU)로, 이제는 AI 전용 가속 시스템으로 정체성 진화. NVIDIA의 H100 등 최신 아키텍처는 트랜스포머 연산 가속을 위한 전용 엔진을 포함함.
+- **정책 변화:** Antigravity 프로젝트는 로컬 브레인 구동 시 가용 가능한 GPU 자원을 우선적으로 감지하며, VRAM 용량에 맞춰 모델의 양자화(Quantization) 수준을 동적으로 결정함.
+
+## 🔗 지식 연결 (Graph)
+- [[Parallel-Computing]], [[Distributed-Computing]], [[Deep-Learning-Foundations]], [[LLM]]
+- **Raw Source:** [[10_Wiki/Topics/AI/GPU-Architecture.md]]

10_Wiki/Topics/AI/GPU-Programming-with-CUDA.md

@@ -0,0 +1,29 @@
+---
+id: HW-CUDA-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [hardware, gpu, cuda, parallel-computing, c-cpp, ai-acceleration]
+last_reinforced: 2026-04-26
+---
+
+# [[GPU Programming with CUDA (CUDA를 이용한 GPU 프로그래밍)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "하드웨어의 수천 개 코어를 지휘하는 지휘자가 되어, 데이터의 파도를 병렬 연산의 폭풍으로 바꿔라" — NVIDIA의 하드웨어를 활용하여 일반적인 프로그래밍 언어(C/C++)로 고도의 병렬 연산을 수행하게 하는 컴퓨팅 플랫폼이자 프로그래밍 모델.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Single Instruction, Multiple Threads (SIMT)" — 하나의 명령을 수많은 데이터에 동시에 적용하기 위해 작업을 그리드(Grid), 블록(Block), 스레드(Thread) 단위로 쪼개어 GPU 하드웨어에 매핑하는 병렬 코딩 패턴.
+- **핵심 개념:**
+    - **Kernel:** GPU에서 병렬로 실행되는 함수 단위.
+    - **Memory Hierarchy:** Host(CPU)와 Device(GPU) 간의 메모리 복사, 그리고 Global, Shared, Local 메모리의 전략적 활용.
+    - **Parallelism Optimization:** 스레드 간의 데이터 동기화와 메모리 접근 패턴(Coalescing) 최적화.
+    - **Libraries:** cuBLAS, cuDNN 등 딥러닝 연산에 최적화된 저수준 라이브러리 활용.
+- **의의:** 딥러닝 프레임워크(PyTorch, TensorFlow)의 밑바닥을 지탱하며, AI 연구자가 하드웨어의 성능을 100% 이끌어낼 수 있게 함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 그래픽 연산 언어(Shader)를 빌려 쓰던 불편함에서 벗어나, 표준 프로그래밍 언어와 유사한 문법으로 범용 GPU 연산(GPGPU)을 수행하는 시대로 진화.
+- **정책 변화:** Antigravity 프로젝트는 대규모 벡터 연산이나 커스텀 신경망 레이어 최적화가 필요할 때, CUDA 커널을 직접 작성하거나 최적화된 하드웨어 가속 라이브러리를 호출하여 성능 병목을 해결함.
+
+## 🔗 지식 연결 (Graph)
+- [[GPU-Architecture-for-AI]], [[Parallel-Computing]], [[Distributed-Computing]], [[Deep-Learning-Foundations]]
+- **Raw Source:** [[10_Wiki/Topics/AI/GPU-Programming-with-CUDA.md]]

10_Wiki/Topics/AI/GRU.md

@@ -0,0 +1,28 @@
+---
+id: RNN-GRU-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, deep-learning, rnn, gru, lstm, sequence-modeling]
+last_reinforced: 2026-04-26
+---
+
+# [[GRU (Gated Recurrent Units, 게이트 순환 유닛)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "복잡한 기억 장치를 덜어내고, 핵심적인 정보의 업데이트와 망각에만 집중하여 학습의 효율을 극대화하라" — LSTM의 장점은 계승하면서도 구조를 단순화하여 연산량을 줄이고 기울기 소실 문제를 극복한 현대적인 순환 신경망(RNN) 변형 모델.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Reset Gate"와 "Update Gate"라는 두 가지 통제 장치를 통해 과거의 정보를 얼마나 유지하고 새로운 정보를 얼마나 받아들일지 결정하는 효율적인 시퀀스 처리 패턴.
+- **핵심 구조:**
+    - **Reset Gate:** 과거의 상태를 얼마나 무시할지 결정 (과거 정보의 선택적 망각).
+    - **Update Gate:** 과거의 정보와 현재의 정보를 어떤 비율로 섞어 새로운 상태를 만들지 결정 (LSTM의 Forget/Input 게이트 통합).
+    - **No Cell State:** LSTM과 달리 별도의 셀 상태 없이 은닉 상태(Hidden State)만으로 정보 전달.
+- **의의:** 데이터셋이 상대적으로 작거나 연산 자원이 제한적인 환경에서 LSTM의 훌륭한 대안이 되며, 언어 모델링 및 시계열 예측에서 널리 활용됨.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 복잡할수록 성능이 좋을 것이라는 편견을 깨고, 구조를 단순화(Less parameters)함으로써 오히려 학습 속도와 일반화 성능을 높일 수 있음을 증명.
+- **정책 변화:** Antigravity 프로젝트는 에이전트의 단기 대화 이력을 요약하거나 시퀀스 기반의 이상 징후를 감지할 때, 연산 효율성이 높은 GRU 아키텍처를 우선적으로 고려함.
+
+## 🔗 지식 연결 (Graph)
+- [[LSTM-Long-Short-Term-Memory]], [[RNN-Foundations]], [[Sequence-to-Sequence-Models]], [[Deep-Learning-Foundations]]
+- **Raw Source:** [[10_Wiki/Topics/AI/GRU.md]]

10_Wiki/Topics/AI/Game-Balance-Modeling.md

@@ -0,0 +1,29 @@
+---
+id: GAME-BAL-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [game-dev, game-design, balancing, simulation, skybound]
+last_reinforced: 2026-04-26
+---
+
+# [[Game Balance Modeling (게임 밸런스 모델링)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "수치라는 차가운 뼈대에 재미라는 따뜻한 살을 붙여, 정교한 긴장감의 평형 상태를 설계하라" — 게임 내 모든 수치적 요소(공격력, 체력, 자원 획득량 등)의 상관관계를 수학적으로 정립하여, 특정 전략의 고착화를 방지하고 플레이어에게 지속적인 도전을 제공하는 기술.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "시간 대비 보상"과 "난이도 대비 성취감"의 함수 관계를 정의하고, 시뮬레이션을 통해 이상적인 성장 곡선(Growth Curve)을 도출하는 시스템 설계 패턴.
+- **주요 모델링 기법:**
+    - **Mathematical Balancing:** 엑셀이나 스크립트를 사용하여 레벨별 기대 능력치를 계산.
+    - **Simulation-based Balancing:** AI 에이전트(Auto-player) 수만 회의 대전 시뮬레이션을 돌려 승률 및 밸런스 붕괴 지점 포착.
+    - **Lanchester's Laws:** 전투 상황에서 수적 우위와 화력의 관계를 모델링하여 유닛 능력치 산정.
+    - **Flow Theory Application:** 플레이어의 숙련도 향상에 맞춰 난이도를 비례적으로 상승시켜 몰입 상태(Flow) 유지.
+- **의의:** 운이나 직관이 아닌, 데이터 기반의 의사결정을 통해 게임의 수명을 연장하고 공정한 경쟁 환경을 조성함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 개발자의 감각에 의존하던 밸런싱에서, 이제는 AI 시뮬레이션과 빅데이터 분석을 통해 실시간으로 난이도를 조정하는 동적 밸런싱(DDA) 시대로 진화.
+- **정책 변화:** Skybound 프로젝트는 각 스테이지의 클리어 타임과 플레이어의 사망 위치 데이터를 분석하여, 실시간으로 Swarm의 생성 속도와 적 기체의 명중률을 미세 조정하는 밸런스 시스템을 구축함.
+
+## 🔗 지식 연결 (Graph)
+- [[Simulation-Principles]], [[Game-Theory-in-AI]], [[Reinforcement-Learning]], [[Probability-Theory]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Game-Balance-Modeling.md]]

10_Wiki/Topics/AI/Game-Theory-in-AI.md

@@ -0,0 +1,29 @@
+---
+id: GAME-THEORY-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, game-theory, multi-agent-systems, nash-equilibrium, decision-making]
+last_reinforced: 2026-04-26
+---
+
+# [[Game Theory in AI (AI에서의 게임 이론)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "지능적인 행위자들이 서로의 선택을 예측하며 최선의 이익을 찾아가는 전략적 상호작용의 수학적 모델" — 여러 에이전트가 공존하는 환경에서 자신의 이득뿐만 아니라 타인의 반응까지 고려하여 최적의 의사결정을 내리는 원리를 다루는 이론.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 상대방의 전략이 주어졌을 때 누구도 자신의 전략을 바꿀 유인이 없는 상태(Nash Equilibrium)를 지향하거나, 협력과 배신 사이의 균형점을 찾는 전략적 최적화 패턴.
+- **핵심 개념:**
+    - **Nash Equilibrium (나시 균형):** 모든 플레이어가 상대방의 최선에 대응하여 최선의 선택을 하고 있는 정적 상태.
+    - **Zero-sum vs Non-zero-sum:** 한쪽의 이득이 다른 쪽의 손실인 상황과 상생이 가능한 상황의 구분.
+    - **Minimax Algorithm:** 최악의 경우에 발생할 손실을 최소화하는 전통적인 게임 트리 탐색 기법.
+    - **Multi-Agent Systems (MAS):** 여러 AI 에이전트가 협력하거나 경쟁하며 복잡한 문제를 해결하는 구조.
+- **의의:** 강화학습(특히 Multi-agent RL)과 경제 시스템 모델링, 자율주행차 간의 통행 협상 등 현대 AI의 사회적 상호작용 설계의 근간.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 고정된 규칙의 게임 분석에서 벗어나, 에이전트가 상호작용을 통해 스스로 전략을 진화시키는 동적 시스템 분석으로 진화.
+- **정책 변화:** Antigravity 프로젝트의 다중 에이전트 협업 프로토콜은 게임 이론적 관점에서 각 에이전트의 작업 할당과 자원 분배를 최적화하여 전체 시스템의 효율성을 극대화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Multi-Agent-Systems-MAS]], [[Reinforcement-Learning]], [[Decision-Making]], [[Mechanism-Design]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Game-Theory-in-AI.md]]

10_Wiki/Topics/AI/Gaussian-Processes.md

@@ -1,28 +1,28 @@
 ---
-id: GAUSS-001
+id: MATH-GP-001
 category: "[[10_Wiki/💡 Topics/AI]]"
 confidence_score: 1.0
-tags: [machine-learning, statistics, bayesian, regression]
+tags: [statistics, machine-learning, gaussian-processes, bayesian-inference, uncertainty]
 last_reinforced: 2026-04-26
 ---
 
-# [[Gaussian Processes (가우스 과정)]]
+# [[Gaussian Processes (가우시안 프로세스)]]
 
 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "함수들의 확률 분포를 정의하라" — 유한한 샘플 데이터를 바탕으로 미지의 함수 값뿐만 아니라 그 값의 불확실성(Confidence)까지 동시에 예측하는 비모수적 베이지안 회로 모델.
+> "데이터를 지나는 무한히 많은 함수들의 분포를 정의하고, 가장 가능성 높은 길과 그 확신도를 계산하라" — 함수 자체를 무한 차원의 가우시안 분포로 취급하여, 어떤 입력에 대한 출력값을 평균과 표준편차를 가진 확률 분포로 제공하는 강력한 회귀 및 분류 도구.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-- **추출된 패턴:** 입력 공간의 어떤 점들의 집합에 대해서도 가우스 분포(정규 분포)를 따른다고 가정하고, 데이터 간의 유사도(Kernel)를 정의하여 함수의 흐름을 추론하는 패턴.
-- **세부 내용:**
-    - **Kernel Function (Covariance):** 두 지점이 얼마나 유사한 행동을 보일지 정의 (예: RBF 커널). 모델의 유연성을 결정.
-    - **Mean & Variance:** 예측값뿐만 아니라 그 지점에서의 오차 범위(불확실성)를 함께 출력함.
-    - **Bayesian Inference:** 새로운 데이터가 들어올 때마다 사후 분포(Posterior)를 업데이트하여 모델을 정교화.
-    - **Non-parametric:** 데이터가 늘어날수록 모델의 복잡도가 자동으로 적응하며, 파라미터 개수가 고정되어 있지 않음.
+- **추출된 패턴:** 입력 데이터 간의 유사성을 커널 함수(Kernel Function)로 정의하고, 가까운 지점은 비슷한 값을 가질 것이라는 믿음을 바탕으로 미지의 영역을 추론하는 베이지안 비모수 패턴.
+- **핵심 요소:**
+    - **Mean Function:** 데이터가 없을 때의 기본 예측값 (보통 0).
+    - **Kernel (Covariance) Function:** 두 입력 사이의 관계(부드러움, 주기성 등)를 결정하는 핵심 파라미터.
+    - **Bayesian Inference:** 새로운 관측 데이터가 유입될 때마다 사후 분포(Posterior)를 업데이트하여 불확실성 정제.
+- **의의:** 딥러닝과 달리 모델의 '모름(Uncertainty)'을 정량화할 수 있어, 최적화(Bayesian Optimization)나 소량 데이터 학습에서 필수적으로 사용됨.
 
 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
-- **과거 데이터와의 충돌:** 데이터가 많아질수록 연산 비용($O(N^3)$)이 급증하는 한계가 있었으나, 최근에는 희소 가우스 과정(Sparse GP) 등의 기법으로 대규모 데이터 처리 가능해짐.
-- **정책 변화:** AI 에이전트의 하이퍼파라미터 최적화(Bayesian Optimization) 과정에서 탐색과 활용의 균형을 맞추기 위한 핵심 알고리즘으로 사용됨.
+- **과거 데이터와의 충돌:** 연산 복잡도가 데이터 수의 세제곱($O(n^3)$)에 비례하여 대규모 데이터 처리가 불가능했으나, 최근에는 희소 근사(Sparse approximation) 기법을 통해 수백만 개의 데이터도 처리 가능하도록 진화.
+- [[Epistemic-Uncertainty]]를 정밀하게 측정하는 데 가장 적합한 도구로 재평가됨.
 
 ## 🔗 지식 연결 (Graph)
-- [[Bayesian-Inference]], [[Regression-Analysis]], [[Kernel-Methods]], [[Optimization]]
+- [[Epistemic-Uncertainty]], [[Bayesian-Inference]], [[Black-Box-Optimization]], [[Regression-Foundations]]
 - **Raw Source:** [[10_Wiki/Topics/AI/Gaussian-Processes.md]]

10_Wiki/Topics/AI/Generalization-in-AI.md

@@ -0,0 +1,31 @@
+---
+id: GEN-AI-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, machine-learning, generalization, overfitting, regularization]
+last_reinforced: 2026-04-26
+---
+
+# [[Generalization in AI (AI의 일반화 능력)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "학습 데이터를 외우지 말고, 데이터 속에 숨겨진 보편적인 법칙을 통찰하라" — 모델이 학습 데이터셋에만 특화되지 않고, 실제 운영 환경에서 마주하는 낯선 데이터에 대해서도 높은 성능을 유지할 수 있는 능력.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 훈련 오차(Training Error)와 검증 오차(Validation Error) 사이의 간극을 최소화하고, 단순한 모델 구조와 풍부한 데이터를 통해 데이터의 '노이즈'가 아닌 '신호'를 학습하는 패턴.
+- **주요 저해 요인:**
+    - **Overfitting (과적합):** 모델이 너무 복잡하여 학습 데이터의 무작위 노이즈까지 학습해버린 상태.
+    - **Data Bias:** 학습 데이터가 현실의 다양성을 충분히 반영하지 못한 경우.
+- **일반화 향상 전략:**
+    - **Regularization (L1, L2):** 모델의 가중치가 너무 커지지 않도록 제약.
+    - **Data Augmentation:** 데이터의 양과 다양성을 인위적으로 늘림.
+    - **Early Stopping:** 검증 오차가 오르기 시작하는 시점에 학습 중단.
+    - **Cross-Validation:** 데이터를 여러 번 교차하여 검증함으로써 평가의 신뢰도 확보.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** "모델이 복잡할수록 나쁘다(Occam's Razor)"는 고전적 믿음이, 거대 모델에서는 오히려 매개변수가 많을수록 일반화 성능이 좋아지는 'Double Descent' 현상이 발견되며 패러다임 변화 발생.
+- **정책 변화:** Antigravity 프로젝트는 에이전트의 일반화 능력을 테스트하기 위해, 학습에 사용되지 않은 외부 지식 소스(Uber, Europeana 등)를 활용한 'Out-of-distribution' 벤치마크를 정기적으로 수행함.
+
+## 🔗 지식 연결 (Graph)
+- [[Overfitting-and-Underfitting]], [[Regularization-Techniques]], [[Cross-Validation]], [[Few-Shot-Learning]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Generalization-in-AI.md]]

10_Wiki/Topics/AI/Generative-AI-Impact.md

@@ -0,0 +1,29 @@
+---
+id: GEN-IMPACT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, generative-ai, future-of-work, ai-ethics, societal-impact]
+last_reinforced: 2026-04-26
+---
+
+# [[Generative AI Impact (생성형 AI의 영향력)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "한계 비용 제로의 지식 창출 시대, 인간은 '무엇을 할 것인가'에서 '무엇을 질문할 것인가'로 이동한다" — 텍스트, 이미지, 코드를 생성하는 AI가 생산성을 폭발적으로 증가시키고, 창의성의 문턱을 낮추며 산업 구조를 재편하는 거대한 전환기.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 인간의 지적/예술적 노동 중 반복적이고 정형화된 부분을 AI가 대체하고, 인간은 상위 수준의 기획, 검증, 그리고 프롬프트 설계에 집중하는 'AI-Human Copilot' 협업 패턴.
+- **주요 영향 분야:**
+    - **Economic Efficiency:** 콘텐츠 제작, 고객 대응, 소프트웨어 개발 비용의 획기적 절감.
+    - **Creative Democratization:** 고도의 전문 지식 없이도 고품질의 예술/디자인 결과물 생성 가능.
+    - **Educational Revolution:** 개인별 맞춤형 튜터링과 지식 요약의 보편화.
+    - **Legal & Ethical Risks:** 저작권 분쟁, 딥페이크를 통한 가짜 뉴스, 데이터 편향성 심화.
+- **의의:** AI가 단순히 명령을 수행하는 기계가 아니라, 인간의 사고를 확장하고 새로운 가능성을 제안하는 능동적 파트너로 진화했음을 의미.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** AI가 육체 노동만을 대체할 것이라는 예측을 뒤엎고, 고도의 창의성과 인지 능력이 필요한 '화이트칼라' 영역부터 급격한 변화가 시작됨.
+- **정책 변화:** Antigravity 프로젝트는 생성형 AI의 결과물에 대한 투명성(Provenance)을 보장하기 위해 모든 생성 지식에 출처 메타데이터를 기록하며, AI의 창작물에 대한 인간의 최종 검토 프로세스를 강화함.
+
+## 🔗 지식 연결 (Graph)
+- [[Generative-Adversarial-Networks-GAN]], [[LLM]], [[Future-of-Work-with-AI]], [[AI-Ethics]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Generative-AI-Impact.md]]

10_Wiki/Topics/AI/Genetic-Algorithms.md

@@ -1,28 +1,30 @@
 ---
-id: GENETIC-001
+id: EVO-GEN-001
 category: "[[10_Wiki/💡 Topics/AI]]"
 confidence_score: 1.0
-tags: [optimization, evolutionary-computation, algorithms]
+tags: [ai, evolutionary-computation, genetic-algorithm, optimization, survival-of-the-fittest]
 last_reinforced: 2026-04-26
 ---
 
 # [[Genetic Algorithms (유전 알고리즘)]]
 
 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "최적의 해답을 자연의 진화 과정에서 찾아라" — 다윈의 적자생존 원리를 컴퓨터 프로그래밍에 적용하여, 변이와 교차를 통해 문제의 해를 점진적으로 개선해나가는 탐색 알고리즘.
+> "자연의 선택과 변이 메커니즘을 빌려와, 다차원 공간 속에서 최적의 해답을 진화시켜라" — 다윈의 진화론을 공학적으로 구현하여, 후보 해들을 교차(Crossover)시키고 돌연변이(Mutation)를 일으키며 세대를 거듭해 정답에 근사하는 최적화 알고리즘.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-- **추출된 패턴:** 후보 해(개체)들의 집단을 생성하고, 적합도 함수(Fitness Function)에 따라 우수한 개체를 선별하여 유전 연산을 반복함으로써 최적해로 수렴시키는 패턴.
-- **세부 내용:**
-    - **Encoding:** 해(Solution)를 염색체(Chromosome) 형태(비트, 문자열 등)로 표현.
-    - **Selection:** 적합도가 높은 개체가 자손을 남길 확률을 높임 (예: 룰렛 휠 선택).
-    - **Crossover (교차):** 두 부모 개체의 유전자를 결합하여 새로운 자손 생성.
-    - **Mutation (변이):** 낮은 확률로 유전자를 무작위로 변경하여 지역 최적해(Local Optima)에 빠지는 것을 방지.
+- **추출된 패턴:** 미분이 불가능하거나 탐색 공간이 너무 넓어 전통적인 방식으로는 해를 찾기 힘든 문제에서, 확률적 탐색과 적자생존의 원칙을 결합하여 전역 최적해(Global Optima)를 찾아가는 진화 탐색 패턴.
+- **주요 단계:**
+    - **Initialization:** 무작위로 생성된 초기 해 집단(Population) 구성.
+    - **Fitness Evaluation:** 각 해가 문제 해결에 얼마나 적합한지 점수 산정.
+    - **Selection:** 적합도가 높은 개체를 부모로 선택하여 다음 세대에 유전자 전달.
+    - **Crossover:** 부모 유전자를 섞어 새로운 자손 생성.
+    - **Mutation:** 낮은 확률로 유전 정보를 무작위로 변경하여 지역 최적해(Local Optima) 탈출 유도.
+- **의의:** 정답을 직접 계산하는 것이 아니라, 수많은 시도와 실패를 통해 '정답으로 진화'해 나가는 생물학적 지능의 구현.
 
 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
-- **과거 데이터와의 충돌:** 미분 가능한 공간에서의 경사 하강법에 비해 속도는 느릴 수 있으나, 탐색 공간이 매우 복잡하거나 불연속적인 문제에서 여전히 강력한 위력을 발휘함.
-- **정책 변화:** Skybound 프로젝트의 절차적 콘텐츠 생성(PCG) 시, 최적의 맵 레이아웃이나 에너미 배치를 자동으로 생성하는 도구로 활용 연구 중.
+- **과거 데이터와의 충돌:** 단순히 수치를 찾는 최적화 도구에서, 최근에는 신경망 구조 자체를 진화시키는 Neuroevolution 기법으로 확장되어 딥러닝과 융합됨.
+- **정책 변화:** Skybound 프로젝트의 함대 진형 최적화 알고리즘은 유전 알고리즘을 활용하여, 수만 번의 교전을 시뮬레이션하며 적의 공격을 가장 잘 방어하는 최적의 배치를 스스로 찾아냄.
 
 ## 🔗 지식 연결 (Graph)
-- [[Evolutionary-Computation]], [[Optimization]], [[Neural-Architecture-Search]]
+- [[Evolutionary-Computation]], [[Fitness-Landscape]], [[Black-Box-Optimization]], [[Neural-Architecture-Search-NAS]]
 - **Raw Source:** [[10_Wiki/Topics/AI/Genetic-Algorithms.md]]

10_Wiki/Topics/AI/Geometric-Deep-Learning.md

@@ -0,0 +1,31 @@
+---
+id: GEO-DL-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, deep-learning, geometric-deep-learning, gnn, graph-theory, topology]
+last_reinforced: 2026-04-26
+---
+
+# [[Geometric Deep Learning (기하학적 딥러닝)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "데이터의 외형이 아닌, 그 안에 숨겨진 대칭성과 기하학적 구조를 학습하여 차원을 넘나드는 지능을 구현하라" — 유클리드 공간(격자)을 넘어 그래프, 매니폴드, 3D 메쉬 등 비유클리드 구조를 가진 데이터에서 불변하는 특징을 추출하기 위한 딥러닝의 통합 프레임워크.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 데이터의 물리적 위치가 변하더라도 그들 사이의 관계나 위상(Topology)이 유지된다면 동일한 특징으로 인식하는 '기하학적 불변성(Geometric Invariance)' 학습 패턴.
+- **주요 대상:**
+    - **Graphs:** 사회 관계망, 분자 구조, 지식 그래프.
+    - **Manifolds:** 구면 데이터, 비정형 표면.
+    - **3D Meshes:** 입체적인 사물 모델링 데이터.
+- **핵심 원칙:**
+    - **Symmetry (대칭성):** 회전이나 평행 이동에도 변하지 않는 성질 활용.
+    - **Invariance & Equivariance:** 입력의 변환에 따라 출력이 일정하게 유지되거나 규칙적으로 변하는 성질.
+- **의의:** 신약 개발(분자 결합 예측), 추천 시스템(사용자-아이템 그래프), 자율주행(3D 공간 인식) 등 비정형 데이터가 주를 이루는 난제 해결의 열쇠.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 이미지를 픽셀의 나열로만 보던 CNN의 한계를 넘어, 데이터 사이의 논리적/물리적 연결 구조 자체를 학습하는 방향으로 인공지능의 시야가 확장됨.
+- **정책 변화:** Antigravity 프로젝트는 수만 개의 지식 노드 간의 복잡한 상관관계를 분석하기 위해 기하학적 딥러닝 기반의 Graph Neural Networks(GNN)를 도입하여 지식 지도를 고도화함.
+
+## 🔗 지식 연결 (Graph)
+- [[GNN]], [[Graph-Theory]], [[Dimensionality-Reduction]], [[Representation-Learning]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Geometric-Deep-Learning.md]]

10_Wiki/Topics/AI/Gestalt-Principles in UX.md

@@ -0,0 +1,30 @@
+---
+id: UX-GESTALT-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ux, design, gestalt-principles, psychology, human-computer-interaction]
+last_reinforced: 2026-04-26
+---
+
+# [[Gestalt Principles in UX (UX에서의 게슈탈트 원리)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "전체는 부분의 합과 다르며, 인간의 뇌는 복잡한 시각 정보를 본능적으로 단순하고 유의미한 그룹으로 엮어낸다" — 인간의 시각 인지 과정을 설명하는 심리학 법칙들을 인터페이스 설계에 적용하여, 사용자가 별도의 학습 없이도 화면의 구조와 관계를 즉각 파악하게 만드는 디자인 원칙.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 개별 요소들의 배치(근접성, 유사성, 연속성 등)를 통해 뇌가 정보를 자동으로 그룹화하거나 분류하도록 유도하는 시각적 질서 형성 패턴.
+- **주요 법칙:**
+    - **Proximity (근접성):** 서로 가까이 있는 요소들을 하나의 그룹으로 인식.
+    - **Similarity (유사성):** 모양, 색상, 크기가 비슷한 요소들을 연관된 것으로 인식.
+    - **Continuity (연속성):** 시선이 부드러운 선이나 흐름을 따라가도록 배치.
+    - **Closure (폐쇄성):** 불완전한 형태라도 뇌가 부족한 부분을 채워 전체 형상으로 인식.
+    - **Figure/Ground (형태와 배경):** 주목해야 할 대상과 배경을 명확히 구분.
+- **의의:** 텍스트 설명 없이도 레이아웃만으로 기능의 연관성과 계층 구조를 전달하여 인지 부하를 최소화함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 단순히 화려한 그래픽 중심의 디자인에서, 인간의 인지 구조를 배려하는 '뇌 친화적' 인터페이스 설계로 UX의 중심축이 이동함.
+- **정책 변화:** Antigravity 프로젝트의 모든 대시보드와 에이전트 인터페이스는 게슈탈트 원칙을 준수하여 설계되며, 특히 '유사성' 법칙을 통해 에이전트의 응답 유형별로 일관된 시각적 피드백을 제공함.
+
+## 🔗 지식 연결 (Graph)
+- [[UX-Design]], [[Human-Computer-Interaction-HCI]], [[Frontend-Architecture]], [[Visual-Hierarchy]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Gestalt-Principles in UX.md]]

10_Wiki/Topics/AI/Gimbals-and-Orientation.md

@@ -0,0 +1,29 @@
+---
+id: PHYS-GIMBAL-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [physics, robotics, game-dev, orientation, rotation-math, skybound]
+last_reinforced: 2026-04-26
+---
+
+# [[Gimbals and Orientation (짐벌과 방향 제어)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "3차원 공간의 자유도를 수호하고, 회전의 축이 겹쳐 통제력을 잃는 짐벌 락의 함정을 회피하라" — 물체가 어떤 방향으로든 자유롭게 회전할 수 있도록 지지하는 장치(Gimbal)와, 오일러 각(Euler Angles) 및 쿼터니언(Quaternions)을 활용한 수학적 자세 제어 기법.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 세 개의 회전 축(Roll, Pitch, Yaw)을 독립적으로 제어하여 물체의 지향점을 유지하고, 각 축 간의 상호작용으로 인해 발생하는 기하학적 제약을 극복하는 방향성 제어 패턴.
+- **핵심 개념:**
+    - **Euler Angles:** X, Y, Z 축을 기준으로 순차적으로 회전하는 직관적인 방식.
+    - **Gimbal Lock:** 두 회전 축이 겹치면서 한 차원의 자유도를 잃어버리는 현상 (오일러 각의 고질적 문제).
+    - **Quaternions (사원수):** 짐벌 락 문제를 해결하기 위해 4차원 복소수를 사용하는 수학적 도구. 부드러운 회전 보간(SLERP)에 필수적.
+    - **Stabilization:** 외부 흔들림에도 불구하고 카메라나 센서가 특정 방향을 고수하도록 실시간 보정.
+- **의의:** 항공우주, 로보틱스, 드론 제어는 물론 3D 게임 엔진의 카메라 시스템과 물리 시뮬레이션의 성능을 결정짓는 근간.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 오일러 각 기반의 단순 연산에서, 짐벌 락 방지와 연산 효율성을 위해 쿼터니언 기반의 자세 제어가 현대 시스템의 표준으로 정착됨.
+- **정책 변화:** Skybound 프로젝트의 함대 시점 카메라와 미사일 유도 알고리즘은 쿼터니언을 사용하여 격렬한 기동 중에도 끊김 없는 부드러운 시선 처리를 보장함.
+
+## 🔗 지식 연결 (Graph)
+- [[Physics-Engine]], [[Robotics]], [[Mathematics-for-AI]], [[Determinism-in-Computing]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Gimbals-and-Orientation.md]]

10_Wiki/Topics/AI/Git-Version-Control.md

@@ -0,0 +1,29 @@
+---
+id: GIT-MASTER-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [software-engineering, version-control, git, collaboration, workflow]
+last_reinforced: 2026-04-26
+---
+
+# [[Git Version Control Master (깃 버전 관리 마스터)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "코드의 모든 순간을 기록하고, 병렬적인 시도들을 하나로 엮어내는 분산 버전 관리의 예술" — 소스코드의 변경 이력을 추적하고 여러 개발자의 작업을 충돌 없이 통합하며, 실험적인 브랜칭(Branching)을 통해 안전한 개발 환경을 제공하는 표준 도구.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Snapshot, not Delta" — 파일의 차이점이 아닌 상태 전체를 스냅샷으로 저장하여 무결성을 보장하고, 로컬과 원격의 상태를 동기화하며 프로젝트의 진화 과정을 관리하는 워크플로우 패턴.
+- **핵심 메커니즘:**
+    - **Area:** Working Directory (작업 중), Staging Area (준비), Repository (기록).
+    - **Branching & Merging:** 독립적인 작업 공간을 만들고, 검토 후 메인 줄기에 통합.
+    - **Rebase vs Merge:** 커밋 히스토리를 깔끔하게 유지할지, 아니면 실제 작업 흐름을 그대로 남길지의 선택.
+    - **Distributed System:** 모든 클라이언트가 전체 이력을 소유하여 오프라인 작업과 복구가 용이함.
+- **의의:** 현대 소프트웨어 공학의 필수 인프라로, 오픈소스 생태계와 지속적 통합(CI)의 토대.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 중앙 집중식(SVN 등)의 제약에서 벗어나, 분산형 구조와 자유로운 브랜칭을 통해 대규모 동시 개발이 가능한 시대를 엶.
+- **정책 변화:** Antigravity 프로젝트는 에이전트가 생성한 모든 지식(Wiki)과 코드(Agent, Skybound 등)를 Git으로 관리하며, '의미 있는 단위'의 자동 커밋과 푸시를 통해 실시간 지식 자산화를 실현함.
+
+## 🔗 지식 연결 (Graph)
+- [[DevOps-for-AI-MLOps]], [[Extreme-Programming-XP]], [[Software-Architecture-Patterns]], [[Collaborative-Development]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Git-Version-Control.md]]

10_Wiki/Topics/AI/Global-vs-Local-Optima.md

@@ -0,0 +1,31 @@
+---
+id: OPT-GLO-LOC-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, optimization, mathematics, global-optima, local-optima]
+last_reinforced: 2026-04-26
+---
+
+# [[Global Optima vs Local Optima (전역 최적해와 지역 최적해)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "눈앞의 작은 언덕(Local)에 만족하지 말고, 산맥 전체에서 가장 높은 봉우리(Global)를 향한 탐험을 멈추지 마라" — 최적화 문제에서 함수값이 주변보다 가장 좋지만 전체에서는 최선이 아닌 지점(Local)과, 전체 영역을 통틀어 가장 우수한 지점(Global) 사이의 격차와 이를 극복하기 위한 도전.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 최적화 과정에서 경사(Gradient)를 따라 내려가다 보면 움푹 패인 작은 구덩이(Local Minima)에 갇히기 쉬우며, 이를 탈출하여 가장 깊은 골짜기(Global Minima)를 찾기 위한 전략적 탐색 패턴.
+- **핵심 차이점:**
+    - **Local Optima:** 특정 이웃 범위 내에서 최선의 해. 알고리즘이 더 이상 개선을 멈추기 쉬운 함정.
+    - **Global Optima:** 문제의 전체 정의 구역에서 단 하나(혹은 그 이상) 존재하는 절대적 최적해.
+- **지역 최적해 탈출 전략:**
+    - **Momentum:** 내려오던 관성을 이용해 작은 언덕을 넘어감.
+    - **Stochasticity (무작위성):** 확률적 경사 하강법(SGD)이나 돌연변이(Mutation)를 통해 무작위로 위치 이동.
+    - **Simulated Annealing:** 초기에는 과감하게 탐색하고 시간이 갈수록 정교하게 수렴.
+- **의의:** 딥러닝 학습이 단순히 '작동'하는 것을 넘어 '최고 성능'에 도달하기 위해 극복해야 할 가장 본질적인 수학적 과제.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 고차원 공간에서는 지역 최적해보다 안장점(Saddle Point)이 학습을 방해하는 더 큰 요인임이 밝혀지며, 최적화 전략의 초점이 안장점 탈출로 확장됨.
+- **정책 변화:** Antigravity 프로젝트는 하이퍼파라미터 튜닝 시 단일 시도가 아닌 베이지안 최적화를 활용하여, 지역 최적해의 함정을 피해 전역 최적해에 근사하는 파라미터 조합을 탐색함.
+
+## 🔗 지식 연결 (Graph)
+- [[Gradient-Descent]], [[Fitness-Landscape]], [[Black-Box-Optimization]], [[Genetic-Algorithms]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Global-vs-Local-Optima.md]]

10_Wiki/Topics/AI/Gradient-Boosting-Machines.md

@@ -0,0 +1,30 @@
+---
+id: ML-GBM-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [machine-learning, gradient-boosting, xgboost, lightgbm, supervised-learning]
+last_reinforced: 2026-04-26
+---
+
+# [[Gradient Boosting Machines (그래디언트 부스팅 머신)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "이전의 실수를 가장 뼈아픈 교훈으로 삼아, 오차의 경사(Gradient)를 따라 완벽한 정답으로 전진하라" — 여러 개의 약한 학습기(보통 의사결정 나무)를 순차적으로 연결하되, 앞선 모델이 틀린 오차를 다음 모델이 보정하는 방식으로 학습하는 강력한 앙상블 기법.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 손실 함수(Loss Function)의 경사를 따라 모델을 점진적으로 추가하여, 전체 시스템의 예측 오차를 최소화하는 가법적 모델링(Additive Modeling) 패턴.
+- **핵심 알고리즘:**
+    - **AdaBoost:** 틀린 데이터에 가중치를 부여.
+    - **GBM:** 가중치 대신 손실 함수의 기울기(Residual)를 직접 학습.
+    - **XGBoost:** 병렬 처리와 과적합 방지 규제가 추가된 고성능 라이브러리.
+    - **LightGBM:** 대규모 데이터 처리에 최적화된 리프 중심 트리 분할 방식.
+    - **CatBoost:** 범주형 변수 처리에 특화된 알고리즘.
+- **의의:** 딥러닝이 지배하는 이미지/음성 분야와 달리, 금융, 마케팅 등 비즈니스 정형 데이터 분석 분야에서 여전히 '왕좌'를 지키고 있는 기술.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 학습 속도가 느리고 오버피팅에 취약하던 초기 GBM의 한계를 XGBoost와 LightGBM이 기술적으로 극복하며 실무형 머신러닝의 표준으로 자리 잡음.
+- **정책 변화:** Antigravity 프로젝트는 문서의 중요도 랭킹 시스템이나 추천 엔진 설계 시, 딥러닝 임베딩과 함께 부스팅 모델을 앙상블하여 최상의 결과를 도출함.
+
+## 🔗 지식 연결 (Graph)
+- [[Ensemble-Methods]], [[Decision-Trees-and-Random-Forests]], [[Supervised-Learning-Foundations]], [[Gradient-Descent]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Gradient-Boosting-Machines.md]]

10_Wiki/Topics/AI/Gradient-Descent.md

@@ -1,32 +1,31 @@
 ---
-id: P-REINFORCE-AUTO-GRDE-001
+id: OPT-GRAD-001
 category: "[[10_Wiki/💡 Topics/AI]]"
-confidence_score: 0.99
-tags: [auto-reinforced, gradient-descent, optimization, deep-learning, machine-learning, backpropagation]
-last_reinforced: 2026-04-20
+confidence_score: 1.0
+tags: [ai, optimization, mathematics, gradient-descent, machine-learning]
+last_reinforced: 2026-04-26
 ---
 
-# [[Gradient-Descent]]
+# [[Gradient Descent Foundations (경사 하강법 기초)]]
 
 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "안개 낀 산 내려오기: 복잡한 수만 개의 변수들로 이루어진 오차의 산(Error Surface)에서, 현재 위치의 경사(Gradient)를 따라 가장 가파르게 낮아지는 방향으로 한 걸음씩 이동하며 시스템의 오차를 최소화해 나가는 학습의 행동 강령."
+> "어둠 속에서 지형의 기울기만을 느끼며 가장 낮은 골짜기를 향해 끈기 있게 내려가라" — 모델의 예측값과 실제값 사이의 오차(Loss)를 정의하고, 이 오차를 최소화하는 방향으로 파라미터를 점진적으로 수정해 나가는 인공지능 학습의 근본 알고리즘.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-경사 하강법(Gradient-Descent)은 미분 가능한 함수의 최솟값을 찾는 최적화 알고리즘입니다. 현대 AI 학습의 심장부입니다.
-
-1.  **작동 원리**:
-    *   **Gradient**: 함수의 기울기. 이 방향의 반대쪽으로 가야 오차가 줄어듦.
-    *   **Learning Rate ($\eta$)**: 한 발자국의 크기. 너무 크면 산을 뛰어넘고(발산), 너무 작으면 내려가는 데 영겁의 시간이 걸림. (Optimization과 연결)
-2.  **종류**:
-    *   **Batch GD**: 모든 데이터를 다 보고 내림 (정확하지만 느림).
-    *   **Stochastic GD (SGD)**: 데이터 하나 볼 때마다 한 걸음 (빠르지만 요동침).
-    *   **Mini-batch GD**: 적당한 묶음씩 보고 이동 (현실적 타협).
+- **추출된 패턴:** 목적 함수의 미분값(Gradient)이 가리키는 방향의 반대 방향으로 학습률(Learning Rate)만큼 파라미터를 업데이트하여, 오차라는 산맥의 최저점을 찾는 반복적 최적화 패턴.
+- **핵심 요소:**
+    - **Learning Rate ($\eta$):** 한 번에 얼마나 멀리 이동할지 결정. 너무 크면 발산하고, 너무 작으면 학습이 느림.
+    - **Partial Derivative:** 각 파라미터가 오차에 미치는 영향력을 개별적으로 계산.
+    - **Step:** 현재 위치에서 기울기가 가장 가파른 방향의 반대로 이동하는 한 단계의 연산.
+- **주요 변형:**
+    - **Stochastic Gradient Descent (SGD):** 하나의 데이터만 보고 즉시 업데이트. 빠르지만 요동이 심함.
+    - **Mini-batch SGD:** 적절한 묶음 데이터를 사용하여 속도와 안정성의 균형을 맞춤. 현대 딥러닝의 표준.
+- **의의:** 복잡한 신경망의 수백만 개 파라미터를 학습시킬 수 있는 유일하고 실질적인 방법.
 
 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
-- **과거 데이터와의 충돌**: 과거에는 국소 최적해(Local Minima)에 갇혀 영영 빠져나오지 못할 것이라는 비관 정책이 많았으나, 현대 실무 정책은 고차원 공간에서는 대부분이 '안장점(Saddle point)'이며 적절한 소음(Adam 등)이 있으면 벗어날 수 있음을 입증함(RL Update).
-- **정책 변화(RL Update)**: 단순히 오차를 줄이는 정책을 넘어, 학습 도중 경사가 소멸(Vanishing)하거나 폭주(Exploding)하는 정책을 막기 위해 배치 정규화(Batch Norm)나 잔차 연결(Residual Connection) 같은 아키텍처적 보조 정책이 필수화됨.
+- **과거 데이터와의 충돌:** 단순히 기울기만 따라가던 방식에서, 이제는 관성(Momentum)과 가변 학습률(Adam, RMSProp)을 더해 훨씬 효율적으로 최저점을 찾는 방식으로 진화.
+- [[Global-vs-Local-Optima]] 문서와 연계하여, 지역 최적해의 함정을 피하는 것이 경사 하강법 운영의 핵심 기술임.
 
 ## 🔗 지식 연결 (Graph)
-- [[Optimization]], [[Backpropagation]], [[Deep Learning (DL)]], [[Efficiency]], [[Error Prediction Error (RPE와 유사)]]
-- **Modern Tech/Tools**: Adam, RMSprop, Momentum, PyTorch/TensorFlow (Autograd).
----
+- [[Backpropagation]], [[Global-vs-Local-Optima]], [[Deep-Learning-Foundations]], [[Mathematics-for-AI]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Gradient-Descent.md]]

10_Wiki/Topics/AI/Graph-Theory.md

@@ -1,28 +1,30 @@
 ---
-id: GRAPH-THEORY-001
+id: MATH-GRAPH-001
 category: "[[10_Wiki/💡 Topics/AI]]"
 confidence_score: 1.0
-tags: [math, computer-science, algorithms, network-analysis]
+tags: [math, graph-theory, network-analysis, data-structures, ai]
 last_reinforced: 2026-04-26
 ---
 
-# [[Graph Theory (그래프 이론)]]
+# [[Graph Theory and Networks (그래프 이론과 네트워크)]]
 
 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "세상의 모든 연결을 점과 선의 언어로 추상화하라" — 개체들 간의 이진 관계를 수학적으로 모델링하여 경로 탐색, 연결성, 네트워크 구조의 특성을 연구하는 이산수학의 한 분야.
+> "세상의 모든 존재를 점(Node)으로, 그들의 관계를 선(Edge)으로 연결하여 복잡계의 지도를 그려라" — 개체들 간의 상호작용과 연결 구조를 수학적으로 모델링하여, 네트워크의 특성과 정보의 흐름을 분석하는 학문적 토대.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-- **추출된 패턴:** 복잡한 물리적/논리적 시스템을 정점(Vertex)과 간선(Edge)으로 이루어진 그래프 구조로 변환하여 최적화 문제를 해결하는 추상화 패턴.
-- **세부 내용:**
-    - **Types of Graphs:** 유향/무향(Directed/Undirected), 가중(Weighted), 순환/비순환(Cyclic/Acyclic) 그래프 등.
-    - **Key Algorithms:** A*(경로 탐색), Dijkstra(최단 경로), PageRank(중요도 평가), BFS/DFS(순회).
-    - **Connectivity:** 네트워크 내의 컴포넌트들이 얼마나 긴밀하게 연결되어 있는지, 단절 시 영향도는 어떠한지 분석.
-    - **Planar Graphs:** 평면 위에 교차 없이 그릴 수 있는 그래프. 회로 설계 등에 활용.
+- **추출된 패턴:** 개별 요소의 특성보다 요소들 사이의 '연결 방식(Connectivity)'이 시스템 전체의 성격(중요도, 전파 속도, 강건성 등)을 결정한다는 관계 중심의 분석 패턴.
+- **핵심 개념:**
+    - **Nodes & Edges:** 데이터를 나타내는 정점과 관계를 나타내는 간선.
+    - **Degree:** 특정 노드에 연결된 간선의 수 (중요도 지표).
+    - **Shortest Path:** 두 노드 사이의 최단 거리 (효율성 지표).
+    - **Centrality:** 네트워크 내에서 특정 노드가 차지하는 영향력 (PageRank 등).
+    - **Clustering:** 노드들이 얼마나 밀집하여 그룹을 형성하는지 측정.
+- **의의:** 소셜 네트워크 분석, 전력망 설계, 신약 개발은 물론, 현대 AI의 지식 그래프(Knowledge Graph)와 GNN의 핵심 이론적 근거.
 
 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
-- **과거 데이터와의 충돌:** 단순한 퍼즐 풀이(쾨니히스베르크의 다리)에서 시작했으나, 현대에는 인터넷 아키텍처, 뇌 신경망 분석, AI 모델의 어텐션 맵 분석 등으로 응용 범위가 무한히 확장됨.
-- **정책 변화:** Antigravity 프로젝트는 지식의 고립(Islands)을 방지하기 위해 그래프 이론의 'Strongly Connected Components' 개념을 문서 자동 연결 로직에 적용함.
+- **과거 데이터와의 충돌:** 정적인 관계망 분석에서 벗어나, 시간에 따라 노드와 엣지가 생성/소멸하는 동적 네트워크(Dynamic Networks) 분석으로 진화.
+- **정책 변화:** Antigravity 프로젝트는 1,174개의 지식 문서 간의 상관관계를 그래프 이론적 관점에서 상시 분석하며, 지식의 고립(Island)을 방지하고 핵심 연결 노드를 자동으로 추천함.
 
 ## 🔗 지식 연결 (Graph)
-- [[Directed-Acyclic-Graph]], [[Graph-Database]], [[A-Star-Algorithm]], [[Network-Science]]
+- [[GNN]], [[Geometric-Deep-Learning]], [[Knowledge-Graph-Foundations]], [[Search-Algorithms]]
 - **Raw Source:** [[10_Wiki/Topics/AI/Graph-Theory.md]]

10_Wiki/Topics/AI/Greedy-Algorithms.md

@@ -0,0 +1,29 @@
+---
+id: CS-GREEDY-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [computer-science, algorithms, greedy-algorithm, optimization, search-strategies]
+last_reinforced: 2026-04-26
+---
+
+# [[Greedy Algorithms (탐욕 알고리즘)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "매 순간 눈앞의 가장 큰 이득만을 취하라. 때로는 단순한 탐욕이 가장 효율적인 정답으로 인도한다" — 전역적인 최적해를 찾기 위해 복잡하게 고민하는 대신, 각 단계에서 국소적으로 가장 좋은 선택(Local Optimum)을 반복하여 최종 해를 도출하는 설계 기법.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Greedy Choice Property"와 "Optimal Substructure"가 성립하는 문제에서, 과거의 선택을 뒤돌아보지 않고 현재의 최선만을 선택하여 연산 효율을 극대화하는 패턴.
+- **핵심 특징:**
+    - **Local Optimum:** 각 단계에서의 최선의 선택.
+    - **No Backtracking:** 한 번 내린 결정은 번복하지 않음.
+    - **Efficiency:** 동적 계획법(DP)보다 연산 속도가 압도적으로 빠름.
+- **적용 사례:** Dijkstra의 최단 경로 알고리즘, Prim/Kruskal의 최소 신장 트리(MST), 허프만 코딩(Huffman Coding), 거스름돈 문제.
+- **한계:** 모든 문제에서 전역 최적해(Global Optimum)를 보장하지는 않으므로 사용 전 수학적 검증이 필요함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 완벽한 정답(Optimal Solution)만을 추구하던 경직된 사고에서, 실시간성이나 연산 자원이 중요한 환경에서는 '충분히 좋은 해(Heuristic)'를 빠르게 찾는 탐욕적 방식이 더 현실적일 수 있음을 인정.
+- **정책 변화:** Antigravity 프로젝트의 실시간 지식 임베딩 클러스터링 알고리즘은 연산 부하를 줄이기 위해 일부 단계에서 탐욕적 접근 방식을 채택하여 빠른 반응성을 유지함.
+
+## 🔗 지식 연결 (Graph)
+- [[Global-vs-Local-Optima]], [[Search-Algorithms]], [[Heuristic-Search]], [[Dynamic-Programming-Foundations]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Greedy-Algorithms.md]]

10_Wiki/Topics/AI/HMM.md

@@ -0,0 +1,28 @@
+---
+id: MATH-HMM-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [statistics, machine-learning, hmm, sequence-modeling, hidden-states]
+last_reinforced: 2026-04-26
+---
+
+# [[HMM (Hidden Markov Models, 은닉 마르코프 모델)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "보이지 않는 진실(Hidden States)을 겉으로 드러난 현상(Observations)을 통해 확률적으로 추론하라" — 관측 가능한 데이터를 바탕으로 직접 볼 수 없는 상태들의 변화 과정을 확률 모델로 설명하는 시계열 데이터 분석의 고전이자 핵심 도구.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Markov Property" — 미래의 상태는 오직 현재의 상태에 의해서만 결정된다는 가정을 바탕으로, 숨겨진 상태들 사이의 전이 확률(Transition Prob)과 상태별 관측 확률(Emission Prob)을 계산하는 확률 모델링 패턴.
+- **주요 알고리즘:**
+    - **Forward-Backward Algorithm:** 특정 관측치가 나타날 전체 확률 계산.
+    - **Viterbi Algorithm:** 관측된 데이터를 생성했을 가장 가능성 높은 상태의 경로(Sequence) 탐색.
+    - **Baum-Welch Algorithm:** 데이터를 통해 모델의 파라미터를 학습하는 EM 알고리즘 기반 기법.
+- **의의:** 음성 인식, 유전자 분석, 필기체 인식 등 딥러닝 이전의 시퀀스 모델링 분야를 지배했으며, 현재도 불완전한 정보 하의 상태 추론에 널리 쓰임.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** RNN/LSTM에 의해 많은 영역이 대체되었으나, 명시적인 상태 전이가 중요한 제어 시스템이나 데이터가 매우 적은 확률 모델링에서는 여전히 강력한 효율성을 발휘함.
+- **정책 변화:** Antigravity 프로젝트는 에이전트의 불완전한 센서 데이터나 불규칙한 로그 시퀀스를 바탕으로 시스템의 잠재적 상태(정상/위험/장애 등)를 확률적으로 진단할 때 HMM을 보조적으로 활용함.
+
+## 🔗 지식 연결 (Graph)
+- [[Probability-Theory]], [[RNN-Foundations]], [[Kalman-Filter]], [[Sequence-to-Sequence-Models]]
+- **Raw Source:** [[10_Wiki/Topics/AI/HMM.md]]

10_Wiki/Topics/AI/Hallucination-in-LLMs.md

@@ -0,0 +1,32 @@
+---
+id: LLM-HAL-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, nlp, llm, hallucination, ai-ethics, rag]
+last_reinforced: 2026-04-26
+---
+
+# [[Hallucination in LLMs (LLM의 환각 현상)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "모델은 '모름'을 인정하기보다 가장 그럴듯한 거짓말을 선택하는 통계적 본능을 가지고 있음을 경계하라" — 대규모 언어 모델이 학습 데이터에 없는 사실을 마치 사실인 것처럼 지어내거나, 논리적으로 맞지 않는 답변을 생성하는 현상.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 모델이 확률적으로 가장 높은 다음 토큰을 생성하는 과정에서, 사실 관계(Factuality)보다 문장의 유창함(Fluency)이나 패턴의 유사성에 압도되어 발생하는 정보 왜곡 패턴.
+- **주요 원인:**
+    - **Data Noise:** 학습 데이터 자체에 잘못된 정보가 포함된 경우.
+    - **Over-smoothing:** 드문 사실보다 흔한 패턴을 우선시하여 일반화하는 경향.
+    - **Knowledge Cut-off:** 학습 시점 이후의 사건에 대해 추측하여 답변.
+- **해결 전략:**
+    - **RAG (Retrieval-Augmented Generation):** 외부의 신뢰할 수 있는 지식 소스를 검색하여 근거로 제공 (Antigravity의 핵심 전략).
+    - **Prompt Engineering:** "모르면 모른다고 답하라"는 명시적 지시 포함.
+    - **Verification Loop:** 생성된 답변을 다른 모델이나 인간이 재검증.
+- **의의:** AI 답변의 신뢰도를 결정하는 가장 큰 장벽이며, 이를 통제하는 능력이 실전 AI 성능의 척도가 됨.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 단순히 '창의적 오류'로 치부되던 시기를 지나, 이제는 시스템의 결함으로 인식되어 이를 줄이기 위한 기술(RLHF, RAG 등)이 비약적으로 발전함.
+- **정책 변화:** Antigravity 프로젝트는 모든 지식 보강 작업 시 `00_Raw` 데이터에 기반한 RAG 프로세스를 강제하여 환각 현상을 원천 차단함.
+
+## 🔗 지식 연결 (Graph)
+- [[LLM]], [[Reinforcement-Learning-from-Human-Feedback-RLHF]], [[Trustworthy-AI]], [[Knowledge-Gardening-Protocol]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Hallucination-in-LLMs.md]]

10_Wiki/Topics/AI/Hardware-Acceleration-for-AI.md

@@ -0,0 +1,32 @@
+---
+id: HW-ACCEL-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [hardware, ai-infrastructure, tpu, npu, asic, acceleration]
+last_reinforced: 2026-04-26
+---
+
+# [[Hardware Acceleration for AI (AI 하드웨어 가속)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "범용성을 포기하고 연산의 본질(Matrix Math)에만 모든 하드웨어 자원을 쏟아부어 성능의 한계를 돌파하라" — 인공지능 학습과 추론에 필요한 거대한 규모의 행렬 연산을 CPU보다 수십~수백 배 빠르게 처리하기 위해 설계된 특수 목적 하드웨어 및 그 가속 기술.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 딥러닝 연산의 90% 이상을 차지하는 곱셈-누산(MAC) 연산을 저전력으로 초고속 처리하기 위해 연산 유닛을 격자 형태로 배치하는 시스톨릭 어레이(Systolic Array) 아키텍처 패턴.
+- **주요 가속기 종류:**
+    - **GPU (Graphics Processing Unit):** 수천 개의 코어를 이용한 범용 병렬 처리의 강자.
+    - **TPU (Tensor Processing Unit):** 구글이 개발한 텐서 연산 특화 ASIC.
+    - **NPU (Neural Processing Unit):** 모바일 및 엣지 기기에서 저전력 AI 연산에 특화.
+    - **FPGA:** 회로를 직접 프로그래밍하여 특정 알고리즘에 맞춤화된 성능 제공.
+- **핵심 기술:**
+    - **Mixed Precision:** FP32 대신 FP16, BF16, INT8 등 낮은 정밀도를 사용하여 연산량과 메모리 사용량 절감.
+    - **Quantization:** 모델 가중치를 낮은 비트로 변환하여 가속화.
+- **의의:** 하드웨어의 혁신이 모델의 대형화와 실시간 서빙을 가능케 하는 AI 발전의 물리적 동력.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 하드웨어는 주어진 것이라는 인식에서 벗어나, 이제는 알고리즘에 맞춰 하드웨어를 설계(HW-SW Co-design)하는 시대로 진화.
+- [[GPU-Architecture-for-AI]] 문서와 연계하여, 각 가속기별 최적화 전략의 차이를 명확히 인지해야 함.
+
+## 🔗 지식 연결 (Graph)
+- [[GPU-Architecture-for-AI]], [[System-Design-for-AI-Scale]], [[Deep-Learning-Foundations]], [[Edge-AI-and-Computing]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Hardware-Acceleration-for-AI.md]]

10_Wiki/Topics/AI/Hash-Functions-and-Maps.md

@@ -0,0 +1,28 @@
+---
+id: CS-HASH-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [computer-science, data-structures, hash-function, hash-map, search-efficiency]
+last_reinforced: 2026-04-26
+---
+
+# [[Hash Functions and Maps (해시 함수와 맵)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "데이터의 고유한 지문(Hash)을 만들어, 아무리 넓은 공간에서도 단번에 원하는 정보를 낚아채라" — 임의의 길이를 가진 데이터를 고정된 길이의 고유한 값으로 변환(Hashing)하고, 이를 인덱스로 사용하여 데이터의 삽입과 검색을 상성 시간($O(1)$)에 수행하는 핵심 자료구조.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Key-Value" 쌍으로 정보를 저장하고, 키값에 해시 함수를 적용하여 저장 위치를 즉각 결정함으로써 탐색 범위를 원천적으로 배제하는 매핑 패턴.
+- **핵심 요소:**
+    - **Hash Function:** 입력 데이터를 고르게 분산된 숫자로 변환하는 결정론적 함수.
+    - **Collision Resolution:** 서로 다른 키가 같은 해시값을 가질 때의 해결책 (Chaining, Open Addressing).
+    - **Load Factor:** 해시 테이블의 채워진 정도에 따라 성능이 결정되므로 적절한 리사이징(Resizing) 필요.
+- **의의:** 캐시 시스템, 데이터베이스 인덱싱, 암호화, 중복 체크 등 현대 모든 고성능 소프트웨어 아키텍처의 필수 구성 요소.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 단순한 배열이나 리스트를 순회하던 방식에서, 메모리를 조금 더 사용하더라도 압도적인 검색 속도를 보장하는 해시 기반 자료구조가 현대 개발의 표준으로 정착.
+- **정책 변화:** Antigravity 프로젝트는 수백만 개의 지식 임베딩 ID를 관리하고 중복 문서를 빠르게 필터링하기 위해 고성능 해시 맵 아키텍처를 적극 활용함.
+
+## 🔗 지식 연결 (Graph)
+- [[Data-Structures-Foundations]], [[Search-Algorithms]], [[Distributed-Computing]], [[System-Design-for-AI-Scale]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Hash-Functions-and-Maps.md]]

10_Wiki/Topics/AI/Heuristic-Search.md

@@ -0,0 +1,28 @@
+---
+id: CS-HEUR-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, algorithms, search-algorithms, heuristic, a-star, pathfinding]
+last_reinforced: 2026-04-26
+---
+
+# [[Heuristic Search (휴리스틱 탐색)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "완벽한 계산에 집착하기보다, 정답에 가까울 것 같은 길을 먼저 선택하여 탐색의 미로를 돌파하라" — 문제 해결 과정에서 모든 경로를 탐색하는 대신, 현재 상태에서 목표까지 남은 거리나 비용을 추정(Heuristic)하여 탐색 범위를 획기적으로 줄이는 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Best-First Search" — 평가 함수 $f(n) = g(n) + h(n)$ 을 사용하여, 지금까지 온 비용($g$)과 앞으로 남은 예상 비용($h$)의 합이 가장 적은 노드부터 우선적으로 방문하는 우선순위 탐색 패턴.
+- **핵심 알고리즘:**
+    - **A* Search:** 가장 널리 쓰이는 휴리스틱 탐색으로, 남은 거리($h$)를 과소평가(Admissibility)할 경우 항상 최단 경로를 보장함.
+    - **Greedy Best-First Search:** 현재 위치에서 목표에 가장 가까워 보이는 곳으로만 이동. 빠르지만 최단 경로 보장 못함.
+    - **Beam Search:** 메모리 제약을 위해 상위 N개의 유망한 경로만 남기고 탐색 (LLM 문장 생성에 사용).
+- **의의:** 탐색 공간이 기하급수적으로 늘어나는 문제(체스, 경로 찾기, 언어 모델링 등)에서 연산 자원을 효율적으로 사용하여 현실적인 시간 내에 답을 도출함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 완전 탐색(BFS, DFS)이 정답이라는 고정관념에서 벗어나, 복잡도가 높은 현실 문제에서는 '충분히 좋은 해'를 빠르게 찾는 휴리스틱이 더 가치 있음을 증명.
+- **정책 변화:** Skybound 프로젝트의 적 함대 경로 탐색 알고리즘은 장애물 회피를 위해 최적화된 A* 휴리스틱을 사용하여 실시간 프레임 저하 없이 복잡한 지형을 기동함.
+
+## 🔗 지식 연결 (Graph)
+- [[Search-Algorithms]], [[Greedy-Algorithms]], [[A-Star-Algorithm-Optimizations]], [[Decision-Trees-and-Random-Forests]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Heuristic-Search.md]]

10_Wiki/Topics/AI/High-Availability-Systems.md

@@ -0,0 +1,29 @@
+---
+id: SYS-HA-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [infrastructure, high-availability, cloud-computing, reliability, system-architecture]
+last_reinforced: 2026-04-26
+---
+
+# [[High Availability Systems (고가용성 시스템)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "장애는 반드시 일어난다는 가정 하에, 시스템의 어느 한 곳이 무너져도 서비스가 멈추지 않는 '불사신' 아키텍처를 설계하라" — 시스템의 구성 요소들을 이중화(Redundancy)하고 장애를 자동으로 감지 및 복구하여, 사용자가 체감하는 서비스 중단 시간을 최소화(99.99% 이상)하는 기술 체계.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 단일 장애점(Single Point of Failure, SPOF)을 철저히 제거하고, 부하 분산(Load Balancing)과 복제(Replication)를 통해 자원을 분산 배치하여 장애 전파를 차단하는 격리 및 복구 패턴.
+- **핵심 요소:**
+    - **Redundancy:** 모든 핵심 서버와 데이터베이스를 2개 이상으로 운영 (Active-Active, Active-Standby).
+    - **Load Balancing:** 트래픽을 여러 노드에 고르게 분산시켜 과부하 방지.
+    - **Failover:** 장애 발생 시 즉시 정상적인 노드로 서비스를 전환.
+    - **Health Check:** 각 노드의 상태를 주기적으로 감지하여 가용 자원에서 제외/포함 결정.
+- **의의:** 비즈니스 연속성(Business Continuity)을 보장하고 서비스 신뢰도를 높여, 대규모 사용자 기반의 플랫폼 운영에 필수적인 토대 제공.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 단순히 성능이 좋은 서버 하나를 쓰는 것보다, 평범한 여러 서버를 유기적으로 연결하는 것이 비용 대비 가용성 면에서 압도적임을 클라우드 시대를 통해 증명.
+- **정책 변화:** Antigravity 프로젝트의 클라우드 브레인 인프라는 다중 리전(Multi-region) 배치를 통해 자연재해급 장애 상황에서도 지식 검색 서비스가 중단되지 않도록 고가용성 설계를 적용함.
+
+## 🔗 지식 연결 (Graph)
+- [[System-Design-for-AI-Scale]], [[Distributed-Computing]], [[Hybrid-Cloud-Architectures]], [[Fault-Tolerance-and-Resilience]]
+- **Raw Source:** [[10_Wiki/Topics/AI/High-Availability-Systems.md]]

10_Wiki/Topics/AI/Homomorphic-Encryption.md

@@ -0,0 +1,28 @@
+---
+id: SEC-HOMO-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [security, cryptography, homomorphic-encryption, privacy-preserving-ai, data-privacy]
+last_reinforced: 2026-04-26
+---
+
+# [[Homomorphic Encryption (동형 암호)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "데이터의 자물쇠를 풀지 않고도 그 내용물을 가공하여, 결과물만을 안전하게 돌려받아라" — 암호화된 데이터를 복호화하지 않은 상태에서 덧셈, 곱셈 등 수학적 연산을 수행하고 그 결과 또한 암호화된 형태로 얻을 수 있게 하는 혁신적인 암호 체계.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Privacy-Preserving Computing" — 민감한 원본 데이터(의료 정보, 개인 금융 등)를 외부에 공개하지 않고도 클라우드나 AI 모델이 이를 학습하거나 분석할 수 있게 하는 보안 연산 패턴.
+- **주요 유형:**
+    - **Partially Homomorphic (PHE):** 덧셈이나 곱셈 중 한 종류의 연산만 지원 (예: RSA, Paillier).
+    - **Somewhat Homomorphic (SHE):** 제한된 횟수의 연산 지원.
+    - **Fully Homomorphic (FHE):** 횟수 제한 없이 모든 종류의 산술 연산 지원 (가장 강력함).
+- **의의:** '데이터 활용'과 '개인정보 보호'라는 상충하는 가치를 동시에 만족시킬 수 있어, 미래 지능형 의료, 보안 클라우드, 분산 AI 학습의 핵심 기술로 평가됨.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 연산 속도가 너무 느려 실질적 사용이 불가능하다는 인식이 강했으나, 최근 알고리즘 최적화와 가속 하드웨어의 발전으로 실무 적용 가능한 영역(통계 분석 등)이 확대되고 있음.
+- **정책 변화:** Antigravity 프로젝트는 사용자의 민감한 개인 정보를 포함한 '로컬 브레인 로그'를 분석할 때, 동형 암호 기술을 적용하여 분석 서버가 원본 텍스트를 절대 볼 수 없도록 하는 보안 표준을 연구 중임.
+
+## 🔗 지식 연결 (Graph)
+- [[Data-Privacy-Foundations]], [[Federated-Learning]], [[Differential-Privacy]], [[Cloud-Security-Mastery]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Homomorphic-Encryption.md]]

10_Wiki/Topics/AI/Human-Computer-Interaction-HCI.md

@@ -0,0 +1,29 @@
+---
+id: HCI-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [hci, ux, human-factors, interaction-design, cognitive-psychology]
+last_reinforced: 2026-04-26
+---
+
+# [[Human-Computer Interaction (HCI, 인간-컴퓨터 상호작용)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "기계의 언어를 인간에게 강요하지 말고, 기계가 인간의 맥락과 감각을 학습하게 하라" — 인간과 컴퓨터 시스템 사이의 대화와 상호작용을 연구하여, 기술이 인간의 능력을 확장하고 사용 경험을 최적화하도록 만드는 다학제적 분야.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "User-Centered Design (UCD)" — 기술적 구현 가능성보다 사용자의 인지 모델, 심리 상태, 그리고 작업 맥락을 최우선으로 고려하여 인터페이스와 경험을 설계하는 인간 중심의 엔지니어링 패턴.
+- **주요 연구 영역:**
+    - **Interface Design:** 시각적(GUI), 음성(VUI), 제스처, 뇌-컴퓨터 인터페이스(BCI).
+    - **Usability:** 효율성, 학습 용이성, 오류 방지, 사용 만족도 측정.
+    - **Accessibility:** 모든 사용자가 제약 없이 기술을 누릴 수 있도록 보장.
+    - **Emotional Interaction:** 기계와의 상호작용 중 발생하는 감정적 교감과 신뢰 형성.
+- **의의:** AI가 고도화될수록 '무엇을 할 수 있는가'보다 '인간과 어떻게 협업할 것인가'가 중요해지며, HCI는 그 연결고리를 제공함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 일방적인 명령 전달(CLI/GUI)에서 벗어나, 에이전트가 인간의 비언어적 맥락까지 파악하여 선제적으로 대응하는 지능형 상호작용으로 패러다임이 전이됨.
+- **정책 변화:** Antigravity 프로젝트의 모든 에이전트 상호작용은 HCI 원칙을 기반으로 하며, 사용자의 대화 패턴과 작업 속도를 분석하여 에이전트의 응답 톤과 속도를 최적화하는 어댑티브 UI를 지향함.
+
+## 🔗 지식 연결 (Graph)
+- [[UX-Design]], [[Gestalt-Principles-in-UX]], [[Human-in-the-loop-AI]], [[Context-Aware-Computing]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Human-Computer-Interaction-HCI.md]]

10_Wiki/Topics/AI/Human-in-the-loop-AI.md

@@ -0,0 +1,28 @@
+---
+id: HITL-AI-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [ai, human-in-the-loop, ai-ethics, model-training, decision-making]
+last_reinforced: 2026-04-26
+---
+
+# [[Human-in-the-loop AI (인간 참여형 AI)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "AI의 폭발적인 속도와 인간의 정교한 판단력을 결합하여, 결점 없는 지능 시스템을 완성하라" — 인공지능의 학습, 테스트, 실제 운영 단계에 인간의 개입(피드백, 교정, 검증)을 통합하여 모델의 성능을 고도화하고 윤리적 안정성을 확보하는 아키텍처.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** AI가 확신하기 어려운 모호한 케이스(Uncertainty)를 인간 전문가에게 전달하여 판단을 받고, 그 결과가 다시 모델의 학습 데이터로 활용되는 선순환 피드백 루프 패턴.
+- **주요 활용 단계:**
+    - **Training:** 인간이 고품질의 레이블 데이터를 생성하거나 RLHF(인간 피드백 기반 강화학습)를 통해 가이드를 제공.
+    - **Active Learning:** 모델이 가장 도움이 될 것 같은 데이터를 직접 골라 인간에게 질문.
+    - **Deployment:** AI가 내린 최종 결정을 인간이 검토하거나(Review), 위험도가 높은 결정은 반드시 인간의 승인을 거치게 함(Human Approval).
+- **의의:** AI의 블랙박스 문제를 해결하고, 책임 있는 의사결정이 필요한 분야(의료, 법률, 자율주행)에서 AI의 도입을 가능하게 함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 완전 자동화만이 기술적 진보라는 편견에서 벗어나, 인간의 개입이 지능 시스템의 품질을 결정하는 핵심 요소임을 재발견함.
+- **정책 변화:** Antigravity 프로젝트의 지식 가드닝 작업은 '인간 참여형' 구조를 기본으로 함. 에이전트가 초안을 작성하고 보강하되, 최종적인 승인과 트래커 업데이트 과정에서 인간과의 상호작용을 통해 지식의 무결성을 유지함.
+
+## 🔗 지식 연결 (Graph)
+- [[Reinforcement-Learning-from-Human-Feedback-RLHF]], [[Active-Learning]], [[AI-Ethics]], [[Trustworthy-AI]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Human-in-the-loop-AI.md]]

10_Wiki/Topics/AI/Hybrid-Cloud-Architectures.md

@@ -0,0 +1,29 @@
+---
+id: CLOUD-HYBRID-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [cloud-computing, hybrid-cloud, infrastructure, system-architecture, data-sovereignty]
+last_reinforced: 2026-04-26
+---
+
+# [[Hybrid Cloud Architectures (하이브리드 클라우드 아키텍처)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "데이터의 주권(Private)은 지키고, 연산의 확장성(Public)은 빌려 써서 최적의 비즈니스 지형을 구축하라" — 온프레미스 인프라와 공용 클라우드 서비스를 통합하여, 보안과 비용 효율성 그리고 유연한 확장성을 동시에 달성하는 인프라 설계 전략.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 민감한 핵심 데이터와 보안 로직은 로컬 인프라(Private)에 두고, 일시적인 부하 증가나 대규모 연산이 필요한 작업은 공용 클라우드(Public)의 자원을 즉시 끌어다 쓰는 오케스트레이션 패턴.
+- **주요 활용 시나리오:**
+    - **Cloud Bursting:** 예기치 못한 트래픽 폭증 시 클라우드 자원으로 확장.
+    - **Data Sovereignty:** 법적 규제나 보안상의 이유로 특정 데이터는 로컬에 유지.
+    - **Disaster Recovery:** 로컬 장애 시 클라우드 기반의 백업 시스템으로 즉시 전환.
+- **핵심 기술:** VPN, 전용선(Direct Connect), 컨테이너(Kubernetes), 멀티 클라우드 관리 플랫폼.
+- **의의:** 고정 자산의 효율적 운영과 클라우드의 탄력성을 결합하여 IT 인프라의 ROI를 극대화함.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** "클라우드로의 전면 전환(All-in Cloud)"이 정답이라 믿던 시대를 지나, 보안과 실시간성을 위해 로컬 자원을 병행하는 하이브리드 전략이 현실적인 최선책으로 재정립됨.
+- **정책 변화:** Antigravity 프로젝트는 '하이브리드 지능'을 지향함. 사용자의 개인화된 지식은 로컬 브레인에 저장하고, 방대한 범용 지식 검색이나 거대 모델 연산은 클라우드 브레인을 활용하는 하이브리드 아키텍처를 표준으로 함.
+
+## 🔗 지식 연결 (Graph)
+- [[High-Availability-Systems]], [[System-Design-for-AI-Scale]], [[Cloud-Security-Mastery]], [[Local-Brain-Management]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Hybrid-Cloud-Architectures.md]]

10_Wiki/Topics/AI/Hyperparameter-Optimization.md

@@ -1,28 +1,29 @@
 ---
-id: HYPER-OPT-001
+id: OPT-HYPER-001
 category: "[[10_Wiki/💡 Topics/AI]]"
 confidence_score: 1.0
-tags: [machine-learning, optimization, automl, deep-learning]
+tags: [ai, machine-learning, hyperparameter-tuning, bayesian-optimization, model-selection]
 last_reinforced: 2026-04-26
 ---
 
 # [[Hyperparameter Optimization (하이퍼파라미터 최적화)]]
 
 ## 📌 한 줄 통찰 (The Karpathy Summary)
-> "모델의 성능을 결정짓는 '튜닝 레버'들의 최적 조합을 찾아라" — 학습률, 배치 크기, 레이어 수 등 학습 과정에서 자동으로 학습되지 않는 설정값(Hyperparameters)들을 체계적으로 탐색하여 성능을 극대화하는 과정.
+> "모델 아키텍처가 악기라면, 하이퍼파라미터 최적화는 가장 아름다운 소리를 내기 위해 현을 조율하는 과정이다" — 학습률, 배치 크기, 레이어 수 등 모델이 스스로 학습할 수 없는 외부 설정값들의 최적 조합을 찾아 모델 성능을 극대화하는 프로세스.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-- **추출된 패턴:** 주어진 데이터와 모델 구조에서 최상의 결과를 내는 매개변수 조합을 탐색(Exploration)과 활용(Exploitation)의 균형을 통해 효율적으로 찾아내는 패턴.
-- **세부 내용:**
-    - **Grid Search:** 모든 가능한 조합을 격자 형태로 전수 조사. 확실하지만 비용이 매우 높음.
-    - **Random Search:** 파라미터 공간을 무작위로 샘플링. Grid Search보다 효율적임이 증명됨.
-    - **Bayesian Optimization:** 이전 시도의 결과를 바탕으로 확률 모델을 구축하여 유망한 영역을 집중 탐색 (예: Gaussian Processes 활용).
-    - **Hyperband:** 리소스를 적게 할당해 많은 후보를 테스트한 뒤, 유망한 후보에게만 더 많은 리소스를 할당하는 효율적 전략.
+- **추출된 패턴:** 탐색 공간(Search Space) 내에서 모델의 성능을 평가 지표로 삼아, 가장 효율적인 경로로 최적의 파라미터 조합을 찾아가는 탐색 및 최적화 패턴.
+- **주요 전략:**
+    - **Grid Search:** 가능한 모든 조합을 시도. 확실하지만 연산 비용이 매우 높음.
+    - **Random Search:** 무작위로 조합을 시도. 그리드 서치보다 효율적이며 중요한 파라미터 탐색에 유리.
+    - **Bayesian Optimization:** 이전 시도 결과를 바탕으로 다음 유망한 지점을 예측하여 탐색 (가장 고도화된 방식).
+    - **Hyperband / BOHB:** 조기 종료(Early Stopping)와 베이지안 최적화를 결합하여 자원을 효율적으로 배분.
+- **의의:** 동일한 아키텍처라도 하이퍼파라미터 설정에 따라 성능 차이가 크게 발생하므로, 실전 AI 개발에서 '모델링'만큼이나 중요한 단계.
 
 ## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
-- **과거 데이터와의 충돌:** 장인의 '경험'에 의존하던 수동 튜닝에서, 알고리즘이 자동으로 최적값을 찾는 AutoML(Automated Machine Learning) 시대로 전환.
-- **정책 변화:** Antigravity 에이전트의 내부 모델 튜닝 시, 베이지안 최적화를 기본 알고리즘으로 채택하여 최소한의 시도로 최적의 추론 온도를 결정함.
+- **과거 데이터와의 충돌:** 개발자의 직관이나 수작업 튜닝에 의존하던 방식에서, 이제는 AutoML 기술을 통해 최적화 과정 자체를 자동화하는 방향으로 진화.
+- **정책 변화:** Antigravity 프로젝트는 에이전트의 응답 품질 최적화를 위해 Temperature, Top-p 등의 파라미터를 베이지안 최적화 기반으로 튜닝하여 정교한 페르소나를 구축함.
 
 ## 🔗 지식 연결 (Graph)
-- [[AutoML]], [[Gaussian-Processes]], [[Machine-Learning-Lifecycle]], [[Deep-Learning]]
+- [[Black-Box-Optimization]], [[Gaussian-Processes]], [[Global-vs-Local-Optima]], [[Generalization-in-AI]]
 - **Raw Source:** [[10_Wiki/Topics/AI/Hyperparameter-Optimization.md]]

10_Wiki/Topics/AI/Hypothesis-Testing.md

@@ -0,0 +1,29 @@
+---
+id: MATH-HYPO-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [statistics, math, hypothesis-testing, p-value, data-science]
+last_reinforced: 2026-04-26
+---
+
+# [[Hypothesis Testing (가설 검정)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "데이터의 증거를 토대로, 우리가 믿고 싶은 가설이 '우연'이라는 함정에 빠지지 않았는지 엄격하게 심판하라" — 표본 데이터를 통해 모집단의 특성에 대한 가설이 통계적으로 타당한지 계산하여, 의사결정의 불확실성을 수치화된 신뢰도로 치환하는 방법론.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "귀무가설(Null Hypothesis)"이라는 기본 전제를 세우고, 관측된 데이터가 이 전제 하에서 발생할 확률(p-value)이 매우 낮다면 귀무가설을 기각하고 "대립가설(Alternative Hypothesis)"을 채택하는 논리적 추론 패턴.
+- **핵심 요소:**
+    - **Null Hypothesis ($H_0$):** 효과나 차이가 없다는 기본 가설.
+    - **Alternative Hypothesis ($H_1$):** 증명하고 싶은 효과나 차이가 있다는 가설.
+    - **P-value:** 귀무가설이 맞다는 전제 하에 현재 데이터가 관측될 확률. 보통 0.05 미만일 때 유의미하다고 판단.
+    - **Type I & II Error:** 맞는데 틀리다고 하거나(Alpha), 틀린데 맞다고 하는(Beta) 오류의 관리.
+- **의의:** 주관적인 판단을 배제하고, 객관적인 지표를 통해 변화의 실효성을 증명하는 데이터 과학의 근간.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** p-value에만 과도하게 의존하는 'P-hacking'의 위험성을 경고하며, 최근에는 효과 크기(Effect Size)와 베이지안 가설 검정을 병행하는 방향으로 정밀도 강화.
+- **정책 변화:** Antigravity 프로젝트는 새로운 에이전트 알고리즘 도입 시, 기존 알고리즘과의 성능 차이를 가설 검정을 통해 통계적으로 증명한 후 배포를 결정하는 'Evidence-based Deployment' 원칙을 준수함.
+
+## 🔗 지식 연결 (Graph)
+- [[Probability-Theory]], [[Exploratory-Data-Analysis]], [[A-B-Testing-Foundations]], [[Decision-Making]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Hypothesis-Testing.md]]

10_Wiki/Topics/AI/Image-Classification-Mastery.md

@@ -0,0 +1,28 @@
+---
+id: CV-CLASS-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [computer-vision, deep-learning, image-classification, cnn, vit]
+last_reinforced: 2026-04-26
+---
+
+# [[Image Classification Mastery (이미지 분류 마스터리)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "픽셀의 뭉치에서 사물의 특징(Feature)을 추출하여, 기계가 세상을 명명(Labeling)하게 하라" — 입력 이미지를 미리 정의된 여러 카테고리 중 하나(또는 그 이상)로 분류하는 컴퓨터 비전의 핵심 태스크이자, 모든 시각 지능 시스템의 시작점.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 이미지의 국소적 특징(선, 면, 질감)을 하위 레이어에서 추출하고, 이를 상위 레이어에서 조합하여 사물의 고유한 형태를 인식하는 계층적 특징 학습 패턴.
+- **핵심 아키텍처:**
+    - **CNN (Convolutional Neural Networks):** 공간적 구조를 보존하며 특징을 추출하는 고전적 강자 (ResNet, EfficientNet).
+    - **Vision Transformer (ViT):** 이미지를 패치 단위로 나누어 어텐션 메커니즘을 적용, 전역적인 맥락 파악에 유리.
+    - **Transfer Learning:** 거대 데이터셋(ImageNet 등)으로 사전 학습된 모델을 활용하여 소량의 데이터로도 고성능 구현.
+- **의의:** 자율주행, 의료 영상 진단, 콘텐츠 필터링 등 이미지가 데이터로 사용되는 거의 모든 산업의 기반 기술.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 단순히 정적인 이미지를 분류하던 단계를 넘어, 이제는 텍스트와 이미지를 동시에 이해하는 멀티모달(CLIP 등) 모델을 통해 '문맥적 분류'가 가능한 시대로 진화.
+- **정책 변화:** Antigravity 프로젝트는 수집된 이미지 자료(`00_Raw/Images`)를 자동으로 인덱싱하고 위키 카테고리에 할당하기 위해 최신 ViT 기반의 분류 엔진을 상시 가동함.
+
+## 🔗 지식 연결 (Graph)
+- [[Object-Detection-Mastery]], [[Image-Segmentation-Techniques]], [[Deep-Learning-Foundations]], [[Computer-Vision-Mastery]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Image-Classification-Mastery.md]]

10_Wiki/Topics/AI/Image-Segmentation-Techniques.md

@@ -0,0 +1,29 @@
+---
+id: CV-SEG-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [computer-vision, deep-learning, image-segmentation, u-net, mask-rcnn]
+last_reinforced: 2026-04-26
+---
+
+# [[Image Segmentation Techniques (이미지 세그멘테이션 기법)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "단순히 무엇이 있는지 맞히는 것을 넘어, 사물의 경계를 픽셀 단위로 완벽하게 도려내어 세상을 분할하라" — 이미지 내의 모든 픽셀을 특정 클래스로 분류하여, 사물의 위치와 형태를 정교하게 파악하는 컴퓨터 비전 기술.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** "Encoder-Decoder" — 이미지의 특징을 압축하여 의미를 파악(Encoder)한 뒤, 이를 다시 원래 이미지 크기로 복원하며 픽셀별 레이블을 할당(Decoder)하는 복원 및 분류 패턴.
+- **주요 유형:**
+    - **Semantic Segmentation:** 같은 클래스에 속하는 사물들을 하나의 덩어리로 인식 (예: 모든 자동차를 '자동차'라는 하나의 영역으로 표시).
+    - **Instance Segmentation:** 같은 클래스라도 개별 사물을 서로 다르게 구분 (예: 자동차 A, 자동차 B를 각각 다른 개체로 인식).
+    - **Panoptic Segmentation:** 세맨틱과 인스턴스의 결합. 배경과 사물을 모두 완벽하게 분할.
+- **핵심 모델:** U-Net (의료 영상 특화), Mask R-CNN, DeepLab, SAM (Segment Anything Model).
+- **의의:** 정밀 로봇 제어, 자율주행의 장애물 회피, 배경 제거 및 합성 등 공간적 이해가 필수적인 모든 시각 기술의 정점.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 각 도메인별로 특화된 모델을 사용하던 방식에서, 메타의 SAM과 같이 어떤 이미지라도 추가 학습 없이 즉시 분할 가능한 '파운데이션 모델' 시대로 진화.
+- **정책 변화:** Skybound 프로젝트의 후처리 이펙트 및 정교한 충돌 판정 시스템은 픽셀 단위의 마스크 데이터를 생성하는 세그멘테이션 기법을 활용하여 시각적 완성도를 높임.
+
+## 🔗 지식 연결 (Graph)
+- [[Image-Classification-Mastery]], [[Object-Detection-Mastery]], [[Computer-Vision-Mastery]], [[Deep-Learning-Foundations]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Image-Segmentation-Techniques.md]]

10_Wiki/Topics/AI/Imbalanced-Data-Handling.md

@@ -0,0 +1,32 @@
+---
+id: ML-IMBAL-001
+category: "[[10_Wiki/💡 Topics/AI]]"
+confidence_score: 1.0
+tags: [machine-learning, imbalanced-data, resampling, smote, focal-loss]
+last_reinforced: 2026-04-26
+---
+
+# [[Imbalanced Data Handling (불균형 데이터 처리)]]
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+> "데이터의 양(Quantity)에 압도당하지 말고, 소외된 소수의 정보(Minority Class) 속에 숨겨진 가치에 집중하라" — 학습 데이터의 클래스 분포가 편향되어 있을 때, 모델이 다수 클래스에만 치우친 예측을 하지 않도록 데이터나 알고리즘 측면에서 균형을 맞추는 기법.
+
+## 📖 구조화된 지식 (Synthesized Content)
+- **추출된 패턴:** 다수 데이터의 영향력을 줄이거나 소수 데이터의 비중을 높여, 모델이 희귀하지만 중요한 샘플의 특징을 충분히 학습하게 만드는 가중치 및 샘플링 조정 패턴.
+- **핵심 전략:**
+    - **Data-level (Resampling):** 
+        - **Undersampling:** 다수 클래스 데이터를 삭제. 정보 손실 위험.
+        - **Oversampling:** 소수 클래스 데이터를 복제하거나 생성 (예: SMOTE - 합리적인 가상 데이터 생성).
+    - **Algorithm-level:**
+        - **Cost-sensitive Learning:** 소수 클래스를 틀렸을 때 더 큰 벌점을 부여.
+        - **Focal Loss:** 쉬운 샘플의 비중을 낮추고 어려운 샘플에 집중.
+- **평가 지표의 전환:** 불균형 데이터에서는 '정확도(Accuracy)' 대신 '정밀도(Precision)', '재현율(Recall)', 'F1-Score' 등을 사용하여 모델의 실질적인 성능을 측정해야 함.
+- **의의:** 이상 탐지, 질병 진단, 사기 적발 등 실생활에서 가장 중요한 '희귀 케이스' 탐지 능력 확보.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
+- **과거 데이터와의 충돌:** 단순히 데이터를 늘리거나 줄이던 방식에서, 최근에는 [[Focal-Loss]]와 같은 손실 함수 최적화와 이상 탐지(Anomaly Detection) 관점의 접근이 주를 이룸.
+- **정책 변화:** Antigravity 프로젝트는 보안 로그 분석 시, 압도적으로 많은 '정상 접근' 사이에서 극소수의 '공격 징후'를 놓치지 않기 위해 SMOTE와 Cost-sensitive 앙상블 모델을 표준으로 사용함.
+
+## 🔗 지식 연결 (Graph)
+- [[Focal-Loss]], [[Supervised-Learning-Foundations]], [[Precision-Recall-and-F1-Score]], [[Deep-Learning-Foundations]]
+- **Raw Source:** [[10_Wiki/Topics/AI/Imbalanced-Data-Handling.md]]