오늘의 흐름

6단계로 본인 자료 → 인터랙티브 가이드

왼쪽부터 차례대로 따라가면 — 90분 안에 본인 PPT/회의록이 만지는 가이드로 바뀝니다

💡 끝나면 가져갈 것 → slides.html + DESIGN.md + 좌상단 라이브 테마 토글. 좌상단 [기본·다크·임원] 지금 한 번 눌러보세요.

개론 · 1.1

지난주 그 도구로, 이번엔 살아 움직이게

W1에서 만든 정적 HTML 1장 → 이번 주는 같은 Claude Code로 클릭·넘김·애니메이션이 살아있는 가이드

💡 새 도구 설치 없이 — 1주차 환경 그대로 한 단계 진화시킵니다

개론 · 1.2

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

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

개론 · 1.3

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

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

개론 · 1.4 · ⭐ 라이브

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

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

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

주제 정하기 · 2.1

먼저 — 어떤 자료부터 변환할까요?

막막하면 책상 위 자료부터. 5가지 중 가장 자주 만지는 것 하나만 골라보세요. 오늘 끝나면 그 자료가 인터랙티브로 바뀝니다.

주제 정하기 · 2.2 · ⭐

30초 정리 — 누구한테 · 왜 · 얼마나

Claude는 똑똑하지만 청중을 모릅니다. 30초만 적고 들어가면 — 첫 결과부터 청중에 맞게 나옵니다.

Claude로 정리 · 3.1

자료를 통째로 던지세요

PPT 파일이든·회의록이든·메모든 — 그대로 Claude에 붙이고 "청중·목적에 맞게 정리해줘" 한 줄.

💡 자료가 길면 — Claude가 알아서 압축합니다. 200페이지도 OK.

Claude로 정리 · 3.2 · ⭐

받은 구조 — 3가지만 점검

Claude의 첫 정리는 보통 95% 좋고 5%가 빠집니다. 그 5%를 한 줄로 보강하면 끝.

💡 점검 끝 — 다음 PART에서 이 목차를 인터랙티브 PPT로 변환합니다

PPT 만들기 · 4.1

처음 구성하기 — 폴더 + 한 줄

새 도구 설치 0개 — VSCode 열고 폴더 만들고 채팅 한 줄이면 시작

PPT 만들기 · 4.2 · ⭐ 핵심

첫 프롬프트는 4칸을 채우면 끝

"PPT 만들어줘"라고만 하면 평범한 결과가 나와요. 대신 WHO·WHAT·HOW·LOOK 네 칸을 채우면 — 첫 시도부터 우리 팀 톤이 자연스럽게 묻어납니다.

PPT 만들기 · 4.3 · ⭐ 라이브

방금 그 4-slot을 입력하면 — 이런 결과가 나옵니다

왼쪽이 입력한 프롬프트, 오른쪽이 Claude가 만든 8장. 오늘 남은 시간 동안 이 자료 하나를 다듬고 디자인 시스템으로 정리해 갑니다.

📍 이 디자인 리서치 보고서 자료를 다음 슬라이드들에서 — 디테일 수정 → 디자인 시스템 → 테마 변경까지 다듬어 갑니다

PPT 만들기 · 4.4

결과를 받았어요. 뭘 확인해야 할까요?

화면이 예뻐 보이는 건 일단 두고 — 이 4가지가 들어있는지부터 보세요. 빠진 게 있으면 "이것도 추가해줘" 한 줄로 보강.

💡 누락된 게 있으면 — "진행바도 추가해줘" 한 줄로 보강

디테일 수정 · 5.1 · ⭐ 핵심

"이 부분 바꿔줘"는 절반만 통합니다

한 곳을 정확히 고치려면 — Claude가 추측하지 않게 위치·요소·변경·이유 네 가지를 다 말해주세요. 방금 만든 보고서 3페이지 제목을 예로 보겠습니다.

💡 이유가 가장 중요 — Claude가 의도를 이해하면 다음 비슷한 변경에서도 일관되게 적용

디테일 수정 · 5.2

처음엔 누구나 같은 함정에 빠져요

제가 처음 가르칠 때 본 3가지 패턴 — 이 패턴만 알면 90%는 피합니다. 본인 다음 수정에서 한 번만 의식해 보세요.

💡 막혔을 때 자기 점검 — 위치·요소·변경·이유 4개 모두 들어있나?

디테일 수정 · 5.3

"어, 이거 아니야" 했을 때 — 되돌리기 3종

실수해도 괜찮습니다. Git을 모르더라도 자연어 한 줄이면 이전 상태로 돌아갈 수 있어요.

💡 자연어 롤백이 git 명령보다 직관적 — 비개발자에겐 충분한 안전망

디테일 수정 · 5.4 · ⭐ 다리

잠깐 — 코드 안을 직접 들춰봅시다

매번 한 곳씩 고치는 것도 좋지만, 파일을 열어보면 같은 값이 반복되어 있어요. 직접 세어볼게요. PART 06으로 넘어가는 다리입니다.

💬 직접 확인하려면: "slides.html 열고 #007AFF가 몇 번 나오는지 세어줘"

디자인 시스템 · 6.1

방금 본 8번 — 그 반복에 이름이 있어요

앞 슬라이드에서 직접 세어봤죠. 같은 값을 8군데에 적는 대신 한 곳에 정의하고 8군데가 그걸 가리키게 — 이걸 디자인 토큰이라고 부릅니다 · 구글 DESIGN.md 표준의 핵심 단위

💡 비개발자도 토큰 개념만 알면 충분 — CSS·코드 몰라도 자연어로 다룹니다

디자인 시스템 · 6.2 · ⭐

8개 #007AFF를 1개 토큰으로 — DESIGN.md 만들기

🌐 google-labs-code/design.md · 구글 공개 표준 (alpha)

디자인 시스템 · 6.3 · ⭐

DESIGN.md를 만들었어요 — 이제 어떻게 씁니까?

두 가지 상황이 있어요. 새 자료를 만들 때, 그리고 기존 자료를 정리할 때. 둘 다 @참조 한 줄로 끝납니다.

디자인 시스템 · 6.4 · ⭐ 라이브

한 줄만 바꿔도 30장이 동시에 변합니다

8번 손으로 고치는 대신, 토큰 1개만 바꾸면 됩니다. 아래 슬라이더로 색을 움직여 보세요 — 지금 보고 있는 발표 자료 자체가 즉시 변할 거예요.

💬 자연어로도 — "DESIGN.md의 액센트를 주황색으로 바꿔줘" 한 줄

디자인 시스템 · 6.5 · ⭐ 라이브

색 한 개 말고, 분위기 자체를 바꾸려면 — 테마

디테일 수정은 단추 하나 바꾸는 일이고, 테마는 옷 전체를 갈아입히는 일입니다. 좌상단 [기본·다크·임원] 버튼이 그 예 — 같은 콘텐츠가 세 가지 분위기로.

💡 구분 핵심: 변경이 2곳 이상 영향 = 테마 · 1곳만 = 디테일

🟢 기초 실습 · 7.1 · 15분

변환 1회 — 회의록 → 4장 인터랙티브

✅ 완료: 4장 + 디테일 수정 1번 + 옆 사람이 발표 모드 진입 확인

🔴 고급 실습 · 7.2 · 20분

본인 PPT 변환 + 디자인 시스템 적용

✅ 완료: 변환 + DESIGN.md + 일괄 통일 + (도전) 테마 토글

Week 02 완료

숙제 & 다음 주 다리

AI 팀 교육 · Week 02 · Claude로 인터랙티브 가이드 만들기