8808c672dc
웹 디자인 파이프라인 스킬과 이를 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)
19 KiB
19 KiB
05 — 출처 목록
조사 시점: 2026-08-20. 각 항목은 이 리서치에서 실제로 참조한 근거다. ✅ = 본문 코드/수치의 직접 근거, 📖 = 개념·기법 참고, 🔧 = 도구/패키지
A. three.js 공식 (1–17)
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)
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)
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 업그레이드를 막는 실질적 제약이므로 매번 확인해야 한다.