TL;DR

  • LLM(대형 언어 모델)과 Slidev, Rough.js를 조합하면 코드 기반 발표 자료에 애니메이션과 인터랙티브 요소를 더하고, 원하는 시각적 스타일을 적용할 수 있음.
  • Slidev는 마크다운으로 슬라이드 내용을 작성하면서 브라우저의 JavaScript 기능을 활용해 애니메이션과 인터랙티브 요소를 구현하는 프레임워크임.
  • Rough.js에 프리셋 스타일을 지정하면 슬라이드 애니메이션에 일관된 손그림풍 미감을 적용할 수 있음.
  • 회사 웹사이트와 브랜드 자료를 LLM에 제공하면 기본적인 어두운 AI 테마 대신 조직의 시각적 정체성을 반영할 수 있음.
  • 한 번의 프롬프트로 만든 덱은 완성본이 아니라 출발점이며, 정확도와 시각 요소를 구체적인 지시로 다듬어야 함.

슬라이드 제작 방식 찾기

  • 발표를 준비하며 데모를 작성하고 말할 내용을 개요화하는 과정과 발표 자체는 좋아하지만, 오랫동안 슬라이드를 만드는 일은 즐기지 못함.
  • PowerPoint와 Google Slides에서는 구상한 방식으로 아이디어를 표현하기 어려웠으며, 도구를 능숙하게 다루지 못하는 점이 원인일 수도 있다고 봄.
  • AI 이전부터 시각 편집 방식(WYSIWYG)이 아닌 코드로 프레젠테이션을 만드는 도구를 찾아 LaTeX와 여러 자바스크립트 기반 해법을 시도하고 직접 만들어보기도 했지만, 원하는 경험은 얻지 못함.
  • LLM을 처음 사용하고 결과를 조금씩 조정한 뒤 마침내 원하는 방식으로 슬라이드를 만들 수 있었으며, 머릿속 구상에 더 가까운 발표용 시각 자료를 만들게 됨.
  • 이 방식으로 처음 진행한 발표는 7월 Cloud Native Karlsruhe 밋업의 ‘Reliability from Manual to Autopilot’임.
  • 원하는 애니메이션을 모두 구현했으며 작은 인터랙티브 게임도 포함함. 슬라이드를 클릭하고 왼쪽·오른쪽 화살표 키로 넘겨 직접 확인할 수 있음.

워크플로의 세 가지 재료

  • 최근 몇 달간 이 방식으로 몇 차례 발표를 진행했으며, 워크플로를 묻는 사람들에게 공유하는 핵심 재료는 Slidev, Rough.js, Bronto의 시각 정체성을 활용하라는 지시임.
  • Slidev는 프레젠테이션 제작을 위한 여러 자바스크립트 프레임워크 중 하나임.
  • 마크다운으로 슬라이드 내용을 작성할 수 있으며, 브라우저에서 자바스크립트의 기능을 활용해 텍스트와 이미지뿐 아니라 작은 애니메이션과 인터랙티브 요소도 넣을 수 있음.
  • 예를 들어 6번 슬라이드의 체크박스가 8~18번 슬라이드의 동작을 바꾸거나, 스마일 모양을 입력받아 더 크고 멋지고 네모난 모습으로 바꾸는 시스템 애니메이션을 만들 수 있음.
  • 직접 조작하거나 LLM에 실행을 맡길 수 있는 프로거(Frogger) 스타일 게임도 구현할 수 있음.
  • Slidev에는 애니메이션을 그리는 프레임워크가 기본으로 포함되지 않음. LLM에 컴포넌트를 만들라고 하면 학습 데이터에서 선호하는 라이브러리를 고르거나 처음부터 구현할 수 있는데, 전자는 전형적인 ‘AI로 만든’ 모양이 될 수 있고 후자는 대체로 보기 좋지 않은 결과로 이어짐.
  • 이를 피하려고 LLM에 프리셋 스타일을 지정한 Rough.js를 사용하도록 지시해 애니메이션에 일관된 손그림풍 스타일을 적용함.
  • 세 번째 재료는 Bronto 웹사이트와 브랜드 폴더의 로컬 사본을 LLM에 제공하고 슬라이드 시각 정체성에 반영하도록 지시하는 것임.
  • 그 결과 전체 분위기를 어두운 기본 AI 테마에서 현재 일하는 회사의 정체성을 나타내는 디자인으로 바꿀 수 있음.
  • 같은 방식을 재현할 때는 소속 조직이 제공하는 자료나 웹사이트의 테마를 활용할 수 있음.

프롬프트로 슬라이드 만들기

  • 재료를 갖춘 뒤 LLM에 슬라이드 덱 생성을 요청할 수 있으며, 예시 프롬프트는 다음과 같음.
  • 컨텍스트 전파 개념을 설명하는 슬라이드 덱을 만들 것.
  • 프레임워크로 Slidev를 사용하고 애니메이션에는 Rough.js를 사용할 것.
  • 전체적인 슬라이드 분위기와 시각 스타일을 위해 opentelemetry.io를 참고할 것.
  • 이 프롬프트의 결과물은 약 10분 만에 생성된 슬라이드 덱임. 덱을 넘겨 보거나 LLM에 생성하게 한 설명 영상을 볼 수 있음.

결과물의 한계와 다듬기

  • 슬라이드 덱은 단 한 번의 프롬프트로 만들어졌으며 완벽하지 않음.
  • 텍스트는 명백히 100% AI 생성이고 모든 내용이 완전히 정확하지는 않으며, 애니메이션도 괜찮은 수준이지만 원하는 모습과 정확히 일치하지 않음.
  • 실제 발표 자료라면 이 결과를 출발점으로 삼아 원하는 형태로 덱을 천천히 발전시킬 수 있음.
  • 시각 요소를 원하는 모습으로 만들려면 구체적인 지시가 필요하며, 이 과정은 시간이 많이 들 수 있음.
  • PowerPoint 같은 도구의 전문가가 아니어도 원하는 결과에 도달할 수 있지만, 숙련된 그래픽 디자이너 수준에 이르지 못할 수는 있음. 그래도 이전에 만들던 슬라이드보다 훨씬 나아질 수 있음.
  • 직접 시도해보고 결과를 공유하며, 이 과정을 개선한 내용과 슬라이드를 함께 나누기를 권함.