feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

2026-05-08 19:52:07 +09:00
parent 9dd3d40662
commit 5ba5a55c78
3984 changed files with 334557 additions and 28839 deletions
@@ -1,9 +1,29 @@
+---
+id: wiki-2026-0508-렌더링-차단-리소스-render-blocking-resou
+title: 렌더링 차단 리소스(Render blocking resources)
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
+tags: [uncategorized]
+raw_sources: []
+last_reinforced: 2026-05-08
+github_commit: pending
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: unspecified
+  framework: unspecified
+---
+
 # [[렌더링 차단 리소스(Render-blocking resources)|렌더링 차단 리소스(Render-Blocking resources]]

-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 렌더링 차단 리소스란 브라우저가 화면에 페이지를 그리는 렌더링 과정을 일시적으로 중단하게 만드는 핵심 웹 리소스를 뜻합니다 [1]. 대표적인 예인 CSS는 스타일이 적용되지 않은 화면(FOUC)이 사용자에게 노출되는 것을 막기 위해 [[CSSOM|CSSOM]]이 완전히 구성될 때까지 렌더링을 막습니다 [2, 3]. 동기적으로 실행되는 [[JavaScript|JavaScript]] 또한 HTML 파서를 멈추게 만들어 결과적으로 렌더링을 차단합니다 [4, 5]. 이러한 리소스들을 비동기 처리하거나 다운로드를 지연시키는 등 최적화하는 것은 초기 페이지 로드 속도와 웹 성능을 향상시키는 핵심 요소입니다 [6, 7].

-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 - **CSS의 렌더링 차단 원리**: 브라우저가 문서 파싱 중 일부 외부 리소스 요청을 만나면 해당 에셋이 처리될 때까지 렌더링을 중단합니다 [8]. CSS는 기본적으로 렌더링 차단 리소스로 동작하는데, 그 이유는 나중에 로드된 스타일 규칙이 이전 규칙을 덮어씌울 수 있기 때문에 브라우저가 [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model]]을 완성하기 전까지 화면 렌더링을 보류해야 하기 때문입니다 [3]. 이는 사용자가 스타일이 입혀지지 않은 HTML 원본을 보게 되는 '스타일 없는 콘텐츠의 번쩍임(FOUC)' 현상을 방지하기 위한 안전장치입니다 [2]. `<head>` 태그 내에 존재하는 렌더링 차단 리소스는 사실상 페이지 전체의 렌더링을 차단합니다 [9].
 - **파서 차단([[Parser|Parser]]-blocking)과 JavaScript**: JavaScript는 기본적으로 파서를 차단하는 리소스입니다 [5]. 스크립트 실행 과정에서 DOM이나 CSSOM이 어떻게 변경될지 알 수 없으므로, 브라우저는 실행이 완료될 때까지 HTML 파싱을 중단합니다 [5, 10]. 파싱이 막히면 브라우저는 그 이후의 콘텐츠에 접근해 렌더링할 수 없기 때문에, 파서 차단 리소스는 결과적으로 렌더링도 차단하게 됩니다 [11].
 - **차단 우회 및 최적화 방법**:
@@ -13,10 +33,64 @@
  - 최신 기술로는 [[Chrome|Chrome]] 105부터 도입된 `blocking=render` 속성을 통해 파서는 계속 진행하도록 두면서 명시적으로 렌더링만 차단하게 설정할 수도 있습니다 [5].
 - **측정 및 식별**: WebPageTest, [[Lighthouse|Lighthouse]] 등과 같은 성능 감사 도구는 렌더링 차단 리소스를 식별하는 기능을 제공합니다. 이를 통해 어떤 리소스가 실제 페이지 렌더링을 지연시키고 있는지 찾아내어 최적화의 단서로 삼을 수 있습니다 [15].

-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** 핵심 렌더링 경로([[Critical Rendering Path|Critical Rendering Path]]), [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model]], 파서 차단 리소스(Parser-blocking resources), FOUC(Flash of Unstyled Content)
 - **Projects/Contexts:** [[웹 성능 최적화(Web Performance Optimization)|웹 성능 최적화(Web Performance Optimization]], Lighthouse 성능 감사
 - **Contradictions/Notes:** 소스에 따르면 CSS가 렌더링을 차단한다고 해서 브라우저의 모든 작업이 중지되는 것은 아닙니다. 브라우저는 CSS를 다운로드하고 렌더링을 일시 정지한 상태에서도 나머지 HTML을 계속 처리하며 할 수 있는 다른 작업(예: 리소스 탐색 등)을 수행하여 효율성을 높입니다 [12]. 또한, 과거에는 렌더링 차단 리소스가 페이지 전체 렌더링을 막았으나 최근 브라우저(Firefox, Chrome)는 렌더링 차단 리소스 아래에 있는 콘텐츠의 렌더링만 차단하도록 동작 방식이 개선되었습니다 [9].

 ---
-*Last updated: 2026-04-25*
+*Last updated: 2026-04-25*
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+
+- **과거 데이터와의 충돌:** 없음
+- **정책 변화:** 없음
+
+## 🕓 변경 이력 (Changelog)
+
+| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
+|------|-----------|-----------|--------|
+| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+
+## 💻 코드 패턴 (Code Patterns)
+
+**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
+
+```text
+# TODO
+```
+
+## 🤔 의사결정 기준 (Decision Criteria)
+
+**선택 A를 써야 할 때:**
+- *(TODO)*
+
+**선택 B를 써야 할 때:**
+- *(TODO)*
+
+**기본값:**
+> *(TODO)*
+
+## ❌ 안티패턴 (Anti-Patterns)
+
+- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*