marp: true theme: default paginate: true size: 16:9 backgroundColor: '#1D242B' header: '' footer: '세미클래스 · AI 쉽고 재밌게 활용하기: 기초편' style: | @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root { --blue: #068FFF; --blue-2: #3BA8FF; --dark: #1D242B; --dark-2: #252E37; --dark-3: #2E3842; --border: #3A4651; --muted: #9AA8B8; --text: #E8ECF0; --white: #FFFFFF; --green: #69DB7C; --yellow: #FFD166; --red: #FF6B6B; }

section { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--dark); color: var(--text); padding: 46px 64px; font-size: 18px; letter-spacing: 0; box-sizing: border-box; word-break: keep-all; overflow-wrap: normal; line-break: strict; } section::after, footer { color: rgba(255,255,255,0.34); font-size: 13px; } h1 { margin: 0 0 16px; color: var(--white); font-size: 46px; line-height: 1.13; letter-spacing: 0; } h2 { margin: 0 0 18px; color: var(--blue-2); font-size: 26px; line-height: 1.25; letter-spacing: 0; } h3 { margin: 0 0 9px; color: var(--white); font-size: 22px; line-height: 1.25; letter-spacing: 0; } p, li { color: var(--text); font-size: 18px; line-height: 1.45; word-break: keep-all; overflow-wrap: normal; line-break: strict; } h1, h2, h3, h4, h5, h6, strong, em, span, div { word-break: keep-all; overflow-wrap: normal; line-break: strict; } strong { color: var(--blue-2); font-weight: 850; } em { color: var(--muted); font-style: normal; } code { color: var(--blue-2); background: var(--dark-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }

section.title { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: radial-gradient(circle at 80% 18%, rgba(255,255,255,0.12), transparent 24%), radial-gradient(circle at 16% 88%, rgba(255,255,255,0.10), transparent 30%), var(--blue); } section.title h1 { font-size: 60px; line-height: 1.05; } section.title h2 { color: rgba(255,255,255,0.88); font-weight: 650; } section.title strong { color: var(--white); } section.title .brand { font-weight: 900; color: rgba(255,255,255,0.74); margin-bottom: 32px; }

section.section, section.quote, section.cta { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(6,143,255,0.20), transparent 58%), var(--dark); } section.section h1, section.quote h1, section.cta h1 { font-size: 56px; line-height: 1.16; }

.lead { font-size: 25px; color: #C9D4DE; font-weight: 650; max-width: 920px; } .muted { color: var(--muted); } .big { font-size: 56px; line-height: 1.08; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stack-col { display: flex; flex-direction: column; gap: 14px; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .visual-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: stretch; } .card { position: relative; background: radial-gradient(circle at 50% 0%, rgba(6,143,255,0.16), transparent 70%), var(--dark-2); border: 1px solid rgba(6,143,255,0.32); border-radius: 14px; padding: 18px 18px 18px 18px; min-height: 126px; } .card.blue { border-color: rgba(6,143,255,0.66); background: radial-gradient(circle at 50% 0%, rgba(6,143,255,0.28), transparent 70%), rgba(6,143,255,0.10); } .card.green { border-color: rgba(105,219,124,0.55); background: radial-gradient(circle at 50% 0%, rgba(105,219,124,0.22), transparent 70%), rgba(105,219,124,0.06); } .card.yellow { border-color: rgba(255,209,102,0.55); background: radial-gradient(circle at 50% 0%, rgba(255,209,102,0.22), transparent 70%), rgba(255,209,102,0.06); } .card.red { border-color: rgba(255,107,107,0.55); background: radial-gradient(circle at 50% 0%, rgba(255,107,107,0.22), transparent 70%), rgba(255,107,107,0.06); } .card-icon { width: 40px; height: 40px; color: #3BA8FF; margin-bottom: 10px; filter: drop-shadow(0 0 8px rgba(6,143,255,0.55)); display: block; } .card-icon.text-icon { display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; font-weight: 900; } .card.green .card-icon { color: #69DB7C; filter: drop-shadow(0 0 8px rgba(105,219,124,0.55)); } .card.yellow .card-icon { color: #FFD166; filter: drop-shadow(0 0 8px rgba(255,209,102,0.55)); } .card.red .card-icon { color: #FF6B6B; filter: drop-shadow(0 0 8px rgba(255,107,107,0.45)); } .tag { display: inline-block; padding: 5px 9px; border-radius: 999px; color: #BDE1FF; background: rgba(6,143,255,0.18); font-size: 13px; font-weight: 900; margin-bottom: 10px; } .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: stretch; } .step { border: 1px solid rgba(6,143,255,0.45); background: rgba(6,143,255,0.09); border-radius: 14px; padding: 14px; min-height: 150px; } .step b { display: block; color: var(--blue-2); font-size: 28px; margin-bottom: 8px; } .step span { color: var(--muted); font-size: 15px; line-height: 1.35; } .prompt { border: 1px solid rgba(6,143,255,0.42); background: rgba(6,143,255,0.10); border-radius: 14px; padding: 18px; color: #DDEBFA; font-size: 17px; line-height: 1.48; } .timeline { display: grid; grid-template-columns: 110px 1fr; gap: 10px; } .time { color: var(--blue-2); font-weight: 900; } .line { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 16px; } .mission-card { border: 1px solid rgba(6,143,255,0.5); background: linear-gradient(135deg, rgba(6,143,255,0.18), rgba(105,219,124,0.10)); border-radius: 18px; padding: 22px; min-height: 240px; } .mission-card h3 { font-size: 20px; color: var(--white); margin-bottom: 6px; } .mission-card .who { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .mission-card .m { padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.10); font-size: 14px; } .mission-card .m:first-of-type { border-top: 0; } .mission-card .stamp { color: rgba(255,255,255,0.45); font-size: 11px; margin-top: 12px; } .infographic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: center; min-height: 300px; } .bubble { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 170px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); background: rgba(6,143,255,0.12); } .bubble strong { font-size: 38px; color: var(--white); } .bubble span { margin-top: 8px; font-size: 15px; color: #C9D4DE; line-height: 1.35; } .infographic-svg { position: relative; width: 100%; margin-top: 8px; } .infographic-svg img, .infographic-svg svg { width: 100%; height: auto; display: block; } .infographic-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; margin-bottom: 16px; width: 100%; } .infographic-labels span { text-align: center; color: #C9D4DE; font-size: 18px; font-weight: 700; line-height: 1.3; } .infographic-labels span:last-child { color: #B0F0BC; } .media-slot { min-height: 300px; border: 2px dashed rgba(255,255,255,0.26); border-radius: 18px; background: rgba(255,255,255,0.05); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; } .media-slot b { color: var(--yellow); font-size: 24px; margin-bottom: 8px; } .media-slot span { color: var(--muted); font-size: 16px; line-height: 1.45; } .media-placeholder { border: 1.5px dashed rgba(6,143,255,0.55); border-radius: 12px; background: linear-gradient(135deg, rgba(6,143,255,0.06), rgba(105,219,124,0.04)); padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; min-height: 180px; position: relative; } .media-placeholder .badge { position: absolute; top: 10px; right: 12px; background: rgba(255,209,102,0.18); color: var(--yellow); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .media-placeholder .ico { color: var(--blue-2); width: 36px; height: 36px; margin-bottom: 10px; opacity: 0.85; filter: drop-shadow(0 0 8px rgba(6,143,255,0.45)); } .media-placeholder .ico.text-icon { display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; font-weight: 900; } .media-placeholder h4 { margin: 0 0 4px; color: var(--white); font-size: 17px; } .media-placeholder p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .media-placeholder .note { display: none; } .checklist-capture { position: relative; border: 1.5px dashed rgba(6,143,255,0.55); border-radius: 12px; background: #1f201d; padding: 16px 18px; min-height: 300px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); } .checklist-capture .badge { position: absolute; top: 10px; right: 12px; background: rgba(255,209,102,0.18); color: var(--yellow); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } .checklist-capture h4 { margin: 0 0 18px; color: var(--white); font-size: 20px; line-height: 1.2; } .checklist-capture .cap-section { margin-top: 12px; } .checklist-capture .cap-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--white); font-size: 15px; font-weight: 850; } .checklist-capture table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; display: table; overflow: visible; background: transparent !important; } .checklist-capture thead, .checklist-capture tbody, .checklist-capture tr { background: transparent !important; } .checklist-capture th, .checklist-capture td { border-bottom: 1px solid rgba(255,255,255,0.22); padding: 7px 5px; color: #E8ECF0; font-size: 9.8px; line-height: 1.35; vertical-align: top; background: transparent !important; } .checklist-capture th { color: var(--white); font-size: 10.2px; text-align: left; font-weight: 800; } .checklist-capture th:nth-child(1), .checklist-capture td:nth-child(1) { width: 32%; } .checklist-capture th:nth-child(2), .checklist-capture td:nth-child(2) { width: 48%; } .checklist-capture th:nth-child(3), .checklist-capture td:nth-child(3) { width: 20%; } .checklist-capture .hero-row td:first-child { color: var(--white); font-weight: 850; } .checklist-capture .note-line { margin: 12px 0 6px; padding-left: 12px; border-left: 3px solid rgba(255,255,255,0.14); color: #C9D4DE; font-size: 10.8px; line-height: 1.45; } .checklist-capture .star { color: var(--yellow); font-weight: 900; } .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .media-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .visual-aside { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; align-items: center; } .visual-aside .left { display: flex; flex-direction: column; gap: 12px; } .visual-aside .right { display: flex; flex-direction: column; gap: 8px; justify-content: center; } .deliverable-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .deliverable-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .deliverable-section { margin-top: 16px; } .deliverable-section > h3 { color: var(--green); font-size: 20px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .deliverable-section > h3 .inline-icon { width: 22px; color: var(--green); } .deliverable-grid .d { background: rgba(255,255,255,0.04); border: 1px solid rgba(105,219,124,0.28); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .deliverable-grid .d b { color: var(--white); font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .deliverable-grid .d b .inline-icon { width: 16px; color: var(--green); flex-shrink: 0; } .deliverable-grid .d span { color: var(--muted); font-size: 11.5px; } .deliverable-grid .d.hero { border-color: rgba(255,209,102,0.6); background: linear-gradient(135deg, rgba(255,209,102,0.16), rgba(105,219,124,0.06)); } .deliverable-grid .d.hero b .inline-icon { color: var(--yellow); } .mini-mockup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } .mini-mockup span { aspect-ratio: 1; border: 1px solid rgba(6,143,255,0.32); border-radius: 8px; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; color: var(--blue-2); } .mini-mockup svg { width: 28px; height: 28px; opacity: 0.78; } .hero-image { border-radius: 14px; overflow: hidden; background: transparent; line-height: 0; } .hero-image img { width: 100%; height: auto; display: block; } .roadmap-image { width: 100%; margin: 0 auto; border-radius: 14px; overflow: hidden; } .roadmap-image img { width: 100%; height: auto; display: block; } .roadmap-image .crop { width: 100%; overflow: hidden; } .roadmap-image .crop img { margin-top: -4%; margin-bottom: 0; } .video-stage { width: 100%; max-height: 80vh; display: flex; justify-content: center; align-items: center; } .video-stage video { width: 100%; max-width: 1200px; max-height: 78vh; height: auto; border-radius: 14px; border: 1px solid rgba(6,143,255,0.35); background: #000; display: block; } .video-placeholder { width: 100%; max-width: 1200px; aspect-ratio: 16 / 9; max-height: 72vh; border-radius: 14px; border: 2px dashed rgba(6,143,255,0.5); background: linear-gradient(135deg, rgba(6,143,255,0.10), rgba(37,46,55,0.6)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 32px; } .video-placeholder .vp-badge { display: inline-block; background: rgba(6,143,255,0.92); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.3px; padding: 8px 20px; border-radius: 999px; } .video-placeholder h3 { margin: 0; color: var(--white); font-size: 26px; } .video-placeholder p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 760px; } .video-placeholder .vp-script { color: var(--blue-2); font-weight: 700; } section.demo-slide { padding: 28px 60px 22px; } section.demo-slide h1 { margin-bottom: 8px; font-size: 32px; } .roadmap-labels-top { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 6px 8px; } .roadmap-labels-top span { text-align: center; color: var(--white); font-size: 17px; font-weight: 700; line-height: 1.2; padding: 6px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: transparent; } .roadmap-labels-top span .num { color: var(--blue-2); font-weight: 900; margin-right: 4px; } .roadmap-labels-top span:last-child { border-color: rgba(105,219,124,0.45); } .roadmap-labels-top span:last-child .num { color: #69DB7C; } section.roadmap-slide { padding: 30px 60px 24px; } section.roadmap-slide h1 { margin-bottom: 4px; font-size: 36px; } .card-image { width: calc(100% + 36px); margin: -22px -18px 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px 12px 0 0; background: var(--card); } .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .avatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: transparent; overflow: visible; box-shadow: 0 0 0 2px rgba(255,255,255,0.92); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .avatar-row h3 { margin: 0; } .pickup-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 38px auto 24px; max-width: 1100px; } .pickup-badge { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1.5px solid rgba(6,143,255,0.55); border-radius: 999px; background: linear-gradient(135deg, rgba(6,143,255,0.18), rgba(6,143,255,0.06)); color: var(--white); font-size: 19px; font-weight: 700; box-shadow: 0 4px 14px rgba(6,143,255,0.12); } .pickup-badge .num { width: 28px; height: 28px; border-radius: 50%; background: rgba(6,143,255,0.32); color: var(--blue-2); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; } .pickup-badge.hero { border-color: rgba(105,219,124,0.7); background: linear-gradient(135deg, rgba(105,219,124,0.28), rgba(6,143,255,0.10)); box-shadow: 0 6px 22px rgba(105,219,124,0.22); font-size: 21px; } .pickup-badge.hero .num { background: rgba(105,219,124,0.36); color: #B0F0BC; } .pickup-badge.commit { border-color: rgba(255,209,102,0.7); background: linear-gradient(135deg, rgba(255,209,102,0.22), rgba(255,107,107,0.10)); box-shadow: 0 4px 14px rgba(255,209,102,0.18); } .pickup-badge.commit .num { background: rgba(255,209,102,0.32); color: var(--yellow); } .pickup-footer { text-align: center; color: var(--muted); font-size: 17px; margin-top: 14px; }

<div class="brand">SEMICLASS · 비정기 클래스</div>

AI 쉽고 재밌게 활용하기:<br /><strong>기초편</strong>

흩어진 일을 한 화면에 모으는 첫 2시간

오늘의 기준은<br /><strong>거창한 자동화가 아닙니다</strong>

<p class="lead">매주 반복되는 업무와 흩어진 일정을 AI랑 같이 정리해 보고, 마지막에는 <strong>한 화면에 다 모이는 대시보드</strong> 한 장을 만들어서 가져가는 게 오늘의 목표예요.</p>

함께 따라가 볼 가상의 주인공

<div class="visual-aside"> <div class="hero-image"> <img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/persona-illustration.jpg" alt="김민지씨의 책상 — 야경이 보이는 창가에서 노트북으로 캠페인 대시보드를 보며 일하는 마케터" /> </div> <div class="right"> <div class="card blue"> <div class="avatar-row"> <div class="avatar"><img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/persona-avatar.png" alt="김민지씨 아바타" /></div> <h3>김민지 (33세)</h3> </div> <p>중견기업 마케팅 8년차. 마포→광화문 30분 통근, 1인가구에 고양이 '치즈' 한 마리. 평일은 캠페인·SNS·고객 답장 야근이라 저녁은 거의 배달, 헬스장은 두 달째 안 가는 중. 청약·적금은 들고 있는데 청년 우대형 가입은 아직 못 했고, 작년 검진에서 콜레스테롤도 슬쩍 올랐어요.</p> </div> </div> </div> <div class="deliverable-section"> <h3><span class="inline-icon" aria-hidden="true">▦</span> 오늘 만들어 갈 것들</h3> <div class="deliverable-grid cols-4"> <div class="d"> <b><span class="inline-icon" aria-hidden="true">▧</span> 인포그래픽</b> <span>캠페인 회고 카드 1장</span> </div> <div class="d"> <b><span class="inline-icon" aria-hidden="true">▤</span> 주간 보고서 PDF</b> <span>매주 금요일용 한 페이지</span> </div> <div class="d"> <b><span class="inline-icon" aria-hidden="true">▣</span> SNS 카드 3장</b> <span>런칭·중간·마감 시리즈</span> </div> <div class="d hero"> <b><span class="inline-icon" aria-hidden="true">▦</span> 점검판 대시보드 ⭐</b> <span>한 화면 4~6 위젯</span> </div> </div> </div> <p class="muted">김민지씨는 오늘 시나리오를 따라가기 위한 <strong>가상의 동료</strong>예요. 마케터가 아니어도 괜찮습니다 — 본인 직무·연차·가족 상황에 맞춰 한 줄씩만 살짝 바꿔서 따라오시면 됩니다.</p>

김민지씨의 평일 — 우리도 이런 적 있죠?

<div class="grid-2"> <div class="media-placeholder" style="border-color: rgba(255,107,107,0.55); background: linear-gradient(135deg, rgba(255,107,107,0.10), rgba(255,209,102,0.04));"> <span class="badge" style="background: rgba(255,107,107,0.22); color: var(--red);">밤 11시</span> <div class="card-image"><img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/persona-before-night.jpg" alt="밤 11시, 화면 여섯 개를 오가며 야근하는 김민지씨" /></div> <h4>화면 여섯 개를 오가는 야근</h4> <p>노션·슬랙·구글 시트·인스타 인사이트·카카오 채널·캘린더. 매주 같은 숫자를 여섯 곳에 옮겨 적느라 퇴근이 늦어집니다.</p> </div> <div class="media-placeholder" style="border-color: rgba(105,219,124,0.55); background: linear-gradient(135deg, rgba(105,219,124,0.10), rgba(6,143,255,0.04));"> <span class="badge" style="background: rgba(105,219,124,0.22); color: var(--green);">저녁 9시</span> <div class="card-image"><img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/persona-after-evening.jpg" alt="저녁 9시, 한 화면 대시보드로 차분히 점검하는 김민지씨" /></div> <h4>한 화면으로 끝나는 점검</h4> <p>오늘 함께 만들어 볼 대시보드 한 장. 캠페인 상태와 KPI·생활 지출·오늘 할 일이 한눈에 보여서, 30초 점검 후 퇴근합니다.</p> </div> </div> <p class="muted">"AI를 잘 쓴다"라는 건 코딩이나 에이전틱 시스템 설계 같은 거창한 일이 아닙니다. <strong>실제 내 일상과 업무에서 겪는 문제를 AI로 해결하는 것</strong>입니다.</p>

이런 마음으로 오셨다면 잘 오셨어요

<div class="grid-2"> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2UtY2lyY2xlIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTIuOTkyIDE2LjM0MmEyIDIgMCAwIDEgLjA5NCAxLjE2N2wtMS4wNjUgMy4yOWExIDEgMCAwIDAgMS4yMzYgMS4xNjhsMy40MTMtLjk5OGEyIDIgMCAwIDEgMS4wOTkuMDkyIDEwIDEwIDAgMSAwLTQuNzc3LTQuNzE5IiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><span class="tag">막막함</span><h3>"AI 써보고는 싶은데"</h3><p>이름은 들어봤지만, 정작 뭘 시켜야 할지 매번 막막했다면.</p></div> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNhbGVuZGFyLWNsb2NrIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTE2IDE0djIuMmwxLjYgMSIgLz4KICA8cGF0aCBkPSJNMTYgMnY0IiAvPgogIDxwYXRoIGQ9Ik0yMSA3LjVWNmEyIDIgMCAwIDAtMi0ySDVhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDMuNSIgLz4KICA8cGF0aCBkPSJNMyAxMGg1IiAvPgogIDxwYXRoIGQ9Ik04IDJ2NCIgLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSI2IiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><span class="tag">반복</span><h3>"매주 같은 일을 처음부터"</h3><p>회의록·보고서·고객 답장·SNS 콘텐츠를 매번 백지에서 시작하고 있다면.</p></div> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1hcCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik0xNC4xMDYgNS41NTNhMiAyIDAgMCAwIDEuNzg4IDBsMy42NTktMS44M0ExIDEgMCAwIDEgMjEgNC42MTl2MTIuNzY0YTEgMSAwIDAgMS0uNTUzLjg5NGwtNC41NTMgMi4yNzdhMiAyIDAgMCAxLTEuNzg4IDBsLTQuMjEyLTIuMTA2YTIgMiAwIDAgMC0xLjc4OCAwbC0zLjY1OSAxLjgzQTEgMSAwIDAgMSAzIDE5LjM4MVY2LjYxOGExIDEgMCAwIDEgLjU1My0uODk0bDQuNTUzLTIuMjc3YTIgMiAwIDAgMSAxLjc4OCAweiIgLz4KICA8cGF0aCBkPSJNMTUgNS43NjR2MTUiIC8+CiAgPHBhdGggZD0iTTkgMy4yMzZ2MTUiIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /><span class="tag">흩어짐</span><h3>"청약·세금·구독이 다 따로"</h3><p>월급이 어디로 새는지, 청약·세금 마감일은 언제인지 — 매번 따로 찾고 있다면.</p></div> <div class="card green"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWhhbmQiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iI0ZGRkZGRiIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTggMTFWNmEyIDIgMCAwIDAtMi0yYTIgMiAwIDAgMC0yIDIiIC8+CiAgPHBhdGggZD0iTTE0IDEwVjRhMiAyIDAgMCAwLTItMmEyIDIgMCAwIDAtMiAydjIiIC8+CiAgPHBhdGggZD0iTTEwIDEwLjVWNmEyIDIgMCAwIDAtMi0yYTIgMiAwIDAgMC0yIDJ2OCIgLz4KICA8cGF0aCBkPSJNMTggOGEyIDIgMCAxIDEgNCAwdjZhOCA4IDAgMCAxLTggOGgtMmMtMi44IDAtNC41LS44Ni01Ljk5LTIuMzRsLTMuNi0zLjZhMiAyIDAgMCAxIDIuODMtMi44Mkw3IDE1IiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><span class="tag">시도</span><h3>"내 일로 바로 해 보고 싶다"</h3><p>오늘 본인 캠페인·실적 자료 한 건 가져와서, AI랑 같이 분석해 보고 싶다면.</p></div> </div> <p class="muted">하나라도 끄덕여졌다면, 다음 두 시간 동안 함께 풀어 볼게요.</p>

자동화에 대한 흔한 오해 세 가지

<div class="grid-3"> <div class="card red"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iI0ZGRkZGRiIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtMTYgMTggNi02LTYtNiIgLz4KICA8cGF0aCBkPSJtOCA2LTYgNiA2IDYiIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /><h3>"개발자나 하는 거"</h3><p>코드 한 줄 안 써도 오늘 끝까지 따라오실 수 있어요.</p></div> <div class="card red"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdhdWdlIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0ibTEyIDE0IDQtNCIgLz4KICA8cGF0aCBkPSJNMy4zNCAxOWExMCAxMCAwIDEgMSAxNy4zMiAwIiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><h3>"한 번에 다 돌아가야"</h3><p>처음엔 사람이 시작하고, 일부를 AI에 맡기는 것만으로도 충분합니다.</p></div> <div class="card red"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRodW1icy11cCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik0xNSA1Ljg4IDE0IDEwaDUuODNhMiAyIDAgMCAxIDEuOTIgMi41NmwtMi4zMyA4QTIgMiAwIDAgMSAxNy41IDIySDRhMiAyIDAgMCAxLTItMnYtOGEyIDIgMCAwIDEgMi0yaDIuNzZhMiAyIDAgMCAwIDEuNzktMS4xMUwxMiAyYTMuMTMgMy4xMyAwIDAgMSAzIDMuODhaIiAvPgogIDxwYXRoIGQ9Ik03IDEwdjEyIiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><h3>"한 방에 정답을 내야"</h3><p>한 번에 끝내는 게 아니라, 두세 번 다듬어 가는 게 정상이에요.</p></div> </div> <p class="lead">오늘은 <strong>사람이 시작하고 · AI가 정리·검색·디자인하고 · 사람이 마지막으로 검토하는</strong> 흐름부터 잡아 보겠습니다.</p>

오늘 진행은 이렇게 됩니다

오늘의 5단계 실습

오늘 함께 걸어갈 5단계

시작 전, Claude 한 가지만 켜 두세요

<div class="grid-2"> <div class="card blue"> <img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNwYXJrbGVzIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTExLjAxNyAyLjgxNGExIDEgMCAwIDEgMS45NjYgMGwxLjA1MSA1LjU1OGEyIDIgMCAwIDAgMS41OTQgMS41OTRsNS41NTggMS4wNTFhMSAxIDAgMCAxIDAgMS45NjZsLTUuNTU4IDEuMDUxYTIgMiAwIDAgMC0xLjU5NCAxLjU5NGwtMS4wNTEgNS41NThhMSAxIDAgMCAxLTEuOTY2IDBsLTEuMDUxLTUuNTU4YTIgMiAwIDAgMC0xLjU5NC0xLjU5NGwtNS41NTgtMS4wNTFhMSAxIDAgMCAxIDAtMS45NjZsNS41NTgtMS4wNTFhMiAyIDAgMCAwIDEuNTk0LTEuNTk0eiIgLz4KICA8cGF0aCBkPSJNMjAgMnY0IiAvPgogIDxwYXRoIGQ9Ik0yMiA0aC00IiAvPgogIDxjaXJjbGUgY3g9IjQiIGN5PSIyMCIgcj0iMiIgLz4KPC9zdmc+Cg==" alt="" aria-hidden="true" /> <span class="tag">무료 — 실습 1~5 전부</span> <h3>Claude 무료 플랜</h3> <p><code>claude.ai</code> 이메일·구글 가입 1분. <strong>오늘 다섯 단계 전부</strong> 무료로 따라옵니다 — 매일 누적되는 사령탑까지.</p> <ul style="margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; line-height: 1.5;"> <li>실습 1~3 — 대화·파일 첨부·자동 웹 검색</li> <li><strong style="color: var(--green);">실습 4·5도 Artifact로 무료</strong> — 코드 다운로드 → 바탕화면 <code>점검판.html</code> → 매일 누적</li> </ul> </div> <div class="card green"> <img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRyZW5kaW5nLXVwIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTE2IDdoNnY2IiAvPgogIDxwYXRoIGQ9Im0yMiA3LTguNSA4LjUtNS01TDIgMTciIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /> <span class="tag">선택 — 부록·속도</span> <h3>Claude Pro · $20/월</h3> <p>본편은 무료로 끝납니다. Pro는 <strong>부록(Cowork 자동 갱신)</strong>·메시지 한도·빠른 응답이 필요한 분만.</p> <ul style="margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; line-height: 1.5;"> <li>부록 — Cowork + Live Artifacts + 매일 09:00 Scheduled</li> <li><strong style="color: var(--yellow);">실습 중엔 모델을 Sonnet으로</strong> — Opus는 데모 분량에 한도 금방 도달</li> </ul> </div> </div> <p class="muted">✅ <strong>오늘 핵심</strong> — 실습 1~5 전부 <strong>무료 플랜 하나로</strong> 완주합니다. 매일 누적되는 대시보드는 Artifact 코드를 <strong>다운로드해 바탕화면에서 열면</strong> 무료로도 됩니다. Cowork·자동 갱신은 끝나고 더 해보실 분을 위한 <strong>부록</strong>. 실습 중에는 좌측 상단 모델을 <strong>Claude Sonnet</strong>으로 두세요 — Opus는 데모 분량에 한도가 금방 찹니다.</p>

오늘 전체를 담을 그릇 — <strong>Claude Project</strong>

<div class="stack-col"> <div class="grid-3"> <div class="card blue" style="padding: 14px 16px; min-height: 0;"> <span class="tag">1) 지침 한 번만</span> <h3 style="margin: 4px 0 4px; font-size: 18px;">페르소나·말투를 Project 지침에</h3> <p style="margin: 0; font-size: 14px; line-height: 1.5;">한 번 적어두면 <strong>모든 대화에 자동 적용</strong> — 매번 다시 설명 안 해도 돼요.</p> </div> <div class="card" style="padding: 14px 16px; min-height: 0;"> <span class="tag">2) [파일] 탭에 누적</span> <h3 style="margin: 4px 0 4px; font-size: 18px;">실습 2~4의 자료를 차곡차곡</h3> <p style="margin: 0; font-size: 14px; line-height: 1.5;">한 번 올려두면 단계 2·3·4 대화가 자동 참고 — 매번 다시 첨부 안 해요.</p> </div> <div class="card green" style="padding: 14px 16px; min-height: 0;"> <span class="tag">3) 실습 4·5도 그대로</span> <h3 style="margin: 4px 0 4px; font-size: 18px;">같은 Project에서 Artifact로</h3> <p style="margin: 0; font-size: 14px; line-height: 1.5;">모드 전환 없이 — 같은 대화에서 <strong>Artifact</strong>로 결과물·대시보드. 지침·파일 그대로.</p> </div> </div> <div> <span class="tag" style="display: inline-block; background: rgba(255,209,102,0.2); color: var(--yellow); padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-bottom: 6px;">📌 오늘 쓸 Project 지침 (강사 시연)</span> <div class="prompt" style="font-size: 15px; line-height: 1.5;"> 나는 1992년생 마케터, 중견기업 8년차. 서울 마포 1인가구, 고양이 치즈 한 마리.<br /> 청약·적금·CMA 관리, 청년 우대형 가입 아직. 헬스장 두 달째 안 감, 콜레스테롤 살짝 높음.<br /> 업무: 캠페인·SNS·고객 답장·주간 보고서.<br /> 답변은 <strong>한국어 친근체</strong>, 출처 없는 숫자는 "추정", 민감정보는 가명·둥근 숫자로. </div> <p class="muted" style="font-size: 13.5px; margin-top: 6px;">강사 30초 시연. <strong>본인 직무·연차·가족구성 1줄</strong>만 바꿔 따라하면 됩니다.</p> </div> </div>

🎬 시연 — Claude Project 만들기

<div class="video-stage"> <video src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/videos/A0-make-project.mp4" controls preload="metadata"></video> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">claude.ai에서 새 Project 만들고 → 방금 본 지침을 그대로 붙여넣고 → 완료 확인까지 약 1분 40초. 이 한 번이면 이후 모든 대화에 페르소나가 자동 적용됩니다.</p>

오늘 받아갈 <strong>데모 팩</strong> — 한눈에

<div class="grid-3"> <div class="card blue" style="padding: 16px 18px;"> <span class="tag">📁 samples/ · Chat 모드</span> <h3 style="margin: 6px 0 6px; font-size: 19px;">실습 1~3 첨부 자료</h3> <p style="margin: 0; font-size: 14px; line-height: 1.5;">캠페인 보고서·카드 내역·고지서·검색 체크리스트 + 대시보드 시작 HTML. <strong>채팅 드래그</strong> 또는 <strong>Project [파일] 영역</strong>에 올려 실습.</p> </div> <div class="card" style="padding: 16px 18px;"> <span class="tag">🗂 chat-project-files/ · [파일] 영역</span> <h3 style="margin: 6px 0 6px; font-size: 19px;">실습 4·5 산출물 가정</h3> <p style="margin: 0; font-size: 14px; line-height: 1.5;"><code>00-project-지침.md</code>(지침 박스에 붙여넣기)+산출물 7종. Project <strong>[파일] 영역에 올려</strong> 결과물·대시보드.</p> </div> <div class="card green" style="padding: 16px 18px;"> <span class="tag">⭐ your-template/ · 내 케이스</span> <h3 style="margin: 6px 0 6px; font-size: 19px;">내 상황으로 갈아끼우기</h3> <p style="margin: 0; font-size: 14px; line-height: 1.5;">chat-project-files와 같은 구조의 빈 양식. <strong>두 곳만 바꾸면</strong> 5분 만에 본인 페르소나로 단계 1~5 재실행.</p> </div> </div> <p class="muted">강의 자료실 "데모 팩" 그룹에서 <strong>전체 ZIP 한 번에 다운로드</strong> + 단계별 시연 영상 + 자료 개별 받기 모두 가능. 위 세 폴더가 오늘 강의의 시작부터 끝, 그리고 클래스 후 본인 활용까지 전부 담겨 있어요. <strong>Cowork 자동 갱신</strong>을 더 해보실 분은 <code>appendix-pro/</code> 부록.</p>

AI한테 맡기기 좋은 일들

<div class="grid-3"> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNsaXBib2FyZC1saXN0IgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iNCIgeD0iOCIgeT0iMiIgcng9IjEiIHJ5PSIxIiAvPgogIDxwYXRoIGQ9Ik0xNiA0aDJhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAySDZhMiAyIDAgMCAxLTItMlY2YTIgMiAwIDAgMSAyLTJoMiIgLz4KICA8cGF0aCBkPSJNMTIgMTFoNCIgLz4KICA8cGF0aCBkPSJNMTIgMTZoNCIgLz4KICA8cGF0aCBkPSJNOCAxMWguMDEiIC8+CiAgPHBhdGggZD0iTTggMTZoLjAxIiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><h3>정리</h3><p>흩어진 메모와 회의록을 표나 카테고리로 깔끔하게 묶어 주는 일.</p></div> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZpbGUtdGV4dCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik02IDIyYTIgMiAwIDAgMS0yLTJWNGEyIDIgMCAwIDEgMi0yaDhhMi40IDIuNCAwIDAgMSAxLjcwNC43MDZsMy41ODggMy41ODhBMi40IDIuNCAwIDAgMSAyMCA4djEyYTIgMiAwIDAgMS0yIDJ6IiAvPgogIDxwYXRoIGQ9Ik0xNCAydjVhMSAxIDAgMCAwIDEgMWg1IiAvPgogIDxwYXRoIGQ9Ik0xMCA5SDgiIC8+CiAgPHBhdGggZD0iTTE2IDEzSDgiIC8+CiAgPHBhdGggZD0iTTE2IDE3SDgiIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /><h3>요약</h3><p>긴 보고서·메일을 짧은 실행 항목 몇 줄로 줄여 주는 일.</p></div> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBhY2thZ2UiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iI0ZGRkZGRiIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTEgMjEuNzNhMiAyIDAgMCAwIDIgMGw3LTRBMiAyIDAgMCAwIDIxIDE2VjhhMiAyIDAgMCAwLTEtMS43M2wtNy00YTIgMiAwIDAgMC0yIDBsLTcgNEEyIDIgMCAwIDAgMyA4djhhMiAyIDAgMCAwIDEgMS43M3oiIC8+CiAgPHBhdGggZD0iTTEyIDIyVjEyIiAvPgogIDxwb2x5bGluZSBwb2ludHM9IjMuMjkgNyAxMiAxMiAyMC43MSA3IiAvPgogIDxwYXRoIGQ9Im03LjUgNC4yNyA5IDUuMTUiIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /><h3>분류</h3><p>지출·고객 응대·일정 같은 데이터를 기준에 맞게 나눠 주는 일.</p></div> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik00IDE0YTEgMSAwIDAgMS0uNzgtMS42M2w5LjktMTAuMmEuNS41IDAgMCAxIC44Ni40NmwtMS45MiA2LjAyQTEgMSAwIDAgMCAxMyAxMGg3YTEgMSAwIDAgMSAuNzggMS42M2wtOS45IDEwLjJhLjUuNSAwIDAgMS0uODYtLjQ2bDEuOTItNi4wMkExIDEgMCAwIDAgMTEgMTR6IiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><h3>우선순위</h3><p>급한 일과 중요한 일을 구분해서 "오늘부터 뭐부터" 알려주는 일.</p></div> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNwYXJrbGVzIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTExLjAxNyAyLjgxNGExIDEgMCAwIDEgMS45NjYgMGwxLjA1MSA1LjU1OGEyIDIgMCAwIDAgMS41OTQgMS41OTRsNS41NTggMS4wNTFhMSAxIDAgMCAxIDAgMS45NjZsLTUuNTU4IDEuMDUxYTIgMiAwIDAgMC0xLjU5NCAxLjU5NGwtMS4wNTEgNS41NThhMSAxIDAgMCAxLTEuOTY2IDBsLTEuMDUxLTUuNTU4YTIgMiAwIDAgMC0xLjU5NC0xLjU5NGwtNS41NTgtMS4wNTFhMSAxIDAgMCAxIDAtMS45NjZsNS41NTgtMS4wNTFhMiAyIDAgMCAwIDEuNTk0LTEuNTk0eiIgLz4KICA8cGF0aCBkPSJNMjAgMnY0IiAvPgogIDxwYXRoIGQ9Ik0yMiA0aC00IiAvPgogIDxjaXJjbGUgY3g9IjQiIGN5PSIyMCIgcj0iMiIgLz4KPC9zdmc+Cg==" alt="" aria-hidden="true" /><h3>검색·요약</h3><p>매번 직접 찾던 외부 정보(청약·세금·트렌드)를 대신 찾아 정리해 주는 일.</p></div> <div class="card yellow"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBhbGV0dGUiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iI0ZGRkZGRiIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgMjJhMSAxIDAgMCAxIDAtMjAgMTAgOSAwIDAgMSAxMCA5IDUgNSAwIDAgMS01IDVoLTIuMjVhMS43NSAxLjc1IDAgMCAwLTEuNCAyLjhsLjMuNGExLjc1IDEuNzUgMCAwIDEtMS40IDIuOHoiIC8+CiAgPGNpcmNsZSBjeD0iMTMuNSIgY3k9IjYuNSIgcj0iLjUiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz4KICA8Y2lyY2xlIGN4PSIxNy41IiBjeT0iMTAuNSIgcj0iLjUiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz4KICA8Y2lyY2xlIGN4PSI2LjUiIGN5PSIxMi41IiByPSIuNSIgZmlsbD0iY3VycmVudENvbG9yIiAvPgogIDxjaXJjbGUgY3g9IjguNSIgY3k9IjcuNSIgcj0iLjUiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz4KPC9zdmc+Cg==" alt="" aria-hidden="true" /><h3>디자인</h3><p>인포그래픽 카드·SNS 콘텐츠·간단한 일러스트까지 한 번에 뽑아 주는 일.</p></div> </div>

그래도 사람이 꼭 해야 하는 일

<div class="grid-2"> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZWNrLWNpcmNsZSIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik0yMS44MDEgMTBBMTAgMTAgMCAxIDEgMTcgMy4zMzUiIC8+CiAgPHBhdGggZD0ibTkgMTEgMyAzTDIyIDQiIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /><h3>최종 판단</h3><p>무엇을 먼저 할지, 어떤 결정을 내릴지, 정말 보낼지는 결국 사람이 결정합니다.</p></div> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdhdWdlIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0ibTEyIDE0IDQtNCIgLz4KICA8cGF0aCBkPSJNMy4zNCAxOWExMCAxMCAwIDEgMSAxNy4zMiAwIiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><h3>사실 확인</h3><p>AI가 마감일·숫자·사람 이름을 틀릴 때가 있어요. 검색 결과 출처는 꼭 직접 한 번 클릭해 보세요.</p></div> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNoaWVsZC1jaGVjayIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik0yMCAxM2MwIDUtMy41IDcuNS03LjY2IDguOTVhMSAxIDAgMCAxLS42Ny0uMDFDNy41IDIwLjUgNCAxOCA0IDEzVjZhMSAxIDAgMCAxIDEtMWMyIDAgNC41LTEuMiA2LjI0LTIuNzJhMS4xNyAxLjE3IDAgMCAxIDEuNTIgMEMxNC41MSAzLjgxIDE3IDUgMTkgNWExIDEgMCAwIDEgMSAxeiIgLz4KICA8cGF0aCBkPSJtOSAxMiAyIDIgNC00IiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><h3>민감 정보 보호</h3><p>주민번호·계좌·회사 내부 정보는 그대로 넣지 않고, 가명·둥근 숫자로 바꿔서 올리세요.</p></div> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1lc3NhZ2UtY2lyY2xlIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNGRkZGRkYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTIuOTkyIDE2LjM0MmEyIDIgMCAwIDEgLjA5NCAxLjE2N2wtMS4wNjUgMy4yOWExIDEgMCAwIDAgMS4yMzYgMS4xNjhsMy40MTMtLjk5OGEyIDIgMCAwIDEgMS4wOTkuMDkyIDEwIDEwIDAgMSAwLTQuNzc3LTQuNzE5IiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><h3>내 말투 반영</h3><p>밖으로 나가는 문장은 마지막에 꼭 본인 말투로 한 번 다듬어서 보내세요.</p></div> </div>

실습 1<br />말 걸어보기

내 상황을 그냥 말해 보기

<div class="visual-aside"> <div class="left"> <div class="prompt"> 이번 분기에 챙겨야 할 생활 일들을<br /> 카테고리(돈·서류·건강·휴식)로 나눠서<br /> 체크리스트로 정리해줘. 각 카테고리 5개 이내. </div> <p class="muted">이 대화도 방금 만든 <strong>Project 안</strong>에서 시작합니다 — 마케터·1인가구·마포 같은 페르소나는 <strong>지침이 이미 받치고</strong> 있으니 본문은 이만큼만. 본인 직무·연차·가족구성이 다르면 <strong>지침 첫 줄</strong>만 한 번 바꿔두면 모든 대화에 자동 적용돼요.</p> <p class="muted" style="margin-top: 6px; font-size: 13.5px;">💡 <strong>실제 데이터로 따라하고 싶으면</strong> — 카드 내역은 본인 <strong>카드사 앱·웹</strong>(이용 내역 → CSV/엑셀 다운로드), 공과금은 <strong>한전 사이버지점·도시가스 고객센터</strong>에서 PDF로 받아오면 단계 2에서 그대로 첨부 가능.</p> </div> <div class="hero-image"> <img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/step1-prompt-scene-v2.jpg" alt="김민지씨가 노트북 옆 AI 마스코트에게 '이번 분기에 내가 챙겨야 될 일들이 뭐가 있을까?' 자연스럽게 말 거는 장면" /> </div> </div>

한 번 더 — 첫 행동·예상 시간 붙여서

<div class="visual-aside"> <div class="left"> <div class="prompt"> 좋아. 각 항목 옆에 두 가지만 더 붙여줘.<br /> 1) 이번 주 시작할 수 있는 "첫 행동" 한 줄<br /> 2) 예상 소요시간 (5분 / 30분 / 1시간 이상)<br /> 표 형태로 정리해 주고, 애매한 건 "사람 검토 필요" 표시. </div> <p class="muted">두세 번 다듬어 가는 흐름이 자연스러워요. 페르소나는 <strong>지침이 받쳐주니</strong> 본문엔 다시 적지 않습니다.</p> </div> <div class="checklist-capture"> <span class="badge">예시 화면</span> <h4>2분기 생활 체크리스트 (맞춤 버전)</h4> <div class="cap-section"> <div class="cap-title">💰 돈</div> <table> <thead><tr><th>항목</th><th>첫 행동 (이번 주)</th><th>소요시간</th></tr></thead> <tbody> <tr><td>연말정산 환급금 사용 계획</td><td>CMA 잔액 확인하고 환급금 입금되면 자동이체할 적금 금액 정하기</td><td>30분</td></tr> <tr><td>고정지출 정리 + 안 쓰는 구독 해지</td><td>카드 앱에서 최근 3개월 정기결제 내역 캡처하기</td><td>30분</td></tr> <tr class="hero-row"><td>청년 우대형 청약통장 전환 <span class="star">⭐</span></td><td>은행 앱에서 전환 검색 → 필요 서류 확인</td><td>5분</td></tr> <tr><td>건강보험료·국민연금 자동이체 점검</td><td>정부24에서 납부내역 한 번 조회</td><td>5분</td></tr> </tbody> </table> <div class="note-line"><span class="star">⭐</span> 청년 우대형은 만 34세까지 가입 가능 — 92년생은 올해가 마지막 해. 우선순위 최상.</div> </div> <div class="cap-section"> <div class="cap-title">📄 서류</div> <table> <thead><tr><th>항목</th><th>첫 행동 (이번 주)</th><th>소요시간</th></tr></thead> <tbody> <tr><td>5월 종합소득세 신고 여부</td><td>홈택스 로그인 → 신고도움 서비스에서 대상 여부 확인</td><td>5분</td></tr> <tr><td>재산세·자동차세 해당 시</td><td>위택스에서 본인 명의 부과 내역 조회</td><td>5분 / 사람 검토 필요</td></tr> <tr><td>전월세 계약 만료일·확정일자</td><td>계약서 사진 찍어서 캘린더에 만료 3개월 전 알림 설정</td><td>5분</td></tr> </tbody> </table> </div> </div> </div>

🎬 시연 — 실습 1 첫 대화

<div class="video-stage"> <video src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/videos/A-step1-talking.mp4" controls preload="metadata"></video> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">김민지씨로 분기 체크리스트 첫 질문 → 한 번 더 다듬어서 "첫 행동·소요시간" 표 받기까지 약 1분 30초. (Project 생성은 앞 시연 참고)</p>

실습 2<br />파일 같이 보내기

2-1 드래그앤드랍으로 첨부하고 분석 요청

<div class="visual-aside"> <div class="left"> <div class="prompt"> <span style="display: inline-block; background: rgba(255,209,102,0.18); color: var(--yellow); padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 800; margin-bottom: 6px;">📎 step2-campaign-report.md 드래그 → 채팅창에 드랍</span><br /> 이 캠페인 핵심 KPI 3개만 짚어주고,<br /> 다음 캠페인에서 개선할 포인트 5개를 아래 표로 정리해줘.<br /><br /> [개선 포인트 · 실행 난이도 · 예상 효과 · 이번 주 첫 액션]<br /> 난이도 쉬움/중간/높음, 효과 상/중/하. 출처 없는 건 "추정". </div> <p class="muted">한 번만 쓰고 버릴 파일은 <strong>채팅창에 드래그 앤 드롭</strong>이면 충분. 결과 받으면 한 번 더 — "임원진 보고용 3줄 요약, 숫자 하나·인사이트 하나·다음 액션 하나, 존댓말로."</p> </div> <div class="hero-image"> <img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/step2-analysis-scene-v4.jpg" alt="김민지씨가 AI 마스코트에게 'step2-campaign-report.md 좀 같이 봐줄래? 중요한 거 짚어서 표로 정리해주면 좋겠는데' 라고 묻고 마스코트가 '잠시만 기다려주세요!' 응답하는 장면" /> </div> </div>

AI가 정리해 준 분석 표

🎬 시연 — 실습 2-1 드래그앤드랍

<div class="video-stage"> <video src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/videos/B-step2-dnd.mp4" controls preload="metadata"></video> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">step2-campaign-report.md를 채팅창에 드래그앤드랍 → 캠페인 핵심 KPI 3개 + 개선 포인트 5종 표 받기까지 약 1분 10초.</p>

2-2 자주 쓸 파일은 <strong>Project [파일]</strong> 영역에 미리

<div class="visual-aside"> <div class="left"> <div class="card blue" style="padding: 12px 14px; margin-bottom: 8px;"> <span class="tag">[파일] 영역에 미리 올려두기</span> <ul style="margin: 4px 0 0; padding-left: 18px; color: var(--text); font-size: 16px; line-height: 1.55;"> <li><code>step2-card-statement.csv</code> — 5월 카드 95건</li> <li><code>step2-utility-bill.md</code> — 5월 전기·가스 고지서</li> </ul> </div> <div class="prompt"> [파일] 영역의 <strong>step2-card-statement.csv</strong>와<br /> <strong>step2-utility-bill.md</strong>를 같이 보고,<br /> 이번 달 카테고리별 합계 + 이상치 1~3건,<br /> 그리고 다음 달 줄이면 좋을 항목 3개와 줄이는 방법을 정리해줘. </div> <p class="muted">실습 3·4 대화에서도 같은 파일을 자동 참고해요 — 매번 다시 첨부 안 합니다. <strong>드래그앤드랍은 1회용, [파일] 영역은 누적용</strong>으로 기억하시면 편해요.</p> </div> <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-height: 100%;"> <span class="tag" style="background: rgba(6,143,255,0.22); color: var(--blue-2);">📎 Claude Project [파일] 영역 — 실제 화면</span> <img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/step2-files-area-v3.jpg" alt="Claude Project 좌측 사이드바 [파일] 영역에 step3-search-targets·step2-utility-bill·step2-campaign-report·step2-card-statement 네 파일이 카드로 표시되는 UI 스크린샷" style="width: 100%; max-height: 360px; height: auto; object-fit: contain; display: block; border-radius: 10px;" /> <p style="margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted);">좌측 사이드바 → <strong>파일</strong> → <strong>+ 추가</strong> 눌러 두 파일을 드랍하면 이렇게 카드로 누적돼요. 이후 모든 대화가 자동 참조.</p> </div> </div>

🎬 시연 — 실습 2-2 [파일] 영역에 누적

<div class="video-stage"> <video src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/videos/C-step2-files-area.mp4" controls preload="metadata"></video> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">Project [파일] 영역에 step2-card-statement.csv + step2-utility-bill.md 추가 → 카드 + 공과금을 동시 분석 받기까지 약 2분.</p>

실습 3<br />AI한테 도구 시키기

내 체크리스트 첨부 → AI가 웹 서치까지

<div class="visual-aside" style="align-items: stretch;"> <div class="left" style="gap: 8px; justify-content: center;"> <div class="card blue" style="padding: 8px 12px; min-height: 0;"> <span class="tag">[파일] 영역에 추가</span> <p style="margin: 3px 0 0; font-size: 13.5px;"><code>step3-search-targets.md</code> — 청약·세금·연차·검진·세미나</p> </div> <div class="prompt" style="font-size: 14.5px; line-height: 1.5; padding: 12px 14px;"> [파일] 영역의 <strong>step3-search-targets.md</strong>에서<br /> "이번 주 청년 무주택자 청약 신규 공고" 항목을 골라,<br /> <strong>웹 검색</strong>으로 최신 정보 가져와 줘.<br /><br /> - 출처 URL 1개 이상 · 마감일은 D-day 표시<br /> - 확실하지 않은 부분은 "확인 필요"<br /> - 캘린더용 [제목·날짜·장소·준비물] 한 줄 </div> <div class="card" style="padding: 8px 12px; min-height: 0;"> <span class="tag">📋 골라 쓰는 5개 시나리오</span> <div class="row-2" style="gap: 2px 12px; margin-top: 4px; color: var(--text); font-size: 12px; line-height: 1.4;"> <div>• 청년 청약 공고</div> <div>• 종소세 신고·환급</div> <div>• 잔여 연차·휴가</div> <div>• 국가건강검진</div> <div style="grid-column: span 2;">• 이번 달 직무 무료/저가 세미나</div> </div> </div> <p class="muted" style="font-size: 12px; margin: 0;">같은 패턴으로 항목만 바꿔서 한 번 더 — AI가 알아서 <strong>웹 서치 도구</strong>를 켭니다.</p> </div> <div class="hero-image"> <img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/step3-search-scene-v3.jpg" alt="김민지씨가 AI 마스코트에게 '이번 주 청년 청약 공고 좀 찾아봐 줄래?'라고 묻고, 마스코트가 돋보기와 지구본을 들고 D-7·출처 gov.kr·확인 필요 태그를 띄우는 장면" /> </div> </div>

🎬 시연 — Claude의 자동 웹 검색

<div class="video-stage"> <video src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/videos/D-step3-websearch.mp4" controls preload="metadata"></video> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">step3-search-targets.md 첨부 → Claude가 알아서 웹 서치 도구를 켜고 → 출처 URL·D-day·"확인 필요"까지 함께 정리하는 약 1분 50초.</p>

실습 4<br />결과물 만들기

결과물은 <strong>같은 Project에서 — Artifact</strong>로

<div class="visual-aside" style="align-items: stretch;"> <div class="left"> <span class="tag" style="background: rgba(105,219,124,0.18); color: var(--green); align-self: flex-start;">📌 핵심 — 모드 전환·재첨부 없음</span> <div class="prompt"> "<code>02-campaign-analysis.md</code> 숫자로<br /> 캠페인 인포그래픽 한 장 <strong>Artifact</strong>로 보여줘"<br /><br /> <span style="color: var(--muted); font-size: 13px;">— 단계 0의 그 Project, 그 대화에 이 한 줄만. 어떤 파일·어느 명세인지 [파일]이 자동으로 받쳐줍니다.</span> </div> <p class="muted" style="font-size: 13px; margin: 0;">이건 <strong>맛보기 한 장</strong>이에요. <strong>결과물 4종을 순서대로 뽑는 실제 프롬프트는 다음 슬라이드</strong>에서 그대로 복붙합니다.</p> <p class="muted" style="font-size: 13px; margin: 0;"><strong>무료 플랜으로 전부 가능.</strong> 만든 결과물은 Artifact에서 <strong>다운로드·복사</strong>해 보관 (무료 포함 전 플랜 동일).</p> </div> <div class="right"> <div class="card blue" style="padding: 14px 16px; min-height: 0;"> <span class="tag">왜 Artifact?</span> <h3 style="margin: 4px 0 4px;">대화 옆 결과물 패널</h3> <p style="margin: 0; font-size: 14.5px; line-height: 1.5;">인포그래픽·PDF·SNS 카드·슬라이드를 <strong>우측 패널에서 바로</strong> 미리보기·수정·다운로드. 설치·결제·로컬 폴더 0.</p> </div> <div class="card blue" style="padding: 14px 16px; min-height: 0;"> <span class="tag">자료는 어떻게 읽나</span> <h3 style="margin: 4px 0 4px;">Project [파일] 영역 자동 참조</h3> <p style="margin: 0; font-size: 14px; line-height: 1.5;">실습 2~3에서 [파일] 영역에 쌓아둔 산출물을 <strong>같은 Project 대화가 자동 참조</strong>. 본문엔 "어느 파일·어느 명세"만 짚으면 됩니다.</p> </div> </div> </div>

[파일] 자료로 결과물 4종 한 번에

<div class="visual-aside"> <div class="left"> <div class="prompt" style="font-size: 13px; line-height: 1.55;"> <code>02-campaign-analysis.md</code> 숫자로,<br /> <code>04-deliverable-brief.md</code> 명세의 <strong>결과물 4종</strong>을<br /> <strong>하나씩 순서대로</strong> 각각 <strong>Artifact</strong>로 만들어줘:<br /><br /> ① 캠페인 인포그래픽 1장 (명세 1)<br /> ② 주간 보고서 PDF용 1페이지 (명세 2)<br /> ③ SNS 카드 3장 시리즈 (명세 3)<br /> ④ 회의록 요약 PT 5장 (명세 4)<br /><br /> 숫자는 02 파일 그대로, 없는 값은 지어내지 말고 "확인 필요". ①부터, 끝나면 "다음". </div> <p class="muted" style="font-size: 12.5px; margin: 0;"><strong>한 번에 다 안 와도 정상.</strong> 하나씩 Artifact로 만들고 "다음"으로 이어가요. <strong style="color: var(--yellow);">코드가 끊기면</strong> "마지막 줄부터 이어서 출력해줘" 한 줄.</p> <p class="muted" style="font-size: 12.5px; margin: 0;">변주는 자유 — "①을 동료 슬랙용으로, 친근한 톤·이모지 3개로 한 장 더." 위 프롬프트 전문·결과물별 단독 프롬프트는 <code>04-deliverable-brief.md</code> 맨 위 "복붙용 프롬프트"에 정리돼 있어요.</p> </div> <div class="hero-image"> <img src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/assets/step4-infographic-scene-v4.jpg" alt="김민지씨가 AI 마스코트에게 '이 캠페인 결과로 인포그래픽 한 장 뽑아줄 수 있어?'라고 묻고, 마스코트가 팔레트를 들고 Hello May 회고 인포그래픽(230만·1,400·4.3x) + PDF/SNS/영상 메뉴를 띄우는 장면" /> </div> </div>

🎬 시연 — 결과물 4종 만들기 (Chat Artifact)

<div class="video-stage"> <div class="video-placeholder"> <span class="vp-badge">🎬 신규 시연 영상 준비 중</span> <h3>Chat Artifact 기준 재촬영 예정</h3> <p>같은 Project 대화에서 [파일] 자료 → 4종 프롬프트 입력 → ① 인포그래픽을 라이브로 끝까지(임원용·동료용 두 톤), ②③④는 "다음"으로 이어 받는 흐름까지. <span class="vp-script">강사 라이브 시연으로 대체 가능</span> (Reus 추후 영상 교체).</p> </div> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">앞 슬라이드 4종 프롬프트를 그대로 입력 → ① 인포그래픽을 라이브로(실수 한 번도 보여주고, 임원용·동료용 두 톤) → ②③④는 "다음"으로 같은 대화에서 이어 받기. 강사 라이브 시연 권장.</p>

같은 데이터에서 네 가지 결과물까지 — 전부 <strong>Chat Artifact</strong>로

<div class="media-grid cols-4"> <div class="media-placeholder"> <span class="badge">Artifact</span> <span class="ico text-icon" aria-hidden="true">▧</span> <h4>1. 캠페인 인포그래픽</h4> <p>Artifact 패널에 정사각형 카드 한 장. 임원용·동료용 두 톤.</p> </div> <div class="media-placeholder"> <span class="badge">PDF</span> <span class="ico text-icon" aria-hidden="true">▤</span> <h4>2. 주간 보고서 PDF</h4> <p>Artifact로 받은 한 페이지 초안 → 브라우저 인쇄로 PDF. 매주 금요일용 한 페이지.</p> </div> <div class="media-placeholder"> <span class="badge">Artifact × 3</span> <span class="ico text-icon" aria-hidden="true">▣</span> <h4>3. SNS 콘텐츠 카드 3장</h4> <p>Artifact 패널에 카드를 런칭·중간·마감 톤 통일 시리즈로 세 장 연속.</p> </div> <div class="media-placeholder"> <span class="badge">슬라이드</span> <span class="ico text-icon" aria-hidden="true">▭</span> <h4>4. 회의록 요약 PT</h4> <p>Claude가 회의록을 정리해 다섯 장 슬라이드로 만들어 팀 공유.</p> </div> </div> <p class="muted">네 가지 모두 <strong>같은 Project의 Artifact 패널에서</strong> 만들 수 있어요 — <strong>무료 플랜으로 전부 가능</strong>, 만든 결과물은 다운로드·복사로 보관. 자세한 프롬프트는 <code>04-deliverable-brief.md</code>에 정리돼 있어요.</p>

실습 5<br />나만의 대시보드 만들기 ⭐

오늘 만든 것들을 한 화면에 모아 보기

1~4 산출물 통합 — <strong>4 위젯 본편</strong> + 6 위젯 보너스

<div class="visual-aside" style="align-items: stretch;"> <div class="left"> <div class="prompt" style="font-size: 13px; line-height: 1.5;"> [파일] 영역의 <code>step5-dashboard-starter-localStorage.html</code>을 시작점으로,<br /> <code>05-dashboard-spec.md</code> 명세대로 "내 5월 점검판"을 <strong>Artifact</strong>로.<br /><br /> <strong>본편 필수 — 4 위젯이면 성공</strong>:<br /> • 위젯 1 캠페인 진행 · 위젯 3 KPI 트래커(원형 게이지)<br /> • 위젯 5 오늘의 루틴(체크박스) · 위젯 6 통합 캘린더<br /> <strong>동작</strong>: 할 일 체크 → 줄긋기 / 지출 입력 → 그래프 갱신<br /> (여유 되면 위젯 2 SNS·위젯 4 도넛까지 <strong>6 위젯 = 보너스</strong>) </div> <p class="muted" style="font-size: 12.5px; margin: 0;"><strong style="color: var(--yellow);">코드가 끊기면</strong> 당황 말고 한 줄 — "코드가 중간에 끊겼어. 마지막으로 출력한 줄부터 이어서 나머지만 출력해줘."</p> <p class="muted" style="font-size: 12.5px; margin: 0;"><strong>매일 누적되는 진짜 사령탑</strong>은 다음 슬라이드 5-2 — <strong>코드 다운로드 → 바탕화면 <code>점검판.html</code> → 더블클릭</strong>으로 완성 (무료). 자동 갱신은 부록(Pro).</p> </div> <div class="right"> <div class="card blue" style="padding: 12px 14px; min-height: 0;"> <span class="tag">📣 캠페인 + SNS · 위젯 1·2</span> <p style="margin: 4px 0 0; font-size: 12px; line-height: 1.5;">Hello May <b>END</b> D+1 · 리텐션 <b>RUN</b> D+5 · 인플루언서 <b>PLAN</b> D-14 · SNS 5건(월 발행/화 검수/수·목 초안)</p> </div> <div class="card green" style="padding: 12px 14px; min-height: 0;"> <span class="tag">📊 KPI 트래커 · 위젯 3</span> <p style="margin: 4px 0 0; font-size: 12px; line-height: 1.5;">CTR 2.1/2.5% <span style="color: #FFD166;">84%</span> · 전환 3.4/3.0% <span style="color: #69DB7C;">113%</span> · CPC ₩1,350/≤1,200 <span style="color: #FFD166;">88%</span> · ROAS 4.3/3.75x <span style="color: #69DB7C;">115%</span></p> </div> <div class="card" style="padding: 12px 14px; min-height: 0;"> <span class="tag">💸 생활 + 캘린더 · 위젯 4·5·6</span> <p style="margin: 4px 0 0; font-size: 12px; line-height: 1.5;">🏠 월세 80(1)·⚡ 6.4(10)·🏥 건보 18(10)·💰 적금 30(25) / ☐ 회의록 ☐ 답장 ☐ 주간보고 ☐ 릴스 ☐ 운동 / 🗓 결제·캠페인·세금 D-day</p> </div> </div> </div>

🎬 시연 — 대시보드 첫 생성 (Chat Artifact)

<div class="video-stage"> <div class="video-placeholder"> <span class="vp-badge">🎬 신규 시연 영상 준비 중</span> <h3>Chat Artifact 기준 재촬영 예정</h3> <p>[파일] 영역 starter + <code>05-dashboard-spec.md</code> → 4 위젯 점검판을 Artifact 패널에 생성. <span class="vp-script">강사 라이브 시연으로 대체 가능</span> (Reus 추후 영상 교체).</p> </div> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">시작 파일을 출발점으로 <code>05-dashboard-spec.md</code> 설명서대로 4 위젯(보너스 6 위젯) 대시보드를 Artifact 패널에 띄우는 흐름. 강사 라이브 시연 권장.</p>

5-2 다운로드 → <strong>바탕화면</strong> → 매일 누적 (영속성)

<div class="visual-aside" style="align-items: stretch;"> <div class="left" style="justify-content: center;"> <div class="prompt" style="font-size: 14px; line-height: 1.55;"> <strong>① Artifact 우측 하단 <code></> 코드</code> → 다운로드</strong><br />   (또는 코드 복사 — 무료 플랜도 동일)<br /><br /> <strong>② 파일명 <code>점검판.html</code>, 저장 위치 = 바탕화면</strong><br />   (매일 같은 자리에서 찾기 위한 의례)<br /><br /> <strong>③ 그 파일을 더블클릭</strong><br />   브라우저가 열리고 — 끝. 인터넷·설치·계정 X<br /><br /> <strong>④ 할 일 체크·지출 입력 → 새로고침해도 그대로</strong><br />   (시작 파일에 '자동 저장'이 이미 들어 있음) </div> <p class="muted" style="font-size: 13px; margin: 0;">더 손보고 싶으면? <strong>오늘 쓴 같은 Chat Project를 다시 열어</strong> "지난번 점검판에 위젯 하나 더" 라고 이어 말하면, 그 자료·맥락이 Project에 남아 이어서 개선됩니다.</p> </div> <div style="display: flex; flex-direction: column; gap: 10px; justify-content: center;"> <div class="card blue" style="padding: 12px 14px; min-height: 0;"> <span class="tag">💡 왜 다운로드?</span> <h3 style="margin: 4px 0 4px; font-size: 16px;">AI 미리보기 화면은 내 컴퓨터가 아니에요</h3> <p style="margin: 0; font-size: 13.5px; line-height: 1.5;">AI 화면 안에서 바로 쓰면 입력한 내용이 <strong>저장되지 않고 사라져요</strong>. 하지만 <strong>코드를 다운로드해 내 컴퓨터에서 열면</strong> 입력·체크가 그대로 남습니다 — 이 한 끗으로 무료로도 매일 누적.</p> </div> <div class="card green" style="padding: 12px 14px; min-height: 0;"> <span class="tag">🛟 막혔을 때 안전망</span> <h3 style="margin: 4px 0 4px; font-size: 16px;">완성본 starter 다운로드</h3> <p style="margin: 0; font-size: 13.5px; line-height: 1.5;">코드가 자꾸 잘리거나 시간 부족이면 <code>step5-dashboard-starter-localStorage.html</code> 그대로 다운로드 → 바탕화면 → 더블클릭. <strong>이미 매일 누적 동작</strong>.</p> </div> </div> </div>

🎬 시연 — 다운로드 → 로컬 매일 누적 (Chat Artifact)

<div class="video-stage"> <div class="video-placeholder"> <span class="vp-badge">🎬 신규 시연 영상 준비 중</span> <h3>Chat Artifact 기준 재촬영 예정</h3> <p>Artifact <code></> 코드</code> 다운로드 → 바탕화면 <code>점검판.html</code> → 더블클릭 → 체크·입력이 새로고침 후에도 누적되는 흐름. <span class="vp-script">강사 라이브 시연으로 대체 가능</span> (Reus 추후 영상 교체).</p> </div> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">Artifact 코드 다운로드 → 바탕화면 <code>점검판.html</code> 저장 → 더블클릭 → 투두·지출 입력 → 새로고침해도 누적 확인. 강사 라이브 시연 권장.</p>

이제 <strong>여러분 케이스</strong>로 바꿔서 다시 — `your-template/`

<div class="visual-aside" style="align-items: stretch;"> <div class="left" style="justify-content: center;"> <h2 style="font-size: 22px; color: var(--blue-2); margin: 0; line-height: 1.25;">김민지씨 흐름을<br />여러분 상황으로 다시</h2> <p style="font-size: 14.5px; line-height: 1.55; color: var(--text); margin: 0;">데모 팩의 <code>your-template/</code> 자료를 <strong>새 Chat Project</strong>에 올리고 <strong>두 곳만 바꾸면</strong> 5분 안에 본인 페르소나로 단계 1~5 다시 돌릴 수 있어요. (폴더 연결 X — 무료 그대로)</p> <div class="card blue" style="padding: 10px 12px;"> <span class="tag">바꾸는 곳 2개</span> <ul style="margin: 4px 0 0; padding-left: 16px; color: var(--text); font-size: 13px; line-height: 1.5;"> <li><code>00-project-지침.md</code> — 지침 박스에 붙여넣고 페르소나 첫 두 줄</li> <li><code>02-work-data-template.md</code> — 본인 데이터 1건 → [파일] 영역</li> </ul> </div> <p class="muted" style="font-size: 12px; margin: 0;">새 Project → 00 지침 붙여넣기 → 01~05 [파일] 영역 → 실습 1~5. 자세한 흐름은 <code>your-template/README.md</code>. 직장인 외 관심사·취미·학업도 자유 변주.</p> </div> <div class="right"> <span class="tag" style="align-self: flex-start; background: rgba(255,209,102,0.22); color: var(--yellow);">📋 변주 예시 — 직장인부터 학생·주부·동호회까지</span> <div class="row-2"> <div class="card" style="padding: 9px 12px; min-height: 0;"> <h3 style="margin: 0; font-size: 14px; color: var(--blue-2);">전업주부 · 재테크 입문</h3> <p style="margin: 3px 0 0; font-size: 12px; line-height: 1.4;">1981년생, 슬하 1자녀, 가계부·청약·ETF 정리 + 자녀 학습 진도 관리</p> </div> <div class="card" style="padding: 9px 12px; min-height: 0;"> <h3 style="margin: 0; font-size: 14px; color: var(--blue-2);">사회 초년생 · 권투 동호회 운영</h3> <p style="margin: 3px 0 0; font-size: 12px; line-height: 1.4;">2000년생 1년차, 사회인 권투 토너먼트 기획 — 대진표·홍보 카드·모집 폼 자동화</p> </div> <div class="card" style="padding: 9px 12px; min-height: 0;"> <h3 style="margin: 0; font-size: 14px; color: var(--blue-2);">대학생 · 과외+성적 관리</h3> <p style="margin: 3px 0 0; font-size: 12px; line-height: 1.4;">2003년생, 용돈·과외비 가계부 + 학점 추적 + 주차별 과외 커리큘럼 초안</p> </div> <div class="card" style="padding: 9px 12px; min-height: 0;"> <h3 style="margin: 0; font-size: 14px; color: var(--blue-2);">프리랜서 · 1인 사업자</h3> <p style="margin: 3px 0 0; font-size: 12px; line-height: 1.4;">1990년생 디자이너, 클라이언트별 작업 진행·세금계산서·월 매출 점검판</p> </div> <div class="card" style="padding: 9px 12px; min-height: 0;"> <h3 style="margin: 0; font-size: 14px; color: var(--blue-2);">직장인 · 자기계발</h3> <p style="margin: 3px 0 0; font-size: 12px; line-height: 1.4;">1995년생 마케터(=김민지씨 기본) / 영업·개발·기획·HR 변주 모두 가능</p> </div> <div class="card" style="padding: 9px 12px; min-height: 0;"> <h3 style="margin: 0; font-size: 14px; color: var(--blue-2);">은퇴 준비 · 시니어</h3> <p style="margin: 3px 0 0; font-size: 12px; line-height: 1.4;">1965년생, 연금 일정·건강검진·취미 활동(등산·바둑) 캘린더 통합</p> </div> </div> </div> </div>

부록 — 더 해보고 싶은 분께

본편은 무료로 끝났습니다. 여기부터는 Pro($20+) 선택

Cowork + Live Artifacts · 매일 <strong>자동</strong> 갱신

<div class="visual-aside" style="align-items: stretch;"> <div class="left" style="justify-content: center;"> <div class="card blue" style="padding: 12px 14px; min-height: 0;"> <span class="tag">본편(무료) → 부록(Pro) 차이</span> <p style="margin: 4px 0 0; font-size: 13.5px; line-height: 1.55;">본편은 Artifact 코드를 <strong>다운로드해 바탕화면에서</strong> 매일 누적했죠. Pro의 <strong>Cowork + Live Artifacts</strong>면 다운로드 없이 화면 자체가 새로고침 뒤에도 유지됩니다.</p> </div> <div class="card" style="padding: 12px 14px; min-height: 0;"> <span class="tag">⏰ Scheduled = 정해진 시각 자동 실행</span> <p style="margin: 4px 0 0; font-size: 13px; line-height: 1.5;">같은 대화창에 <code>/schedule</code> 한 줄 → 본인 Claude 계정에 작은 크론 등록. <code>appendix-pro/scheduled-jobs.md</code>의 6작업을 한 번에. 컴퓨터가 켜져 있을 때 실행.</p> </div> <p class="muted" style="font-size: 12px; margin: 0;">Cowork·Live Artifacts·Scheduled는 모두 Claude Pro($20/월)+ 전용. 본편 완주에는 불필요한 <strong>심화 옵션</strong>입니다.</p> </div> <div class="right"> <span class="tag" style="background: rgba(105,219,124,0.22); color: var(--green); align-self: flex-start;">⏰ 김민지씨가 매일 자동으로 받는 것 (Pro)</span> <div class="card" style="padding: 12px 14px; min-height: 0;"><p style="margin: 0; font-size: 13px; line-height: 1.5;"><b>Daily 08:30</b> 마케팅·AI 헤드라인 스크랩 · <b>Daily 09:00</b> KPI 변동 반영 + 청약·세금 D-day</p></div> <div class="card" style="padding: 12px 14px; min-height: 0;"><p style="margin: 0; font-size: 13px; line-height: 1.5;"><b>Weekly Fri 18:00</b> 주간 KPI 1p PDF + 다음 주 초안 · <b>Monthly 말일</b> 스냅샷 + 헤더 갱신</p></div> <div class="card" style="padding: 12px 14px; min-height: 0;"><p style="margin: 0; font-size: 13px; line-height: 1.5;"><b>Quarterly 1일</b> 지난 분기 회고 + 다음 분기 체크리스트 자동 생성</p></div> </div> </div>

🎬 (부록) Scheduled 등록 시연 — Pro 참고용

<div class="video-stage"> <video src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/videos/J-step5-scheduled.mp4" controls preload="metadata"></video> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">🎬 (구 v4 영상) <code>scheduled-jobs.md</code> 6작업을 <code>/schedule</code>로 한 번에 등록 → 좌측 Scheduled 6개 확인 → 수동 실행. <strong>본편 아님 — Pro($20+) 참고용</strong>.</p>

다른 도구로도 — Canvas 변주 · 전체 완주본

<div class="grid-3"> <div class="card blue" style="padding: 14px 16px;"> <span class="tag">ChatGPT</span> <h3 style="margin: 6px 0 6px; font-size: 18px;">Canvas</h3> <p style="margin: 0; font-size: 13.5px; line-height: 1.5;">같은 점검판 프롬프트를 ChatGPT <strong>Canvas</strong>에 — HTML 미리보기·인라인 편집. 다운로드 후 로컬 누적 방식 동일.</p> </div> <div class="card" style="padding: 14px 16px;"> <span class="tag">Gemini</span> <h3 style="margin: 6px 0 6px; font-size: 18px;">Canvas</h3> <p style="margin: 0; font-size: 13.5px; line-height: 1.5;">Gemini <strong>Canvas</strong>도 동일하게 한 페이지 대시보드 생성·미리보기. 도구는 달라도 "다운로드 → 로컬" 원리는 같습니다.</p> </div> <div class="card green" style="padding: 14px 16px;"> <span class="tag">전체 완주본 (다음 슬라이드)</span> <h3 style="margin: 6px 0 6px; font-size: 18px;">25분 → 3배속 8분</h3> <p style="margin: 0; font-size: 13.5px; line-height: 1.5;">구 v4 흐름(Cowork·폴더 정리 포함) 전체 완주본. 흐름 감 잡기용 참고 — 본편 절차는 이 슬라이드 기준.</p> </div> </div> <p class="muted" style="text-align: center; margin-top: 14px;">도구는 Claude·ChatGPT·Gemini 무엇이든 — <strong>"AI에게 자료 주고 → 결과물·대시보드 → 다운로드해 내 PC에서 누적"</strong> 원리는 같습니다. 본편은 Claude 무료 플랜 기준.</p>

🎬 (부록) 전체 완주본 — 25분을 3배속 8분으로

<div class="video-stage"> <video src="https://raw.githubusercontent.com/semicolon-devteam/semiclass/main/demo-kit/ai-basic-automation/videos/FULL-3x-walkthrough.mp4" controls preload="metadata"></video> </div> <p class="muted" style="text-align: center; margin-top: 8px; font-size: 13px;">🎬 (구 v4) 첫 대화 → 파일 → 웹서치 → Cowork·폴더 정리 → 결과물 → 대시보드 → 영속성 → Scheduled 8분 완주본. <strong>본편은 Cowork 없이 무료 Artifact로</strong> 진행 — 위 영상은 Pro 흐름 참고용.</p>

후속 클래스로

오늘이 마음에 드셨다면, 다음은 이렇게

<div class="grid-4"> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvdCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik0xMiA4VjRIOCIgLz4KICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHg9IjQiIHk9IjgiIHJ4PSIyIiAvPgogIDxwYXRoIGQ9Ik0yIDE0aDIiIC8+CiAgPHBhdGggZD0iTTIwIDE0aDIiIC8+CiAgPHBhdGggZD0iTTE1IDEzdjIiIC8+CiAgPHBhdGggZD0iTTkgMTN2MiIgLz4KPC9zdmc+Cg==" alt="" aria-hidden="true" /><span class="tag">초급</span><h3>AI 툴 활용</h3><p>더 다양한 AI 도구와 기능을 골라 써 보고 싶다면.</p></div> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXphcCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik00IDE0YTEgMSAwIDAgMS0uNzgtMS42M2w5LjktMTAuMmEuNS41IDAgMCAxIC44Ni40NmwtMS45MiA2LjAyQTEgMSAwIDAgMCAxMyAxMGg3YTEgMSAwIDAgMSAuNzggMS42M2wtOS45IDEwLjJhLjUuNSAwIDAgMS0uODYtLjQ2bDEuOTItNi4wMkExIDEgMCAwIDAgMTEgMTR6IiAvPgo8L3N2Zz4K" alt="" aria-hidden="true" /><span class="tag">기초</span><h3>에이전틱 AI</h3><p>오늘 본 "매일 자동 발송"을 본격적으로 만들어 보고 싶다면.</p></div> <div class="card green"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXdhbmQtc3BhcmtsZXMiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iI0ZGRkZGRiIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtMjEuNjQgMy42NC0xLjI4LTEuMjhhMS4yMSAxLjIxIDAgMCAwLTEuNzIgMEwyLjM2IDE4LjY0YTEuMjEgMS4yMSAwIDAgMCAwIDEuNzJsMS4yOCAxLjI4YTEuMiAxLjIgMCAwIDAgMS43MiAwTDIxLjY0IDUuMzZhMS4yIDEuMiAwIDAgMCAwLTEuNzIiIC8+CiAgPHBhdGggZD0ibTE0IDcgMyAzIiAvPgogIDxwYXRoIGQ9Ik01IDZ2NCIgLz4KICA8cGF0aCBkPSJNMTkgMTR2NCIgLz4KICA8cGF0aCBkPSJNMTAgMnYyIiAvPgogIDxwYXRoIGQ9Ik03IDhIMyIgLz4KICA8cGF0aCBkPSJNMjEgMTZoLTQiIC8+CiAgPHBhdGggZD0iTTExIDNIOSIgLz4KPC9zdmc+Cg==" alt="" aria-hidden="true" /><span class="tag">⭐ 기초</span><h3>바이브코딩</h3><p>오늘 만든 대시보드를 진짜 웹·앱으로 키워 보고 싶다면.</p></div> <div class="card"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNlcnZlciIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSI4IiB4PSIyIiB5PSIyIiByeD0iMiIgcnk9IjIiIC8+CiAgPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjgiIHg9IjIiIHk9IjE0IiByeD0iMiIgcnk9IjIiIC8+CiAgPGxpbmUgeDE9IjYiIHgyPSI2LjAxIiB5MT0iNiIgeTI9IjYiIC8+CiAgPGxpbmUgeDE9IjYiIHgyPSI2LjAxIiB5MT0iMTgiIHkyPSIxOCIgLz4KPC9zdmc+Cg==" alt="" aria-hidden="true" /><span class="tag">AX</span><h3>AX 클래스</h3><p>Sheet·Notion·Zapier로 회사 워크플로를 실제로 잇고 싶다면.</p></div> </div>

끝나고 가져가실 자료 — 강의 페이지 자료실

<div class="grid-2"> <div class="card blue"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZpbGUtdGV4dCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgd2lkdGg9IjI0IgogIGhlaWdodD0iMjQiCiAgdmlld0JveD0iMCAwIDI0IDI0IgogIGZpbGw9Im5vbmUiCiAgc3Ryb2tlPSIjRkZGRkZGIgogIHN0cm9rZS13aWR0aD0iMiIKICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKPgogIDxwYXRoIGQ9Ik02IDIyYTIgMiAwIDAgMS0yLTJWNGEyIDIgMCAwIDEgMi0yaDhhMi40IDIuNCAwIDAgMSAxLjcwNC43MDZsMy41ODggMy41ODhBMi40IDIuNCAwIDAgMSAyMCA4djEyYTIgMiAwIDAgMS0yIDJ6IiAvPgogIDxwYXRoIGQ9Ik0xNCAydjVhMSAxIDAgMCAwIDEgMWg1IiAvPgogIDxwYXRoIGQ9Ik0xMCA5SDgiIC8+CiAgPHBhdGggZD0iTTE2IDEzSDgiIC8+CiAgPHBhdGggZD0iTTE2IDE3SDgiIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /><h3>오늘 본 5단계 사용법</h3><p>AI에게 통째로 첨부할 수 있는 <code>README.md</code>와 인쇄용 <code>USAGE.pdf</code>. 오늘 다룬 페르소나·프롬프트·완료 기준이 모두 정리돼 있어요.</p></div> <div class="card green"><img class="card-icon" src="data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjguMCAtIElTQyAtLT4KPHN2ZwogIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBhY2thZ2UiCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iI0ZGRkZGRiIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTEgMjEuNzNhMiAyIDAgMCAwIDIgMGw3LTRBMiAyIDAgMCAwIDIxIDE2VjhhMiAyIDAgMCAwLTEtMS43M2wtNy00YTIgMiAwIDAgMC0yIDBsLTcgNEEyIDIgMCAwIDAgMyA4djhhMiAyIDAgMCAwIDEgMS43M3oiIC8+CiAgPHBhdGggZD0iTTEyIDIyVjEyIiAvPgogIDxwb2x5bGluZSBwb2ludHM9IjMuMjkgNyAxMiAxMiAyMC43MSA3IiAvPgogIDxwYXRoIGQ9Im03LjUgNC4yNyA5IDUuMTUiIC8+Cjwvc3ZnPgo=" alt="" aria-hidden="true" /><h3>실습 첨부 자료 7종</h3><p>2단계 캠페인 결과 + 카드 사용 내역(95건) + 고지서 / 3단계 검색 시나리오 / 4단계 결과물 가이드 / 5단계 대시보드 시작 코드 두 종(기본·매일 누적용).</p></div> </div> <div class="grid-2" style="margin-top: 14px;"> <a href="https://semi-colon.space/lectures/semiclass-ai-basic-automation" style="text-decoration: none;"><div class="card blue" style="padding: 14px 18px;"> <span class="tag">🌐 강의 페이지</span> <h3 style="margin: 6px 0 4px; font-size: 18px; color: var(--blue-2);">semi-colon.space/lectures/<br />semiclass-ai-basic-automation</h3> <p style="margin: 0; font-size: 13px;">슬라이드 전체 + 데모 팩 ZIP + 단계별 시연 영상 + 단계별 자료. 자료실 "데모 팩" 그룹에서 한 번에 다운로드.</p> </div></a> <a href="https://github.com/semicolon-devteam/semiclass/tree/main/demo-kit/ai-basic-automation" style="text-decoration: none;"><div class="card green" style="padding: 14px 18px;"> <span class="tag">🐙 GitHub 공개 저장소</span> <h3 style="margin: 6px 0 4px; font-size: 18px; color: var(--green);">github.com/semicolon-devteam/<br />semiclass · demo-kit</h3> <p style="margin: 0; font-size: 13px;">원본 폴더 그대로. samples / chat-project-files / your-template / appendix-pro / videos 전체를 한 번에 다운로드 가능.</p> </div></a> </div> <p class="muted">두 곳 어디서든 같은 자료를 받으실 수 있어요. 강의 페이지는 보기 편하게, GitHub는 폴더째 가져가기 편하게.</p>

오늘, 이만큼만 가져가시면 됩니다

<div class="pickup-badges"> <div class="pickup-badge"><span class="num">1</span>맞춤 체크리스트 한 장</div> <div class="pickup-badge"><span class="num">2</span>내 데이터 분석 한 번</div> <div class="pickup-badge"><span class="num">3</span>외부 정보 검색 한 번</div> <div class="pickup-badge"><span class="num">4</span>결과물 한 가지</div> <div class="pickup-badge hero"><span class="num">5</span>한 화면 대시보드 한 장 ⭐</div> <div class="pickup-badge commit"><span class="num">+</span>AI에게 맡길 반복 업무 한 가지 선언</div> </div> <p class="pickup-footer">여섯 개 다 채우셨다면 오늘은 성공이에요.</p>

<div class="brand">SEMICLASS</div>

AI는<br /><strong>만나면 만날수록</strong><br />가까워집니다

AI 쉽고 재밌게 활용하기:<br /><strong>기초편</strong>

흩어진 일을 한 화면에 모으는 첫 2시간

오늘의 기준은<br /><strong>거창한 자동화가 아닙니다</strong>

함께 따라가 볼 가상의 주인공

김민지씨의 평일 — 우리도 이런 적 있죠?

이런 마음으로 오셨다면 잘 오셨어요

자동화에 대한 흔한 오해 세 가지

오늘 진행은 이렇게 됩니다

오늘의 5단계 실습

오늘 함께 걸어갈 5단계

시작 전, Claude 한 가지만 켜 두세요

오늘 전체를 담을 그릇 — <strong>Claude Project</strong>

🎬 시연 — Claude Project 만들기

오늘 받아갈 <strong>데모 팩</strong> — 한눈에

AI한테 맡기기 좋은 일들

그래도 사람이 꼭 해야 하는 일

실습 1<br />말 걸어보기

내 상황을 그냥 말해 보기

한 번 더 — 첫 행동·예상 시간 붙여서

🎬 시연 — 실습 1 첫 대화

실습 2<br />파일 같이 보내기

2-1 드래그앤드랍으로 첨부하고 분석 요청

AI가 정리해 준 분석 표

🎬 시연 — 실습 2-1 드래그앤드랍

2-2 자주 쓸 파일은 <strong>Project [파일]</strong> 영역에 미리

🎬 시연 — 실습 2-2 [파일] 영역에 누적

실습 3<br />AI한테 도구 시키기

내 체크리스트 첨부 → AI가 웹 서치까지

🎬 시연 — Claude의 자동 웹 검색

실습 4<br />결과물 만들기

결과물은 <strong>같은 Project에서 — Artifact</strong>로

[파일] 자료로 결과물 4종 한 번에

🎬 시연 — 결과물 4종 만들기 (Chat Artifact)

같은 데이터에서 네 가지 결과물까지 — 전부 <strong>Chat Artifact</strong>로

실습 5<br />나만의 대시보드 만들기 ⭐

오늘 만든 것들을 한 화면에 모아 보기

1~4 산출물 통합 — <strong>4 위젯 본편</strong> + 6 위젯 보너스

🎬 시연 — 대시보드 첫 생성 (Chat Artifact)

5-2 다운로드 → <strong>바탕화면</strong> → 매일 누적 (영속성)

🎬 시연 — 다운로드 → 로컬 매일 누적 (Chat Artifact)

이제 <strong>여러분 케이스</strong>로 바꿔서 다시 — your-template/

부록 — 더 해보고 싶은 분께

본편은 무료로 끝났습니다. 여기부터는 Pro($20+) 선택

Cowork + Live Artifacts · 매일 <strong>자동</strong> 갱신

🎬 (부록) Scheduled 등록 시연 — Pro 참고용

다른 도구로도 — Canvas 변주 · 전체 완주본

🎬 (부록) 전체 완주본 — 25분을 3배속 8분으로

후속 클래스로

오늘이 마음에 드셨다면, 다음은 이렇게

끝나고 가져가실 자료 — 강의 페이지 자료실

오늘, 이만큼만 가져가시면 됩니다

AI는<br /><strong>만나면 만날수록</strong><br />가까워집니다

오늘 만든 대시보드, 내일도 한 번 더 펴 보세요

이제 <strong>여러분 케이스</strong>로 바꿔서 다시 — `your-template/`