yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/research/canvas/05-sources.md
Yun Chan 8808c672dc designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인 
웹 디자인 파이프라인 스킬과 이를 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)
2026-08-20 10:48:00 +09:00

14 KiB
Raw Blame History

05. 출처 목록

조사일 2026-08-20. ★ = 1차 출처(사양·구현·공식 발표). 나머지는 2차/커뮤니티. 총 60개.

A. 사양 · 제안 (1차)

  1. ★ https://github.com/WICG/html-in-canvas — WICG 공식 저장소. 이 문서 전체의 기준이 되는 living explainer(README.md)가 여기 있다.
  2. ★ https://github.com/WICG/html-in-canvas/blob/main/README.md — explainer 원문. layoutsubtree, drawElementImage, paint 이벤트, captureElementImage, 전체 IDL, read-back-allowed rendering 목록, 설계 대안 논의.
  3. ★ https://wicg.github.io/html-in-canvas/ — explainer의 GitHub Pages 렌더링본. 형식 스펙이 아니라 explainer 그 자체(정규 알고리즘 없음).
  4. ★ https://github.com/WICG/html-in-canvas/blob/main/security-privacy-questionnaire.md — W3C 보안·프라이버시 자기점검 답변 19문항. 무엇이 그려지지 않는지의 근거.
  5. ★ https://github.com/whatwg/html/pull/11588 — WHATWG HTML 스펙 PR "Add HTML-in-Canvas APIs" (2025-08-21 개설, 미머지). GC 압박, 교차 캔버스 ElementImage, 중첩 canvas 구현 불일치 등 미해결 논의.
  6. ★ https://github.com/whatwg/html/issues/10650 — 원 이슈 스레드. 웹 개발자 긍정 신호의 출처.
  7. https://github.com/WICG/html-in-canvas/commits/main/README.md — 커밋 로그. drawElement→drawHTMLElement→drawHTML→drawElementImage 개명 이력과 setHitTestRegions 폐기 시점의 근거.
  8. https://github.com/w3ctag/design-reviews/issues/1204 — W3C TAG 디자인 리뷰.

B. Chromium 출시 프로세스 (1차)

  1. ★ https://chromestatus.com/feature/5172548013916160 — Chrome Platform Status "HTML-in-canvas". 상태 In development, 표준 성숙도, Gecko/WebKit/개발자 신호, 소유자, 동기.
  2. ★ https://chromestatus.com/api/v0/features/5172548013916160 — 위 항목의 원시 JSON. desktop/android/webview 출시 마일스톤이 모두 null임을 확인.
  3. ★ https://developer.chrome.com/blog/html-in-canvas-origin-trial — Chrome for Developers 공식 블로그 (Thomas Nattestad, Natalia Markoborodova, 최종수정 2026-05-19). OT 안내, 3단계 사용법, WebGL/WebGPU 코드, getElementTransform 행렬 유도, 한계.
  4. ★ https://developer.chrome.com/release-notes/148 — Chrome 148 릴리스 노트. Stable 2026-05-05, HTML-in-canvas가 Origin Trials 섹션에 등재.
  5. ★ https://developer.chrome.com/origintrials/#/view_trial/3478467762190286849 — Origin Trial 등록 페이지 (열람에 로그인 필요).
  6. ★ https://groups.google.com/a/chromium.org/g/blink-dev/c/t_nGEmJ_v4s — Intent to Experiment: HTML-in-canvas. OT M148–M151, chromestatus/스펙 링크, Gecko·WebKit 입장, Jake Archibald의 "WebGL에서 텍스처 크기 지정 불가" 지적.
  7. ★ http://www.mail-archive.com/blink-dev@chromium.org/msg16735.html — Intent to Extend Experiment. DevTrial M138 시작, OT 데스크톱 M148–150 → M154 연장, 연장 사유("상당한 피드백 + WebGL/WebGPU·프라이버시 중대 변경").
  8. ★ http://www.mail-archive.com/blink-dev@chromium.org/msg16743.html — 위 연장 요청에 대한 Mike Taylor LGTM (2026-06-11).
  9. ★ https://groups.google.com/a/chromium.org/g/blink-dev/c/LYJyOdLbOfY — "Ready for Developer Testing: HTML in Canvas: drawElement". 구 메서드명 시절의 DevTrial 공지.
  10. ★ https://crbug.com/500967896 — Chromium 추적 버그 (Blink>Canvas).
  11. ★ https://chromiumdash.appspot.com/schedule — Chrome 마일스톤 공식 스케줄. M148=2026-05-05, M150=2026-06-30, M152=2026-08-25, M154=2026-09-22, M155=2026-10-06.
  12. https://groups.google.com/g/html-in-canvas-developer-newsletter — Chrome 팀 운영 개발자 뉴스레터(변경 공지 채널).

C. 타 브라우저 입장 (1차)

  1. ★ https://github.com/mozilla/standards-positions/issues/1076 — Mozilla 입장. open, "Needs proposed position". 2024-09-25 개설, Graphics 팀 배정. 공식 입장 미표명 = "No signal".
  2. ★ https://github.com/WebKit/standards-positions/issues/630 — WebKit 입장. open, 라벨 없음 = "No signal". 이전 제안(canvas place element #403)의 retained-mode 우려로 immediate-mode 설계 회귀했다는 배경 기재.

D. 공식 예제 · 데모 (1차)

  1. ★ https://wicg.github.io/html-in-canvas/Examples/complex-text.html — 회전된 복합 텍스트(RTL·세로쓰기·이모지·인라인 이미지·SVG) 2D 데모. ctx.rotate + drawElementImage + requestPaint() 킥스타트 패턴.
  2. ★ https://wicg.github.io/html-in-canvas/Examples/text-input.html — 캔버스 안 완전 동작 폼(체크박스·라디오·range·submit). "Spaceship Control Panel".
  3. ★ https://wicg.github.io/html-in-canvas/Examples/pie-chart.html — 멀티라인 라벨 파이 차트. 접근성 개선 유스케이스의 대표 예.
  4. ★ https://wicg.github.io/html-in-canvas/Examples/webGL.html — texElementImage2D로 3D 큐브에 HTML. 신/구 시그니처 try/catch 패턴의 원본.
  5. ★ https://wicg.github.io/html-in-canvas/Examples/webgpu-jelly-slider/ — 영상의 젤리 슬라이더 원본. copyElementImageToTexture의 현재 dictionary 시그니처 실사용 예 (소스: Examples/webgpu-jelly-slider/src/index.ts).
  6. ★ https://chrome.dev/html-in-canvas/ — Chrome 팀 공식 데모 갤러리 (3D 빌보드, Tokyo 3D 라벨, 3D 책, Fluid Prism, D3 시각화, OffscreenCanvas, iframe 등).
  7. ★ https://github.com/GoogleChromeLabs/css-web-ui-demos/blob/main/html-in-canvas/awesome-html-in-canvas.md — "Awesome HTML-in-Canvas" 커뮤니티 데모·프레임워크 큐레이션 목록.

E. 영상에 나온 데모의 원본

  1. https://arrival.space/htmlcanvas — 영상의 "천 위 포트폴리오". 게임 안에 걸린 천에 폼이 그려지고 캐릭터가 부딪히는 데모. 작성자 Thomas Richter-Trummer (@fimbox). 소스: https://github.com/fimbox/html-in-canvas/blob/main/plugins/html-cloth.mjs
  2. https://mattrothenberg.com/notes/html-in-canvas/ — Matt Rothenberg (2026-04-04). 영상의 "불타는 다크모드 전환"(Demo 3: The Burn Transition) 과 "폼 포커스 글로우 + 제출 시 왜곡"(Demo 1: The Focus Ring) 의 원본. "배경 캔버스는 그릴 수는 있어도 읽을 수는 없다" 논증, 5구역 화염 셰이더 구조, 실전 함정 6가지.
  3. https://html-in-canvas.dev/demos/liquid-glass/ — Liquid Glass Distortion (En Dash Consulting, 2026-04-10 작성 / 2026-08-19 갱신). 굴절·색수차·프레넬·코스틱 셰이더 + 라이브 DOM.
  4. https://github.com/jeantimex/liquid-glass-html-in-canvas — 또 다른 Liquid Glass 구현 (WebGL).
  5. https://github.com/jeantimex/glass-effect-webgpu — WebGPU 기반 실시간 리퀴드 글래스 렌더러.
  6. https://compiz-web.vercel.app/ — Max Leiter. 셰이더 기반 페이지 전환(Compiz 오마주). 소스: https://github.com/MaxLeiter/compiz-web
  7. https://x.com/wesbos/status/2041594973674483851 — Wes Bos "Duck Hunt TODO" (폼이자 슈팅 게임). 소스: https://github.com/wesbos/hot-tips/blob/main/html-in-canvas/demos/wicg/website-shatter-shooter.html
  8. https://x.com/wesbos/status/2041974552478052507 — Wes Bos "Wobble Buttons" (리플 버튼).
  9. https://html-in-canvas.vittoretrivi.dev/examples/vanish-input — 영상의 "제출하면 입력이 사라지는" 효과 원본. 같은 저자의 login / page-curl / basic-ui 예제도 참조. 소스: https://github.com/motiontx/html-in-canvas

F. 데모 · 컴포넌트 모음

  1. https://html-in-canvas.dev/ + https://html-in-canvas.dev/demos/ — 비공식이지만 가장 잘 정리된 레퍼런스 사이트. 17개 데모(2D/WebGL/WebGPU), Hello World부터 OffscreenCanvas 워커까지. 작성: En Dash.
  2. https://hicshowroom.com/ — HiC Showroom. 각 이펙트가 독립 웹 컴포넌트로 되어 있어 한 줄 import로 삽입 가능.
  3. https://canvasui.dev/ + https://canvasui.dev/docs — CanvasUI (David Haz). 40+ 이펙트 컴포넌트, React/Solid/Preact/Vue/Svelte/vanilla TS, shadcn 레지스트리 방식. 런타임 지원 감지 + graceful degradation 모델의 참고 사례.
  4. https://pixijs-html-in-canvas.vercel.app — Zyie. PixiJS 기반 "HTML Laser" 랜딩 페이지(부서졌다 복원).
  5. https://vav-labs.com/case-studies/quest-signal/ — Vav Labs. Godot 씬에 접근성 있는 DOM 패널을 월드스페이스 WebGL 텍스처로.

G. 프레임워크 통합 (1차)

  1. ★ https://threejs.org/docs/#api/en/textures/HTMLTexture — three.js HTMLTexture 공식 문서.
  2. ★ https://threejs.org/examples/webgl_materials_texture_html.html — three.js 공식 예제. HTMLTexture + InteractionManager + 폴리필 자동 전환의 완성 코드.
  3. ★ https://github.com/mrdoob/three.js/pull/31233 — HTMLTexture 도입 PR. dev 브랜치 2026-04-10 머지, r184 포함. WebGLRenderer/WebGPURenderer 양쪽 지원, matrix3d 자동 계산, 레이캐스팅 불필요.
  4. ★ https://raw.githubusercontent.com/mrdoob/three.js/dev/src/textures/HTMLTexture.js — HTMLTexture 구현 원문(50줄). parent.onpaint로 needsUpdate 세우고 parent.requestPaint() 킥스타트.
  5. ★ https://developer.playcanvas.com/user-manual/graphics/advanced-rendering/html-in-canvas/ — PlayCanvas 공식 문서. device.supportsHtmlTextures, texture.setSource(el). WebGL 백엔드만, WebGPU 대기 중.
  6. https://playcanvas.vercel.app/#/misc/html-texture — PlayCanvas 데모.
  7. https://pixijs.download/release/docs/rendering.HTMLSource.html — PixiJS HTMLSource API 문서.
  8. https://doc.babylonjs.com/features/featuresDeepDive/materials/using/htmlTexture/ — Babylon.js HTML Texture 문서. 플레이그라운드: https://playground.babylonjs.com/#8RDVXG#1
  9. https://www.remotion.dev/docs/transitions/presentations/custom-html-in-canvas — Remotion의 HTML-in-Canvas 트랜지션 프레젠테이션.

H. 폴백 · 폴리필

  1. ★ https://github.com/repalash/three-html-render — HTML-in-Canvas 폴리필. installHtmlInCanvasPolyfill()이 requestPaint/captureElementImage/drawElementImage/texElementImage2D/copyElementImageToTexture를 전부 제공. 내부는 foreignObject 래스터화 + matrix3d DOM 오버레이. 네이티브 있으면 fast path. MIT. 한계 목록(textarea 스크롤, contenteditable 캐럿, :visited 불가) 포함.
  2. https://snapdom.dev/docs/ — SnapDOM. foreignObject 직렬화 + 네이티브 래스터화. html2canvas 대비 2~16배 빠르고 CSS 충실도가 훨씬 높다.
  3. https://dev.to/tinchox5/why-snapdom-beats-html2canvas-for-dom-to-image-capture-14ch — SnapDOM vs html2canvas 원리 비교. html2canvas가 "브라우저 렌더러를 JS로 재구현"하는 방식이라 미지원 CSS 목록이 긴 이유.
  4. https://npm-compare.com/dom-to-image,html-to-image,html2canvas — dom-to-image / html-to-image / html2canvas 비교.
  5. https://kube.io/blog/liquid-glass-css-svg/ — CSS + SVG만으로 굴절(refraction) 구현. feDisplacementMap 변위 맵 생성 방법.
  6. https://blog.logrocket.com/how-create-liquid-glass-effects-css-and-svg/ — backdrop-filter + SVG 필터 조합과 Safari/Firefox의 backdrop-filter: url() 미지원, 자동 블러 degrade.
  7. https://github.com/w3c/svgwg/issues/1142 — "Filter Effects: define interoperable backdrop displacement/refraction for 'liquid glass' UI". 이 폴백을 표준화하려는 진행 중 논의.
  8. https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer — three.js CSS3DRenderer. 진짜 DOM을 3D 배치하지만 WebGL 씬과 깊이·셰이더로 섞이지 않는다.

I. 해설 기사 (2차, 실전 노트로 유용)

  1. https://tympanus.net/codrops/2026/05/13/exploring-the-html-in-canvas-proposal/ — Codrops, Vittorio Retrivi (2026-05-13). React Three Fiber + HTMLTexture + CRT 셰이더 완성 코드, 전체 화면 후처리가 접근성을 훼손할 수 있다는 지적.
  2. https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/ — Frontend Masters, Amit Sheen (2026-04-21). 픽셀 조작 데모 10종, "크기/리사이즈가 유일하게 덜 익은 부분", requestPaint() 킥스타트 필수, <canvas>가 div처럼 동작하지 않는 문제.
  3. https://biggo.com/news/202508030712_Chrome_HTML-in-Canvas_Security_Concerns — 개발자 커뮤니티의 보안·핑거프린팅 우려 정리. 구 API명(drawElement, texElement2D, setHitTestRegions)이 쓰인 시점의 기사라 명칭 대조용으로 유용.
  4. https://www.equero.dev/posts/html-in-canvas-wicg-proposal-drawelementimage/ — Enrique Quero. drawElementImage가 foreignObject 해킹과 html2canvas를 사실상 대체할 것이라는 관점.
  5. https://imiel.dev/blog/html-in-canvas-wicg-drawelementimage-guide — Imiel Visser. "OffscreenCanvas 이후 최대의 Canvas API 추가"라는 관점의 가이드.
  6. https://maximov.by/html-in-canvas-guide.html — 실용 가이드. 플래그 활성화, 성능 주의사항.
  7. https://azukiazusa.dev/en/blog/html-in-canvas-api/ — 일본어권 해설(영문판). API 개요 정리.
  8. https://flaviocopes.com/canvas-ui/ — Flavio Copes. CanvasUI 소개.
  9. https://dev.to/manikant92/google-io-2026-quietly-ended-a-20-year-old-web-problem-meet-the-html-in-canvas-api-4h9d — Google I/O 2026 맥락에서의 소개.
  10. https://developer.chrome.com/docs/modern-web-guidance — Chrome의 AI 코딩 도구용 최신 웹 가이던스(HTML-in-Canvas 항목 포함). 저장소: https://github.com/GoogleChrome/guidance

J. 참고 (영상 원본)

  1. D:\workspace\designpaca\research\youtube\nomad-html.en.srt / nomad-html.ko.srt — 노마드코더 "이게 진짜 HTML이라고?" 자막 원문. 챕터: 0:00 인트로 / 2:30 왜 불가능했나 / 2:51 작동 원리 / 3:52 직접 만들기(반사 버튼) / 6:03 아직 쓸 수 없다.