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

This commit is contained in:
2026-05-08 19:52:07 +09:00
parent 9dd3d40662
commit 5ba5a55c78
3984 changed files with 334557 additions and 28839 deletions
+70 -10
View File
@@ -1,17 +1,29 @@
---
category: Frontend
tags: [auto-wikified, technical-documentation, frontend]
id: wiki-2026-0508-fabric
title: Fabric
description: "Fabric은 React Native의 새로운 아키텍처(New Architecture)를 구성하는 핵심 요소 중 하나로, 밑바닥부터 완전히 새롭게 재작성된 새로운 UI 렌더링 시스템(UI 관리 레이어)이다 [1, 2]."
last_updated: 2026-05-04
category: Frontend
status: needs_review
canonical_id: self
aliases: []
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
tags: [auto-wikified, technical-documentation, frontend]
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
---
# Fabric
## 📌 Brief Summary
## 📌 한 줄 통찰 (The Karpathy Summary)
Fabric은 React Native의 새로운 아키텍처(New Architecture)를 구성하는 핵심 요소 중 하나로, 밑바닥부터 완전히 새롭게 재작성된 새로운 UI 렌더링 시스템(UI 관리 레이어)이다 [1, 2]. 기존의 비동기 브릿지(Bridge) 방식의 병목 현상을 해결하기 위해 설계되었으며, 네이티브 UI 레이어에 대한 동기적 접근을 가능하게 한다 [1, 2]. 이를 통해 동시성 렌더링(Concurrent Rendering)과 동기적인 레이아웃 계산을 지원하며, 결과적으로 React Native 애플리케이션의 네이티브 렌더링 성능과 응답성을 비약적으로 향상시킨다 [1, 2].
## 📖 Core Content
## 📖 구조화된 지식 (Synthesized Content)
* **동기적 네이티브 UI 접근 메커니즘**
기존 아키텍처에서는 UI가 별도의 네이티브 스레드에서 관리되고 자바스크립트 스레드와의 통신이 비동기식으로 이루어져 성능 지연이 발생했다 [1, 2]. Fabric은 이 구조를 혁신하여, C++에서 UI의 가상 표현인 '섀도 트리(Shadow Tree)'를 직접 생성하고 스레드 간에 공유할 수 있도록 한다 [1]. 이를 통해 비동기적인 왕복 통신(round-trips) 없이도 네이티브 뷰를 측정하고 렌더링할 수 있게 된다 [2].
@@ -24,12 +36,11 @@ Fabric은 React Native의 새로운 아키텍처(New Architecture)를 구성하
* **네이티브 컴포넌트 수준의 고성능 애니메이션**
렌더링 로직을 C++로 이동시키고 직접 통신을 활성화함으로써, Fabric은 UI 컴포넌트의 렌더링 및 업데이트 소요 시간을 대폭 감소시킨다 [1]. 이러한 네이티브 컴포넌트 렌더링 제어를 통해 부드러운 애니메이션과 거의 네이티브 수준에 근접한 성능(near-native performance)을 달성하게 된다 [3, 4].
## Trade-offs & Caveats
## 모순 및 업데이트 (Contradictions & Updates)
소스에 관련 정보가 부족합니다.
단, 소스에 명시된 아키텍처 구조를 통해 유추할 수 있는 제약 사항으로는 Fabric이 단독으로 기능하기보다는 JSI(JavaScript Interface) 기반의 바인딩과 TurboModules 등 New Architecture의 다른 요소들과 완벽하게 결합되어야만 비동기 브릿지의 한계를 극복하고 완전한 성능 향상을 이룰 수 있다는 구조적 종속성이 존재한다 [2, 4-6]. 또한 기존 브릿지 기반으로 작성된 서드파티 네이티브 라이브러리들은 이 새로운 동기식 렌더링 파이프라인에 맞춰 호환성 업데이트를 거쳐야 할 수 있다 [7, 8].
## 🔗 Knowledge Connections
## 🔗 지식 연결 (Graph)
### Related Concepts
#### [관계 유형 A (아키텍처/기반 기술)]
@@ -65,4 +76,53 @@ Fabric은 React Native의 새로운 아키텍처(New Architecture)를 구성하
- 확장 방향: React Native가 Fabric을 통해 UI 비동기 병목을 해결했듯, Flutter 진영이 기존 Skia 엔진의 셰이더 컴파일 지연(Jank) 현상을 해결하기 위해 내놓은 커스텀 렌더링 엔진인 'Impeller'의 구조와 렌더링 방식을 비교 분석함으로써 모바일 크로스 플랫폼 렌더링 최적화 기술 전반의 흐름을 이해할 수 있다 [7, 9, 15].
---
*Last updated: 2026-05-03*
*Last updated: 2026-05-03*
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
**언제 이 지식을 쓰는가:**
- *(TODO)*
**언제 쓰면 안 되는가:**
- *(TODO)*
## 🧪 검증 상태 (Validation)
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
## 🧬 중복 검사 (Duplicate Check)
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
## 🕓 변경 이력 (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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*