live-panel-skill
무엇인가
시스템 구성 설명을 움직이는 아키텍처 다이어그램으로 바꾸는 작업을 규율한다. 정지 이미지가 아니라 고정 레이아웃 위로 패킷이 배선을 따라 흐르고, 로그가 스크롤되고, 카운터·게이지·상태가 뒤집히는 바와 순차 점등 트리거가 도는 화면을 만든다. 산출물은 H.264 mp4 또는 단일 HTML 라이브 페이지이며, 규칙은 SKILL.md 한 파일에 담긴다.
어떻게 동작하나
구조는 SKILL.md와 assets/template.html, references/config-schema.md, references/motion-grammar.md, scripts/render.py, scripts/check_frames.py로 나뉜다. 페이지는 window.seek(t)를 노출하고 모든 시각 요소를 t의 순수 함수로 계산한다. 무작위 선택은 고정 시드 정수 해시로 처리하며 Math.random·벽시계·CSS 애니메이션을 쓰지 않는다. 렌더러는 seek(i/fps)를 호출해 스크린샷을 찍는다. 설정에는 elements(text·box·line·path·glyph·rule·flow·tarrow·log)와 machines(counter·cycle·gauge·any_low·lane·triggers)를 적고, when/then 조건으로 기계 변수에 따라 색·강조를 바꾼다.
무엇과 다른가
손으로 쓴 CSS/JS 애니메이션이나 프롬프트만으로 화면을 만드는 방식과 다르다. 레이아웃·색·모션을 전부 JSON 설정으로 분리하고, 시간 함수 기반 결정론을 강제해 같은 설정이 바이트 단위로 동일한 프레임을 내도록 한다. 그 위에 check_frames.py가 약 120개 시점을 샘플링해 DOM에서 텍스트 넘침·겹침을 측정하고, --repeat으로 프레임을 다시 찍어 동일성을 증명한다. 정적 인포그래픽 도구와 달리 검증 루프가 스킬 안에 포함된다.
어떻게 쓰나
Claude Code라면 ~/.claude/skills/live-panel/에 폴더를 두어 로드시킨다. Python 3.8+ 표준 라이브러리, Chrome 또는 Chromium, ffmpeg만 있으면 되고 pip 패키지는 필요 없다. 예시 설정을 복사해 텍스트·수치·색·좌표를 고친 뒤 python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4 로 렌더하고, check_frames.py로 PNG를 확인한다. render.py는 --width --height --duration --fps --chrome --ffmpeg --html-out --keep-frames --audio none --crf를 받는다.
전제와 한계
전제와 한계가 분명하다. 좌표는 캔버스 절대 픽셀이라 설정 하나는 한 캔버스 전용이며, --width/--height는 재배치가 아니라 레터박스 축소만 한다. 다른 비율은 설정을 복사해 다시 배치해야 한다. 폰트 파일은 동봉되지 않아 설치된 JetBrains Mono, Noto CJK, 컬러 이모지 폰트로 대체되며, 폰트를 바꾸면 글리프 폭이 달라지므로 check_frames.py를 다시 돌려야 한다. 출력 영상은 무음 AAC 트랙을 포함한다.