---
id: P-REINFORCE-AUTO-715F80
category: "10_Wiki/💡 Topics/Graphics & Performance"
confidence_score: 0.90
tags: [auto-reinforced]
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - OffscreenCanvas"
---

# [[OffscreenCanvas|OffscreenCanvas]]

## 📌 한 줄 통찰 (The Karpathy Summary)
> **OffscreenCanvas**는 DOM과 분리된 백그라운드 스레드(웹 워커)에서 그래픽 렌더링을 수행할 수 있게 해주는 웹 API로, 무거운 3D 렌더링이나 캔버스 연산 중에도 메인 스레드의 UI 반응성을 쾌적하게 유지할 수 있도록 돕는 핵심 최적화 기술입니다.

## 📖 구조화된 지식 (Synthesized Content)
**1. DOM 의존성 분리 및 Web Worker 활용** 기존의 캔버스 렌더링은 `<html>` 문서의 `<canvas>` 요소(DOM)와 직접적으로 결합되어 있어 메인 스레드에서만 실행이 가능했습니다. 하지만 OffscreenCanvas는 이름 그대로 화면 밖(Off-screen)에서 동작하여 DOM과의 동기화 과정을 생략합니다. 이 덕분에 DOM에 접근할 수 없는 웹 워커(Web Worker) 환경에서도 Canvas API와 WebGL을 사용하여 백그라운드 렌더링이 가능해집니다.

**2. 메인 스레드 차단 방지 (Unblocking Main Thread)** 복잡한 Three.js 씬이나 무거운 2D/3D 연산을 메인 스레드에서 실행하면 UI가 멈추는(Freezing) 현상이 발생할 수 있습니다. `transferControlToOffscreen()` 메서드를 호출하여 캔버스의 제어권을 워커 스레드로 넘기면(Offloading), 무거운 그래픽 연산이 메인 스레드(사용자의 스크롤, 클릭 등 상호작용)와 독립적으로 실행되어 시각적인 버벅거림(Jank) 없이 부드러운 애니메이션을 보장합니다.

**3. 이벤트 포워딩(Event Forwarding)과 통신 오버헤드** 웹 워커 내부에는 `window`나 `document` 객체가 존재하지 않으므로 사용자의 마우스 클릭, 터치 등의 이벤트를 직접 수신할 수 없습니다. 따라서 OffscreenCanvas를 인터랙티브하게 사용하려면 메인 스레드에서 DOM 이벤트를 캡처한 뒤, 좌표 등의 정보를 `postMessage` API를 통해 워커로 전달(Forwarding)하는 추가적인 래핑(Wrapping) 작업이 필요합니다.

**4. 상태 동기화 (State Synchronization)** DOM을 제어하는 React 메인 앱과 WebGL을 렌더링하는 워커 스레드는 메모리를 공유하지 않기 때문에 애플리케이션 상태를 양쪽에서 읽고 써야 할 경우 상태 동기화가 필수적입니다. 이를 해결하기 위해 `SharedArrayBuffer`를 통해 메모리를 직접 공유하거나, `Valtio`와 같은 프록시 기반 상태 관리 도구와 `Broadcast Channel API`를 결합하여 변경된 데이터(Delta)만 메시지로 주고받는 구조를 구현해야 합니다.

**5. React 생태계 통합 (React Three Fiber)** R3F 생태계에서는 `@react-three/offscreen` 패키지를 통해 손쉽게 구현할 수 있습니다. 기존의 `<Canvas>` 대신 이 패키지의 `<Canvas worker={worker}>`를 사용하면 이벤트 포워딩과 Three.js 인터페이스 패치 작업이 자동으로 처리되어, 개발자가 작성한 코드를 수정할 필요 없이 워커에서 실행되도록 만들어줍니다.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.

## 🔗 지식 연결 (Graph)
- **Related Topics:** [[Web Worker (웹 워커)|Web Worker (웹 워커)]], Multi-threaded Architecture (멀티스레드 아키텍처), [[React Three Fiber (R3F)|React Three Fiber (R3F)]], Valtio (Proxy State 관리), [[SharedArrayBuffer|SharedArrayBuffer]]
- **Projects/Contexts:** [[고성능 멀티스레드 React 앱 아키텍처|고성능 멀티스레드 React 앱 아키텍처]], 무거운 렌더링 연산을 동반하는 WebGL 데이터 시각화
- **Contradictions/Notes:** OffscreenCanvas 기능은 과거 Safari 브라우저에서 오랫동안 완벽히 지원되지 않아 프로젝트를 메인 스레드용과 워커용 두 갈래(Fork)로 유지보수해야 하는 치명적인 단점이 있었습니다. 2025년 9월(Safari v26)부터 지원이 확대되었으나, 완벽한 크로스 브라우저 호환성을 위해서는 API 지원 여부를 감지하여 워커를 지원하지 않는 환경에서는 메인 스레드에서 렌더링이 이루어지도록 `fallback` 컴포넌트를 반드시 제공해야 합니다.

---

_Last updated: 2026-04-15_
- Raw Source: 00_Raw/2026-04-20/OffscreenCanvas.md
---