Windsurf와 Vibe Coding으로 AI 프레젠테이션 만드는 방법

기술에 늘 관심이 많은 저는 최근 FlowHunt.io AI 워크플로우 6시간 트레이닝 세션을 위한 전문적인 파워포인트 프레젠테이션을 만드는 프로젝트에 도전했습니다. 이 경험이 특별했던 이유는 Windsurf와 그 LLM인 Claude 4 Sonnet을 활용해 pptxgenjs 라이브러리로 24슬라이드의 프레젠테이션을 단 하나의 프롬프트와 잘 짜인 아웃라인만으로 만들어냈기 때문입니다. 그 과정을 지금부터 공유합니다.

목표: 실습 중심의 시각적 트레이닝 프레젠테이션

저의 목표는 FlowHunt.io라는 AI 워크플로우 빌딩 플랫폼에 대해 6시간 동안 진행되는 워크숍용으로, 몰입도 높고 상호작용적인 프레젠테이션을 만드는 것이었습니다. 프레젠테이션의 조건은 다음과 같았습니다.

• 실습·시각적 중심, 간결한 설명 뒤 실전 데모 진행
• 금융, HR, 컴플라이언스, 프로젝트관리 등 다양한 실전 사례 포함
• 30분마다 과제나 퀴즈 등 인터랙티브 요소로 학습 효과 강화
• 기본 워크플로우부터 고급 모듈형 프로세스 컴포넌트(MPC)까지 두 세션으로 나누어 체계적으로 진행

명확성을 위해 먼저 Claude 4 Sonnet으로 프레젠테이션의 세부 아웃라인을 생성했고, 두 번의 3시간 세션으로 주제와 시간을 구분해 구성했습니다. 이 아웃라인이 프로젝트의 뼈대가 되어 슬라이드 콘텐츠와 구조를 이끌었습니다.

도구: pptxgenjs와 Claude 4 Sonnet이 적용된 Windsurf

pptxgenjs 라이브러리는 파워포인트 프레젠테이션을 코드로 자동 생성할 수 있는 강력한 자바스크립트 도구라 선택했습니다. 텍스트, 이미지, 포맷을 코드로 손쉽게 추가할 수 있어 자동화에 이상적이었습니다. 이를 실현하기 위해 Claude 4 Sonnet이 탑재된 Windsurf를 활용해 코드 작성과 프레젠테이션 생성을 진행했습니다.

먼저 아래 명령어로 라이브러리를 설치했습니다.

npm install pptxgenjs

몇 초 만에 라이브러리와 의존성 설치가 완료되어 프레젠테이션 제작 준비가 끝났습니다.

프롬프트: 단일 지시, 종합적인 결과물

라이브러리를 설치한 후 Windsurf를 통해 Claude 4 Sonnet에 단일이면서도 상세한 프롬프트를 작성했습니다. 주요 내용은 다음과 같았습니다.

• pptxgenjs 설치 명령어
• 두 세션(세션1, 세션2)으로 나눈 6시간 트레이닝 전체 아웃라인
• 실습 중심, 시각적 요소, 실전 사례 강조 등 프레젠테이션의 구체적 기준
• 각 모듈별로 소개, 라이브 데모, 실전 사례, 최종 챌린지 슬라이드 생성 지침

아래는 프롬프트 구조의 단순화 예시입니다.

npm i pptxgenjs 설치. pptxgenjs 라이브러리로 6시간 FlowHunt.io AI 워크플로우 트레이닝용 프레젠테이션 생성. 아웃라인은 다음과 같음: [상세 세션 분류]. 프레젠테이션은 실습형, 시각적, 실전 사례(금융, HR, 컴플라이언스) 포함, 30분마다 인터랙티브 과제 포함. 각 모듈별로 Welcome, FlowHunt 소개, 워크플로우 캔버스, 라이브 데모, 도구 연결, 반복, 실전 사례, MPC, 로직, API, 모니터링, 컴플라이언스, 배포, 최종 챌린지, Q&A 슬라이드 생성.

이 프롬프트로 Claude 4 Sonnet은 pptxgenjs를 활용해 24슬라이드 프레젠테이션을 만드는 자바스크립트 파일(flowhunt-training.js)을 완성해줬습니다. 슬라이드 레이아웃부터 FlowHunt 전용 컬러 스킴 기반 브랜딩까지 자동 처리되었습니다.

과정: 코드에서 슬라이드로

생성된 스크립트 실행 방법은 간단했습니다. 다음 명령어를 입력했습니다.

node flowhunt-training.js

실행 시 “70AD4720 is not a valid scheme color or hex RGB! ‘000000’ used instead"와 같은 컬러 코드 경고가 몇 번 떴지만, 결과물에는 영향이 없었고 라이브러리가 자동으로 검정색으로 대체해주었습니다. 몇 초 만에 FlowHunt-AI-Workflows-Training.pptx 파일이 생성되어, 24장의 전문적으로 포맷된 슬라이드를 확인할 수 있었습니다.

자동화의 정수가 담긴 프레젠테이션이 완성되었습니다.

세션 1 (10슬라이드): FlowHunt.io 기본, 워크플로우 빌드 라이브 데모, 도구 연결(CSV, 구글시트), 반복 팁, 금융(예산 검증) 및 HR(자동 온보딩 봇) 실전 사례, LEGO 비유로 MPC 소개 등

세션 2 (8슬라이드): 고급 주제(고급 MPC 제작, 조건부 로직, API 연동(구글검색, CRM, 슬랙), 거버넌스, 컴플라이언스 봇, 배포), 마지막 미니 해커톤 스타일 챌린지 슬라이드 등

추가 슬라이드: 환영, 아젠다, 휴식, Q&A, 감사 등 전체적인 흐름을 매끄럽게 하는 슬라이드도 포함

슬라이드는 브랜딩 일관성, 명확한 제목, GIF·비디오용 플레이스홀더 등 시각적 요소를 갖췄고, 단계별 데모 안내, 그룹 챌린지 등 인터랙티브 요소도 자연스럽게 녹아들었습니다.

결과: 즉시 활용 가능한 프레젠테이션

최종 결과물은 239KB의 파워포인트 파일로, 호환되는 모든 소프트웨어에서 바로 열 수 있었습니다. 프레젠테이션과 함께 Claude 4 Sonnet은 프로젝트 안내, 사용법, 하이라이트를 담은 README.md 파일도 자동 생성해주었습니다. 제 기준에 완벽하게 부합하는, 전문적이면서 상호작용적이고 시각적으로 뛰어난 프레젠테이션이 만들어졌습니다.

소감: AI 기반 개발의 힘

이번 경험은 Windsurf와 Claude 4 Sonnet 같은 AI 도구의 놀라운 가능성을 실감하게 해주었습니다. 단일 프롬프트만으로 고수준 아웃라인이 완성된 24슬라이드 프레젠테이션, 포맷·브랜딩·인터랙티브 요소까지 자동 제작되었습니다. pptxgenjs 라이브러리가 강력했고, Claude가 요구사항을 파악해 기능적 코드를 생성한 점도 인상적이었습니다.

가장 놀라웠던 점은 효율성이었습니다. 직접 코드를 짠다면 24슬라이드의 포맷을 일관되게 맞추는 데만 몇 시간, 길게는 며칠이 걸렸을 텐데, Claude는 몇 초 만에 모듈식이면서도 쉽게 커스터마이즈 가능한 스크립트를 만들어줬습니다. 컬러 코드 경고는 스크립트의 hex 값만 수정하면 해결될 정도의 작은 문제였습니다.

다음 단계

이번 결과에 매우 만족하며, FlowHunt.io 트레이닝 세션에서 곧바로 활용할 계획입니다. 앞으로는

• 슬라이드별로 맞춤 이미지나 GIF 추가(스크립트에 플레이스홀더 포함)
• 컬러 스킴 수정으로 경고 제거
• 인터랙티브 챌린지의 상세 안내 강화

등을 더해보고자 합니다.

이번 프로젝트를 계기로 AI 기반 자동화 콘텐츠 제작에 더 도전해보고 싶어졌습니다. 빠르고 효율적으로 프레젠테이션을 만들고 싶다면, pptxgenjs와 Claude 4 Sonnet, 그리고 Windsurf의 조합을 강력 추천합니다. 정말 게임 체인저입니다!