GitDrama: 혼란스러운 Git 커밋과 PR 논쟁을 애니메이션 코믹 쇼로 변환하기

이 글은 MLH x DEV 라이팅 챌린지 출품작입니다.

매 스프린트마다 개발자들은 수천 줄의 diff, 암호 같은 커밋 로그, 그리고 수동 공격적인 리뷰 댓글들을 마주합니다. 방대한 풀 리퀘스트(PR)를 검토하는 것은 정신적으로 지치는 일입니다.

이번 MLH 해커톤 동안 저희 팀은 하나의 질문을 던졌습니다. 만약 모든 극적인 Git 충돌, 자정의 핫픽스(hotfix), 그리고 아키텍처 논쟁이 자동으로 역동적인 코믹 드라마 쇼로 각색된다면 어떨까?

GitDrama를 소개합니다. 이 오픈 소스 도구이자 CI/CD 워크플로우는 GitHub PR diff와 토론 스레드를 입력받아 기술적 긴장감을 3막 구성의 내러티브 스크립트로 변환하고, 코드를 통해 직접 30초에서 45초 분량의 애니메이션 코믹 쇼를 렌더링합니다.

1. 제가 구축한 것: GitDrama는 소프트웨어 엔지니어링 워크플로우와 절차적 비디오 합성(procedural video synthesis)을 연결합니다. 정적인 스크린샷 생성기 대신, 소프트웨어 충돌을 에피소드 형식의 코믹 스토리보드로 동적으로 매핑합니다.

핵심 기능:

• 자동 충돌 및 감성 분석 (Automated Conflict & Sentiment Analysis): REST/GraphQL API를 통해 GitHub에 연결하여 AST diff, 변경된 파일, 토론 스레드를 파싱합니다.
• 드라마 구조화 스크립트 엔진 (Dramaturgical Script Engine): PR 논쟁(예: 탭 vs. 공백, 레이스 컨디션, 깨지는 API 변경)을 분석하고, 원형 캐릭터들(지나치게 낙관적인 주니어 개발자, 냉소적인 아키텍트, 패닉에 빠진 PM)이 등장하는 구조화된 코믹 스토리보드를 출력합니다.
• 절차적 모션 코믹 렌더러 (Procedural Motion Comic Renderer): Remotion(React 기반 비디오 프레임워크)을 활용하여 동적인 카메라 줌, 만화 스타일의 스피드라인, 튀는 말풍선, 레트로 사운드 큐 등을 코드로 렌더링합니다.
• GitHub Actions 통합: 풀 리퀘스트가 닫히거나 댓글 트리거를 통해 온디맨드(on-demand)로 실행되어, PR 타임라인에 직접 첨부되는 경량 MP4/GIF 요약본을 생성합니다.

1. 사용된 도구 및 기술
   프론트엔드 및 렌더링 엔진: React 19, TypeScript, Tailwind CSS, Remotion
   백엔드 및 워크플로우: Node.js, Express, @octokit/rest (GitHub REST/GraphQL API), GitHub Actions SDK
   AI 및 구조화된 출력: OpenAI API / Anthropic API와 엄격한 Zod 스키마 강제 적용
   오디오 및 시각 효과: Web Audio API, Canvas API

2. 작동 방식
   아키텍처 개요:
   GitHub PR/커밋: PR 이벤트 발생 시 웹훅(Webhook) 또는 액션(Action)이 트리거됩니다.
   Octokit API 및 Diff 파서: 수정된 코드 라인, 커밋 메시지, 리뷰 댓글 스레드를 추출합니다.
   구조화된 프롬프트 파이프라인 (Zod 스키마): 기술적 충돌을 출연진, 패널, 카메라 지시 사항, 표정 등을 포함하는 결정론적인 JSON 스토리보드로 변환합니다.
   Remotion 컴포지션 엔진: React 상태와 프레임 보간(frame interpolation)을 사용하여 애니메이션 속도선, 말풍선 스프링 효과, 카메라 흔들림을 렌더링합니다.
   출력 전달: 고화질 MP4 또는 최적화된 GIF로 컴파일되어 PR 댓글에 다시 게시됩니다.
   핵심 구현: 스토리보드 스키마
   [

   
   ](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgmuu317sccanbe6yn5le.png

3. 제가 배운 점 (What I Learned): 결정론적 비디오 대 비결정론적 AI: 초기에는 자유 형식의 LLM 프롬프트가 예상치 못한 문장 길이 때문에 저희의 비디오 타임라인을 망가뜨렸습니다. Zod 스키마 유효성 검사(Zod Schema Validation)를 구조화된 함수 호출(structured function calling)과 결합하여 적용함으로써 렌더링 파이프라인을 100% 탄력적으로 만들 수 있었습니다. 비디오를 코드로 (Video = f(frame)): Remotion은 저희의 비디오 처리 관점을 근본적으로 변화시켰습니다. CSS 전환, 카메라 물리 효과, 캔버스 애니메이션 등을 엄격하게 수학적 프레임 함수를 통해 제어함으로써 복잡한 타임라인 동기화 버그를 제거할 수 있었습니다. 엔지니어링 유머를 위한 프롬프트 엔지니어링: AI에게 기술 전문 용어와 재치 있는 코믹 타이밍의 균형을 맞추도록 가르치는 것은 엄격한 시스템 프롬프트 가드레일(system prompt guardrails)이 필요합니다. 실제 diff 메트릭을 강조하는 것이 이 드라마를 공감할 수 있게 만들었습니다.

4. 다음 계획 (What's Next?): 사용자 지정 픽셀 아트 아바타: 엔지니어링 팀이 GitHub 기여자들을 맞춤형 8비트 아바타에 매핑할 수 있도록 하는 기능입니다. 오디오 합성: Web Speech API를 만화 피치 필터와 통합하여 사실적인 목소리 연기를 구현합니다. Slack 및 Discord 봇: 오전 스탠드업 코믹 요약본을 팀 채널로 직접 스트리밍합니다.

5. 커뮤니티 질문 (Community Question): 당신이 지금까지 다뤄본 가장 혼란스러운 풀 리퀘스트(pull request) 또는 병합 충돌(merge conflict)은 무엇인가요? 아래 댓글에 여러분의 최고의 전쟁 이야기를 남겨주세요!