co-deck: AI 프레젠테이션 실습

co-deck는 AI 에이전트 팀이 프레젠테이션(강의 자료, 발표 슬라이드)을 제작하는 시스템입니다. 이 장에서는 co-deck의 11-Stage 파이프라인을 이해하고, 실제로 미니 발표자료를 만들어봅니다.

co-deck란

정의

co-deck는 AI 에이전트 팀이 프레젠테이션을 제작하는 시스템입니다. 5장에서 살펴본 ai-workspace-standards의 variant 중 하나로, 다중 AI 에이전트가 협력하여 강의 자료, 회의 발표, 강연 슬라이드 등 고품질 프레젠테이션을 자동으로 생성합니다.

위치: ai-workspace-standards 안의 templates/co-deck/ — bun scripts/new-project.ts "<이름>" --variant co-deck로 나만의 사본을 스캐폴딩할 수 있습니다.

어떤 산출물을 만드는가?

co-deck는 두 가지 형태의 산출물을 생성합니다.

• 단일 파일 HTML 슬라이드 데크 — 모든 슬라이드, 이미지, 스타일이 하나의 HTML 파일에 포함된 자족형 웹 프레젠테이션입니다. 브라우저에서 바로 열어 발표할 수 있으며, 반응형과 인터랙티브 기능을 지원합니다.
• PDF — 인쇄용 및 배포용 PDF 파일입니다. 레이아웃, 폰트, 색상이 보존되어 공유와 보관에 적합합니다.

co-consult와의 차이

6장에서 배운 co-consult가 전략 분석과 보고서 작성에 특화되어 있다면, co-deck는 프레젠테이션 슬라이드 제작에 특화되어 있습니다. 두 시스템 모두 ai-workspace-standards를 기반으로 하지만, 목적과 에이전트 구성이 다릅니다.

시스템 아키텍처

에이전트 구성

co-deck는 PM 에이전트 1명과 10개 전문 에이전트로 구성됩니다. PM이 중심에서 전체 프로젝트를 조율하고, 전문 에이전트들이 각자의 영역에서 작업을 수행합니다.

전문 에이전트 역할

각 전문 에이전트의 역할을 요약하면 다음과 같습니다.

11-Stage 파이프라인

co-deck는 11개의 Stage로 구성된 파이프라인을 따라 프레젠테이션을 제작합니다. 각 Stage에서 특정 에이전트가 담당하며, 정해진 산출물을 출력합니다. Stage 사이에는 Gate라는 승인 지점이 있어 사용자가 중간에 내용을 검토하고 방향을 수정할 수 있습니다.

Stage별 핵심 산출물

Theme와 Style

co-deck는 Theme와 Style이라는 두 가지 개념으로 프레젠테이션의 외관을 제어합니다. 이 둘은 독립적으로 선택할 수 있지만, 서로 호환되는 조합이 정해져 있습니다.

Theme — HTML 렌더링 구조

Theme은 슬라이드의 HTML 렌더링 구조를 결정합니다. 레이아웃 방식, 네비게이션 구조, 슬라이드 전환 효과, TOC(목차) 표시 방식 등이 Theme에 따라 다릅니다.

사용 가능한 Theme은 다음과 같습니다.

Style — CSS 변수 셋

Style은 슬라이드의 CSS 변수 셋을 결정합니다. 색상 팔레트, 폰트, 여백, 배경색 등 시각적 스타일이 Style에 따라 다릅니다.

사용 가능한 Style은 다음과 같습니다.

Theme x Style 호환성

모든 Theme과 Style이 호환되는 것은 아닙니다. THEMES.md에 정의된 호환성 매트릭스를 따라야 합니다. PM은 Stage 0에서 호환성을 자동으로 확인합니다.

Gate 승인

co-deck의 파이프라인에는 Gate라는 승인 지점이 있습니다. Gate는 사용자가 중간에 산출물을 검토하고 방향을 수정할 수 있는 "체크포인트"입니다. 모든 Gate를 통과해야 다음 Stage로 진행합니다.

필수 Gate

다음 두 Gate는 필수이며, 사용자의 명시적인 승인이 필요합니다.

선택적 Gate

다음 Gate는 선택적이며, PM이 자동으로 진행하거나 리뷰 후 진행합니다.

Gate 통과 조건

• Gate 2: 사용자가 슬라이드 내용(구조, 각 슬라이드 텍스트, 이미지/다이어그램 계획)을 확인하고 명시적으로 "승인"합니다. 수정 요청이 있으면 해당 부분을 수정한 후 다시 승인을 받습니다.
• Gate 5: 사용자가 샘플 PDF의 레이아웃(폰트, 여백, 색상, 배치)을 확인하고 명시적으로 "승인"합니다. 레이아웃 문제가 있으면 수정 후 다시 승인을 받습니다.
• Gate 1.5: Trust Score가 70% 이상이면 자동 통과. 70% 미만이면 프로젝트가 중단되고, PM이 사용자에게 알립니다.

PM에게 말하는 법

co-deck를 사용하려면 Claude Desktop App에서 co-deck 프로젝트를 열고 PM 에이전트에게 요청을 보내야 합니다. 효과적인 요청은 프레젠테이션의 품질을 크게 높입니다.

요청의 5가지 핵심 요소

좋은 요청에는 다음 다섯 가지가 포함되어 있습니다.

요청 예시

좋은 요청 vs 아쉬운 요청

실습: 미니 발표자료 만들기

이 실습에서는 co-deck를 사용하여 5장짜리 미니 발표자료를 만들어봅니다. 주제는 "머신러닝의 5가지 핵심 개념"으로, 초보자를 대상으로 한 간단한 발표자료입니다.

실습 목표

• co-deck 저장소를 클론하고 프로젝트를 설정합니다
• Claude Desktop App에서 PM 에이전트에게 요청을 보냅니다
• 11-Stage 파이프라인의 진행 과정을 관찰합니다
• Gate 2와 Gate 5 승인 과정을 경험합니다
• 최종 산출물(HTML과 PDF)을 확인합니다

사전 준비

3장에서 설치한 도구가 정상 동작하는지 확인하세요.

실습 단계

산출물 확인

co-deck 프로젝트가 완료되면 여러 가지 산출물이 생성됩니다. 이 섹션에서는 각 산출물의 위치와 확인 방법을 설명합니다.

산출물 위치

모든 산출물은 presentations/<project>/ 디렉토리에 저장됩니다. 프로젝트 루트에서 다음 경로로 접근할 수 있습니다.

주요 산출물

HTML 슬라이드 데크 특징

lecture_v1.html은 co-deck의 핵심 산출물입니다. 다음과 같은 특징이 있습니다.

• 단일 파일: 모든 슬라이드, 이미지(인코딩), CSS, JavaScript가 하나의 HTML 파일에 포함되어 있습니다. 파일 하나만 전송하면 어디서든 열어볼 수 있습니다.
• 인터랙티브: 슬라이드 전환, 키보드 내비게이션, TOC(목차) 서랍, 발표자 모드, TTS(텍스트 음성 변환) 등의 기능을 지원합니다.
• 반응형: 화면 크기에 따라 자동으로 레이아웃이 조정됩니다. 데스크탑과 모바일 모두에서 사용할 수 있습니다.
• 오프라인 사용: 웹 연결 없이도 브라우저에서 바로 열어 발표할 수 있습니다.

PDF 특징

<project>.pdf는 인쇄용 산출물입니다.

• 인쇄용: 레이아웃, 폰트, 색상이 보존되어 A4 또는 Letter 용지에 인쇄하기 적합합니다.
• 배포용: 이메일이나 문서 공유 플랫폼을 통해 손쉽게 공유할 수 있습니다.
• 보관용: 장기 보관이 필요한 경우 PDF 형식이 가장 안정적입니다.

산출물 열어보는 방법

파일 구조 요약

co-deck/
├── agents/                        # 에이전트 정의 파일
│   ├── pm.md
│   ├── research.md
│   ├── storyline.md
│   ├── design.md
│   ├── html-build.md
│   ├── pdf-export.md
│   └── ...
├── docs/html-themes/               # Theme과 Style 레지스트리
│   ├── THEMES.md
│   ├── themes/                    # pitch, pitch-enhanced, outline, vertical, zen, ...
│   └── styles/                    # classic, minimal, premium-dark, academic, ...
├── presentations/
│   └── <project-name>/
│       ├── lecture-profile.md     # Stage 0: 프로젝트 설정
│       ├── project_state.json     # 프로젝트 진행 상태
│       ├── research_notes.md      # Stage 1: 리서치 결과
│       ├── storyline.md           # Stage 2-3: 슬라이드 구조
│       ├── slide_deck.md          # Stage 2-3: 슬라이드별 내용
│       ├── design_spec.md         # Stage 4: 디자인 스펙
│       ├── assets/
│       │   ├── images/            # Stage 3.5: 다운로드된 이미지
│       │   └── diagrams/          # Stage 3.5: 생성된 SVG 다이어그램
│       ├── lecture_v1.html        # Stage 5-8: HTML 슬라이드 데크
│       └── <project>.pdf       # Stage 11: 최종 PDF
├── scripts/co-deck/               # 자동화 스크립트
└── memory/                        # 세션 기록