yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인

Browse source 
웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포.

스킬 (packages/skill)
- SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로
  본문은 절차와 인덱스만, 지식은 references/ 로 분리
- 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기
- 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외
- 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙,
  SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침

설치 CLI (packages/cli, packages/core)
- npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md
- 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다
- 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성
- AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입
- Windsurf 는 12,000자 상한 초과 시 설치를 차단

배포 (build/ci, .forgejo/workflows)
- 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러
  → draft 릴리스 → Cloudflare Pages. 재실행 멱등

근거 (research/)
- 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다

테스트 22개 통과 (core 16 · cli 6)
This commit is contained in:
Yun Chan 2026-08-20 10:48:00 +09:00
commit 8808c672dc
135 changed files with 38838 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

221
research/three/05-sources.md Normal file
View file

@ -0,0 +1,221 @@
# 05 — 출처 목록
> 조사 시점: **2026-08-20**. 각 항목은 이 리서치에서 실제로 참조한 근거다.
> ✅ = 본문 코드/수치의 직접 근거, 📖 = 개념·기법 참고, 🔧 = 도구/패키지
---
## A. three.js 공식 (1–17)
| # | URL | 설명 |
|---|---|---|
| 1 | https://threejs.org/ | ✅ three.js 공식 홈. 현재 릴리스 번호 확인용 |
| 2 | https://threejs.org/docs/ | ✅ API 레퍼런스 전체 |
| 3 | https://threejs.org/manual/ | 📖 공식 매뉴얼(구 Fundamentals). 개념 설명이 문서보다 낫다 |
| 4 | https://github.com/mrdoob/three.js/wiki/Migration-Guide | ✅ **r150→r185 브레이킹 체인지 전체.** 01-stack §6의 근거 |
| 5 | https://github.com/mrdoob/three.js/releases | ✅ 릴리스 노트. r180/r184/r185 확인 |
| 6 | https://threejs.org/manual/en/how-to-dispose-of-objects.html | ✅ dispose 규칙. geometry/material/texture/renderTarget별 해제, `renderer.info` 활용 |
| 7 | https://threejs.org/manual/en/webgl-compatibility-check.html | ✅ `three/addons/capabilities/WebGL.js`로 지원 여부 검사 |
| 8 | https://threejs.org/docs/pages/ShaderMaterial.html | ✅ ShaderMaterial uniform/defines/RawShaderMaterial 차이 |
| 9 | https://threejs.org/docs/pages/InstancedMesh.html | ✅ `setMatrixAt` / `instanceMatrix.needsUpdate` / 머티리얼 공유 금지 |
| 10 | https://threejs.org/docs/pages/GLTFLoader.html | ✅ DRACO/KTX2/meshopt 로더 연결 방법 |
| 11 | https://threejs.org/docs/pages/DRACOLoader.html | ✅ 디코더 경로, `preload()`, 인스턴스 재사용 권고 |
| 12 | https://threejs.org/docs/pages/WebGL.html | ✅ `isWebGL2Available()` 및 프로브 컨텍스트 해제 이슈 |
| 13 | https://threejs.org/docs/pages/TSL.html | 📖 TSL(Three Shading Language) 명세 |
| 14 | https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language | 📖 TSL 위키. 노드 목록과 사용법 |
| 15 | https://threejs.org/examples/ | 📖 공식 예제 400+. GPGPU/포스트프로세싱 구현의 1차 참조 |
| 16 | https://github.com/mrdoob/three.js/blob/dev/examples/jsm/misc/GPUComputationRenderer.js | 📖 three 내장 GPGPU 헬퍼. P4의 자체 구현 대안 |
| 17 | https://github.com/mrdoob/three.js/releases/tag/r165 | ✅ `useLegacyLights` 완전 제거 시점 확인 |
## B. three.js 포럼 · 마이그레이션 논의 (18–22)
| # | URL | 설명 |
|---|---|---|
| 18 | https://discourse.threejs.org/ | 📖 공식 포럼. 실무 이슈의 최종 검색처 |
| 19 | https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791 | ✅ r152 색공간 전환의 공식 설명 스레드. `colorSpace` 지정 규칙 |
| 20 | https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733 | ✅ r155 물리 기반 조명 전환. intensity 재조정 필요성 |
| 21 | https://discourse.threejs.org/t/compression-draco-ktx2-example/31382 | ✅ DRACO + KTX2 동시 적용 실제 코드 |
| 22 | https://discourse.threejs.org/t/threejs-landing-page-photoreal-3d-with-100-lighthouse-score/46814 | 📖 Lighthouse 100점 랜딩페이지 사례. 로딩 전략 참고 |
## C. React Three Fiber 생태계 (23–37)
| # | URL | 설명 |
|---|---|---|
| 23 | https://r3f.docs.pmnd.rs/getting-started/introduction | ✅ R3F 개요 및 설치 |
| 24 | https://r3f.docs.pmnd.rs/api/canvas | ✅ **Canvas 전체 prop과 기본값.** `dpr [1,2]`, `frameloop always`, `flat/linear/legacy` |
| 25 | https://r3f.docs.pmnd.rs/advanced/scaling-performance | ✅ `frameloop="demand"`, `invalidate()`, `PerformanceMonitor`, `AdaptiveDpr`, `<Detailed>` |
| 26 | https://r3f.docs.pmnd.rs/advanced/pitfalls | ✅ setState in loop 금지, 객체 재생성 금지, 머티리얼 공유 등 7가지 함정 |
| 27 | https://r3f.docs.pmnd.rs/tutorials/v9-migration-guide | ✅ **v9 마이그레이션.** React 19 요구, `ThreeElements` 인터페이스, sRGB 자동 지정 제거, async `gl` 콜백 |
| 28 | https://github.com/pmndrs/react-three-fiber/releases | ✅ 릴리스 노트. React 19.2 reconciler 이슈 |
| 29 | https://github.com/pmndrs/react-three-fiber/discussions/3665 | 📖 v10.0.0-alpha 진행 상황 |
| 30 | https://drei.docs.pmnd.rs/getting-started/introduction | ✅ drei 컴포넌트 카테고리 전체 목록 |
| 31 | https://drei.docs.pmnd.rs/shaders/shader-material | ✅ `shaderMaterial()` 헬퍼. uniform→prop 자동 매핑, `key` 핫리로드 |
| 32 | https://drei.docs.pmnd.rs/shaders/mesh-transmission-material | ✅ **MeshTransmissionMaterial 전체 prop과 기본값.** P10의 근거 |
| 33 | https://drei.docs.pmnd.rs/shaders/mesh-refraction-material | 📖 보석/다이아 굴절 전용 머티리얼 |
| 34 | https://drei.docs.pmnd.rs/controls/scroll-controls | ✅ `ScrollControls` prop, `useScroll()`의 `offset/delta/range/curve/visible` |
| 35 | https://drei.docs.pmnd.rs/portals/view | ✅ `<View>` — 단일 컨텍스트로 여러 씬을 DOM에 배치 |
| 36 | https://github.com/pmndrs/drei | 🔧 drei 소스. 컴포넌트 실제 구현 확인용 |
| 37 | https://github.com/pmndrs/maath | 🔧 R3F용 수학 유틸(damp, easing, random). 프레임레이트 독립 보간 |
## D. 포스트프로세싱 (38–43)
| # | URL | 설명 |
|---|---|---|
| 38 | https://react-postprocessing.docs.pmnd.rs/introduction | ✅ `EffectComposer` 기본 사용법. EffectPass 자동 병합 |
| 39 | https://react-postprocessing.docs.pmnd.rs/effects/chromatic-aberration | ✅ ChromaticAberration prop |
| 40 | https://react-postprocessing.docs.pmnd.rs/effects/lensflare | 📖 렌즈 플레어. transmission 재질 감지 방식 |
| 41 | https://github.com/pmndrs/postprocessing | ✅ vanilla 라이브러리 본체. peer `three >=0.168 <0.186` 확인 |
| 42 | https://github.com/pmndrs/postprocessing/wiki/Custom-Effects | ✅ **커스텀 Effect 작성법.** `mainImage`/`mainUv` 시그니처, 사용 가능 uniform, `EffectAttribute` |
| 43 | https://pmndrs.github.io/postprocessing/public/docs/ | 📖 API 문서 전체 |
## E. 스크롤 · 애니메이션 (44–51)
| # | URL | 설명 |
|---|---|---|
| 44 | https://gsap.com/docs/v3/Plugins/ScrollTrigger/ | ✅ ScrollTrigger 전체 API. `scrub`, `pin`, `invalidateOnRefresh` |
| 45 | https://gsap.com/blog/3-13/ | ✅ 3.13 릴리스 — 전 플러그인 무료화, SplitText 재작성 |
| 46 | https://webflow.com/blog/gsap-becomes-free | ✅ Webflow의 GSAP 무료화 공지(2025-04) |
| 47 | https://css-tricks.com/gsap-is-now-completely-free-even-for-commercial-use/ | 📖 라이선스 해설 — 무료지만 오픈소스는 아님 |
| 48 | https://github.com/darkroomengineering/lenis | ✅ **Lenis 전체 옵션·메서드·이벤트 + GSAP ScrollTrigger 통합 스니펫.** P6의 근거 |
| 49 | https://lenis.dev/ | 🔧 Lenis 공식 사이트 |
| 50 | https://github.com/14islands/r3f-scroll-rig | 📖 DOM↔WebGL 스크롤 동기화 라이브러리. P8의 대안 |
| 51 | https://tympanus.net/codrops/2026/05/28/the-never-ending-story-building-a-seamless-infinite-scroll-experience-with-gsap-lenis/ | 📖 GSAP+Lenis 무한 스크롤 구현 |
## F. Codrops 튜토리얼 (52–71)
| # | URL | 설명 |
|---|---|---|
| 52 | https://tympanus.net/codrops/2024/10/31/how-to-code-a-subtle-shader-background-effect-with-react-three-fiber/ | ✅ **P2의 원형.** SDF 도트 그리드 + 트레일 텍스처 + three 셰이더 청크 활용 |
| 53 | https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ | ✅ **P8의 원형.** DOM↔플레인 동기화, `deformationCurve`, RGB shift, 마우스 속도 |
| 54 | https://tympanus.net/codrops/2020/04/14/interactive-webgl-hover-effects/ | 📖 hover 디스플레이스먼트/리퀴드 왜곡 모음 |
| 55 | https://tympanus.net/codrops/2022/09/26/how-to-recreate-stripes-lava-lamp-gradient-with-three-js/ | ✅ **P1의 원형.** Stripe 그라디언트 정점 변위 기법 |
| 56 | https://tympanus.net/codrops/2024/08/27/grid-displacement-texture-with-rgb-shift-using-three-js-gpgpu-and-shaders/ | 📖 GPGPU 그리드 디스플레이스먼트 + RGB shift |
| 57 | https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/ | ✅ P3의 근거. 오프스크린 텍스처로 파티클 상호작용 |
| 58 | https://tympanus.net/codrops/2023/12/13/creating-an-interactive-mouse-effect-with-instancing-in-three-js/ | ✅ P5의 근거. InstancedMesh 그리드 마우스 인터랙션 |
| 59 | https://tympanus.net/codrops/2025/06/09/how-to-create-interactive-droplet-like-metaballs-with-three-js-and-glsl/ | 📖 SDF smooth-min 메타볼 |
| 60 | https://tympanus.net/codrops/2025/03/24/animating-letters-with-shaders-interactive-text-effect-with-three-js-glsl/ | ✅ P11의 근거. 텍스트 디스플레이스먼트 |
| 61 | https://tympanus.net/codrops/2020/06/02/kinetic-typography-with-three-js/ | 📖 키네틱 타이포그래피 |
| 62 | https://tympanus.net/codrops/2022/11/08/3d-typing-effects-with-three-js/ | 📖 3D 타이핑 효과 |
| 63 | https://tympanus.net/codrops/2025/03/13/warping-3d-text-inside-a-glass-torus/ | ✅ P10의 근거. 유리 토러스 안에서 왜곡되는 텍스트 |
| 64 | https://tympanus.net/codrops/2023/10/10/progressively-enhanced-webgl-lens-refraction/ | ✅ 점진적 향상 원칙 + 렌즈 굴절. 04 §6의 사상적 근거 |
| 65 | https://tympanus.net/codrops/2024/02/07/on-scroll-revealing-webgl-image-explorations/ | 📖 스크롤 리빌 이미지. P8 리빌 마스크의 참고 |
| 66 | https://tympanus.net/codrops/2025/11/26/creating-wavy-infinite-carousels-in-react-three-fiber-with-glsl-shaders/ | 📖 R3F 무한 캐러셀 |
| 67 | https://tympanus.net/codrops/2026/02/17/reactive-depth-building-a-scroll-driven-3d-image-tube-with-react-three-fiber/ | 📖 스크롤 구동 3D 이미지 튜브 + DOM 오버레이 동기화 |
| 68 | https://tympanus.net/codrops/2026/07/09/building-an-interactive-wave-propagation-cube-grid-with-three-js/ | 📖 파동 전파 큐브 그리드. P5의 최신 변형 |
| 69 | https://tympanus.net/codrops/2025/07/22/interactive-text-destruction-with-three-js-webgpu-and-tsl/ | 📖 WebGPU+TSL 텍스트 파괴 |
| 70 | https://tympanus.net/codrops/2026/01/28/webgpu-gommage-effect-dissolving-msdf-text-into-dust-and-petals-with-three-js-tsl/ | 📖 MSDF 텍스트 디졸브 + MRT 선택적 블룸. P15의 고급 사례 |
| 71 | https://tympanus.net/codrops/tag/three-js/ | 📖 Codrops three.js 태그 전체 아카이브 |
## G. Maxime Heckel 블로그 (72–77)
| # | URL | 설명 |
|---|---|---|
| 72 | https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/ | ✅ **셰이더 입문의 최고 자료.** uniform/varying, 8개 인터랙티브 씬 |
| 73 | https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/ | ✅ P3/P4의 근거. attribute, BufferGeometry, FBO 파티클 |
| 74 | https://blog.maximeheckel.com/posts/refraction-dispersion-and-other-shader-light-effects/ | ✅ P10 vanilla 굴절 셰이더의 근거. 채널별 IOR 분산 |
| 75 | https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/ | ✅ 03 §5.5 디더링의 근거. Bayer 매트릭스 |
| 76 | https://blog.maximeheckel.com/posts/post-processing-as-a-creative-medium/ | 📖 포스트프로세싱을 표현 수단으로 쓰는 법 |
| 77 | https://blog.maximeheckel.com/posts/field-guide-to-tsl-and-webgpu/ | ✅ 01 §8의 근거. TSL/WGSL 실전 가이드 |
## H. 강의 · 크리에이터 (78–85)
| # | URL | 설명 |
|---|---|---|
| 78 | https://threejs-journey.com/ | 📖 Bruno Simon의 표준 three.js 코스. 70+ 레슨 |
| 79 | https://threejs-journey.com/lessons/gpgpu-flow-field-particles-shaders | ✅ P4의 근거. GPGPU 플로우필드 파티클 레슨 |
| 80 | https://threejs-journey.com/lessons/raycaster-and-mouse-events | ✅ P14의 근거. 레이캐스터/마우스 이벤트 |
| 81 | https://www.youtube.com/@akella_ | 📖 Yuri Artiukh(Akella). 셰이더 라이브코딩. 이미지 왜곡/GPGPU |
| 82 | https://threejs-workshops.com/ | 📖 Akella의 유료 워크숍(셰이더/GPGPU/수학) |
| 83 | https://tympanus.net/codrops/author/akella/ | 📖 Akella의 Codrops 기고 모음 |
| 84 | https://bobbyroe.com/ | 📖 Robot Bobby. 짧은 실습 중심 three.js 튜토리얼 |
| 85 | https://robotbobby.thinkific.com/ | 📖 Robot Bobby 코스(5~15분 단위 레슨) |
## I. 셰이더 학습 · 라이브러리 (86–95)
| # | URL | 설명 |
|---|---|---|
| 86 | https://thebookofshaders.com/ | ✅ GLSL 프래그먼트 셰이더 입문의 정본. 03의 기초 개념 근거 |
| 87 | https://www.shadertoy.com/ | 📖 셰이더 커뮤니티. 기법 탐색과 레퍼런스 |
| 88 | https://github.com/patriciogonzalezvivo/lygia | ✅ **LYGIA 셰이더 라이브러리.** `#include` 기반, GLSL/WGSL 다중 언어. 03 §7 |
| 89 | https://lygia.xyz/ | 🔧 LYGIA 함수 브라우저 + 런타임 `resolve.js` |
| 90 | https://github.com/stegu/webgl-noise | ✅ simplex/perlin 노이즈 GLSL 원본(유지보수 포크). MIT |
| 91 | https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl | ✅ **03 §5.2 `snoise(vec3)` 전체 코드의 출처.** 원본 파일 |
| 92 | https://iquilezles.org/articles/palettes/ | ✅ 03 §5.5 코사인 팔레트 공식의 출처 |
| 93 | https://iquilezles.org/articles/distfunctions2d/ | ✅ 03 §5.6 2D SDF 함수 모음의 출처 |
| 94 | https://iquilezles.org/articles/smin/ | ✅ `opSmoothUnion` (smooth minimum) 유도 |
| 95 | https://github.com/juniorxsound/Particle-Curl-Noise | 📖 curl noise FBO 파티클 참조 구현 |
## J. 도구 · 최적화 (96–107)
| # | URL | 설명 |
|---|---|---|
| 96 | https://gltf-transform.dev/ | ✅ **glTF 최적화 CLI/SDK.** draco/meshopt/ktx2/resize/simplify. P13의 근거 |
| 97 | https://github.com/protectwise/troika/tree/main/packages/troika-three-text | ✅ P11의 근거. SDF 텍스트, Web Worker 폰트 파싱 |
| 98 | https://protectwise.github.io/troika/troika-three-text/ | ✅ troika-three-text API 문서. `sync()`, `sdfGlyphSize`, `preloadFont` |
| 99 | https://www.npmjs.com/package/troika-three-text | 🔧 버전/peer 확인 (0.52.5, `three >=0.125`) |
| 100 | https://github.com/UstymUkhman/vite-plugin-glsl | ✅ 01 §3의 근거. `#include` 인라인, three 내장 청크 자동 스킵 |
| 101 | https://github.com/pmndrs/detect-gpu | ✅ 04 §5의 근거. GPU 벤치마크 tier 0~3 판정 |
| 102 | https://github.com/gkjohnson/three-mesh-bvh | 🔧 대량 오브젝트 레이캐스팅 가속(BVH). P14 참고 |
| 103 | https://github.com/pmndrs/gltfjsx | 🔧 GLTF → R3F 컴포넌트 자동 변환 CLI |
| 104 | https://github.com/pmndrs/react-three-a11y | 🔧 R3F 접근성 헬퍼(포커스/aria) |
| 105 | https://evilmartians.com/chronicles/faster-webgl-three-js-3d-graphics-with-offscreencanvas-and-web-workers | ✅ 04 §9의 근거. OffscreenCanvas + Worker three 이전 |
| 106 | https://web.dev/articles/offscreen-canvas | ✅ OffscreenCanvas 공식 가이드 |
| 107 | https://threejsresources.com/ | 📖 three.js 도구/학습자원 디렉터리 |
## K. 성능 · 접근성 · 표준 (108–116)
| # | URL | 설명 |
|---|---|---|
| 108 | https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion | ✅ 04 §7.1의 근거. MDN 명세 |
| 109 | https://www.w3.org/WAI/WCAG22/Techniques/css/C39 | ✅ WCAG 2.2 기법 C39 — reduced-motion으로 모션 억제 |
| 110 | https://css-tricks.com/reduced-motion-picture-technique-take-two/ | ✅ `<picture>` + `prefers-reduced-motion`으로 정적 대체 제공 |
| 111 | https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context/loseContext | ✅ 04 §6.3의 근거. 컨텍스트 강제 해제/복구 |
| 112 | https://web.dev/articles/vitals | ✅ Core Web Vitals 기준(LCP 2.5s / INP 200ms / CLS 0.1) |
| 113 | https://caniuse.com/webgl2 | ✅ WebGL2 지원 현황 (r163+ 필수 요구사항) |
| 114 | https://caniuse.com/webgpu | ✅ WebGPU 지원 현황. 01 §8 판단 근거 |
| 115 | https://www.utsubo.com/blog/threejs-best-practices-100-tips | ✅ **04 §1 예산 수치의 주요 근거.** 드로우콜 100, varying 3개, 라이트 3개, 그림자맵 크기, 4K 텍스처 64MB 등 |
| 116 | https://www.utsubo.com/blog/threejs-2026-what-changed | ✅ 01 §8의 근거. r170~r184 변화, WebGPU 프로덕션 레디 시점 |
## L. 사례 분석 · 레퍼런스 (117–125)
| # | URL | 설명 |
|---|---|---|
| 117 | https://www.awwwards.com/websites/three-js/ | 📖 Awwwards three.js 수상작 컬렉션 |
| 118 | https://www.utsubo.com/blog/best-threejs-websites-2026 | 📖 2026년 three.js 사이트 8선 + 기법 분해 |
| 119 | https://www.utsubo.com/blog/webgl-three-js-site-seo-rankable-guide | ✅ 04 §2.4의 근거. WebGL 사이트 SEO — DOM 먼저, 캔버스는 레이어 |
| 120 | https://www.utsubo.com/blog/webgpu-threejs-migration-guide | 📖 WebGPU 마이그레이션 체크리스트 |
| 121 | https://www.hontran.dev/blog/webgl-website-examples | 📖 수상작 WebGL 사이트의 코드 관점 분해 |
| 122 | https://metabole.studio/en/blog/immersive-website-examples | 📖 몰입형 웹사이트 사례 큐레이션 |
| 123 | https://madebybeings.com/blog/interactive-liquid-gradient-background-with-three-js-a-step-by-step-tutorial | 📖 유동 그라디언트 배경 단계별 튜토리얼(그레인/컬러스킴 포함) |
| 124 | https://blog.olivierlarose.com/tutorials/3d-glass-effect | 📖 R3F 유리 효과 튜토리얼 |
| 125 | https://barradeau.com/blog/?p=621 | 📖 nicoptere의 FBO 파티클 원조 글. P4의 이론적 출발점 |
## M. 기타 학습 (126–130)
| # | URL | 설명 |
|---|---|---|
| 126 | https://sbcode.net/threejs/ | 📖 SBCODE three.js 튜토리얼. 라이트/그림자/로더 개별 항목 |
| 127 | https://sbcode.net/threejs/webgpu-renderer/ | 📖 WebGPURenderer + TSL 실습 |
| 128 | https://wawasensei.dev/courses/react-three-fiber | 📖 R3F 코스. `<View>`, 포트폴리오 패턴 |
| 129 | https://www.npmjs.com/package/vite-plugin-glsl | 🔧 버전/옵션 확인 |
| 130 | https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/CHANGELOG.md | ✅ R3F 상세 변경 이력. React 버전 호환 범위 추적 |
---
## 버전 검증에 사용한 npm 레지스트리 엔드포인트
이 리서치의 "버전 스냅샷"(01 §0)은 아래를 **직접 조회**해 확인했다(2026-08-20).
| 패키지 | 엔드포인트 | 확인된 값 |
|---|---|---|
| three | https://registry.npmjs.org/three/latest | `0.185.1` |
| @react-three/fiber | https://registry.npmjs.org/@react-three/fiber/latest | `9.7.0`, peer `react >=19 <19.3`, `three >=0.156` |
| @react-three/drei | https://registry.npmjs.org/@react-three/drei/latest | `10.7.8`, peer `react ^19`, `three >=0.159`, `fiber ^9` |
| @react-three/postprocessing | https://registry.npmjs.org/@react-three/postprocessing/latest | `3.0.5`, peer `three >=0.182`, `postprocessing ^6.36`, `fiber >=9.7` |
| postprocessing | https://registry.npmjs.org/postprocessing/latest | `6.39.4`, peer `three >=0.168.0 <0.186.0` |
| gsap | https://registry.npmjs.org/gsap/latest | `3.15.0` |
| lenis | https://registry.npmjs.org/lenis/latest | `1.3.26` |
| troika-three-text | https://registry.npmjs.org/troika-three-text/latest | `0.52.5`, peer `three >=0.125.0` |
> 이 문서를 재사용할 때는 위 엔드포인트를 다시 조회해 버전을 갱신하라.
> 특히 **`postprocessing`의 three 상한(`< 0.186.0`)**은 three 업그레이드를 막는 실질적 제약이므로 매번 확인해야 한다.