AI로 강의 웹페이지 뚝딱! 특강용 튜토리얼 페이지 제작 과정

소개

대학교 교수 대상 AI 특강을 앞두고, 기존처럼 PPT 파일만 이메일로 보내는 방식 대신 수강자 누구나 링크 하나로 접속해 실습 자료를 바로 복사해서 쓸 수 있는 튜토리얼 웹페이지를 만들어보고 싶었습니다.

문제는 제가 HTML·CSS·JavaScript를 전혀 모른다는 것이었습니다. 그래서 Claude(클로드)를 활용한 바이브코딩(Vibe Coding)으로 도전해봤습니다. 코드 한 줄 직접 짜지 않고, PPT 강의자료를 업로드하고 자연어로 요청하는 것만으로 완성형 웹페이지를 만드는 것이 목표였습니다.

진행 방법

사용 도구

• Claude.ai (claude.ai) — 웹페이지 코드 생성 및 수정

• Netlify (netlify.com) — 무료 웹 배포 (드래그 앤 드롭)

STEP 1. PPT를 업로드하고 웹페이지 초안 요청

강의 PPT 파일을 Claude에 업로드한 뒤 아래 프롬프트를 입력했습니다.

이 강의자료로 웹페이지 만들어줘.
최대한 PPT 내용에 맞추어서 튜토리얼 제작해줘.
Gemini 설명할 때는 교육용 인포그래픽 부분도 추가적으로 
튜토리얼에 넣어주면 좋겠어.
대학은 **대학교이고 2026년 *월 *일 9시-1시야. 장소는 **야.
누구나 복사 붙여넣기로 실습할 수 있도록 해주면 더 좋을 것 같아

→ 단 한 번의 요청으로 히어로 배너, 학습 목표, 강의 목차, 수업 링크, 단계별 튜토리얼(탭 6개), 섹션이 포함된 HTML이 생성됐습니다.

STEP 2. 세부 수정 — 안 되는 기능 제거 & 콘텐츠 추가

일단 나온 결과를 보고 추가적으로 사용하는 도구링크를 전부 클릭 한번으로 연결 가능하도록 요청하였고 거기에 제 소개 링크 및 유튜브 채널 그리고 학습에 도움이 되는 유튜브 영상까지 요청했습니다. 이때는 제 소개링크 및 유튜브 링크를 모두 주었고 여기에 제가 참고영상으로 넣어주었으면 하는 영상 링크도 함께 주었습니다.

그밖에도 아래와 같이 제가 추가하고 싶은 부분들을 문장형으로 서술하기 보다는 1,2,3,4,5 이런식으로 요청하면서 수정작업을 했습니다.

1. Google 문서에서 @Gemini 호출하는 스텝은 
   안 되는 기능이야. 빼주거나 다른 걸로 대체해줘.
2. NotebookLM 디자인에 내가 추가해준 스타일 
   프롬프트 8선을 넣어줘.

→ @Gemini 기능처럼 실제로 작동하지 않는 항목은 즉시 대체 콘텐츠로 교체됐고, 별도로 준비한 PPT 디자인 스타일 프롬프트 8선(레고·네온·미니멀 등)이 NotebookLM 튜토리얼 탭 안에 카드 형태로 삽입됐습니다.

STEP 3. OG 삽입

오픈그라프 용 이미지를 제작하고 이미지를 넣어서 HTML을 요청하였습니다.

STEP 4. Netlify 배포

완성된 index.html과 og-image.png 두 파일을 Netlify에 드래그 앤 드롭해 배포했습니다.
배포 이름은 원하는 이름으로 변경가능하여 변경하였습니다.

STEP 5. 강의용 포스터 제작

강의 PPT또는 강의 내용을 넣어서 포스터 제작

ALT

소녀와 로봇을 배경으로 한 포스터

결과와 배운 점

✅ 결과

PPT 강의자료 하나로 아래 내용이 모두 담긴 웹페이지가 완성됐습니다.

• 강의 정보 히어로 배너 (날짜·장소·강사 자동 삽입)

• AI 교육 통계 시각화 섹션

• 탭 6개짜리 단계별 실습 튜토리얼 (모든 프롬프트에 복사 버튼 포함)

• NotebookLM PPT 디자인 스타일 8선 카드

• 수업 링크 모음, 유튜브 추천 영상, 핵심 메시지 요약

• 카카오톡 링크 공유 시 이미지 미리보기(OG 태그)

🔥 나만의 꿀팁

1. 파일명은 반드시 index.html
Windows에서 파일 확장자가 숨겨져 있으면 index.html로 보여도 실제로는 index.html.html이 되는 경우가 있습니다. 탐색기 → 보기 → 파일 확장명 표시 활성화 후 반드시 확인하세요.

2. Netlify에는 폴더째로 업로드 하시면 더 편리합니다
폴더 안에 파일을 넣어 통째로 드래그하면 됩니다.

3. OG 이미지는 1200×630px
카카오톡·페이스북 미리보기가 안 나올 때는 이미지 크기가 원인인 경우가 많습니다. 이미지의 이름을 잘 확인하여 이름을 일치시켜야 합니다.

💡 시행착오

📌 앞으로의 계획

• 매 특강마다 이 방식으로 특강 전용 웹페이지 제작