2주차 — Claude Code로 인터랙티브 보고서 만들기 (v1 → v2 → v3)

목표: 정적 자료(PPT/PDF/링크)를 청중이 직접 동작시킬 수 있는 인터랙티브 HTML 보고서로 변환. 한 번에 완성하지 않고 키워드 한 줄씩 추가하며 v1 → v2 → v3로 단계별 발전시키는 사이클을 체험한다.

개념 설명

v1 → v2 → v3 점진적 발전 원칙

• - 한 번에 완벽한 결과를 노리지 않는다 — 짧게 입력 → 결과 → 부족한 점 발견 → 키워드로 보강 (4단계 사이클 반복)
• - v1: "이 링크로 만들어 줘" 한 줄 → 정보는 정확하지만 평범한 첫 결과 (흰 배경 · 불릿 · 텍스트 위주)
• - v2: 키워드 한 줄 추가 ("다크 테마 · 카드형 레이아웃") → 톤·레이아웃 진화, 인터랙션 추가
• - v3: "원본 이미지·움짤을 가공 없이 그대로 가져와 — 손으로 만져볼 수 있게" → 비주얼·애니메이션·체크리스트까지

4단계 사이클 (PART 02·03·04 공통)

1. 1. STAGE 1 주제 선정 — 참고 페이지 1~2개 골라두기
2. 2. STAGE 2 한 줄 입력 — Claude Code 채팅창에 링크 + "보고서 만들어 줘"
3. 3. STAGE 3 첫 결과(v1) + 점검 — 부족한 점 3가지 메모
4. 4. STAGE 4 키워드로 발전 — 5 카테고리(성격·테마/비주얼/애니메이션/인터랙션/톤앤매너) 중 골라 한 줄

키워드 5 카테고리 (3.1)

• - ① 성격·테마 (의사결정용/정보 공유용/교육용 · 다크/화이트)
• - ② 비주얼 강조 (카드형/큰 제목+여백 · 포인트 컬러)
• - ③ 애니메이션 (페이드 인/카운트업/그려지는 차트)
• - ④ 인터랙션 ⭐ (← → 키 · 탭 전환 · 호버 효과)
• - ⑤ 톤앤매너 ⭐ (미니멀/키노트/프리미엄 · 텍스트/스토리 중심)

v3 핵심 프롬프트 (4.2)

"현재 slides.html에 [원본 URL] 페이지의 이미지·움짤을 가공 없이 그대로 가져와, 각 카드에 비주얼로 채워 줘. 애니메이션·인터랙션도 추가 — 독자가 손으로 만져볼 수 있게"

→ ⭐ 의도 슬롯("손으로 만져볼 수 있게")이 인터랙션을 살린다. 외부 URL 직접 참조하므로 다운로드·CDN 업로드·리사이즈 전혀 불필요.

🎯 마지막 팁 — 이미지 비교가 한방

• - 말로 3번 고쳐도 안 통할 때, 스크린샷 두 장 첨부 + 한 줄: "1번은 지금 v3, 2번은 목표 캡처. 2번처럼 위치·대비를 맞춰 줘"
• - Claude는 시각적 차이를 글자보다 빠르게 파악 — 위치·간격·정렬·대비 보정에 특히 강함
• - 캡처: Win ⊞+Shift+S · Mac ⌘+Shift+4

실습

기초 🟢 — 한 줄로 v1 6장 받기

1. 1. VSCode에서 새 폴더 design-trends-2026 만들기
2. 2. Claude Code 패널에 한 줄 입력: https://design.co.kr/article/142896 이 링크로 디자인 트렌드 분석 보고서 만들어 줘
3. 3. 6장짜리 slides.html(v1) 생성 확인 — 정보는 들어왔지만 디자인 평범
4. 4. 부족한 점 3가지 메모 (다음 STAGE 키워드 후보)

고급 🔴 — 본인 자료를 v1 → v2 → v3까지 진화

1. 1. 본인 PPT/PDF/회의록 1개 → Claude Code에 첨부 + 한 줄로 v1 생성
2. 2. 키워드 5 카테고리 중 2~3개 골라 한 줄로 v2 진화 ("다크 테마·카드형·포인트 #007AFF")
3. 3. 원본 자료의 이미지·움짤 임베드 + "손으로 만져볼 수 있게" → v3 완성
4. 4. 살짝 어긋난 부분은 스크린샷 두 장 비교로 픽셀 단위 보정

핵심 산출물: 본인 자료가 v3까지 진화한 단일 slides.html (3주차에 GitHub Pages로 공개)