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');
/* ───────── Semicolon CI tokens (dark mode) ───────── */ :root { --c-blue: #068FFF; --c-blue-bright: #3BA8FF; --c-blue-dim: #045FB4; --c-dark: #1D242B; --c-dark-2: #252E37; --c-dark-3: #2E3842; --c-border: #3A4651; --c-gray: #8D9194; --c-white: #FFFFFF; --c-text: #E8ECF0; }
/* ───────── Base (dark default) — v3 tightened ───────── */ section { font-family: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', sans-serif; color: var(--c-text); background: var(--c-dark); padding: 36px 60px; font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
h1 { font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 4px 0; color: var(--c-white); } h2 { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--c-gray); margin: 0 0 12px 0; } h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--c-white); margin: 10px 0 4px 0; } p, li { font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--c-text); } small, .caption { font-size: 13px; font-weight: 400; color: var(--c-gray); }
strong { color: var(--c-blue); font-weight: 700; } em { color: var(--c-gray); font-style: normal; font-weight: 500; }
ul, ol { margin: 3px 0; padding-left: 22px; } li { margin: 2px 0; } li strong { color: var(--c-blue); }
p { margin: 4px 0; }
table { font-size: 16px; border-collapse: collapse; width: 100%; margin-top: 8px; color: var(--c-text); } th, td { padding: 10px 14px; border-bottom: 1px solid var(--c-border); text-align: left; line-height: 1.4; } th { background: var(--c-dark-2); color: var(--c-white); font-weight: 700; font-size: 16px; }
code { background: var(--c-dark-2); padding: 2px 8px; border-radius: 4px; font-family: 'SF Mono', Menlo, monospace; font-size: 16px; color: var(--c-blue-bright); border: 1px solid var(--c-border); } pre { background: var(--c-dark-2); border: 1px solid var(--c-border); border-radius: 8px; padding: 20px; } pre code { background: transparent; border: none; padding: 0; font-size: 16px; color: var(--c-text); line-height: 1.6; }
blockquote { border-left: 3px solid var(--c-blue); padding: 6px 14px; margin: 8px 0; color: var(--c-text); font-size: 16px; font-weight: 500; line-height: 1.45; background: rgba(6,143,255,0.08); border-radius: 0 6px 6px 0; }
header, footer { color: rgba(255,255,255,0.35); font-size: 13px; font-weight: 500; } section::after { color: rgba(255,255,255,0.35); font-size: 13px; font-weight: 500; }
/* ───────── Icon sizes (Lucide SVG via <img>) ───────── */ .i-sm { width: 18px; height: 18px; vertical-align: -3px; } .i-md { width: 28px; height: 28px; vertical-align: -6px; } .i-lg { width: 44px; height: 44px; vertical-align: -10px; } .i-xl { width: 72px; height: 72px; } .i-hero { width: 120px; height: 120px; }
/* ───────── Title (Blue bg + White logo) ───────── */ section.title { background: var(--c-blue); color: var(--c-white); justify-content: center; text-align: center; background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 18%, transparent 18.5%), radial-gradient(circle at 12% 85%, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 24%, transparent 24.5%); } section.title h1 { color: var(--c-white); font-size: 56px; } section.title h2 { color: rgba(255,255,255,0.9); font-size: 24px; font-weight: 500; } section.title p { color: rgba(255,255,255,0.9); } section.title .slogan { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; margin-top: 48px; } section.title .brand-logo { width: 180px; height: auto; margin: 0 auto 40px auto; display: block; filter: brightness(0) invert(1); } section.title .title-brand { display: inline-block; margin: 0 0 28px 0; color: rgba(255,255,255,0.82); font-size: 15px; font-weight: 800; letter-spacing: 0.16em; } section.title.sherpa { padding: 0; text-align: left; justify-content: stretch; background: radial-gradient(circle at 72% 10%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 17%, transparent 17.5%), radial-gradient(circle at 8% 88%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 22%, transparent 22.5%), linear-gradient(135deg, #0567C8 0%, var(--c-blue) 58%, #2BA4FF 100%); } section.title.sherpa h1 { max-width: 920px; font-size: 56px; line-height: 1.06; letter-spacing: -0.035em; margin: 0; } section.title.sherpa h2 { max-width: 760px; margin: 24px 0 0 0; color: rgba(255,255,255,0.9); font-size: 28px; line-height: 1.32; font-weight: 600; letter-spacing: -0.015em; } .sherpa-title-grid { display: grid; grid-template-columns: minmax(0, 50%) 50%; gap: 0; align-items: stretch; width: 100%; height: 100%; } .sherpa-title-copy { min-width: 0; align-self: center; padding: 44px 56px; } .sherpa-title-visual { position: relative; width: 100%; height: 100%; overflow: hidden; background: rgba(255,255,255,0.12); border-left: 1px solid rgba(255,255,255,0.22); box-shadow: -18px 0 48px rgba(0,0,0,0.18); } .sherpa-title-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: left center; } section.title footer, section.title::after { color: rgba(255,255,255,0.45); }
/* ───────── Section divider (Darker bg with blue glow) ───────── */ section.section { background: radial-gradient(circle at 50% 50%, rgba(6,143,255,0.12) 0, transparent 55%), var(--c-dark); justify-content: center; } section.section h1 { font-size: 60px; } section.section h2 { color: var(--c-blue); font-size: 22px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px; } section.section p { color: rgba(255,255,255,0.7); font-size: 22px; } section.section .divider-icon { width: 72px; height: 72px; display: block; margin: 0 auto 28px auto; }
/* ───────── Content (default dark) ───────── */ section.content::before { content: ''; position: absolute; top: 30px; right: 44px; width: 96px; height: 22px; background: url('assets/header-logo.svg') no-repeat center / contain; filter: brightness(0) invert(1); opacity: 0.35; }
/* ───────── Demo slides (deep blue radial glow) ───────── */ section.demo { background: radial-gradient(ellipse at 100% 0%, rgba(6,143,255,0.25) 0, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(6,143,255,0.1) 0, transparent 50%), var(--c-dark); } section.demo h1 { color: var(--c-white); } section.demo h2 { color: var(--c-blue-bright); }
/* ───────── CTA ───────── */ section.cta { background: radial-gradient(circle at 50% 40%, rgba(6,143,255,0.18) 0, transparent 60%), var(--c-dark); text-align: center; justify-content: center; } section.cta h1 { font-size: 52px; color: var(--c-white); } section.cta h2 { color: var(--c-blue); } section.cta strong { color: var(--c-blue); }
/* ───────── Quote (Blue bg impact) ───────── */ section.quote { background: var(--c-blue); color: var(--c-white); justify-content: center; text-align: center; background-image: radial-gradient(circle at 90% 90%, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 22%, transparent 22.5%), radial-gradient(circle at 10% 10%, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 18%, transparent 18.5%); } section.quote h1 { color: var(--c-white); font-size: 44px; line-height: 1.4; font-weight: 700; } section.quote h2 { color: rgba(255,255,255,0.85); font-size: 20px; font-weight: 500; margin-top: 28px; } section.quote p { color: rgba(255,255,255,0.85); } section.quote strong { color: var(--c-white); background: rgba(0,0,0,0.15); padding: 2px 10px; border-radius: 4px; } section.quote footer, section.quote::after { color: rgba(255,255,255,0.55); } .fire-analogy { width: 82%; margin: 22px auto 0 auto; display: grid; grid-template-columns: 1fr 84px 1fr; align-items: stretch; gap: 18px; } .fire-card { min-height: 148px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22); text-align: left; display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; } .fire-card h3 { margin: 0 0 6px 0; color: var(--c-white); font-size: 19px; } .fire-card p { margin: 0; color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.45; } .fire-card.good { background: rgba(255,255,255,0.12); } .fire-card.bad { background: rgba(0,0,0,0.13); } .fire-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); } .fire-icon img { width: 36px; height: 36px; } .fire-core { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--c-white); gap: 8px; } .fire-core img { width: 54px; height: 54px; } .fire-core span { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
/* ───────── Utility: grid layouts ───────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 8px; } .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 8px; } .four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; } .card { background: var(--c-dark-2); border: 1px solid var(--c-border); border-radius: 10px; padding: 14px 16px; color: var(--c-text); } .card.accent { background: rgba(6,143,255,0.08); border: 1px solid rgba(6,143,255,0.45); } .card h3 { font-size: 17px; margin-top: 0; margin-bottom: 4px; color: var(--c-white); } .card p, .card li { font-size: 15px; color: var(--c-text); line-height: 1.4; } .card ul { padding-left: 16px; margin: 2px 0; } .card .i-md, .card .i-lg { margin-right: 6px; } .cross-skill-layout { gap: 28px; align-items: stretch; margin-top: 14px; } .cross-skill-layout .card { padding: 13px 18px 14px; min-height: 316px; } .role-infographic { display: block; width: 100%; height: 164px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); margin-bottom: 12px; background: var(--c-dark); box-shadow: 0 12px 28px rgba(0,0,0,0.22); } .cross-skill-layout .card h3 { font-size: 18px; margin-bottom: 10px; } .cross-skill-layout .card ul, .cross-skill-layout .card p { margin-top: 0; } .distance-stage { position: relative; display: block; height: 142px; margin: 8px 0 12px; padding: 12px 20px 10px; box-sizing: border-box; overflow: hidden; cursor: pointer; border-radius: 14px; border: 1px solid rgba(6,143,255,0.34); background: radial-gradient(circle at 88% 48%, rgba(6,143,255,0.22), transparent 34%), linear-gradient(180deg, rgba(37,46,55,0.92), rgba(29,36,43,0.96)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 14px 38px rgba(0,0,0,0.20); } .distance-stage * { box-sizing: border-box; } .distance-stage-title { position: relative; z-index: 7; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 15px; font-weight: 900; letter-spacing: -0.01em; color: var(--c-white); } .distance-stage-title .reality, .distance-stage-title .felt { transition: opacity 360ms ease, transform 360ms ease; } .distance-stage-title .reality { position: absolute; left: 0; opacity: 0; transform: translateY(8px); color: var(--c-blue-bright); } .distance-stage-title .hint { margin-left: auto; color: rgba(232,236,240,0.62); font-size: 11px; font-weight: 800; } .distance-replay { position: relative; z-index: 8; display: inline-flex; align-items: center; margin-left: auto; margin-right: 10px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(59,168,255,0.58); background: rgba(6,143,255,0.16); color: rgba(232,236,240,0.94); font: 900 11px/1 Pretendard, Arial, sans-serif; cursor: pointer; transition: opacity 240ms ease, transform 240ms ease, background 240ms ease; } .distance-replay:hover { transform: translateY(-1px); background: rgba(6,143,255,0.28); } .distance-track { position: absolute; left: 20px; right: 20px; height: 42px; overflow: visible; } .distance-track.early { top: 48px; } .distance-track.you { top: 92px; } .distance-track::before, .distance-track::after { content: ""; position: absolute; left: 0; top: 22px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(59,168,255,0.92), rgba(59,168,255,0.15)); transition: width 780ms cubic-bezier(.2,.8,.2,1), transform 780ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease; } .distance-track::before { width: 100%; } .distance-track::after { width: 10000%; opacity: 0; background: repeating-linear-gradient(90deg, rgba(59,168,255,0.92) 0 16px, rgba(59,168,255,0.08) 16px 110px), linear-gradient(90deg, rgba(59,168,255,0.9), rgba(59,168,255,0.04)); transform-origin: left center; transform: scaleX(0.01); } .distance-track .finish { position: absolute; right: 0; top: 12px; width: 2px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.48); transition: opacity 300ms ease; } .distance-perspective-label { position: absolute; right: 22px; bottom: 8px; z-index: 6; opacity: 0; transform: translateY(6px); transition: opacity 420ms ease, transform 420ms ease; color: rgba(232,236,240,0.72); font-size: 11px; font-weight: 800; } .runner { position: absolute; z-index: 5; top: 0; width: 38px; height: 38px; transform-origin: center bottom; transition: left 760ms cubic-bezier(.16,.9,.2,1), top 760ms cubic-bezier(.16,.9,.2,1), transform 760ms cubic-bezier(.16,.9,.2,1); } .runner.early { left: 50%; animation: earlyRunOne 2.25s cubic-bezier(.16,.9,.18,1) 1 forwards; } .runner.you { left: 3.2%; animation: youTryOne 2.25s cubic-bezier(.22,.65,.28,1) 1 forwards; } .distance-stage.replay .runner.early { animation: none; } .distance-stage.replay .runner.you { animation: none; } .runner .tag { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: rgba(6,143,255,0.18); border: 1px solid rgba(59,168,255,0.62); color: var(--c-white); font-size: 10px; line-height: 1.15; font-weight: 900; transition: transform 760ms ease, opacity 420ms ease, bottom 760ms ease; } .runner.you .tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); } .runner .head { position: absolute; left: 13px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-blue-bright); } .runner .head::before, .runner .head::after { content: ""; position: absolute; top: 4px; width: 2px; height: 2px; border-radius: 50%; background: var(--c-dark); } .runner .head::before { left: 3px; } .runner .head::after { right: 3px; } .runner.you .head::after { top: 6px; } .runner.you .head { transform: rotate(7deg); } .runner .body, .runner .arm-a, .runner .arm-b, .runner .leg-a, .runner .leg-b { position: absolute; left: 18px; top: 17px; width: 4px; height: 17px; border-radius: 999px; background: var(--c-blue-bright); transform-origin: 50% 0; } .runner .body { transform: rotate(-8deg); } .runner .arm-a { height: 14px; transform: rotate(52deg); animation: armA .42s ease-in-out 5 alternate; } .runner .arm-b { height: 14px; transform: rotate(-48deg); animation: armB .42s ease-in-out 5 alternate; } .runner .leg-a { top: 29px; height: 14px; transform: rotate(46deg); animation: legA .42s ease-in-out 5 alternate; } .runner .leg-b { top: 29px; height: 14px; transform: rotate(-44deg); animation: legB .42s ease-in-out 5 alternate; } .runner.you .body, .runner.you .arm-a, .runner.you .arm-b, .runner.you .leg-a, .runner.you .leg-b { background: rgba(232,236,240,0.92); } .runner.you .arm-a, .runner.you .arm-b, .runner.you .leg-a, .runner.you .leg-b { animation-duration: .78s; animation-iteration-count: 3; } @keyframes earlyRunOne { 0% { left: 50%; transform: translateY(0) rotate(-2deg); } 18% { left: 54%; transform: translateY(-3px) rotate(-3deg); } 72% { left: 89%; transform: translateY(-1px) rotate(1deg); } 100% { left: 92%; transform: translateY(0) rotate(0deg); } } @keyframes youTryOne { 0% { left: 3.2%; transform: translateY(0) rotate(-4deg); } 28% { left: 4.4%; transform: translateY(2px) rotate(3deg); } 72% { left: 5.7%; transform: translateY(-1px) rotate(-2deg); } 100% { left: 6.2%; transform: translateY(0) rotate(0deg); } } @keyframes armA { from { transform: rotate(54deg); } to { transform: rotate(-44deg); } } @keyframes armB { from { transform: rotate(-46deg); } to { transform: rotate(58deg); } } @keyframes legA { from { transform: rotate(46deg); } to { transform: rotate(-34deg); } } @keyframes legB { from { transform: rotate(-42deg); } to { transform: rotate(50deg); } } .distance-stage:hover .distance-stage-title .felt { opacity: 0; transform: translateY(-8px); } .distance-stage:hover .distance-stage-title .reality { opacity: 1; transform: translateY(0); } .distance-stage:hover .distance-stage-title .hint { opacity: 0.48; } .distance-stage:hover .distance-track::before { opacity: 0; } .distance-stage:hover .distance-track::after { opacity: 1; transform: scaleX(1); } .distance-stage:hover .distance-track .finish { opacity: 0; } .distance-stage:hover .distance-perspective-label { opacity: 1; transform: translateY(0); } .distance-stage:hover .runner { left: 3.6% !important; top: 0 !important; transform: scale(0.50); animation: none !important; } .distance-stage:hover .runner .arm-a, .distance-stage:hover .runner .arm-b, .distance-stage:hover .runner .leg-a, .distance-stage:hover .runner .leg-b { animation: tinyIdle 1.4s ease-in-out infinite; } .distance-stage:hover .runner .tag { bottom: 32px; transform: translateX(-50%) scale(1.35); opacity: 0.96; } @keyframes tinyIdle { 0%, 100% { translate: 0 0; } 50% { translate: 1px 0; } } .beginner-cards { margin-top: 8px; gap: 14px; } .beginner-cards .card { padding: 13px 15px; min-height: 168px; } .beginner-cards .card h3 { font-size: 17px; margin-bottom: 7px; } .beginner-cards .card p, .beginner-cards .card li, .beginner-cards .card { font-size: 14.5px; line-height: 1.33; } .beginner-footer { font-size: 20px !important; line-height: 1.28 !important; margin-top: 10px !important; } .case-card { padding: 12px 14px; } .case-card h3 { font-size: 15px; margin-bottom: 7px; color: var(--c-blue-bright); } .case-card p { margin: 0; font-size: 13px; line-height: 1.45; } .case-card strong { color: var(--c-white); display: block; font-size: 15px; line-height: 1.35; margin-bottom: 2px; } .case-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: rgba(0,0,0,0.32); border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); margin-bottom: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.24); } .vs-shot { width: 100%; height: 140px; overflow: hidden; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.32); box-shadow: 0 8px 20px rgba(0,0,0,0.24); margin: 8px 0 10px; display: flex; align-items: center; justify-content: center; } .vs-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; cursor: zoom-in; } .vs-shot--empty { border-style: dashed; background: rgba(255,255,255,0.02); } .vs-shot-hint { color: rgba(255,255,255,0.30); font-size: 13px; line-height: 1.55; text-align: center; padding: 12px; } .vs-shot--example { background: radial-gradient(circle at 86% 16%, rgba(59,168,255,0.24), transparent 34%), linear-gradient(135deg, rgba(6,143,255,0.18), rgba(37,46,55,0.96)); align-items: stretch; justify-content: stretch; padding: 8px; box-sizing: border-box; } .minji-example-grid { width: 100%; height: 100%; display: grid; grid-template-columns: 20% 80%; gap: 8px; align-items: stretch; } .minji-profile-panel, .minji-output-panel { position: relative; min-width: 0; overflow: hidden; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.96); } .minji-profile-panel img, .minji-output-panel img { display: block; width: 100%; height: 100%; cursor: zoom-in; } .minji-profile-panel img { object-fit: cover; object-position: center top; } .minji-output-panel img { object-fit: cover; object-position: left top; } .minji-panel-label { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 3px 6px; border-radius: 999px; background: rgba(29,36,43,0.82); color: var(--c-white); font-size: 10px; line-height: 1.1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-good-example-card { width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; color: var(--c-text); } .ai-good-example-card .example-kicker { color: var(--c-blue-bright); font-size: 13px; font-weight: 800; } .ai-good-example-card strong { color: var(--c-white); font-size: 20px; line-height: 1.25; } .ai-good-example-card span:last-child { color: rgba(232,236,240,0.82); font-size: 14px; line-height: 1.35; } .vs-cap { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--c-text); } .vs-cap--empty { color: rgba(255,255,255,0.32); font-style: italic; } .deck-lightbox-trigger { cursor: zoom-in; } .deck-lightbox-trigger:hover { border-color: rgba(59,168,255,0.72); box-shadow: 0 0 0 2px rgba(59,168,255,0.22), 0 18px 44px rgba(0,0,0,0.34); } .path-card { min-height: 184px; display: flex; flex-direction: column; gap: 5px; } .path-card h3 { font-size: 16px; color: var(--c-blue-bright); } .path-card strong { color: var(--c-white); display: block; font-size: 18px; line-height: 1.25; } .path-card p { font-size: 13px; margin: 0; color: rgba(255,255,255,0.82); } .path-card .path-time { margin-top: auto; color: var(--c-gray); font-size: 12px; } .big { font-size: 64px; font-weight: 700; color: var(--c-blue); line-height: 1; } .muted { color: var(--c-gray); font-size: 16px; font-weight: 500; }
/* ───────── AI news cosmos slide ───────── */ .ai-news-cosmos { position: relative; height: 414px; margin-top: 12px; overflow: hidden; border-radius: 18px; border: 1px solid rgba(6,143,255,0.38); background: radial-gradient(circle at 72% 32%, rgba(6,143,255,0.34), transparent 34%), radial-gradient(circle at 55% 68%, rgba(255,255,255,0.10), transparent 42%), linear-gradient(145deg, rgba(11,18,30,0.96), rgba(2,7,16,0.98)); box-shadow: 0 18px 42px rgba(0,0,0,0.42); } .ai-news-cosmos::before { content: ""; position: absolute; inset: 0; opacity: 0.65; background-image: radial-gradient(circle, rgba(255,255,255,0.72) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(6,143,255,0.75) 0 1px, transparent 1.5px); background-size: 74px 74px, 113px 113px; background-position: 10px 18px, 42px 8px; } .ai-person-zone { position: absolute; left: 56px; bottom: 34px; width: 170px; text-align: center; color: rgba(255,255,255,0.78); } .ai-person { position: relative; width: 72px; height: 106px; margin: 0 auto 12px; } .ai-person::before { content: ""; position: absolute; top: 2px; left: 24px; width: 26px; height: 26px; border-radius: 50%; background: #f4f7fb; box-shadow: 0 0 18px rgba(255,255,255,0.44); } .ai-person::after { content: ""; position: absolute; top: 34px; left: 18px; width: 38px; height: 64px; border-radius: 24px 24px 10px 10px; background: linear-gradient(180deg, #168fff, #0b4f9f); } .ai-person-arms, .ai-person-legs { position: absolute; left: 50%; transform: translateX(-50%); background: rgba(244,247,251,0.92); } .ai-person-arms { top: 56px; width: 70px; height: 6px; border-radius: 999px; } .ai-person-legs { top: 96px; width: 54px; height: 8px; border-radius: 999px; } .ai-person-shadow { width: 118px; height: 18px; margin: 0 auto 7px; border-radius: 50%; background: radial-gradient(ellipse, rgba(6,143,255,0.42), transparent 70%); } .ai-person-caption { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .ai-cloud { position: absolute; right: 30px; top: 22px; width: 912px; height: 350px; border-radius: 48% 52% 46% 54% / 55% 43% 57% 45%; background: radial-gradient(circle at 24% 28%, rgba(255,255,255,0.18), transparent 28%), radial-gradient(circle at 58% 42%, rgba(6,143,255,0.20), transparent 35%), rgba(13,26,46,0.82); border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 0 0 72px rgba(6,143,255,0.15), 0 0 70px rgba(6,143,255,0.22); } .ai-cloud::before, .ai-cloud::after { content: ""; position: absolute; border-radius: 50%; background: rgba(13,26,46,0.88); border: 1px solid rgba(255,255,255,0.11); box-shadow: inset 0 0 48px rgba(6,143,255,0.12); } .ai-cloud::before { width: 260px; height: 190px; left: 92px; top: -28px; } .ai-cloud::after { width: 310px; height: 210px; right: 98px; bottom: -24px; } .cloud-core { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); z-index: 2; text-align: center; width: 210px; height: 210px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; gap: 5px; color: var(--c-white); background: radial-gradient(circle, rgba(6,143,255,0.36), rgba(6,143,255,0.08) 62%, transparent 70%); border: 1px solid rgba(6,143,255,0.42); } .cloud-core strong { font-size: 42px; color: var(--c-blue); line-height: 1; } .cloud-core span { font-size: 13px; color: rgba(255,255,255,0.72); } .cloud-core em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.58); } .news-cluster { position: absolute; z-index: 3; width: 255px; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.13); background: rgba(3,10,21,0.62); backdrop-filter: blur(8px); } .news-cluster h3 { margin: 0 0 6px; color: var(--c-blue-bright); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .news-pills { display: flex; flex-wrap: wrap; gap: 5px; } .news-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 3px 7px; border-radius: 999px; color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); font-size: 10px; line-height: 1.1; white-space: nowrap; text-decoration: none; } a.news-pill:hover { border-color: rgba(6,143,255,0.65); color: var(--c-white); } .news-cluster.frontier { left: 52px; top: 34px; } .news-cluster.creative { right: 54px; top: 34px; } .news-cluster.agents { left: 46px; bottom: 44px; } .news-cluster.apps { right: 54px; bottom: 44px; } .cosmos-caption { margin-top: 10px; color: rgba(255,255,255,0.78); font-size: 16px; } .cosmos-caption strong { color: var(--c-white); }
/* inline icon + text alignment helper */ .row { display: flex; align-items: center; gap: 10px; } .stack { display: flex; flex-direction: column; gap: 4px; }
/* ───────── Participant welcome slide ───────── */ .participant-layout { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 24px; align-items: start; margin-top: 18px; } .participant-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .person-pill { min-height: 54px; border: 1px solid rgba(255,255,255,0.11); border-radius: 8px; background: rgba(255,255,255,0.045); padding: 8px 10px; } .person-pill strong { display: block; color: var(--c-white); font-size: 15px; line-height: 1.1; margin-bottom: 5px; } .person-pill span { display: block; color: var(--c-gray); font-size: 11px; line-height: 1.28; } .participant-board { display: flex; flex-direction: column; gap: 10px; } .participant-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .participant-stat div, .interest-card { border: 1px solid var(--c-border); border-radius: 8px; background: rgba(6,143,255,0.055); padding: 10px 12px; } .participant-stat strong { display: block; color: var(--c-blue); font-size: 28px; line-height: 1; } .participant-stat span { color: var(--c-text); font-size: 11px; } .interest-card h3 { color: var(--c-blue-bright); font-size: 15px; margin: 0 0 5px; } .interest-card p { color: var(--c-text); font-size: 13px; line-height: 1.45; margin: 0; } .hallucination-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 14px; } .hallucination-shot { width: 100%; display: block; cursor: zoom-in; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 46px rgba(0,0,0,0.42); } .hallucination-cap { margin: 0 0 8px; color: var(--c-white); font-size: 15px; font-weight: 800; } .hallucination-cap span { color: var(--c-blue-bright); } .hallucination-rule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .hallucination-rule .card { padding: 12px 14px; } .hallucination-rule h3 { font-size: 15px; margin-bottom: 4px; } .hallucination-rule p { font-size: 13px; line-height: 1.35; margin: 0; color: var(--c-text); } .verification-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 14px; } .verification-shot { width: 100%; display: block; cursor: zoom-in; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 46px rgba(0,0,0,0.42); } .verification-cap { margin: 0 0 8px; color: var(--c-white); font-size: 15px; font-weight: 800; } .verification-cap span { color: var(--c-blue-bright); } .source-note { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 10px; }
/* ───────── QR (CTA slide — 투명 누끼, 슬라이드 bg가 비침) ───────── */ .qr-img { width: 320px; height: auto; display: block; margin: 12px auto; }
/* ───────── QR pair (소통 채널 통합 슬라이드) ───────── */ .qr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 18px; } .qr-card { text-align: center; } .qr-card .qr-img { width: 280px; margin: 4px auto; } .qr-card-tag { color: var(--c-blue); font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; } .qr-card-caption { color: rgba(255,255,255,0.78); font-size: 14px; font-weight: 500; margin-top: 8px; }
/* ───────── Level demo thumbnail (Reus가 별도 영상 재생) ───────── */ .level-thumb { display: block; margin: 8px auto 0 auto; width: 78%; max-width: 940px; height: auto; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.55); border: 1px solid var(--c-border); } .demo-embed { display: grid; grid-template-columns: minmax(0, 1.55fr) 0.8fr; gap: 28px; align-items: center; margin-top: 16px; } .demo-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--c-dark-2); border: 1px solid var(--c-border); box-shadow: 0 16px 44px rgba(0,0,0,0.42); } .demo-video-wrap video, .demo-video-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .demo-video-label { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(12,18,24,0.82); border: 1px solid rgba(255,255,255,0.12); color: var(--c-white); font-size: 13px; font-weight: 700; } .claude-proof { grid-template-columns: minmax(0, 1.25fr) 0.85fr; gap: 24px; } .claude-proof .demo-video-wrap { aspect-ratio: 62 / 33; } .claude-proof .card li { font-size: 14px; } .external-video-embed { display: grid; grid-template-columns: minmax(0, 4fr) minmax(190px, 1fr); gap: 18px; align-items: stretch; margin-top: 14px; } .external-video-media { position: relative; min-width: 0; width: 100%; height: 250px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, rgba(6,143,255,0.26), rgba(29,36,43,0.35)), radial-gradient(circle at 72% 40%, rgba(255,255,255,0.12) 0, transparent 24%), var(--c-dark-2); border: 1px solid var(--c-border); box-shadow: 0 16px 44px rgba(0,0,0,0.42); } .external-video-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,18,24,0.88) 0%, rgba(12,18,24,0.52) 46%, rgba(12,18,24,0.2) 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 88px); } .external-video-media::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-45%, -50%); width: 0; height: 0; border-top: 34px solid transparent; border-bottom: 34px solid transparent; border-left: 54px solid var(--c-white); filter: drop-shadow(0 8px 22px rgba(0,0,0,0.45)); opacity: 0.94; } .external-video-thumb { position: absolute; inset: 0; z-index: 4; display: block; color: inherit; text-decoration: none; } .external-video-kicker, .external-video-title, .external-video-cta { position: absolute; left: 22px; right: 22px; z-index: 1; } .external-video-kicker { top: 22px; color: var(--c-blue-bright); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .external-video-title { top: 58px; max-width: 560px; color: var(--c-white); font-size: 28px; font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; } .external-video-cta { bottom: 18px; padding: 10px 12px; border-radius: 8px; background: rgba(12,18,24,0.86); border: 1px solid rgba(255,255,255,0.14); color: var(--c-blue-bright); font-size: 13px; font-weight: 700; } .external-video-notes { padding: 16px 18px; } .external-video-notes h3 { margin-top: 0; font-size: 18px; line-height: 1.18; } .external-video-notes li { font-size: 14px; line-height: 1.36; margin-bottom: 6px; } .reference-case { margin-top: 8px !important; } .reference-case-card { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: center; padding: 12px 16px; } .reference-case-copy h3 { margin: 0 0 6px 0; font-size: 18px; line-height: 1.22; text-align: center; } .reference-case-copy p { margin: 0 0 6px 0; font-size: 13.5px; line-height: 1.34; text-align: center; } .reference-case-copy ul { margin: 4px 0 0 0; padding: 0; list-style: none; } .reference-case-copy li { font-size: 13px; line-height: 1.3; margin-bottom: 3px; } .reference-case-copy li::before { content: '· '; color: var(--c-blue-bright); font-weight: 900; } .reference-case-visual { min-width: 0; display: flex; justify-content: center; } .prompt-hoarding-shot { width: 100%; max-width: 210px; max-height: 150px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,0.96); border: 1px solid rgba(255,255,255,0.16); } .job-shift-case .reference-case-card { grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 2fr); gap: 12px; align-items: center; } .job-shift-case .reference-case-copy h3, .job-shift-case .reference-case-copy p, .job-shift-case .reference-case-copy ul { text-align: left; } .job-shift-case .reference-case-copy h3 { font-size: 17px; } .job-shift-case .reference-case-copy p { font-size: 13px; } .job-shift-case .reference-case-copy li { font-size: 12.5px; } .job-shift-case .reference-case-visual { height: 132px; } .job-shift-case .prompt-hoarding-shot, .prompt-context-shot { width: 100%; height: 132px; max-width: none; max-height: none; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.96); border: 1px solid rgba(255,255,255,0.16); } .prompt-mini-case { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; align-items: center; min-height: 156px; padding: 10px 12px; border-radius: 10px; background: rgba(6,143,255,0.08); border: 1px solid rgba(6,143,255,0.36); } .prompt-mini-copy strong { display: block; margin-bottom: 6px; color: var(--c-blue-bright); font-size: 15px; line-height: 1.22; } .prompt-mini-copy span { display: block; color: rgba(232,236,240,0.88); font-size: 13px; line-height: 1.34; } .prompt-mini-shot { width: 100%; max-height: 136px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.96); border: 1px solid rgba(255,255,255,0.16); } .age-proof-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; margin-top: 14px; } .age-proof-copy { display: flex; flex-direction: column; min-width: 0; } .age-proof-layout .three-col { margin-top: 0; gap: 12px; align-items: stretch; } .age-proof-layout .three-col .card { min-height: 128px; display: flex; flex-direction: column; justify-content: flex-start; } .age-proof-layout .card { padding: 15px 16px; box-sizing: border-box; } .age-proof-layout .card h3 { font-size: 20px; line-height: 1.22; margin-bottom: 8px; } .age-proof-layout .card p, .age-proof-layout .card li, .age-proof-layout .card { font-size: 16px; line-height: 1.34; } .age-proof-link { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; min-height: 0; height: 100%; padding: 12px; color: inherit; text-decoration: none; overflow: hidden; } .age-proof-thumb-link { display: block; width: 100%; text-decoration: none; line-height: 0; } .age-proof-thumb-link img, .age-proof-link img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: var(--c-dark-3); } .age-proof-link-text { display: block; margin-top: 10px; color: var(--c-blue-bright); font-size: 15px; line-height: 1.25; font-weight: 800; text-decoration: none; } .age-proof-link span { display: block; margin-top: 5px; color: rgba(232,236,240,0.82); font-size: 12.5px; line-height: 1.32; } .age-proof-footer { margin-top: 14px !important; font-size: 22px !important; line-height: 1.24 !important; } .team-branding-layout { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 4.6fr); gap: 18px; align-items: start; margin-top: 8px; } .team-character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .team-character-card { padding: 8px; } .team-character-card img { display: block; width: 100%; height: 142px; object-fit: contain; border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); background: var(--c-dark-3); } .team-character-card figcaption, .team-brand-shot figcaption { margin-top: 6px; color: rgba(232,236,240,0.9); font-size: 12px; line-height: 1.18; } .team-character-card figcaption strong, .team-brand-shot figcaption strong { color: var(--c-blue-bright); } .team-work-panel { display: flex; flex-direction: column; gap: 12px; } .team-symbol-card { padding: 14px 16px; } .team-symbol-card img { display: block; width: 100%; max-height: 72px; object-fit: contain; object-position: left center; margin-bottom: 10px; } .team-brand-shots { display: grid; grid-template-columns: 1fr; gap: 10px; } .team-brand-shot { padding: 10px; } .team-brand-shot img { display: block; width: 100%; height: 76px; object-fit: cover; object-position: left center; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: var(--c-dark-3); } .team-branding-note { margin-top: 8px !important; font-size: 18px !important; line-height: 1.22 !important; } .demo-play { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid var(--c-blue); } .demo-copy { display: flex; flex-direction: column; gap: 12px; } .demo-kicker { color: var(--c-blue-bright); font-size: 15px; font-weight: 700; } .demo-copy h3 { font-size: 25px; line-height: 1.25; margin: 0; } .demo-copy p { font-size: 16px; color: var(--c-text); margin: 0; } .demo-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .demo-meta span, .demo-meta a { border: 1px solid var(--c-border); border-radius: 999px; padding: 4px 10px; color: var(--c-gray); font-size: 13px; text-decoration: none; } .demo-meta a { border-color: rgba(6, 143, 255, 0.42); color: var(--c-blue-bright); font-weight: 700; } .demo-meta a:hover { border-color: rgba(6, 143, 255, 0.72); color: var(--c-white); } .demo-next { border-left: 3px solid var(--c-blue); padding-left: 12px; color: var(--c-gray); font-size: 14px; line-height: 1.45; } .demo-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .demo-segment { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .demo-segment-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--c-dark-2); border: 1px solid var(--c-border); box-shadow: 0 10px 28px rgba(0,0,0,0.34); } .demo-segment-video video, .demo-segment-video img { width: 100%; height: 100%; object-fit: cover; display: block; } .demo-segment-label { position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; background: rgba(12,18,24,0.82); border: 1px solid rgba(255,255,255,0.12); color: var(--c-white); font-size: 11px; font-weight: 700; } .demo-segment h3 { font-size: 17px; margin: 0; line-height: 1.25; } .demo-segment p { font-size: 13px; color: var(--c-text); margin: 0; line-height: 1.4; } .demo-segment .demo-meta { gap: 5px; margin-top: 0; } .demo-segment .demo-meta span, .demo-segment .demo-meta a { font-size: 11px; padding: 3px 7px; }
/* ───────── Case study layout (SAX 실사례) ───────── */ .case-grid { grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; } .case-img img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); border: 1px solid var(--c-border); } .case-text h3 { margin-top: 0; font-size: 22px; } .case-text p, .case-text li { font-size: 18px; }
/* ───────── Portfolio full-width (Incubator 1기 배출작) ───────── */ .portfolio-full { margin: 16px auto 12px auto; max-width: 100%; } .portfolio-full img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,0.45); border: 1px solid var(--c-border); }
/* ───────── Incubator 3-step story flow ───────── */ .incubator-flow { grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: stretch; margin-top: 4px; } .incubator-flow figure { margin: 0; background: var(--c-dark-2); border: 1px solid var(--c-border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .incubator-flow img { width: 100%; height: 150px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--c-border); display: block; } .incubator-flow figcaption { font-size: 12px; line-height: 1.4; color: var(--c-text); } .incubator-flow figcaption strong { color: var(--c-blue); font-size: 13px; } .semiclass-flow { grid-template-columns: 0.85fr 1.05fr 1.1fr; gap: 12px; align-items: stretch; margin-top: 0; } .semiclass-flow figure { margin: 0; background: var(--c-dark-2); border: 1px solid var(--c-border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .semiclass-flow img { width: 100%; height: 175px; object-fit: cover; object-position: top center; border-radius: 6px; border: 1px solid var(--c-border); display: block; } .semiclass-flow figcaption { font-size: 12px; line-height: 1.4; color: var(--c-text); } .semiclass-flow figcaption strong { color: var(--c-blue); font-size: 13px; }
/* ───────── Journey map diagram (slide 22) ───────── */ .journey { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; } .journey .j-node { background: var(--c-dark-2); border: 1px solid var(--c-border); border-radius: 10px; padding: 10px 20px; text-align: center; min-width: 200px; } .journey .j-current { background: rgba(6,143,255,0.14); border: 2px solid var(--c-blue); box-shadow: 0 0 0 4px rgba(6,143,255,0.08); } .journey .j-tag { display: inline-block; background: var(--c-blue); color: white; font-size: 11px; padding: 2px 10px; border-radius: 10px; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.04em; } .journey .j-title { font-size: 19px; color: var(--c-white); font-weight: 700; margin: 2px 0; } .journey .j-meta { font-size: 13px; color: var(--c-gray); margin: 1px 0; } .journey .j-arrow { width: 2px; height: 18px; background: var(--c-blue); position: relative; } .journey .j-arrow::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--c-blue); } .journey .j-tier { display: flex; flex-direction: column; align-items: center; gap: 6px; } .journey .j-tier-label { font-size: 11px; color: var(--c-blue); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .journey .j-row { display: flex; gap: 28px; } .journey .j-bonus { margin-top: 10px; padding: 6px 18px; border: 1px dashed var(--c-border); border-radius: 6px; font-size: 14px; color: var(--c-gray); }
/* ───────── Speaker intro ───────── */ .speaker-intro { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 38px; align-items: center; height: 100%; } .speaker-photo { position: relative; width: min(100%, 310px); aspect-ratio: 4 / 5; justify-self: center; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-border); background: url('assets/reus-profile.png') center 42% / cover no-repeat, linear-gradient(135deg, rgba(6,143,255,0.16), rgba(255,255,255,0.02)), var(--c-dark-2); box-shadow: 0 18px 48px rgba(0,0,0,0.46); } .speaker-photo-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: rgba(255,255,255,0.46); font-size: 66px; font-weight: 700; letter-spacing: 0; } .speaker-photo-fallback span { font-size: 14px; color: var(--c-gray); font-weight: 500; } .speaker-content h1 { font-size: 42px; margin-bottom: 6px; } .speaker-content h2 { font-size: 21px; margin-bottom: 16px; } .speaker-points { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0; } .speaker-point { background: var(--c-dark-2); border: 1px solid var(--c-border); border-radius: 8px; padding: 12px 14px; } .speaker-point.accent { background: rgba(6,143,255,0.08); border-color: rgba(6,143,255,0.42); } .speaker-point h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 4px 0; } .speaker-point p { font-size: 15px; margin: 0; }
.ot-toc { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; margin-top: 18px; align-items: stretch; } .ot-toc-main { background: linear-gradient(145deg, rgba(6,143,255,0.16), rgba(18,28,42,0.9)); border: 1px solid rgba(6,143,255,0.48); border-radius: 14px; padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; min-height: 300px; } .ot-toc-main .label { color: var(--c-blue-bright); font-size: 15px; font-weight: 700; margin-bottom: 12px; } .ot-toc-main strong { color: var(--c-white); font-size: 34px; line-height: 1.18; display: block; margin-bottom: 16px; } .ot-toc-main p { color: var(--c-text); font-size: 17px; line-height: 1.5; margin: 0; } .ot-toc-list { display: grid; gap: 10px; } .ot-toc-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px 14px; } .ot-toc-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(6,143,255,0.15); border: 1px solid rgba(6,143,255,0.55); color: var(--c-blue-bright); font-weight: 800; font-size: 15px; } .ot-toc-item h3 { margin: 0 0 3px; color: var(--c-white); font-size: 17px; } .ot-toc-item p { margin: 0; color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.38; } .livept-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-top: 8px; } .livept-panel { background: var(--c-dark-2); border: 1px solid var(--c-border); border-radius: 10px; padding: 10px; overflow: hidden; } .livept-panel h3 { margin: 0 0 7px; font-size: 18px; color: var(--c-blue-bright); } .livept-basic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .livept-shot img { width: 100%; height: 315px; object-fit: cover; object-position: top center; display: block; border-radius: 6px; border: 1px solid var(--c-border); } .livept-shot { margin: 0; } .livept-shot figcaption { margin-top: 5px; color: rgba(255,255,255,0.78); font-size: 11px; line-height: 1.32; } .livept-panel p { margin: 8px 0 0; color: var(--c-white); font-size: 13px; line-height: 1.45; } .livept-stack { display: grid; gap: 9px; } .livept-side-row { display: grid; grid-template-columns: 0.86fr 1fr; gap: 9px; align-items: start; } .livept-side-row img { width: 100%; height: 108px; object-fit: cover; object-position: top center; display: block; border-radius: 6px; border: 1px solid var(--c-border); } .livept-side-row p { margin: 0; color: var(--c-white); font-size: 11.5px; line-height: 1.42; } .livept-note { margin-top: 10px; color: rgba(255,255,255,0.68); font-size: 12px; }
<!-- _class: title sherpa --> <div class="sherpa-title-grid"> <div class="sherpa-title-copy"> <div class="title-brand">SEMICOLON</div>Semiclass OT:<br>AI 셰르파 따라걷기
AI 고속도로 위에서 나만의 속도로 살아남는 방법
</div> <div class="sherpa-title-visual"> <img src="assets/semiclass-ot-ai-sherpa.png" alt="AI 셰르파 따라걷기 — 등산객과 AI 길잡이"> </div> </div> <!-- [요약] [#1 · 타이틀 | 00:00–00:02] 핵심: "오늘 1시간이 어떤 시간이 될지" 첫 인상. 발화 포인트: - Zoom 녹화 ON 확인 후 10초 대기 (타이틀 노출 컷) - "AI 고속도로 위에서 나만의 속도로 살아남는 방법" 한 박자 천천히 읽기 시연/액션: 마이크 테스트 1회, 화면 공유는 아직 X (다음 슬라이드부터) ➜ 전환: "오늘 90분이 어떻게 흘러가는지부터 보여드릴게요." 주의: 자기소개 X — 그건 #4에서. 분위기 환기·청중 안정만. [풀 스크립트] > 안녕하세요. 토요일 오후에 시간 내주셔서 감사합니다. > 오늘 90분은 AI라는 고속도로 위에서, 내 속도와 방향을 어떻게 잡을지 감을 잡는 시간으로 준비했습니다. > 어려운 용어보다 실제 결과물을 먼저 보여드리고, 그다음에 AI를 대할 때 꼭 필요한 오해와 기준을 정리하겠습니다. > 편하게 보시다가 본인 일에 연결되는 장면이 있으면 그 지점만 기억해주시면 됩니다. --><!-- _class: content -->
<img src="assets/icons/message-circle-blue.svg" class="i-lg"> 라이브 PT 세션, 이렇게 쓰시면 됩니다
슬라이드는 자동으로 따라오고, 자료·채팅은 오른쪽 탭에서 바로 열 수 있어요
<div class="livept-guide"> <div class="livept-panel"> <h3>기본 화면</h3> <div class="livept-basic-grid"> <figure class="livept-shot"> <img src="assets/livept-guide-pointing-window.jpg" alt="라이브 PT 강사 화면과 상단 도구 모음"> <figcaption>강사 화면: 슬라이드 넘김과 포인팅을 진행합니다.</figcaption> </figure> <figure class="livept-shot"> <img src="assets/livept-guide-pointing-fullscreen.jpg" alt="강사가 포인팅한 영역이 참여자 화면에도 표시되는 라이브 PT 화면"> <figcaption>수강자 화면: 넘김과 포인팅이 자동으로 따라옵니다.</figcaption> </figure> </div> <p>강사가 슬라이드를 넘기면 여러분 화면도 같이 넘어가고, 강사가 짚는 영역도 그대로 표시됩니다.</p> </div> <div class="livept-stack"> <div class="livept-panel"> <h3>위키</h3> <div class="livept-side-row"> <img src="assets/livept-guide-wiki.png" alt="슬라이드 위키 링크와 간단 설명 팝업"> <p>슬라이드의 <strong>파란 글씨와 밑줄</strong>은 궁금할 수 있는 단어를 설명한 위키 링크입니다. 클릭하면 간단한 설명이 나오고, 상세보기에서 더 자세히 볼 수 있습니다.</p> </div> </div> <div class="livept-panel"> <h3>강의 자료</h3> <div class="livept-side-row"> <img src="assets/livept-guide-materials.jpg" alt="라이브 PT 강의 자료 패널"> <p>우측 상단 <strong>강의 자료</strong> 탭에서 강사가 시연하는 프롬프트와 결과물을 강의 들으며 바로 확인할 수 있습니다.</p> </div> </div> <div class="livept-panel"> <h3>채팅</h3> <div class="livept-side-row"> <img src="assets/livept-guide-chat.jpg" alt="라이브 PT 참여자 채팅과 강사 귓속말 패널"> <p><strong>참여자 채팅</strong>은 모두에게 보이고, <strong>강사 귓속말</strong>은 강사에게만 1:1로 전달됩니다.<br><span class="livept-note">작게 보이면 전체화면 버튼으로 크게 보세요.</span></p> </div> </div> </div> </div> <!-- [요약] [#2 · 라이브 PT 세션 활용법 | 00:02–00:03] 핵심: 참여자가 조작법을 몰라 흐름을 놓치지 않도록, 슬라이드 자동 동기화·포인팅·강의자료·채팅·전체화면을 먼저 안내. 발화 포인트: - 강사가 슬라이드를 넘기면 여러분 화면도 자동으로 따라 넘어감 - 강사가 포인팅하면 참여자 화면에도 같은 위치가 표시됨 - 슬라이드 안의 파란 글씨와 밑줄은 위키 링크이며, 클릭하면 간단한 설명과 상세보기로 이어짐 - 강의를 듣다 궁금한 용어가 있으면 눌러보고, 위키로 추가했으면 하는 용어는 채팅이나 강사 DM으로 요청 가능 - 우측 상단 강의 자료 탭에서 프롬프트, 결과물, 참고 자료를 강의 들으며 확인 가능 - 채팅 탭은 참여자 모두와 대화, 강사 귓속말 탭은 강사에게 1:1 메시지 - 화면이 작으면 전체화면 버튼 사용 ➜ 전환: "이제 오늘 90분을 어떻게 보낼지 보여드릴게요." 주의: - 기능 설명에 오래 머물지 않기. 30초 이내로 안내하고 다음 슬라이드로 전환 [풀 스크립트] > 시작 전에 이 화면을 어떻게 쓰면 되는지만 짧게 안내드릴게요. > 제가 슬라이드를 넘기면 여러분 화면도 자동으로 같이 넘어갑니다. > 제가 화면에서 특정 위치를 짚으면, 여러분 화면에도 그 포인팅이 같이 보입니다. > 그리고 슬라이드에 파란 글씨와 밑줄이 있는 단어들이 보일 거예요. 이건 여러분이 궁금해하실 수 있는 용어를 설명한 위키 링크입니다. > 눌러보면 간단한 설명이 바로 나오고, 상세보기를 누르면 더 자세한 설명으로 넘어갑니다. > 강의 들으면서 궁금한 용어가 있으면 눌러보셔도 되고, 위키로 추가됐으면 하는 단어는 채팅이나 강사 귓속말로 보내주셔도 됩니다. > 오른쪽 위 강의 자료 탭을 누르면 오늘 시연하는 프롬프트와 결과물을 강의 들으면서 바로 확인하실 수 있습니다. > 채팅 탭은 참여자 모두와 이야기하는 곳이고, 강사 귓속말 탭은 저에게만 1:1로 메시지를 보내는 곳입니다. > 화면이 작게 보이면 전체화면 버튼을 눌러서 크게 보시면 됩니다. --><!-- _class: content --> <div class="speaker-intro"> <div class="speaker-photo"> </div> <div class="speaker-content">
안녕하세요, Reus입니다
오늘은 어려운 기술 말고, 바로 써먹는 방법을 보여드릴게요
<div class="speaker-points"> <div class="speaker-point"><img src="assets/icons/users-blue.svg" class="i-sm"> 저는 이런 일을 해왔어요
<p>KT · SC제일은행 같은 큰 조직부터 스타트업·제조업까지, <strong>10여 년간 실제 서비스를 만드는 일</strong>을 했습니다.</p> </div> <div class="speaker-point"><img src="assets/icons/sparkles-blue.svg" class="i-sm"> 지금은 이렇게 일해요
<p>세미콜론 팀과 함께 <strong>AI를 매일 업무에 쓰면서</strong> 수업·서비스·자동화 도구를 만들고 있습니다.</p> </div> <div class="speaker-point accent"><img src="assets/icons/check-circle-blue.svg" class="i-sm"> 오늘의 약속
<p>전문가처럼 말하는 법보다, <strong>내 일에 바로 적용하는 법</strong>을 먼저 보여드릴게요.</p> </div> </div> </div> </div> <!-- [요약] [#3 · Reus 인사 | 00:02–00:03 · 1분] 핵심: 강사 신뢰 1분 안에 확보. 자랑 X, "내 일에 바로 적용하는 법 알려드림" 약속. 발화 포인트: - 약속: "전문가처럼 말하는 법보다, 내 일에 바로 적용하는 법 먼저 보여드림" - 1분 컷 — 길어지면 청중 이탈 ➜ 전환: "그럼 오늘 90분을 어떻게 보낼지 짧게 말씀드릴게요." 주의: 일반인 OT 톤 — "AI 엔지니어" 같은 내부 용어 X. "AI를 매일 업무에 쓰는 팀" 표현 유지. [풀 스크립트] > 저는 Reus입니다. > KT, SC제일은행 같은 큰 조직부터 스타트업과 제조업까지, 10여 년간 실제 서비스를 만드는 일을 해왔습니다. > 지금은 세미콜론 팀과 함께 AI를 매일 업무에 쓰면서 수업, 서비스, 자동화 도구를 만들고 있습니다. > 오늘은 제 이력을 길게 말씀드리기보다, 그 경험을 바탕으로 여러분이 내 일에 AI를 바로 적용하는 방법을 보여드리겠습니다. > 전문가처럼 말하는 법보다, 오늘 당장 써먹을 수 있는 감각을 먼저 가져가시면 됩니다. --><!-- _class: content -->
오늘 90분, 이렇게 보낼 거예요
데모 → 오해 걷어내기 → 커리큘럼 → 사례 → Q&A
<div class="three-col"> <div class="card"> <img src="assets/icons/video-blue.svg" class="i-md">3–13분
단계별 데모 4종 결과물 4가지 미리보기
</div> <div class="card"> <img src="assets/icons/sparkles-blue.svg" class="i-md">13–34분
AI 오해 걷어내기 왕초보 3대 벽 허물기
</div> <div class="card"> <img src="assets/icons/map-blue.svg" class="i-md">34–90분
커리큘럼 · 사례 · Q&A
</div> </div><!-- [요약] [#4 · 90분 아젠다 | 00:02] 핵심: 오늘 90분 약속 = 데모(10분) → 오해/벽(20분) → 운영 지도·실제 사례 → 마지막 Q&A. 발화 포인트: - 3-column 카드를 손가락으로 짚어가며 한 번씩 호명 ➜ 전환: "그럼 바로, 오늘 AI로 뭐가 되는지부터." 주의: 시간 약속 — 본편은 컴팩트하게 닫고, 맨 뒤는 Q&A와 자유대화로 열어둔다는 시그널. 가격·신청 멘트 X (그건 후반). [풀 스크립트] > 오늘은 크게 세 구간으로 갑니다. > 첫 13분은 AI로 실제로 어떤 결과물이 나오는지 Level 0부터 Level 3까지 바로 보여드릴게요. > 그다음 21분은 많은 분들이 AI를 시작하기 전에 갖고 있는 오해와 마음의 벽을 정리합니다. > 마지막 구간은 세미클래스가 어떻게 운영되는지, 그리고 저희 팀이 실제로 AI로 무엇을 만들었는지 보여드린 뒤 Q&A로 마무리하겠습니다. 본편은 제가 압축해서 보여드리고, 맨 뒤에는 질문과 자유대화를 충분히 열어두겠습니다. > 오늘 제 목표는 여러분을 설득하는 게 아니라, "이 정도면 나도 해볼 만하네"라는 감각을 드리는 겁니다. -->바로 시작할게요. 먼저 세미클래스 들으면 어떤 걸 만들 수 있는지 10분 안에 보여드릴게요.
<!-- _class: content -->
오늘 볼 때, 딱 3가지만 보세요
기능 이름보다 중요한 건 “내 일에 어디서부터 적용할 수 있나”입니다
<div class="ot-toc"> <div class="ot-toc-main"> <div class="label">WATCHING GUIDE</div> <strong>오늘은 도구 설명보다<br>내 시작점을 찾는 시간입니다</strong> <p>화면이 멋진지보다, 내 업무·생활에 적용할 수 있는지 기준으로 봐주세요.</p> </div> <div class="ot-toc-list"> <div class="ot-toc-item"><div class="ot-toc-num">1</div><div><h3>이게 내 일에 적용될 수 있나</h3><p>카페 SNS, 보고서, 제품 영상, 챗봇처럼 내 상황과 닮은 장면을 찾기</p></div></div> <div class="ot-toc-item"><div class="ot-toc-num">2</div><div><h3>나는 어느 Level부터 시작하면 되나</h3><p>매일 쓰는 작은 도움인지, 결과물 제작인지, 서비스 만들기인지 구분하기</p></div></div> <div class="ot-toc-item"><div class="ot-toc-num">3</div><div><h3>수업에서 무엇까지 만들 수 있나</h3><p>OT 이후 비정기 클래스·정기 클래스에서 이어갈 산출물의 크기 보기</p></div></div> </div> </div> <!-- [요약] [#5 · 관전 포인트 | 00:03] 핵심: 2번 슬라이드의 시간표를 반복하지 않고, 데모를 볼 기준 3가지를 고정. 발화 포인트: - 내 일에 적용할 수 있는가 - 나는 어느 Level부터 시작하면 되는가 - 세미클래스에서 무엇까지 만들 수 있는가 ➜ 전환: "그럼 첫 번째, 결과물 미리보기부터 바로 보겠습니다." 주의: 2번의 시간표를 다시 말하지 말고, 보는 기준만 짧게 고정. [풀 스크립트] > 오늘 보낼 90분까지 짧게 그렸으니, 이제부터는 화면을 보실 때 딱 세 가지만 기준으로 봐주세요. > 첫 번째, 이게 내 일이나 생활에 적용될 수 있는가. > 두 번째, 나는 어느 Level부터 시작하면 되는가. > 세 번째, 세미클래스에서 무엇까지 만들 수 있는가. > 오늘은 기능 이름을 외우는 시간이 아닙니다. 내 시작점을 찾는 시간입니다. > 그럼 첫 번째, 결과물 미리보기부터 바로 보겠습니다. --><!-- _class: section --> <img src="assets/icons/video-blue.svg" class="divider-icon">
LIVE
세미클래스 들으면, 이런 거 만들어요
단계별 결과물 4가지, 10분 안에 미리보기로 보여드릴게요.
<!-- [요약] [#6 · LIVE 디바이더 | 00:03–00:04] 핵심: 다음 10분 = "결과물 미리보기" 4단계. 청중 분위기 전환. 발화 포인트: - (3초 쉼 — 분위기 환기) 시연/액션: 화면 공유 ON → 비디오 플레이어 풀스크린 준비 ➜ 전환: 자동 진행 (다음 슬라이드 즉시) 주의: "오늘 되는 기능 쇼케이스" X. "이걸 들으면 만들 수 있는 결과물" 톤 유지. [풀 스크립트] > 지금부터는 말로 설명하기보다 먼저 보여드릴게요. > 세미클래스를 들으면 어떤 결과물을 만들 수 있는지 Level 0부터 Level 3까지 빠르게 보겠습니다. > Level 0은 일상에 AI를 살짝 끼워넣는 단계고, Level 1은 콘텐츠를 통째로 만드는 단계입니다. > Level 2는 작동하는 서비스를 만드는 단계, Level 3은 AI가 내 업무를 이어서 처리하는 에이전트 단계라고 보시면 돼요. > 10분 안에 훑고 지나갈 거라 전부 이해하려고 하실 필요는 없습니다. "아, 저 정도는 내 일에도 연결되겠다" 싶은 지점을 하나만 잡아주세요. --><!-- _class: demo -->
<img src="assets/icons/video-blue.svg" class="i-lg"> Level 0 — 일상에 AI 끼워넣기
카페 SNS · 엑셀 분석 · 퍼스널 컬러 진단 — 3분 안에 셋 다
<div class="demo-sections"> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level0-cafe.svg" playsinline> <source src="assets/videos/level0-cafe.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 7초</div> </div>① 자영업 · 카페 신메뉴 SNS
<p>AI에게 좋은 결과를 뽑아내려면 좋은 질문이 필요합니다. 이걸 <strong>프롬프팅</strong>이라고 불러요.</p> <div class="demo-meta"><span>프롬프팅</span><span>카피</span><span>해시태그</span></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level0-excel.svg" playsinline> <source src="assets/videos/level0-excel.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 50초</div> </div>② 직장인 · 매출 데이터 분석
<p>CSV 파일을 첨부하고 프롬프팅하면, 데이터까지 함께 읽는 <strong>멀티모달</strong> 분석으로 이어집니다.</p> <div class="demo-meta"><span>CSV 첨부</span><span>프롬프팅</span><span>멀티모달</span></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level0-personal-color.svg" playsinline> <source src="assets/videos/level0-personal-color-outfit.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 20초</div> </div>③ 일상 활용 · 퍼스널 컬러 진단
<p>내 사진 한 장만 있으면 비싼 컬러 진단을 일상에서 손쉽게.</p> <div class="demo-meta"><span>사진 1장</span><span>AI 진단</span><span>팔레트</span></div> </div> </div> <!-- [요약] [#7 · Level 0 데모 | 00:03–00:06 · 3분] 핵심: 일상에 AI 끼워넣기 — 카페 SNS / 엑셀 분석 / 퍼스널 컬러 진단 (3 영상). 발화 포인트 (영상 시작 전, 10초): - 데모 1: "AI에게 좋은 결과를 뽑아내기 위해선 좋은 질문을 해야합니다. 이걸 프롬프팅이라고 불러요." - 데모 2: "CSV처럼 파일을 첨부하고 질문하는 것도 가능합니다. 텍스트만이 아니라 파일·이미지를 함께 다루는 흐름을 멀티모달이라고 부릅니다." 영상 재생 중: 자막·나레이션 자체완결 → 강사 멘트 최소 (필요 시 일시정지하고 1줄 코멘트만) 영상 끝난 후 (15초): 시연/액션: 1번 카드 영상 재생 → 끝나면 2번 → 3번 (재생바 클릭 또는 자동 다음) ➜ 전환: "다음 — 콘텐츠를 통째로 만드는 단계." 주의: "학부모"라고 하지 말고 "일상 활용". 셋 다 다른 페르소나임을 의식하고 호명. 영상 소스: ot-deck/demo-kit/recording/01-level0-script.md [풀 스크립트] > Level 0 = 일상, Level 1 = 콘텐츠, Level 2 = 서비스, Level 3 = 에이전트 — 4단계로 갑니다 > 전부 영상으로 보여드림 — 라이브 시연 시간 안 날림 > 한국어 한 줄 부탁만으로 됨. 코드·엑셀 수식·디자인 툴 안 씀 > 비정기 클래스에서 주제별로 직접 해보실 수 있습니다 --><!-- _class: demo -->
<img src="assets/icons/sparkles-blue.svg" class="i-lg"> Level 1 — 콘텐츠 통째로 만들기
시장 트렌드 보고서 · 제품 영상 생성 · 영상편집 자동화 — 한 주 콘텐츠 통째로
<div class="demo-sections"> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level1-genspark.jpg" playsinline> <source src="assets/videos/level1-01-genspark.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 22초</div> </div>시장 트렌드 보고서
<p>2~3줄 요구사항을 Claude Code로 긴 프롬프트로 다듬고, ChatGPT에서 차트 포함 보고서를 만듭니다.</p> <div class="demo-meta"><span>Claude Code</span><span>ChatGPT</span><span>프롬프트 엔지니어링</span><a class="deck-open-link" href="assets/outputs/level1-kbeauty-market-entry-report.pdf" target="_blank" rel="noopener noreferrer">실제 산출물 PDF</a></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level1-higgsfield-i2v.jpg" playsinline> <source src="assets/videos/level1-02-higgsfield-i2v.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 16초</div> </div>제품 사진 → I2V 영상
<p>직접 찍은 제품 사진을 기준으로, 힉스필드에서 턴테이블 제품 영상을 만듭니다.</p> <div class="demo-meta"><span>I2V</span><span>Higgsfield</span><span>제품 영상</span></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level1-vrew.svg" playsinline> <source src="assets/videos/level1-03-vrew.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 30초</div> </div>영상편집 자동화
<p>원본만 넣으면 STT·단어분리·씬 배치까지 — UI에서 씬만 커스터마이즈.</p> <div class="demo-meta"><span>Vrew</span><span>자동편집</span></div> </div> </div> <!-- [요약] [#8 · Level 1 데모 | 00:06–00:09 · 3분] 핵심: 한 주 콘텐츠 통째로 — 시장 트렌드 보고서 / 제품 사진 기반 I2V 영상 / 영상편집 자동화. 발화 포인트 (영상 시작 전): 영상 재생 중: 영상 자체완결, 강사 멘트 최소 영상 끝난 후: 시연/액션: 3개 카드 순차 재생. 일부 미촬영이면 thumb만 노출 + "이 부분은 다음 회차 영상" 한 줄. ➜ 전환: "이제 직접 작동하는 서비스 — Level 2." 주의: I2V = "이미지 한 장을 기준으로 짧은 영상을 만드는 방식", Higgsfield = "이번 데모에 쓰는 제품 영상 생성 도구" 정도로 풀어 설명. Vrew = "영상편집 도구" 한 단어로 풀어 설명. 영상 소스: ot-deck/demo-kit/recording/02-level1-script.md 구성: ① 시장 트렌드 보고서 (Claude Code 프롬프트 엔지니어링 → ChatGPT 보고서 생성, 22s) · ② 제품 사진 → I2V 턴테이블 영상 (Higgsfield 76s) · ③ 영상편집 자동화 (Vrew 1분 30초) KB: semiclass/decision/level1-redesign-2026-04-27 · semiclass/material/automation-cases-2026-04-27 [풀 스크립트] > Level 0이 한 채팅 끝낸 건이라면, Level 1은 결과물을 통째로 > L0에서 프롬프팅이 중요하다고 했는데, 10줄 넘는 프롬프트를 매번 직접 쓰기는 어렵습니다. 그래서 Claude Code에 2~3줄 요구사항을 주고 긴 보고서 프롬프트로 다듬은 뒤, ChatGPT에서 차트 포함 보고서를 생성하는 흐름을 보여드립니다. > 원본 요청: "화장품 브랜딩 마케팅팀 8년차 과장 박서연이야. 다음 주 임원 회의가 예정되어 있어. 주제는 'Z세대 K-Beauty 시장 진입 전략'이야. 30페이지짜리 시장 분석 보고서가 필요해. 출처 인용 자동과 표/그래프 위주의 데이터 비교분석이 필요해. 경쟁사 매트릭스와 가격 비교/분석도 들어가야해. 보고서 생성을 위한 프롬프트를 만들어줄래?" > 제품은 직접 찍고, 이미지를 기준으로 턴테이블 영상을 만들고, 편집은 STT·단어분리·씬 배치까지 자동 > 비정기 클래스에서 보고서·제품 영상·자동편집 주제로 직접 해보실 수 있습니다 --><!-- _class: content -->
지금 보고 계신 이 슬라이드도, AI로 만들었어요
Claude Design으로 초안 만들고, Comment · Edit · Draw로 계속 고쳤습니다
<div class="demo-embed claude-proof" style="margin-top: 10px;"> <div class="demo-video-wrap"> <video controls preload="metadata" poster="assets/thumb-level1-claude-design-proof.jpg" playsinline> <source src="assets/videos/level1-claude-design-proof.mp4" type="video/mp4"> </video> <div class="demo-video-label"><span class="demo-play"></span> Claude Design 수정 장면 · 약 3분 22초</div> </div> <div class="card accent">만드는 방식
- 초안은 AI가 만들고
- 사람은 방향과 기준을 잡고
- 고칠 부분을 직접 표시하고
- 문구·레이아웃·강조점을 반복 수정합니다
핵심은 디자인 툴 숙련이 아니라,
AI에게 정확히 피드백하는 법이에요.
<!-- [요약] 타이밍: 00:09–00:10 (30~45초) 영상 소스: /Users/reus/Desktop/Screenshots/260428-slide-1.mov + /Users/reus/Desktop/Screenshots/260428-slide-2.mov 편집본: assets/videos/level1-claude-design-proof.mp4 (slide-1 → slide-2 순서 합본, 약 3분 22초) 멘트: "지금 여러분이 보고 있는 이 강의 슬라이드도 AI로 만들었어요. 제가 직접 디자인한 게 아니라, AI가 만든 초안을 보고 Comment/Edit/Draw로 고칠 부분을 짚고 계속 수정했습니다. 그래서 배울 건 도구 버튼이 아니라, AI에게 방향을 주고 피드백하는 법입니다." [풀 스크립트] > 여기서 하나만 더 보여드릴게요. > 지금 여러분이 보고 계신 이 강의 슬라이드도 AI로 만들었습니다. > 제가 처음부터 디자인 툴을 열어서 하나하나 만든 게 아니라, Claude Design으로 초안을 만들고, 보면서 "여기는 강조가 약하다", "이 문구는 바꿔야 한다", "이 영역을 이렇게 고쳐달라"라고 계속 피드백했습니다. > 영상에 보이는 Comment, Edit, Draw 같은 기능은 결국 AI에게 고칠 위치와 기준을 알려주는 도구예요. > 그래서 Level 1에서 중요한 건 디자인 버튼을 외우는 게 아니라, 내가 원하는 결과물을 보고 방향을 주고 다시 고치는 능력입니다. > 답변 하나 받는 단계에서 끝나는 게 아니라, 내 발표자료, 보고서, 콘텐츠를 실제 산출물로 만드는 단계라고 이해하시면 됩니다. -->Level 1은 "답변 받기"가 아니라, 내가 필요한 콘텐츠를 결과물로 만드는 단계입니다.
<!-- _class: demo -->
<img src="assets/icons/bot-blue.svg" class="i-lg"> Level 2 — 나만의 서비스 만들기
공간을 보여주는 프로토타입부터, 진짜 출시한 서비스까지 — 난이도 순서
<div class="demo-sections"> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level2-building-modeling.jpg" playsinline> <source src="assets/videos/level2-01-building-modeling.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 40초</div> </div>① 건축 모델링 뷰어 <small>· ★1</small>
<p>원하는 건물·공간 구조를 말로 설명하면, 회전하고 살펴볼 수 있는 3D 화면이 만들어집니다.</p> <div class="demo-meta"><span>공간 프로토타입</span><span>3D 시각화</span></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level2-axoracle.jpg" playsinline> <source src="assets/videos/level2-02-axoracle.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 56초</div> </div>② AXOracle <small>· ★2</small>
<p>같은 방식으로 만든 앱을 인터넷에 띄우고, 데이터까지 저장해 진짜로 출시한 서비스.</p> <div class="demo-meta"><span>인터넷 배포</span><span>데이터 저장</span><span>실서비스</span></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level2-bot.jpg" playsinline> <source src="assets/videos/level2-03-semiclass-bot.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 33초</div> </div>③ Semiclass 챗봇 <small>· ★3</small>
<p>실시간 채팅 + AI 답변 + 슬랙 자동 알림 + 대화 저장 — 여러 시스템이 다 연결된 운영 봇.</p> <div class="demo-meta"><span>실시간</span><span>AI 답변</span><span>슬랙 연동</span><span>DB</span></div> </div> </div> <!-- [요약] [#9 · Level 2 데모 | 00:09–00:12 · 3분] 핵심: 좌측부터 난이도 순서 — 건축 모델링 뷰어 ★1, AXOracle ★2, Semiclass 챗봇 ★3. 발화 포인트 (영상 전): 용어 풀어쓰기 (청중 표정 굳을 때만): - Vercel = "앱을 인터넷에 올려주는 곳" - Supabase = "데이터를 저장해주는 곳" - 웹소켓 = "실시간 채팅 기술" - API = "AI한테 매번 물어보고 답 받는 통로" 영상 끝난 후: 시연/액션: 3개 카드 순차 재생. AXOracle은 후반 #35에서 한 번 더 — 중복 의식. ➜ 전환: "마지막, Level 3 — 사람처럼 일하는 AI." 주의: - 코드 화면 ≤15초. 자막 "이 코드는 자동 생성, 보실 필요 없어요" - 보안 자막 5초 "민감한 데이터는 자체 서버·사내망 구성으로 설계 가능" (가능형 톤) - AXOracle을 후반 SAX/Incubator 섹션에서 중복 노출하면 KPI 한 문장으로만 반복 영상 소스: ot-deck/demo-kit/recording/03-level2-script.md [풀 스크립트] > Level 2는 "나만의 서비스 만들기"입니다. > 첫 번째는 건축 모델링 뷰어예요. 원하는 공간이나 건물 구조를 말로 설명하면, 회전하고 살펴볼 수 있는 3D 화면이 만들어집니다. 이건 아이디어를 눈앞에 보이게 만드는 가장 쉬운 예시입니다. > 두 번째는 AXOracle입니다. 여기서는 만든 앱을 인터넷에 올리고, 데이터까지 저장해서 실제 서비스처럼 운영하는 단계로 갑니다. > 세 번째는 Semiclass 챗봇입니다. 여러분이 사무실에 오면서 쓸 수 있는 그 봇처럼, 실시간 채팅, AI 답변, 슬랙 알림, 대화 저장이 한 번에 연결됩니다. > 어려운 코드를 외우자는 게 아닙니다. 내가 만들고 싶은 서비스의 흐름을 말로 정리하고, AI와 함께 실제 화면과 기능으로 바꾸는 경험이 Level 2의 핵심입니다. --><!-- _class: demo -->
<img src="assets/icons/clipboard-list-blue.svg" class="i-lg"> Level 3 — AI 업무 에이전트 만들기
사람 동료처럼 — 회의 정리부터 1인 사장 운영까지 에이전트가 일하는 실제 사례
<div class="demo-sections"> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level3-meeting.svg" playsinline> <source src="assets/videos/level3-01-meeting-adhoc.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 1분 36초</div> </div>① 회의 처리 에이전트 <small>· meeting-adhoc</small>
<p>녹음 파일 1개 → AI가 듣고 요약 + 회의록 작성 + 슬랙 알림까지 전부 자동.</p> <div class="demo-meta"><span>녹음 1개</span><span>요약·회의록</span><span>슬랙 알림</span></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level3-semo-agents.jpg" playsinline> <source src="assets/videos/level3-02-semo-agents.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 2분 17초</div> </div>② SEMO Agents <small>· 팀 동료처럼</small>
<p>팀에 AI 동료 7명. 슬랙으로 서로 일을 부탁하고 받으며 — 사람 동료처럼 협업합니다.</p> <div class="demo-meta"><span>7개 에이전트</span><span>자율 협업</span></div> </div> <div class="demo-segment"> <div class="demo-segment-video"> <video controls preload="metadata" poster="assets/thumb-level3-mark-bikeshop.jpg" playsinline> <source src="assets/videos/level3-03-mark-bikeshop.mp4" type="video/mp4"> </video> <div class="demo-segment-label"><span class="demo-play"></span> 약 53초</div> </div>③ 마크의 바이크샵 <small>· 1인 사장 AX</small>
<p>고객 응대·SNS·세무·부품 주문·시장 조사 — 1인 사장이 5가지 업무를 에이전트에게.</p> <div class="demo-meta"><span>고객관리</span><span>마케팅</span><span>세무·발주</span></div> </div> </div> <!-- [요약] [#10 · Level 3 데모 | 00:12–00:13 · 1분 예고] 핵심: 에이전트가 사람처럼 일하는 실제 사례 3 — 회의·팀협업·1인 사장. 발화 포인트: - ① meeting-adhoc — 녹음 1개 → 요약 + 회의록 + 슬랙 알림 - ② SEMO Agents — 7명 AI 동료가 슬랙으로 서로 일 주고받음 - ③ 마크 바이크샵 — 1인 사장이 5가지 업무(고객/마케팅/세무/발주/조사)를 에이전트에게 시연/액션: 15-20초씩 빠른 예고. 길게 재생 X. ➜ 전환: "여기까지 4단계 데모 — 클래스 결과물 지도였어요." 주의: - "오픈클로" 처음 등장 → "에이전트 운영 도구" 한 번 풀어 설명 - 사례 ③ 마크 = "Reus 지인의 미국 바이크샵 사장님" (질문 들어오면) - L2와 구분: "L2가 사람이 쓰는 서비스 만들기, L3는 에이전트가 사람처럼 일을 받아 처리" 영상 소스: ot-deck/demo-kit/recording/06-l3-agent-guide.md [풀 스크립트] > Level 3는 에이전트입니다. > 여기서 말하는 에이전트는 그냥 챗봇이 아니라, 사람처럼 일을 받아서 다음 행동까지 이어가는 AI라고 보시면 됩니다. > 회의 녹음을 받으면 요약하고, 슬랙에 알리고, 자료를 남깁니다. > 팀 안에서는 여러 AI 동료가 서로 일을 나눠서 처리하기도 하고, 1인 사장님은 고객 응대, 마케팅, 세무, 발주 같은 일을 도우미에게 맡길 수도 있어요. > 오늘은 깊게 파고들진 않고, "AI가 답변만 하는 단계에서 일을 처리하는 단계로 넘어간다"는 감각만 잡아주시면 됩니다. --><!-- _class: content -->
방금 보신 데모는 세미클래스 3트랙 지도입니다
가볍게 경험하고, 필요하면 깊게 들어갑니다
<div class="three-col"> <div class="card accent path-card">OT
<strong>OT</strong>
<p>가볍게 경험하고, 내가 어디서 시작하면 좋을지 방향을 잡습니다.</p> <div class="path-time">입문 · 방향 잡기</div> </div> <div class="card accent path-card">비정기 클래스
<strong>비정기 클래스</strong>
<p>정해진 주제를 깊게 다루는 단발 수업. 필요한 주제만 골라 듣습니다.</p> <div class="path-time">주제별 단발 수업</div> </div> <div class="card accent path-card">정기 클래스
<strong>정기 클래스</strong>
<p>내 서비스나 업무 도구를 실제로 완성하는 과정. 기획부터 배포까지 함께 갑니다.</p> <div class="path-time">서비스 1개 출시까지</div> </div> </div><!-- [요약] [#11 · 세미클래스 3트랙 지도 | 00:12] 핵심: 방금 본 데모 = OT / 비정기 클래스 / 정기 클래스 운영 지도. 청중 머리에 "내가 어느 트랙으로 가면 되는지" 그림 박기. 발화 포인트: - 3-column 카드 손가락으로 짚으며: OT=방향 잡기, 비정기=주제별 단발, 정기=서비스 출시까지 - 핵심 한 줄: 데모 레벨이 아니라 실제 참여 트랙을 설명 ➜ 전환: "그 전에 — 오늘 오신 분들 한 분씩 짚고 갈게요." 주의: Class 가격 멘트 X(금액 노출은 배너로만). 결과물 지도로만 frame. 참고: Yeonist 정의 — 에이전트는 프롬프트가 아니라 업무 운영 단위 (권한/도구/파일/능동 트리거/승인 흐름). [풀 스크립트] > 방금 보신 데모는 그냥 쇼케이스가 아닙니다. > 세미클래스에 어떻게 참여하면 되는지 보여주는 지도입니다. > OT는 가볍게 경험하고 방향을 잡는 자리입니다. 내가 AI를 어디에 적용하면 좋을지 보는 시간이죠. > 비정기 클래스는 정해진 주제를 깊게 다루는 단발 수업입니다. 보고서, 제품 영상 생성, 바이브코딩처럼 필요한 주제만 골라 들을 수 있습니다. > 정기 클래스는 내 서비스나 업무 도구를 실제로 완성하는 과정입니다. 기획하고, 만들고, 배포하고, 데이터까지 연결하면서 서비스 1개 출시를 목표로 갑니다. -->OT는 방향을 잡고, 비정기 클래스는 필요한 주제를 배우고, 정기 클래스는 내 서비스를 끝까지 만드는 흐름입니다.
<!-- _class: content -->
오늘 OT에 참여해주신 여러분 반갑습니다
왕초보부터 업무에 AI를 적극적으로 쓰고 계신 분까지 — 각자 시작점은 달라도 괜찮습니다
<div class="participant-layout"> <div class="participant-roster"> <div class="person-pill"><strong>AI 첫걸음</strong><span>ChatGPT를 어디서부터 써야 할지 감 잡기</span></div> <div class="person-pill"><strong>일상 활용</strong><span>사진·일정·가족·취미 같은 작은 일에 적용하기</span></div> <div class="person-pill"><strong>업무 보조</strong><span>메일·요약·자료 정리·반복 업무 줄이기</span></div> <div class="person-pill"><strong>콘텐츠 제작</strong><span>보고서·포스터·이미지·영상 결과물 만들기</span></div> <div class="person-pill"><strong>업무 자동화</strong><span>매번 하던 일을 흐름으로 묶어 자동화하기</span></div> <div class="person-pill"><strong>바이브코딩</strong><span>아이디어를 작은 웹앱·도구로 직접 구현하기</span></div> <div class="person-pill"><strong>AI 에이전트</strong><span>AI가 일을 받아 진행하고 결과를 남기게 만들기</span></div> <div class="person-pill"><strong>서비스 출시</strong><span>실제로 쓰는 챗봇·대시보드·운영 도구로 확장하기</span></div> <div class="person-pill"><strong>도구 선택</strong><span>GPT·Claude·Gemini·영상/디자인 도구를 목적별로 고르기</span></div> <div class="person-pill"><strong>내 업무 적용</strong><span>내 상황에 맞는 첫 과제와 다음 수업 찾기</span></div> <div class="person-pill"><strong>현장 Q&A</strong><span>오늘 자리에서 막힌 지점을 구체적으로 풀기</span></div> </div> <div class="participant-board"> <div class="participant-stat"> <div><strong>0→1</strong><span>AI 첫 습관 만들기</span></div> <div><strong>1→10</strong><span>업무·콘텐츠에 적용하기</span></div> <div><strong>10→100</strong><span>자동화·서비스로 키우기</span></div> </div> <div class="interest-card"> <h3>먼저 바로 써먹기</h3> <p>일상 질문, 사진 활용, 자료 정리처럼 오늘 끝나고 바로 해볼 수 있는 사용법부터 잡습니다.</p> </div> <div class="interest-card"> <h3>결과물로 만들기</h3> <p>보고서, 이미지, 제품 영상, 간단한 웹앱처럼 눈에 보이는 산출물로 이어가는 방법을 봅니다.</p> </div> <div class="interest-card"> <h3>내 일에 연결하기</h3> <p>Q&A 때는 “저는 이런 일을 하는데…”로 시작해주세요. 각자 상황에 맞는 다음 액션까지 좁혀보겠습니다.</p> </div> </div> </div> <!-- [요약] [#12 · OT 참여자 환영 | 00:12–00:13 · 1분] 핵심: 특정 cohort 숫자 대신, 다양한 수준의 참여자가 각자 시작점을 찾는다는 메시지. 발화 포인트: - 왕초보부터 이미 AI를 쓰는 분까지 모두 들어올 수 있다는 점 - 오늘은 수준 평가가 아니라 내 시작점 찾기 - Q&A는 개인 상황 중심으로 받기 ➜ 전환: "이제 본격적으로 — 데모 보시고 '이거 뭐야?' 싶으셨다면, 오해부터 정리할게요." 주의: - 특정 참여자 수, 첫 OT, 실명 호명, 특정 cohort 관심사 수치 언급 X - 여러 cohort에서 재사용 가능한 톤 유지 [풀 스크립트] > 오늘 OT에 참여해주신 여러분, 반갑습니다. > 여기에는 AI가 처음인 분도 있고, 이미 업무에 적극적으로 써보고 계신 분도 있을 수 있습니다. > 괜찮습니다. 오늘은 누가 더 잘 쓰는지 비교하는 시간이 아니라, 각자 어디서부터 시작하면 되는지 찾는 시간입니다. > 일상에 바로 적용하는 작은 사용법부터, 보고서와 영상 같은 결과물, 나중에는 자동화와 서비스까지 이어지는 흐름을 보여드릴게요. > Q&A 때는 "저는 이런 일을 하는데..."로 시작해주시면 좋습니다. 개인 상황이 구체적일수록 답도 훨씬 구체적으로 드릴 수 있습니다. --><!-- _class: section --> <img src="assets/icons/sparkles-blue.svg" class="divider-icon">
먼저 오해부터
데모 보고 '이거 뭐야?' 싶으셨나요?
본격적으로 배우기 전에, AI에 대한 오해부터 정리할게요.
<!-- [요약] [#13 · 오해 디바이더 | 00:13] 핵심: 데모 → 오해 정리 섹션으로 분위기 전환. 발화 포인트: - (3초 쉼) ➜ 전환: 자동 진행 (다음 슬라이드 즉시) 주의: 5초 이상 멈추지 X. 청중 텐션 유지. [풀 스크립트] > 여기까지 보시면 두 가지 반응이 같이 나올 수 있어요. > 하나는 "와, 신기하다"이고, 다른 하나는 "근데 이거 진짜 믿어도 되나?"일 겁니다. > 그래서 바로 커리큘럼으로 넘어가기 전에, AI를 둘러싼 오해부터 정리하고 가겠습니다. > 오해를 걷어내야 배우는 동안 마음이 가벼워지고, 어디까지 기대해도 되는지 기준이 생깁니다. --><!-- _class: content -->
AI가 잘하는 것 vs 못하는 것
<div class="two-col"> <div class="card accent"><img src="assets/icons/check-circle-blue.svg" class="i-md"> 잘하는 것
<div class="vs-shot vs-shot--example minji-reference-shot"> <div class="minji-example-grid"> <div class="minji-profile-panel"> <img src="assets/minji-profile-reference.png" class="deck-lightbox-trigger" data-lightbox="true" alt="김민지씨 프로필 레퍼런스 이미지"> <span class="minji-panel-label">김민지씨 레퍼런스</span> </div> <div class="minji-output-panel"> <img src="assets/minji-generated-lecture-examples.png" class="deck-lightbox-trigger" data-lightbox="true" alt="김민지씨 프로필 이미지를 레퍼런스로 생성한 다양한 강의 이미지 예시"> <span class="minji-panel-label">레퍼런스로 만든 강의 이미지</span> </div> </div> </div> <p class="vs-cap"><strong>실제 예 · 잘하는 것</strong> — 김민지씨 프로필 이미지를 레퍼런스로 삼아, <strong style="color: var(--c-blue-bright);">강의용 장면 이미지를 여러 버전</strong>으로 빠르게 만들 수 있습니다.</p>- 글 초안·요약·번역
- 반복 작업 자동화
- 아이디어 발산
- 코드 · 이미지 · 영상 생성
<img src="assets/icons/x-circle-white.svg" class="i-md"> 못하는 것 (아직)
<div class="vs-shot"> <img src="assets/carwash-chatgpt-fail.png" class="deck-lightbox-trigger" data-lightbox="true" alt="세차장이 집에서 100m, 걸어갈까 차 타고 갈까 물었더니 ChatGPT가 '무조건 걸어가는 게 낫습니다'라고 답한 화면 — 목적지가 세차장이라 차가 필요하다는 맥락을 놓침"> </div> <p class="vs-cap"><strong>실제 예 · 못하는 것</strong> — "세차장 100m, 걸어? 차?" → <strong style="color: var(--c-blue-bright);">"무조건 걸어가는 게 낫습니다 😄"</strong> <span style="opacity:.55;">· 클릭하면 확대</span></p>- 최신 정보 100% 정확
- 복잡한 감정 판단
- 긴 맥락 완벽 기억
- 도구 없이 정밀 계산
<!-- [요약] [#14 · 잘하는것 vs 못하는것 | 00:13–00:15 · 2분] 핵심: AI = 만능 X, 사기 X — 능숙 영역과 약한 영역 명확히 구분. 발화 포인트: - 좌측 (잘하는 것 4): 글 초안·요약·번역, 반복 자동화, 아이디어 발산, 코드·이미지·영상 생성 - 우측 (못하는 것 — 아직 4): 최신 정보 100%, 복잡한 감정 판단, 긴 맥락 완벽 기억, 도구 없이 정밀 계산 - 핵심 한 줄: "AI는 대체가 아니라 증폭이에요" ➜ 전환: "그럼 첫 번째 큰 오해 — '일자리 뺏는다' 부터." 주의: - "AI = 만능"으로 부풀리지 X - "AI = 사기"로 깎지 X - 우측 "(아직)" 단서 강조 — 1년 후엔 바뀔 수 있음 [풀 스크립트] > AI가 잘하는 일과 못하는 일을 먼저 나눠보겠습니다. > 왼쪽에 있는 글 초안, 요약, 번역, 반복 자동화, 아이디어 발산, 코드나 이미지 생성은 지금 당장 시켜도 꽤 잘합니다. > 반대로 오른쪽처럼 최신 정보를 100% 보장하거나, 복잡한 감정 판단을 대신하거나, 긴 맥락을 완벽하게 기억하거나, 도구 없이 정밀 계산을 하는 건 아직 조심해야 해요. > 그래서 AI는 사람을 완전히 대체하는 마법 상자가 아니라, 잘 쓰면 내 일을 증폭시키는 파트너에 가깝습니다. > 왼쪽은 바로 시키고, 오른쪽은 검토하면서 같이 일한다. 이 기준만 잡아도 훨씬 안전하게 쓸 수 있습니다. -->왼쪽은 지금 당장 시키면 됩니다. 오른쪽은 '도와주는 파트너'로. AI는 대체가 아니라 증폭이에요.
<!-- _class: content -->
오해 1 — "AI가 일자리를 뺏는다"
현실 · AI를 쓰는 사람이, 안 쓰는 사람의 일을 가져갑니다
<div class="two-col"> <div class="card"><img src="assets/icons/x-circle-white.svg" class="i-md"> 틀린 프레임
AI vs 사람 "기계가 사람을 대체"
</div> <div class="card accent"><img src="assets/icons/check-circle-blue.svg" class="i-md"> 맞는 프레임
AI 쓰는 사람 vs AI 안 쓰는 사람 "옆팀이 내 일을 가져감"
</div> </div> <div class="reference-case job-shift-case"> <div class="card accent reference-case-card"> <div class="reference-case-copy"> <h3>현실 참고: AI 활용 격차가 팀 내 갈등이 됩니다</h3> <p>한 팀 안에서도 AI를 잘 쓰는 사람은 업무를 빠르게 끝내고, 못 쓰는 사람은 같은 일에 더 오래 매달리게 됩니다.</p> <ul> <li><strong>예:</strong> 산출물 속도·퀄리티 차이가 커지며 “왜 나는 더 오래 걸리지?”라는 불만이 생김</li> <li><strong>교훈:</strong> 개인 역량 차이로 방치하지 말고, 팀 차원의 사용법·공유 룰을 맞춰야 함</li> </ul> </div> <div class="reference-case-visual"> <img src="assets/prompt-hoarding-no-share.png" class="prompt-hoarding-shot deck-lightbox-trigger" data-lightbox="true" alt="프롬프트를 공유하지 않겠다는 신입 구성원의 이미지 밈"> </div> <div class="reference-case-visual"> <img src="assets/prompt-sharing-context.png" class="prompt-context-shot deck-lightbox-trigger" data-lightbox="true" alt="프롬프트 공유를 둘러싼 팀원 간 대화 사례 텍스트"> </div> </div> </div><!-- [요약] [#15 · 오해 1: 일자리 | 00:15–00:17] 핵심: AI vs 사람 (틀림) → AI 쓰는 사람 vs AI 안 쓰는 사람 (맞음). 발화 포인트: - 틀린 프레임: "AI vs 사람" — 기계가 사람을 대체 - 맞는 프레임: "AI 쓰는 사람 vs AI 안 쓰는 사람" — 옆팀이 내 일을 가져감 - 인용: "저는 AI가 제 일을 뺏을까봐 걱정 안 해요. **AI 잘 쓰는 옆팀이 내 일을 가져갈까봐** 걱정하죠" ➜ 전환: "두 번째 오해 — 'AI는 인간을 속이려 든다' — 가장 자주 듣는 말." 주의: - 청중 자기 일자리 불안 자극하지 X — "이미 이렇게 되고 있다, 그러니 같이 쓰자" 톤 - 오프라인 감정선: 불안 X, 동기부여 ○ [풀 스크립트] > 첫 번째 오해는 "AI가 일자리를 뺏는다"입니다. > 저는 이 질문을 조금 다르게 봐야 한다고 생각해요. > 진짜 프레임은 AI 대 사람이 아닙니다. AI를 쓰는 사람과 AI를 안 쓰는 사람의 차이에 가깝습니다. > 같은 보고서를 만들어도 한 사람은 3시간 걸리고, 다른 사람은 AI로 초안을 만들고 20분 동안 검토해서 끝낸다면, 조직에서는 후자에게 더 많은 일이 갈 수밖에 없습니다. > 그래서 저는 AI가 제 일을 뺏을까 봐 걱정하지 않습니다. 오히려 AI를 잘 쓰는 옆팀이 내 일을 가져갈까 봐 걱정하죠. > 오늘 우리가 배우려는 건 공포가 아니라 대응입니다. 내 일을 AI와 같이 처리하는 쪽으로 빨리 넘어가자는 이야기입니다. -->저는 AI가 제 일을 뺏을까봐 걱정하지 않아요. 'AI 잘 쓰는 옆팀이 내 일을 가져갈까봐' 걱정하죠.
<!-- _class: content -->
오해 2 — "AI는 인간을 속이려 든다"
현실 · 쓰는 법에 따라 거짓말도 합니다 — 안 하게 묻고, 받은 뒤 한 번 더 보면 됩니다
<div class="hallucination-layout"> <div> <p class="hallucination-cap"><span>나쁜 예</span> · 없는 사건도 자신 있게 지어냄</p> <img src="assets/sejong-macbook-hallucination.svg" class="hallucination-shot deck-lightbox-trigger" data-lightbox="true" alt="세종대왕 맥북프로 던짐 사건에 대해 AI가 그럴듯하게 거짓 답변을 하는 예시"> </div> <div> <p class="hallucination-cap"><span>좋은 예</span> · 먼저 존재 여부를 확인하고 멈춤</p> <img src="assets/joseon-transformer-grounded.svg" class="hallucination-shot deck-lightbox-trigger" data-lightbox="true" alt="존재하지 않는 논문을 확인한 뒤 없다고 답하는 할루시네이션 방지 예시"> </div> </div> <div class="hallucination-rule"> <div class="card accent">왜 위험하냐면
<p>말투가 자연스러워도 사실이라는 뜻은 아닙니다. 없는 사건·논문도 그럴듯하게 나올 수 있어요.</p> </div> <div class="card"><img src="assets/icons/shield-check-blue.svg" class="i-md"> 그래서 두 단계
<p><strong>Before</strong> 근거·공식 자료 기준 요청 → <strong>After</strong> 링크 확인 + 다른 AI 크로스체크</p> </div> </div><!-- [요약] [#16 · 오해 2: 거짓말 | 00:17–00:19] 핵심: 거짓말도 함 — 안 하게 묻고, 받은 뒤 검증하면 됨 (OT/AI 기초 비정기 클래스의 기본기). 발화 포인트: - 세종대왕 맥북프로 예시: "이 정도로 그럴듯하게 지어낼 수 있다" - Joseon Transformer Alignment 예시: "요즘 모델은 존재 여부 확인을 먼저 시키면 잘 멈추기도 한다" - Before (안 하게 묻기 2): 출처 물어보기 ("이 정보 어디서? 근거 링크 줘"), 소스 첨부 유도 ("원문/논문/공식 사이트 링크 포함") - After (받은 뒤 검증 2): 링크 직접 확인, 다른 AI(Claude·Gemini) 크로스체크 - 핵심 한 줄: "AI가 틀린 말 하는 건 — 쓰는 사람이 어떻게 묻고 어떻게 받는지에 달려있음" ➜ 전환: "그럼 진짜 마법인지 사기인지, 한 줄로 정리해볼게요." 주의: - "AI 무조건 믿어라"도 X, "AI 다 거짓말"도 X — 중립 - 환각 = "환각" 단어 직접 안 써도 OK. "거짓말"이 일반인 친화적 - OT 이후 AI 기초 비정기 클래스에서 다룰 기본기임을 짧게 언급 [풀 스크립트] > 두 번째 오해는 "AI는 인간을 속이려 든다"입니다. > 이 말도 반은 맞고 반은 틀립니다. AI는 실제로 틀린 말을 할 수 있습니다. 없는 사건이나 없는 논문도 그럴듯하게 말할 때가 있어요. > 왼쪽 예시는 그런 나쁜 예입니다. 말투가 자연스럽다고 해서 사실이라는 뜻은 아닙니다. > 그런데 오른쪽처럼 먼저 존재 여부를 확인하게 하고, 근거를 요구하면 요즘 모델은 없는 건 없다고 멈추는 경우도 꽤 많아졌습니다. > 핵심은 두 단계입니다. 묻기 전에는 근거와 공식 자료 기준으로 답하라고 요청하고, 받은 뒤에는 링크를 직접 확인하거나 다른 AI로 한 번 더 크로스체크하는 겁니다. > AI가 틀린 말을 하는 건 도구 자체의 문제이기도 하지만, 우리가 어떻게 묻고 어떻게 받는지에 따라 크게 달라집니다. 이건 OT 이후 AI 기초 비정기 클래스에서 가장 먼저 다룰 기본기입니다. -->AI가 틀린 말을 하는 건 쓰는 사람이 어떻게 묻고 어떻게 받는지에 달려 있어요.
<!-- _class: quote -->
그럼에도 여전히,
질문에 따라 잘못된 답을 받을 수 있어요
없는 조항을 “있는 것처럼” 물으면, AI도 가끔 전제를 받아버립니다
<div class="verification-layout"> <div> <p class="verification-cap"><span>실패 예</span> · 없는 조항을 있는 것처럼 전제</p> <img src="assets/pipa-fake-clause-answer.svg" class="verification-shot deck-lightbox-trigger" data-lightbox="true" alt="존재하지 않는 조항을 있는 것처럼 설명하는 AI 답변 예시"> </div> <div> <p class="verification-cap"><span>검증 예</span> · 실제 법령에는 해당 조항 없음</p> <img src="assets/pipa-clause-verification.svg" class="verification-shot deck-lightbox-trigger" data-lightbox="true" alt="국가법령정보센터 검색으로 해당 조항이 확인되지 않는다는 검증 예시"> </div> </div> <p class="source-note">확인 기준: 국가법령정보센터 검색 결과. 비슷한 표현은 다른 법령 쪽에서 확인됨.</p> <!-- [요약] [#17 · 오해 2 보강: 그럼에도 여전히 | 00:19] 핵심: 요즘 모델은 좋아졌지만, 질문 안에 틀린 전제를 넣으면 여전히 따라갈 수 있음. 발화 포인트: ➜ 전환: "그러니까 AI는 마법도 허상도 아니고, 쓰는 법의 차이입니다." 주의: 법률 조언처럼 말하지 말고, 검증 습관 예시로만 사용. [풀 스크립트] > 앞 슬라이드의 맥북 예시는 AI가 그럴듯하게 지어내는 나쁜 경우였고, 논문 예시는 요즘 모델이 먼저 확인하고 멈추는 좋은 경우였습니다. > 그런데 그럼에도 여전히 조심해야 할 때가 있습니다. > 법령처럼 그럴듯한 번호와 항의 제목을 섞어서 물으면, AI가 그 전제를 받아들여 마치 있는 조항처럼 설명할 수 있습니다. > 그래서 법률, 세무, 의료, 계약처럼 틀리면 비용이 큰 영역에서는 반드시 원문 링크를 확인해야 합니다. > 이건 법률 조언이 아니라 검증 습관의 예시로 봐주세요. AI가 좋아졌어도 질문 안에 틀린 전제가 들어가면 답도 같이 틀어질 수 있습니다. --><!-- _class: content -->
오해 3 — "AI는 미래 기술이다"
현실 · 이미 같은 업종 직장인들이 이렇게 쓰고 있어요
<div class="three-col"> <div class="card accent case-card"> <img src="assets/slide18-seo-marketing.png" class="case-thumb deck-lightbox-trigger" data-lightbox="true" alt="AI로 마케팅과 SEO를 자동화하는 마케터"><img src="assets/icons/sparkles-blue.svg" class="i-md"> SEO·마케팅 자동화
보고서 3시간 → 10초 SEO 외주 월 800만 → 0원 상품 진단 30분 → 3초
</div> <div class="card accent case-card"> <img src="assets/slide18-seven-perspectives.png" class="case-thumb deck-lightbox-trigger" data-lightbox="true" alt="기획자가 봇들과 협업해 여러 관점에서 프로젝트를 기획하는 장면"><img src="assets/icons/bot-blue.svg" class="i-md"> 여러 관점 한 번에 보기
제품 기획 시 7가지 관점으로 점검 설계안 토론 → 완성도 ↑ 리서치+기획+보고서 자동화
</div> <div class="card accent case-card"> <img src="assets/slide18-product-monitoring.png" class="case-thumb deck-lightbox-trigger" data-lightbox="true" alt="AI로 700개 제품을 모니터링하고 관리하는 담당자"><img src="assets/icons/video-blue.svg" class="i-md"> 제품 모니터링
700개 제품 10시간 → 1분 재고·매출·이슈 자동 감지 이메일 알림까지
</div> </div><!-- [요약] [#18 · 오해 3: 미래기술 | 00:20–00:21 · 30초] 핵심: 이미 같은 업종 직장인이 쓰고 있음 — 3가지 사례 (실제 데이터). 발화 포인트: - SEO·마케팅 자동화: 보고서 3시간→10초, SEO 외주 800만→0원, 상품 진단 30분→3초 - 여러 관점 한 번에: 7가지 관점 자동 검토, 설계안 토론 → 완성도 ↑ - 제품 모니터링: 700개 제품 10시간→1분, 재고·매출·이슈 자동 감지 ➜ 전환: "한 가지 현장 적용 사례만 더 보고 넘어갈게요." 주의: - 회사명 익명화 — "국내 대기업" 톤 유지 (Codex 리뷰 반영) - KB 내부엔 실명 유지: semiclass/material/amorepacific-hackathon-cases-2026-04-27 - 청중 질문 "어디 회사예요?" → "공개되어 있는 자료라 익명화만 했어요" 한 줄 [풀 스크립트] > 마지막 오해는 "AI는 미래 기술이다"입니다. > 그런데 이미 같은 업종의 직장인들이 이렇게 쓰고 있습니다. > 마케팅과 SEO 자동화는 보고서 작성 시간을 3시간에서 10초 수준으로 줄이고, 외주로 맡기던 SEO 작업을 내부에서 처리하는 방식으로 바뀌고 있습니다. > 제품 기획에서는 한 사람이 놓치기 쉬운 사용자, 시장, 비즈니스, 기술, 운영, 디자인, 데이터 관점을 AI와 함께 한 번에 점검합니다. > 제품 모니터링도 마찬가지입니다. 700개 제품을 사람이 10시간 동안 보는 대신, AI가 재고, 매출, 이슈를 감지하고 담당자에게 알림까지 보낼 수 있습니다. > 이건 먼 미래 이야기가 아니라 국내 대기업 사내 바이브코딩 해커톤과 실제 운영 사례에서 이미 나온 흐름입니다. > 한 가지 현장 적용 사례만 더 보고 넘어가겠습니다. -->출처: 국내 대기업 사내 바이브코딩 해커톤 (2026) "+ 정치판 쇼츠 채널 (외부) · 세미콜론 팀 음소거 자동화 (내부) — 매일 굴러가는 사례"
<!-- _class: section --> <img src="assets/icons/door-open-blue.svg" class="divider-icon">
이제 여러분 차례
3가지 마음의 벽부터 허물고 갑시다
오늘 소개할 AI 활용법과 저희 팀의 서비스들을 어떻게 받아들일지는, 이 3가지 마음의 벽을 먼저 정리하고 보시면 달리 보여요.
<!-- [요약] [#20 · 마음의 벽 디바이더 | 00:21] 핵심: 오해 → 마음의 벽 섹션 전환. 청중 자기검열 풀기 시작. 발화 포인트: ➜ 전환: 자동 진행 주의: 분위기 가벼워지게. "벽" 단어가 무겁지 않도록 톤 조정. [풀 스크립트] > 이제 큰 오해는 정리했습니다. > 그런데 오해가 사라져도 바로 시작이 안 되는 경우가 있습니다. > "나는 컴퓨터를 잘 못해서", "이미 늦어서", "내 일에는 안 맞을 것 같아서" 같은 마음의 벽이 남아 있기 때문입니다. > 지금부터는 그 세 가지를 짧게 정리하겠습니다. > 이 벽만 내려놓으면, 오늘 본 데모가 남의 이야기가 아니라 내 일에 적용할 수 있는 선택지가 됩니다. --><!-- _class: content -->
<img src="assets/icons/gauge-blue.svg" class="i-lg"> 벽 ① — "난 문과라서 못해요 / 소프트웨어 지식이 없어서 못해요"
AI 시대에는 모두가 서로의 언어를 조금씩 배워야 합니다
<div class="two-col cross-skill-layout"> <div class="card"> <img class="role-infographic" src="assets/wall1-engineer-domain.jpeg" alt="사람을 만나 실제 도메인의 문제를 이해하고 코드로 연결하는 엔지니어 이미지"><img src="assets/icons/code-blue.svg" class="i-md"> 엔지니어에게 필요한 것
- 사람들을 만나고 실제 도메인의 문제 이해하기
- 고객·시장·운영 맥락 직접 마주하기
- 숫자와 코드 밖의 문과적 지식 → 문제를 보는 힘
<img src="assets/icons/message-circle-blue.svg" class="i-md"> 비엔지니어에게 필요한 것
- AI와 대화하며 구조를 잡기
- 필요한 걸 직접 만들며 배우기
- 자연스럽게 익히는 엔지니어링 지식 → 더 나은 결과물을 만드는 힘
<!-- [요약] [#21 · 컴퓨터 | 00:21–00:24] 핵심: 문과/이과, 엔지니어/비엔지니어 구분보다 각자의 강점을 AI 시대에 맞게 확장하는 게 중요. 발화 포인트: - 엔지니어도 코드만 잘한다고 충분하지 않음. 사람들을 만나 실제 도메인의 문제와 고객·시장·운영 맥락을 이해해야 함 - 비엔지니어도 "나는 소프트웨어 몰라서 못 한다"에서 멈출 필요 없음. AI를 활용해 필요한 걸 만들면서 엔지니어링 지식을 자연스럽게 습득하고 더 나은 결과물을 만들 수 있음 - 핵심 한 줄: "전공·성별·연령이 아니라 내 강점을 AI 시대의 언어로 바꾸는지가 중요" ➜ 전환: "두 번째 벽 — '이미 늦었다'." 주의: - 문과/비엔지니어를 낮춰 말하지 않기. 각자 반대편 역량을 보완한다는 톤 - 성별·연령·학과를 가르는 이야기가 아니라, 모두가 변해야 한다는 메시지로 정리 [풀 스크립트] > 첫 번째 마음의 벽은 "난 문과라서 못해요", 또는 "소프트웨어 지식이 없어서 못해요"라는 생각입니다. > 그런데 AI 시대에는 이 구분이 점점 덜 중요해집니다. > 엔지니어도 코드만 잘한다고 충분하지 않습니다. 사람들을 만나고, 실제 도메인의 문제를 이해하고, 고객과 시장과 운영의 맥락을 경험해야 합니다. 말하자면 문과적 지식이 더 필요해집니다. > 반대로 비엔지니어도 소프트웨어 지식이 없다고 멈출 필요가 없습니다. AI를 활용해 필요한 걸 직접 만들면서, 엔지니어링 지식을 자연스럽게 습득하고 더 나은 결과물을 만들 수 있습니다. > 결국 모든 사람이 각자의 강점을 살려 AI 시대에 맞는 사람으로 변해야 합니다. > 이 변화는 학과나 성별, 연령을 가리지 않습니다. 중요한 건 내가 이미 가진 강점을 AI 시대의 언어로 바꾸는 것입니다. -->중요한 건 전공이 아니라, 내 강점을 AI 시대의 언어로 바꾸는 것입니다.
<!-- _class: content -->
<img src="assets/icons/calendar-clock-blue.svg" class="i-lg"> 벽 ② — "이미 늦었어요. 따라가기 벅차요"
현실 · 지금 AI 팔로워는 모두가 비기너입니다.
<div class="distance-stage" role="button" tabindex="0" aria-label="여러분이 느끼는 심리적 거리와 AI 산업 전체 기준 현실을 전환해서 보기"> <div class="distance-stage-title"> <span class="felt">여러분이 느끼는 심리적 거리</span> <span class="reality">현실</span> <span class="hint">마우스 올리면 현실 관점</span> </div> <div class="distance-track early"><span class="finish"></span> <div class="runner early" aria-hidden="true"><span class="tag">AI 얼리어답터</span><span class="head"></span><span class="body"></span><span class="arm-a"></span><span class="arm-b"></span><span class="leg-a"></span><span class="leg-b"></span></div> </div> <div class="distance-track you"><span class="finish"></span> <div class="runner you" aria-hidden="true"><span class="tag">여러분</span><span class="head"></span><span class="body"></span><span class="arm-a"></span><span class="arm-b"></span><span class="leg-a"></span><span class="leg-b"></span></div> </div> <div class="distance-perspective-label">AI 산업 전체 기준으로 보면 둘 다 출발선 근처</div> </div> <div class="three-col beginner-cards"> <div class="card"><img src="assets/icons/trending-up-blue.svg" class="i-md"> 늦은 사람 없음
ChatGPT 나온 지 3년. 매주 새 모델·서비스가 나와서, 먼저 시작한 사람도 매일 재학습합니다.
</div> <div class="card"><img src="assets/icons/message-circle-blue.svg" class="i-md"> 다 외울 필요 없음
오래 일한 사람도, AI 많이 쓰는 사람도 전부 다는 못 씁니다. 중요한 건 내 일에 적용하는 기준입니다.
</div> <div class="card accent"><img src="assets/icons/shield-check-blue.svg" class="i-md"> 우리 클래스의 약속
속도 강요 안 해요. 본인 일·상황에 맞춰 천천히 같이 만듭니다. 어제보다 나은 오늘이면 OK.
</div> </div><!-- [요약] [#22 · 벽 ② 늦음 | 00:24–00:27] 핵심: 모두가 비기너. 쫓길 필요 없이 본인 속도로 "어제보다 나은 오늘"이면 충분. 발화 포인트: - 상단 인터랙티브 그래픽: 처음엔 얼리어답터가 멀리 앞서 보이지만, 클릭해 현실 관점으로 바꾸면 AI 산업 전체 트랙에서는 둘 다 출발선 근처라는 메시지 - ChatGPT 출시 = 2022년 11월 → 이제 3년 좀 넘음. 먼저 시작한 사람도 매일 재학습 - 오래 일한 사람·AI 많이 쓰는 사람도 전부 다는 못 씀 - 속도 강요 X, 본인 일·상황 맞는 환경을 천천히 같이 만든다는 약속 - 핵심 한 줄: "어떤 AI가 새로 나와도 바로 잡을 수 있는 근육 — 그게 우리가 가르치는 것" ➜ 전환: "세 번째 벽 — '내 일·나이엔 안 맞는다'." 주의: - "다들 늦었어요" 위로 톤 X → "지금이 가장 빠르다" 단호 톤 - 베테랑 없음 = 출발선 거의 같다는 메시지로 자기효능감 ↑ [풀 스크립트] > 두 번째 벽은 "이미 늦었다"는 생각입니다. > 그런데 사실 지금 AI 팔로워는 모두가 비기너에 가깝습니다. > 화면의 그래픽처럼, 우리 마음속에서는 먼저 시작한 사람이 저 멀리 앞서 달려가고, 나는 거의 제자리인 것처럼 느껴질 수 있습니다. 그런데 관점을 AI 산업 전체 트랙으로 넓히면, 아주 극소수를 제외하고는 모두가 출발선 근처에 있습니다. > ChatGPT가 대중적으로 나온 게 2022년 11월입니다. 이제 3년 조금 넘었고, 먼저 시작한 사람도 매주 새 모델과 새 서비스를 다시 배웁니다. > 오래 일한 사람도, AI를 많이 쓰는 사람도 전부 다는 못 씁니다. 그래서 쫓길 필요 없습니다. > 중요한 건 남보다 빨리 모든 걸 아는 게 아니라, 어제보다 오늘 내 일을 조금 더 잘 처리하는 겁니다. > 세미클래스도 그 속도로 갑니다. 빠르게 압박하는 수업이 아니라, 본인 일과 상황에 맞춰 하나씩 적용해보는 수업입니다. > 우리가 가르치는 건 특정 버튼이나 특정 서비스가 아니라, 어떤 AI가 새로 나와도 바로 잡을 수 있는 근육입니다. > 그러니까 늦었다고 생각하실 필요 없습니다. 오늘 시작하는 게 가장 빠른 시점입니다. --><span class="beginner-footer">우리가 가르치는 건 특정 도구가 아니라,<br>"어떤 AI가 새로 나와도 바로 잡을 수 있는 근육"</span>
<!-- _class: content -->
<img src="assets/icons/users-blue.svg" class="i-lg"> 벽 ③ — "제 일/나이엔 AI 안 맞아요"
1차 산업인 농업에도 이미 활용중이에요. 직업 · 나이보다 중요한 건 “어디에 적용할까”입니다.
<div class="age-proof-layout"> <div class="age-proof-copy"> <div class="three-col"> <div class="card">1차 산업도 이미
AI가 작물과 잡초를 구분하고, 잡초만 레이저로 제거합니다.
</div> <div class="card">방금 본 데모도
SNS 문구 · 엑셀 요약 · 사진 기반 추천까지 적용됐죠.
</div> <div class="card accent">결론
AI는 특정 직업 전용이 아니라 시간을 아껴주는 범용 도구입니다.
</div> </div></div> </div> <!-- [요약] [#23 · 나이/직업 | 00:27–00:30 · 3분] 핵심: “제 일/나이엔 안 맞아요”는 1차 산업인 농업 사례로도 반박 가능. AI는 직업 전용 도구가 아니라 시간을 아껴주는 범용 도구. 발화 포인트: - 1차 산업인 농업에서도 AI가 작물과 잡초를 구분하고, 잡초만 레이저로 제거하는 사례가 이미 있음 - 방금 본 데모도 SNS 문구·엑셀 요약·사진 기반 추천처럼 다양한 상황에 붙었음 - 핵심 한 줄: “제 일엔 안 맞아요”가 아니라 “내 일 어디에 적용할지”를 찾는 문제 ➜ 전환: "하나 더 — OT가 진행되는 지금도 AI는 진화하고 있어요." 주의: - “나이”를 직접 압박하지 말고 “직업·상황이 달라도 적용할 지점이 있다”로 완충 - 농업 사례는 “미래 기술”이 아니라 “이미 현장 적용” 메시지로 연결 [풀 스크립트] > 세 번째 벽은 "제 일이나 제 나이에는 AI가 안 맞아요"라는 생각입니다. > 이건 이렇게 반박할 수 있습니다. AI는 이미 1차 산업인 농업에서도 쓰이고 있습니다. > 아까 본 농업 로봇 사례처럼, 카메라로 작물과 잡초를 구분하고 잡초만 레이저로 제거하는 방식까지 나와 있습니다. > 그러니까 AI가 사무직이나 개발자만 쓰는 도구라는 생각은 이미 현실과 맞지 않습니다. > 방금 본 데모도 마찬가지입니다. SNS 문구, 엑셀 분석, 사진 기반 추천처럼 일상적인 일에도 적용할 수 있고, 보고서나 콘텐츠 업무에도 적용할 수 있습니다. > AI가 맞는 사람과 안 맞는 사람이 따로 있는 게 아니라, 내 상황에서 어디에 적용하면 시간을 아낄 수 있는지를 찾는 게 중요합니다. > 그래서 Q&A 때는 "저는 이런 일을 하는데 어디부터 시작하면 좋을까요?"처럼 질문해주시면, 최대한 여러분 상황에 맞춰 답하겠습니다. > 핵심은 "제 일엔 안 맞아요"가 아니라 "내 일 어디에 적용할지"입니다. --><span class="age-proof-footer">“제 일엔 안 맞아요”가 아니라, 내 일 어디에 적용할지를 찾으면 됩니다.</span>
<!-- _class: content -->
현장 적용 — AI가 잡초를 보고, 레이저로 제거합니다
텍스트 도구를 넘어, 카메라로 현실을 인식하고 물리적 행동까지 이어지는 사례
<div class="external-video-embed"> <div class="external-video-media"> <div class="external-video-kicker">World Economic Forum</div> <div class="external-video-title">This farm robot destroys 100,000 weeds an hour with lasers</div> <a class="external-video-thumb" href="https://www.weforum.org/videos/22446-this-farm-robot-destroys-100-000-weeds-an-hour-with-lasers/" target="_blank" rel="noopener noreferrer" aria-label="World Economic Forum 영상 새 창으로 열기"></a> <a class="external-video-cta" href="https://www.weforum.org/videos/22446-this-farm-robot-destroys-100-000-weeds-an-hour-with-lasers/" target="_blank" rel="noopener noreferrer">클릭해서 새 창으로 영상 열기</a> </div> <div class="card accent external-video-notes"><img src="assets/icons/sparkles-blue.svg" class="i-md"> 왜 이 사례를 보나요?
- AI가 작물과 잡초를 구분
- 잡초만 레이저로 제거
- 농업처럼 물리적 현장에서도 이미 활용
- 핵심은 “미래 기술”이 아니라 현장 적용
<!-- [요약] [#19 · 현장 적용: AI 농업 로봇 | 00:21–00:22 · 30초] 핵심: AI는 텍스트·보고서·콘텐츠를 넘어 현실 세계를 보고 행동하는 단계까지 이미 적용되고 있음. 주의: - WEF 페이지가 iframe을 차단할 수 있음. 막히면 하단 링크를 브라우저로 열어 10~15초만 보여주기. - iframe은 Marp에서 이스케이프되거나 WEF에서 차단될 수 있어 사용하지 않음. 썸네일 카드를 클릭해 새 창으로 열기. - PDF에서는 링크 레퍼런스 역할. [풀 스크립트] > 하나만 더 보여드릴게요. > AI가 글만 쓰고 이미지만 만드는 단계에 머무는 게 아니라, 카메라로 현실을 보고 실제 장비를 움직이는 사례도 이미 나와 있습니다. > 이 영상은 농업 로봇이 작물과 잡초를 구분하고, 잡초만 레이저로 제거하는 사례입니다. > 그래서 AI는 미래 기술이라기보다, 이미 현장 곳곳에 들어가고 있는 기술이라고 보시면 됩니다. -->출처: World Economic Forum, "This farm robot destroys 100,000 weeds an hour with lasers"
<!-- _class: content -->
<img src="assets/icons/zap-blue.svg" class="i-lg"> 하나 더 — OT가 진행되는 지금도 AI는 진화하고 있어요
4/23부터 한 주 동안 발표한 AI관련 업데이트 목록. 속도는 더욱 빨라질거에요
<div class="ai-news-cosmos"> <div class="ai-person-zone"> <div class="ai-person"><span class="ai-person-arms"></span><span class="ai-person-legs"></span></div> <div class="ai-person-shadow"></div> <div class="ai-person-caption">한 명의 사용자</div> </div> <div class="ai-cloud"> <div class="cloud-core"> <span>AI 업데이트 구름</span> <strong>20+</strong> <em>4/23 → 4/30</em> </div> <div class="news-cluster frontier"> <h3>Frontier Models</h3> <div class="news-pills"> <a class="news-pill" href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes" target="_blank" rel="noopener noreferrer">GPT-5.5</a> <a class="news-pill" href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes" target="_blank" rel="noopener noreferrer">ChatGPT 모델 선택</a> <a class="news-pill" href="https://blog.google/innovation-and-ai/products/gemini-app/generate-files-in-gemini/" target="_blank" rel="noopener noreferrer">Gemini 파일 생성</a> <a class="news-pill" href="https://blog.google/innovation-and-ai/models-and-research/gemini-models/gemini-embedding-2-generally-available/" target="_blank" rel="noopener noreferrer">Embedding 2 GA</a> <a class="news-pill" href="https://www.anthropic.com/news/claude-for-creative-work" target="_blank" rel="noopener noreferrer">Claude Creative</a> </div> </div> <div class="news-cluster creative"> <h3>Creative Tools</h3> <div class="news-pills"> <a class="news-pill" href="https://www.anthropic.com/news/claude-design-anthropic-labs" target="_blank" rel="noopener noreferrer">Claude Design</a> <a class="news-pill" href="https://blog.adobe.com/en/publish/2026/04/27/firefly-ai-assistant-public-beta" target="_blank" rel="noopener noreferrer">Adobe Firefly Agent</a> <a class="news-pill" href="https://blog.adobe.com/en/publish/2026/04/27/firefly-ai-assistant-public-beta" target="_blank" rel="noopener noreferrer">GPT Image 2 in Firefly</a> <a class="news-pill" href="https://duct-tape.io/" target="_blank" rel="noopener noreferrer">Duct Tape 레이더</a> <a class="news-pill" href="https://runwayml.com/product" target="_blank" rel="noopener noreferrer">Runway 모델 허브</a> </div> </div> <div class="news-cluster agents"> <h3>Agents & Workflows</h3> <div class="news-pills"> <a class="news-pill" href="https://help.openai.com/en/articles/10128477-chatgpt-enterprise-edu-release-notes" target="_blank" rel="noopener noreferrer">Workspace Agents</a> <a class="news-pill" href="https://help.openai.com/en/articles/10128477-chatgpt-enterprise-edu-release-notes" target="_blank" rel="noopener noreferrer">Slack 실행</a> <a class="news-pill" href="https://blog.google/innovation-and-ai/models-and-research/gemini-models/next-generation-gemini-deep-research/" target="_blank" rel="noopener noreferrer">Deep Research Max</a> <a class="news-pill" href="https://docs.replit.com/updates/2026/04/24/changelog" target="_blank" rel="noopener noreferrer">Replit Security Agent</a> <a class="news-pill" href="https://docs.replit.com/updates/2026/04/24/changelog" target="_blank" rel="noopener noreferrer">CVE Auto-Protect</a> </div> </div> <div class="news-cluster apps"> <h3>Everyday Apps</h3> <div class="news-pills"> <a class="news-pill" href="https://blog.google/innovation-and-ai/products/gemini-app/gemini-drop-april-2026/" target="_blank" rel="noopener noreferrer">Gemini Mac</a> <a class="news-pill" href="https://blog.google/innovation-and-ai/products/gemini-app/gemini-drop-april-2026/" target="_blank" rel="noopener noreferrer">Notebooks</a> <a class="news-pill" href="https://blog.google/innovation-and-ai/products/gemini-app/gemini-drop-april-2026/" target="_blank" rel="noopener noreferrer">Lyria 3 Pro</a> <a class="news-pill" href="https://www.anthropic.com/news/claude-for-creative-work" target="_blank" rel="noopener noreferrer">Claude connectors</a> <a class="news-pill" href="https://docs.replit.com/updates/2026/04/24/changelog" target="_blank" rel="noopener noreferrer">Plaid connector</a> </div> </div> </div> </div> <div class="cosmos-caption"><strong>다 외우는 수업이 아닙니다.</strong> 새 도구가 나와도 내 일에 적용하는 법을 배우는 수업입니다.</div><!-- [요약] [#24 · AI 업데이트 코스모스 | 00:32–00:33 · 1분] 핵심: 4/23~4/30 한 주 동안만 봐도 AI 관련 업데이트가 20+개. 속도는 더 빨라질 예정이고, **"내 일에 적용하는 법"이 핵심**. 발화 포인트: - 4 클러스터 살짝 짚기: - Frontier Models — GPT-5.5, Gemini 파일 생성, Claude Creative - Creative Tools — Claude Design, Adobe Firefly, Runway 모델 허브 - Agents & Workflows — Workspace Agents, Slack 실행, Replit Security - Everyday Apps — Gemini Mac, Claude connectors, Plaid connector - 핵심 한 줄: "다 외우는 수업 X. 새 도구 나와도 내 일에 적용하는 법을 배우는 수업" - 클로징: "그래서 솔직히 — **저도 지금 AI에서는 비기너예요**" ➜ 전환: "이제 지도를 보여드릴게요. 세미클래스가 어떻게 구성됐는지." 주의: - 청중 "헐 다 못 외우겠다" 압도되지 않게. "외울 필요 없다"가 메인 메시지 - 클러스터는 한 클러스터당 5초 — 짧게 - 청중 표정 살피며 "이건 본 적 있죠?" 같은 추임새로 거리감 좁히기 업데이트 범위: 2026-04-23 → 2026-04-30. 한 주 동안 발표된 AI 관련 업데이트 목록으로 보여주기. 확인 출처: OpenAI/Anthropic/Google/Adobe/Replit 공식 release notes (Duct Tape는 비공식 — 커뮤니티 신호로만) [풀 스크립트] > 그런데 하나 더 짚고 넘어가야 합니다. > AI는 지금 이 순간에도 계속 바뀌고 있습니다. > 4월 23일부터 한 주 동안 발표된 AI 관련 업데이트만 모아도 이 정도입니다. > 그리고 이 속도는 앞으로 더 빨라질 거예요. > GPT, Gemini, Claude 같은 큰 모델도 바뀌고, 디자인, 문서, 코딩, 영상, 자동화 서비스도 계속 새 기능을 냅니다. > 그래서 이 슬라이드의 의도는 "다 외우세요"가 아닙니다. 오히려 반대입니다. > 전부 외우려고 하면 지칩니다. 대신 새 도구가 나와도 내 일에 쓸 수 있는지 판단하는 기준을 갖추면 됩니다. > 오늘 90분 동안 제가 드릴 수 있는 건 이정표 하나입니다. 나머지는 여러분이 직접 써보면서 발견하실 거예요. -->그래서 솔직히 말씀드릴게요. 저도 지금 AI에서는 비기너예요.
<!-- _class: section --> <img src="assets/icons/map-blue.svg" class="divider-icon">
지도를 보여드릴게요
이제 세미클래스 운영 지도를 보여드릴게요
<!-- [요약] [#25 · 지도 디바이더 | 00:34] 핵심: 오해/벽 → 운영 구조 섹션 전환. "어떻게 참여하면 되는지" 그림 보여주는 시점. 발화 포인트: ➜ 전환: 자동 진행 주의: 오래된 Class 1~4 정규반이나 레벨별 클래스처럼 말하지 말기. OT / 비정기 클래스 / 정기 클래스 3트랙으로 설명. [풀 스크립트] > 이제 세미클래스가 어떻게 운영되는지 지도를 보여드리겠습니다. > 이번 OT를 해보면서 깨달은 게 하나 있습니다. 모든 분을 한 줄짜리 정규 과정에 넣는 방식은 안 맞겠더라고요. > 그래서 구조를 단순하게 바꾸고 있습니다. 가볍게 들어오는 OT, 필요한 주제만 듣는 비정기 클래스, 그리고 진짜 내 서비스를 만들고 싶은 분을 위한 정기 클래스. 이렇게 세 트랙입니다. > 가격과 세부 일정은 계속 다듬겠지만, 큰 방향은 이 세 가지로 보시면 됩니다. --><!-- _class: content -->
세미클래스 3트랙 운영 지도
OT → 비정기 클래스 → 정기 클래스
<div class="journey"> <div class="j-node j-current"> <span class="j-tag">Track 1</span> <div class="j-title">OT</div> <div class="j-meta">매주 토 13:30 · 90분</div> <div class="j-meta">1만원 예약비 · 출석 시 환불</div> </div> <div class="j-arrow"></div> <div class="j-tier"> <div class="j-tier-label">Track 2 · 팀이 기획한 주제를 단발 수업으로 엽니다</div> <div class="j-row"> <div class="j-node"> <span class="j-tag">매주 토요일</span> <div class="j-title">비정기 클래스</div> <div class="j-meta">15:30 · 90분 안팎</div> </div> <div class="j-node"> <span class="j-tag">팀 내부 기획</span> <div class="j-title">클래스 오픈</div> <div class="j-meta">바이브코딩 · 영상 자동화</div> <div class="j-meta">AI 기초 · 에이전트 등</div> </div> </div> </div> <div class="j-arrow"></div> <div class="j-tier"> <div class="j-tier-label">Track 3 · 정기 클래스</div> <div class="j-row"> <div class="j-node"> <span class="j-tag">월 단위</span> <div class="j-title">정기 클래스</div> <div class="j-meta">서비스 1개 출시까지</div> <div class="j-meta">1:1 케어 · 4~6명 캡</div> </div> <div class="j-node"> <span class="j-tag">수요 발견 시</span> <div class="j-title">별도 모집</div> <div class="j-meta">월 단위 · 별도 상담</div> <div class="j-meta">깊은 1:1 케어</div> </div> </div> </div> <div class="j-bonus">공지·자료·참여 신청은 세미클래스 봇과 소모임앱에서 계속 업데이트됩니다</div> </div> <!-- [요약] [#26 · 3트랙 운영 지도 | 00:34–00:36] 핵심: 5/2 OT 후 개편된 운영 지도. OT / 비정기 클래스 / 정기 클래스 3트랙. 발화 포인트: - OT: 매주 토 13:30, 90분, 1만원 예약비는 출석 시 환불 - 비정기 클래스: 팀이 주제를 기획해 오픈, 참여 신청 인원 보고 진행 확정, 단발 입장 가능 - 정기 클래스: 서비스 1개 출시까지 1:1 케어 ➜ 전환: "각 트랙을 조금만 풀어드릴게요." 주의: - 구버전 Class 1~4 정규반 언급 금지 - 가격은 "확정입니다"가 아니라 "우선 이 정도로 열어보려 합니다" 톤 - 정기 클래스는 판매 톤 X. "진짜 만들고 싶은 분이 생기면 따로 깊게 돕는 구조"로 말하기 [풀 스크립트] > 앞으로 세미클래스는 이렇게 세 트랙으로 보시면 됩니다. > 첫 번째는 OT입니다. 매주 토요일 1시 반에 열고, 한 시간 정도는 데모와 설명, 뒤 30분은 질문을 받는 구조로 생각하고 있습니다. 예약비는 1만원을 받되, 오신 분께는 돌려드리는 방식입니다. 노쇼를 줄이기 위한 장치라고 봐주세요. > 두 번째는 비정기 클래스입니다. 팀에서 그 시점에 가장 필요하다고 판단한 주제를 기획해서 단발 수업으로 열고, 참여 신청 인원을 보고 진행을 확정합니다. 예를 들면 이번 주는 바이브코딩, 다음에는 영상 자동화나 에이전트 AI 같은 식입니다. > 세 번째는 정기 클래스입니다. 실제로 서비스 하나를 끝까지 만들고 싶은 분들은 그냥 강의만으로는 부족하더라고요. 그래서 정기 클래스는 서비스 1개 출시까지 깊게 보는 구조로 가져가려고 합니다. --><!-- _class: content -->
Track 1·2 — 가볍게 들어오고, 필요한 주제만 골라 듣기
<div class="two-col"> <div class="card">Track 1 · OT
처음 오신 분을 위한 입구
- AI가 어디까지 되는지 실제 데모로 먼저 확인
- 오해와 막연한 두려움을 90분 안에 정리
- 내 일에 어떻게 연결할 수 있을지 감 잡기
- 세미클래스 봇·강의자료·위키 사용법 익히기
Track 2 · 비정기 클래스
필요한 주제만 단발로 깊게 듣기
- 팀이 그 시점에 필요한 AI 활용 주제를 기획
- 바이브코딩, 영상 자동화, 에이전트 등 주제별 오픈
- 신청 수요를 보고 일정과 진행 여부 확정
- 정기 과정 전, 관심 주제를 부담 없이 체험
<!-- [요약] [#27 · 2 설명 | 00:36–00:38] 핵심: OT와 비정기 클래스는 정기 클래스 전 단계가 아니라, 각자 목적이 다른 참여 방식. 발화 포인트: - Track 1 OT: 처음 온 분이 AI 활용 가능성과 수업 흐름을 빠르게 파악하는 입구 - Track 2 비정기 클래스: 필요한 주제만 단발로 깊게 듣는 구조 - 바이브코딩, 영상 자동화, 에이전트처럼 팀이 필요한 주제를 기획해 열어볼 예정 - 수요를 보며 일정과 진행 여부를 확정 ➜ 전환: "그리고 진짜 내 서비스를 만들고 싶은 분을 위한 깊은 트랙도 있습니다." 주의: - 가격 언급하지 않기 - 비정기 클래스가 정기 클래스의 하위 과정처럼 들리지 않게 말하기 [풀 스크립트] > Track 1은 OT입니다. 오늘처럼 처음 오신 분들이 AI가 실제로 어디까지 되는지 보고, 내 일에 어떻게 연결할 수 있을지 감을 잡는 입구입니다. > Track 2는 비정기 클래스입니다. 매번 전체 커리큘럼을 듣는 방식이 아니라, 그때그때 필요한 주제를 하나씩 골라 듣는 구조라고 보시면 됩니다. > 예를 들면 바이브코딩, 영상 자동화, 에이전트처럼 팀에서 지금 중요하다고 판단한 주제를 기획하고, 신청 수요를 보면서 열어보려고 합니다. > 여기까지가 가볍게 들어오고 필요한 주제만 골라 듣는 방식이라면, 다음은 실제로 내 서비스를 끝까지 만들고 싶은 분들을 위한 트랙입니다. -->처음엔 OT로 흐름을 잡고, 더 궁금한 주제는 비정기 클래스로 하나씩 골라 들으시면 됩니다.
<!-- _class: content -->
Track 3 — 정기 클래스
<div class="two-col"> <div class="card">내 서비스 만들기
월 단위 · 4주 · 4~6명 캡 · 별도 상담
- 서비스 1개 출시까지
- 1:1 케어와 실습 중심
- 50분 강의 + 50분 개별 케어
- 사전 자료 + 사후 과제
이런 분께 맞습니다
강의보다 “내 걸 만드는 것”이 목표인 분
- 내 서비스/대시보드/챗봇을 만들고 싶다
- 업무 자동화가 실제 매출·시간 절감과 연결된다
- 혼자 만들기는 막막하지만 끝까지 가고 싶다
- 포트폴리오나 사업화가 필요하다
<!-- [요약] [#28 · 정기 클래스 | 00:38–00:40] 핵심: 강의만 듣는 트랙이 아니라 서비스 1개 출시까지 깊게 보는 정기 트랙. 발화 포인트: - 정기 클래스는 서비스 출시형 트랙 - 월 단위 별도 상담, 4주, 서비스 1개 출시까지 - 자연스럽게 필요가 확인된 분만 별도 모집 ➜ 전환: "Q&A 전에, 참여 채널과 실제 사례를 짧게 보여드릴게요." 주의: - 판매/상담 압박처럼 들리지 않게. "원하는 분이 생기면 따로 깊게" 톤 - 내부/비즈니스 용어는 피하고 정기 클래스라고 말하기 [풀 스크립트] > 세 번째 트랙은 정기 클래스입니다. > 처음에는 정규 클래스와 깊은 케어 과정을 따로 생각했는데, 1차 OT를 해보니까 강의만 듣는 과정과 실제로 같이 만드는 과정을 따로 나누는 게 오히려 애매하더라고요. > 진짜 내 서비스를 만들고 싶은 분은 강의만 듣는 것보다, 한 달 동안 같이 만들고 출시까지 가는 쪽이 더 맞습니다. > 그래서 정기 클래스는 4주 동안 서비스 1개 출시를 목표로 하고, 필요한 설명과 개별 케어, 실습을 함께 가져가는 방식으로 생각하고 있습니다. -->정기 클래스는 수업이라기보다, 한 달 동안 같이 만들어보는 작은 출시 프로젝트에 가깝습니다.
<!-- _class: cta -->
두 가지 소통 채널
폰 카메라로 QR 찍으면 바로 입장돼요
<div class="qr-pair"> <div class="qr-card"> <div class="qr-card-tag">가볍게 수다 떨고 싶을 땐</div> <img src="assets/qr-openkakao.svg" class="qr-img"> <div class="qr-card-caption">세미클래스 | AI 왕초보 오픈카톡</div> </div> <div class="qr-card"> <div class="qr-card-tag">클래스에 대해 궁금한 게 있다면</div> <img src="assets/qr-semiclass-bot.svg" class="qr-img"> <div class="qr-card-caption">세미클래스 봇 · 24h 응답</div> </div> </div>공지·수업 자료는 소모임앱에서 · 가벼운 수다는 오픈카톡 · 클래스 Q&A는 봇에게.
<!-- [요약] [#29 · 두 가지 소통 채널 | 00:54–00:55 · 1분] 핵심: QR 2개 — 오픈카톡 (수다) + Semiclass 봇 (Q&A). 발화 포인트: - 좌측 QR: 가벼운 수다 → 오픈카톡 (open.kakao.com/o/pYp8dsri) - 우측 QR: 클래스 Q&A → Semiclass 봇 (semi-colon.space/bots/semiclass) 시연/액션: - QR 화면 풀스크린으로 5초 정지 — 폰 카메라 찍을 시간 - "지금 폰으로 찍어두세요" 한 번 더 ➜ 전환: "마지막 4분, 세미콜론 팀이 AI로 진짜 뭘 만들었는지 보여드릴게요." 주의: - 봇 = OT 도착 시 문열기 + 클래스 Q&A — 둘 다 강조 - 소모임앱 = 공지·자료 공유 기본 채널 (가입자 전용) [풀 스크립트] > 마지막으로 소통 채널 안내드리겠습니다. > 공지와 수업 자료는 소모임앱을 기본 채널로 쓰겠습니다. > 가볍게 질문하거나 수다 떨고 싶은 내용은 오픈카톡으로 들어오시면 됩니다. > 그리고 클래스에 대해 궁금한 점이나 오늘 못 물어본 질문은 세미클래스 봇에게 남겨주세요. 24시간 응답할 수 있도록 준비해두었습니다. > 지금 폰 카메라로 QR을 찍어두시면 됩니다. 왼쪽은 오픈카톡, 오른쪽은 세미클래스 봇입니다. --><!-- _class: section --> <img src="assets/icons/package-blue.svg" class="divider-icon">
마지막 4분
세미콜론이 'AI로 실제로 뭘 만들었는지'
광고 아니에요. 오늘 배우신 AI 활용의 완성형 예시로 봐주세요.
<!-- [요약] [#30 · 마지막 4분 디바이더 | 00:55] 핵심: 참여 채널 안내 후, 세미콜론 팀의 실제 AI 활용 사례 4개로 클로징 전환. 발화 포인트: ➜ 전환: 자동 진행 주의: - "광고" 단어 직접 받지 않기 — "완성형 예시" 톤 일관 유지 - 청중이 갑자기 "팔리는 시간"으로 느끼지 않게 톤 부드럽게 [풀 스크립트] > 이제 마지막 4분입니다. > 여기서는 세미콜론 팀이 AI로 실제로 무엇을 만들었는지 보여드리겠습니다. > 광고처럼 들리면 안 되니까 먼저 말씀드리면, 이건 판매 시간이 아니라 오늘 배우신 AI 활용의 완성형 예시입니다. > 앞에서 본 Level 0부터 Level 3까지가 실제 업무와 서비스로 연결되면 어떤 모습이 되는지 보여드리는 구간입니다. > SAX, SEMO Incubator, Semiclass, Semicolon WIKI 네 가지를 아주 짧게 보겠습니다. --><!-- _class: content -->
<img src="assets/icons/wand-sparkles-blue.svg" class="i-lg"> ① SAX — 혼자 시작하기 막막했죠?
<div class="two-col case-grid"> <div class="case-img"> <img src="assets/sax-case-bikeshop.png" alt="Mark 바이크샵 Slack + OpenClaw 실사용 장면"> </div> <div class="case-text">사례 · 마크님의 바이크샵
차량 입고 · 보험 처리 · 일정 추가를 Slack 대화 한 줄로.
OpenClaw가 정리 → 분류 → 파일 저장까지 자동으로 받아서 일상 업무를 도와줍니다.
업무 맥락은 KB로 기억하고, 필요한 일은 여러 에이전트가 나눠 처리합니다.
<br></div> </div> <!-- [요약] [#31 · ① SAX 사례 (마크) | 00:55–00:56] 핵심: 마크 바이크샵 — Slack 한 줄 → OpenClaw가 정리·분류·저장. SAX는 업무 KB와 멀티 에이전트를 얹어 실제 현장 맥락을 기억하며 처리. 발화 포인트: - 차량 입고 / 보험 처리 / 일정 추가 — Slack 대화 한 줄로 - SAX는 단순 챗봇이 아니라 업무 맥락을 KB로 기억하고, 필요한 작업을 여러 에이전트가 나눠 처리하는 구조 - 인용: "저희도 처음엔 똑같이 막막했어요. 그래서 **이걸 남한테 대신 풀어드리는 일**을 하게 됨" ➜ 전환: "두 번째 — SEMO Incubator." 주의: - "마크" 누구냐 질문 → "Reus 지인의 미국 바이크샵 사장님" 한 줄 - L3 #8에서 마크 사례 짧게 본 후 — 여기서 다시 깊이 있게. 중복 의식하고 "아까 보신 마크" 한 번만 [풀 스크립트] > 마지막 4분은 세미콜론 팀이 AI로 실제로 무엇을 만들고 있는지 보여드리는 시간입니다. > 첫 번째는 SAX, 마크 바이크샵 사례입니다. > 차량 입고, 보험 처리, 일정 추가처럼 작은 업무가 계속 들어오는 상황에서, 슬랙에 한 줄로 남기면 OpenClaw가 내용을 정리하고 분류하고 필요한 파일로 저장합니다. > 여기서 SAX만의 특징은, 그 가게의 업무 맥락을 KB로 기억하고 필요한 일은 여러 에이전트가 나눠 처리한다는 점입니다. > 여기서 중요한 건 멋진 데모가 아니라, 실제 사장님의 하루 업무가 줄어든다는 점입니다. > 저희도 처음에는 똑같이 막막했습니다. 그래서 AI가 일을 실제로 일어나게 만드는 방식을 남에게도 풀어드리는 일을 하게 됐습니다. -->저희도 처음엔 똑같이 막막했어요. 그래서 이걸 남한테 대신 풀어드리는 일을 하게 됐습니다.
<!-- _class: content -->
<img src="assets/icons/bot-blue.svg" class="i-lg"> ② SEMO Incubator
실제로 이렇게 진행됐어요
<div class="three-col incubator-flow"> <figure> <img src="assets/incubator-step1-chat.png" alt="PO가 Slack에서 PlanClaw 봇과 대화하며 프로젝트 구조를 기획하는 장면"> <figcaption><strong>1 · 대화로 기획</strong><br>PO가 Slack에서 PlanClaw와 대화하면, 카테고리·구조가 자동 정리돼요.</figcaption> </figure> <figure> <img src="assets/incubator-step2-po-feedback.png" alt="참여 PO의 소감 — 시간 가는 줄 모를 정도로 재밌다"> <figcaption><strong>2 · 참여 PO의 소감</strong><br>"3일 돌려본 소감 — 너무 재밌음.<br>피곤하고 시간 없어서 아쉬울 지경."</figcaption> </figure> <figure> <img src="assets/incubator-step3-ui-render.png" alt="대시보드에서 기획한 UI가 바로 미리보기로 렌더링되는 화면"> <figcaption><strong>3 · 결과물 확인</strong><br>기획한 화면이 대시보드에서 바로 렌더 — 검토·수정 루프도 같은 자리에서.</figcaption> </figure> </div><!-- [요약] [#32 · ② SEMO Incubator | 00:56–00:58 · 2분] 핵심: 1인 PO가 Slack 대화로 프로젝트 만들고, 결과물까지 대시보드에서 확인. 발화 포인트 (3 단계): - 1단계 — 대화로 기획: PO가 Slack에서 PlanClaw와 대화 → 카테고리·구조 자동 정리 - 2단계 — 참여 PO 소감: "3일 돌려본 소감 — 너무 재밌음. 피곤하고 시간 없어서 아쉬울 지경" - 3단계 — 결과물: 기획한 화면이 대시보드에서 바로 렌더 + 검토·수정 루프 - 핵심 한 줄: "나누고 싶은 건 **상품**이 아니라, **혼자는 막혔던 분이 스스로 만들어낸 경험** 그 자체" ➜ 전환: "마지막 — Semiclass. 강의를 준비하다 보니 서비스가 됐습니다." 주의: - 가격·기능 X (의식적 — v2에서 의도적 제거) - 스토리 톤: 상품 세일즈 X → 솔루션 내러티브 ○ - "PO" 단어 → "프로젝트 만드는 사람" 한 번 풀어 설명 (청중 모를 가능성) 변경 이력 (2026-04-23): v2에서 1기 포트폴리오 슬라이드 삭제 + 인포그래픽 제거 + 가격 텍스트 제거. [풀 스크립트] > 두 번째는 SEMO Incubator입니다. > 프로젝트를 만들고 싶은 사람이 혼자 막혀 있을 때, 슬랙에서 PlanClaw와 대화하면서 아이디어를 구조화합니다. > 첫 단계에서는 대화만으로 카테고리와 화면 구조가 정리됩니다. > 두 번째는 실제 참여자의 피드백입니다. 3일 돌려봤는데 너무 재밌고, 오히려 시간이 부족해서 아쉬울 정도였다는 반응이 나왔습니다. > 세 번째는 결과물 확인입니다. 대화로 기획한 화면이 대시보드에서 바로 렌더링되고, 그 자리에서 다시 검토하고 수정할 수 있습니다. > 저희가 나누고 싶은 건 단순한 상품이 아니라, 혼자서는 막혔던 사람이 스스로 만들어낸 경험 그 자체입니다. -->나누고 싶은 건 상품이 아니라, "혼자는 막혔던 분이 스스로 만들어낸 경험" 그 자체예요.
<!-- _class: content -->
<img src="assets/icons/bot-blue.svg" class="i-lg"> ③ Semiclass — 강의를 준비하다 보니 서비스가 됐어요
강의를 준비하다 보니, 피칭덱·수강자·현장 안내·라이브 발표가 필요했습니다
<div class="three-col semiclass-flow"> <figure> <img src="assets/semiclass-case-bot.jpg" alt="세미클래스 봇이 위치 안내와 설문, 환급 계좌 입력을 안내하는 모바일 화면"> <figcaption><strong>1 · 세미클래스 봇</strong><br>출석체크, 문열기 요청, 음료 주문, 준비물 질의까지 현장 안내를 봇이 처리합니다.</figcaption> </figure> <figure> <img src="assets/semiclass-case-admin.jpg" alt="회차별 참여자 정보와 음료, 라이브 PT 설정을 관리하는 강의 관리 화면"> <figcaption><strong>2 · 강의 관리</strong><br>피칭덱·강의자료와 회차별 참여자 정보를 관리하고 세미클래스 봇과 연결합니다.</figcaption> </figure> <figure> <img src="assets/semiclass-case-live-pt.jpg" alt="강사가 라이브 발표에서 슬라이드와 채팅, 강사 DM을 관리하는 화면"> <figcaption><strong>3 · 라이브 PT</strong><br>슬라이드 동기화, 포인팅, 라이브 채팅, 강사 귓속말로 스트리밍하듯 강의합니다.</figcaption> </figure> </div><!-- [요약] [#33 · ③ Semiclass | 00:58–00:59] 핵심: 강의를 준비하다 보니 피칭덱·수강자·현장 안내·라이브 발표까지 필요한 게 늘었고, 이를 직접 서비스로 구현해 강의 환경용 패키지로 만들고 있음. 발화 포인트: - 강의를 준비하다 보니 필요한 게 계속 생김: 피칭 슬라이드 관리, 수강자 정보 관리, 현장 안내, 라이브 발표 - 세미클래스 봇: 출석체크, 문열기 요청, 음료 주문, 준비물 질의 등 강의 현장 안내 - 강의 관리: 피칭덱/강의자료 관리, 회차별 참여자 정보 저장, 세미클래스 봇 연동 - 라이브 PT: 포인팅, 강사 슬라이드 넘김 동기화, 라이브 채팅, 강사 귓속말 - 핵심 한 줄: "우리 강의를 편하게 하려고 만든 도구를 강의 환경에 맞게 운영형으로 확장하고 있음" ➜ 전환: "하나 더 — 강의자료를 만들다 보니 용어 설명도 제품이 됐습니다." 주의: - 내부 운영 도구 자랑이 아니라, 오늘 본 AI 활용이 실제 서비스 패키지로 이어지는 사례라는 톤 - "판매"는 가능성/방향으로 말하고, 과장된 제품 출시 선언처럼 들리지 않게 [풀 스크립트] > 마지막은 Semiclass입니다. > 사실 이 서비스도 처음부터 크게 만들려고 시작한 게 아닙니다. 강의를 준비하다 보니 필요한 게 계속 생겼습니다. > 피칭 슬라이드를 관리해야 하고, 강의자료를 묶어야 하고, 회차별 참여자 정보도 저장해야 하고, 당일에는 문 열어달라는 요청이나 음료 주문, 준비물 질문도 계속 들어옵니다. > 그래서 세미클래스 봇을 만들었습니다. 출석체크, 문열기 요청, 음료 주문, 준비물 질의 같은 현장 안내를 봇이 처리합니다. > 또 강의 관리 화면에서는 피칭덱과 강의자료를 관리하고, 회차별 참여자 정보를 저장하고, 이 정보가 다시 세미클래스 봇과 연결됩니다. > 마지막으로 라이브 PT에서는 제가 슬라이드를 넘기면 수강자 화면도 같이 넘어가고, 포인터로 짚고, 라이브 채팅과 강사 귓속말까지 연동해 스트리밍하듯 강의할 수 있게 만들고 있습니다. > 처음엔 우리 강의를 편하게 하려고 만들었지만, 필요할 때는 운영 환경에서 재사용 가능한 형태로 다듬고 있습니다. > 오늘 본 AI 활용이 데모에서 끝나는 게 아니라, 실제 운영 문제를 만나고 서비스로 바뀌는 예시로 봐주시면 됩니다. -->처음엔 우리 강의를 편하게 하려고 만들었고, 이제는 이걸 잘 패키징해 운영 환경에서 바로 쓰일 수 있도록 정리하고 있습니다.
<!-- _class: content -->
<img src="assets/icons/file-text-blue.svg" class="i-lg"> ④ Semicolon WIKI — 흐름은 지키고, 궁금한 용어는 바로 설명
Tokenizing · STT · LLM · Harness Engineering 같은 용어를 슬라이드 밖에서 풀어줍니다
<div class="demo-embed claude-proof" style="margin-top: 10px;"> <div class="demo-video-wrap"> <video controls preload="metadata" poster="assets/thumb-semicolon-wiki.jpg" playsinline> <source src="assets/videos/semicolon-wiki-demo.mp4" type="video/mp4"> </video> <div class="demo-video-label"><span class="demo-play"></span> WIKI 문서 생성·자동 링크 시연 · 약 2분 06초</div> </div> <div class="card accent">왜 만들었나
강의자료를 준비하다 보면 초보자에게 어려운 용어가 꼭 들어갑니다. 하지만 매번 슬라이드를 할애하면 강의의 본질에서 벗어납니다.
<br>그래서 강의 흐름은 유지하고, 궁금한 사람만 바로 설명을 열어볼 수 있는 팀 지식 사전으로 만들었습니다.
</div> </div><!-- [요약] [#34 · ④ Semicolon WIKI | 00:59–01:01] 핵심: 어려운 용어를 슬라이드 안에서 길게 설명하지 않고, 강의 흐름을 해치지 않는 지식 사전으로 분리. 지금은 팀 지식 관리 위키로도 사용. 발화 포인트: - 강의자료를 만들다 보면 Tokenizing, STT, LLM, Harness Engineering처럼 초보자에게 어려운 용어가 불가피하게 등장 - 용어마다 슬라이드를 쓰면 강의 본질에서 벗어남 - 궁금한 사람만 흐름 밖에서 설명을 볼 수 있게 Semicolon WIKI를 만듦 - 현재는 강의뿐 아니라 팀 지식을 관리하는 사전처럼 사용 - SEMO 환경 위에서 바이브코딩으로 구현 - 위키끼리는 자동 관련 문서 링크, 피칭덱을 만들면 위키 문서가 있는 용어는 자동 링크 ➜ 전환: "이제 진짜 마지막." 주의: - 기능 나열보다 "강의 흐름을 지키기 위한 제품"이라는 문제 해결 내러티브 - 위키가 단순 문서 저장소가 아니라 팀 지식과 강의자료를 연결하는 레이어라는 점 강조 [풀 스크립트] > 하나 더 있습니다. Semicolon WIKI입니다. > 강의자료를 준비하다 보면 Tokenizing, STT, LLM, Harness Engineering 같은 용어가 어쩔 수 없이 들어갑니다. > 초보자 입장에서는 궁금할 수 있지만, 그 용어 하나하나를 슬라이드로 설명하기 시작하면 강의의 본질에서 많이 벗어납니다. > 그래서 강의 흐름은 유지하되, 궁금한 사람은 바로 설명을 열어볼 수 있으면 좋겠다고 생각했습니다. > 그렇게 만든 게 Semicolon WIKI입니다. > 지금은 강의 용어 설명뿐 아니라 우리 팀의 지식을 관리하는 사전처럼 사용하고 있습니다. > 이것도 SEMO 환경 위에서 바이브코딩으로 구현했습니다. 위키 문서끼리는 관련 문서가 자동으로 연결되고, 피칭덱을 만들 때도 위키 문서가 있는 용어는 자동으로 링크됩니다. > 결국 이것도 같은 이야기입니다. 강의를 하다 만난 작은 불편을 AI와 서비스로 풀어낸 사례입니다. -->위키끼리는 관련 문서가 자동으로 연결되고, 피칭덱 안의 용어도 위키 문서가 있으면 자동 링크됩니다.
<!-- _class: content -->
<img src="assets/icons/sparkles-blue.svg" class="i-lg"> 우리 팀이 하는 일 — AI로 브랜드를 만들고, 서비스로 연결합니다
로고의 S와 **;**에서 캐릭터를 만들고, 강의·봇·CI까지 하나의 경험으로 묶고 있어요
<div class="team-branding-layout"> <div class="team-character-grid"> <figure class="card team-character-card"> <img src="assets/team-character-semi-01.png" alt="세미클래스 S 심볼을 활용한 Semi 캐릭터"> <figcaption><strong>Semi · 세미</strong><br>S 모양 심볼에서 출발한 세미클래스 안내 캐릭터</figcaption> </figure> <figure class="card team-character-card accent"> <img src="assets/team-character-colony-01.png" alt="세미콜론의 세미콜론 심볼을 활용한 Colony 캐릭터"> <figcaption><strong>Colony · 콜로니</strong><br>i/; 모양에서 확장한 팀 세계관 캐릭터</figcaption> </figure> <figure class="card team-character-card"> <img src="assets/team-character-semi-02.png" alt="Semi 캐릭터의 다른 응용 이미지"> <figcaption><strong>캐릭터 응용</strong><br>교육 자료·봇 안내·소셜 콘텐츠 톤앤매너로 확장</figcaption> </figure> <figure class="card team-character-card accent"> <img src="assets/team-character-colony-02.png" alt="Colony 캐릭터의 다른 응용 이미지"> <figcaption><strong>브랜드 세계관</strong><br>단순 로고가 아니라 기억나는 캐릭터 경험으로 설계</figcaption> </figure> </div> <div class="team-work-panel"> <div class="card accent team-symbol-card"> <img src="assets/team-symbol-semiclass-logo.png" alt="세미클래스 로고 심볼"> <h3>심볼에서 캐릭터까지</h3> <p>우리 팀은 AI를 “대신 만드는 도구”가 아니라, 브랜드 아이디어를 빠르게 실험하고 정리하는 제작 파트너로 씁니다.</p> </div> <div class="team-brand-shots"> <figure class="card team-brand-shot"> <img src="assets/team-branding-ci-01.png" alt="세미클래스 CI 브랜딩 작업 예시 1"> <figcaption><strong>CI 정리</strong> · 로고·컬러·사용 규칙을 자료와 서비스 화면에 맞게 조율</figcaption> </figure> <figure class="card team-brand-shot"> <img src="assets/team-branding-ci-02.png" alt="세미클래스 CI 브랜딩 작업 예시 2"> <figcaption><strong>브랜딩 적용</strong> · 강의자료, 봇, 웹 화면까지 같은 인상으로 연결</figcaption> </figure> </div> </div> </div><!-- [요약] [#35A · 우리 팀이 하는 일: AI 브랜딩 | 01:01] 핵심: 세미클래스/세미콜론 팀이 AI를 활용해 캐릭터, CI, 브랜딩, 강의/봇 경험을 실제로 만들고 있다는 사례. 발화 포인트: - 로고의 S와 ;/i 형태에서 캐릭터를 만들었음 - S모양 캐릭터는 Semi(세미), i/;모양 캐릭터는 Colony(콜로니) - 캐릭터는 귀여운 이미지가 아니라 강의자료·봇 안내·브랜딩 톤까지 연결되는 자산 - CI 정리와 서비스 화면 적용에도 AI를 활용하고 있음 - 핵심 한 줄: 우리도 AI를 “배우는 주제”로만 쓰지 않고 실제 브랜드/운영 시스템 제작에 쓰고 있음 ➜ 전환: "마지막으로, AI를 어떻게 바라보면 좋을지 한 문장으로 닫겠습니다." --><span class="team-branding-note">SemiClass는 AI를 가르치는 데서 끝나지 않고, AI로 실제 브랜드와 운영 시스템을 만드는 과정까지 보여주는 프로젝트입니다.</span>
<!-- _class: quote -->
AI는 마법도,
허상도 아니에요.
불처럼, 누가 어떻게 쓰느냐에 따라 결과가 달라집니다.
<div class="fire-analogy"> <div class="fire-card good"> <div class="fire-icon"> <img src="assets/icons/cup-steam-white.svg" alt="요리사에게 주어지면 요리 예시"> </div> <div> <h3>요리사에게 주어지면</h3> <p>재료를 익히고, 맛있는 요리를 만듭니다.</p> </div> </div> <div class="fire-core"> <img src="assets/icons/flame-white.svg" alt="도구"> <span>도구</span> </div> <div class="fire-card bad"> <div class="fire-icon"> <img src="assets/icons/house-fire-white.svg" alt="방화범에게 주어지면 훼손 가능"> </div> <div> <h3>방화범에게 주어지면</h3> <p>불을 질러 건물을 태울 수도 있습니다.</p> </div> </div> </div> <!-- [요약] [#36 · quote: 마법 아님 | 01:00–01:01] 핵심: AI는 마법/허상이 아니라 불 같은 도구. 어떻게 쓰느냐가 중요하다는 프레임으로 분위기 전환. 발화 포인트: - 불 비유: 요리사에게 주어지면 맛있는 요리, 방화범에게 주어지면 건물을 태움 - 핵심: 도구 자체보다 쓰는 사람의 목적·방법·검증 습관이 중요 - 현실 사례: 팀 안에서 AI 실력 차이가 갈등으로 보일 수 있다는 현실적인 리스크를 짧게 보완 - 너무 자극적으로 길게 가지 말고, 20초 안에 넘기기 시연/액션: 5초 정지 — 빨리 넘기지 X ➜ 전환: 없음 — 이 한 줄로 마무리. 주의: "방화범"은 비유로만 짧게. AI 공포 조성 X, 마지막 메시지는 "그래서 쓰는 법을 배운다"로 따뜻하게 회수. [풀 스크립트] > AI는 마법도, 허상도 아닙니다. > 오히려 불에 가까워요. > 같은 불도 요리사에게 주어지면 맛있는 요리가 되고, 방화범에게 주어지면 건물을 태울 수도 있죠. > 그래서 쓰는 방식이 중요합니다. > 실제로 조직 안에서도 이런 일이 생길 수 있어요. AI를 잘 쓰는 사람이 프롬프트를 자산이라고 생각해 공유를 꺼리면, 팀 협업이 흔들릴 수 있습니다. > 결국 중요한 건 불 자체가 아니라, 누가 어떤 목적으로 어떻게 쓰느냐입니다. AI도 똑같습니다. > 오늘 여기 오신 것만으로도 이미 "쓸 줄 아는 사람" 쪽으로 한 걸음 오신 겁니다. > 이 한 줄로 오늘 OT를 마무리하겠습니다. --><!-- _class: section --> <img src="assets/icons/message-circle-blue.svg" class="divider-icon">
자유대화 · Q&A
강의 들으며 생긴 질문과, 오기 전부터 갖고 있던 고민을 편하게 나눠요
오늘 보면서 궁금했던 점, 내 업무·생활에서 막히는 부분,
"이런 것도 AI로 가능할까요?" 싶은 고민을 자유롭게 꺼내주세요.
정답을 맞히는 시간이 아니라,
각자의 상황을 함께 풀어보고 AI를 어디에 적용할 수 있을지 가볍게 찾아보는 시간입니다.