AI 튜토리얼

live-panel로 JSON에서 애니메이션 아키텍처 다이어그램 만들기

live-panel 설치, 캔버스와 테마 구성, JSON 기반 애니메이션 아키텍처 다이어그램 생성, MP4 또는 HTML 렌더링, 레이아웃 문제와 결정론적 재생을 위한 모든 프레임 검증 방법을 알아봅니다.

2026년 10월 4일약 10분 소요

live-panel의 기능

live-panel은 하나의 JSON 시스템 설명을 애니메이션 아키텍처 다이어그램으로 변환합니다. 레이아웃은 고정된 상태에서 패킷이 와이어를 따라 이동하고, 로그가 스크롤되며, 카운터가 변경되고, 막대가 상태를 전환하고, 사이드 트리거가 순서대로 켜집니다.

결과를 X 및 Xiaohongshu와 같은 플랫폼용 H.264 MP4로 내보내거나 독립 실행형 라이브 웹페이지로 유지할 수 있습니다. 저장소는 SKILL.md 파일을 통해 Claude Code 스타일의 스킬로도 작동합니다.

포함된 Codex 에이전트 예제는 @thedelost의 아키텍처 영상 클립에 등장하는 터미널 스타일의 디자인과 움직임을 재현합니다. 저장소에는 밝은 파스텔 스타일의 AI 아키텍처 예제와 Airbnb 시각화도 포함되어 있습니다.

주요 기능

JSON으로 정의하는 구성 기반 다이어그램.
터미널 다크 및 밝은 파스텔 시각 테마.
4:5, 3:4, 1:1 출력용 캔버스 프리셋.
애니메이션 패킷, 경로, 로그, 카운터, 게이지, 트리거 및 상태 변경.
벽시계 시간, Math.random 또는 CSS 애니메이션 없이 전적으로 시간에 기반한 결정적 렌더링.
MP4로 내보내거나 생성된 라이브 HTML 페이지 유지.
텍스트 넘침, 겹침 및 시크 일관성을 검사하는 자동 프레임 검사.

필수 구성 요소 설치

live-panel은 Python 표준 라이브러리를 사용하므로 pip 패키지가 필요하지 않습니다. 렌더링 전에 다음 도구를 설치하세요:

Python 3.8 이상.
Chrome 또는 Chromium.
ffmpeg.

저장소를 다운로드한 후 시스템 경로에서 python3, Chrome 또는 Chromium, ffmpeg를 사용할 수 있는지 확인하세요. 렌더링 스크립트는 기본적으로 경로에서 Chrome과 ffmpeg를 검색합니다.

포함된 예제 렌더링

codex

Codex 에이전트 구성으로 시작하세요. 다음 명령은 JSON 구성을 MP4 파일로 렌더링합니다:

python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4

예제 구성은 고정 위치와 애니메이션 기계 변수를 프로젝트에서 결합하는 방법도 보여줍니다. 바로 사용할 수 있는 다른 예제는 examples/agent-architecture/와 examples/airbnb/에서 확인할 수 있습니다.

비디오만 생성하지 않고 생성된 웹페이지를 유지하려면 --html-out을 추가하세요:

python3 scripts/render.py \
  --config examples/codex-agents/config.json \
  --out out.mp4 \
  --html-out page.html

호환되는 브라우저에서 생성된 HTML 파일을 열어 라이브 애니메이션을 확인하세요. --width, --height, --duration, --fps, --chrome, --ffmpeg, --keep-frames, --audio, --crf 등의 옵션으로 출력 설정을 제어할 수도 있습니다.

렌더링된 프레임 검증

다이어그램을 게시하기 전에 프레임 검사기를 실행하세요:

python3 scripts/check_frames.py \
  --config examples/codex-agents/config.json \
  --out-dir frames \
  --repeat

검사기는 약 120개의 시점에서 샘플을 추출하고, DOM에서 텍스트 넘침과 요소 겹침을 측정하며, 대표 PNG 파일을 저장합니다. --repeat를 사용하면 각 내보낸 프레임에서 다른 위치로 시크한 다음 다시 렌더링하여 결과가 동일한지 확인합니다. 문제가 감지되면 명령은 상태 코드 1로 종료됩니다.

사용자 지정 다이어그램 만들기

에이전트

예제 구성 파일 중 하나를 복사합니다.
텍스트, 숫자, 색상, 위치 및 애니메이션 설정을 편집합니다.
복사한 구성을 MP4 또는 HTML로 렌더링합니다.
check_frames.py를 실행하고 생성된 PNG를 확인합니다.
검사기에서 문제가 없다고 보고할 때까지 레이아웃을 조정하고 반복합니다.

대부분의 사용자 지정은 구성 파일에서 이루어집니다. 저장소 문서에 따르면 일반적인 다이어그램 제작에서는 assets/template.html을 수정할 필요가 없습니다.

캔버스와 테마 구성

구성에서 캔버스 프리셋, 애니메이션 길이, 프레임 속도 및 선택적 프리롤을 지정할 수 있습니다:

{
  "canvas": {
    "preset": "3:4",
    "duration": 28,
    "fps": 30,
    "preroll": 0
  },
  "theme": {
    "preset": "light-pastel",
    "colors": {
      "pk": "#f0575f"
    }
  }
}

사용 가능한 캔버스 프리셋은 1200×1500픽셀의 4:5, 1080×1440픽셀의 3:4, 1080×1080픽셀의 1:1입니다. 터미널 다크 프리셋은 어두운 창, 고정 폭 글꼴 및 분할된 텍스트 모드 상자를 사용합니다. 밝은 파스텔 프리셋은 흰색 배경, 둥근 파스텔 상자, 둥근 SVG 화살표 및 활성 항목의 은은한 빛 효과를 사용합니다.

캔버스 위치는 절대 픽셀을 사용합니다. 따라서 구성은 하나의 화면 비율에 맞춰 작성됩니다. render.py --width와 --height로 레터박스를 적용해 출력 크기를 조정할 수 있지만, 일반적으로 다른 비율을 사용하려면 구성을 복사하고 상자 위치를 다시 지정해야 합니다.

요소와 움직임 설명

구성 스키마는 여러 시각적 요소 유형을 지원합니다:

라벨과 독립적인 텍스트에는 text를 사용합니다.
채우기, 테두리, 모서리 반경, 점선 스타일, 줄별 항목, 막대, 텍스트 실행을 포함한 컨테이너에는 box를 사용합니다.
와이어와 연결에는 line 및 path를 사용합니다.
기호와 구분선에는 glyph 및 rule을 사용합니다.
폴리라인을 따라 이동하는 패킷에는 flow를 사용합니다.
트리거 화살표에는 tarrow를 사용합니다.
스크롤되거나 변경되는 로그 콘텐츠에는 log를 사용합니다.

변경되는 값은 machines 아래에 정의합니다. 사용 가능한 머신 유형에는 counter, cycle, gauge, any_low, lane, triggers가 있습니다. 개별 요소에 직접 시간 로직을 추가하는 대신 이러한 변수를 사용해 시각적 상태를 구동합니다.

airbnb

박스, 경로, 흐름, 선, 실행에는 when 및 then 조건을 사용할 수 있습니다. 예를 들어 {"var":"seq.i","in":[0,1,2]}와 같은 조건은 머신 변수가 나열된 값 중 하나와 일치할 때 항목을 강조 표시할 수 있습니다. 여러 조건은 AND 표현식으로 처리됩니다.

결정론적 재생 이해하기

생성된 페이지는 window.seek(t)를 노출합니다. 모든 시각 요소는 시간 값 t의 순수 함수이며, 의사 난수 선택에는 고정 시드 정수 해시를 사용합니다. 일반적인 브라우저 모드에서는 requestAnimationFrame이 애니메이션을 구동합니다. 렌더링 중 내보내기 도구는 seek(i/fps)를 사용해 각 프레임 시간으로 이동한 다음 결과를 캡처합니다.

이 설계 덕분에 내보낸 프레임을 반복해서 동일하게 생성할 수 있습니다. 또한 글꼴, 위치 또는 애니메이션 조건을 변경한 후 프레임 검사기를 사용해야 하는 이유이기도 합니다.

타이포그래피와 레이아웃 개선하기

글꼴 파일은 번들에 포함되지 않습니다. 터미널 테마는 JetBrains Mono, IBM Plex Mono, DejaVu Sans Mono, Noto Sans Mono CJK SC, 일반 고정폭 글꼴 순으로 대체 글꼴을 사용합니다. 밝은 파스텔 테마는 Noto Sans CJK SC, PingFang SC, Microsoft YaHei, Helvetica 또는 Arial을 사용하며, 큰 제목에는 Noto Serif CJK SC를 사용합니다.

예시와 더 가깝게 맞추려면 JetBrains Mono와 Noto CJK 글꼴을 설치하세요. 이모지 아이콘에는 Noto Color Emoji와 같은 컬러 이모지 글꼴도 필요합니다. 글꼴마다 글리프 너비가 다르므로 설치된 글꼴을 변경할 때마다 check_frames.py를 다시 실행하세요.

유용한 렌더링 팁

의도한 시각적 스타일에 가장 가까운 예시를 시작점으로 사용하세요.
선택한 캔버스 비율에 맞춰 좌표를 일관되게 유지하세요.
동영상 제작에 사용된 정확한 이미지를 확인해야 할 때는 --keep-frames를 사용하세요.
오디오 트랙을 원하지 않을 때는 --audio none을 사용하세요.
인코딩된 동영상 품질을 조절해야 할 때는 --crf를 조정하세요.
레이아웃, 글꼴 또는 설정을 크게 변경한 후에는 검사기를 실행하세요.
Claude Code의 경우 저장소를 ~/.claude/skills/live-panel/ 또는 에이전트의 스킬 로더가 사용하는 디렉터리에 배치하세요.

크레딧 및 라이선스

코드는 MIT 라이선스로 공개됩니다. Codex 에이전트 예시에서 재현한 시각 디자인은 @thedelost의 작품이며, 밝은 AI 아키텍처 인포그래픽은 원작자인 샤오홍슈 크리에이터 林纾의 작품입니다. Airbnb 수치는 Airbnb 경영진이 Latent.Space 인터뷰에서 밝힌 내용을 바탕으로 하며, 애니메이션 카운터는 설명을 위한 예시입니다.

결론

live-panel은 구조화된 시스템 설명을 세련되고 반복 가능한 모션 그래픽으로 변환하는 실용적인 워크플로를 제공합니다. 예시를 복사하고 JSON을 편집한 뒤 캔버스와 테마를 선택하고 MP4 또는 라이브 페이지를 렌더링하세요. 그런 다음 결정론적 프레임 검사기로 게시 전에 레이아웃 문제를 찾아낼 수 있습니다.