diff --git a/00_Raw/2026-04-26-Skybound_Low_Count_High_Threat_Enemy_Curve_Settings_Intro_Refresh.md b/00_Raw/2026-04-26-Skybound_Low_Count_High_Threat_Enemy_Curve_Settings_Intro_Refresh.md new file mode 100644 index 00000000..c9ebba81 --- /dev/null +++ b/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 톤앤매너와 자연스럽게 이어지는지 확인한다. diff --git a/00_Raw/2026-04-26-Skybound_Pickup_Enemy_Bullet_Readability_Separation.md b/00_Raw/2026-04-26-Skybound_Pickup_Enemy_Bullet_Readability_Separation.md new file mode 100644 index 00000000..ffc39362 --- /dev/null +++ b/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 하트가 충분히 회복 아이템처럼 보이는지 확인한다. +- 화면에 적 탄환과 픽업이 동시에 많을 때도 혼동이 없는지 확인한다. diff --git a/00_Raw/AI 개인화 및 적응형 UX.md b/00_Raw/AI 개인화 및 적응형 UX.md new file mode 100644 index 00000000..ceddb5e5 --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/Allbirds PWA 기반 E-commerce 재설계 사례.md b/00_Raw/Allbirds PWA 기반 E-commerce 재설계 사례.md new file mode 100644 index 00000000..e7466c8d --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/Americans with Disabilities Act (ADA).md b/00_Raw/Americans with Disabilities Act (ADA).md new file mode 100644 index 00000000..33c3395b --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/European Accessibility Act (EAA).md b/00_Raw/European Accessibility Act (EAA).md new file mode 100644 index 00000000..fc93acd2 --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/FID (First Input Delay).md b/00_Raw/FID (First Input Delay).md new file mode 100644 index 00000000..efe4fbfe --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/Frontend Performance Checklist.md b/00_Raw/Frontend Performance Checklist.md new file mode 100644 index 00000000..d26f07d8 --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/Google Page Experience 2025 Update.md b/00_Raw/Google Page Experience 2025 Update.md new file mode 100644 index 00000000..a600f8d3 --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/Inclusive Design.md b/00_Raw/Inclusive Design.md new file mode 100644 index 00000000..aafe2c55 --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/JavaScript Optimization.md b/00_Raw/JavaScript Optimization.md new file mode 100644 index 00000000..b5ec5948 --- /dev/null +++ b/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* \ No newline at end of file diff --git a/00_Raw/SEO (Search Engine Optimization).md b/00_Raw/SEO (Search Engine Optimization).md new file mode 100644 index 00000000..b5189a75 --- /dev/null +++ b/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 등을 사용하여 라우트 변경 시마다 `
`의 타이틀과 메타 태그가 업데이트되도록 구성해야 합니다 [18, 24]. 검색 결과에서 리치 스니펫을 확보하기 위해 JSON-LD 기반의 **구조화된 데이터(Schema.org)** 주입도 필수적입니다 [18, 25, 26]. +* **라우팅 및 내부 링크:** React Router 환경에서는 HTML5 History API를 활용한 `BrowserRouter`로 깔끔한 URL을 제공하고, 모든 내부 이동에 ``나 `` 컴포넌트를 사용해야 크롤링이 가능해집니다 [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 태그(`