chore(wiki): reinforce knowledge batch #13-#14 (280 docs milestone)

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

@@ -0,0 +1,152 @@
+# Skybound Low Count High Threat Enemy Curve Settings Intro Refresh
+
+작성일: 2026-04-26 15:40 KST
+
+## 요청 요약
+
+- 여전히 적기가 너무 많이 나온다.
+- 적기의 수를 현재보다 약 1/3로 낮추고, 대신 적기의 공격력을 올리는 방향이 더 좋을 것 같다.
+- 적기에게도 `critical rate`와 `critical damage` 개념을 추가하면 밸런스가 잡힐 것 같다.
+- Intro page도 현재 콘셉트에 맞게 다시 조율해야 한다.
+- 설정 페이지가 없다.
+- 설정 아이콘을 누르면 수정 가능한 항목이 나와야 한다.
+- 설정 항목 중 사운드 무소음 기능이 필요하다.
+
+## 핵심 문제
+
+현재 전투는 적 수가 많아 화면이 복잡해지고, 적 하나하나의 위협 판단이 흐려지는 문제가 있었다.
+
+Survivor-like 게임이라고 해도 Skybound는 탄 회피와 비행 조작이 중요한 슈터 성격이 강하므로, 적 개체 수가 너무 많으면 다음 문제가 생긴다.
+
+- 탄환과 적기 구분이 어려워진다.
+- 적을 피해서 움직이는 판단보다 화면 청소 성능이 더 중요해진다.
+- 스테이지가 진행될수록 난이도가 “전략적”이 아니라 “혼잡함”으로 느껴진다.
+
+따라서 이번 패스에서는 방향을 `많은 적 + 낮은 개별 위협`에서 `적은 적 + 높은 개별 위협`으로 바꿨다.
+
+## 적용한 변경
+
+### 적 수 1/3 스케일 적용
+
+`StageDirectorSystem`에서 전투 페이즈의 동시 적 cap과 scripted wave density를 약 34%로 줄였다.
+
+변경:
+
+- 일반 전투 페이즈의 `targetEnemyCap`을 약 1/3로 축소
+- `NORMAL`, `ELITE`, `SWARM_UNIT` wave density를 약 1/3로 축소
+- `MINI_BOSS`는 전투 구조상 유지
+
+의도:
+
+- 화면을 덜 혼잡하게 만든다.
+- 적 한 기의 움직임과 탄환을 더 잘 인지하게 한다.
+- 회피/위치 선정/폭탄 사용 판단을 더 명확하게 만든다.
+
+### Spawner 보조 스폰 축소
+
+타임라인 cap만 줄이면 procedural spawn이 다시 밀도를 채울 수 있으므로 `SpawnerSystem`도 함께 조정했다.
+
+변경:
+
+- Swarm batch 크기 감소
+- Swarm 간격 증가
+- 기본 절차 스폰 간격 증가
+- hard cap 감소
+- 절차 스폰 batch 크기 감소
+- 주기적 편대 스폰 수 감소
+
+의도:
+
+- 타임라인에서 줄인 적 수가 실제 플레이에서도 유지되게 한다.
+- 스크립트 웨이브와 절차 스폰이 합쳐져 다시 과밀해지는 문제를 방지한다.
+
+### 적 공격력 보정
+
+적 수가 줄면 회피 가능성이 올라가므로, 적 탄환의 기본 위협을 높였다.
+
+변경:
+
+- 적 탄환 damage 계산에 low-count compensation multiplier 적용
+- 기존보다 탄환 한 발의 위협이 더 커짐
+
+의도:
+
+- 적 수는 줄이되 긴장감은 유지한다.
+- “맞아도 큰일 없다”가 아니라 “적게 나오지만 맞으면 아프다”는 구조로 만든다.
+
+### 적기 Critical 개념 추가
+
+플레이어가 적 탄환에 맞을 때 적 탄환 critical 판정을 추가했다.
+
+변경:
+
+- Stage 기반 enemy critical chance 추가
+- Stage 기반 enemy critical damage multiplier 추가
+- critical 피격 시 `ENEMY CRIT` 플로팅 텍스트 출력
+- critical 피격 시 강한 피격 사운드 연결
+
+의도:
+
+- 후반 스테이지로 갈수록 적 하나하나가 더 무서워진다.
+- 적 수가 줄어도 “방심하면 크게 맞는다”는 전투 감각을 만든다.
+
+### 설정 패널 추가
+
+HUD의 설정 아이콘을 누르면 설정 패널이 열리도록 했다.
+
+현재 제공 설정:
+
+- Sound ON/OFF
+- HUD Scale
+- Toggle Fullscreen
+
+Sound OFF는 `AudioManager.muteAll()`을 호출하고, Sound ON은 `AudioManager.resumeAll()`을 호출한다.
+
+의도:
+
+- 사용자가 즉시 사운드를 무음 처리할 수 있게 한다.
+- UI 크기를 직접 조절할 수 있게 한다.
+- 전체 화면 전환도 설정 패널에서 접근 가능하게 한다.
+
+### Intro page 콘셉트 조정
+
+Intro page를 현재 `Stylized Casual Magitech` 톤에 맞게 다시 조율했다.
+
+변경:
+
+- `SKYBOUND PROTOCOL`의 딱딱한 시스템 터미널 느낌 완화
+- 타이틀을 `SKYBOUND` 중심으로 정리
+- 두꺼운 외곽선, 네이비 패널, 시안/라임/골드 포인트 적용
+- `IGNITE & LAUNCH` CTA로 게임 진입 행동을 명확화
+- 미션/컨트롤 텔레메트리 문구를 현재 게임성에 맞게 변경
+
+의도:
+
+- 인트로부터 행거/HUD/결과 화면까지 같은 제품 톤으로 보이게 한다.
+- 사용자가 바로 “마지테크 생존 슈터”라는 인상을 받을 수 있게 한다.
+
+## 수정 파일
+
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/StageDirectorSystem.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/SpawnerSystem.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/CombatSystem.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/audio/AudioManager.ts`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.tsx`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/HUDOverlay.css`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/TitleScreen.tsx`
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/ui/TitleScreen.css`
+
+## 검증
+
+- `npm run build` 성공
+- 출력 디렉터리: `dist/38`
+
+## 후속 플레이테스트 체크 포인트
+
+- Stage 1~3에서 적 수가 체감상 약 1/3 수준으로 줄었는지 확인한다.
+- 적 탄환 한 발의 위협이 적절히 올라갔는지 확인한다.
+- Enemy Crit가 너무 불합리하게 느껴지지 않는지 확인한다.
+- 적 수가 줄어도 게임이 심심해지지 않는지 확인한다.
+- 설정 아이콘 클릭 시 패널이 열리고 Sound OFF/ON이 정상 동작하는지 확인한다.
+- HUD Scale 변경이 즉시 반영되는지 확인한다.
+- Intro page가 현재 UI 톤앤매너와 자연스럽게 이어지는지 확인한다.

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

@@ -0,0 +1,76 @@
+# Skybound Pickup Enemy Bullet Readability Separation
+
+작성일: 2026-04-26 16:05 KST
+
+## 요청 요약
+
+- 게임 화면에서 사용자가 먹을 수 있는 오브젝트와 적기 탄환의 색이 비슷하다.
+- 노랑/주황 계열 원형 오브젝트가 화면에 같이 보이기 때문에 먹어야 하는지 피해야 하는지 혼란스럽다.
+- 사용자 입장에서 즉시 판단 가능한 색상과 형태 분리가 필요하다.
+
+## 핵심 문제
+
+기존 렌더링에서는 필드 픽업과 적 탄환이 모두 따뜻한 노랑/주황 계열로 표현되는 경우가 많았다.
+
+대표 원인:
+
+- 일반 필드 픽업 fallback 색상이 `#ffff00`이었다.
+- 적 기본 탄환 색상이 `#ffcc00`이었다.
+- 일부 미니보스 패턴도 `#ffd65b`, `#ff9734` 등 골드/오렌지 계열을 사용했다.
+- 둘 다 작은 원형 발광체로 보이기 쉬워 실전 중 안전/위험 판단이 흐려졌다.
+
+Survivor-like 게임에서는 아이템과 탄환이 동시에 많이 등장하므로, 색뿐 아니라 실루엣도 다르게 설계해야 한다.
+
+## 적용한 변경
+
+### 픽업 시각 언어 변경
+
+필드 픽업을 적 탄환과 완전히 다른 안전 계열로 재정의했다.
+
+변경:
+
+- 일반 점수/자원 픽업은 청록/라임 계열로 변경
+- 픽업 외곽에 회전하는 점선 링 추가
+- 기본 픽업은 다이아몬드 실루엣으로 표현
+- HP 픽업은 분홍 하트 실루엣으로 표현
+- Bomb, Lock-on, Shield, 1UP 타입도 각각 다른 실루엣을 갖도록 처리
+
+의도:
+
+- 청록/라임은 “먹어도 되는 안전 자원”으로 인식되게 한다.
+- 점선 링은 픽업 가능 오브젝트라는 행동 힌트를 준다.
+- 원형 골드 발광체를 피해서 적 탄환과 혼동되지 않게 한다.
+
+### 적 탄환 시각 언어 변경
+
+적 탄환은 따뜻한 위험 계열과 각진 실루엣으로 통일했다.
+
+변경:
+
+- 일반 적 탄환은 붉은 오렌지 계열의 각진 탄체로 렌더링
+- Splitter/Boss 계열 탄환은 붉은/핑크 계열로 렌더링
+- Plasma/Graviton 계열 탄환은 마젠타 코어와 위험 링으로 렌더링
+- 기존 원형 골드 탄환 batching 렌더링을 제거하고 개별 danger projectile 렌더링으로 교체
+
+의도:
+
+- 적 탄환은 “피해야 하는 위험물”로 즉시 읽히게 한다.
+- 픽업과 다른 색상, 다른 형태, 다른 외곽 표현을 사용한다.
+- 탄환 패턴은 유지하되 시각 인지만 개선한다.
+
+## 수정 파일
+
+- `/Volumes/Data/project/Antigravity/Skybound/src/features/game/systems/GameRenderer.ts`
+
+## 검증
+
+- `npm run build` 성공
+- 출력 디렉터리: `dist/39`
+
+## 후속 플레이테스트 체크 포인트
+
+- Stage 1에서 청록/라임 픽업과 붉은 적 탄환이 즉시 구분되는지 확인한다.
+- 점수 픽업이 더 이상 적 탄환처럼 보이지 않는지 확인한다.
+- 적 탄환이 작아도 위험물로 읽히는지 확인한다.
+- HP 하트가 충분히 회복 아이템처럼 보이는지 확인한다.
+- 화면에 적 탄환과 픽업이 동시에 많을 때도 혼동이 없는지 확인한다.

00_Raw/AI 개인화 및 적응형 UX.md

@@ -0,0 +1,26 @@
+# [[AI 개인화 및 적응형 UX]]
+
+## 📌 Brief Summary
+AI 개인화 및 적응형 UX(Adaptive UX)는 사용자의 행동, 위치, 과거 상호작용 등의 실시간 데이터를 기반으로 디지털 경험을 동적으로 조정하는 최신 웹 디자인 트렌드입니다. 딥러닝과 예측 분석을 통해 사용자에게 맞춤형 콘텐츠, 레이아웃, 온보딩 흐름 등을 제공하며, 이는 단순한 시각적 개선을 넘어 사용자 참여와 전환율을 직접적으로 향상시키는 핵심 전략입니다. 2025년 웹 아키텍처에서 AI 기반 개인화는 사용자 경험을 더욱 매끄럽고 직관적으로 만들어 비즈니스 성장을 견인하는 필수적인 요소로 자리 잡고 있습니다.
+
+## 📖 Core Content
+*   **적응형 UX의 정의 및 역할**
+    *   적응형 UX는 모든 사용자에게 동일한 경험을 제공하는 일률적인 접근 방식을 탈피하여, 사용자의 행동, 기기 유형, 선호도 및 과거 상호작용에 따라 인터페이스를 동적으로 조정합니다 [1]. 
+    *   예측 분석(Predictive UX) 및 머신러닝을 활용하여 사용자가 다음에 필요로 할 것을 미리 예측하며, 동적 텍스트 및 개인화된 추천을 통해 사용자 참여도를 40% 이상 높이고 전환율을 최대 50%까지 향상시킬 수 있습니다 [2-5].
+
+*   **산업별 구현 및 성공 사례**
+    *   **B2B SaaS 및 엔터프라이즈 플랫폼**: 기업 규모나 사용자 역할에 맞춰 온보딩 흐름을 개인화합니다 [1]. 한 프로젝트 관리 플랫폼은 AI를 통해 사용자 행동 패턴과 회사 특성을 분석하여 맞춤형 기능 소개를 제공함으로써, 가치 인식 시간(Time-to-first-value)을 14일에서 3일로 단축하고 유료 전환율을 187% 상승시켰습니다 [6-9].
+    *   **이커머스 및 마케팅 랜딩 페이지**: '예측 세분화(Predictive segmentation)'를 사용하여 전환 가능성이 가장 높은 사용자를 찾아내고 이들에게 맞춤형 메시지나 할인 혜택을 제공합니다 [4]. 또한, 접속 위치나 트래픽 소스에 따라 동적 이미지, AI 생성 카피, 스마트 CTA 등을 실시간으로 변경합니다 [10].
+    *   **미디어 및 교육**: 디지털 매거진은 독자의 선호도를 학습하는 AI 기반 콘텐츠 개인화를 통해 디지털 구독을 178% 증가시켰으며 [11], 온라인 학습 플랫폼에서는 학생의 성취도에 따라 학습 경로를 조절하는 적응형 학습(Adaptive learning paths)을 도입해 이수율을 높였습니다 [12].
+
+*   **효과적인 구현 전략 및 유의사항**
+    *   AI 개인화를 효과적으로 구현하기 위해서는 사용자의 행동 데이터를 실시간으로 활용하는 것 못지않게 사용자 신뢰를 구축하는 것이 중요합니다. 데이터 수집 방식을 투명하게 공개하고, 사용자가 개인화 수준을 제어할 수 있는 '옵트인(Opt-in)' 옵션을 제공해야 합니다 [3].
+    *   이러한 기능들은 Wegic, Personyze, Optimizely, Dynamic Yield와 같은 AI 도구를 사용하거나, Landing-page.io처럼 텍스트를 기반으로 높은 전환율의 랜딩 페이지를 즉시 생성하는 AI 빌더를 통해 효과적으로 구축할 수 있습니다 [13, 14].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Conversion Rate Optimization (CRO)]], [[Landing Page UX Patterns]], [[Modern Website Architecture]], [[Mobile-First Design]]
+- **Projects/Contexts:** [[Enterprise Project Management Platform Adaptive Onboarding]], [[Digital Magazine Platform Redesign]], [[AI-Powered Analytics Dashboard]]
+- **Contradictions/Notes:** 소스에 따르면 AI 도구가 워크플로우를 가속화하고 맞춤형 콘텐츠를 생성하는 데 탁월하지만, 챗봇이 사용자를 잘못된 이름으로 부르는 등의 오류를 방지하고 브랜드 고유의 목소리를 유지하기 위해서는 AI를 주 조종사가 아닌 '디지털 부조종사(Digital Co-pilot)'로 대우하며 반드시 인간의 검토(Human review)와 병행해야 한다고 경고합니다 [10, 15].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Allbirds PWA 기반 E-commerce 재설계 사례.md

@@ -0,0 +1,20 @@
+# [[Allbirds PWA 기반 E-commerce 재설계 사례]]
+
+## 📌 Brief Summary
+Allbirds의 PWA 기반 E-commerce 재설계 사례는 성과 지향적 기술(Performance technology)과 브랜드의 가치 중심 스토리텔링을 효과적으로 통합한 웹 아키텍처 성공 사례입니다 [1]. 구매 흐름을 방해하지 않으면서 지속 가능성(sustainability) 사명을 전달하는 것을 주된 목표로 삼았습니다 [1]. 그 결과, PWA 기술을 통한 페이지 로드 속도의 획기적인 향상과 함께 고객의 신뢰를 얻어 전환율 및 수익이 크게 증가하는 비즈니스 성과를 거두었습니다 [2].
+
+## 📖 Core Content
+* **가치 중심의 UX 및 레이아웃 전략 (UX Patterns & Layout):**
+  Allbirds는 환경 영향 데이터를 지루한 "About Us" 페이지에 고립시켜 두지 않고, 제품 페이지 자체에 지속 가능성 지표를 직접 통합했습니다 [1, 3]. 고객의 가치와 브랜드의 가치가 일치할 때 이를 구매 여정 전반에 걸쳐 시각적으로 드러냄으로써 투명성을 확보하고 소비자의 신뢰를 성공적으로 높였습니다 [3].
+* **PWA를 활용한 기술적 아키텍처 및 성능 최적화 (Web Performance Optimization):**
+  기술 계층에서는 프로그레시브 웹 앱(PWA, Progressive Web App) 기술을 적극 도입하여 페이지가 거의 즉각적으로 로드되도록 아키텍처를 설계했습니다 [1]. 이는 로딩 지연을 없애 마찰 없는(frictionless) 쇼핑 경험을 제공하는 핵심 기반이 되었습니다.
+* **측정 가능한 비즈니스 성과 (Measurable Business Impact):**
+  PWA 기술 구현 및 UX 재설계를 통해 페이지 로드 속도가 89% 향상되었으며, 즉각적인 로딩 덕분에 이탈률(Bounce rate)이 34% 감소했습니다 [2, 3]. 또한, 제품 페이지에 투명하게 통합된 스토리텔링은 환경을 중시하는 소비자층의 전환율을 23% 증가시켰으며, 결과적으로 첫 분기에만 230만 달러($2.3M)의 추가 수익을 창출했습니다 [2, 3].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Web Performance Optimization]], [[UX Patterns]], [[Homepage Layout Structure]]
+- **Projects/Contexts:** [[E-commerce Redesign]], [[Performance and Storytelling in Retail]]
+- **Contradictions/Notes:** 소스 내에 상충하는 정보는 없습니다. 본 사례는 웹 성능 최적화(PWA 도입)와 직관적인 UX 패턴(가치 중심의 정보 제공)이 결합되었을 때 실제 비즈니스 수익(ROI)을 어떻게 증대시키는지를 완벽하게 입증합니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/Americans with Disabilities Act (ADA).md

@@ -0,0 +1,17 @@
+# [[Americans with Disabilities Act (ADA)]]
+
+## 📌 Brief Summary
+ADA(Americans with Disabilities Act)는 장애가 있는 사람들을 보호하기 위해 제정된 미국의 민권법이다 [1]. 웹사이트 및 디지털 환경에서 ADA 컴플라이언스는 조직의 웹사이트, 모바일 앱, 웹 기반 소프트웨어 등이 다양한 장애를 가진 사람들에게 사용 가능하고 접근 가능하도록 보장하는 규칙을 충족하는 과정을 의미한다 [2]. 디지털 서비스에 대한 ADA 지원 요건을 충족하기 위해 일반적으로 WCAG(Web Content Accessibility Guidelines)라는 기술 표준이 활용된다 [1].
+
+## 📖 Core Content
+* **ADA와 디지털 접근성 기준:** 미국 법무부(DOJ)는 2024년 4월 ADA 타이틀 II(Title II)에 따른 최종 규칙을 발표하여, 디지털 콘텐츠에 대한 기술적 표준으로 WCAG 2.1 Level AA를 최초로 채택하였다 [3-5]. ADA 법안 자체에 WCAG가 직접 명시되어 있지는 않으나, 미국 법원은 WCAG를 웹사이트 접근성의 실질적인 표준(de facto standard)으로 취급하고 있다 [6, 7].
+* **적용 대상 및 기한:** 법무부의 타이틀 II 규칙은 주 및 지방 정부 기관, K-12 학군, 대학교, 공공 도서관 등 공공 기관에 직접 적용되지만, 민간 기업을 위한 표준으로도 확고히 적용된다 [8, 9]. 인구 5만 명 이상의 공공 기관은 2026년 4월 24일까지 새로운 연방 디지털 접근성 표준 준수를 완료해야 한다 [5, 10].
+* **법적 위험 및 소송:** 웹사이트가 ADA를 준수하지 않아 사용자가 접근할 수 없는 경우 조직은 소송에 직면할 수 있으며, 관련 소송 건수는 매년 증가하고 있다 [5]. 2025년 상반기에만 2,000건 이상의 ADA 웹사이트 접근성 소송이 제기되어 전년 동기 대비 37% 증가하였다 [5]. 기업들이 접근성을 확보하기 위해 이른바 '빠른 해결책(quick fix)'인 접근성 위젯이나 오버레이를 설치하는 경우가 많으나, 2025년 상반기 전체 소송의 22.6%에 해당하는 456건이 이러한 위젯이 설치된 웹사이트를 대상으로 제기되었을 만큼 법적으로 완벽한 방어책이 되지 못한다 [11].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Web Content Accessibility Guidelines (WCAG)]], [[Web Accessibility]]
+- **Projects/Contexts:** [[ADA Website Compliance Checklist]], [[Modern Website Architecture Best Practices]]
+- **Contradictions/Notes:** 소스에 따르면 시중에 웹사이트 ADA 준수를 보장한다고 광고하는 자동화된 '접근성 위젯(accessibility widgets)' 도구들이 존재하지만, 실제로는 이러한 도구를 설치한 웹사이트들이 여전히 다수의 소송 대상이 되고 있으며 완벽한 규정 준수 문제를 해결하지 못한다는 한계가 지적된다 [11, 12]. 
+
+---
+*Last updated: 2026-04-26*

00_Raw/European Accessibility Act (EAA).md

@@ -0,0 +1,17 @@
+# [[European Accessibility Act (EAA)]]
+
+## 📌 Brief Summary
+European Accessibility Act (EAA)는 2025년부터 유럽 연합(EU) 전역에서 공식적으로 시행된 디지털 접근성 법안입니다 [1]. 2025년 6월 28일부터 정부 사이트뿐만 아니라 전자 상거래, 은행, 대중교통 등 디지털 서비스를 제공하는 민간 기업에도 엄격한 접근성 준수 기준을 요구합니다 [2, 3]. EAA를 준수하기 위해서는 WCAG 2.1 Level AA 기준에 직접적으로 매핑되는 EN 301 549 기술 표준을 엄격하게 따라야 합니다 [1, 3].
+
+## 📖 Core Content
+*   **적용 범위 및 대상:** EAA는 은행 앱, 전자 상거래 사이트, 통신, 대중교통 플랫폼, 티켓팅 및 전자책을 포함한 EU 내 주요 산업 전반의 디지털 서비스에 광범위하게 적용됩니다 [1, 3, 4]. 또한 웹사이트와 모바일 앱뿐만 아니라 소프트웨어 및 셀프 서비스 단말기(Kiosk)에 이르기까지 모든 디지털 접점을 포함합니다 [3].
+*   **접근성 준수 기술 요건:** EAA의 규정을 충족하려면 기업의 디지털 제품은 WCAG(Web Content Accessibility Guidelines) 2.1 Level AA와 매핑되는 'EN 301 549' 기술 표준을 반드시 충족해야 합니다 [3]. 구체적으로는 웹사이트 내에서 마우스 없이 작동 가능한 키보드 탐색, 화면 판독기(Screen Reader) 지원, 명확한 색상 대비 등 WCAG 2의 핵심 요구 사항을 지원해야 합니다 [3].
+*   **웹 아키텍처 및 비즈니스에 미치는 영향:** EAA 규정의 발효로 인해, 2025년의 현대 웹 엔지니어링 및 UX 설계에 있어 접근성(Accessibility)은 권장 사항을 넘어 핵심 요소이자 법적 의무가 되었습니다 [5]. 이를 준수하지 않는 기업은 법적 조치를 받거나 브랜드 평판에 심각한 손상을 입을 수 있으므로 [1], 규정 준수 및 잠재적 위험 예방을 위해 철저한 접근성 감사(Audit)를 진행하는 것이 권장됩니다 [6, 7].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[WCAG 2.1 Level AA]], [[Web Accessibility]], [[EN 301 549]], [[Keyboard Navigation]]
+- **Projects/Contexts:** [[Modern Web Engineering Architecture]], [[Website Accessibility Audits]]
+- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/FID (First Input Delay).md

@@ -0,0 +1,17 @@
+# [[FID (First Input Delay)]]
+
+## 📌 Brief Summary
+FID(First Input Delay)는 사용자가 웹페이지와 처음 상호작용(클릭, 탭 등)할 때 브라우저가 해당 입력을 처리하기 시작하기까지 걸리는 지연 시간을 측정하는 핵심 웹 지표(Core Web Vitals)입니다 [1, 2]. 원활한 상호작용 경험을 제공하기 위해 FID는 100밀리초(ms) 미만으로 유지되어야 합니다 [2, 3]. 하지만 FID는 입력 처리가 '시작되기 전'의 지연 시간만 측정한다는 한계가 있어, 2024년 및 2025년 구글 업데이트를 기점으로 전체 상호작용 지연 시간을 더 정확하게 측정하는 INP(Interaction to Next Paint)로 공식 대체되었습니다 [4-8].
+
+## 📖 Core Content
+* **FID의 목적 및 평가 기준:** FID는 LCP(Largest Contentful Paint), CLS(Cumulative Layout Shift)와 함께 웹사이트가 얼마나 빠르게 반응하는지(responsiveness)를 평가하는 구글의 중요한 지표입니다 [9]. 사용자의 최초 입력 시점부터 브라우저가 응답을 시작할 수 있는 순간까지의 시간을 추적하며, 100ms 미만일 때 사용자에게 원활한 상호작용(smooth interactivity)을 보장하는 것으로 간주됩니다 [2, 3].
+* **지표의 한계점:** FID는 사용자의 첫 번째 상호작용에 대해서만, 그리고 브라우저가 입력을 처리하기 전의 대기 시간(delay before processing)만을 측정합니다 [4, 10]. 따라서 실제 사용자가 체감하는 버튼 클릭, 타이핑 등 전체적인 상호작용 경험을 완벽히 대변하기에는 부족함이 있었습니다 [5, 11].
+* **INP로의 전환 (2024~2025 업데이트):** 구글의 Core Web Vitals 업데이트에 따라, 웹사이트의 현실적인 반응성을 더 잘 측정하기 위해 FID는 INP(Interaction to Next Paint) 지표로 완전히 대체되었습니다 [5, 6, 12-14]. INP는 입력 지연부터 실제 다음 화면 렌더링(프레임)이 이뤄지기까지의 전체 지연 시간을 측정하여 웹 성능을 더욱 포괄적으로 파악할 수 있게 해줍니다 [4, 11].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[INP (Interaction to Next Paint)]], [[LCP (Largest Contentful Paint)]], [[CLS (Cumulative Layout Shift)]], [[Web Performance Optimization]]
+- **Projects/Contexts:** [[Google Page Experience 2025 Update]], [[Technical SEO Optimization]]
+- **Contradictions/Notes:** 제공된 모든 소스에서 FID의 기준을 100ms로 동일하게 명시하고 있으며, 2025년 현재 해당 지표가 INP로 대체되었다는 점에서 이견이 없습니다 [2, 3, 8, 12].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Frontend Performance Checklist.md

@@ -0,0 +1,33 @@
+# [[Frontend Performance Checklist]]
+
+## 📌 Brief Summary
+프론트엔드 성능 체크리스트(Frontend Performance Checklist)는 웹사이트의 로딩 속도와 효율성을 극대화하기 위한 핵심 프론트엔드 모범 사례와 최적화 전략을 정리한 포괄적이고 플랫폼에 구애받지 않는 가이드입니다 [1]. 2025년 기준, 이 체크리스트는 구글의 코어 웹 바이탈(Core Web Vitals)의 엄격해진 기준(LCP, INP, CLS)을 달성하고, 에셋 최적화 및 코드 분할을 통해 로딩 시간을 단축하는 기술적 세부 항목들로 구성됩니다 [2], [3], [4], [5]. 이를 통해 개발자는 사용자 경험을 향상시키고 SEO 순위를 높이는 빠르고 효율적인 웹 애플리케이션을 구축할 수 있습니다 [1], [6], [7].
+
+## 📖 Core Content
+**코드 및 자바스크립트 최적화 (Code & Script Optimization)**
+*   **라우트 기반 코드 분할 및 지연 로딩:** 라우트 단위로 코드 분할(Code splitting)을 설정하고 화면에 당장 보이지 않는 컴포넌트(Below-fold components)는 지연 로딩(Lazy loading)을 적용합니다 [4], [5], [6].
+*   **번들 크기 최소화:** 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree-shaking)을 올바르게 구성하고, 압축된(gzipped) 메인 자바스크립트 번들의 크기를 200KB 이하로 유지합니다 [4], [5].
+*   **렌더링 차단 리소스 제거:** 중요하지 않은 타사(Third-party) 스크립트와 자바스크립트는 지연(defer)시키거나 비동기(async)로 로드하여 메인 스레드 점유를 최소화합니다 [8], [9], [4], [5].
+*   **INP(Interaction to Next Paint) 개선:** 50ms 이상의 긴 작업(Long tasks)을 잘게 쪼개거나, 무거운 연산을 웹 워커(Web Workers)로 오프로드하여 브라우저의 상호작용 지연을 줄입니다 [10], [11], [12], [13], [14], [15].
+
+**에셋 및 미디어 최적화 (Asset & Media Optimization)**
+*   **차세대 이미지 포맷 사용:** 이미지를 기존 포맷보다 용량이 작은 WebP나 AVIF로 압축 및 변환하여 제공합니다 [16], [17], [18], [4], [5].
+*   **응답형 이미지 및 우선순위 지정:** 기기에 맞는 반응형 이미지(`srcset`)를 사용하고, 페이지의 가장 큰 핵심 콘텐츠(LCP 이미지)에는 `fetchpriority="high"` 속성을 부여하여 렌더링 우선순위를 높입니다 [16], [4], [5].
+*   **CLS(Cumulative Layout Shift) 방지:** 시각적 안정성을 위해 모든 이미지와 비디오, 그리고 광고 슬롯 등에 명시적인 너비와 높이(`width`/`height`) 또는 최소 높이(`min-height`) 속성을 사전에 지정해 둡니다 [19], [20], [21], [4], [5].
+
+**렌더링 및 네트워크 전략 (Rendering & Network Strategy)**
+*   **크리티컬 CSS 인라인 처리:** 스크롤 없이 볼 수 있는 상단 영역(Above-the-fold) 렌더링에 필요한 핵심 CSS(Critical CSS)를 인라인으로 삽입하고, 나머지 CSS 로드를 지연시킵니다 [8], [22], [23], [4], [5], [6].
+*   **폰트 및 외부 리소스 최적화:** 웹 폰트를 사전에 로드(Preload)하고 `font-display: optional` 또는 `swap` 속성을 사용하여 폰트 로드 지연으로 인한 텍스트 깜빡임 현상을 방지합니다 [19], [24], [25], [4], [5]. 외부 도메인 리소스 로딩 속도를 높이기 위해 리소스 힌트(`preconnect`, `dns-prefetch`, `modulepreload` 등)를 적용합니다 [9], [26].
+*   **캐싱 및 전송 프로토콜:** 정적 에셋 서빙을 위해 CDN을 활용하고, HTTP/2 또는 HTTP/3 프로토콜과 Brotli 등의 압축 기술을 결합하여 TTFB(Time to First Byte)를 줄입니다 [17], [22], [18], [23], [6].
+
+**성능 모니터링 및 유지 보수 (Monitoring & Budgets)**
+*   **성능 예산(Performance Budgets) 설정:** 페이지의 총 자바스크립트 및 에셋 크기 제한을 설정하고(예: Webpack Bundle Analyzer 사용), Lighthouse CI 등을 활용해 배포 파이프라인에서 LCP < 2.5초, CLS < 0.1, INP < 200ms 기준을 준수하는지 강제합니다 [27], [28], [29], [30].
+*   **지속적 모니터링:** 구글 Search Console 및 RUM(Real User Monitoring) 도구를 연동해 실제 트래픽 환경의 성능 데이터를 수집하고, 임계값을 초과할 시 경고가 발생하도록 모니터링 환경을 구성합니다 [26], [31], [32], [33], [34].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Code Splitting]], [[Lazy Loading]], [[Server-Side Rendering (SSR)]]
+- **Projects/Contexts:** [[Web Performance Optimization]], [[React SEO Optimization]], [[Modern Website Architecture]]
+- **Contradictions/Notes:** 프론트엔드 성능을 모니터링할 때 단순히 통제된 환경(Lab testing)의 Lighthouse 점수만을 보고 최적화가 완료되었다고 판단하는 것은 흔한 오류(Pitfall)입니다. 사용자 경험을 온전히 개선하기 위해서는 크롬 사용자 경험 보고서(CrUX) 데이터나 RUM 도구 기반의 실제 필드 데이터(Field data) 검증이 반드시 수반되어야 합니다 [35], [36].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Google Page Experience 2025 Update.md

@@ -0,0 +1,27 @@
+# [[Google Page Experience 2025 Update]]
+
+## 📌 Brief Summary
+Google Page Experience 2025 Update는 웹사이트의 실제 사용자 경험을 측정하는 코어 웹 바이탈(Core Web Vitals)의 기준을 새롭게 개편한 핵심 업데이트이다 [1, 2]. 이 업데이트의 가장 큰 변화는 기존의 반응성 지표였던 FID(First Input Delay)를 INP(Interaction to Next Paint)로 공식 대체한 것이다 [1, 2]. 이와 더불어 렌더링 및 시각적 안정성을 평가하는 지표들의 기준이 이전보다 엄격해져, 이를 충족하지 못할 경우 검색 엔진 최적화(SEO) 순위와 사용자 전환율에 부정적인 영향을 미칠 수 있다 [1, 3, 4].
+
+## 📖 Core Content
+* **주요 변경 사항 및 새로운 지표 도입**
+  * **INP(Interaction to Next Paint)로의 전환:** 2025년 업데이트의 가장 주요한 변화는 FID를 INP로 교체한 것이다 [1, 2]. INP는 첫 번째 입력 지연만을 측정하던 FID와 달리, 사용자가 페이지와 상호작용하는 전체 지연 시간을 포괄적으로 측정한다 [5, 6].
+  * **더욱 엄격해진 기준치:** 성능 평가의 기준이 상향 조정되었다. 일부 소스에 따르면 LCP(Largest Contentful Paint)의 '우수' 기준은 기존 2.5초 미만에서 2.0초 미만으로, CLS(Cumulative Layout Shift)는 0.1 미만에서 0.08 미만으로 더욱 엄격해졌다 [3].
+  * **FCP 공식 지표 편입:** FCP(First Contentful Paint)가 1.5초 미만의 기준을 가진 공식 코어 웹 바이탈 지표로 새롭게 추적되기 시작했다 [3, 7].
+
+* **비즈니스 및 SEO에 미치는 영향**
+  * **검색 순위(SEO) 연관성:** Google은 페이지 경험을 핵심 랭킹 요소로 강조하고 있으며, 2025년 업데이트 기준을 충족하는 웹사이트는 검색 결과(SERP)에서 더 높은 가시성을 확보할 가능성이 크다 [8, 9].
+  * **수익 및 사용자 경험 직결:** 코어 웹 바이탈의 지표를 '나쁨(Poor)'에서 '우수(Good)' 수준으로 끌어올릴 경우, 평균적으로 전환율이 25% 증가하고, 이탈률이 35% 감소하며, 방문자당 수익이 30%가량 향상되는 실질적인 비즈니스 효과를 가져온다 [10, 11].
+
+* **업데이트 대응을 위한 최적화 전략**
+  * **INP 최적화:** 응답성을 개선하려면 JavaScript 실행 시간을 줄이고, 무거운 연산을 Web Worker로 분산시키며, 긴 작업을 여러 청크(chunk)로 쪼개어 메인 스레드의 차단을 막아야 한다 [5, 6, 12]. 
+  * **LCP 최적화:** 웹페이지의 주요 콘텐츠를 빠르게 렌더링하기 위해 WebP나 AVIF 같은 차세대 이미지 포맷을 사용하고, 중요 리소스를 사전 로드(preload)하며, CDN과 서버 사이드 렌더링(SSR)을 적극 도입해야 한다 [13-17].
+  * **CLS 최적화:** 예상치 못한 레이아웃 이동을 방지하기 위해 이미지와 비디오 요소에 반드시 명시적인 너비와 높이(width/height) 속성을 부여하고, 동적으로 로드되는 광고 및 임베드 요소의 공간을 미리 확보해두어야 한다 [18-20].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Interaction to Next Paint (INP)]], [[Largest Contentful Paint (LCP)]], [[Cumulative Layout Shift (CLS)]], [[Search Engine Optimization (SEO)]], [[Client-Side Rendering (CSR)]], [[Server-Side Rendering (SSR)]]
+- **Projects/Contexts:** [[Web Performance Optimization]], [[Frontend Performance Checklist]]
+- **Contradictions/Notes:** 소스 간에 2025년 Core Web Vitals의 구체적인 '우수(Good)' 통과 기준치에 대한 주장이 엇갈립니다. 한 소스에서는 2025년 기준 LCP가 2.0초 미만, CLS가 0.08 미만, INP가 150ms 미만으로 엄격해졌다고 설명하지만 [3], 다른 여러 소스들에서는 여전히 LCP 2.5초 이하, CLS 0.1 이하, INP 200ms 이하를 합격 기준으로 제시하고 있습니다 [21, 22]. 
+
+---
+*Last updated: 2026-04-26*

00_Raw/Inclusive Design.md

@@ -0,0 +1,19 @@
+# [[Inclusive Design]]
+
+## 📌 Brief Summary
+포용적 디자인(Inclusive Design)은 시각, 청각, 운동, 인지 장애가 있는 사람들을 포함하여 모든 사용자가 동등하게 사용할 수 있는 웹사이트와 디지털 경험을 만드는 방법론입니다 [1]. 이는 WCAG(웹 콘텐츠 접근성 지침) 및 ADA(미국 장애인법)와 같은 접근성 표준을 준수하여 정보와 기능에 대한 동등한 접근을 보장하는 것을 목표로 합니다 [1, 2]. 이러한 접근 방식은 단순한 법적, 윤리적 요구 사항을 넘어 모든 방문자의 전반적인 사용자 경험(UX)을 개선하고, 잠재 고객층을 넓히며, 검색 엔진 최적화(SEO) 순위를 높이는 핵심적인 웹 디자인 모범 사례로 평가받습니다 [1, 3, 4].
+
+## 📖 Core Content
+* **WCAG 및 핵심 원칙(POUR) 준수:** 현대의 웹 아키텍처에서 포용적 디자인은 인식 가능(Perceivable), 운용 가능(Operable), 이해 가능(Understandable), 견고함(Robust)이라는 4가지 POUR 원칙에 기반을 둡니다 [5]. 웹 콘텐츠는 WCAG 2.1 AA 및 2.2 표준을 충족하도록 설계되어 다양한 환경과 능력을 가진 사용자를 포괄해야 합니다 [6, 7].
+* **시각 및 청각적 접근성 지원:** 시각 장애나 저시력 사용자를 위해 의미 있는 모든 이미지에 설명이 포함된 대체 텍스트(alt text)를 제공해야 합니다 [2, 8, 9]. 또한, 가독성을 높이기 위해 텍스트와 배경 간의 색상 대비 비율을 최소 4.5:1로 유지해야 하며 [8, 10], 오디오 및 비디오 콘텐츠에는 캡션이나 트랜스크립트를 반드시 포함하여 청각적 장벽을 없애야 합니다 [8, 9].
+* **키보드 탐색 및 상호작용 최적화:** 운동 장애가 있는 사용자를 위해 마우스 없이 키보드만으로 링크, 버튼, 폼 필드 등 모든 대화형 요소에 접근하고 조작할 수 있어야 합니다 [8, 11]. WCAG 2.2 가이드라인에 따라 키보드 포커스 표시는 다른 요소에 가려지지 않고 명확하게 드러나야 하며 [12], 터치스크린 기반 기기에서는 복잡한 드래그 동작 대신 더블 탭과 같은 간단한 대안 동작을 지원해야 합니다 [13].
+* **인지 부하 감소 및 사용자 편의성 증대:** 인지 장애가 있는 사용자를 배려하여 ARIA(Accessible Rich Internet Applications) 라벨과 역할을 사용해 동적 콘텐츠와 대화형 요소에 대한 명확한 맥락을 스크린 리더 등에 제공해야 합니다 [8]. 또한, 암기력이나 시각적 처리에 과도하게 의존하는 CAPTCHA 대신 생체 인식 로그인 등 접근 가능한 인증 방법을 지원하고, 폼 작성 시 반복적인 데이터 입력을 줄일 수 있도록 자동 완성 기능을 제공해야 합니다 [14].
+* **비즈니스와 UX에 미치는 긍정적 효과:** 포용적 디자인은 특정 장애를 가진 사용자뿐만 아니라 일시적인 장애를 겪거나 느린 인터넷 환경에 있는 사용자 등 모두에게 향상된 이점을 제공합니다 [3, 15]. 이러한 설계 원칙을 적용하면 브랜드의 평판 및 고객 충성도가 높아지고 사용자 참여와 유지율이 향상되며, 검색 엔진이 구조화되고 접근하기 쉬운 콘텐츠를 선호하기 때문에 장기적인 SEO 성능 향상으로도 직결됩니다 [3, 4].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[WCAG (Web Content Accessibility Guidelines)]], [[ADA Website Compliance]], [[Accessibility (A11y)]], [[User-Centered Design]]
+- **Projects/Contexts:** [[Telemedicine Platform Redesign]] (환자, 의사, 관리자 등 다양한 사용자를 위해 스크린 리더 호환성, 고대비 모드, 다국어 지원 등을 도입하여 엄격한 접근성 규정을 준수한 원격 의료 플랫폼 구축 사례) [16, 17], [[Online Learning Management System]] (다양한 학생층을 위해 스크린 리더 호환 및 키보드 탐색 기능을 통합하여 접근성 준수율을 94%로 높인 대학 하이브리드 학습 시스템 사례) [18]
+- **Contradictions/Notes:** 웹사이트 소유자들은 종종 포용적 디자인과 접근성을 달성하기 위해 "퀵 픽스(quick fix)" 형태의 접근성 오버레이 위젯에 의존하지만, 소스에 따르면 이러한 도구는 근본적인 접근성 및 규정 준수 문제를 완전히 해결하지 못하며 오히려 소송의 타깃이 될 수 있는 법적 위험을 안고 있습니다 [19, 20]. 진정한 포용적 디자인은 사후 대처가 아니라 초기 설계 및 조달 단계부터 내재화되어야 합니다 [21].
+
+---
+*Last updated: 2026-04-26*

00_Raw/JavaScript Optimization.md

@@ -0,0 +1,30 @@
+# [[JavaScript Optimization]]
+
+## 📌 Brief Summary
+JavaScript Optimization(자바스크립트 최적화)은 웹사이트의 로딩 속도, 상호작용성, 그리고 전반적인 사용자 경험을 향상시키기 위해 자바스크립트 코드의 용량을 줄이고 실행 효율을 극대화하는 웹 성능 개선 기법입니다. 불필요한 코드 제거, 코드 분할, 실행 지연, 메인 스레드 차단 방지 등의 전략을 활용하여 브라우저의 렌더링 부하를 줄이고 Core Web Vitals의 핵심 지표인 INP(Interaction to Next Paint)를 향상시키는 데 목적이 있습니다 [1-3].
+
+## 📖 Core Content
+* **로딩 및 파싱 최적화 방안:**
+  * **코드 축소 및 제거:** 자바스크립트 파일에서 불필요한 문자를 제거하는 Minify(축소) 작업을 통해 전체 파일 크기를 최소화해야 합니다 [4]. 또한 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree shaking) 및 데드 코드 제거 기법을 적용합니다 [5, 6].
+  * **비동기 로딩 및 지연 로딩:** 렌더링을 차단하는 중요하지 않은 자바스크립트 자원은 `async` 또는 `defer` 속성을 적절히 사용하여 로딩을 지연시킴으로써 메인 콘텐츠가 최대한 빨리 렌더링되도록 합니다 [4, 7]. 
+  * **코드 분할(Code Splitting):** 거대한 모놀리식 자바스크립트 번들을 라우트나 컴포넌트 단위로 잘게 쪼개어(Chunking), 초기 페이지 로드에 필요한 코드만 먼저 불러오고 나머지는 지연 로딩(Lazy Loading)하는 방식이 필수적입니다 [3, 8-11].
+
+* **실행 시간 및 메인 스레드 최적화 (INP 개선):**
+  * **긴 작업 쪼개기(Breaking up long tasks):** 50ms 이상 걸리는 무거운 동기적 처리 작업은 메인 스레드를 차단하여 상호작용성을 떨어뜨립니다. 이를 50ms 미만의 작은 청크로 쪼개어 브라우저가 중간에 사용자 입력이나 UI 업데이트를 처리할 수 있도록 양보(Yield)해야 합니다 [1, 12, 13].
+  * **웹 워커(Web Workers) 활용:** 복잡한 계산이나 CPU 집약적인 작업은 웹 워커를 사용하여 메인 스레드에서 백그라운드 스레드로 오프로드(Offload)하여 메인 스레드의 응답성을 유지합니다 [1, 14, 15].
+  * **유휴 시간 활용:** 중요도가 낮은 작업은 `requestIdleCallback`을 사용하여 브라우저가 유휴 상태일 때 실행되도록 예약합니다 [16, 17].
+
+* **이벤트 및 DOM 렌더링 최적화:**
+  * **이벤트 핸들러 최적화:** 스크롤이나 검색 등 빈번하게 발생하는 이벤트 핸들러에는 디바운스(Debounce)와 스로틀(Throttle) 기법을 적용하여 불필요한 반복 실행을 제한합니다 [1, 18, 19].
+  * **DOM 조작 최소화:** 잦은 레이아웃 재계산을 유발하는 무거운 애니메이션과 과도한 DOM 조작을 줄이고, 가상 렌더링(Virtual rendering)이나 일괄 업데이트(Batch updates) 같은 효율적인 코딩 기술을 적용합니다 [1, 14, 20].
+
+* **서드파티 스크립트 관리:**
+  * 분석, 광고, 챗봇 등 타사 스크립트는 INP 저하의 주요 원인이 될 수 있습니다 [21]. 이러한 스크립트는 페이지 로드 이후로 로딩을 지연시키거나, 사용자가 실제 상호작용할 때 조건부로 로드되도록 구성해야 합니다 [6-8]. Chrome DevTools의 Coverage 탭 등을 사용하여 사용되지 않는 스크립트의 비중을 식별하고 관리할 수 있습니다 [22].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Interaction to Next Paint (INP)]], [[Code Splitting]], [[Lazy Loading]]
+- **Projects/Contexts:** [[Web Performance Optimization]], [[Frontend Performance Checklist]]
+- **Contradictions/Notes:** 소스 전반에서 자바스크립트 최적화는 현대 웹사이트 아키텍처의 필수 요소로 간주되며, 특히 2025년 Google Core Web Vitals의 지표가 FID에서 INP로 변경되면서 자바스크립트 메인 스레드 차단을 해결하기 위한 작업(Web Workers, 작업 분할 등)의 중요성이 공통적으로 강조되고 있습니다 [1, 2, 23, 24].
+
+---
+*Last updated: 2026-04-26*

00_Raw/SEO (Search Engine Optimization).md

@@ -0,0 +1,35 @@
+# [[SEO (Search Engine Optimization)]]
+
+## 📌 Brief Summary
+검색 엔진 최적화(SEO)는 검색 엔진이 웹사이트를 효과적으로 크롤링, 이해하고 높은 순위를 매길 수 있도록 기술적 구조, 콘텐츠 프레젠테이션, 사용자 경험(UX)을 초기 디자인 단계부터 통합하는 핵심 전략입니다 [1]. React와 같은 단일 페이지 애플리케이션(SPA) 환경에서는 클라이언트 사이드 렌더링(CSR)으로 인한 인덱싱 지연을 극복하기 위해 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 도입이 필수적입니다 [2-4]. 더 나아가 최신 SEO는 Core Web Vitals 최적화를 통한 성능 향상과 자바스크립트를 실행하지 않는 AI 답변 엔진(AEO)에 대응하기 위한 시맨틱 구조화 작업까지 포함하는 포괄적인 개념으로 진화했습니다 [5-7].
+
+## 📖 Core Content
+
+**현대 웹 디자인과 SEO의 통합**
+*   SEO는 키워드의 배치를 넘어 사이트 아키텍처와 깊게 연관되어 있습니다. 명확하고 논리적인 URL 구조(예: `/services/web-design`), E-A-T(전문성, 권위성, 신뢰성) 신호 제공, 그리고 페이지 권한을 고르게 분산시키는 내부 링크 전략이 초기 개발 단계부터 포함되어야 합니다 [8-11]. 
+*   또한 **모바일 우선 인덱싱(Mobile-first Indexing)** 정책에 따라, 모든 웹 디자인은 모바일 환경의 제약과 속도를 최우선으로 고려하여 구축되어야 검색 엔진 순위에 유리하게 작용합니다 [12-14].
+
+**React 및 SPA 환경의 핵심 SEO 과제**
+*   기본적으로 React 앱은 **클라이언트 사이드 렌더링(CSR)**을 사용하여 봇에게 빈 HTML 셸을 전달합니다 [2, 15]. 이는 검색 엔진이 자바스크립트를 다운로드하고 실행할 때까지 콘텐츠를 파악할 수 없게 만들어, 인덱싱이 지연되는 **'두 단계 인덱싱(Two-wave indexing)'** 문제와 크롤링 예산 낭비를 유발합니다 [3, 16, 17].
+*   해시 기반의 라우팅(`#/`)을 사용하거나 `onClick` 이벤트로 내비게이션을 처리할 경우, 크롤러가 해당 링크를 개별 페이지로 인식하거나 추적할 수 없게 되므로 SEO에 치명적입니다 [18, 19].
+
+**React 애플리케이션의 SEO 최적화 전략**
+*   **렌더링 방식의 전환:** Next.js, Remix 등을 활용하여 **서버 사이드 렌더링(SSR)**, **정적 사이트 생성(SSG)**, 또는 **점진적 정적 재생성(ISR)** 방식을 도입해야 합니다 [4, 20-23]. 이를 통해 검색 엔진 봇에 콘텐츠와 메타데이터가 완전히 렌더링된 HTML을 즉시 제공할 수 있습니다.
+*   **동적 메타데이터 및 구조화된 데이터:** React Helmet 등을 사용하여 라우트 변경 시마다 `<head>`의 타이틀과 메타 태그가 업데이트되도록 구성해야 합니다 [18, 24]. 검색 결과에서 리치 스니펫을 확보하기 위해 JSON-LD 기반의 **구조화된 데이터(Schema.org)** 주입도 필수적입니다 [18, 25, 26].
+*   **라우팅 및 내부 링크:** React Router 환경에서는 HTML5 History API를 활용한 `BrowserRouter`로 깔끔한 URL을 제공하고, 모든 내부 이동에 `<a href>`나 `<Link>` 컴포넌트를 사용해야 크롤링이 가능해집니다 [18, 19].
+
+**코어 웹 바이탈(Core Web Vitals) 기반의 성능 최적화**
+*   Google Page Experience의 중심인 Core Web Vitals(LCP, CLS, INP)는 SEO 순위에 직접적으로 반영됩니다 [5, 27].
+*   React 애플리케이션 특성상 거대한 자바스크립트 번들과 하이드레이션(Hydration) 과정은 LCP 지연과 INP(Interaction to Next Paint) 악화의 주요 원인입니다 [28, 29]. 이를 해결하기 위해 라우트 기반의 코드 분할(Code Splitting), 지연 로딩(Lazy Loading), 점진적 하이드레이션 등을 적용하여 초기 성능을 개선해야 합니다 [28].
+
+**AI 시대의 검색 엔진 최적화 (AEO 및 LLM 대응)**
+*   2026년에는 ChatGPT, Perplexity 등 **AI 답변 엔진 및 에이전트 크롤러**에 대응해야 합니다. 이들 봇은 비용 문제로 인해 자바스크립트 실행 과정을 생략하는 경우가 많습니다 [6, 30].
+*   따라서 자바스크립트 없이도 콘텐츠를 추출할 수 있도록 시맨틱 HTML 태그(`<main>`, `<article>` 등)를 엄격히 준수하고 명시적인 구조화된 데이터를 제공하는 것이 AI 오버뷰에 인용될 확률을 높입니다 [7, 31].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[Client-Side Rendering (CSR)]], [[Single Page Applications (SPA)]], [[React Router]], [[Answer Engine Optimization (AEO)]]
+- **Projects/Contexts:** [[Next.js 및 Remix를 활용한 React 렌더링 마이그레이션 프로젝트]], [[AI 에이전트 크롤러 대응을 위한 시맨틱 마크업 설계]]
+- **Contradictions/Notes:** 과거에는 검색 엔진 봇에게만 렌더링된 HTML을 보여주고 사용자에게는 CSR을 제공하는 동적 렌더링(Dynamic Rendering) 기법이 해결책으로 사용되기도 했으나, 2026년 가이드라인 기준 구글은 이를 클로킹(Cloaking) 위반 위험이 있는 임시방편으로 간주하며, 대신 SSR이나 SSG를 근본적으로 구축할 것을 강력히 권고합니다 [32, 33].
+
+---
+*Last updated: 2026-04-26*

00_Raw/Technical SEO.md

@@ -0,0 +1,19 @@
+# [[Technical SEO]]
+
+## 📌 Brief Summary
+Technical SEO는 웹사이트의 기술적 구조, 렌더링 전략, 성능 지표 등을 최적화하여 검색 엔진이 사이트 콘텐츠를 효과적으로 크롤링, 이해, 그리고 인덱싱할 수 있도록 보장하는 웹 디자인 및 개발의 핵심 요소이다 [1, 2]. 특히 단일 페이지 애플리케이션(SPA)과 같은 최신 웹 아키텍처에서는 자바스크립트 실행 지연으로 인한 인덱싱 문제를 해결하고 코어 웹 바이탈(Core Web Vitals)을 개선하여 검색 가시성과 사용자 경험을 극대화하는 데 중점을 둔다 [3-5]. 성공적인 Technical SEO는 구글의 전통적인 검색뿐만 아니라 AI 답변 엔진이 사이트의 데이터를 수집하고 인용할 수 있도록 돕는다 [6, 7].
+
+## 📖 Core Content
+*   **검색 엔진 크롤링 및 렌더링 최적화:** React 기반의 단일 페이지 애플리케이션(SPA)은 클라이언트 사이드 렌더링(CSR)을 기본으로 사용하기 때문에 초기 HTML이 비어 있어 검색 엔진 봇의 인덱싱 지연과 크롤링 예산 낭비를 초래할 수 있다 [5, 8]. 이를 극복하기 위해 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR)과 같은 렌더링 전략을 적용하여 검색 엔진 크롤러와 AI 에이전트에게 완전한 HTML 콘텐츠를 즉시 제공해야 한다 [9-11].
+*   **코어 웹 바이탈(Core Web Vitals) 개선:** 2025년 기준 코어 웹 바이탈은 구글 페이지 경험 신호의 핵심이자 직접적인 랭킹 요소이다 [12, 13]. 빠른 로딩을 의미하는 LCP(2.0초 미만), 시각적 안정성을 나타내는 CLS(0.08 미만), 상호작용 지연 시간을 측정하는 INP(200ms 미만) 임계값을 충족해야 한다 [14-18]. 이러한 웹 성능 최적화는 단순히 사용자 경험을 개선할 뿐만 아니라 크롤링 예산을 절약하고 인덱싱 속도를 높이는 데 필수적이다 [19].
+*   **웹사이트 구조 및 URL 계층:** 검색 엔진이 웹사이트의 지형을 잘 이해할 수 있도록 논리적인 폴더 구조와 짧고 명확한 URL 계층을 구축해야 한다 [2, 20, 21]. SPA 환경에서는 해시 기반 라우팅(`#/`)이 인덱싱을 방해하므로 반드시 HTML5 History API 기반의 깨끗한 URL을 사용해야 하며 [22, 23], 내부 링크 시 자바스크립트 이벤트(예: `onClick`)가 아닌 표준 `<a href>` 태그를 사용해 크롤링 경로를 확보해야 한다 [22, 23].
+*   **메타데이터 및 구조화된 데이터(Schema Markup):** SPA 라우팅 전환 시 페이지에 맞춰 `<title>`, 메타 설명, Open Graph 태그가 동적으로 업데이트되도록 React Helmet과 같은 도구를 사용해야 한다 [22, 24, 25]. 또한 검색 엔진과 AI 크롤러가 콘텐츠의 맥락을 정확하게 파악하고 리치 스니펫이나 AI 오버뷰에 노출되도록 JSON-LD 형식의 구조화된 데이터(Schema.org)를 삽입하는 것이 매우 중요하다 [26-28].
+*   **시맨틱 HTML과 접근성 통합:** 검색 엔진뿐만 아니라 화면 판독기 등 보조 기술이 콘텐츠 구조를 이해할 수 있도록 `<header>`, `<main>`, `<article>` 등 시맨틱 HTML5 태그를 활용해야 한다 [20, 29, 30]. 이는 크롤러의 데이터 추출을 용이하게 하여 Technical SEO에 크게 기여한다 [28].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[Single Page Application (SPA)]], [[Schema Markup]]
+- **Projects/Contexts:** [[React SEO Guide: SSR, Performance & Rankings (2026)]], [[Modern Web Design Best Practices for 2025]], [[SEO for Single Page Applications]]
+- **Contradictions/Notes:** 과거 SEO 문제 해결을 위해 봇에게만 사전 렌더링 된 HTML을 제공하는 동적 렌더링(Dynamic Rendering) 기법이 사용되었으나, 2025년 기준 구글은 이를 클로킹(Cloaking)의 위험이 있는 것으로 간주하여 권장하지 않으며, SSR이나 SSG를 사용할 수 없는 경우 최후의 수단으로만 사용해야 한다 [31, 32]. 
+
+---
+*Last updated: 2026-04-26*

00_Raw/Website Compliance Audits and Remediation.md

@@ -0,0 +1,21 @@
+# [[Website Compliance Audits and Remediation]]
+
+## 📌 Brief Summary
+웹사이트 규정 준수 감사 및 수정(Website Compliance Audits and Remediation)은 웹사이트, 모바일 앱 등 디지털 자산이 모든 사용자(장애인 포함)에게 동등한 접근성을 제공할 수 있도록 ADA(미국 장애인법) 및 WCAG(웹 콘텐츠 접근성 지침) 표준을 기반으로 평가하고 문제점을 개선하는 과정입니다 [1-3]. 규정 위반 시 법적 소송 위험이 발생할 수 있으므로, 근본적인 코드 수정과 정기적이고 종합적인 접근성 감사가 필수적입니다 [4, 5].
+
+## 📖 Core Content
+*   **규정 준수 감사의 중요성 및 위험성:** 디지털 접근성은 단순한 권장 사항을 넘어 ADA(미국), EAA(유럽 접근성법) 등 주요 법률에 의한 의무 사항입니다 [6, 7]. 이미지 대체 텍스트 누락, 색상 대비 불량, 비접근성 양식, 동영상 캡션 부재 등은 가장 흔하게 발견되는 위반 사항이며, 이는 곧 법적 소송으로 이어질 수 있습니다 [5]. 특히, 코드 자체를 수정하지 않고 접근성 위젯이나 오버레이(Overlay)와 같은 '빠른 해결책(Quick fix)' 도구에만 의존하는 것은 규정 준수 문제를 완전히 해결하지 못하며 오히려 소송의 표적이 될 위험이 높습니다 [5, 8].
+*   **성공적인 감사 및 수정 4단계 프로세스 [9]:**
+    1.  **디지털 자산 감사 (Audit):** Axe, WAVE와 같은 자동화 스캔 도구를 활용하여 문제를 신속하게 식별함과 동시에, 키보드 전용 탐색이나 화면 판독기(Screen Reader)를 사용하는 사람 주도의 심층적인 수동 감사를 반드시 병행해야 합니다 [2, 10]. 홈페이지나 신청 양식 등 트래픽이 높은 주요 페이지부터 우선적으로 감사하는 것이 좋습니다 [2].
+    2.  **문제 수정 (Remediation):** 감사 결과를 바탕으로 실제 코드 수준에서 문제를 해결해야 합니다 [3]. 영향력이 큰 문제(누락된 대체 텍스트, 캡션 부족, 키보드 트랩, 색상 대비 등)를 먼저 처리하며, 대규모 미디어를 보유한 경우 인공지능이나 전문 서비스를 활용해 자막과 트랜스크립션을 대규모로 적용해야 합니다 [3, 10].
+    3.  **타사 공급업체 계약 검토 (Review Third-Party Agreements):** 결제 포털이나 등록 시스템 등 웹사이트에 내장된 서드파티 도구 역시 접근성 규정을 준수해야 합니다 [11]. 도입 전부터 WCAG 2.1 AA 이상 준수 여부를 평가하고 계약에 명시해야 합니다 [11].
+    4.  **팀 교육 및 규정 준수 유지 (Train and Maintain):** 규정 준수는 일회성 작업이 아닌 지속적인 유지보수 과정입니다 [12]. 모든 새로운 콘텐츠와 기능이 처음부터 접근 가능하도록 워크플로우를 구성하고, 최소 연 1회 또는 대규모 업데이트 시마다 정기적인 감사를 수행하여 새로운 법적 위험을 사전에 차단해야 합니다 [12, 13].
+*   **WCAG 2.2 표준에 따른 최적화:** 최신 WCAG 2.2 지침은 인지 장애, 저시력, 운동 장애 사용자를 위해 더욱 구체적인 기준을 제시합니다 [14]. 초점 가려짐 방지(Focus Not Obscured), 안전한 터치 제스처 지원, 접근 가능한 인증(비밀번호나 CAPTCHA 외의 대안 제공) 등의 기준을 감사 항목에 포함하여 웹사이트를 수정하면, 향후 변경될 법적 기준에 대해서도 안전하게 규정 준수를 선도할 수 있습니다 [15-19].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Web Content Accessibility Guidelines (WCAG)]], [[Americans with Disabilities Act (ADA) Compliance]], [[User-Centered Design Approach]]
+- **Projects/Contexts:** [[Healthcare & Professional Services Wins]], [[E-Commerce Platform Optimization]]
+- **Contradictions/Notes:** 소스에 따르면 웹사이트 소유자들은 종종 플러그인 형태의 '빠른 해결책(Quick fix)'이나 접근성 위젯을 설치하여 규정 준수를 달성했다고 믿지만, 실제로는 이러한 위젯이 근본적인 접근성 장벽을 해소하지 못하여 전체 접근성 소송의 22.6%가 위젯이 설치된 사이트를 표적으로 삼는다는 치명적인 모순과 위험성을 경고합니다 [5, 8].
+
+---
+*Last updated: 2026-04-26*

00_Raw/구글 2025 검색 알고리즘 업데이트 대응.md

@@ -0,0 +1,29 @@
+# [[구글 2025 검색 알고리즘 업데이트 대응]]
+
+## 📌 Brief Summary
+구글의 2025년 검색 알고리즘 및 페이지 경험(Page Experience) 업데이트는 코어 웹 바이탈(Core Web Vitals)의 기준을 크게 강화하고 새로운 지표를 도입하는 데 중점을 두었습니다 [1, 2]. 기존의 FID(First Input Delay)가 INP(Interaction to Next Paint)로 공식 대체되었으며, LCP와 CLS의 통과 기준치가 더 엄격해졌습니다 [3, 4]. 또한 AI 기반 검색(AI Overviews) 크롤러에 대응하기 위해 시맨틱 HTML과 스키마 마크업을 통한 구조화된 데이터 제공과 서버 사이드 렌더링(SSR)의 중요성이 더욱 커졌습니다 [5-7]. 이러한 변화는 웹사이트의 로딩 속도, 상호작용성, 시각적 안정성을 향상시켜 SEO 순위와 사용자 경험을 동시에 높이는 것을 목표로 합니다 [8, 9].
+
+## 📖 Core Content
+**1. 코어 웹 바이탈(Core Web Vitals) 지표의 변화와 엄격해진 기준**
+* **INP(Interaction to Next Paint) 전면 도입:** 2025년 업데이트의 가장 핵심적인 변화로, 단일 입력 지연을 측정하던 FID를 대체하여 사용자의 전체적인 상호작용 지연 시간을 측정합니다 [1, 2, 4]. 
+* **LCP(Largest Contentful Paint) 기준 강화:** 웹페이지의 메인 콘텐츠가 화면에 렌더링되는 속도를 나타내는 LCP의 통과 기준이 기존 2.5초 미만에서 **2.0초 미만**으로 단축되었습니다 [3, 10].
+* **CLS(Cumulative Layout Shift) 기준 강화:** 시각적 안정성을 측정하는 CLS 기준 역시 기존 0.1 미만에서 **0.08 미만**으로 더욱 엄격해졌습니다 [3, 10].
+* **FCP(First Contentful Paint) 정식 편입:** FCP가 코어 웹 바이탈의 공식 지표로 추적되기 시작했으며, 1.5초 미만의 기준이 적용됩니다 [3, 11].
+
+**2. AI 검색 엔진 및 Agentic Crawler 대응 전략**
+* **시맨틱 HTML과 구조화된 데이터:** AI 개요(AI Overviews, SGE)와 같은 AI 검색 엔진이 웹사이트에서 구조화된 답변을 직접 추출하므로, 시맨틱 HTML5 태그(`<header>`, `<main>`, `<article>` 등)와 Schema.org 마크업(JSON-LD)을 활용하여 콘텐츠의 맥락을 명확히 구조화하는 것이 필수적입니다 [5, 12-14].
+* **렌더링 아키텍처 전환:** AI 크롤러(GPTBot, ClaudeBot 등)는 자바스크립트 실행 비용 문제로 JS 렌더링을 건너뛰는 경우가 많습니다 [6]. 따라서 순수 클라이언트 사이드 렌더링(CSR)의 한계를 극복하기 위해 **서버 사이드 렌더링(SSR)** 또는 **정적 사이트 생성(SSG)** 방식으로 전환하여 봇이 콘텐츠를 즉시 읽을 수 있는 HTML 상태로 제공해야 합니다 [15-17].
+* **동적 렌더링(Dynamic Rendering) 지양:** 봇에게는 사전 렌더링된 HTML을, 사용자에게는 CSR을 제공하는 동적 렌더링은 클로킹(Cloaking)으로 간주되어 구글로부터 페널티를 받을 수 있으므로 2025년에는 권장되지 않습니다 [7, 18].
+
+**3. 모바일 퍼스트 및 프론트엔드 최적화(Performance Optimization)**
+* **모바일 퍼스트 인덱싱:** 전 세계 웹 트래픽의 58~60% 이상이 모바일에서 발생함에 따라 구글은 모바일 환경의 페이지를 1차적으로 평가합니다 [19, 20]. 반응형 레이아웃 설계, 적절한 터치 타겟 크기 확보, 미사용 자바스크립트 축소가 요구됩니다 [21-23].
+* **자바스크립트 실행 및 차단 리소스 최적화:** 새로운 지표인 INP를 개선하기 위해 50ms 이상의 긴 실행 작업(Long tasks)을 분할하고, 렌더링을 차단하는 스크립트를 지연(defer/async)시키며, 무거운 연산은 웹 워커(Web Workers)로 오프로드해야 합니다 [4, 24, 25]. 
+* **이미지 및 리소스 최적화:** LCP 개선을 위해 WebP나 AVIF 같은 차세대 이미지 포맷을 사용하고, 핵심 리소스에 대해 `fetchpriority="high"`나 `preload` 리소스 힌트를 적용하는 것이 중요합니다 [10, 26-28].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Interaction to Next Paint (INP)]], [[Server-Side Rendering (SSR)]], [[Mobile-First Indexing]], [[Semantic HTML5]], [[Schema Markup]]
+- **Projects/Contexts:** [[React SEO Optimization]], [[Frontend Performance Checklist 2025]], [[Web Performance Optimization Guidelines]]
+- **Contradictions/Notes:** 코어 웹 바이탈의 새로운 통과 기준과 관련하여 소스 간 미세한 수치 차이가 존재합니다. 예를 들어, CLS 지표의 경우 소스 [3]와 [10]는 2025년 기준이 '0.08 미만'으로 강화되었다고 명시하지만, 소스 [29] 및 [30]는 여전히 '0.1 이하'를 좋은 점수(Good)로 설명하고 있습니다. 또한 INP 지표에 대해서도 소스 [3]는 150ms 미만으로 설명하는 반면, 소스 [31]와 [32]은 200ms 이하로 언급하고 있어 최적화를 수행할 때 더 엄격한 기준(INP < 150ms, CLS < 0.08)을 목표로 삼는 것이 안전할 수 있습니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/구독 박스 서비스의 이탈률 감소(Churn Mitigation) 사례.md

@@ -0,0 +1,25 @@
+# [[구독 박스 서비스의 이탈률 감소(Churn Mitigation) 사례]]
+
+## 📌 Brief Summary
+이 사례는 복잡한 구독 관리 시스템으로 인해 높은 이탈률(Churn rate)을 겪고 있던 한 구독 박스 서비스의 UX 최적화 프로젝트를 다룹니다 [1]. 해당 기업은 고객이 구독을 강제로 취소할 수밖에 없게 만드는 대신, 투명한 가격 정책과 유연한 구독 관리 옵션을 도입하여 사용자 경험(UX)을 전면적으로 개편했습니다 [2]. 그 결과, 고객에게 더 많은 통제권을 부여하는 접근만으로도 이탈률을 절반 이상 감소시키고 고객 생애 가치를 크게 높이는 극적인 성과를 달성했습니다 [2].
+
+## 📖 Core Content
+*   **문제 상황:** 이 구독 박스 서비스는 직관적이지 못하고 복잡한 구독 관리 기능 때문에 고객들에게 좌절감을 안겨주고 있었으며, 이는 더 나은 UX를 통해 충분히 예방할 수 있었던 구독 취소로 이어져 기업의 생존을 위협하는 수준의 이탈률을 발생시키고 있었습니다 [1].
+*   **UX 리디자인 솔루션:**
+    *   **투명한 가격 정책:** 숨겨진 비용 없이 투명하게 가격을 안내하는 구독 흐름(Subscription flow)을 재설계했습니다 [2].
+    *   **유연한 구독 옵션 제공:** 고객에게 영구적인 취소만을 강요하는 대신, 언제든 구독을 쉴 수 있는 '일시 정지(Pause)' 및 '건너뛰기(Skip)' 기능을 도입했습니다 [2].
+    *   **맞춤형 큐레이션 인터페이스:** 고객이 자신의 의견이 반영되고 있다고 느낄 수 있도록 개인화된 제품 큐레이션 인터페이스를 제공했습니다 [2].
+*   **비즈니스 성과 (개편 이후의 지표):**
+    *   전체 이탈률(Churn rate) 52% 감소 [2].
+    *   고객 생애 가치(Customer Lifetime Value) 67% 증가 [2].
+    *   구독 완료율 89% 향상 [2].
+    *   일시 정지 및 건너뛰기 옵션 추가를 통해 영구적인 구독 취소 비율을 78%까지 줄이는 데 성공했습니다 [2].
+*   **핵심 인사이트:** 이 사례는 대부분의 고객이 구독을 영구적으로 취소하고 싶어 하는 것이 아니라, 단지 자신의 구독 일정과 결제에 대해 더 많은 통제권을 원한다는 사실을 보여줍니다 [2]. 문제에 대한 해결책은 때로는 생각보다 단순할 수 있습니다 [2].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[UX Patterns]], [[Case Study]], [[Website Redesign]]
+- **Projects/Contexts:** [[구독 박스 서비스 최적화(Subscription Box Service Optimization)]]
+- **Contradictions/Notes:** 소스 내에 상충하는 의견은 없으며, 영구적인 취소 버튼의 은폐나 복잡한 절차보다 사용자에게 확실한 통제권(일시 정지 등)을 주는 것이 오히려 고객 유지에 효과적임이 입증되었습니다.
+
+---
+*Last updated: 2026-04-26*

00_Raw/레거시 웹사이트 프론트엔드 최적화 및 마이그레이션 프로젝트.md

@@ -0,0 +1,19 @@
+# [[레거시 웹사이트 프론트엔드 최적화 및 마이그레이션 프로젝트]]
+
+## 📌 Brief Summary
+레거시 웹사이트 프론트엔드 최적화 및 마이그레이션 프로젝트는 2025년 최신 웹 표준인 향상된 사용자 경험(UX), 빠른 로딩 속도, 검색 엔진 최적화(SEO)를 충족하기 위해 기존 시스템의 아키텍처를 개편하는 과정입니다. 기존 SPA(Single Page Application)가 가지는 크롤링 및 로딩 지연의 한계를 극복하기 위해 서버 사이드 렌더링(SSR) 등의 렌더링 방식을 도입하고, React Router를 통한 코드 분할과 데이터 패칭 고도화를 수행합니다. 궁극적으로 강화된 Core Web Vitals 지표 기준과 WCAG 웹 접근성 지침을 준수하여 사용자 전환율과 검색 엔진 가시성을 극대화하는 것을 목표로 합니다.
+
+## 📖 Core Content
+- **렌더링 아키텍처 마이그레이션 (SPA SEO 최적화):** 순수 클라이언트 사이드 렌더링(CSR) 기반의 레거시 SPA는 빈 HTML 셸을 먼저 로드하므로 검색 엔진 봇의 렌더링 대기열에 빠져 인덱싱 지연이 발생하며, 이는 SEO 트래픽 감소로 이어집니다 [1-3]. 이를 해결하기 위해 Next.js나 Remix 등의 프레임워크를 도입하여 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 또는 점진적 정적 재생성(ISR) 아키텍처로 마이그레이션해야 합니다 [4-8].
+- **Core Web Vitals 성능 최적화:** 2025년에는 LCP(최대 콘텐츠 풀 페인트), INP(다음 페인트에 대한 상호작용), CLS(누적 레이아웃 이동) 성능 지표가 검색 랭킹 및 전환율에 직결됩니다 [9, 10]. 성능 향상을 위해 WebP 및 AVIF 같은 최신 이미지 포맷 적용, Lazy Loading, 중요 CSS 인라인화, Web Worker를 사용한 메인 스레드 오프로딩 등 렌더링 차단 리소스를 최소화하는 최적화 작업이 필수적입니다 [11-14].
+- **React Router 및 데이터 로딩 고도화:** 기존 컴포넌트 렌더링 시 데이터를 순차적으로 불러오던 '워터폴(Waterfall) 문제'를 해결하기 위해, React Router v6.4+의 `loader`와 `action`을 활용해 라우팅과 데이터 패칭을 병렬 처리해야 합니다 [15]. 아울러 `<Outlet />` 컴포넌트를 사용한 중첩 라우트(Nested Routes)로 선언적 UI 구조를 구축하고 [16-18], `React.lazy()`와 `Suspense`를 결합하여 라우트 및 컴포넌트 수준에서 효율적인 코드 분할(Code Splitting)을 구현합니다 [19-21].
+- **접근성(Accessibility) 및 모바일 UX 개선:** WCAG 2.1 AA 및 새롭게 추가된 2.2 표준을 준수하여 포커스 지표 가시성 향상, 색상 대비 개선(최소 4.5:1), ARIA 레이블 적용, 완전한 키보드 탐색을 지원해야 합니다 [22-25]. 또한 60% 이상의 글로벌 트래픽을 차지하는 모바일 환경에 대응하기 위해 모바일 우선(Mobile-First)의 반응형 디자인과 시각적 계층 구조를 적용합니다 [26-28].
+- **SEO 및 메타데이터 구조화:** 크롤러와 AI 답변 엔진(AI Answer Engines)이 콘텐츠를 명확히 이해할 수 있도록 의미론적(Semantic) HTML5 구조를 사용해야 합니다 [29, 30]. React Helmet 등을 통해 라우트 변경 시 메타데이터를 동적으로 업데이트하고, 해시(`#/`) 기반이 아닌 HTML5 History API를 사용하는 깔끔한 URL 구조를 채택하며 JSON-LD 구조화 데이터를 추가하여 최적의 검색 노출을 유도합니다 [31-34].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[React Router]], [[Web Content Accessibility Guidelines (WCAG)]], [[Client-Side Rendering (CSR)]]
+- **Projects/Contexts:** [[SPA SEO Migration]], [[E-commerce Store Optimization]]
+- **Contradictions/Notes:** 소스 간 2025년 Core Web Vitals 기준치에 차이가 있습니다. 일부 소스는 LCP < 2.5초, INP < 200ms, CLS < 0.1을 제시하지만 [10, 35, 36], 다른 소스는 더욱 엄격해진 새로운 기준으로 LCP < 2.0초, INP < 150ms, CLS < 0.08을 강조합니다 [37, 38]. 또한, 동적 렌더링(Dynamic Rendering)에 대해 봇과 사용자를 분리하는 좋은 대안으로 설명하는 소스가 있는 반면 [4], 2025년 기준으로는 구글이 클로킹(Cloaking) 가능성 때문에 명시적으로 권장하지 않는 폐기(Deprecated)된 방식이라고 지적하는 소스도 존재합니다 [39].
+
+---
+*Last updated: 2026-04-26*

00_Raw/모바일 퍼스트 디자인(Mobile-First Design).md

@@ -0,0 +1,18 @@
+# [[모바일 퍼스트 디자인(Mobile-First Design)]]
+
+## 📌 Brief Summary
+모바일 퍼스트 디자인(Mobile-First Design)은 데스크톱 화면이 아닌 가장 작은 모바일 기기 화면을 기준으로 웹사이트를 먼저 설계하는 현대적인 웹 개발 접근 방식이다 [1]. 이 방식은 제약이 많은 모바일 환경에 맞춰 가장 중요한 핵심 콘텐츠와 기능을 우선적으로 배치하도록 강제하며, 이후 더 큰 화면에 맞춰 점진적으로 확장(Progressive enhancement)하는 전략을 취한다 [1, 2]. 오늘날 전 세계 웹 트래픽의 과반수 이상이 모바일에서 발생하고 구글의 모바일 퍼스트 인덱싱(Mobile-first indexing) 정책이 기본이 됨에 따라, 모바일 퍼스트 디자인은 뛰어난 사용자 경험, 성능, 그리고 검색 엔진 최적화(SEO)를 달성하기 위한 필수적인 표준으로 자리 잡았다 [1, 3, 4].
+
+## 📖 Core Content
+* **모바일 퍼스트의 필요성 및 배경:** 전 세계 글로벌 웹 트래픽의 53%에서 68% 이상이 모바일 기기를 통해 발생하고 있다 [1, 4-6]. 따라서 과거처럼 큰 데스크톱 화면을 먼저 디자인한 후 억지로 모바일에 맞춰 축소하는 방식은 더 이상 유효하지 않다 [1]. 모바일 화면에 맞춰 최적화된 웹페이지는 비최적화 페이지 대비 전환율이 26% 더 높으며 [5], 구글 검색 엔진 역시 모바일 버전을 주요 평가 기준으로 삼는 '모바일 퍼스트 인덱싱'을 시행하고 있으므로 이는 SEO 성과에 직접적인 영향을 미친다 [1, 3, 4, 7].
+* **사용자 경험(UX) 및 레이아웃 최적화:** 모바일 퍼스트 접근법은 불필요한 장식을 제거하고 단일 열(Single-column) 레이아웃과 같은 단순한 형태에서 시작하여 사용자의 인지적 부하와 스크롤 마찰을 줄이는 데 집중한다 [2, 6, 8, 9]. 사용자가 확대(Zooming) 조작을 하지 않아도 텍스트를 쉽게 읽을 수 있어야 하며, 버튼은 터치하기 편하도록 충분한 크기로 설계되어야 한다 [10]. 모바일 사용자의 이탈을 막기 위해 가치 제안과 주요 콜투액션(CTA)은 스크롤 없이도 볼 수 있는 영역(Above-the-fold)에 배치해야 하고, 짧고 명확한 카피라이팅이 필수적이다 [6, 11]. 
+* **성능 중심의 기술적 구현:** 모바일 네트워크는 변동성이 크기 때문에 코어 웹 바이탈(Core Web Vitals) 지표를 달성하고 로딩 속도를 최적화하는 것이 필수적이다 [12]. CSS Grid와 Flexbox를 사용해 다양한 화면 크기에 유연하게 적응하는 레이아웃(Fluid layouts)을 구축하고, 320px(소형 모바일), 768px(태블릿), 1024px(노트북) 등의 반응형 중단점(Breakpoints)을 전략적으로 설정해야 한다 [2]. 또한 `<picture>` 요소와 `srcset` 속성을 통해 사용자의 기기와 해상도에 맞는 최적의 이미지를 제공하고, 불필요한 자바스크립트를 줄여 렌더링 지연을 방지해야 한다 [2, 7].
+* **전환율 및 비즈니스 성과:** 모바일 화면의 제약은 설계자로 하여금 핵심 정보와 목표 행동에만 집중하게 만들어 자연스럽게 사용자 중심 및 콘텐츠 우선(Content-first) 전략을 실천하게 한다 [1]. 이는 궁극적으로 시스템의 시각적 명확성을 높이고 다양한 기기에서의 접근성(Accessibility)을 향상시키며, 마찰을 줄임으로써 브랜드에 대한 사용자 신뢰와 비즈니스 리드(Lead) 전환율을 극대화하는 견고한 토대가 된다 [10, 13-15].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[모바일 퍼스트 인덱싱(Mobile-first indexing)]], [[반응형 디자인(Responsive Design)]], [[코어 웹 바이탈(Core Web Vitals)]], [[단일 열 레이아웃(Single-column Layout)]]
+- **Projects/Contexts:** [[Western Rise 브랜드의 모바일 UX 최적화 사례]], [[지역 미디어의 모바일 퍼스트 뉴스 플랫폼 전환(Local Media Redesign)]]
+- **Contradictions/Notes:** 모바일 퍼스트 디자인을 데스크톱 브라우저인 크롬 등에서 훌륭하게 설계했더라도, 'Opera Mini'와 같이 성능이나 지원 환경이 제한적인 모바일 브라우저에서는 레이아웃이 깨져 보일 수 있으므로 브라우저 개발자 도구에만 의존하지 말고 다양한 실제 기기(iPhone, Android 등)에서 크로스 브라우저 호환성을 직접 테스트하는 과정이 반드시 병행되어야 한다 [2, 16].
+
+---
+*Last updated: 2026-04-26*

00_Raw/시각적 계층 구조(Visual Hierarchy).md

@@ -0,0 +1,23 @@
+# [[시각적 계층 구조(Visual Hierarchy)]]
+
+## 📌 Brief Summary
+시각적 계층 구조는 크기, 색상, 대비, 간격 등의 원리를 활용하여 요소들을 전략적으로 배치함으로써 방문자의 시선이 콘텐츠를 자연스럽고 직관적으로 따라가도록 유도하는 디자인 기술입니다 [1]. 이를 통해 사용자는 페이지를 빠르게 스캔하고, 압도당하는 느낌 없이 가장 핵심적인 정보를 쉽게 이해할 수 있습니다 [1]. 견고한 시각적 계층 구조는 사용자의 인지적 과부하를 줄여 쾌적한 경험을 제공하고, 콘텐츠 이해도와 참여도 및 전환율을 높이는 핵심적인 역할을 수행합니다 [2, 3].
+
+## 📖 Core Content
+*   **계층 구조 구현을 위한 핵심 원칙:**
+    *   **명확한 타이포그래피 스케일 확립:** H1, H2, H3 등의 제목과 본문 텍스트를 명확히 구분하기 위해 일관된 타이포그래피 비율(예: 1.25배율)을 사용하여 페이지 내에 즉각적인 시각적 질서를 만들어야 합니다 [4].
+    *   **색상 및 대비의 전략적 활용:** 가장 중요한 액션 버튼(CTA)이나 링크에는 주요 액션 색상과 높은 대비를 적용하여 사용자의 시선을 단번에 끌어들여야 합니다 [4, 5].
+    *   **여백(Negative Space/Whitespace) 활용:** 요소들 주위에 충분한 여백을 두어 관련된 항목은 그룹화하고 관련 없는 항목은 분리함으로써 레이아웃의 복잡성을 줄이고 가독성을 높여야 합니다 [4, 6].
+    *   **사용자의 읽기 패턴 고려:** 텍스트 중심의 페이지는 F-패턴으로, 시각적 요소가 많은 단순한 페이지는 Z-패턴 등 일반적인 시선 이동 패턴에 맞춰 레이아웃을 설계해야 효과적입니다 [4].
+*   **시각적 계층 구조가 전환(Conversion) 및 UX에 미치는 영향:**
+    *   여백을 적절히 활용한 미니멀한 디자인과 명확한 계층 구조는 빽빽한 레이아웃에 비해 전환율을 19% 더 향상시키는 것으로 나타났습니다 [7].
+    *   복잡한 제품이나 서비스를 제공하는 경우에도 시각적 계층 구조가 견고하면 정보의 흐름이 논리적으로 배치되어 복잡성을 크게 줄일 수 있습니다 [8].
+    *   웹사이트 리디자인 시 명확한 CTA와 시각적 계층 구조를 통합하여 사용자를 올바르게 안내한 결과, 이탈률(Bounce rate)이 71%에서 38%로 감소하고 리드가 47% 증가하는 등의 긍정적인 비즈니스 성과가 입증되었습니다 [9].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[인지적 과부하(Cognitive Load)]], [[여백(Whitespace)]], [[행동 유도 버튼(Call-to-Action, CTA)]], [[사용자 중심 디자인(User-Centered Design)]]
+- **Projects/Contexts:** [[Notion 웹사이트 디자인 사례]], [[Stripe 홈페이지 레이아웃 사례]], [[웹사이트 리디자인 프로젝트(Website Redesign Project)]]
+- **Contradictions/Notes:** 소스 간에 상충되는 내용은 없으며, 제공된 모든 자료가 일관되게 강력한 시각적 계층 구조가 페이지의 복잡성을 줄이고 궁극적으로 전환율(Conversion)을 높인다는 점을 강조하고 있습니다 [2, 6, 8].
+
+---
+*Last updated: 2026-04-26*