Week 01 · Vibe Coding · Interactive Report

바이브 코딩 입문과

인터랙티브 보고서 작성

Claude Code 입문부터
클릭 가능한 interactive HTML 보고서 제작까지

🧩 개념 30분 💻 실습 30분 💬 Q&A 10분

SPACE · → · 화면 우측 클릭으로 다음 슬라이드

오늘의 목표

이 세션이 끝나면

3가지를 할 수 있다

1

프롬프트 엔지니어링 기초 이해

역할·목표·범위·형식이 결과를 바꾸는 것을 체감한다

2

Claude Code 설치 + 첫 실행 성공

VS Code · Claude Code 플러그인 설치 완료

3

첫 번째 Claude 프로젝트 완성

대화만으로 나만의 HTML 페이지를 만들어 브라우저에서 연다

30' 개념 강의 30' 실습 10' Q&A

PART 01

개론

바이브 코딩이란 무엇인가

개론 · 1.1

Andrej Karpathy

전 Tesla AI 책임자 · OpenAI 공동창업자

"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

— @karpathy · 2025.02.03

2022.11

ChatGPT 출시

2023–24

Cursor · Copilot

2025.02

"Vibe Coding" 탄생

2026.04

지금 — 우리 팀

개론 · 1.2

기존 개발 vs 바이브 코딩

기존 개발

문법 암기 필수

에러 혼자 해결

수주~수개월 개발

개발자만 가능

바이브 코딩

말로 설명하면 됨

에러 메시지 붙여넣기

몇 시간~며칠

누구나 가능

Claude는 세계 최고의 개발자 동료다. 나는 기획자이고, Claude에게 지시한다.

개론 · 1.3

바이브 코딩의 핵심

질문과 대화

💬

대화로 개발

코드 문법 대신 의도를 말로 전달한다

🎯

구체적으로 질문

좋은 질문이 좋은 결과를 만든다

🔄

반복으로 완성

대화를 거듭하며 원하는 결과로 다듬는다

개론 · 1.4

질문의 중요성

모호한 질문은
모호한 결과를 낳는다

Garbage In, Garbage Out — 입력의 품질이 출력의 품질을 결정한다

목적 명시

무엇을, 왜 만드는지
명확히 설명한다

범위 지정

어디까지 수정할지
명확히 제한한다

형식 지정

원하는 출력 방식을
미리 정해준다

개론 · 1.5

23세 청년이 AI와 대화 80분으로
60년 미해결 수학 난제를 풀었다

폴 에르되시(Erdős)의 원시 집합(Primitive Sets) 추측 — 수십 년간 수학자들이 손대지 못한 난제.
리암 프라이스(23세)는 수학 전공자도 아니었습니다. 그는 AI와 대화하며 증명을 완성했습니다.

테런스 타오 교수 (Fields Medal)

"AI가 수학자들의 관성적 증명 방식에서 벗어나, 전혀 다른 분야의 공식을 접목했다"

새로운 연구 방식

바이브 매싱 (Vibe Mathing) — 바이브 코딩처럼, 엄밀한 수식보다 AI와의 직관적 대화로 연구하는 패러다임

코딩도, 수학도, 글쓰기도 — AI는 도메인을 가리지 않습니다. 우리가 오늘 배우는 건 그 시작입니다.

개론 · 1.6

Claude는

코딩 도구가 아닙니다

수학, 글쓰기, 연구, 분석 —
AI는 대화로 문제를 푸는 범용 도구입니다

개론 · 1.7

클로드로 뭘 할 수 있을까

Claude는 개발 도구가 아닙니다 — LLM 기술의 발전으로 업무 전반을 수행하는 올인원 어시스턴트가 되었습니다

💻

코딩 · 웹 제작

사이트 · 앱 · 자동화 스크립트 생성

📊

데이터 · 엑셀

스프레드시트 분석 · 정리 · 자동화

📑

문서 · PPT

보고서 · 기획서 · 프레젠테이션 초안

🖼️

이미지 생성

디자인 시안 · 배너 · 인포그래픽

⚙️

업무 자동화

반복 작업 제거 · API 연동 · 알림 자동화

✨

그 외 모든 것

말로 설명할 수 있는 것은 무엇이든 시도해 보세요

PART 02

환경 설정

사전 준비 · VS Code · Claude Code · 로그인 · Node.js

환경 설정 · 2.1

시작 전 준비사항

설치 전에 이 세 가지를 먼저 확인하세요

🔑

Claude Pro 계정

무료 플랜 사용 불가
Pro ($20/월) 이상 필요

claude.ai → 구독 확인

🌿

Git for Windows

Claude Code CLI 실행에 필수.
기본값으로 설치하면 됩니다.

git-scm.com → Download

💻

시스템 사양

OS: Windows 10 (1809+) / 11

RAM: 4GB 이상 권장 16GB

저장: 500MB 여유 공간

인터넷: 상시 연결 필요

📥 Claude Pro 구독 claude.ai 📥 Git for Windows git-scm.com

환경 설정 · 2.2

VS Code 설치

코드를 편집하고 Claude와 대화하는 코드 편집기

1

code.visualstudio.com 접속

공식 사이트에서 무료 다운로드

2

Download 클릭

Windows x64 인스톨러 다운로드

3

설치 후 실행 확인

시작 메뉴에서 VS Code 실행

Visual Studio Code

–

□

✕

⬡ Visual Studio Code

↓ Download for Windows

EXPLORER

📂 my-portfolio

📄 index.html

<!DOCTYPE html>
<html lang="ko">
  <!-- AI가 작성한 코드 -->

mainindex.html · UTF-8

📥 VS Code 다운로드 code.visualstudio.com 📘 Windows 설치 가이드 docs

환경 설정 · 2.3

플러그인 vs CLI

🧩 플러그인 — 오늘 사용

VS Code 확장

✓ 파일을 보면서 바로 대화

✓ 코드 자동 하이라이팅 + 적용

✓ 설치만 하면 바로 시작

△ VS Code 내에서만 동작

⌨️ CLI — 나중에 배울 것

명령 프롬프트(cmd)

✓ 자동화 파이프라인 연동

✓ 에디터 없이 어디서든 실행

△ 명령어 문법 익숙해야 함

△ 시각적 피드백 없음

💡 처음엔 플러그인으로 시작 — 직관적이고 안전합니다

환경 설정 · 2.4

Claude Code 플러그인 설치

VS Code 마켓플레이스에서 검색 → Install

1

Ctrl+Shift+X 누르기

Extensions 패널 열기

2

"Claude Code" 검색

Anthropic 공식 확장 선택

3

Install 클릭

사이드바에 Claude 아이콘 생성 확인

Extensions — Visual Studio Code

–

□

✕

🔍 Claude Code

Claude Code

Anthropic · ⭐ 4.9 · 50K+

Install

GitHub Copilot · 2M+

Install

📥 Claude Code 확장 marketplace ⚡ VS Code에서 바로 설치 vscode://

환경 설정 · 2.5

CLI 설치 사전 준비

Claude Code CLI 실행에는 Git과 Node.js가 필요합니다

🪟Windows

# Git 설치
winget install --id Git.Git

# Node.js LTS 설치
winget install --id OpenJS.NodeJS.LTS

설치 후 PowerShell 재시작
또는 git-scm.com / nodejs.org 직접 다운로드

🍎macOS

# Homebrew 없는 경우 먼저 설치
/bin/bash -c "$(curl -fsSL brew.sh)"

# Git · Node.js 한 번에 설치
brew install git node

Git은 Xcode CLT로도 설치 가능
xcode-select --install

# 설치 확인 (공통)
git --version git version 2.x node --version v22.x.x

📥 Git for Windows git-scm.com 📥 Node.js LTS nodejs.org 🍎 Homebrew brew.sh

환경 설정 · 2.6

Claude Code CLI 설치

터미널에서 직접 실행 — Git · Node.js 설치 후 진행

🪟Windows — PowerShell 관리자

# Claude Code 설치
irm https://claude.ai/install.ps1 | iex

⚠️ 스크립트 차단 시

Set-ExecutionPolicy RemoteSigned
실행 후 재시도

🍎macOS — Terminal

# npm으로 전역 설치
npm install -g @anthropic-ai/claude-code

권한 오류 시 앞에 sudo 추가
설치 후 터미널 재시작

# 설치 확인 (공통)
claude --version 2.x.x ← 버전 나오면 성공

📘 Claude Code 설치 가이드 docs.claude.com 📦 npm 패키지 npmjs.com

환경 설정 · 2.7

핵심 개념

용어 정리 · 실행 흐름 · 설정 파일 · CLAUDE.md · Hooks

핵심 개념 · 3.1

Claude 핵심 용어 정리

Claude Code 를 시작할 때 꼭 알아야 할 핵심 용어들

LLM 기초

컨텍스트 창

Context Window

Claude가 한 번에 처리할 수 있는 텍스트 범위. 대화·파일·코드가 모두 포함. 최대 1M 토큰

토큰

Token

LLM의 최소 처리 단위. 한글 1자 ≈ 1–2토큰, 영어 1단어 ≈ 1토큰. 비용·속도에 직접 영향

Claude Code

스킬

Skill

/슬래시 명령어로 호출하는 재사용 가능한 작업 묶음. commands/*.md 파일로 정의

MCP

Model Context Protocol

외부 도구·서비스를 Claude에 연결하는 표준 규약. 브라우저·DB·API 등 연동 가능

에이전트

Agent

목표 달성을 위해 자율적으로 도구를 선택·실행하는 Claude 인스턴스

서브 에이전트

Sub Agent

특정 작업을 위해 다른 에이전트가 생성하는 전문 에이전트. 병렬 처리 가능

팀 에이전트

Team Agent

역할이 다른 에이전트들이 협력해 복잡한 작업을 처리하는 구조. 코드리뷰·테스트 등

핵심 개념 · 3.2

Claude 실행 구조

세션 시작부터 응답까지 — 각 단계에서 어떤 파일이 동작하는지 파악하면 더 잘 활용할 수 있습니다

1

세션 시작 — 파일 자동 로드

Claude가 컨텍스트를 준비하는 단계

CLAUDE.md .claude/memory/*.md

↓

2

사용자 프롬프트 수신

질문·지시 입력 / 슬래시 명령어

commands/*.md

↓

3

PreToolUse Hook

도구 호출 전마다 자동 검증·차단 ↻

settings.json ↻ 호출 전마다 실행

↓

4

도구 실행

파일 읽기 · 수정 · Bash 명령 실행

↓

5

PostToolUse Hook

도구 호출 후마다 자동 포맷·린트·체크 ↻

settings.json ↻ 호출 후마다 실행

↓

6

응답 반환

텍스트 · 코드 · 파일 수정 결과 출력

↓

S

Stop Hook

세션 종료 시 1회 자동 실행 (빌드 검증 등)

settings.json 종료 시 1회 실행

핵심 개념 · 3.3

.claude 설정 파일

실행 구조에서 읽히는 3가지 파일 — 프로젝트 폴더의 .claude/ 아래에 저장합니다

.claude/settings.json

권한 · Hook · 환경 설정

도구별 허용/차단, 자동 Hook 등록, 환경변수 관리

{
  "hooks": { ... },
  "permissions": { ... }
}

.claude/commands/

커스텀 슬래시 명령어

deploy.md 파일 저장 → /deploy 명령어 자동 생성

commands/
  deploy.md
  review.md
  impeccable.md

.claude/memory/

세션 간 기억 저장

세션 닫혀도 저장된 정보는 다음 세션 시작 시 자동 로드

# user.md
역할: 마케팅 기획자
선호: 한국어, 간결한 설명

# project.md
목표: 포트폴리오 사이트
테마: 다크 + 보라색

핵심 개념 · 3.4

CLAUDE.md 란?

Claude에게 주는 프로젝트 설명서 — 한 번만 쓰면 끝

여기에 무엇을 씁니까

📁 프로젝트 개요
무엇을 만드는지, 누가 사용하는지

🎨 디자인 규칙
색상, 폰트, 레이아웃 기준

📝 응답 방식
언어, 설명 수준, 코드 스타일

🚫 금지 사항
건드리지 말아야 할 파일·기능

📁 프로젝트 루트에 CLAUDE.md 저장 → 자동 인식

# 프로젝트 개요
포트폴리오 인트로 사이트
소유자: 홍길동 (마케팅 기획자)

# 디자인 규칙
- 배경: 다크 (#0e0e12)
- 강조색: 보라 (#5856d6)
- 폰트: Noto Sans KR

# 응답 방식
- 항상 한국어로 답변
- 변경 전 계획 먼저 설명
- 파일은 단일 HTML로 유지

# 금지 사항
- hero 레이아웃 변경 금지
- 외부 라이브러리 추가 금지

핵심 개념 · 3.5

Hooks — 자동 실행 규칙

특정 이벤트에 자동으로 실행되는 쉘 명령어

PreToolUse

도구 실행 전 — 검증, 차단, 파라미터 수정

PostToolUse ← 가장 많이 씀

파일 저장/수정 후 — 자동 포맷, 린트, 타입 체크

Stop

세션 종료 시 — 자동 빌드, 최종 확인

// .claude/settings.json
{
  "hooks": {
    // ③ 실행 전 위험 명령 차단
    "PreToolUse": [{
      "matcher": "Bash",
      "command": "check_safe.sh"
    }],
    // ⑤ 파일 수정 후 자동 포맷
    "PostToolUse": [{
      "matcher": "Write|Edit",
      "command": "prettier --write $FILE"
    }],
    // 세션 종료 후 최종 검증
    "Stop": [{
      "command": "npm run build"
    }]
  }
}

PART 04

Claude 활용

첫 프로젝트 · 대화하기 · 세션 관리 · 슬래시 명령어

Claude 활용 · 4.1

첫 프로젝트 시작하기

로그인 완료 후 — 폴더 생성부터 첫 지시까지 5단계로 따라하세요

1

작업 폴더 만들기

바탕화면 우클릭 → 새로 만들기 → 폴더
이름: my-portfolio 입력 후 Enter

2

VS Code에서 폴더 열기

메뉴바 파일(File) → 폴더 열기…
→ my-portfolio 선택 → 폴더 선택 클릭

3

Claude 패널 열기

좌측 사이드바 Claude 아이콘(오렌지) 클릭
하단 채팅창이 열리면 준비 완료

4

프로젝트 초기화

채팅창에 /init 입력 → Enter
CLAUDE.md 자동 생성 — 파일 목록에서 확인

5

첫 지시 보내기

"포트폴리오 소개 페이지 index.html을 만들어줘"

VS Code — my-portfolio

–

□

✕

파일(F)

›

폴더 열기…

›

폴더 선택

탐색기

📂 MY-PORTFOLIO

📄 CLAUDE.md

📄 index.html

CLAUDE CODE

/init

✅ CLAUDE.md 생성 완료
프로젝트 구조 분석 완료

index.html을 만들어줘

⚡ index.html 작성 중…

메시지 입력…

Claude 활용 · 4.2

Claude와 효과적으로 대화하기

계획 확인 · 질문 유도 · 직접 수정 · 구조화된 프롬프트로 품질을 높입니다

plan

실행 전에 계획만 먼저 보여달라는 지시

"plan: 레이아웃 전체 개편해줘"
→ 수정 없이 계획표만 출력

ask

실행 전 추가 질문을 하도록 유도

"ask: 버튼 색상 변경해줘"
→ Claude가 어떤 색인지 되물음

edit

파일을 즉시 직접 수정 — 가장 많이 사용

"헤더 색상을 파란색으로 바꿔줘"
→ Claude가 파일을 바로 수정

효과적인 프롬프트 구조

역할 → 너는 시니어 프론트엔드 개발자야

대상 → index.html의 헤더 영역을

결과 → 모바일에서도 잘 보이게 수정해줘

💡 여러 줄 입력은 Shift + Enter
새 주제엔 /clear로 대화 초기화

Claude 활용 · 4.3

세션을 통해 대화 이어가기

Claude Code는 컨텍스트 창 안에서 대화를 기억합니다 — 세션이 닫히면 초기화됩니다

세션 내 관리

대화가 길어지면 느려짐
→ /compact 로 압축

주제가 바뀌면 초기화
→ /clear 로 새 대화

세션 종료 후 재개

Claude Code 재실행 시
이전 대화 내용은 사라짐

"이전에 하던 작업 이어서 해줘"
→ 파일 상태로 맥락 복원

CLAUDE.md 활용

# CLAUDE.md
## 프로젝트 목적
포트폴리오 사이트
## 기술 스택
HTML, CSS
## 주의사항
모바일 우선 설계

프로젝트 루트에 저장하면
세션마다 자동으로 읽힘

Claude 활용 · 4.4

슬래시 명령어

/ 만 입력하면 자동완성 목록이 나타납니다

/help

사용 가능한 명령어 목록 보기

/clear

현재 대화 초기화 — 새 주제 전환 시

/compact

긴 대화 요약 — 컨텍스트 절약

/init

CLAUDE.md 자동 생성

/cost

토큰 사용량 및 비용 확인

/theme

터미널 테마 변경

/bug

Anthropic에 버그 직접 보고

/exit

Claude Code 종료

💡 성능이 느려지면 /compact, 새 주제면 /clear

Week 01 · PART 05 · 2026

Claude Code로

인터랙티브 보고서
초안 만들기

정적 PPT·PDF·Word를 직접 동작시켜볼 수 있는 HTML 보고서로 바꾸는 1주차 실습

🧩 개념 15분 💻 실습 25분 💬 Q&A 10분

SPACE · → · 화면 우측 클릭 — 개념 이해부터 첫 HTML 초안까지

오늘의 목표

본인 자료 → 인터랙티브 보고서 초안

이번 강의의 목표는 작동하는 첫 HTML 결과를 직접 만들어보는 것입니다

1PART 05

형태 이해

정적 자료와 인터랙티브 보고서 비교

2PART 06 ★ 실습

한 줄 입력

자료 링크 → 첫 HTML 초안

3체크

결과 확인

정보 구조·가독성·부족한 점 보기

4마무리

개선 포인트 정리

초안을 보고 다음 수정 요청을 정리

💡 끝나면 가져갈 것 → 본인 자료로 만든 첫 HTML 보고서 초안 slides.html과 개선 요청 목록.

PART 05

인터랙티브 보고서 이해

정적 자료를 직접 만져보는 HTML 문서로 바꾸기

보고서 만들기 · 5.1

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

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

정적 PPT/PDF

표지

현황

계획

결론

웹 인터랙티브 보고서

PART 02

의사결정 시뮬레이터

A안

B안

C안

슬라이더로 변수 조정 · 청중 실시간 참여

⇆

수정

자연어 한 줄

URL 1개

★ 인터랙션

청중 참여

검색

Cmd+F

발전

초안 → 개선 포인트

보고서 만들기 · 5.2

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

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

🖱① 클릭 토글click ↓

A안 — 전사 도입

⚡ 빠름 · 💸 5억 · ⚠ 리스크

B안 — 파일럿

🛡 안전 · 💸 1억 · ⏱ 6개월

🎚② 슬라이더drag ⇄

도입 인원: 50명

예상 절약: 420시간/월

📊③ 차트 호버hover →

A

B

C

막대에 마우스 올리면 수치

🔄④ 탭 전환click ⇆

⚡ 전사 — 빠름·고비용·고리스크

✨⑤ 애니메이션click ▶

NPS 향상: 0pt

💡 다 만져보셨으면 다음 페이지에서 — "내 자료에 어떤 게 맞을까?" 매칭 가이드

보고서 만들기 · 5.3 · ⭐ 라이브

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

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

탭 전환 — 한 번에 한 안만 보기

월 ₩2.4M · 도입 1주
유지 인력 0명 · 확장 즉시 · 데이터 외부 저장

월 ₩0.8M · 도입 6주
유지 인력 1명 · 확장 수동 · 데이터 내부 보관

월 ₩1.5M · 도입 3주
유지 인력 0.5명 · 핵심만 내부, 그 외 클라우드

체크리스트 + 진행률 — 클릭해서 완료

✓

1일차 — 노트북·계정 발급 받기

✓

2일차 — Slack·이메일 설정

✓

3일차 — 팀 미팅 참가

✓

1주차 — 첫 작업 PR 제출

슬라이더 + 라이브 계산

투자 인원 5명

월 비용

₩25M

예상 ROI

+9.0M

필터 칩 + 즉시 좁혀 보기

iOS 푸시 알림 SDK모바일

리액트 디자인 시스템웹

결제 API v2백엔드

Android 위젯모바일

로그 파이프라인백엔드

타임라인 + 클릭으로 시점 선택

킥오프

4/15

설계 완료

4/22

α 빌드

5/06

β 출시

5/20

정식 발표

6/03

킥오프 (4/15) — 팀 4명 합류, 목표·범위 합의, 주간 동기화 시작

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

보고서 만들기 · 5.4

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

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

🌐

옵션 A

Gemini Canvas

브라우저에서 채팅창 옆에 Canvas 미리보기 — 가장 쉬운 시작

+ 장점
• 설치 0개, 즉석 미리보기
• 비개발자에게 가장 친근

− 단점
• 폴더·파일 관리 약함
• 반복 수정 시 매번 재생성

💬

옵션 B

Claude 앱·웹 Artifacts

채팅창에서 단일 HTML 받아 Artifacts 라이브 미리보기 — 빠르고 가볍게

+ 장점
• 채팅 1번에 결과
• Artifacts 라이브 미리보기

− 단점
• 파일 수정 어려움 (다시 받기)
• 폴더 단위 작업 X

🛠

옵션 C ★ 본 강의

Claude Code (VSCode·CLI)

폴더·파일 직접 다루는 환경 — 본인 자료를 진짜로 발전시킴

+ 장점
• 첫 HTML 결과와 이후 개선 흐름이 강력
• 폴더로 자료 영구 보관
• W3에서 GitHub 연동 자연스러움

− 단점
• VSCode 설치 필요 (1주차 완료)

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

PART 06

실습 — 첫 HTML 보고서 만들기

주제 — 2026 디자인 트렌드 분석 보고서 · "이 링크로 만들어 줘" 한 줄에서 시작

환경 → 주제 선정 → 한 줄 입력 → 초기 결과 → 키워드로 발전 (반복) → 최종 + Mode B

실습 · 6.1 · 환경 준비

먼저 — 폴더 만들고 VSCode 열기

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

1

새 폴더 만들기

예: design-trends-2026

2

VSCode에서 폴더 열기

파일 → 폴더 열기 → 방금 만든 폴더

3

Claude Code 패널 열기

좌측 사이드바 Claude 아이콘 (오렌지)

4

채팅창 준비 완료

다음 슬라이드 — 발전·실습 사이클

완성될 폴더 구조

# 처음엔 비어있음
📂 design-trends-2026/

# 첫 입력 후
📂 design-trends-2026/
  📄 slides.html # 인터랙티브 보고서

# 발전·반복 후 (W3 GitHub)
📂 design-trends-2026/
  📄 slides.html
  📄 README.md

실습 · 6.2 · 제작 사이클 ⭐ 핵심

첫 결과를 만들고 바로 확인합니다

자료 선택 → 한 줄 요청 → HTML 초안 확인 → 개선점 메모. 이 흐름을 한 번 끝까지 경험합니다.

STAGE 1

🎯

주제 선정

참고 페이지 1~2개
골라두기

STAGE 2

📝

한 줄 입력

"이 링크로 보고서
만들어 줘"

STAGE 3

👀

초기 결과 + 점검

부족한 점
3가지 메모

STAGE 4 ★ 점검

⚡

개선점 정리

레이아웃·가독성·
빠진 내용 체크

→→✓

💡 세션 산출물 — 열리는 HTML 파일과 개선 방향을 정리합니다

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

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

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

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

CANVA

Imperfect by Design

"의도된 불완전함" — 손그림·러프·인간적 흔적이 2026 기준

canva.com/newsroom/
news/design-trends-2026

FIGMA

Web Design Trends

3D·WebGL·스크롤 트리거 인터랙션 — 디지털 경험 중심

figma.com/resource-
library/web-design-trends

ADOBE

2026 Creative Forecast

감각·연결·놀이·로컬 4테마 — 채도 높은 컬러 + 초현실

adobe.com/express/
learn/blog/design-trends-2026

DESIGN+ ★ 한국

키워드로 보는 2026

핀터레스트·캔바 키워드 종합 — 한국어 트렌드 큐레이션

design.co.kr/article/
142896

⏱ 30초 메모

주제: "2026 디자인 트렌드 분석 보고서" · 시작점: Canva + Design+ 2개 링크

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

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

채팅창에 — 한 줄

Claude Code · 채팅창

https://design.co.kr/article/142896
이 링크로 디자인 트렌드 분석 보고서 만들어 줘.

실습 · 6.5 · STAGE 3 — 첫 결과 ⭐ 초안 라이브 HTML

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

아래는 design.co.kr/142896 링크 + "디자인 트렌드 분석 보고서 만들어 줘" 한 줄로 만든 첫 HTML 결과입니다. 정보 구조와 표현 방식을 보며 개선할 지점을 확인합니다.

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

새 탭에서 열기 ↗

slides.html — 초안 (키워드 없이)

정보는 들어왔지만 표현은 아직 평범합니다. 오늘은 여기서 개선할 지점을 확인합니다.

마무리 · 다음 주 참고 페이지

Week 02로 이어집니다

첫 HTML 결과물은 다음 세션에서 getdesign 등에서 받은 design.md 기준, Skill, Stitch MCP 연결 흐름을 적용해 더 정교한 인터랙티브 문서로 발전합니다.

REFERENCE PAGE

2주차 Skill·MCP 강의 문서 열기 ↗

Skill·MCP 기반 디자인 워크플로우

연계 포인트

① slides.html 결과 구조 확인

② 개선 방향을 디자인 기준으로 전환

③ 2주차에서 design.md, Skill, Stitch MCP로 품질 고도화

공개 링크: https://ai-learning-2.pages.dev/week2/