[Claude Code] 워크숍 자료, PDF 대신 웹뷰어로 30분 만에 만들었다

📝 한줄 요약

워크숍 참가자용 PDF 자료를 모바일 친화적인 웹뷰어로 변환하고, Vercel에 배포까지 30분 만에 완료했습니다.

🎯 이런 분들께 도움돼요

• 워크숍이나 교육을 운영하면서 참가자에게 자료를 공유해야 하는 퍼실리테이터, 강사

• PDF 공유의 불편함을 느끼지만 대안을 모르는 분

• 코딩 경험 없이 AI로 실용적인 결과물을 만들어보고 싶은 분

😫 문제 상황 (Before)

워크숍을 준비하고 있었는데, 자료가 실시간으로 계속 업데이트되고 있었습니다. 핸드아웃으로 미리 인쇄할 수 없는 상황이었고, 결국 디지털로 공유할 수밖에 없었습니다.

그런데 조건이 까다로웠습니다:

• 참가자들이 자료를 다운로드하지 못하게 해야 했고

• 휴대폰으로 바로 볼 수 있어야 했습니다

처음에는 PDF 뷰어로 공유했지만, 모바일에서 확대/축소가 불편하고 글씨가 작아서 참가자들이 실시간으로 따라오기 어려웠습니다. 워크숍이 코앞인데 더 나은 방법이 필요했습니다.

🛠️ 사용한 도구

• Claude Code: AI 코딩 도구 (CLI)

• 모델: Claude Opus 4.5

• 배포: Vercel (무료 웹 호스팅)

🔧 작업 과정

PDF를 읽는 것부터 시작 — 환경 세팅의 삽질

가장 먼저 해야 할 일은 Claude가 PDF 내용을 이해하는 것이었습니다. PDF를 읽을 수 있는 도구(poppler)를 설치해야 했는데, 여러 방법을 시도했지만 전부 실패했습니다.

PDF파일을 읽는게 필요해. 먼저 파일 읽는거부터 해보자

Claude가 choco, winget, conda 등 다양한 방법을 시도하다 결국 GitHub에서 직접 바이너리를 다운로드해서 설치했습니다. 이 과정에서 제가 한 건 "읽어야 해"라고 말한 것뿐이었고, 나머지는 Claude가 알아서 해결했습니다.

1차 구현 — 일단 돌아가게 만들기

PDF에서 이미지를 추출하고, 세로 스크롤 형태의 HTML 웹뷰어를 만들었습니다. 팀용 자료(36p)와 개인용 자료(12p) 두 개를 한 사이트에 담았습니다.

그런데 여기서 문제가 생겼습니다. Claude가 자꾸 이미지 중심으로 페이지를 구성하려고 했습니다. PDF 슬라이드를 통째로 이미지로 넣으니 파일이 무겁고, 무엇보다 AI의 컨텍스트(대화 맥락)를 너무 많이 잡아먹었습니다.

텍스트로 넣어도 되는 것들은 텍스트로! 팀활동 p20,21,25,33은 텍스트로 해도 되지 않을까? 개인 활동도 표로

이렇게 방향을 잡아주니 이미지는 꼭 필요한 10개만 유지하고, 나머지는 전부 텍스트와 표로 전환했습니다. 결과적으로 페이지가 훨씬 가벼워졌고, 모바일에서도 빠르게 로딩되었습니다.

여기서 배운 것: 한 번에 완벽하게 하려 하지 말고, 1차 구현 → 방향 수정 → 리디자인 순서로 단계적으로 진행하는 게 훨씬 효율적이었습니다.

벤치마킹 한마디로 전면 리디자인

1차 결과물이 나온 뒤, 마음에 드는 참고 사이트를 보여주며 방향을 잡았습니다.

참고 사이트 읽을 수 있어? 이런 느낌으로 구현하고 싶어. 색상은 회색 배경에 주황 포인트

Claude가 참고 사이트를 분석한 뒤, 카드 기반 네비게이션 구조를 제안했습니다. 밝은 회색 배경에 주황색 포인트 컬러를 적용한 디자인 시스템까지 스스로 설계했습니다.

이후 전면 리디자인을 실행했는데, 이 과정이 정말 인상적이었습니다:

• 랜딩 페이지 (6단계 프로세스 카드 + 팀/개인 활동 목록)

• 팀 활동 6개 개별 페이지

• 개인 활동 2개 페이지

• 상단 네비게이션 바 + 이전/다음 버튼

약 950줄의 코드를 한 번에 작성하고, 빌드까지 성공시켰습니다.

구조 수정 — 내용을 아는 건 나니까

완성된 뷰어를 보면서 워크숍 구조를 조정했습니다.

팀 워크숍 단계에서 '아이디어 도출'에 우선순위까지 포함. 6단계는 컨셉보드 작성 개인 활동은 'PR'과 'FAQ'로 구분

이런 콘텐츠 구조 결정은 워크숍 내용을 아는 제가 해야 하는 부분이었고, Claude는 그 지시를 정확히 반영해서 코드를 수정했습니다.

Vercel 배포 — 처음 해봤는데 알아서 다 해줬다

이번 작업에서 가장 "오!" 했던 순간입니다. Vercel 배포를 한 번도 해본 적이 없었는데, 한마디만 했습니다.

버셀에 배포해 줘. 커스텀 주소로

Claude가 CLI 로그인부터 배포, 커스텀 도메인 설정까지 전부 처리했습니다. 휴대폰으로 접속했을 때 로그인이 요구되는 문제가 있었는데, 이것도 인증 설정을 비활성화하는 방법을 안내해줘서 바로 해결했습니다.

✅ 결과 (After)

Before vs After

결과물

워크숍 당일, 참가자들이 휴대폰으로 바로 접속해서 자료를 편하게 볼 수 있었습니다. 다운로드 차단도 잘 작동했습니다.

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 한 번에 완벽하게 하려 하지 말 것: 1차 구현 → 벤치마킹 → 리디자인 순서로 단계적으로 진행했더니 결과물 퀄리티가 훨씬 높아졌습니다

2. 참고 사이트 보여주기: "이런 느낌으로"라고 URL 하나 던져주면 디자인 방향을 빠르게 잡을 수 있습니다

3. 배포까지 한 번에 요청: "버셀에 배포해 줘"만으로 로그인부터 도메인 설정까지 전부 처리됩니다

이렇게 하면 안 돼요

1. 이미지 중심으로 가면 컨텍스트 낭비: PDF 슬라이드를 통째로 이미지로 넣으면 AI 대화 맥락을 많이 소모합니다. 텍스트로 변환 가능한 건 텍스트로 요청하세요

2. 한 번에 모든 걸 요청하지 말 것: "PDF를 웹사이트로 만들어줘"보다 단계별로 나눠서 요청하는 게 결과가 좋습니다