Week 2 · Bonus 자료

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

자료 종류마다 어울리는 인터랙션이 다릅니다. 아래 6가지는 지금 직접 눌러볼 수 있는 실작동 예시입니다. 마음에 드는 패턴을 그대로 Claude에게 요청하세요.

📋 결정 매트릭스 — 내 자료 → 추천 인터랙션
📝 회의록 / 액션 아이템
→
결정사항 토글 + 진행률 체크
🛒 카탈로그 / 제품 리스트
→
필터 버튼 + 그리드
📊 분기 / 월간 보고서
→
시기 슬라이더 + KPI
📘 매뉴얼 / 가이드 / 절차서
→
단계 탭 + 코드 카피
📑 제안서 / 기획서 / 비교 자료
→
Before/After 드래그
📈 통계 / 데이터 시트
→
막대 클릭 → 상세 노출
📝 CASE 01
회의록 · 액션 아이템
결정사항은 펼쳐 보고, 액션은 체크하면서 진행률을 본다
결정사항 (클릭해서 펼치기)
📌 Q3 캠페인 예산 승인 ▶
총 1,200만원 승인. 채널별 분배는 마케팅팀이 다음 주까지 보고. 참석자 전원 동의.
📌 디자인 시스템 도입 결정 ▶
DESIGN.md 표준 채택. 프론트팀이 3주 내 마이그레이션 PoC 진행.
📌 외주 벤더 변경 보류 ▶
현 벤더 계약 11월까지 유지. 12월 재평가.
액션 아이템 (클릭해서 완료)
✓
마케팅: 채널별 예산 분배안~5/8
✓
프론트: DESIGN.md PoC~5/22
✓
법무: 벤더 계약 검토~5/15
✓
HR: 신규 채용 공고 게시~5/10
0 / 4 완료
💬 Claude에게: "회의록.docx를 결정사항 아코디언 + 액션 체크리스트(진행률 표시) 인터랙티브 HTML로 변환해줘. 액센트 색은 @DESIGN.md의 primary."
🛒 CASE 02
카탈로그 · 제품 리스트
필터 버튼으로 즉시 좁혀 보기 — 종류가 많을수록 효과
소프트웨어
Claude Code Pro
₩28,000/월
소프트웨어
VS Code Plus
무료
하드웨어
맥북 프로 14"
₩2,890,000
하드웨어
매직 키보드
₩149,000
서비스
Claude API
$3 / 1M tok
서비스
GitHub Team
$4/유저/월
교육
AI-VIBE-101
8주 과정
교육
DESIGN.md 워크샵
2일
💬 Claude에게: "제품 카탈로그 PDF를 카테고리 필터 + 카드 그리드로 만들어줘. 카드 hover 시 살짝 떠오르는 효과."
📊 CASE 03
분기 / 월간 보고서
시기 슬라이더로 흐름을 한눈에 — 정적 차트 4장 → 라이브 1장
매출
₩820M
기준
신규 고객
142
기준
이탈률
3.2%
기준
2026-01 ←→ 끌기
💬 Claude에게: "분기 보고서 엑셀을 월 슬라이더로 시점 변경하면 KPI 카드 3개와 막대그래프가 즉시 갱신되는 인터랙티브 HTML로."
📘 CASE 04
매뉴얼 / 가이드 / 절차서
단계가 5개 이상이면 탭으로 — 한 번에 한 단계만 보여 인지 부담 ↓

1. Claude Code 설치

VS Code 마켓플레이스에서 "Claude Code" 검색 → Install 클릭. Node.js 18+ 필요.

node --version
# v18.0.0 이상 필요

2. Claude 계정 로그인

좌측 사이드바의 Claude 아이콘 클릭 → "Sign in" → 브라우저로 OAuth 인증.

Cmd/Ctrl + Shift + P → "Claude: Login"

3. 첫 프롬프트

4-slot 템플릿(WHO/WHAT/HOW/LOOK)을 채워서 한 번에. 이번 주 핵심.

[WHO] 우리팀 5명, 비개발자
[WHAT] Q3 캠페인 4장 인터랙티브
[HOW] 한국어, 친근, 짧게
[LOOK] @DESIGN.md 참고

4. HTML 저장 + 발표

생성된 슬라이드.html 더블클릭 → 브라우저에서 F11 발표 모드.

open slides.html # 또는 더블클릭
💬 Claude에게: "매뉴얼 PDF를 단계별 탭 + 각 단계 코드/명령어 카피 버튼이 있는 HTML로."
📑 CASE 05
제안서 / 기획서 / 비교 자료
"이전 vs 이후"가 핵심 메시지면 드래그 슬라이더 한 장이면 충분
BEFORE
정적 PDF 보고서
읽기만 가능 · 데이터 못 만짐 · 메일로 전달 · 버전 관리 어려움
AFTER
인터랙티브 가이드
필터·드래그·차트 · 링크 한 줄로 공유 · 데이터 라이브 갱신
⇆
💬 Claude에게: "제안서 PPT를 가운데 드래그 슬라이더로 Before/After 비교하는 단일 HTML로. 각 면에 핵심 메시지 + 부연 한 줄."
📈 CASE 06
통계 / 데이터 시트
막대를 클릭하면 그 값의 맥락(왜 그랬나)이 펼쳐진다
막대를 클릭하면 상세가 표시됩니다.
💬 Claude에게: "분기 데이터 표를 막대그래프 + 막대 클릭 시 그 분기의 핵심 인사이트가 아래에 펼쳐지는 형태로."
Week 2 · 인터랙티브 가이드 만들기 — 강의 슬라이드 · 전체 커리큘럼
표준: google-labs-code/design.md