rupy1014
67ce338549
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1698 lines
53 KiB
HTML
1698 lines
53 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>클로더즈 첫 수업 - 빌더가 되자 (30분)</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* ===== CSS Variables ===== */
|
|
:root {
|
|
--primary: #7C3AED;
|
|
--primary-light: #A78BFA;
|
|
--primary-dark: #5B21B6;
|
|
--primary-gradient: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #A78BFA 100%);
|
|
|
|
--secondary: #E11D48;
|
|
--secondary-light: #FB7185;
|
|
|
|
--bg-white: #FFFFFF;
|
|
--bg-cream: #FFF7ED;
|
|
--bg-purple: #F5F3FF;
|
|
--bg-gray: #F9FAFB;
|
|
--bg-dark: #1F2937;
|
|
|
|
--text-primary: #1F2937;
|
|
--text-secondary: #4B5563;
|
|
--text-muted: #9CA3AF;
|
|
--text-white: #FFFFFF;
|
|
|
|
--accent-gold: #F59E0B;
|
|
--accent-purple: #7C3AED;
|
|
--accent-blue: #3B82F6;
|
|
--accent-green: #10B981;
|
|
--accent-red: #EF4444;
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
|
|
--shadow-md: 0 10px 30px rgba(124,58,237,0.1);
|
|
--shadow-lg: 0 25px 50px rgba(124,58,237,0.15);
|
|
|
|
--radius-sm: 8px;
|
|
--radius-md: 16px;
|
|
--radius-lg: 24px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg-white);
|
|
color: var(--text-primary);
|
|
line-height: 1.8;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* ===== 슬라이드 기본 ===== */
|
|
.slide {
|
|
min-height: 100vh;
|
|
padding: 80px 10%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
position: relative;
|
|
background: var(--bg-white);
|
|
}
|
|
|
|
.slide-title {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
background: linear-gradient(180deg, var(--bg-purple) 0%, var(--bg-white) 100%);
|
|
}
|
|
|
|
.slide-alt {
|
|
background: var(--bg-gray);
|
|
}
|
|
|
|
.slide-dark {
|
|
background: var(--bg-dark);
|
|
color: var(--text-white);
|
|
}
|
|
|
|
.slide-purple {
|
|
background: var(--bg-purple);
|
|
}
|
|
|
|
/* ===== 타이포그래피 ===== */
|
|
h1 {
|
|
font-size: 6rem;
|
|
font-weight: 800;
|
|
margin-bottom: 1rem;
|
|
background: var(--primary-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 4.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 2rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.slide-dark h2 {
|
|
color: var(--text-white);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
p {
|
|
font-size: 2.4rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 3rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 2rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.highlight {
|
|
color: var(--primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.gradient-text {
|
|
background: var(--primary-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ===== 인용구 ===== */
|
|
.big-quote {
|
|
font-size: 3.5rem;
|
|
font-style: italic;
|
|
color: var(--text-primary);
|
|
border-left: 8px solid var(--primary);
|
|
padding-left: 2.5rem;
|
|
margin: 2rem 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.center-quote {
|
|
font-size: 4rem;
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===== 카드 ===== */
|
|
.card {
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
margin: 1rem 0;
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.card-grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.card-warning {
|
|
border-color: var(--accent-red);
|
|
background: rgba(239, 68, 68, 0.05);
|
|
}
|
|
|
|
.card-primary {
|
|
border-color: var(--primary);
|
|
background: var(--bg-purple);
|
|
}
|
|
|
|
.card-success {
|
|
border-color: var(--accent-green);
|
|
background: rgba(16, 185, 129, 0.05);
|
|
}
|
|
|
|
/* ===== 비교 테이블 ===== */
|
|
.compare-table {
|
|
width: 100%;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.compare-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.compare-item {
|
|
padding: 2rem;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.compare-old {
|
|
background: rgba(0,0,0,0.05);
|
|
border-left: 6px solid var(--text-secondary);
|
|
}
|
|
|
|
.compare-new {
|
|
background: var(--bg-purple);
|
|
border-left: 6px solid var(--primary);
|
|
}
|
|
|
|
/* ===== 리스트 ===== */
|
|
.list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.list li {
|
|
font-size: 2.6rem;
|
|
padding: 1.2rem 0;
|
|
padding-left: 3rem;
|
|
position: relative;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.list li::before {
|
|
content: "→";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--primary);
|
|
font-weight: 800;
|
|
font-size: 2.6rem;
|
|
}
|
|
|
|
/* ===== 타임라인 ===== */
|
|
.timeline {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin: 3rem 0;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.timeline-item {
|
|
text-align: center;
|
|
flex: 1;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.timeline-icon {
|
|
font-size: 4.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.timeline-label {
|
|
font-size: 2rem;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timeline-value {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.timeline-arrow {
|
|
font-size: 4rem;
|
|
color: var(--primary);
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ===== 코드 블록 ===== */
|
|
.code-block {
|
|
background: var(--bg-dark);
|
|
border-radius: var(--radius-md);
|
|
padding: 2rem;
|
|
margin: 1.5rem 0;
|
|
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
font-size: 2rem;
|
|
overflow-x: auto;
|
|
color: var(--text-white);
|
|
}
|
|
|
|
.code-block .command {
|
|
color: #C084FC;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.code-block .comment {
|
|
color: #A0AEC0;
|
|
}
|
|
|
|
.code-block .result {
|
|
color: #68D391;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ===== 테이블 ===== */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 2rem 0;
|
|
font-size: 2rem;
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
th, td {
|
|
padding: 1.5rem 2rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid rgba(0,0,0,0.08);
|
|
}
|
|
|
|
th {
|
|
background: var(--bg-purple);
|
|
color: var(--primary-dark);
|
|
font-weight: 800;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
td {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ===== 섹션 번호 ===== */
|
|
.section-number {
|
|
font-size: 4.5rem;
|
|
font-weight: 900;
|
|
color: rgba(124, 58, 237, 0.1);
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 10%;
|
|
}
|
|
|
|
/* ===== 스텝 ===== */
|
|
.steps {
|
|
counter-reset: step;
|
|
}
|
|
|
|
.step {
|
|
position: relative;
|
|
padding-left: 6rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.step::before {
|
|
counter-increment: step;
|
|
content: counter(step);
|
|
position: absolute;
|
|
left: 0;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: var(--primary-gradient);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 2rem;
|
|
color: var(--text-white);
|
|
}
|
|
|
|
/* ===== 플로우 다이어그램 ===== */
|
|
.flow-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 2rem;
|
|
margin: 2rem 0;
|
|
padding: 2.5rem;
|
|
background: var(--bg-gray);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.flow-item {
|
|
padding: 1rem 2rem;
|
|
background: var(--bg-white);
|
|
border-radius: var(--radius-sm);
|
|
border: 2px solid rgba(0,0,0,0.1);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.flow-arrow {
|
|
color: var(--primary-dark);
|
|
padding-left: 2rem;
|
|
font-weight: 800;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* ===== 루프백 박스 ===== */
|
|
.loopback-box {
|
|
background: var(--bg-white);
|
|
border: 4px solid var(--primary);
|
|
border-radius: var(--radius-md);
|
|
padding: 2.5rem;
|
|
margin: 1.5rem 0;
|
|
position: relative;
|
|
}
|
|
|
|
.loopback-box::before {
|
|
content: "🔄";
|
|
position: absolute;
|
|
top: -1.2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--bg-white);
|
|
padding: 0 1rem;
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.loopback-box .loop-item {
|
|
padding: 0.8rem 0;
|
|
font-size: 2rem;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ===== 아이콘 그리드 ===== */
|
|
.icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.icon-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.icon-emoji {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.icon-text h4 {
|
|
font-size: 2.2rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.3rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.icon-text p {
|
|
font-size: 2rem;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== 숫자 강조 ===== */
|
|
.big-number {
|
|
font-size: 5rem;
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ===== CTA 박스 ===== */
|
|
.cta-box {
|
|
background: var(--bg-purple);
|
|
border: 3px solid var(--primary);
|
|
border-radius: var(--radius-md);
|
|
padding: 2.5rem;
|
|
margin: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.cta-box a {
|
|
color: var(--primary-dark);
|
|
font-size: 2.5rem;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ===== 반응형 ===== */
|
|
@media (max-width: 768px) {
|
|
.slide {
|
|
padding: 40px 5%;
|
|
}
|
|
h1 { font-size: 2.5rem; }
|
|
h2 { font-size: 1.8rem; }
|
|
h3 { font-size: 1.4rem; }
|
|
p, .list li { font-size: 1.1rem; }
|
|
.section-number { font-size: 3rem; }
|
|
.compare-row { grid-template-columns: 1fr; }
|
|
.card-grid-2 { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- SLIDE #1: 타이틀 -->
|
|
<section class="slide slide-title" id="slide-1">
|
|
<h1>빌더가 되자</h1>
|
|
<p class="subtitle">AI로 나만의 도구를 만드는 사람이 되는 법</p>
|
|
<p style="margin-top: 3rem; color: var(--text-secondary); font-size: 2rem;">클로더즈 첫 수업 (30분)</p>
|
|
</section>
|
|
|
|
<!-- SLIDE #2: 세상이 바뀌고 있어 -->
|
|
<section class="slide" id="slide-2">
|
|
<span class="section-number">도입</span>
|
|
<h2>세상이 바뀌고 있어</h2>
|
|
|
|
<p style="font-size: 2.2rem; color: var(--text-secondary); margin-bottom: 2rem;">예전엔 한 회사에서 한 가지 일만 하면 됐어.</p>
|
|
|
|
<ul class="list">
|
|
<li>본업 하면서 사이드잡 하는 사람</li>
|
|
<li>프리랜서로 여러 프로젝트 뛰는 사람</li>
|
|
<li>친구들이랑 모여서 뭔가 만들어보는 사람</li>
|
|
<li>혼자서 서비스 만들어서 창업하는 사람</li>
|
|
</ul>
|
|
|
|
<div class="big-quote" style="margin-top: 2rem;">
|
|
"근데 그거 다 하려면 슈퍼맨이어야 하는 거 아니야?"<br>
|
|
<span class="highlight">이제 AI가 있잖아.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #3: 실제로 일어나고 있는 일 -->
|
|
<section class="slide slide-alt" id="slide-3">
|
|
<h2>실제로 일어나고 있는 일</h2>
|
|
|
|
<div class="icon-grid">
|
|
<div class="icon-item">
|
|
<span class="icon-emoji">🎨</span>
|
|
<div class="icon-text">
|
|
<h4>디자이너</h4>
|
|
<p>피그마 시안 → AI로 랜딩페이지<br><span class="highlight">일주일 → 하루</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="icon-item">
|
|
<span class="icon-emoji">📋</span>
|
|
<div class="icon-text">
|
|
<h4>기획자/영업</h4>
|
|
<p>제안서 이미지 시안<br><span class="highlight">AI로 바로 생성</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="icon-item">
|
|
<span class="icon-emoji">📢</span>
|
|
<div class="icon-text">
|
|
<h4>마케터</h4>
|
|
<p>블로그 → 인스타/링크드인<br><span class="highlight">한 콘텐츠로 5개 채널</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="icon-item">
|
|
<span class="icon-emoji">💼</span>
|
|
<div class="icon-text">
|
|
<h4>PM</h4>
|
|
<p>회의록 정리<br><span class="highlight">30분 → 3분</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-quote" style="margin-top: 2rem; font-size: 2.8rem;">
|
|
AI 쓰는 사람 vs 안 쓰는 사람<br>
|
|
<span class="gradient-text">업무 속도 3~5배 차이</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #4: 기회의 시대 -->
|
|
<section class="slide" id="slide-4">
|
|
<h2>기회의 시대</h2>
|
|
|
|
<div class="card-grid-2">
|
|
<div class="card card-warning">
|
|
<p style="color: var(--accent-red); margin-bottom: 0.5rem; font-size: 2rem; font-weight: 700;">위기</p>
|
|
<p style="font-size: 2rem; margin: 0;">2025년 상반기 AI 해고 7만 8천 명</p>
|
|
<p style="font-size: 2rem; margin: 0;">MS 코드의 30%는 AI가 작성</p>
|
|
</div>
|
|
<div class="card card-success">
|
|
<p style="color: var(--accent-green); margin-bottom: 0.5rem; font-size: 2rem; font-weight: 700;">기회</p>
|
|
<p style="font-size: 2rem; margin: 0;">예전엔 개발 몰라서 못 만들었는데</p>
|
|
<p style="font-size: 2rem; margin: 0;">이젠 AI한테 시키면 돼</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-quote" style="margin-top: 2rem;">
|
|
<span class="gradient-text">아이디어 있는 사람한테<br>가장 유리한 시대</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #5: ChatGPT 써봤지? -->
|
|
<section class="slide slide-purple" id="slide-5">
|
|
<span class="section-number">Part 1</span>
|
|
<h2>ChatGPT 써봤지?</h2>
|
|
|
|
<p style="font-size: 2.4rem; margin-bottom: 2rem;">
|
|
"이거 뭐야?" 물어보면 답해주고,<br>
|
|
"번역해줘" 하면 번역해주고.
|
|
</p>
|
|
|
|
<div class="center-quote" style="font-size: 3.5rem;">
|
|
신기하긴 한데...<br>
|
|
<span class="highlight">뭔가 아쉽지 않았어?</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #6: 세 가지 문제 -->
|
|
<section class="slide" id="slide-6">
|
|
<h2>세 가지 문제</h2>
|
|
|
|
<div class="steps">
|
|
<div class="step">
|
|
<h3 style="font-size: 2.5rem;">매번 같은 말 반복</h3>
|
|
<div class="code-block" style="font-size: 1.8rem;">
|
|
<span class="comment">"너는 시니어 개발자야. 코드 리뷰해줘."</span><br>
|
|
<span class="comment">"너는 시니어 개발자야. 이 에러 뭐야?"</span><br>
|
|
<span class="comment">"너는 시니어 개발자야. 이거 어떻게 고쳐?"</span>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<h3 style="font-size: 2.5rem;">대화 길어지면 까먹음</h3>
|
|
<p style="font-size: 2rem; color: var(--text-secondary);">
|
|
"Next.js 쓴다" 했는데 → "React로 만들면..."
|
|
</p>
|
|
</div>
|
|
<div class="step">
|
|
<h3 style="font-size: 2.5rem;">결과물이 내 스타일이 아님</h3>
|
|
<p style="font-size: 2rem; color: var(--text-secondary);">
|
|
너무 딱딱하거나, 너무 가볍거나
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #7: 잘 쓴다 = 나만의 도구로 만든다 -->
|
|
<section class="slide slide-alt" id="slide-7">
|
|
<h2>잘 쓴다 =<br><span class="gradient-text">나만의 도구로 만든다</span></h2>
|
|
|
|
<div class="card-grid-2" style="margin-top: 2rem;">
|
|
<div class="card">
|
|
<p style="font-size: 2.2rem; margin-bottom: 1rem;">매번 이렇게 말해야 한다면?</p>
|
|
<div class="code-block" style="font-size: 1.6rem;">
|
|
"너는 한식 전문 요리사야.<br>
|
|
간은 좀 싱겁게 해줘.<br>
|
|
나 매운 거 못 먹어.<br>
|
|
고수는 빼줘.<br>
|
|
자 이제 김치찌개 만들어줘."
|
|
</div>
|
|
</div>
|
|
<div class="card card-primary">
|
|
<p style="font-size: 2.2rem; margin-bottom: 1rem;">요리사가 나를 알고 있다면?</p>
|
|
<div class="code-block" style="font-size: 1.6rem; background: var(--primary);">
|
|
<span style="color: white;">"김치찌개 만들어줘"</span>
|
|
</div>
|
|
<p style="font-size: 2rem; margin-top: 1rem; color: var(--primary-dark); font-weight: 700;">
|
|
미리 다 적어두는 거야 = <span class="highlight">지침 파일</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #8: 역할 부여 vs 구체적인 지침 -->
|
|
<section class="slide" id="slide-8">
|
|
<h2>역할 부여 vs 구체적인 지침</h2>
|
|
|
|
<div class="compare-table">
|
|
<div class="compare-row">
|
|
<div class="compare-item compare-old">
|
|
<p style="color: var(--text-secondary); margin-bottom: 0.5rem; font-size: 2rem; font-weight: 600;">역할 부여 (별로)</p>
|
|
<div class="code-block" style="font-size: 1.6rem;">
|
|
"너는 10년차 시니어 개발자야"<br>
|
|
"너는 마케팅 전문가야"
|
|
</div>
|
|
<p style="font-size: 1.8rem; margin-top: 1rem; color: var(--text-secondary);">
|
|
→ AI가 어떻게 해석할지는 AI 맘
|
|
</p>
|
|
</div>
|
|
<div class="compare-item compare-new">
|
|
<p style="color: var(--primary); margin-bottom: 0.5rem; font-size: 2rem; font-weight: 600;">구체적 지침 (Good!)</p>
|
|
<div class="code-block" style="font-size: 1.6rem;">
|
|
# 코드 리뷰할 때<br>
|
|
- 성능 이슈 최우선 체크<br>
|
|
- 보안 취약점 반드시 언급<br>
|
|
- 수정 코드는 diff 형식으로
|
|
</div>
|
|
<p style="font-size: 1.8rem; margin-top: 1rem; color: var(--primary-dark); font-weight: 700;">
|
|
→ 해석의 여지 없음
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #9: 오늘 직접 해볼 거야 -->
|
|
<section class="slide slide-purple" id="slide-9">
|
|
<span class="section-number">Part 2</span>
|
|
<h2>오늘 직접 해볼 거야</h2>
|
|
|
|
<div class="timeline" style="margin-top: 3rem;">
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">📁</div>
|
|
<div class="timeline-label">프로젝트 폴더</div>
|
|
</div>
|
|
<div class="timeline-arrow">→</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">📝</div>
|
|
<div class="timeline-label">CLAUDE.md</div>
|
|
</div>
|
|
<div class="timeline-arrow">→</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">✍️</div>
|
|
<div class="timeline-label">블로그 글</div>
|
|
</div>
|
|
<div class="timeline-arrow">→</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">🚀</div>
|
|
<div class="timeline-label">업로드</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #10: 1단계: 프로젝트 폴더 만들기 -->
|
|
<section class="slide" id="slide-10">
|
|
<h2>1단계: 프로젝트 폴더</h2>
|
|
|
|
<p style="font-size: 2.5rem; margin-bottom: 2rem;">
|
|
프로젝트가 뭐냐면, 그냥 <span class="highlight">폴더</span>야. 별거 없어.
|
|
</p>
|
|
|
|
<div class="code-block">
|
|
<span class="comment"># 바탕화면에 폴더 만들기</span><br>
|
|
<span class="command">바탕화면 우클릭 → 새 폴더 → "my-blog"</span><br><br>
|
|
<span class="comment"># VSCode로 열기</span><br>
|
|
<span class="command">파일 → 폴더 열기 → "my-blog" 선택</span>
|
|
</div>
|
|
|
|
<p style="font-size: 2rem; color: var(--text-secondary); margin-top: 1.5rem;">
|
|
이름은 영어로! 한글 폴더명은 가끔 문제 생겨.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- SLIDE #11: 2단계: CLAUDE.md 만들기 -->
|
|
<section class="slide slide-alt" id="slide-11">
|
|
<h2>2단계: CLAUDE.md 만들기</h2>
|
|
|
|
<p style="font-size: 2.2rem; margin-bottom: 1.5rem;">
|
|
<span class="highlight">CLAUDE.md</span>는 AI한테 주는 지침서야.
|
|
</p>
|
|
|
|
<div class="code-block" style="font-size: 1.8rem;">
|
|
<span class="command"># 블로그 글 작성 지침</span><br><br>
|
|
<span class="result">## 나는</span><br>
|
|
- 개발 입문자<br>
|
|
- 블로그 막 시작함<br>
|
|
- 어려운 말 싫어함<br><br>
|
|
<span class="result">## 글 스타일</span><br>
|
|
- 친근하게 써줘<br>
|
|
- 문장은 짧게<br>
|
|
- 어려운 용어 나오면 바로 설명해줘
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #12: 3단계: 블로그 글 써보기 -->
|
|
<section class="slide" id="slide-12">
|
|
<h2>3단계: 블로그 글 써보기</h2>
|
|
|
|
<div class="code-block">
|
|
<span class="comment"># 터미널 열기 (VSCode에서 Ctrl + `)</span><br><br>
|
|
<span class="command">$ claude</span><br><br>
|
|
<span class="comment"># Claude Code 실행 후</span><br>
|
|
<span class="result">"CLAUDE.md 읽고, 블로그 글 하나 써줘.<br>주제는 'AI 처음 써본 후기'"</span>
|
|
</div>
|
|
|
|
<div class="center-quote" style="margin-top: 2rem; font-size: 3rem;">
|
|
뭔가 쫙 나올 거야 ✨
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #13: 4단계: 휴먼터치 -->
|
|
<section class="slide slide-purple" id="slide-13">
|
|
<h2>4단계: 휴먼터치</h2>
|
|
|
|
<div class="big-quote">
|
|
AI가 뭔가 만들어주면<br>
|
|
<span class="highlight">무조건 확인해야 해</span>
|
|
</div>
|
|
|
|
<ul class="list" style="margin-top: 2rem;">
|
|
<li>문장이 진짜 짧아?</li>
|
|
<li>말투가 친근해?</li>
|
|
<li>어려운 용어 설명해줬어?</li>
|
|
</ul>
|
|
|
|
<div class="card card-primary" style="margin-top: 2rem;">
|
|
<p style="font-size: 2.2rem; margin: 0; text-align: center;">
|
|
AI 결과물은 <span class="highlight">초안</span>이야. 한 50~60%.<br>
|
|
근데 <span class="highlight">0%에서 시작 vs 50%에서 시작</span><br>
|
|
뭐가 더 빨라?
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #14: 5단계: 루프백 -->
|
|
<section class="slide" id="slide-14">
|
|
<h2>5단계: 루프백</h2>
|
|
|
|
<p style="font-size: 2.2rem; margin-bottom: 1.5rem;">
|
|
마음에 안 드는 게 있으면? → <span class="highlight">지침 수정 → 다시 시키기</span>
|
|
</p>
|
|
|
|
<div class="loopback-box">
|
|
<div class="loop-item">1. AI한테 시킴</div>
|
|
<div class="loop-item">2. 결과 확인</div>
|
|
<div class="loop-item">3. 마음에 안 듦</div>
|
|
<div class="loop-item">4. 지침 수정</div>
|
|
<div class="loop-item">5. 다시 시킴 (반복)</div>
|
|
</div>
|
|
|
|
<div class="center-quote" style="margin-top: 1.5rem; font-size: 2.8rem;">
|
|
좋은 지침은 한 번에 안 나와.<br>
|
|
<span class="gradient-text">계속 다듬는 거야.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #15: 6단계: 네이버 업로드 -->
|
|
<section class="slide slide-alt" id="slide-15">
|
|
<h2>6단계: 네이버 블로그 업로드</h2>
|
|
|
|
<div class="code-block" style="font-size: 2rem;">
|
|
<span class="result">".env 파일 읽어서 네이버 블로그에 로그인하고,<br>방금 쓴 글 올려줘"</span>
|
|
</div>
|
|
|
|
<div class="timeline" style="margin-top: 2rem;">
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">🔑</div>
|
|
<div class="timeline-label">.env 읽기</div>
|
|
</div>
|
|
<div class="timeline-arrow">→</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">🔐</div>
|
|
<div class="timeline-label">로그인</div>
|
|
</div>
|
|
<div class="timeline-arrow">→</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">📝</div>
|
|
<div class="timeline-label">글 작성</div>
|
|
</div>
|
|
<div class="timeline-arrow">→</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon">🚀</div>
|
|
<div class="timeline-label">발행!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="font-size: 2rem; text-align: center; margin-top: 2rem; color: var(--primary); font-weight: 700;">
|
|
진짜 올라가.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- SLIDE #16: 폴더 구조 -->
|
|
<section class="slide" id="slide-16">
|
|
<h2>현재 폴더 구조</h2>
|
|
|
|
<div class="code-block" style="font-size: 2.2rem;">
|
|
<span class="command">my-blog/</span><br>
|
|
<span class="result">├── .env</span> <span class="comment">← 네이버 로그인 정보 (비밀!)</span><br>
|
|
<span class="result">├── .gitignore</span> <span class="comment">← .env 보호</span><br>
|
|
<span class="result">└── CLAUDE.md</span> <span class="comment">← AI 지침</span>
|
|
</div>
|
|
|
|
<div class="center-quote" style="margin-top: 2rem; font-size: 3.5rem;">
|
|
파일 3개.<br>
|
|
<span class="gradient-text">이게 끝이야.</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #17: 지침이 쌓이면 -->
|
|
<section class="slide slide-purple" id="slide-17">
|
|
<span class="section-number">Part 3</span>
|
|
<h2>지침 하나가 곧 "도구"야</h2>
|
|
|
|
<div class="card-grid" style="margin-top: 2rem;">
|
|
<div class="card">
|
|
<p style="font-size: 2.2rem; margin: 0;">
|
|
블로그 글 작성 지침<br>
|
|
<span class="highlight">→ 블로그 글쓰기 도구</span>
|
|
</p>
|
|
</div>
|
|
<div class="card">
|
|
<p style="font-size: 2.2rem; margin: 0;">
|
|
코드 리뷰 지침<br>
|
|
<span class="highlight">→ 코드 리뷰 도구</span>
|
|
</p>
|
|
</div>
|
|
<div class="card">
|
|
<p style="font-size: 2.2rem; margin: 0;">
|
|
기획서 검토 지침<br>
|
|
<span class="highlight">→ 기획서 검토 도구</span>
|
|
</p>
|
|
</div>
|
|
<div class="card">
|
|
<p style="font-size: 2.2rem; margin: 0;">
|
|
번역 지침<br>
|
|
<span class="highlight">→ 내 스타일 번역 도구</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #18: 도구가 쌓이면 -->
|
|
<section class="slide" id="slide-18">
|
|
<h2>도구가 쌓이면?</h2>
|
|
|
|
<div class="flow-vertical">
|
|
<div class="flow-item"><strong>본업에서 만든 도구</strong> → 일 빨라짐 → 시간 남음</div>
|
|
<div class="flow-arrow">↓</div>
|
|
<div class="flow-item"><strong>시간 남으니까</strong> → 사이드잡 시작 → 거기서도 도구 만듦</div>
|
|
<div class="flow-arrow">↓</div>
|
|
<div class="flow-item"><strong>도구 많아지니까</strong> → 뭘 해도 빠름 → 여러 프로젝트 가능</div>
|
|
<div class="flow-arrow">↓</div>
|
|
<div class="flow-item" style="background: var(--bg-purple); border-color: var(--primary);"><strong class="highlight">결국 도구를 만드는 사람이 된다</strong></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #19: 도구를 쓰는 vs 만드는 -->
|
|
<section class="slide slide-alt" id="slide-19">
|
|
<h2>도구를 쓰는 사람 vs 만드는 사람</h2>
|
|
|
|
<div class="compare-table">
|
|
<div class="compare-row">
|
|
<div class="compare-item compare-old">
|
|
<p style="color: var(--text-secondary); margin-bottom: 1rem; font-size: 2.2rem; font-weight: 700;">도구를 쓰는 사람</p>
|
|
<ul class="list" style="font-size: 2rem;">
|
|
<li style="font-size: 2rem;">남이 만든 거 그대로 씀</li>
|
|
<li style="font-size: 2rem;">새 도구 나오면 또 배워야 함</li>
|
|
<li style="font-size: 2rem;">도구가 바뀌면 적응하느라 힘듦</li>
|
|
</ul>
|
|
</div>
|
|
<div class="compare-item compare-new">
|
|
<p style="color: var(--primary); margin-bottom: 1rem; font-size: 2.2rem; font-weight: 700;">빌더 (도구를 만드는 사람)</p>
|
|
<ul class="list" style="font-size: 2rem;">
|
|
<li style="font-size: 2rem;">내가 필요한 걸 직접 만듦</li>
|
|
<li style="font-size: 2rem;">기존 도구를 내 방식대로 커스텀</li>
|
|
<li style="font-size: 2rem;">도구가 바뀌어도 새로 만들면 됨</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-quote" style="margin-top: 2rem; font-size: 2.5rem;">
|
|
AI 덕분에 도구 만드는 게 쉬워졌는데<br>
|
|
<span class="highlight">대부분은 여전히 쓰기만 해</span><br>
|
|
<span style="font-size: 2rem; color: var(--text-secondary);">여기서 차이가 벌어지는 거야</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #20: 클로더즈에서 할 것들 -->
|
|
<section class="slide slide-purple" id="slide-20">
|
|
<span class="section-number">결론</span>
|
|
<h2>클로더즈에서 할 것들</h2>
|
|
|
|
<p style="font-size: 2.5rem; margin-bottom: 2rem;">
|
|
우리는 AI를 "쓰는" 사람들이 아니야.<br>
|
|
<span class="gradient-text">AI로 도구를 "만드는" 사람들이야. 빌더.</span>
|
|
</p>
|
|
|
|
<div class="steps" style="margin-top: 2rem;">
|
|
<div class="step">
|
|
<h3 style="font-size: 2.2rem;">각자의 도구를 만들어</h3>
|
|
<p style="font-size: 1.8rem; color: var(--text-secondary);">CLAUDE.md부터 시작해서, 커스텀 커맨드, MCP 서버까지</p>
|
|
</div>
|
|
<div class="step">
|
|
<h3 style="font-size: 2.2rem;">만든 걸 공유해</h3>
|
|
<p style="font-size: 1.8rem; color: var(--text-secondary);">이게 좋더라, 이건 별로더라</p>
|
|
</div>
|
|
<div class="step">
|
|
<h3 style="font-size: 2.2rem;">같이 성장해</h3>
|
|
<p style="font-size: 1.8rem; color: var(--text-secondary);">혼자 삽질하지 말고, 서로 도와주면서</p>
|
|
</div>
|
|
<div class="step">
|
|
<h3 style="font-size: 2.2rem;">뭔가 만들어봐</h3>
|
|
<p style="font-size: 1.8rem; color: var(--text-secondary);">4주 뒤에 실제로 돌아가는 MVP 출시까지</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SLIDE #21: 4주 커리큘럼 -->
|
|
<section class="slide" id="slide-21">
|
|
<h2>4주 커리큘럼</h2>
|
|
|
|
<table>
|
|
<tr>
|
|
<th style="width: 20%;">주차</th>
|
|
<th>내용</th>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="big-number" style="font-size: 3rem;">1</span></td>
|
|
<td>CLAUDE.md 작성법, AI에게 지침 주는 법</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="big-number" style="font-size: 3rem;">2</span></td>
|
|
<td>커스텀 커맨드로 반복 작업 자동화</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="big-number" style="font-size: 3rem;">3</span></td>
|
|
<td>MCP 서버로 외부 서비스 연결</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="big-number" style="font-size: 3rem;">4</span></td>
|
|
<td>실제 MVP 만들어서 출시</td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- SLIDE #22: 오늘 배운 거 정리 -->
|
|
<section class="slide slide-alt" id="slide-22">
|
|
<h2>오늘 배운 거</h2>
|
|
|
|
<table>
|
|
<tr>
|
|
<th style="width: 30%;">개념</th>
|
|
<th>설명</th>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="highlight">CLAUDE.md</span></td>
|
|
<td>AI한테 주는 지침 파일</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="highlight">휴먼터치</span></td>
|
|
<td>AI 결과물 무조건 확인하기</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="highlight">루프백</span></td>
|
|
<td>지침 → 결과 → 수정 → 반복</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="highlight">빌더</span></td>
|
|
<td>도구를 만드는 사람</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p style="text-align: center; margin-top: 2rem; font-size: 2.5rem; font-weight: 700;">
|
|
이게 AI 활용의 기본이야.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- SLIDE #23: 마지막 한 마디 -->
|
|
<section class="slide slide-title" id="slide-23">
|
|
<h2 style="font-size: 3rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 2rem;">
|
|
앞으로 어떤 세상이 될지 아무도 몰라.<br>
|
|
근데 하나는 확실해.
|
|
</h2>
|
|
|
|
<div class="center-quote" style="font-size: 3.5rem; margin-bottom: 3rem;">
|
|
<span class="gradient-text">도구를 만들 줄 아는 사람은<br>어디서든 가치를 만들 수 있어.</span>
|
|
</div>
|
|
|
|
<p style="font-size: 2.5rem; color: var(--text-secondary); margin-bottom: 2rem;">
|
|
4주 뒤에 너희는<br>
|
|
<span class="highlight">진짜 돌아가는 서비스를 출시한 사람</span>이 돼.
|
|
</p>
|
|
|
|
<h1 style="font-size: 5rem; margin-top: 2rem;">빌더가 되자.</h1>
|
|
|
|
<div class="cta-box" style="margin-top: 3rem;">
|
|
<a href="https://clauders.ai" target="_blank">clauders.ai</a>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// ===== 발표자 노트 데이터 =====
|
|
const presenterNotes = {
|
|
1: {
|
|
title: "타이틀",
|
|
notes: `안녕하세요, 클로더즈 첫 수업을 시작합니다.
|
|
|
|
오늘 30분 동안 여러분이 "빌더"가 된다는 게 무슨 의미인지,
|
|
그리고 실제로 첫 번째 도구를 만들어볼 거예요.
|
|
|
|
질문은 언제든 해주세요.
|
|
질문 안 하시면 다 아시는 걸로 알고 빠르게 넘어갈게요.`
|
|
},
|
|
2: {
|
|
title: "세상이 바뀌고 있어",
|
|
notes: `예전엔 한 회사에서 한 가지 일만 하면 됐어.
|
|
10년, 20년 다니면서 그 분야 전문가가 되는 거지.
|
|
|
|
근데 요즘은 다르잖아.
|
|
|
|
(리스트 하나씩 읽으며)
|
|
이런 사람들 점점 많아지고 있어.
|
|
|
|
"근데 그거 다 하려면 슈퍼맨이어야 하는 거 아니야?"
|
|
|
|
맞아, 예전엔 그랬어. 혼자서 다 하는 건 거의 불가능했지.
|
|
|
|
(강조하며)
|
|
근데 이제 AI가 있잖아.`
|
|
},
|
|
3: {
|
|
title: "실제로 일어나고 있는 일",
|
|
notes: `요즘 회사에서 실제로 어떤 일이 벌어지는지 몇 가지 볼게.
|
|
|
|
(디자이너)
|
|
피그마로 시안 뽑으면, AI한테 "이거 랜딩페이지로 만들어줘" 해.
|
|
예전엔 개발자한테 넘기고 일주일 기다렸는데, 이제 하루면 나와.
|
|
|
|
(기획자/영업)
|
|
제안서 만들 때 이미지가 필요하잖아.
|
|
이제는 AI로 딱 맞는 이미지를 바로 생성해.
|
|
|
|
(마케터)
|
|
블로그 글 하나 쓰면, "인스타용으로 바꿔줘, 링크드인용으로도" 해.
|
|
한 콘텐츠로 5개 채널 동시에 돌려.
|
|
|
|
(PM)
|
|
회의 끝나면 녹음 파일 주고 "요약하고 액션 아이템 뽑아줘".
|
|
30분 걸리던 게 3분이면 끝나.
|
|
|
|
(강조)
|
|
AI 쓰는 사람이랑 안 쓰는 사람, 업무 속도가 3~5배 차이 나.`
|
|
},
|
|
4: {
|
|
title: "기회의 시대",
|
|
notes: `물론 반대쪽도 있어.
|
|
|
|
2025년 상반기, AI 때문에 해고된 사람이 7만 8천 명이야.
|
|
MS CEO는 "우리 코드의 30%는 AI가 짜고 있다"고 했어.
|
|
|
|
기업들이 AI로 효율화하고, 남는 인력은 정리하고 있어.
|
|
이건 막을 수 없는 흐름이야.
|
|
|
|
(잠시 멈추고)
|
|
|
|
근데, 이건 위기이자 기회야.
|
|
|
|
예전엔 개발 몰라서 못 만들었는데,
|
|
이젠 AI한테 시키면 돼.
|
|
|
|
(강조)
|
|
아이디어 있는 사람한테 가장 유리한 시대가 온 거야.`
|
|
},
|
|
5: {
|
|
title: "ChatGPT 써봤지?",
|
|
notes: `아마 다들 ChatGPT 써봤을 거야.
|
|
|
|
"이거 뭐야?" 물어보면 답해주고,
|
|
"번역해줘" 하면 번역해주고.
|
|
|
|
(청중에게)
|
|
신기하긴 한데... 뭔가 아쉽지 않았어?
|
|
|
|
다음 슬라이드에서 세 가지 문제점을 볼게.`
|
|
},
|
|
6: {
|
|
title: "세 가지 문제",
|
|
notes: `(첫째)
|
|
매번 "너는 시니어 개발자야"를 붙여야 해.
|
|
안 그러면 초보자한테 설명하듯이 장황하게 얘기하거든.
|
|
|
|
(둘째)
|
|
대화가 50개 넘어가면 앞에 말한 거 까먹어.
|
|
"Next.js 쓴다"고 했는데 "React로 만들면..." 이래.
|
|
|
|
(셋째)
|
|
"블로그 글 써줘" 하면 뭔가 나오긴 하는데...
|
|
내 스타일이 아니야. 너무 딱딱하거나, 너무 가볍거나.
|
|
|
|
이게 AI를 "쓰는" 거야.
|
|
근데 이건 "잘 쓰는" 게 아니거든.`
|
|
},
|
|
7: {
|
|
title: "잘 쓴다 = 나만의 도구로 만든다",
|
|
notes: `AI를 잘 쓴다는 건 뭘까?
|
|
|
|
내가 원하는 대로 동작하는 나만의 도구로 만드는 거야.
|
|
|
|
비유를 하나 해볼게.
|
|
|
|
(왼쪽 카드)
|
|
요리사한테 매번 이렇게 말해야 한다고 생각해봐.
|
|
"너는 한식 전문 요리사야. 간은 싱겁게, 매운 거 못 먹어, 고수는 빼..."
|
|
귀찮잖아.
|
|
|
|
(오른쪽 카드)
|
|
근데 이 요리사가 나를 다 알고 있으면?
|
|
"김치찌개 만들어줘" 이것만 말해도 내 입맛에 맞는 게 나와.
|
|
|
|
AI도 마찬가지야.
|
|
매번 설명하지 말고, 미리 다 적어두는 거야.
|
|
그게 바로 "지침 파일"이야.`
|
|
},
|
|
8: {
|
|
title: "역할 부여 vs 구체적인 지침",
|
|
notes: `여기서 중요한 포인트 하나.
|
|
|
|
많은 사람들이 "너는 10년차 시니어 개발자야" 이렇게 해.
|
|
이게 "역할 부여"야. 나쁘진 않은데... 별로 효과적이지 않아.
|
|
|
|
왜냐면 AI가 "시니어 개발자"를 어떻게 해석할지는 AI 맘이거든.
|
|
|
|
(오른쪽 보며)
|
|
구체적인 지침이 훨씬 효과적이야.
|
|
|
|
"성능 이슈 최우선 체크, 보안 취약점 반드시 언급..."
|
|
이렇게 적으면 AI가 정확히 뭘 해야 하는지 알아.
|
|
|
|
역할 부여 = "알아서 잘 해줘"
|
|
구체적 지침 = "이렇게 해줘"
|
|
|
|
어떤 게 더 확실하겠어?`
|
|
},
|
|
9: {
|
|
title: "오늘 직접 해볼 거야",
|
|
notes: `자, 이론은 여기까지.
|
|
|
|
이제 직접 해보자.
|
|
|
|
오늘 할 거:
|
|
1. 프로젝트 폴더 만들기
|
|
2. CLAUDE.md 작성
|
|
3. 블로그 글 써보기
|
|
4. 네이버 블로그에 업로드
|
|
|
|
VSCode 처음 써봐? 괜찮아. 같이 해보자.`
|
|
},
|
|
10: {
|
|
title: "1단계: 프로젝트 폴더",
|
|
notes: `프로젝트가 뭐냐면, 그냥 폴더야. 별거 없어.
|
|
|
|
바탕화면에 폴더 하나 만들어.
|
|
이름은 "my-blog" - 영어로 하는 게 좋아.
|
|
한글 폴더명은 가끔 문제 생기거든.
|
|
|
|
VSCode로 열어.
|
|
파일 → 폴더 열기 → 방금 만든 폴더 선택.
|
|
|
|
왼쪽에 폴더 이름이 보이면 성공이야.`
|
|
},
|
|
11: {
|
|
title: "2단계: CLAUDE.md 만들기",
|
|
notes: `CLAUDE.md는 AI한테 주는 지침서야.
|
|
"나는 이런 사람이고, 이렇게 해줘"를 적어두는 파일.
|
|
|
|
새 파일 만들어. 파일 이름: CLAUDE.md
|
|
대문자로 써야 해. 이게 규칙이야.
|
|
|
|
(코드 블록 보며)
|
|
처음이니까 간단하게 시작해.
|
|
|
|
- 나는 개발 입문자
|
|
- 블로그 막 시작함
|
|
- 어려운 말 싫어함
|
|
|
|
글 스타일은:
|
|
- 친근하게
|
|
- 문장은 짧게
|
|
- 어려운 용어 나오면 바로 설명
|
|
|
|
저장해.`
|
|
},
|
|
12: {
|
|
title: "3단계: 블로그 글 써보기",
|
|
notes: `자, 이제 Claude Code한테 시켜보자.
|
|
|
|
터미널 열어. VSCode 안에서 Ctrl + 백틱 누르면 열려.
|
|
|
|
"claude" 입력하고 엔터.
|
|
|
|
Claude Code가 켜지면:
|
|
"CLAUDE.md 읽고, 블로그 글 하나 써줘. 주제는 'AI 처음 써본 후기'"
|
|
|
|
(잠시 기다리며)
|
|
뭔가 쫙 나올 거야.`
|
|
},
|
|
13: {
|
|
title: "4단계: 휴먼터치",
|
|
notes: `여기가 제일 중요해.
|
|
|
|
AI가 뭔가 만들어주면 무조건 확인해야 해.
|
|
이걸 "휴먼터치"라고 해.
|
|
|
|
읽어보고 체크해:
|
|
- 문장이 진짜 짧아?
|
|
- 말투가 친근해?
|
|
- 어려운 용어 설명해줬어?
|
|
|
|
(강조)
|
|
AI 결과물은 초안이야. 한 50~60% 정도라고 보면 돼.
|
|
|
|
근데 0에서 시작하는 거랑 50%에서 시작하는 거랑
|
|
뭐가 더 빨라?`
|
|
},
|
|
14: {
|
|
title: "5단계: 루프백",
|
|
notes: `마음에 안 드는 게 있으면?
|
|
|
|
예를 들어, "문장이 생각보다 길다"면:
|
|
CLAUDE.md 열어서 수정해.
|
|
"문장은 짧게" → "한 문장 20자 이내로"
|
|
|
|
그리고 다시 시켜봐.
|
|
"방금 쓴 글, 다시 써줘"
|
|
|
|
이 사이클을 루프백이라고 해.
|
|
|
|
(다이어그램 보며)
|
|
AI한테 시킴 → 결과 확인 → 마음에 안 듦 → 지침 수정 → 다시 시킴
|
|
|
|
처음엔 지침이 별로 없어.
|
|
근데 이 사이클 돌다 보면 지침이 점점 정교해져.
|
|
|
|
좋은 지침은 한 번에 안 나와. 계속 다듬는 거야.`
|
|
},
|
|
15: {
|
|
title: "6단계: 네이버 블로그 업로드",
|
|
notes: `글 마음에 들어? 이제 진짜 블로그에 올려보자.
|
|
|
|
".env 파일 읽어서 네이버 블로그에 로그인하고, 방금 쓴 글 올려줘"
|
|
|
|
Claude Code가 알아서:
|
|
1. .env에서 아이디/비번 읽고
|
|
2. 네이버 블로그 열고
|
|
3. 로그인하고
|
|
4. 글 작성 페이지 가서
|
|
5. 제목이랑 내용 붙여넣고
|
|
6. 발행까지
|
|
|
|
(강조)
|
|
진짜 올라가.
|
|
|
|
처음엔 "임시저장만 해줘" 이렇게 해봐.
|
|
바로 발행하기 무서우면.`
|
|
},
|
|
16: {
|
|
title: "현재 폴더 구조",
|
|
notes: `지금 네 폴더는 이렇게 생겼어야 해:
|
|
|
|
my-blog/
|
|
├── .env (네이버 로그인 정보)
|
|
├── .gitignore (.env 보호)
|
|
└── CLAUDE.md (AI 지침)
|
|
|
|
파일 3개. 이게 끝이야.
|
|
|
|
근데 이 3개 파일로 블로그 글 쓰고 업로드까지 했잖아.
|
|
이게 AI 활용의 기본이야.`
|
|
},
|
|
17: {
|
|
title: "지침이 쌓이면",
|
|
notes: `자, 여기서 생각을 좀 넓혀보자.
|
|
|
|
지침 파일 하나를 잘 만들어두면, 그게 곧 도구가 돼.
|
|
|
|
- 블로그 글 작성 지침 → 블로그 글쓰기 도구
|
|
- 코드 리뷰 지침 → 코드 리뷰 도구
|
|
- 기획서 검토 지침 → 기획서 검토 도구
|
|
- 번역 지침 → 내 스타일 번역 도구
|
|
|
|
이 도구들이 쌓이면 어떻게 될까?`
|
|
},
|
|
18: {
|
|
title: "도구가 쌓이면?",
|
|
notes: `(플로우 따라가며)
|
|
|
|
본업에서 만든 도구 → 일 빨라짐 → 시간 남음
|
|
|
|
시간 남으니까 → 사이드잡 시작 → 거기서도 도구 만듦
|
|
|
|
도구 많아지니까 → 뭘 해도 빠름 → 여러 프로젝트 가능
|
|
|
|
(강조)
|
|
결국 도구를 만드는 사람이 되는 거야.`
|
|
},
|
|
19: {
|
|
title: "도구를 쓰는 vs 만드는",
|
|
notes: `세상에는 두 부류가 있어.
|
|
|
|
(왼쪽)
|
|
도구를 쓰는 사람
|
|
- 남이 만든 거 그대로 씀
|
|
- 새로운 도구 나오면 또 배워야 함
|
|
- 도구가 바뀌면 적응하느라 힘듦
|
|
|
|
(오른쪽)
|
|
도구를 만드는 사람, 빌더
|
|
- 내가 필요한 걸 직접 만듦
|
|
- 기존 도구를 내 방식대로 커스텀함
|
|
- 도구가 바뀌어도 새로 만들면 됨
|
|
|
|
AI 시대에는 이 차이가 엄청 커져.
|
|
|
|
왜냐하면 AI 덕분에 도구 만드는 게 쉬워졌거든.
|
|
예전엔 개발 몰라서 못 만들었는데, 이젠 AI한테 시키면 돼.
|
|
|
|
근데 아이러니하게도, 도구 만드는 게 쉬워졌는데
|
|
대부분은 여전히 쓰기만 해.
|
|
ChatGPT 켜서 질문하고, 답 받고, 끝.
|
|
|
|
여기서 차이가 벌어지는 거야.`
|
|
},
|
|
20: {
|
|
title: "클로더즈에서 할 것들",
|
|
notes: `우리는 AI를 "쓰는" 사람들이 아니야.
|
|
AI로 도구를 "만드는" 사람들이야. 빌더.
|
|
|
|
클로더즈에서 하려는 게 뭐냐면:
|
|
|
|
(스텝 하나씩)
|
|
1. 각자의 도구를 만들어 - CLAUDE.md부터 시작해서
|
|
2. 만든 걸 공유해 - 이게 좋더라, 이건 별로더라
|
|
3. 같이 성장해 - 혼자 삽질하지 말고
|
|
4. 뭔가 만들어봐 - 4주 뒤에 실제로 돌아가는 MVP 출시까지
|
|
|
|
프로젝트 단위로 모여서 뭔가 만들어볼 수도 있어.
|
|
각자 도구가 있으니까 빠르잖아.`
|
|
},
|
|
21: {
|
|
title: "4주 커리큘럼",
|
|
notes: `4주 동안 이런 걸 배울 거야:
|
|
|
|
1주차: CLAUDE.md 작성법, AI에게 지침 주는 법
|
|
2주차: 커스텀 커맨드로 반복 작업 자동화
|
|
3주차: MCP 서버로 외부 서비스 연결
|
|
4주차: 실제 MVP 만들어서 출시
|
|
|
|
어렵게 느껴질 수도 있어. 근데 걱정 마.
|
|
하나씩 따라하다 보면 어느새 빌더가 돼있을 거야.
|
|
|
|
막히면 슬랙에 물어봐. 다 같이 하는 거니까.`
|
|
},
|
|
22: {
|
|
title: "오늘 배운 거",
|
|
notes: `오늘 배운 거 정리하면:
|
|
|
|
CLAUDE.md - AI한테 주는 지침 파일
|
|
휴먼터치 - AI 결과물 무조건 확인하기
|
|
루프백 - 지침 → 결과 → 수정 → 반복
|
|
빌더 - 도구를 만드는 사람
|
|
|
|
이게 AI 활용의 기본이야.
|
|
|
|
다음 시간부터는 이걸 더 발전시켜서
|
|
커스텀 커맨드, MCP 서버까지 가볼 거야.`
|
|
},
|
|
23: {
|
|
title: "마지막 한 마디",
|
|
notes: `앞으로 어떤 세상이 될지 아무도 몰라.
|
|
|
|
근데 하나는 확실해.
|
|
|
|
(천천히, 강조하며)
|
|
도구를 만들 줄 아는 사람은 어디서든 가치를 만들 수 있어.
|
|
|
|
4주 뒤에 너희는
|
|
진짜 돌아가는 서비스를 출시한 사람이 돼.
|
|
|
|
그게 오늘 시작이야.
|
|
|
|
(마무리)
|
|
빌더가 되자.
|
|
|
|
감사합니다. 질문 있으면 해주세요.`
|
|
}
|
|
};
|
|
|
|
// ===== 슬라이드 수 =====
|
|
const slides = document.querySelectorAll('.slide');
|
|
let currentSlide = 0;
|
|
|
|
// 현재 보이는 슬라이드 찾기
|
|
function getCurrentVisibleSlide() {
|
|
const scrollPos = window.scrollY + window.innerHeight / 3;
|
|
for (let i = slides.length - 1; i >= 0; i--) {
|
|
if (slides[i].offsetTop <= scrollPos) {
|
|
return i;
|
|
}
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
// 슬라이드로 이동
|
|
function goToSlide(index) {
|
|
if (index >= 0 && index < slides.length) {
|
|
currentSlide = index;
|
|
slides[index].scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
|
|
// 키보드 이벤트
|
|
document.addEventListener('keydown', (e) => {
|
|
currentSlide = getCurrentVisibleSlide();
|
|
|
|
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
|
|
e.preventDefault();
|
|
goToSlide(currentSlide + 1);
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
goToSlide(currentSlide - 1);
|
|
} else if (e.key === 'Home') {
|
|
e.preventDefault();
|
|
goToSlide(0);
|
|
} else if (e.key === 'End') {
|
|
e.preventDefault();
|
|
goToSlide(slides.length - 1);
|
|
}
|
|
});
|
|
|
|
// 현재 슬라이드 인디케이터
|
|
const indicator = document.createElement('div');
|
|
indicator.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: var(--bg-white); padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 12px rgba(124,58,237,0.1); color: var(--primary); font-size: 0.9rem; font-weight: 600; z-index: 100;';
|
|
document.body.appendChild(indicator);
|
|
|
|
function updateIndicator() {
|
|
currentSlide = getCurrentVisibleSlide();
|
|
indicator.textContent = (currentSlide + 1) + ' / ' + slides.length;
|
|
}
|
|
|
|
window.addEventListener('scroll', updateIndicator);
|
|
updateIndicator();
|
|
|
|
// ===== 발표자 노트 창으로 전송 =====
|
|
let presenterWindow = null;
|
|
|
|
function broadcastSlideChange(slideNum) {
|
|
if (presenterWindow && !presenterWindow.closed) {
|
|
presenterWindow.postMessage({
|
|
type: 'slideChange',
|
|
slide: slideNum,
|
|
notes: presenterNotes[slideNum] || { title: '슬라이드 ' + slideNum, notes: '' }
|
|
}, '*');
|
|
}
|
|
}
|
|
|
|
// 스크롤 시 슬라이드 변경 감지
|
|
let lastBroadcastedSlide = -1;
|
|
window.addEventListener('scroll', () => {
|
|
const current = getCurrentVisibleSlide() + 1;
|
|
if (current !== lastBroadcastedSlide) {
|
|
lastBroadcastedSlide = current;
|
|
broadcastSlideChange(current);
|
|
}
|
|
});
|
|
|
|
// 키보드로 슬라이드 넘길 때도 broadcast
|
|
document.addEventListener('keydown', (e) => {
|
|
setTimeout(() => {
|
|
const current = getCurrentVisibleSlide() + 1;
|
|
if (current !== lastBroadcastedSlide) {
|
|
lastBroadcastedSlide = current;
|
|
broadcastSlideChange(current);
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// ===== 발표자 노트 창 열기 (P키) =====
|
|
function openPresenterNotes() {
|
|
if (presenterWindow && !presenterWindow.closed) {
|
|
presenterWindow.focus();
|
|
return;
|
|
}
|
|
|
|
presenterWindow = window.open('', 'presenter-notes', 'width=900,height=700');
|
|
const initialSlide = getCurrentVisibleSlide() + 1;
|
|
const initialNotes = presenterNotes[initialSlide] || { title: '', notes: '' };
|
|
|
|
const presenterHTML = '<!DOCTYPE html>' +
|
|
'<html lang="ko">' +
|
|
'<head>' +
|
|
' <meta charset="UTF-8">' +
|
|
' <title>발표자 노트 - 클로더즈</title>' +
|
|
' <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap" rel="stylesheet">' +
|
|
' <style>' +
|
|
' * { margin: 0; padding: 0; box-sizing: border-box; }' +
|
|
' body { font-family: "Noto Sans KR", sans-serif; background: #0a0a0a; color: #fff; padding: 2rem; height: 100vh; display: flex; flex-direction: column; }' +
|
|
' .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 3px solid #7C3AED; }' +
|
|
' .slide-num { font-size: 3rem; font-weight: 800; color: #7C3AED; }' +
|
|
' .slide-title { font-size: 1.3rem; font-weight: 600; color: #fff; margin-left: 1rem; }' +
|
|
' .meta { text-align: right; }' +
|
|
' .total { font-size: 1rem; color: #666; }' +
|
|
' .timer { background: #7C3AED; color: white; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 1.5rem; font-weight: 800; margin-top: 0.3rem; display: inline-block; }' +
|
|
' .notes { flex: 1; background: #1a1a1a; border-radius: 12px; padding: 2rem; overflow-y: auto; margin-top: 1rem; }' +
|
|
' .notes-content { font-size: 1.4rem; line-height: 1.9; white-space: pre-wrap; color: #eee; }' +
|
|
' .tip { margin-top: 1rem; font-size: 0.85rem; color: #555; text-align: center; }' +
|
|
' .tip span { color: #7C3AED; }' +
|
|
' </style>' +
|
|
'</head>' +
|
|
'<body>' +
|
|
' <div class="header">' +
|
|
' <div style="display:flex;align-items:baseline;">' +
|
|
' <div class="slide-num" id="slideNum">' + initialSlide + '</div>' +
|
|
' <div class="slide-title" id="slideTitle">' + initialNotes.title + '</div>' +
|
|
' </div>' +
|
|
' <div class="meta">' +
|
|
' <div class="total">/ ' + slides.length + '</div>' +
|
|
' <div class="timer" id="timer">00:00</div>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
' <div class="notes">' +
|
|
' <div class="notes-content" id="notesContent">' + initialNotes.notes + '</div>' +
|
|
' </div>' +
|
|
' <div class="tip">메인 창에서 <span>← →</span> 또는 <span>스페이스바</span>로 넘기기 | <span>P</span> 키로 이 창 열기</div>' +
|
|
' <script>' +
|
|
' var startTime = Date.now();' +
|
|
' setInterval(function() {' +
|
|
' var elapsed = Math.floor((Date.now() - startTime) / 1000);' +
|
|
' var mins = Math.floor(elapsed / 60).toString().padStart(2, "0");' +
|
|
' var secs = (elapsed % 60).toString().padStart(2, "0");' +
|
|
' document.getElementById("timer").textContent = mins + ":" + secs;' +
|
|
' }, 1000);' +
|
|
' window.addEventListener("message", function(e) {' +
|
|
' if (e.data && e.data.type === "slideChange") {' +
|
|
' document.getElementById("slideNum").textContent = e.data.slide;' +
|
|
' document.getElementById("slideTitle").textContent = e.data.notes.title;' +
|
|
' document.getElementById("notesContent").textContent = e.data.notes.notes;' +
|
|
' }' +
|
|
' });' +
|
|
' <\/script>' +
|
|
'</body>' +
|
|
'</html>';
|
|
|
|
presenterWindow.document.write(presenterHTML);
|
|
presenterWindow.document.close();
|
|
|
|
// 초기 슬라이드 정보 전송
|
|
setTimeout(() => {
|
|
const current = getCurrentVisibleSlide() + 1;
|
|
broadcastSlideChange(current);
|
|
}, 300);
|
|
}
|
|
|
|
// P키로 발표자 노트 창 열기
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'p' || e.key === 'P') {
|
|
e.preventDefault();
|
|
openPresenterNotes();
|
|
}
|
|
});
|
|
|
|
// 발표자 노트 버튼
|
|
const presenterBtn = document.createElement('button');
|
|
presenterBtn.innerHTML = 'P';
|
|
presenterBtn.title = '발표자 노트 열기 (P)';
|
|
presenterBtn.style.cssText = 'position: fixed; bottom: 10px; left: 10px; background: rgba(100,100,100,0.3); color: rgba(255,255,255,0.5); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 0.8rem; font-weight: 600; cursor: pointer; z-index: 100; font-family: "Noto Sans KR", sans-serif; transition: all 0.2s ease; opacity: 0.4;';
|
|
presenterBtn.addEventListener('mouseenter', () => {
|
|
presenterBtn.style.opacity = '1';
|
|
presenterBtn.style.background = 'var(--primary)';
|
|
presenterBtn.style.color = 'white';
|
|
});
|
|
presenterBtn.addEventListener('mouseleave', () => {
|
|
presenterBtn.style.opacity = '0.4';
|
|
presenterBtn.style.background = 'rgba(100,100,100,0.3)';
|
|
presenterBtn.style.color = 'rgba(255,255,255,0.5)';
|
|
});
|
|
presenterBtn.addEventListener('click', openPresenterNotes);
|
|
document.body.appendChild(presenterBtn);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|