아래는 GitFrame CLI로 실제 Go 프로젝트들에서 완전 자동으로 생성된 3분 분량의 데모 영상들입니다.

모든 영상은 1440×900 해상도, 30fps, 한글 자막 포함 / 별도의 화면 캡처 프로그램 없이 GitFrame 단 하나의 명령어로 생성되었습니다.

GitFrame은 웹 프로젝트를 자동으로 실행하고, 정의된 브라우저 시나리오(YAML)에 따라 웹 앱의 동작을 테스트하고 검증하며, 그 과정을 데모 영상(MP4), 자막(SRT), 썸네일, 실행 리포트 및 Playwright Trace 등으로 자동 패키징해 주는 로컬 개발자용 CLI 도구입니다.

• ✅ 프로젝트 자동 감지 — Node.js, Python, Go, Java, Docker Compose 자동 분류 및 빌드/실행 명령 추천
• ✅ 격리된 실행 환경 — 임시 워크스페이스에서 독립적으로 빌드·실행하여 원본 프로젝트에 영향 없음
• ✅ Playwright 자동화 — 고해상도 헤드리스 브라우저로 시나리오 검증 및 화면 녹화 동시 수행
• ✅ FFmpeg 비디오 렌더링 — 인트로 카드, 브라우저 녹화본, 아웃트로 카드를 자동 병합하여 MP4 최종 출력
• ✅ 한글 자막 지원 — 각 시나리오 단계의 caption 필드가 자동으로 SRT 자막으로 컴파일
• ✅ 진단 아티팩트 패키징 — HTML 리포트, Playwright Trace, 스크린샷, 결과 JSON을 일괄 생성

npm install

npm run install-browsers

# Playwright 필수 시스템 패키지 설치
npx playwright install-deps

# 한글 폰트 설치 (한글이 깨지지 않도록)
sudo apt-get install -y fonts-nanum fonts-noto-color-emoji

npm run build

cd /path/to/my-web-project
npx gitframe init

.gitframe/gitframe.yaml과 .gitframe/demo.yaml 샘플 파일이 자동 생성됩니다.

project:
  language: "go"                        # node | python | go | java | compose | static
  install: "go mod download"
  build: "go build -o server ./cmd/app"
  start: "./server"
  port: 8080
scenarioFile: ".gitframe/demo.yaml"
outputDir: "output"
video:
  width: 1440
  height: 900
  fps: 30
intro:
  title: "My Web App"
  subtitle: "GitFrame Demo"
  duration: 3
outro:
  title: "Thank You"
  subtitle: "Generated by GitFrame"
  duration: 2
captions: true

start_url: "http://localhost:8080"
steps:
  - id: step-1
    action: goto
    url: "/dashboard"
    caption: "메인 대시보드로 이동합니다"

  - id: step-2
    action: pause
    milliseconds: 5000

  - id: step-3
    action: click
    selector:
      role: "button"
      name: "데이터 불러오기"
    caption: "데이터 로드 버튼을 클릭합니다"

  - id: final
    action: screenshot
    name: "finished"
    caption: "시나리오가 완료되었습니다"

# WSL/리눅스 환경에서 라이브러리 경로 지정 후 실행
LD_LIBRARY_PATH=./lib/usr/lib/x86_64-linux-gnu node ./dist/cli/index.js render --output output

# macOS 등 일반 환경에서
npx gitframe render --output output

output/
├── *.mp4            ← 최종 데모 영상
├── *-thumbnail.png  ← 대표 썸네일
├── subtitles.srt    ← 한글 자막
├── report.html      ← HTML 검증 리포트
├── result.json      ← 결과 JSON
└── trace.zip        ← Playwright Trace

gitframe
├── init      ← 프로젝트에 GitFrame 설정 파일 초기화
├── inspect   ← 프로젝트 언어/포트 자동 감지 및 추천 명령어 출력
├── run       ← 로컬 웹 서버 백그라운드 구동 + 헬스체크 대기
├── record    ← 헤디드 브라우저로 수동 조작을 녹화하여 YAML 시나리오로 변환
├── test      ← 시나리오 순수 검증 (영상 렌더링 없음, 빠른 반복 개발용)
├── render    ← 격리 빌드 → 플레이백 녹화 → FFmpeg 비디오 렌더링 풀파이프라인
├── create    ← 원격 Git 저장소 Clone 후 전 과정 원스톱 처리
├── clean     ← /tmp의 gitframe-* 격리 작업공간 일괄 청소
└── doctor    ← 의존성 도구(Git/Node/Playwright/FFmpeg/Docker) 설치 상태 진단

[프로젝트 복사] → [의존성 설치] → [빌드] → [서버 구동] → [헬스체크]
      ↓
[Playwright 시나리오 플레이백] → [화면 녹화(WebM)] → [Playwright Trace 저장]
      ↓
[FFmpeg: WebM → MP4 트랜스코딩] → [인트로/아웃트로 생성] → [자막 컴파일]
      ↓
[최종 MP4 병합] → [썸네일 추출] → [HTML 리포트 생성] → [임시공간 청소]

자세한 시나리오 작성 문법은 아래를 참고하세요.

• 예제 파일: examples/demo-scenario.yaml
• 상세 사용 가이드: docs/gitframe_guide.md
• 🍎 macOS 설치 가이드: docs/setup-macos.md
• 🤖 AI 에이전트 활용 가이드: docs/ai-agent-guide.md

testId > role + name > label > placeholder > text > CSS 순서로 지능적으로 요소를 탐색합니다.

This project is licensed under the Apache License 2.0. See the LICENSE file for details.