웹슬라이드 만들기 — PPT 대신 AI로 만든 발표자료 (바이브코딩 #1)

안녕하세요. 인공지능으로 인생 점프하고 싶은 AI 점퍼입니다.

저는 교육자료와 내부 회의자료, 제안서와 사업보고처럼 발표자료를 만드는 일이 많습니다. 자료를 만든 뒤에도 문구나 숫자를 고치고, 발표할 장소의 PC로 옮겨야 하는 일이 생기죠.

요즘 AI로 웹페이지를 만들어보면서, 발표자료도 이 방식으로 만들면 어떨까 생각했습니다. 필요한 내용을 말로 설명해 만들고, 수정할 부분도 AI에게 부탁해보는 거죠.

그래서 요즘은 정말 중요한 제안서나 세밀한 디자인이 필요한 자료를 제외하고, 교육자료나 내부 발표자료처럼 빠르게 만들고 수정해야 하는 자료는 거의 다 웹슬라이드로 만듭니다.

웹슬라이드는 어떻게 쓰나요?

슬라이드를 PPT 파일 대신 웹페이지로 만드는 것입니다. 발표할 때는 브라우저에서 주소를 열고, 내용을 넘기거나 버튼을 누르며 사용합니다. 발표자료에 들어갈 내용과 숫자를 준비하고 AI에게 화면을 만들어달라고 요청한 뒤, 직접 확인하고 수정합니다. 완성된 자료를 배포하면 같은 주소로 열어볼 수 있습니다.

1. 파일 대신 주소로 열기

우리 PPT 만들면 USB에 넣어서 다니잖아요? 발표 PC에 파일을 옮겨야 되고, 여러 명이 발표하는 날이면 바탕화면에 자기 파일 옮기려고 막 줄 서 있고….

웹슬라이드를 미리 배포해두면 발표 PC에서 주소를 열 수 있습니다.

인터넷과 브라우저만 있으면 집에서도, 회사에서도, 다른 교육장에서도 같은 주소로 열면 됩니다. 파일을 어디에 넣어뒀는지 찾을 필요가 줄어드는 거죠.

2. AI에게 수정할 부분 말하기

웹슬라이드는 구조가 코드로 되어 있어서 공통 스타일이나 반복되는 내용을 한 번에 수정하기 좋습니다. 물론 저는 코드 이런 거 모르는 비개발자이지만,

우리에겐 지피티와 클로드가 있잖아요!

“전체 제목을 조금 작게 해줘.” “이 문구가 들어간 곳은 전부 빨간색으로 바꿔줘.” “3페이지부터 7페이지까지 여백을 넓혀줘.”

이런 식으로 말하면서 원하는 내용을 수정할 수 있습니다. 수정한 뒤에는 화면에서 글자가 잘리지는 않는지, 다른 페이지까지 바뀌지는 않았는지 확인하고요.

USB로 PPT를 옮겨서 발표하는 상황이었다면 수정한 파일을 다시 저장하고, USB에 넣고, 발표 PC에 다시 옮겨야 하잖아요. 수정한 웹슬라이드를 다시 배포하면 같은 주소에서 열 수 있습니다. 발표 화면을 새로고침한 뒤 바뀐 내용을 확인합니다.

3. 숫자와 차트에 움직임 넣기

웹슬라이드에서는 클릭하거나 입력하면 화면이 반응하는 인터랙티브 시각화도 만들 수 있습니다.

① 카운트업 효과: 숫자를 임팩트 있게 보여주기

숫자가 0부터 목표값까지 쭉 올라가는 효과입니다. 참여 인원이나 누적 실적처럼 강조하고 싶은 수치를 보여줄 때 활용할 수 있습니다.

설명: 슬라이드에 들어오면 숫자가 0부터 올라가며 목표값을 보여줍니다.

AI에게는 “이 페이지에 들어오면 숫자가 0부터 목표값까지 올라가게 해줘”라고 요청하면 됩니다. 숫자와 단위도 함께 알려주고요.

② 필터형 차트: 버튼으로 비교 대상 바꾸기

설명: 선택한 대상에 따라 막대 높이와 수치가 바뀝니다. 준비해둔 예시 데이터를 전환하는 기능입니다.

 대상을 선택하면 같은 자리에서 차트가 바뀌는 기능입니다. 비교할 때마다 다른 페이지로 넘어가지 않아도 됩니다. “초등·중등·고등 버튼을 만들고, 버튼을 누르면 해당 데이터로 막대그래프가 바뀌게 해줘”라고 요청하는 거죠.

 물론 비교할 숫자는 제가 준비해야 합니다!

 

③ 투표 버튼: 선택에 따라 숫자 바꾸기

설명: 활동 버튼을 누르면 해당 선택의 득표 수와 비율이 바뀝니다. 

참가자의 휴대폰 응답을 발표 화면에 모으려면 별도의 응답 수집 기능이 필요합니다.

어떤 활동을 해보고 싶은지 묻거나, 설명을 듣고 어떤 생각이 들었는지 확인할 때 활용할 수 있겠죠.

위 화면은 한 화면에서 버튼을 눌러보는 로컬 시연입니다. 여러 사람이 동시에 접속하는 실제 투표 서비스는 아닙니다. 참가자용 주소와 응답을 저장·전달하는 서버 또는 서비스는 따로 연결해야 합니다.

이외에도 타이머, 화면에 직접 그리는 판서, 조건에 따라 결과가 달라지는 계산 기능 등 다양한 것들을 넣을 수 있습니다. 필요한 기능을 AI에게 설명하고 동작을 확인하면서 붙이는 방식입니다.

웹슬라이드를 사용하기 전에 알아둘 점

• 인터넷 환경: 주소로 접속해서 발표할 거라면 현장 인터넷을 확인해야 합니다. 중요한 발표는 PDF 같은 백업 파일도 준비해두면 좋고요.

• 파일 전달: 상대방이 편집 가능한 PPT 원본을 요구하는 상황이라면 PPT가 더 편할 수 있습니다.

• 배포 범위: 내부 자료를 올릴 때는 누가 주소에 접속할 수 있는지 확인해야 합니다. 주소를 공유하는 것과 접근 권한을 제한하는 것은 별개니까요.

• AI 결과 확인: 수정이 편해도 내용과 숫자가 맞는지, 버튼이 제대로 작동하는지는 직접 확인해야 합니다.

코딩을 못해도, AI와 이야기하면서 만들어봅니다

코드를 잘 몰라서 원하는 모습을 말로 설명하고, 나온 화면을 보면서 다시 고칩니다. 글자를 줄여달라고 했는데 다른 페이지까지 바뀌지 않았는지, 차트의 숫자가 맞는지도 확인하고요.

지금은 교육자료와 내부 발표자료에 이 방식을 쓰고 있습니다. 편집 가능한 PPT 원본이 필요한 자료는 기존 방식으로 만들고 있습니다.

따라 하기

• 이런 분께: PPT 파일을 USB로 옮기고 다시 고치는 일이 잦은 분
• 준비물: 기존 발표자료(PPT·한글·메모 무엇이든), ChatGPT나 Claude
• 제가 처음 AI에게 보낸 말 (경로·맞춤법만 다듬음)

“이거 웹슬라이드 교육자료 만든 건데, 한번 검토해보고 실제 웹슬라이드로 만들어줘. 그래야 사용할 수 있을 듯.”

처음부터 완벽하게 설명할 필요는 없습니다. 하던 일과 불편한 점을 그대로 말하고, 나온 결과를 보면서 고쳐가면 됩니다.

점프!