오늘의 목표

본인 자료 → 인터랙티브 보고서, 50분 만에

한 번에 완성하지 않습니다 — v1 → v2 → v3로 점진적 발전. 키워드 한 줄씩 추가하며 본인 자료가 단계별로 진화합니다

💡 끝나면 가져갈 것 → 본인 자료가 v3까지 진화한 slides.html. 다음 주에 GitHub로 공개 URL 공유합니다.

개론 · 1.1

정적 vs 인터랙티브 — 직접 끌어보세요

아래 가운데 핸들을 좌우로 드래그하면 같은 자료의 두 형태를 비교할 수 있습니다

개론 · 1.2

인터랙티브 5종 — 지금 만져보세요

발표 자료에 가장 자주 들어가는 5가지. 모두 자연어 한 줄로 Claude가 만들어줍니다

개론 · 1.3 · ⭐ 라이브

내 자료에 어떤 인터랙션이 맞을까?

왼쪽 카테고리를 클릭하면 오른쪽에 실제 작동하는 예시가 나타납니다 — 본인 자료에 맞는 걸 만져보세요

💡 5종 모두 본인 자료에서 한 줄로 Claude에 요청 가능 — "내 [자료]를 [위 인터랙션] 형태로"

개론 · 1.4

어떤 도구로 만드나? — 3가지 선택지

오늘 우리는 Claude Code를 씁니다. 다른 선택지도 짧게 비교.

💡 ★ Claude Code로 가는 이유 — 한 번 만든 자료를 계속 발전시키고 GitHub 공유까지 가능 (W3 다리)

실습 · 2.1 · 환경 준비

먼저 — 폴더 만들고 VSCode 열기

새 도구 설치 0개 — 폴더 만들고 VSCode에서 열고 Claude Code 패널이면 시작

실습 · 2.2 · 발전·실습 사이클 ⭐ 핵심

한 번에 완성하지 않습니다 — 발전·반복

짧게 입력 → 결과 → 부족한 점 발견 → 키워드로 보강. 이 4단계를 반복하면 — 보고서가 점점 본인 톤으로 진화합니다.

💡 STAGE 4가 끝나면 다시 STAGE 3으로 — 2~3 사이클이면 본인 톤의 보고서가 완성됩니다

실습 · 2.3 · STAGE 1 — 주제 선정

2026 디자인 트렌드 분석 보고서

오늘 이 주제로 하나씩 따라하며 인터랙티브 보고서를 만듭니다. 시작점은 — 인터넷에 이미 잘 정리된 트렌드 페이지 4개를 그대로 활용.

📚 참고 페이지 — 시작점 (이 중 1~2개 골라 Claude에 같이 던지면 끝)

💡 다음 STAGE — 고른 링크 1~2개를 그대로 Claude에 던져 한 줄로 입력합니다

실습 · 2.4 · STAGE 2 — 한 줄 입력

채팅창에 — 한 줄

실습 · 2.5 · STAGE 3 — 첫 결과 ⭐ v1 라이브 HTML

키워드 없이 — "이 링크로 만들어 줘" 한 줄의 결과

아래는 키워드를 하나도 주지 않고 design.co.kr/142896 링크 + "디자인 트렌드 분석 보고서 만들어 줘" 한 줄만 던진 결과 — 정보는 들어왔지만 다소 어글리한 v1. 다음 PART에서 키워드를 추가해 v2 → v3로 발전시킵니다.

v1 결과 — slides.html (라이브 · 실제 동작)

새 탭에서 열기 ↗

slides.html — v1 (raw, 키워드 없이)

정보는 정확하지만 — 평범한 흰 배경 + 불릿 + 텍스트 위주. 다음 PART에서 키워드를 추가하며 v2/v3로 발전.

디자인 개선 · 3.1 · 키워드 사전 ⭐ 핵심

5 카테고리 — 상황별로 골라 쓰는 키워드

설명하지 말고 키워드를 나열. 각 카테고리에서 본인 상황에 맞는 것만 골라 합치면 — Claude가 자동으로 인터랙티브로 변환합니다.

디자인 개선 · 3.2 · 발전 프롬프트 ⭐

전체를 다시 쓰지 말고 — 키워드 한 줄만

v1을 살리고 부족한 점 = 키워드 한 줄로 던지면 Claude가 기존 slides.html을 발전시킵니다.

💡 "발전시켜 줘" — 기존 파일을 살리는 신호. 새로 만들지 않습니다.

디자인 개선 · 3.3 · 결과 ⭐ v2 라이브 HTML

키워드 한 줄 추가 후 — v2가 됐습니다

5 카테고리에서 골라 합친 한 줄(다크 테마 · 카드형 · 키노트 · ← → 키 · 페이드 인 · 큰 숫자) → 키노트 톤의 다크 카드 보고서로 진화. 단, 텍스트 위주라 비주얼은 아직 부족 — PART 04에서 v3로.

v2 결과 — slides-v2.html (라이브 · 실제 동작)

새 탭에서 열기 ↗

slides.html — v2 (다크 카드형)

v1 → v2 — 정보·구조가 풍성해지면서 디자인·인터랙션이 발전. 6장 → 10장 (도입·두 보고서·흐름 3 분리·결론 추가). ← → 키로 넘기세요.

v3 만들기 · 4.1 · 왜 v3인가

v2엔 텍스트뿐 — 원본 링크엔 이미지·애니메이션이 가득

같은 design.co.kr/142896 한 페이지를 비교해 봅시다. v2는 정보를 압축했지만 비주얼 자산은 모두 빠졌어요. 원본의 이미지·움짤·트렌드 컷을 그대로 가져와 v3에 채워 넣는 게 PART 04의 핵심입니다.

💡 핵심 — 새로 그리지 말고, 원본의 자산을 <img src> 한 줄로 가져옵니다

v3 만들기 · 4.2 · ⭐ 핵심 프롬프트

"가공 없이 그대로" — 한 줄이면 끝

Claude는 페이지 안의 이미지 URL을 추출해 슬라이드에 그대로 임베드합니다. 다운로드·재가공 없이 원본 링크를 직접 참조 — 이게 인터랙티브 보고서의 진짜 가속도.

💡 시간 절약 — 본인이 새로 만들면 1시간, 원본 임베드는 10초. 저작권은 출처 명시로 해결

v3 만들기 · 4.3 · 결과 ⭐ v3 라이브 HTML

한 줄 추가 후 — v3가 됐습니다

같은 정보·같은 레이아웃 — 그러나 카드 안에 비주얼·움짤·애니메이션이 채워지면서 보고서가 살아납니다. 키워드별 그라디언트·움직임·텍스처가 본문 의미를 대신 전달합니다.

v3 결과 — slides-v3.html (라이브 · 실제 동작)

새 탭에서 열기 ↗

slides.html — v3 (비주얼·인터랙션 채움)

v2 → v3 — 같은 10장에 비주얼·애니메이션이 채워짐. 5번(드라마/리얼리티 워프)·6번(젤리)·8~9번(흐름 3 비주얼) 호버해 보세요.

🎯 마지막 팁 · 말로 설명이 안 통할 때

이미지 비교가 — 한방

"제목 좀 위로", "여기 간격 맞춰줘"라고 백 번 말해도 안 통할 때가 있습니다. 그때는 스크린샷 두 장을 첨부하고 한 줄 — Claude가 픽셀 단위 차이를 읽어 30초에 끝납니다.

실제 비교 — 지금 v3 vs 목표

❌ 1번 (지금 v3)

slide_03-v3.png

→ 흐름 카드 위 숫자(01)가 회전 그라디언트와 겹쳐 흐릿함

✅ 2번 (목표 캡처)

target.png

→ 결론 슬라이드처럼 라벨이 그라디언트 위에 또렷이

💡

실제로 동작하는 방법 — 두 PNG를 Claude Code 채팅창에 끌어다 붙이면, Claude가 1번·2번 차이를 읽어 v3의 카드 라벨 위치·z-index·배경 대비를 정확히 보정합니다.

한 줄 명령

Claude Code · 비교 첨부 + 한 줄 📎 1.png 📎 2.png

📎 1번은 지금 v3 결과,
📎 2번은 목표 캡처야.
2번처럼 카드 라벨 위치·
대비를 맞춰 줘.

⏱ 적용 시점 — 말로 3번 고쳐도 안 될 때, 그때 바로 스크린샷 두 장으로 전환

✦ 강력한 이유 — Claude는 시각적 차이를 글자보다 빠르게 파악. 위치·간격·정렬·대비 보정에 특히 강함

🛠 캡처 방법 — Win ⊞+Shift+S · Mac ⌘+Shift+4 → 그대로 채팅창에 붙여넣기

💡 오늘 강의 전체에서 가장 마지막에 꺼내 쓰는 비기 — v3까지 만든 후 디테일 1픽셀 어긋남 잡을 때 사용

Week 02 완료

수고하셨습니다 — 다음 주에 만나요

오늘 50분 동안 v1 → v2 → v3까지 — 본인이 가진 자료가 인터랙티브 보고서로 진화하는 전 과정을 확인했습니다. 다음 주는 이 결과물을 전 세계 누구나 볼 수 있게.

AI 팀 교육 · Week 02 · Claude Code로 인터랙티브 보고서 만들기 (v1 → v2 → v3)