build-interactive-graphics

Interactive Graphics Builder

시각적 임팩트보다 사용자 과업, 대체 경로와 실제 렌더링 비용을 먼저 고정한다. 일반 DOM·CSS로 동일한 결과를 더 단순하게 낼 수 있으면 고급 그래픽 런타임을 도입하지 않는다.

시작 절차

1. 저장소 지침, 현재 diff, framework·renderer·package manager·browser 범위·테스트 도구와 기존 그래픽 의존성을 확인한다.

2. 현재 화면과 산출물 형식을 관찰하고, 보지 못한 WebGL·canvas·Rive 동작을 성공했다고 단정하지 않는다.

3. 주 결과를 분류한다.

   • state-vector: 상태 기반 벡터 캐릭터·아이콘·설명 그래픽
   • dense-two-dimensional: 다수 object·particle·sprite가 있는 2D canvas
   • three-dimensional: camera·light·material·model·raycast가 필요한 3D
   • authored-sequence: designer-authored timeline을 런타임 상태와 연결하는 연출

4. 실패·비지원·reduced-motion에서도 유지할 정적·DOM 결과와 성공 기준을 먼저 적는다.

5. references/graphics-toolkit-selection.md로 도구를 선택하고, references/graphics-accessibility-and-fallback.md와 references/render-loop-performance-and-qa.md를 적용한다.

6. 지식·API·license·browser 지원이 바뀐 가능성이 있으면 현재 공식 자료와 설치된 버전을 확인한다.

구현 계약

사용자 과업과 완료 상태:
그래픽이 표현할 상태·입력·출력:
semantic DOM과 보조기술 경계:
키보드·터치·직접 입력 대체 경로:
정적·DOM·모션 감소 fallback:
초기 로드·asset·frame·memory 예산:
시작·일시정지·재개·정리 lifecycle:
WebGL·canvas·asset 실패 복구:
성공·반증 기준과 실측 환경:

도구 선택

• Rive는 디자이너가 제작한 벡터 상태 머신과 런타임 입출력이 실제 요구일 때 검토한다. 단순 loader·icon 모션은 CSS·SVG·Anime.js로 더 가볍게 해결하는지 먼저 비교한다.
• PixiJS는 다수를 반복 렌더링하는 2D scene에 사용한다. 일반 form·card·navigation을 canvas로 만들지 않는다.
• Three.js는 framework 비종속 3D 제어가 필요할 때, React Three Fiber는 React lifecycle·state·composition이 실제 이득일 때 선택한다. Drei는 R3F 선택 후 필요한 helper만 쓴다.
• Theatre.js는 수작업 timeline authoring과 런타임 state 연결이 필수일 때만 추가한다. 일반 transition 코드의 대체로 추가하지 않는다.
• 기존에 적합한 renderer·asset pipeline이 있으면 새 의존성을 추가하지 않는다. 도입 전 current API, license, bundle, SSR·hydration, accessibility, 제거 비용을 확인한다.

핵심 구현 규칙

• canvas·WebGL은 시각 표현을 담고, heading·label·button·form·오류·현재 상태와 핵심 제어는 semantic DOM으로 보존한다.
• hover·drag·orbit·pinch만으로 핵심 과업을 완료하게 하지 않고 button·keyboard·direct input 경로를 제공한다.
• prefers-reduced-motion에서 반복, parallax, camera travel과 큰 공간 이동을 줄이되 상태·내용·제어를 제거하지 않는다.
• 그래픽 초기화 전과 실패 후에도 정적 image·poster·DOM 요약과 핵심 action을 제공한다.
• viewport 밖, background tab과 route 이동 중에는 불필요한 render loop·timer·asset work를 멈춘다. 이벤트 기반 렌더로 충분하면 지속 loop를 두지 않는다.
• unmount·route change·asset 교체에서 animation frame, listener, observer, geometry, material, texture, renderer과 context를 소유자가 정리한다.
• DPR·particle count·shadow·post-processing·model LOD는 보편 상수로 단정하지 않고 대상 기기 실측과 적응 규칙으로 제한한다.