다이어그램을 사전 렌더 PNG 대신 인터랙티브 컴포넌트로 전환 검토

[kmg733]

배경

현재 블로그의 순서도·흐름도 다이어그램은 Mermaid MCP로 사전 렌더링한 light/dark PNG 쌍을 <figure>로 삽입한다(CLAUDE.md의 "다이어그램은 반드시 사전 렌더링된 PNG" 규칙). 정적이라 애니메이션이나 상호작용이 없다.

특히 실시간 통신(폴링·롱폴링·SSE·WebSocket)처럼 시간에 따른 요청/응답 리듬이 핵심인 개념은 정적 시퀀스 다이어그램보다 움직이는 시각화가 이해에 훨씬 유리하다.

확인된 사실

본문에서 인터랙티브 JS는 이미 가능하다. 착각했던 부분을 정리하면:

방식	가능?
마크다운에 raw <script> / blockJS: false	❌ 보안상 금지 (유지)
등록된 React 클라이언트 컴포넌트 (components 맵)	✅ 이미 사용 중

• Term, CodeBlock이 이미 "use client" 컴포넌트로 MDX components={{ Term, pre: CodeBlock }}에 등록돼 본문에서 JS가 돈다.
• 블로그에 "use client" 컴포넌트가 20개 이상.
• output: "export" 정적 사이트여도 클라이언트 컴포넌트는 hydrate돼 정상 동작.

즉 blockJS 우회 없이, Term과 같은 방식으로 인터랙티브 다이어그램 컴포넌트를 등록하면 된다.

제안

• src/components/에 재사용 가능한 다이어그램 컴포넌트를 만들고 MDX 맵에 등록
  • 예: <RealtimeDemo type="polling|long-polling|sse|websocket" /> — 클라이언트↔서버 요청/응답을 실제 타이머로 애니메이션, 재생/일시정지, 라이트/다크 대응
• 순수 React + CSS로 구현 가능(외부 라이브러리는 선택)
• 기존 컴포넌트 테스트 관례대로 *.test.tsx 동반

결정해야 할 것

• 어떤 다이어그램을 컴포넌트로 옮길지 (애니메이션이 이득인 것만 vs 전면 전환)
• 구조 다이어그램(아키텍처 등)은 PNG 유지하는 혼용 여부
• 라이브러리 도입 여부 (framer-motion 등) vs 무의존
• 접근성(모션 축소 prefers-reduced-motion), 성능(번들·hydration) 기준
• CLAUDE.md·옵시디언 블로그 가이드의 "PNG만" 컨벤션 갱신

참고

• 첫 적용 후보: 1편 realtime-communication-polling-sse-websocket (폴링·롱폴링·SSE·WebSocket 4방식 데모)
• 별도 세션에서 깊게 설계 예정