Files
aio-01d4-stu/StuDoc/AI시대의_DX_DevOps_컨테이너.html

508 lines
126 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>AI 시대의 DX · DevOps</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{--navy:#0B1F3A;--ink:#0F172A;--teal:#0D9488;--teal-l:#5EEAD4;--amber:#F59E0B;--slate:#64748B;--card:#EEF3F8;--mutedd:#B6C3D6;--bg:#1a2433}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);font-family:"Noto Sans KR","Noto Sans CJK KR",sans-serif;color:var(--ink)}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slide{position:absolute;width:1280px;height:720px;display:none;overflow:hidden;transform-origin:center center}
.slide.on{display:block}
.slide.light{background:#fff}.slide.dark{background:var(--navy);color:#fff}
.inner{position:absolute;inset:38px 64px 56px}
footer{position:absolute;left:64px;bottom:20px;font-size:13px;color:var(--slate)}
.pg{position:absolute;right:64px;bottom:20px;font-size:13px;color:var(--slate)}.dark .pg{color:var(--mutedd)}
.notes{display:none}
h2{font-size:34px;font-weight:700;color:var(--navy);text-align:center;height:56px;line-height:56px}
.lead{font-size:18px;color:var(--slate);margin:6px 0 22px}
.t-steps h2,.t-code h2{margin-bottom:22px}.t-analogy h2{margin-bottom:28px}
h3{font-size:20px;font-weight:700;color:var(--navy)}
p{font-size:18px;line-height:1.5}.sm{font-size:15px}.muted{color:var(--slate)}.muted-d{color:var(--mutedd)}.teal{color:var(--teal)}
.card{background:var(--card);border-radius:14px;padding:22px}
.ic{display:inline-flex;align-items:center;justify-content:center;flex:none}.ic svg{width:100%;height:100%}
.circ{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;padding:14px}
.circ.lg{width:70px;height:70px;padding:17px}.circ.xl{width:112px;height:112px;padding:28px}.circ.sm{width:36px;height:36px;padding:9px}
.circ.amber{background:var(--amber)}.circ.navy{background:var(--navy)}
.pill{display:inline-block;border-radius:99px;padding:4px 14px;font-size:14px;font-weight:700;color:#fff;background:var(--teal);white-space:nowrap}
.pill.amber{background:var(--amber)}.pill.slate{background:var(--slate)}
.row-sb{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grid{display:grid;gap:24px}.g4{grid-template-columns:repeat(4,1fr);grid-auto-rows:204px}.g3{grid-template-columns:repeat(3,1fr);height:430px}
.g2{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}.g2.tight{grid-auto-rows:128px;gap:16px 24px}
.tile h3{margin-top:22px}.tile p{margin-top:4px}.tile.center{text-align:center}.tile.center .ic{margin:0 auto}.tile.center h3{margin-top:16px}
.num{color:var(--slate);font-size:15px}
.vcard h3.big{font-size:24px;margin:26px 0 12px}
.hcard{display:flex;gap:22px;align-items:center}.hcard>div{flex:1}.hcard p{margin-top:8px}
.sm-card{padding:16px 22px}.sm-card p{font-size:16px;margin-top:4px}
.title-l{position:absolute;left:24px;top:110px;width:640px}
.kicker{color:var(--teal-l);font-weight:700;font-size:17px}
h1{font-size:64px;font-weight:900;line-height:1.2;margin:10px 0}
.sub{font-size:26px;line-height:1.45}.meta{color:var(--mutedd);font-size:17px;margin-top:60px}
.net{position:absolute;right:30px;top:60px;width:380px;height:340px}.nodes{position:absolute;right:30px;top:60px;width:380px;height:340px}
.node{position:absolute;width:110px;height:110px;margin:-55px;border-radius:50%;background:var(--teal);color:#fff;padding:28px;display:flex}
.node.amber{background:var(--amber)}
.sec{position:absolute;left:40px;top:120px;width:760px}.no{font-size:92px;font-weight:900;color:var(--teal-l);line-height:1}
.ghost{position:absolute;right:40px;top:150px;width:360px;height:360px;color:var(--teal-l);opacity:.18}
.sm-ghost{width:280px;height:280px;top:40px}
.ana{display:flex;align-items:center;gap:0}.side{flex:1;height:370px;padding:26px 30px}
.side h3{font-size:23px;margin:10px 0 16px}.side ul{padding-left:22px}.side li{font-size:18px;line-height:1.5;margin-bottom:10px}
.approx{width:56px;height:56px;margin:0 -12px;z-index:1;border-radius:50%;background:#fff;border:2px solid var(--teal);color:var(--teal);font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.take{margin-top:22px;background:rgba(13,148,136,.12);color:var(--teal);font-weight:700;font-size:20px;border-radius:12px;padding:14px 26px}
.flow{display:flex;align-items:stretch;gap:0;height:350px}.step{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;padding:24px 16px}
.step h3{margin:16px 0 10px;font-size:19px}.step p{font-size:17px}.step p.sm{font-size:15.5px}
.arrow{color:var(--teal);font-size:26px;display:flex;align-items:center;padding:0 10px}
.note{margin-top:22px;background:rgba(245,158,11,.16);border-radius:12px;padding:14px 26px;font-size:17px}
table{width:100%;border-collapse:collapse;font-size:18px}th{background:var(--teal);color:#fff;text-align:left;padding:14px 14px}
td{padding:14px;border-bottom:1px solid #D5DEE8}tbody tr:nth-child(odd){background:var(--card)}td:first-child{color:var(--teal);font-weight:700}
.stepwrap{display:flex;gap:26px;height:500px}.panel{width:340px;flex:none;background:var(--navy);border-radius:14px;color:#fff;padding:26px 30px;display:flex;flex-direction:column}
.steplbl{color:var(--teal-l);font-size:18px;text-align:center}.panel .ic{margin:22px auto 40px}.panel small{color:var(--amber);font-weight:700;font-size:15px}.panel p{margin-top:6px}
.items{list-style:none;flex:1;display:flex;flex-direction:column;gap:12px}.items li{flex:1;display:flex;align-items:center;gap:20px;padding:12px 24px}
.items .n{width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none}
.items p{font-size:16px;margin-top:2px}
.codewrap{display:flex;gap:30px;height:430px}.checks{list-style:none;width:380px;flex:none;display:flex;flex-direction:column;justify-content:space-around}
.checks li{display:flex;gap:16px;align-items:flex-start}.checks p{font-size:16px}
pre{flex:1;background:var(--navy);color:#E2E8F0;border-radius:14px;padding:22px 26px;font:15px/1.6 ui-monospace,"Courier New",monospace;overflow:auto;white-space:pre}
.close{position:absolute;left:40px;top:80px;width:780px}.close .sub{font-size:23px;margin:10px 0 50px}
.checks.d{width:auto}.checks.d li{align-items:center;margin-bottom:22px;font-size:20px}
.circ.slate{background:var(--slate)}.circ.rose,.pill.rose{background:#E11D48}.circ.teal{background:var(--teal)}.pill.teal{background:var(--teal)}
.approx.vs{font-size:17px}
.title-l h1{font-size:54px}.title-l .meta{margin-top:40px}
.node .bot{position:absolute;right:-14px;top:-14px;width:50px;height:50px;border-radius:50%;background:var(--amber);padding:12px;display:flex}
.arch{display:flex;gap:26px;height:390px}.abox{display:flex;flex-direction:column;gap:12px}.mono{width:420px}.msa{flex:1}
.ux{background:var(--amber);color:#fff;font-weight:700;text-align:center;border-radius:10px;padding:10px;font-size:16px}
.mods{display:flex;gap:12px;flex:1}.mods div{flex:1;background:var(--teal);color:#fff;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px}
.db{background:var(--navy);color:#fff;font-weight:700;border-radius:50%/22px;display:flex;align-items:center;justify-content:center;font-size:15px;height:58px;width:130px}
.db.big{width:auto;height:64px}
.amber-t{color:var(--amber);font-size:14px}
.msarow{display:flex;gap:14px;flex:1}.gw{width:110px;background:var(--amber);color:#fff;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px}
.svcs{flex:1;display:flex;flex-direction:column;justify-content:space-around}.svcrow{display:flex;align-items:center;gap:14px}
.arr{color:var(--slate);font-size:22px}.svc{background:var(--teal);color:#fff;font-weight:700;border-radius:10px;padding:16px 0;width:190px;text-align:center;font-size:16px}
.circ.sm.amber{width:46px;height:46px;padding:11px}
pre.prose{font:16px/1.65 "Noto Sans KR","Noto Sans CJK KR",sans-serif;white-space:pre-wrap}
pre.dense{font-size:13.5px;line-height:1.5}
.circ.amber,.pill.amber{background:var(--amber)}
.title-l h1{font-size:46px}
.tl{gap:18px}.tl.c4{grid-template-columns:repeat(4,1fr);grid-auto-rows:196px}.tl.c3{grid-template-columns:repeat(3,1fr);grid-auto-rows:196px}
.tlc .yr{font-size:28px;font-weight:900;color:var(--teal)}.tlc h3{margin:8px 0 6px}.tlc.last{background:rgba(245,158,11,.14);border:2px solid var(--amber)}.tlc.last .yr{color:var(--amber)}
.qmark{position:absolute;left:30px;top:20px;width:96px;height:96px;color:var(--teal-l);opacity:.35}
.qwrap{position:absolute;left:46px;top:150px;right:46px}.qt{font-size:36px;font-weight:700;line-height:1.45}
.qby{color:var(--teal-l);font-size:18px;margin:22px 0 34px}.qadd{background:var(--amber);color:var(--navy);font-weight:700;font-size:23px;border-radius:12px;padding:18px 28px}
.stats{height:350px}.stats .card{padding:30px}.num{font-size:58px;font-weight:900;color:var(--teal);line-height:1.1}.num.neg{color:#E11D48}.stats h3{margin:16px 0 10px}
.loopwrap{display:flex;gap:24px;align-items:center}.loop{position:relative;width:740px;height:430px;flex:none}
.loop svg{width:100%;height:100%}.loop ellipse{fill:none;stroke:#C8D3DF;stroke-width:14}.loop text{fill:#B6C3D6;font:900 26px "Noto Sans KR",sans-serif;text-anchor:middle}
.lp{position:absolute;transform:translate(-50%,-50%);background:var(--slate);color:#fff;font-weight:700;font-size:15px;border-radius:99px;padding:7px 18px}
.lp.block{background:#E11D48;box-shadow:0 0 0 5px #fff,0 0 0 8px #E11D48}.lp.agent{background:var(--teal)}.lp.human{background:var(--amber)}
.legend{flex:1;display:flex;flex-direction:column;gap:14px}.legend .card{padding:16px 20px}.legend h3{font-size:18px;display:flex;align-items:center;gap:10px}
.dot{width:16px;height:16px;border-radius:50%;display:inline-block}.dot.slate{background:var(--slate)}.dot.rose{background:#E11D48}.dot.teal{background:var(--teal)}.dot.amber{background:var(--amber)}
#bar{position:fixed;left:0;bottom:0;height:4px;background:var(--teal);transition:width .2s}
#hud{position:fixed;right:14px;bottom:12px;display:flex;gap:8px;z-index:9}
#hud button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:8px;padding:8px 12px;font:600 14px "Noto Sans KR",sans-serif;cursor:pointer}
#hud button:hover{background:var(--teal)}
#noteview{position:fixed;left:0;right:0;bottom:0;max-height:30%;overflow:auto;background:#0b1220ee;color:#e2e8f0;padding:14px 24px;font-size:16px;display:none;z-index:8}
body.shownotes #noteview{display:block}
@media print{@page{size:1280px 720px;margin:0}html,body{background:#fff}#stage{position:static;display:block}
.slide{display:block!important;position:relative;transform:none!important;page-break-after:always;break-after:page}#hud,#bar,#noteview{display:none!important}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
</style></head><body>
<main id="stage"><section class="slide dark t-title" data-i="0" aria-label="슬라이드 1">
<div class="inner"><div class="title-l"><p class="kicker">디지털 트랜스포메이션 · DevOps · Docker — 2026 개정판</p><h1>AI 시대의 디지털 전환,<br>DevOps 그리고 컨테이너</h1>
<p class="sub">바이브 코딩과 코딩 에이전트까지 현행화</p><p class="meta">채문창 · 원본 → 2026 개정</p></div>
<svg class="net" viewBox="0 0 380 400"><g stroke="#0D9488" stroke-width="3" stroke-dasharray="8 7">
<line x1="60" y1="50" x2="300" y2="130"/><line x1="300" y1="130" x2="80" y2="260"/><line x1="80" y1="260" x2="310" y2="340"/></g></svg>
<div class="nodes"><div class="node " style="left:60px;top:50px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M475.115 163.781L336 252.309v-68.28c0-18.916-20.931-30.399-36.885-20.248L160 252.309V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h464c13.255 0 24-10.745 24-24V184.029c0-18.917-20.931-30.399-36.885-20.248z"></path></svg></span></div><div class="node " style="left:300px;top:130px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M471.1 96C405 96 353.3 137.3 320 174.6 286.7 137.3 235 96 168.9 96 75.8 96 0 167.8 0 256s75.8 160 168.9 160c66.1 0 117.8-41.3 151.1-78.6 33.3 37.3 85 78.6 151.1 78.6 93.1 0 168.9-71.8 168.9-160S564.2 96 471.1 96zM168.9 320c-40.2 0-72.9-28.7-72.9-64s32.7-64 72.9-64c38.2 0 73.4 36.1 94 64-20.4 27.6-55.9 64-94 64zm302.2 0c-38.2 0-73.4-36.1-94-64 20.4-27.6 55.9-64 94-64 40.2 0 72.9 28.7 72.9 64s-32.7 64-72.9 64z"></path></svg></span></div><div class="node " style="left:80px;top:260px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path></svg></span></div><div class="node amber" style="left:310px;top:340px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span></div></div></div>
<span class="pg">1</span>
<aside class="notes">원본은 Docker 기반 개발 환경까지를 다뤘습니다. 개정판은 같은 흐름을 따라가되, 그 사이 등장한 생성형 AI와 코딩 에이전트가 각 장의 결론을 어떻게 바꿨는지를 덧붙였습니다.</aside></section>
<section class="slide light t-cards" data-i="1" aria-label="슬라이드 2">
<div class="inner"><h2>발표에 앞서 — 지식이 아닌 큰 줄거리</h2><p class="lead">원본의 첫 질문 세 개를 2026년에 다시 던집니다</p><div class="grid g3">
<div class="card vcard"><div class="row-sb"><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg></span><span class="pill slate">위치</span></div><h3 class="big">나는 어디에?</h3><p>코드를 직접 쓰는 개발자에서<br>에이전트에게 일을 맡기고 검증하는 개발자로 바뀌는 중</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M225.38 233.37c-12.5 12.5-12.5 32.76 0 45.25 12.49 12.5 32.76 12.5 45.25 0 12.5-12.5 12.5-32.76 0-45.25-12.5-12.49-32.76-12.49-45.25 0zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm126.14 148.05L308.17 300.4a31.938 31.938 0 0 1-15.77 15.77l-144.34 65.97c-16.65 7.61-33.81-9.55-26.2-26.2l65.98-144.35a31.938 31.938 0 0 1 15.77-15.77l144.34-65.97c16.65-7.6 33.8 9.55 26.19 26.2z"></path></svg></span><span class="pill teal">현황</span></div><h3 class="big">현재 상황은?</h3><p>개발자 90%가 AI를 쓰고(DORA 2025)<br>코드 작성 비용은 거의 0에 가까워짐</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg></span><span class="pill amber">방향</span></div><h3 class="big">어디로 가야 하나?</h3><p>무엇을 만들지 정하고(명세)<br>맞게 만들었는지 확인하는(검증) 역량으로</p>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">2</span>
</section>
<section class="slide light t-compare" data-i="2" aria-label="슬라이드 3">
<div class="inner"><h2>원본 이후, 무엇이 바뀌었나</h2><div class="ana">
<div class="card side"><div class="row-sb"><span class="pill slate">원본 (2017~2020)</span><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M475.115 163.781L336 252.309v-68.28c0-18.916-20.931-30.399-36.885-20.248L160 252.309V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h464c13.255 0 24-10.745 24-24V184.029c0-18.917-20.931-30.399-36.885-20.248z"></path></svg></span></div>
<h3>디지털 전환 · 사람이 코딩</h3><ul><li>디지털 트랜스포메이션(DX)</li><li>DevOps로 빌드 · 배포 자동화</li><li>Docker로 개발 환경 표준화</li></ul></div><div class="approx">→</div>
<div class="card side"><div class="row-sb"><span class="pill ">2026 지금</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span></div>
<h3>AI 전환 · 에이전트가 코딩</h3><ul><li>AI 트랜스포메이션(AX)</li><li>DevOps + 코딩 에이전트</li><li>컨테이너 = 에이전트의 안전한 작업장</li></ul></div></div>
<div class="take">원본의 결론 '가장 비싼 자원(YOU)을 최적화하라'는 오히려 더 맞는 말이 되었습니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">3</span>
</section>
<section class="slide light t-agenda" data-i="3" aria-label="슬라이드 4">
<div class="inner"><h2>오늘의 순서</h2><p class="lead">원본 288쪽의 흐름 그대로, 각 장 끝에 2026년의 답을 붙였습니다</p><div class="grid g4"><div class="card tile">
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm95.8 32.6L272 480l-32-136 32-56h-96l32 56-32 136-47.8-191.4C56.9 292 0 350.3 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-72.1-56.9-130.4-128.2-133.8z"></path></svg></span><b class="num">01</b></div>
<h3>발표자 소개</h3><p class="muted sm">35년 개발 여정과 기록</p></div><div class="card tile">
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M504 255.531c.253 136.64-111.18 248.372-247.82 248.468-59.015.042-113.223-20.53-155.822-54.911-11.077-8.94-11.905-25.541-1.839-35.607l11.267-11.267c8.609-8.609 22.353-9.551 31.891-1.984C173.062 425.135 212.781 440 256 440c101.705 0 184-82.311 184-184 0-101.705-82.311-184-184-184-48.814 0-93.149 18.969-126.068 49.932l50.754 50.754c10.08 10.08 2.941 27.314-11.313 27.314H24c-8.837 0-16-7.163-16-16V38.627c0-14.254 17.234-21.393 27.314-11.314l49.372 49.372C129.209 34.136 189.552 8 256 8c136.81 0 247.747 110.78 248 247.531zm-180.912 78.784l9.823-12.63c8.138-10.463 6.253-25.542-4.21-33.679L288 256.349V152c0-13.255-10.745-24-24-24h-16c-13.255 0-24 10.745-24 24v135.651l65.409 50.874c10.463 8.137 25.541 6.253 33.679-4.21z"></path></svg></span><b class="num">02</b></div>
<h3>변화의 연속성</h3><p class="muted sm">UI · 언어 · 개발 환경</p></div><div class="card tile">
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M475.115 163.781L336 252.309v-68.28c0-18.916-20.931-30.399-36.885-20.248L160 252.309V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h464c13.255 0 24-10.745 24-24V184.029c0-18.917-20.931-30.399-36.885-20.248z"></path></svg></span><b class="num">03</b></div>
<h3>DX에서 AX로</h3><p class="muted sm">산업혁명 · 시가총액 · 사례</p></div><div class="card tile">
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M0 405.3V448c0 35.3 86 64 192 64s192-28.7 192-64v-42.7C342.7 434.4 267.2 448 192 448S41.3 434.4 0 405.3zM320 128c106 0 192-28.7 192-64S426 0 320 0 128 28.7 128 64s86 64 192 64zM0 300.4V352c0 35.3 86 64 192 64s192-28.7 192-64v-51.6c-41.3 34-116.9 51.6-192 51.6S41.3 334.4 0 300.4zm416 11c57.3-11.1 96-31.7 96-55.4v-42.7c-23.2 16.4-57.3 27.6-96 34.5v63.6zM192 160C86 160 0 195.8 0 240s86 80 192 80 192-35.8 192-80-86-80-192-80zm219.3 56.3c60-10.8 100.7-32 100.7-56.3v-42.7c-35.5 25.1-96.5 38.6-160.7 41.8 29.5 14.3 51.2 33.5 60 57.2z"></path></svg></span><b class="num">04</b></div>
<h3>자원과 비용</h3><p class="muted sm">가장 비싼 자원은 누구인가</p></div><div class="card tile">
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M471.1 96C405 96 353.3 137.3 320 174.6 286.7 137.3 235 96 168.9 96 75.8 96 0 167.8 0 256s75.8 160 168.9 160c66.1 0 117.8-41.3 151.1-78.6 33.3 37.3 85 78.6 151.1 78.6 93.1 0 168.9-71.8 168.9-160S564.2 96 471.1 96zM168.9 320c-40.2 0-72.9-28.7-72.9-64s32.7-64 72.9-64c38.2 0 73.4 36.1 94 64-20.4 27.6-55.9 64-94 64zm302.2 0c-38.2 0-73.4-36.1-94-64 20.4-27.6 55.9-64 94-64 40.2 0 72.9 28.7 72.9 64s-32.7 64-72.9 64z"></path></svg></span><b class="num">05</b></div>
<h3>DevOps 진화</h3><p class="muted sm">단계별 도구와 DORA 지표</p></div><div class="card tile">
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path></svg></span><b class="num">06</b></div>
<h3>컨테이너</h3><p class="muted sm">클라우드 · 12-Factor · devcontainer</p></div><div class="card tile">
<div class="row-sb"><span class="ic circ amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span><b class="num">07</b></div>
<h3>무인화 걸림돌</h3><p class="muted sm">Code · Plan, 그 후</p></div><div class="card tile">
<div class="row-sb"><span class="ic circ amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M243.2 189.9V258c26.1 5.9 49.3 15.6 73.6 22.3v-68.2c-26-5.8-49.4-15.5-73.6-22.2zm223.3-123c-34.3 15.9-76.5 31.9-117 31.9C296 98.8 251.7 64 184.3 64c-25 0-47.3 4.4-68 12 2.8-7.3 4.1-15.2 3.6-23.6C118.1 24 94.8 1.2 66.3 0 34.3-1.3 8 24.3 8 56c0 19 9.5 35.8 24 45.9V488c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24v-94.4c28.3-12.1 63.6-22.1 114.4-22.1 53.6 0 97.8 34.8 165.2 34.8 48.2 0 86.7-16.3 122.5-40.9 8.7-6 13.8-15.8 13.8-26.4V95.9c.1-23.3-24.2-38.8-45.4-29zM169.6 325.5c-25.8 2.7-50 8.2-73.6 16.6v-70.5c26.2-9.3 47.5-15 73.6-17.4zM464 191c-23.6 9.8-46.3 19.5-73.6 23.9V286c24.8-3.4 51.4-11.8 73.6-26v70.5c-25.1 16.1-48.5 24.7-73.6 27.1V286c-27 3.7-47.9 1.5-73.6-5.6v67.4c-23.9-7.4-47.3-16.7-73.6-21.3V258c-19.7-4.4-40.8-6.8-73.6-3.8v-70c-22.4 3.1-44.6 10.2-73.6 20.9v-70.5c33.2-12.2 50.1-19.8 73.6-22v71.6c27-3.7 48.4-1.3 73.6 5.7v-67.4c23.7 7.4 47.2 16.7 73.6 21.3v68.4c23.7 5.3 47.6 6.9 73.6 2.7V143c27-4.8 52.3-13.6 73.6-22.5z"></path></svg></span><b class="num">08</b></div>
<h3>마치며</h3><p class="muted sm">Change · Challenge · Chance</p></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">4</span>
</section>
<section class="slide dark t-section" data-i="4" aria-label="슬라이드 5">
<div class="inner"><div class="sec"><div class="no">01</div><h1>발표자 소개</h1><p class="sub muted-d">60살까지 개발하겠다던 약속, 그 후</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm95.8 32.6L272 480l-32-136 32-56h-96l32 56-32 136-47.8-191.4C56.9 292 0 350.3 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-72.1-56.9-130.4-128.2-133.8z"></path></svg></span></div>
<span class="pg">5</span>
</section>
<section class="slide light t-timeline" data-i="5" aria-label="슬라이드 6">
<div class="inner"><h2>35년의 개발 여정</h2><p class="lead">여섯 번의 직장과 스타트업, 그리고 지금</p><div class="grid tl c4"><div class="card tlc">
<div class="yr">1986</div><h3>BASIC 첫 만남</h3><p class="muted sm">고교 축제, '60살까지 개발' 다짐</p></div><div class="card tlc">
<div class="yr">1990</div><h3>첫 스타트업</h3><p class="muted sm">KT 옐로페이지 검색 · NEIS</p></div><div class="card tlc">
<div class="yr">1996</div><h3>두 번째</h3><p class="muted sm">번역관리 · 조달 Web EDI</p></div><div class="card tlc">
<div class="yr">2001</div><h3>세 번째</h3><p class="muted sm">SAP R3 생체인증 보안</p></div><div class="card tlc">
<div class="yr">2005</div><h3>네 번째</h3><p class="muted sm">CEP 상관분석 · Anti-DDoS</p></div><div class="card tlc">
<div class="yr">2012</div><h3>첫 직장</h3><p class="muted sm">제품 + 기술지원 + 사업</p></div><div class="card tlc">
<div class="yr">2017</div><h3>두 번째 직장</h3><p class="muted sm">온프레미스 + SaaS</p></div><div class="card tlc last">
<div class="yr">2026</div><h3>이즈잇소프트</h3><p class="muted sm">1인 기업 · 산업 AI · 스마트팩토리</p></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">6</span>
<aside class="notes">원본 14쪽에 '2025년에도 35년째, 60살까지 개발할 예정'이라고 썼습니다. 2026년 현재 35년째 개발 중이며, 이제는 코딩 에이전트와 함께 1인 기업을 운영합니다.</aside></section>
<section class="slide light t-compare" data-i="6" aria-label="슬라이드 7">
<div class="inner"><h2>블로그를 시작한 이유, 그리고 기록의 새 독자</h2><div class="ana">
<div class="card side"><div class="row-sb"><span class="pill slate">블로그 기록</span><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22 18.2 6.8 31.3 24.4 31.3 45 0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7 54.4-11.4 98.3-55.4 109.7-109.7 17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9 129.4 7 233.4 112 240.9 241.5.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9 76.8 6.3 138 68.2 144.9 145.2.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3-8.4-110.1-96.5-198.2-206.6-206.7z"></path></svg></span></div>
<h3>나와 남을 위한 기록</h3><ul><li>기억력 감퇴에 대비</li><li>내가 하는 일의 기록</li><li>남의 시행착오 시간을 줄이기</li></ul></div><div class="approx">→</div>
<div class="card side"><div class="row-sb"><span class="pill ">2026 기록</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"></path></svg></span></div>
<h3>에이전트도 읽는 기록</h3><ul><li>README · AGENTS.md · ADR이 에이전트의 기억</li><li>기록을 잘하는 사람이 에이전트도 잘 쓴다</li><li>플랫폼은 사라진다 → 내 git 저장소에</li></ul></div></div>
<div class="take">기록하는 습관은 AI 시대의 가장 강력한 개발 역량입니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">7</span>
<aside class="notes">원본에 소개한 이글루스 블로그는 2023년에 서비스를 종료했습니다. 기록은 내가 소유한 저장소에 남겨야 한다는 교훈이기도 합니다.</aside></section>
<section class="slide dark t-section" data-i="7" aria-label="슬라이드 8">
<div class="inner"><div class="sec"><div class="no">02</div><h1>변화의 연속성</h1><p class="sub muted-d">기술은 바뀌어도 흐름은 이어진다</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M504 255.531c.253 136.64-111.18 248.372-247.82 248.468-59.015.042-113.223-20.53-155.822-54.911-11.077-8.94-11.905-25.541-1.839-35.607l11.267-11.267c8.609-8.609 22.353-9.551 31.891-1.984C173.062 425.135 212.781 440 256 440c101.705 0 184-82.311 184-184 0-101.705-82.311-184-184-184-48.814 0-93.149 18.969-126.068 49.932l50.754 50.754c10.08 10.08 2.941 27.314-11.313 27.314H24c-8.837 0-16-7.163-16-16V38.627c0-14.254 17.234-21.393 27.314-11.314l49.372 49.372C129.209 34.136 189.552 8 256 8c136.81 0 247.747 110.78 248 247.531zm-180.912 78.784l9.823-12.63c8.138-10.463 6.253-25.542-4.21-33.679L288 256.349V152c0-13.255-10.745-24-24-24h-16c-13.255 0-24 10.745-24 24v135.651l65.409 50.874c10.463 8.137 25.541 6.253 33.679-4.21z"></path></svg></span></div>
<span class="pg">8</span>
</section>
<section class="slide light t-timeline" data-i="8" aria-label="슬라이드 9">
<div class="inner"><h2>UI의 연속성</h2><p class="lead">화면을 그리는 방식에서, 말로 시키는 방식까지</p><div class="grid tl c4"><div class="card tlc">
<div class="yr">1987</div><h3>CLI · Text UI</h3><p class="muted sm">명령어와 텍스트 화면</p></div><div class="card tlc">
<div class="yr">1993</div><h3>RAD</h3><p class="muted sm">Delphi · VB · PowerBuilder</p></div><div class="card tlc">
<div class="yr">1996</div><h3>Web App</h3><p class="muted sm">PHP · ASP · JSP</p></div><div class="card tlc">
<div class="yr">2001</div><h3>X-Internet</h3><p class="muted sm">Thick + Thin Client</p></div><div class="card tlc">
<div class="yr">2005</div><h3>RIA</h3><p class="muted sm">Flex · Silverlight</p></div><div class="card tlc">
<div class="yr">2010</div><h3>SPA</h3><p class="muted sm">HTML5 · CSS3 · REST API</p></div><div class="card tlc">
<div class="yr">2017</div><h3>PWA</h3><p class="muted sm">오프라인 · 설치 · 푸시</p></div><div class="card tlc last">
<div class="yr">2024~</div><h3>대화 · 에이전트 UI</h3><p class="muted sm">채팅 · 음성, 에이전트가 앱을 사용</p></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">9</span>
<aside class="notes">원본 68~77쪽의 PWA 10가지 특징은 지금도 웹 앱의 기본기입니다. 새로 추가된 것은 사람 대신 AI 에이전트가 UI나 API를 사용하는 흐름입니다.</aside></section>
<section class="slide light t-timeline" data-i="9" aria-label="슬라이드 10">
<div class="inner"><h2>개발 언어의 연속성</h2><p class="lead">마지막 칸의 언어는 '자연어'입니다</p><div class="grid tl c4"><div class="card tlc">
<div class="yr">1987</div><h3>C</h3><p class="muted sm">애플리케이션 · 커널</p></div><div class="card tlc">
<div class="yr">1992</div><h3>C++</h3><p class="muted sm">애플리케이션 · 라이브러리</p></div><div class="card tlc">
<div class="yr">1994</div><h3>Perl</h3><p class="muted sm">관리 도구</p></div><div class="card tlc">
<div class="yr">1997</div><h3>Java</h3><p class="muted sm">WAS · JSP</p></div><div class="card tlc">
<div class="yr">2008</div><h3>Python</h3><p class="muted sm">지금까지 주력 (^^)</p></div><div class="card tlc">
<div class="yr">2012</div><h3>JavaScript</h3><p class="muted sm">DOM 위젯 · 프레젠테이션</p></div><div class="card tlc">
<div class="yr">2015</div><h3>Go</h3><p class="muted sm">Docker · InfluxDB · Grafana</p></div><div class="card tlc last">
<div class="yr">2023~</div><h3>자연어 + 코드</h3><p class="muted sm">명세는 말로, 검증은 코드로</p></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">10</span>
</section>
<section class="slide light t-timeline" data-i="10" aria-label="슬라이드 11">
<div class="inner"><h2>개발 환경의 연속성</h2><p class="lead">35년 만에 다시 터미널로 — vi에서 시작해 터미널 에이전트로</p><div class="grid tl c3"><div class="card tlc">
<div class="yr">1991</div><h3>vi</h3><p class="muted sm">디버깅 · 텍스트 처리</p></div><div class="card tlc">
<div class="yr">1996</div><h3>Visual Studio</h3><p class="muted sm">RAD, 화면 = 코드</p></div><div class="card tlc">
<div class="yr">2005</div><h3>Eclipse</h3><p class="muted sm">Java · CDT</p></div><div class="card tlc">
<div class="yr">2010</div><h3>PyCharm</h3><p class="muted sm">JetBrains IDE</p></div><div class="card tlc">
<div class="yr">2021~</div><h3>IDE + AI 보조</h3><p class="muted sm">자동완성 · 채팅 · 편집</p></div><div class="card tlc last">
<div class="yr">2025~</div><h3>터미널 에이전트</h3><p class="muted sm">claude · codex · agy + tmux</p></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">11</span>
</section>
<section class="slide light t-cards" data-i="11" aria-label="슬라이드 12">
<div class="inner"><h2>그럼에도 불구하고 변치 않는 것</h2><p class="lead">원본 105~108쪽의 3계층은 그대로입니다. 바뀐 것은 '누가 작성하느냐'뿐</p><div class="grid g3">
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"></path></svg></span><span class="pill teal">에이전트</span></div><h3 class="big">Presentation</h3><p>사용자 UI · UX<br>화면 코드는 에이전트가 가장 잘 만드는 영역</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M208 0c-29.9 0-54.7 20.5-61.8 48.2-.8 0-1.4-.2-2.2-.2-35.3 0-64 28.7-64 64 0 4.8.6 9.5 1.7 14C52.5 138 32 166.6 32 200c0 12.6 3.2 24.3 8.3 34.9C16.3 248.7 0 274.3 0 304c0 33.3 20.4 61.9 49.4 73.9-.9 4.6-1.4 9.3-1.4 14.1 0 39.8 32.2 72 72 72 4.1 0 8.1-.5 12-1.2 9.6 28.5 36.2 49.2 68 49.2 39.8 0 72-32.2 72-72V64c0-35.3-28.7-64-64-64zm368 304c0-29.7-16.3-55.3-40.3-69.1 5.2-10.6 8.3-22.3 8.3-34.9 0-33.4-20.5-62-49.7-74 1-4.5 1.7-9.2 1.7-14 0-35.3-28.7-64-64-64-.8 0-1.5.2-2.2.2C422.7 20.5 397.9 0 368 0c-35.3 0-64 28.6-64 64v376c0 39.8 32.2 72 72 72 31.8 0 58.4-20.7 68-49.2 3.9.7 7.9 1.2 12 1.2 39.8 0 72-32.2 72-72 0-4.8-.5-9.5-1.4-14.1 29-12 49.4-40.6 49.4-73.9z"></path></svg></span><span class="pill amber">사람</span></div><h3 class="big">Domain Logic</h3><p>UI 없는 업무 규칙<br>도메인을 이해한 사람만이 맞는지 판단할 수 있음</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z"></path></svg></span><span class="pill slate">함께</span></div><h3 class="big">Data Access</h3><p>저장소 접근<br>코드는 에이전트가, 스키마와 마이그레이션 승인은 사람이</p>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">12</span>
</section>
<section class="slide dark t-section" data-i="12" aria-label="슬라이드 13">
<div class="inner"><div class="sec"><div class="no">03</div><h1>디지털 전환에서 AI 전환으로</h1><p class="sub muted-d">DX(Digital Transformation) → AX(AI Transformation)</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M475.115 163.781L336 252.309v-68.28c0-18.916-20.931-30.399-36.885-20.248L160 252.309V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h464c13.255 0 24-10.745 24-24V184.029c0-18.917-20.931-30.399-36.885-20.248z"></path></svg></span></div>
<span class="pg">13</span>
</section>
<section class="slide light t-table" data-i="13" aria-label="슬라이드 14">
<div class="inner"><h2>산업혁명 비교표 — 2026 칸을 더하다</h2><p class="lead">원본 110~138쪽에서 한 칸씩 채워 가던 표입니다</p><table style="font-size:14.3px"><colgroup><col style="width:12.222222222222223%"><col style="width:15.000000000000002%"><col style="width:16.666666666666664%"><col style="width:16.11111111111111%"><col style="width:19.444444444444446%"><col style="width:20.555555555555557%"></colgroup>
<thead><tr><th></th><th>1차</th><th>2차</th><th>3차</th><th>4차</th><th>2026 지금</th></tr></thead>
<tbody><tr><td>시기</td><td>1784</td><td>1870</td><td>1969</td><td>… 2020</td><td>2023~ 생성형 AI</td></tr><tr><td>에너지</td><td>석탄</td><td>석유</td><td>전기</td><td>재생에너지</td><td>AI 데이터센터 전력</td></tr><tr><td>소통</td><td>전신</td><td>전화</td><td>인터넷</td><td>사물인터넷</td><td>사람 ↔ AI 대화</td></tr><tr><td>운송</td><td>철도</td><td>자동차</td><td>스마트운송</td><td>로컬생산(3D 프린터)</td><td>자율주행</td></tr><tr><td>영향력</td><td>소비재 · 경공업</td><td>전기화학 · 중화학</td><td>정보통신</td><td>모든 산업</td><td>모든 지식노동</td></tr><tr><td>패러다임</td><td>기계</td><td>대량생산</td><td>디지털</td><td>인공지능</td><td>AI 에이전트</td></tr><tr><td>키워드</td><td>증기</td><td>전기</td><td>통신 · 정보</td><td>무인 · 데이터</td><td>자동화된 판단</td></tr></tbody></table></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">14</span>
</section>
<section class="slide light t-table" data-i="14" aria-label="슬라이드 15">
<div class="inner"><h2>글로벌 시가총액 상위 5개 기업의 변화</h2><p class="lead">에너지 · 금융 → 플랫폼 → AI 인프라</p><table style="font-size:18.2px"><colgroup><col style="width:13.333333333333334%"><col style="width:28.888888888888893%"><col style="width:28.888888888888893%"><col style="width:28.888888888888893%"></colgroup>
<thead><tr><th>순위</th><th>2007</th><th>2017</th><th>2026 (11월)</th></tr></thead>
<tbody><tr><td>1위</td><td>페트로차이나</td><td>애플</td><td>애플</td></tr><tr><td>2위</td><td>엑슨모빌</td><td>알파벳(구글)</td><td>엔비디아</td></tr><tr><td>3위</td><td>제너럴일렉트릭</td><td>마이크로소프트</td><td>마이크로소프트</td></tr><tr><td>4위</td><td>차이나모바일</td><td>아마존</td><td>알파벳(구글)</td></tr><tr><td>5위</td><td>중국공상은행</td><td>페이스북</td><td>아마존</td></tr></tbody></table><div class="note">2026년은 2026-11-02 종가 기준 (chartrow.com). AI 칩 회사가 세계 2위가 되었습니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">15</span>
</section>
<section class="slide dark t-quote" data-i="15" aria-label="슬라이드 16">
<div class="inner"><span class="ic qmark"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path></svg></span><div class="qwrap"><p class="qt">디지털 트랜스포메이션 혁신은 모든 산업에 대하여 피할 수 없는 과정이며, 변화에 성공한 기업만이 살아남을 수 있다.</p><p class="qby">— 원본 141쪽</p><div class="qadd">2026년, 그 변화의 이름은 AI 트랜스포메이션입니다</div></div></div>
<span class="pg">16</span>
</section>
<section class="slide light t-table" data-i="16" aria-label="슬라이드 17">
<div class="inner"><h2>원본 속 사례, 그 후</h2><p class="lead">원본 142~153쪽에서 소개한 디지털 전환 사례들의 현재</p><table style="font-size:15.600000000000001px"><colgroup><col style="width:25.555555555555554%"><col style="width:25.555555555555554%"><col style="width:48.88888888888889%"></colgroup>
<thead><tr><th>사례</th><th>원본 당시 기대</th><th>2026년 현재</th></tr></thead>
<tbody><tr><td>IBM Watson</td><td>AI 의료 혁신</td><td>2022년 Watson Health 매각, watsonx로 재편</td></tr><tr><td>adidas Speedfactory</td><td>로봇 공장 생산 귀환</td><td>2019년 폐쇄 발표, 기술은 아시아 협력사로</td></tr><tr><td>GE Predix</td><td>산업 IoT 플랫폼</td><td>야심 축소, GE Vernova 소프트웨어 부문으로</td></tr><tr><td>Siemens MindSphere</td><td>산업 IoT 운영체제</td><td>Insights Hub로 이름을 바꿔 Xcelerator에 통합</td></tr><tr><td>NVIDIA</td><td>GPU 기반 AI 플랫폼</td><td>시가총액 세계 2위의 AI 인프라 기업</td></tr></tbody></table><div class="note">교훈: '플랫폼'을 선언한 기업보다 고객의 문제를 푼 소프트웨어와 인프라가 살아남았다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">17</span>
</section>
<section class="slide light t-compare" data-i="17" aria-label="슬라이드 18">
<div class="inner"><h2>소프트웨어가 제조를 먹고, AI가 소프트웨어를 쓴다</h2><div class="ana">
<div class="card side"><div class="row-sb"><span class="pill slate">원본의 결론</span><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M475.115 163.781L336 252.309v-68.28c0-18.916-20.931-30.399-36.885-20.248L160 252.309V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h464c13.255 0 24-10.745 24-24V184.029c0-18.917-20.931-30.399-36.885-20.248z"></path></svg></span></div>
<h3>소프트웨어 업체가 제조를 인수</h3><ul><li>제조를 돕는 IT → 제조를 이끄는 SW</li><li>플랫폼 · 클라우드 경쟁</li><li>개발자 확보가 곧 경쟁력</li></ul></div><div class="approx">→</div>
<div class="card side"><div class="row-sb"><span class="pill ">2026</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span></div>
<h3>AI가 소프트웨어 개발을 바꿈</h3><ul><li>코드 작성 · 테스트 · 운영 분석까지</li><li>1인 · 작은 팀도 제품을 만든다</li><li>도메인 지식 + AI 활용이 경쟁력</li></ul></div></div>
<div class="take">산업 AI는 현장을 아는 작은 팀에게 가장 큰 기회입니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">18</span>
</section>
<section class="slide dark t-section" data-i="18" aria-label="슬라이드 19">
<div class="inner"><div class="sec"><div class="no">04</div><h1>자원과 비용</h1><p class="sub muted-d">가장 비싼 자원을 최적화하라 — 그 자원은 누구인가</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M0 405.3V448c0 35.3 86 64 192 64s192-28.7 192-64v-42.7C342.7 434.4 267.2 448 192 448S41.3 434.4 0 405.3zM320 128c106 0 192-28.7 192-64S426 0 320 0 128 28.7 128 64s86 64 192 64zM0 300.4V352c0 35.3 86 64 192 64s192-28.7 192-64v-51.6c-41.3 34-116.9 51.6-192 51.6S41.3 334.4 0 300.4zm416 11c57.3-11.1 96-31.7 96-55.4v-42.7c-23.2 16.4-57.3 27.6-96 34.5v63.6zM192 160C86 160 0 195.8 0 240s86 80 192 80 192-35.8 192-80-86-80-192-80zm219.3 56.3c60-10.8 100.7-32 100.7-56.3v-42.7c-35.5 25.1-96.5 38.6-160.7 41.8 29.5 14.3 51.2 33.5 60 57.2z"></path></svg></span></div>
<span class="pg">19</span>
</section>
<section class="slide light t-cards" data-i="19" aria-label="슬라이드 20">
<div class="inner"><h2>자원 비용의 역전, 그리고 한 번 더</h2><p class="lead">원본 165~186쪽: 과거에는 컴퓨터가, 지금은 사람이 더 비싸다</p><div class="grid g3">
<div class="card vcard"><div class="row-sb"><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M416 48v416c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h224c26.51 0 48 21.49 48 48zm96 58v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42V88h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zM30 376h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6z"></path></svg></span><span class="pill slate">1955~</span></div><h3 class="big">컴퓨터가 비쌌다</h3><p>1955년 4.5MB 코드, 1956년 5MB HDD.<br>개발이 느려도 최소 자원으로 최적화.</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg></span><span class="pill teal">원본</span></div><h3 class="big">사람이 더 비싸다</h3><p>자원을 더 써도 빨리 개발.<br>위챗은 10명이 1억 명 서비스.</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span><span class="pill amber">2026</span></div><h3 class="big">토큰이라는 새 비용</h3><p>사람 &gt; AI 토큰 &gt; 컴퓨터.<br>1인 + 에이전트로 서비스, 가장 비싼 건 사람의 판단.</p>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">20</span>
</section>
<section class="slide light t-table" data-i="20" aria-label="슬라이드 21">
<div class="inner"><h2>CPU 1사이클을 1초로 늘려 보면</h2><p class="lead">원본 170~178쪽의 비유에 마지막 두 줄을 더했습니다</p><table style="font-size:15.600000000000001px"><colgroup><col style="width:37.77777777777778%"><col style="width:28.888888888888893%"><col style="width:33.33333333333333%"></colgroup>
<thead><tr><th>작업</th><th>실제 시간(대략)</th><th>1사이클 = 1초로 환산</th></tr></thead>
<tbody><tr><td>CPU 1 사이클</td><td>0.3 ns</td><td>1초</td></tr><tr><td>메모리 접근</td><td>약 100 ns</td><td>6분</td></tr><tr><td>SSD 읽기</td><td>50~150 μs</td><td>2~6일</td></tr><tr><td>HDD 읽기</td><td>1~10 ms</td><td>1~12개월</td></tr><tr><td>샌프란시스코 → 뉴욕 왕복</td><td>40 ms</td><td>4년</td></tr><tr><td>VM 재부팅</td><td>4초</td><td>423년</td></tr><tr><td>LLM API 응답 1회</td><td>2~10초</td><td>약 200~1,000년</td></tr><tr><td>코딩 에이전트 작업 1회</td><td>약 10분</td><td>약 6만 년</td></tr></tbody></table></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">21</span>
<aside class="notes">에이전트는 컴퓨터 기준으로는 엄청나게 느립니다. 그래서 '컴퓨터 시간'이 아니라 '사람 시간'과 비교해야 합니다. 사람이 하루 걸릴 일을 10분에 끝내면 충분히 싸다는 계산입니다.</aside></section>
<section class="slide dark t-quote" data-i="21" aria-label="슬라이드 22">
<div class="inner"><span class="ic qmark"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path></svg></span><div class="qwrap"><p class="qt">가장 비싼 자원(YOU)을 최적화하세요.</p><p class="qby">— 원본 187쪽</p><div class="qadd">2026년의 YOU는 '시간'보다 '판단과 주의력'이 가장 비쌉니다</div></div></div>
<span class="pg">22</span>
</section>
<section class="slide light t-cards" data-i="22" aria-label="슬라이드 23">
<div class="inner"><h2>현재 개발 패러다임 — 원본 → 2026</h2><p class="lead">원본 188~190쪽의 세 가지를 다시 씁니다</p><div class="grid g3">
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path></svg></span><span class="pill teal">188쪽</span></div><h3 class="big">언어</h3><p>원본: 가독성 좋고 생산적인 언어<br>2026: 자연어 명세 + 사람이 리뷰할 수 있는 언어</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"></path></svg></span><span class="pill teal">189쪽</span></div><h3 class="big">구조</h3><p>원본: MSA (팀 · 네트워크 기반)<br>2026: 모듈러 모놀리스 먼저, 필요하면 MSA</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg></span><span class="pill teal">190쪽</span></div><h3 class="big">운영</h3><p>원본: DevOps · NoOps로 최소 인원<br>2026: DevOps + 에이전트로 1인 운영까지</p>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">23</span>
</section>
<section class="slide light t-cards" data-i="23" aria-label="슬라이드 24">
<div class="inner"><h2>그래도 Python인가?</h2><p class="lead">GitHub Octoverse 2025: TypeScript가 처음 1위, Python은 2위이자 신규 AI 저장소의 절반 가까이</p><div class="grid g2">
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z"></path></svg></span><div><div class="row-sb"><h3>배우기 쉬움</h3><span class="pill amber">여전히</span></div><p>에이전트가 쓴 코드를 사람이 읽고 고치기 쉬움</p></div>
</div>
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z"></path></svg></span><div><div class="row-sb"><h3>생산성</h3><span class="pill amber">강화</span></div><p>LLM SDK · 데이터 · ML 생태계의 중심</p></div>
</div>
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M574.1 280.37L528.75 98.66c-5.91-23.7-21.59-44.05-43-55.81-21.44-11.73-46.97-14.11-70.19-6.33l-15.25 5.08c-8.39 2.79-12.92 11.86-10.12 20.24l5.06 15.18c2.79 8.38 11.85 12.91 20.23 10.12l13.18-4.39c10.87-3.62 23-3.57 33.16 1.73 10.29 5.37 17.57 14.56 20.37 25.82l38.46 153.82c-22.19-6.81-49.79-12.46-81.2-12.46-34.77 0-73.98 7.02-114.85 26.74h-73.18c-40.87-19.74-80.08-26.75-114.86-26.75-31.42 0-59.02 5.65-81.21 12.46l38.46-153.83c2.79-11.25 10.09-20.45 20.38-25.81 10.16-5.3 22.28-5.35 33.15-1.73l13.17 4.39c8.38 2.79 17.44-1.74 20.23-10.12l5.06-15.18c2.8-8.38-1.73-17.45-10.12-20.24l-15.25-5.08c-23.22-7.78-48.75-5.41-70.19 6.33-21.41 11.77-37.09 32.11-43 55.8L1.9 280.37A64.218 64.218 0 0 0 0 295.86v70.25C0 429.01 51.58 480 115.2 480h37.12c60.28 0 110.37-45.94 114.88-105.37l2.93-38.63h35.75l2.93 38.63C313.31 434.06 363.4 480 423.68 480h37.12c63.62 0 115.2-50.99 115.2-113.88v-70.25c0-5.23-.64-10.43-1.9-15.5zm-370.72 89.42c-1.97 25.91-24.4 46.21-51.06 46.21H115.2C86.97 416 64 393.62 64 366.11v-37.54c18.12-6.49 43.42-12.92 72.58-12.92 23.86 0 47.26 4.33 69.93 12.92l-3.13 41.22zM512 366.12c0 27.51-22.97 49.88-51.2 49.88h-37.12c-26.67 0-49.1-20.3-51.06-46.21l-3.13-41.22c22.67-8.59 46.08-12.92 69.95-12.92 29.12 0 54.43 6.44 72.55 12.93v37.54z"></path></svg></span><div><div class="row-sb"><h3>가독성</h3><span class="pill amber">더 중요</span></div><p>리뷰가 곧 개발 — 읽기 쉬운 코드가 이긴다</p></div>
</div>
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg></span><div><div class="row-sb"><h3>커뮤니티</h3><span class="pill amber">변화</span></div><p>웹 프런트는 TypeScript, AI · 백엔드는 Python 병행</p></div>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">24</span>
</section>
<section class="slide dark t-section" data-i="24" aria-label="슬라이드 25">
<div class="inner"><div class="sec"><div class="no">05</div><h1>DevOps의 진화</h1><p class="sub muted-d">개발 사이클이 끊임없이 도는 구조에 에이전트가 들어왔다</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M471.1 96C405 96 353.3 137.3 320 174.6 286.7 137.3 235 96 168.9 96 75.8 96 0 167.8 0 256s75.8 160 168.9 160c66.1 0 117.8-41.3 151.1-78.6 33.3 37.3 85 78.6 151.1 78.6 93.1 0 168.9-71.8 168.9-160S564.2 96 471.1 96zM168.9 320c-40.2 0-72.9-28.7-72.9-64s32.7-64 72.9-64c38.2 0 73.4 36.1 94 64-20.4 27.6-55.9 64-94 64zm302.2 0c-38.2 0-73.4-36.1-94-64 20.4-27.6 55.9-64 94-64 40.2 0 72.9 28.7 72.9 64s-32.7 64-72.9 64z"></path></svg></span></div>
<span class="pg">25</span>
</section>
<section class="slide light t-flow" data-i="25" aria-label="슬라이드 26">
<div class="inner"><h2>개발 방식의 진화</h2><p class="lead">원본 199~201쪽의 세 단계에 네 번째를 더했습니다</p><div class="flow"><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></span>
<h3>전통 방식</h3><p class="">개발 → QA → 운영, 부서별 순차 진행</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 480 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M477.7 186.1L309.5 18.3c-3.1-3.1-8.2-3.1-11.3 0l-34 33.9c-3.1 3.1-3.1 8.2 0 11.3l11.2 11.1L33 316.5c-38.8 38.7-45.1 102-9.4 143.5 20.6 24 49.5 36 78.4 35.9 26.4 0 52.8-10 72.9-30.1l246.3-245.7 11.2 11.1c3.1 3.1 8.2 3.1 11.3 0l34-33.9c3.1-3 3.1-8.1 0-11.2zM318 256H161l148-147.7 78.5 78.3L318 256z"></path></svg></span>
<h3>TDD 개선</h3><p class="">개발 → TDD → QA → 운영, 테스트 먼저</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M471.1 96C405 96 353.3 137.3 320 174.6 286.7 137.3 235 96 168.9 96 75.8 96 0 167.8 0 256s75.8 160 168.9 160c66.1 0 117.8-41.3 151.1-78.6 33.3 37.3 85 78.6 151.1 78.6 93.1 0 168.9-71.8 168.9-160S564.2 96 471.1 96zM168.9 320c-40.2 0-72.9-28.7-72.9-64s32.7-64 72.9-64c38.2 0 73.4 36.1 94 64-20.4 27.6-55.9 64-94 64zm302.2 0c-38.2 0-73.4-36.1-94-64 20.4-27.6 55.9-64 94-64 40.2 0 72.9 28.7 72.9 64s-32.7 64-72.9 64z"></path></svg></span>
<h3>DevOps</h3><p class="">개발 · QA · 운영이 하나로 자동 순환</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span>
<h3>+ 에이전트</h3><p class="">사이클 안에서 에이전트가 코드 · 테스트 · 분석 수행</p></div></div><div class="note">TDD는 다시 주목받습니다 — 테스트가 에이전트에게 주는 가장 정확한 지시서이기 때문입니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">26</span>
</section>
<section class="slide light t-cards" data-i="26" aria-label="슬라이드 27">
<div class="inner"><h2>혁신 게임의 규칙 — 무게중심이 이동했다</h2><p class="lead">원본 202쪽: 성공은 세 질문의 교집합</p><div class="grid g3">
<div class="card vcard"><div class="row-sb"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg></span><span class="pill amber">Design</span></div><h3 class="big">Desirable</h3><p>Do you want this?<br>사용자가 원하는가 — 이제 가장 중요한 질문</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"></path></svg></span><span class="pill slate">Technology</span></div><h3 class="big">Feasible</h3><p>Can we do this?<br>AI 덕분에 '만들 수 있나'의 답은 대부분 Yes</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"></path></svg></span><span class="pill amber">Business</span></div><h3 class="big">Viable</h3><p>Should we do this?<br>만들기 쉬워질수록 더 어려워진 질문</p>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">27</span>
</section>
<section class="slide light t-table" data-i="27" aria-label="슬라이드 28">
<div class="inner"><h2>DevOps 단계별 — 원본 도구에서 2026 에이전트까지</h2><p class="lead">원본 208~211쪽 단계 그대로 — 단, 배포 승인 · DB 마이그레이션 · 운영 키는 사람이 쥡니다</p><table style="font-size:15.600000000000001px"><colgroup><col style="width:17.77777777777778%"><col style="width:26.666666666666668%"><col style="width:27.77777777777778%"><col style="width:27.77777777777778%"></colgroup>
<thead><tr><th>단계</th><th>원본</th><th>2026 도구</th><th>에이전트 역할</th></tr></thead>
<tbody><tr><td>plan · code</td><td>이슈 트래커 · IDE</td><td>이슈 → 명세(spec) 문서</td><td>명세 초안, 코드 작성</td></tr><tr><td>build · test</td><td>1일 n회 빌드, Selenium</td><td>CI(GitHub · Gitea Actions), Playwright</td><td>테스트 작성, 실패 원인 분석</td></tr><tr><td>release · deploy</td><td>Vagrant · Ansible, 사이트별 릴리스</td><td>컨테이너 이미지 + GitOps</td><td>Dockerfile · 파이프라인 초안</td></tr><tr><td>operate · monitor</td><td>모니터링 → 버그 리포트 → plan</td><td>OpenTelemetry, 알림 → 이슈 자동 생성</td><td>로그 · 트레이스 분석, 수정 PR 제안</td></tr></tbody></table></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">28</span>
</section>
<section class="slide light t-table" data-i="28" aria-label="슬라이드 29">
<div class="inner"><h2>DevOps 측정 — 2013년 표에서 DORA 지표로</h2><p class="lead">원본 213쪽: Amazon은 하루 23,000번, 일반 기업은 9개월에 한 번 배포 (The Phoenix Project, 2013)</p><table style="font-size:16.900000000000002px"><colgroup><col style="width:24.444444444444446%"><col style="width:33.33333333333333%"><col style="width:42.22222222222222%"></colgroup>
<thead><tr><th>DORA 지표</th><th>의미</th><th>AI 시대에 보는 이유</th></tr></thead>
<tbody><tr><td>배포 빈도</td><td>얼마나 자주 배포하는가</td><td>에이전트로 변경량이 늘어도 작게 자주 배포하는지</td></tr><tr><td>변경 리드 타임</td><td>커밋에서 운영까지 걸리는 시간</td><td>리뷰 병목이 생기지 않았는지</td></tr><tr><td>변경 실패율</td><td>배포 후 장애로 이어진 비율</td><td>AI 생성 코드가 품질을 떨어뜨리지 않는지</td></tr><tr><td>복구 시간</td><td>장애에서 정상화까지 걸리는 시간</td><td>에이전트가 원인 분석을 앞당기는지</td></tr></tbody></table></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">29</span>
</section>
<section class="slide light t-stats" data-i="29" aria-label="슬라이드 30">
<div class="inner"><h2>숫자로 보는 AI와 DevOps</h2><p class="lead">Google DORA 보고서 (2024 · 2025)</p><div class="grid g3 stats"><div class="card"><div class="num">90%</div>
<h3>개발자 AI 도입률</h3><p class="muted sm">2025년. 2024년 76%에서 증가</p></div><div class="card"><div class="num neg">−7.2%</div>
<h3>배포 안정성</h3><p class="muted sm">2024년: AI 도입 25% 증가당 안정성 변화 — 기본기 없이 쓰면 불안정</p></div><div class="card"><div class="num">7가지</div>
<h3>효과를 본 조직의 관행</h3><p class="muted sm">작은 배치, 강한 버전 관리, 좋은 내부 플랫폼, 사용자 중심 등</p></div></div><div class="note">2025년은 측정 방식이 달라 직접 비교 불가 — 처리량 저하는 사라졌고 안정성 영향은 남음</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">30</span>
</section>
<section class="slide dark t-quote" data-i="30" aria-label="슬라이드 31">
<div class="inner"><span class="ic qmark"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path></svg></span><div class="qwrap"><p class="qt">DevOps는 고객의 요구에 대해 얼마나 빨리 응대하고 대응하는가를 알 수 있는 지표.</p><p class="qby">— 원본 212쪽</p><div class="qadd">AI는 속도를 올려 주는 증폭기 — 안정성은 여전히 DevOps 기본기가 지킵니다</div></div></div>
<span class="pg">31</span>
</section>
<section class="slide dark t-section" data-i="31" aria-label="슬라이드 32">
<div class="inner"><div class="sec"><div class="no">06</div><h1>클라우드와 컨테이너</h1><p class="sub muted-d">Docker 개발 환경에서 에이전트 샌드박스까지</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path></svg></span></div>
<span class="pg">32</span>
</section>
<section class="slide light t-table" data-i="32" aria-label="슬라이드 33">
<div class="inner"><h2>aaS 계층 — 원본에 더한 것들</h2><p class="lead">원본 215~237쪽: SaaS · PaaS · IaaS · BaaS · CaaS</p><table style="font-size:15.600000000000001px"><colgroup><col style="width:16.666666666666664%"><col style="width:35.55555555555556%"><col style="width:47.77777777777777%"></colgroup>
<thead><tr><th>계층</th><th>원본 설명</th><th>2026 추가 · 변화</th></tr></thead>
<tbody><tr><td>IaaS</td><td>VM · 스토리지 · 네트워크</td><td>GPU 클라우드 — AI 학습 · 추론용 자원</td></tr><tr><td>PaaS</td><td>런타임 · DB · 웹 서버</td><td>서버리스 함수 · 엣지 실행 환경</td></tr><tr><td>BaaS</td><td>백엔드 서비스</td><td>인증 · DB · 스토리지 일체형 — 바이브 코딩의 단골</td></tr><tr><td>CaaS</td><td>컨테이너 서비스</td><td>Kubernetes가 사실상 표준, 온프레미스는 k3s</td></tr><tr><td>SaaS</td><td>완성된 애플리케이션</td><td>대부분의 SaaS에 AI 기능 내장</td></tr><tr><td>모델 API</td><td>(없음)</td><td>LLM을 API로 — 토큰 과금, 온프레미스 LLM도 선택지</td></tr></tbody></table></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">33</span>
</section>
<section class="slide light t-cards" data-i="33" aria-label="슬라이드 34">
<div class="inner"><h2>12-Factor App, 에이전트 시대에 더 중요해진 4가지</h2><p class="lead">원본 220~226쪽 — 12factor.net의 원칙은 그대로 유효합니다</p><div class="grid g2">
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"></path></svg></span><div><div class="row-sb"><h3>III. 설정</h3><span class="pill amber">환경변수</span></div><p>API 키를 코드에 넣지 않기 — AI 생성 코드의 단골 실수</p></div>
</div>
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path></svg></span><div><div class="row-sb"><h3>X. 환경 일치</h3><span class="pill amber">개발=운영</span></div><p>devcontainer로 사람 · 에이전트 · 운영이 같은 환경</p></div>
</div>
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z"></path></svg></span><div><div class="row-sb"><h3>XI. 로그</h3><span class="pill amber">스트림</span></div><p>구조화된 로그 — 에이전트가 읽고 원인을 찾기 쉬움</p></div>
</div>
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M184.561 261.903c3.232 13.997-12.123 24.635-24.068 17.168l-40.736-25.455-50.867 81.402C55.606 356.273 70.96 384 96.012 384H148c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12H96.115c-75.334 0-121.302-83.048-81.408-146.88l50.822-81.388-40.725-25.448c-12.081-7.547-8.966-25.961 4.879-29.158l110.237-25.45c8.611-1.988 17.201 3.381 19.189 11.99l25.452 110.237zm98.561-182.915l41.289 66.076-40.74 25.457c-12.051 7.528-9 25.953 4.879 29.158l110.237 25.45c8.672 1.999 17.215-3.438 19.189-11.99l25.45-110.237c3.197-13.844-11.99-24.719-24.068-17.168l-40.687 25.424-41.263-66.082c-37.521-60.033-125.209-60.171-162.816 0l-17.963 28.766c-3.51 5.62-1.8 13.021 3.82 16.533l33.919 21.195c5.62 3.512 13.024 1.803 16.536-3.817l17.961-28.743c12.712-20.341 41.973-19.676 54.257-.022zM497.288 301.12l-27.515-44.065c-3.511-5.623-10.916-7.334-16.538-3.821l-33.861 21.159c-5.62 3.512-7.33 10.915-3.818 16.536l27.564 44.112c13.257 21.211-2.057 48.96-27.136 48.96H320V336.02c0-14.213-17.242-21.383-27.313-11.313l-80 79.981c-6.249 6.248-6.249 16.379 0 22.627l80 79.989C302.689 517.308 320 510.3 320 495.989V448h95.88c75.274 0 121.335-82.997 81.408-146.88z"></path></svg></span><div><div class="row-sb"><h3>IX. 폐기 가능성</h3><span class="pill amber">쓰고 버림</span></div><p>에이전트 작업 컨테이너는 망가지면 지우고 새로</p></div>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">34</span>
</section>
<section class="slide light t-flow" data-i="34" aria-label="슬라이드 35">
<div class="inner"><h2>컨테이너의 진화</h2><p class="lead">원본 227~236쪽: 실생활의 컨테이너처럼 표준 규격이 산업을 바꿨다</p><div class="flow"><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path></svg></span>
<h3>Docker</h3><p class="">VM보다 가벼운 격리, 이미지로 배포</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87 12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"></path></svg></span>
<h3>Compose · Swarm</h3><p class="">여러 컨테이너를 정의하고 묶어 실행</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M495 225.06l-17.22 1.08c-5.27-39.49-20.79-75.64-43.86-105.84l12.95-11.43c6.92-6.11 7.25-16.79.73-23.31L426.44 64.4c-6.53-6.53-17.21-6.19-23.31.73L391.7 78.07c-30.2-23.06-66.35-38.58-105.83-43.86L286.94 17c.58-9.21-6.74-17-15.97-17h-29.94c-9.23 0-16.54 7.79-15.97 17l1.08 17.22c-39.49 5.27-75.64 20.79-105.83 43.86l-11.43-12.95c-6.11-6.92-16.79-7.25-23.31-.73L64.4 85.56c-6.53 6.53-6.19 17.21.73 23.31l12.95 11.43c-23.06 30.2-38.58 66.35-43.86 105.84L17 225.06c-9.21-.58-17 6.74-17 15.97v29.94c0 9.23 7.79 16.54 17 15.97l17.22-1.08c5.27 39.49 20.79 75.64 43.86 105.83l-12.95 11.43c-6.92 6.11-7.25 16.79-.73 23.31l21.17 21.17c6.53 6.53 17.21 6.19 23.31-.73l11.43-12.95c30.2 23.06 66.35 38.58 105.84 43.86L225.06 495c-.58 9.21 6.74 17 15.97 17h29.94c9.23 0 16.54-7.79 15.97-17l-1.08-17.22c39.49-5.27 75.64-20.79 105.84-43.86l11.43 12.95c6.11 6.92 16.79 7.25 23.31.73l21.17-21.17c6.53-6.53 6.19-17.21-.73-23.31l-12.95-11.43c23.06-30.2 38.58-66.35 43.86-105.83l17.22 1.08c9.21.58 17-6.74 17-15.97v-29.94c-.01-9.23-7.8-16.54-17.01-15.97zM281.84 98.61c24.81 4.07 47.63 13.66 67.23 27.78l-42.62 48.29c-8.73-5.44-18.32-9.54-28.62-11.95l4.01-64.12zm-51.68 0l4.01 64.12c-10.29 2.41-19.89 6.52-28.62 11.95l-42.62-48.29c19.6-14.12 42.42-23.71 67.23-27.78zm-103.77 64.33l48.3 42.61c-5.44 8.73-9.54 18.33-11.96 28.62l-64.12-4.01c4.07-24.81 13.66-47.62 27.78-67.22zm-27.78 118.9l64.12-4.01c2.41 10.29 6.52 19.89 11.95 28.62l-48.29 42.62c-14.12-19.6-23.71-42.42-27.78-67.23zm131.55 131.55c-24.81-4.07-47.63-13.66-67.23-27.78l42.61-48.3c8.73 5.44 18.33 9.54 28.62 11.96l-4 64.12zM256 288c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm25.84 125.39l-4.01-64.12c10.29-2.41 19.89-6.52 28.62-11.96l42.61 48.3c-19.6 14.12-42.41 23.71-67.22 27.78zm103.77-64.33l-48.29-42.62c5.44-8.73 9.54-18.32 11.95-28.62l64.12 4.01c-4.07 24.82-13.66 47.64-27.78 67.23zm-36.34-114.89c-2.41-10.29-6.52-19.89-11.96-28.62l48.3-42.61c14.12 19.6 23.71 42.42 27.78 67.23l-64.12 4z"></path></svg></span>
<h3>Kubernetes</h3><p class="">오케스트레이션의 사실상 표준</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span>
<h3>에이전트 샌드박스</h3><p class="">에이전트가 마음껏 실행해도 호스트는 안전</p></div></div><div class="note">원본의 멀티 클라우드 그림은 여전히 유효 — 이제 온프레미스 GPU 서버도 같은 컨테이너로 운영합니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">35</span>
</section>
<section class="slide light t-compare" data-i="35" aria-label="슬라이드 36">
<div class="inner"><h2>Pet &amp; Cattle — 에이전트 작업 환경에도</h2><div class="ana">
<div class="card side"><div class="row-sb"><span class="pill slate">Pet</span><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M298.06,224,448,277.55V496a16,16,0,0,1-16,16H368a16,16,0,0,1-16-16V384H192V496a16,16,0,0,1-16,16H112a16,16,0,0,1-16-16V282.09C58.84,268.84,32,233.66,32,192a32,32,0,0,1,64,0,32.06,32.06,0,0,0,32,32ZM544,112v32a64,64,0,0,1-64,64H448v35.58L320,197.87V48c0-14.25,17.22-21.39,27.31-11.31L374.59,64h53.63c10.91,0,23.75,7.92,28.62,17.69L464,96h64A16,16,0,0,1,544,112Zm-112,0a16,16,0,1,0-16,16A16,16,0,0,0,432,112Z"></path></svg></span></div>
<h3>이름을 붙여 키우는 서버</h3><ul><li>Molly 같은 이름</li><li>손으로 하나하나 설정</li><li>아프면 간호해서 살린다</li></ul></div><div class="approx vs">vs</div>
<div class="card side"><div class="row-sb"><span class="pill ">Cattle</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path></svg></span></div>
<h3>번호로 관리하는 서버</h3><ul><li>vm0022 같은 번호</li><li>다른 것과 거의 동일</li><li>아프면 새것으로 교체</li></ul></div></div>
<div class="take">에이전트가 쓰는 개발 환경도 Cattle로 — 망가지면 지우고 이미지에서 다시 만든다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">36</span>
</section>
<section class="slide light t-compare" data-i="36" aria-label="슬라이드 37">
<div class="inner"><h2>Ready-made 개발 환경 — 원본 → 2026</h2><div class="ana">
<div class="card side"><div class="row-sb"><span class="pill slate">원본 (Docker Hub)</span><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path></svg></span></div>
<h3>mcchae/xfce-pyenv 이미지</h3><ul><li>docker-compose로 실행</li><li>컨테이너 안 XFCE 데스크톱 + PyCharm</li><li>pyenv로 파이썬 버전 관리</li></ul></div><div class="approx">→</div>
<div class="card side"><div class="row-sb"><span class="pill ">2026</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M425.7 256c-16.9 0-32.8-9-41.4-23.4L320 126l-64.2 106.6c-8.7 14.5-24.6 23.5-41.5 23.5-4.5 0-9-.6-13.3-1.9L64 215v178c0 14.7 10 27.5 24.2 31l216.2 54.1c10.2 2.5 20.9 2.5 31 0L551.8 424c14.2-3.6 24.2-16.4 24.2-31V215l-137 39.1c-4.3 1.3-8.8 1.9-13.3 1.9zm212.6-112.2L586.8 41c-3.1-6.2-9.8-9.8-16.7-8.9L320 64l91.7 152.1c3.8 6.3 11.4 9.3 18.5 7.3l197.9-56.5c9.9-2.9 14.7-13.9 10.2-23.1zM53.2 41L1.7 143.8c-4.6 9.2.3 20.2 10.1 23l197.9 56.5c7.1 2 14.7-1 18.5-7.3L320 64 69.8 32.1c-6.9-.8-13.5 2.7-16.6 8.9z"></path></svg></span></div>
<h3>devcontainer + 에이전트</h3><ul><li>devcontainer.json 표준 규격</li><li>IDE · 터미널이 컨테이너에 접속</li><li>uv로 파이썬 · 패키지 관리</li></ul></div></div>
<div class="take">'준비된 개발 환경'이라는 원본의 아이디어 그대로 — 이제 사람과 에이전트가 함께 씁니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">37</span>
</section>
<section class="slide light t-code" data-i="37" aria-label="슬라이드 38">
<div class="inner"><h2>실습 — devcontainer 안에서 에이전트 돌리기</h2><div class="codewrap"><ul class="checks">
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>이미지로 환경 고정</h3><p class="muted">팀원 · 에이전트 · CI 모두 같은 환경</p></div></li>
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>uv 로 의존성 관리</h3><p class="muted">pyenv + pip 대신 하나로</p></div></li>
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>작업 폴더만 마운트</h3><p class="muted">/workspace 밖은 못 건드림</p></div></li>
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>망가지면 Rebuild</h3><p class="muted">Cattle 원칙 그대로</p></div></li></ul>
<pre class=" dense"><code>// .devcontainer/devcontainer.json
{
"name": "py-agent-dev",
"build": { "dockerfile": "Dockerfile" },
"workspaceFolder": "/workspace",
"postCreateCommand": "uv sync"
}
# .devcontainer/Dockerfile
FROM python:3.12-slim
RUN apt-get update &amp;&amp; apt-get install -y git tmux \
&amp;&amp; pip install uv
WORKDIR /workspace
# inside the container
$ uv run pytest
$ claude # or codex</code></pre></div><div class="note">컨테이너는 에이전트에게 '마음껏 해도 되는 방' — 망가져도 내 컴퓨터는 안전합니다</div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">38</span>
</section>
<section class="slide dark t-section" data-i="38" aria-label="슬라이드 39">
<div class="inner"><div class="sec"><div class="no">07</div><h1>무인화 걸림돌, 그 후</h1><p class="sub muted-d">원본 241 · 274쪽에서 동그라미 친 두 단계</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg></span></div>
<span class="pg">39</span>
</section>
<section class="slide light t-loop" data-i="39" aria-label="슬라이드 40">
<div class="inner"><h2>원본의 무인화 걸림돌: Code와 Plan</h2><p class="lead">빌드부터 모니터링까지는 자동화했지만, 두 단계는 사람이 해야 했다</p><div class="loopwrap"><div class="loop"><svg viewBox="0 0 740 430"><ellipse cx="235" cy="215" rx="165" ry="170"/><ellipse cx="505" cy="215" rx="165" ry="170"/>
<text x="235" y="223">DEV</text><text x="505" y="223">OPS</text></svg><span class="lp block" style="left:235px;top:52px">PLAN</span><span class="lp block" style="left:88px;top:128px">CODE</span><span class="lp " style="left:88px;top:300px">BUILD</span><span class="lp " style="left:235px;top:380px">TEST</span><span class="lp " style="left:505px;top:52px">RELEASE</span><span class="lp " style="left:652px;top:128px">DEPLOY</span><span class="lp " style="left:652px;top:300px">OPERATE</span><span class="lp " style="left:505px;top:380px">MONITOR</span></div>
<div class="legend"><div class="card"><h3><i class="dot slate"></i>자동화 완료</h3><p class="muted sm">build · test · release · deploy · operate · monitor</p></div><div class="card"><h3><i class="dot rose"></i>무인화 걸림돌</h3><p class="muted sm">plan(무엇을 만들까)과 code(어떻게 만들까)는 사람의 몫</p></div><div class="card"><h3><i class="dot teal"></i>원본의 해법</h3><p class="muted sm">개발 환경을 표준화 · 자동화해 도메인 로직 구현에 집중</p></div></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">40</span>
</section>
<section class="slide light t-loop" data-i="40" aria-label="슬라이드 41">
<div class="inner"><h2>2026: Code는 에이전트에게, Plan은 여전히 사람에게</h2><p class="lead">걸림돌 하나는 풀렸고, 새로운 걸림돌이 생겼다</p><div class="loopwrap"><div class="loop"><svg viewBox="0 0 740 430"><ellipse cx="235" cy="215" rx="165" ry="170"/><ellipse cx="505" cy="215" rx="165" ry="170"/>
<text x="235" y="223">DEV</text><text x="505" y="223">OPS</text></svg><span class="lp human" style="left:235px;top:52px">PLAN</span><span class="lp agent" style="left:88px;top:128px">CODE</span><span class="lp agent" style="left:88px;top:300px">BUILD</span><span class="lp agent" style="left:235px;top:380px">TEST</span><span class="lp " style="left:505px;top:52px">RELEASE</span><span class="lp " style="left:652px;top:128px">DEPLOY</span><span class="lp " style="left:652px;top:300px">OPERATE</span><span class="lp agent" style="left:505px;top:380px">MONITOR</span></div>
<div class="legend"><div class="card"><h3><i class="dot teal"></i>에이전트가 수행</h3><p class="muted sm">code · build · test 반복, 모니터링 로그 분석</p></div><div class="card"><h3><i class="dot amber"></i>여전히 사람</h3><p class="muted sm">plan — 무엇을 왜 만드는가, 그리고 배포 승인</p></div><div class="card"><h3><i class="dot rose"></i>새 걸림돌</h3><p class="muted sm">명세의 품질과 리뷰 속도 — 생성 속도를 검증이 못 따라감</p></div></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">41</span>
</section>
<section class="slide light t-cards" data-i="41" aria-label="슬라이드 42">
<div class="inner"><h2>원본의 결론 세 가지, 2026 버전</h2><p class="lead">원본 275~277쪽</p><div class="grid g3">
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M160 288h-56c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h56v-64h-56c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h56V96h-56c-4.42 0-8-3.58-8-8V72c0-4.42 3.58-8 8-8h56V32c0-17.67-14.33-32-32-32H32C14.33 0 0 14.33 0 32v448c0 2.77.91 5.24 1.57 7.8L160 329.38V288zm320 64h-32v56c0 4.42-3.58 8-8 8h-16c-4.42 0-8-3.58-8-8v-56h-64v56c0 4.42-3.58 8-8 8h-16c-4.42 0-8-3.58-8-8v-56h-64v56c0 4.42-3.58 8-8 8h-16c-4.42 0-8-3.58-8-8v-56h-41.37L24.2 510.43c2.56.66 5.04 1.57 7.8 1.57h448c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32z"></path></svg></span><span class="pill teal">275쪽</span></div><h3 class="big">개발 환경 표준화</h3><p>원본: Docker 이미지<br>2026: devcontainer + AGENTS.md로 사람과 에이전트의 규칙까지 표준화</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"></path></svg></span><span class="pill teal">276쪽</span></div><h3 class="big">개발 환경 자동화</h3><p>원본: 빌드 · 테스트 · 배포 자동화<br>2026: CI + 에이전트 루프, 테스트가 통과할 때까지 반복</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path></svg></span><span class="pill amber">277쪽</span></div><h3 class="big">무엇에 집중할까</h3><p>원본: 도메인 로직을 어떻게 구현할 것인가<br>2026: 무엇을 만들고, 맞게 만들었는지 검증하는 것</p>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">42</span>
</section>
<section class="slide dark t-section" data-i="42" aria-label="슬라이드 43">
<div class="inner"><div class="sec"><div class="no">08</div><h1>마치며</h1><p class="sub muted-d">변화하며 살아남는 것</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M243.2 189.9V258c26.1 5.9 49.3 15.6 73.6 22.3v-68.2c-26-5.8-49.4-15.5-73.6-22.2zm223.3-123c-34.3 15.9-76.5 31.9-117 31.9C296 98.8 251.7 64 184.3 64c-25 0-47.3 4.4-68 12 2.8-7.3 4.1-15.2 3.6-23.6C118.1 24 94.8 1.2 66.3 0 34.3-1.3 8 24.3 8 56c0 19 9.5 35.8 24 45.9V488c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24v-94.4c28.3-12.1 63.6-22.1 114.4-22.1 53.6 0 97.8 34.8 165.2 34.8 48.2 0 86.7-16.3 122.5-40.9 8.7-6 13.8-15.8 13.8-26.4V95.9c.1-23.3-24.2-38.8-45.4-29zM169.6 325.5c-25.8 2.7-50 8.2-73.6 16.6v-70.5c26.2-9.3 47.5-15 73.6-17.4zM464 191c-23.6 9.8-46.3 19.5-73.6 23.9V286c24.8-3.4 51.4-11.8 73.6-26v70.5c-25.1 16.1-48.5 24.7-73.6 27.1V286c-27 3.7-47.9 1.5-73.6-5.6v67.4c-23.9-7.4-47.3-16.7-73.6-21.3V258c-19.7-4.4-40.8-6.8-73.6-3.8v-70c-22.4 3.1-44.6 10.2-73.6 20.9v-70.5c33.2-12.2 50.1-19.8 73.6-22v71.6c27-3.7 48.4-1.3 73.6 5.7v-67.4c23.7 7.4 47.2 16.7 73.6 21.3v68.4c23.7 5.3 47.6 6.9 73.6 2.7V143c27-4.8 52.3-13.6 73.6-22.5z"></path></svg></span></div>
<span class="pg">43</span>
</section>
<section class="slide light t-summary" data-i="43" aria-label="슬라이드 44">
<div class="inner"><h2>원본 → 2026 한 장 요약</h2><p class="lead">위는 원본의 개념, 아래는 2026년의 답</p><div class="grid g4"><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M475.115 163.781L336 252.309v-68.28c0-18.916-20.931-30.399-36.885-20.248L160 252.309V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h464c13.255 0 24-10.745 24-24V184.029c0-18.917-20.931-30.399-36.885-20.248z"></path></svg></span>
<h3>디지털 전환</h3><p class="teal sm"><b>AI 전환(AX)</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path></svg></span>
<h3>사람이 코딩</h3><p class="teal sm"><b>에이전트가 코딩</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg></span>
<h3>YOU 최적화</h3><p class="teal sm"><b>판단 · 주의력 최적화</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M471.1 96C405 96 353.3 137.3 320 174.6 286.7 137.3 235 96 168.9 96 75.8 96 0 167.8 0 256s75.8 160 168.9 160c66.1 0 117.8-41.3 151.1-78.6 33.3 37.3 85 78.6 151.1 78.6 93.1 0 168.9-71.8 168.9-160S564.2 96 471.1 96zM168.9 320c-40.2 0-72.9-28.7-72.9-64s32.7-64 72.9-64c38.2 0 73.4 36.1 94 64-20.4 27.6-55.9 64-94 64zm302.2 0c-38.2 0-73.4-36.1-94-64 20.4-27.6 55.9-64 94-64 40.2 0 72.9 28.7 72.9 64s-32.7 64-72.9 64z"></path></svg></span>
<h3>DevOps</h3><p class="teal sm"><b>DevOps + 에이전트</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg></span>
<h3>Phoenix 지표</h3><p class="teal sm"><b>DORA 지표</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"></path></svg></span>
<h3>Docker 개발 환경</h3><p class="teal sm"><b>devcontainer 샌드박스</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"></path></svg></span>
<h3>pyenv · PyCharm</h3><p class="teal sm"><b>uv · 터미널 에이전트</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22 18.2 6.8 31.3 24.4 31.3 45 0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7 54.4-11.4 98.3-55.4 109.7-109.7 17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9 129.4 7 233.4 112 240.9 241.5.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9 76.8 6.3 138 68.2 144.9 145.2.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3-8.4-110.1-96.5-198.2-206.6-206.7z"></path></svg></span>
<h3>블로그 기록</h3><p class="teal sm"><b>AGENTS.md · ADR</b></p></div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">44</span>
</section>
<section class="slide dark t-quote" data-i="44" aria-label="슬라이드 45">
<div class="inner"><span class="ic qmark"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path></svg></span><div class="qwrap"><p class="qt">변화하며 살아남는 것은 기업의 문제 이전에 각자 개개인의 문제.</p><p class="qby">— 원본 283쪽</p><div class="qadd">AI 시대에도 이 문장은 한 글자도 바꿀 필요가 없습니다</div></div></div>
<span class="pg">45</span>
</section>
<section class="slide light t-cards" data-i="45" aria-label="슬라이드 46">
<div class="inner"><h2>Change · Challenge · Chance</h2><p class="lead">원본 284~286쪽, 2026년의 의미</p><div class="grid g3">
<div class="card vcard"><div class="row-sb"><span class="ic circ lg slate"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M0 168v-16c0-13.255 10.745-24 24-24h360V80c0-21.367 25.899-32.042 40.971-16.971l80 80c9.372 9.373 9.372 24.569 0 33.941l-80 80C409.956 271.982 384 261.456 384 240v-48H24c-13.255 0-24-10.745-24-24zm488 152H128v-48c0-21.314-25.862-32.08-40.971-16.971l-80 80c-9.372 9.373-9.372 24.569 0 33.941l80 80C102.057 463.997 128 453.437 128 432v-48h360c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"></path></svg></span><span class="pill slate">변화</span></div><h3 class="big">Change</h3><p>코드를 쓰는 주체가 바뀌었다.<br>사람의 일은 명세와 검증으로 이동</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg teal"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z"></path></svg></span><span class="pill teal">도전</span></div><h3 class="big">Challenge</h3><p>도메인 이해 · 설계 · 리뷰 역량을 키워라.<br>에이전트를 지휘하는 법을 익혀라</p>
</div>
<div class="card vcard"><div class="row-sb"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 352 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg></span><span class="pill amber">기회</span></div><h3 class="big">Chance</h3><p>1인 · 작은 팀이 제품을 만드는 시대.<br>현장을 아는 사람에게 가장 큰 기회</p>
</div></div></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">46</span>
</section>
<section class="slide light t-table" data-i="46" aria-label="슬라이드 47">
<div class="inner"><h2>참고 자료</h2><p class="lead">원본 자료와 2026년 기준 자료</p><table style="font-size:15.600000000000001px"><colgroup><col style="width:44.44444444444444%"><col style="width:55.55555555555556%"></colgroup>
<thead><tr><th>자료</th><th>주소</th></tr></thead>
<tbody><tr><td>The Twelve-Factor App (원본 참고)</td><td>12factor.net/ko</td></tr><tr><td>DORA — State of AI-assisted Software Development</td><td>dora.dev</td></tr><tr><td>GitHub Octoverse 2025</td><td>github.blog/news-insights/octoverse</td></tr><tr><td>Development Containers 규격</td><td>containers.dev</td></tr><tr><td>uv — Python 패키지 · 프로젝트 관리</td><td>docs.astral.sh/uv</td></tr><tr><td>AGENTS.md — 에이전트 규칙 파일</td><td>agents.md</td></tr><tr><td>시가총액 순위 (2026-11-02 기준)</td><td>chartrow.com/lists/biggest-companies</td></tr></tbody></table></div>
<footer>AI 시대의 DX · DevOps · 컨테이너</footer><span class="pg">47</span>
</section>
<section class="slide dark t-closing" data-i="47" aria-label="슬라이드 48">
<div class="inner"><span class="ic ghost sm-ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M243.2 189.9V258c26.1 5.9 49.3 15.6 73.6 22.3v-68.2c-26-5.8-49.4-15.5-73.6-22.2zm223.3-123c-34.3 15.9-76.5 31.9-117 31.9C296 98.8 251.7 64 184.3 64c-25 0-47.3 4.4-68 12 2.8-7.3 4.1-15.2 3.6-23.6C118.1 24 94.8 1.2 66.3 0 34.3-1.3 8 24.3 8 56c0 19 9.5 35.8 24 45.9V488c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24v-94.4c28.3-12.1 63.6-22.1 114.4-22.1 53.6 0 97.8 34.8 165.2 34.8 48.2 0 86.7-16.3 122.5-40.9 8.7-6 13.8-15.8 13.8-26.4V95.9c.1-23.3-24.2-38.8-45.4-29zM169.6 325.5c-25.8 2.7-50 8.2-73.6 16.6v-70.5c26.2-9.3 47.5-15 73.6-17.4zM464 191c-23.6 9.8-46.3 19.5-73.6 23.9V286c24.8-3.4 51.4-11.8 73.6-26v70.5c-25.1 16.1-48.5 24.7-73.6 27.1V286c-27 3.7-47.9 1.5-73.6-5.6v67.4c-23.9-7.4-47.3-16.7-73.6-21.3V258c-19.7-4.4-40.8-6.8-73.6-3.8v-70c-22.4 3.1-44.6 10.2-73.6 20.9v-70.5c33.2-12.2 50.1-19.8 73.6-22v71.6c27-3.7 48.4-1.3 73.6 5.7v-67.4c23.7 7.4 47.2 16.7 73.6 21.3v68.4c23.7 5.3 47.6 6.9 73.6 2.7V143c27-4.8 52.3-13.6 73.6-22.5z"></path></svg></span><div class="close"><h1>실습 과제와 Q&amp;A</h1><p class="sub">내 Python 프로젝트 하나를 골라 2026년식 개발 환경으로 옮겨 보세요</p>
<ul class="checks d"><li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><span class="muted-d">devcontainer.json + Dockerfile로 개발 환경 정의, uv로 의존성 관리</span></li><li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><span class="muted-d">컨테이너 안에서 에이전트에게 기능 1개와 테스트 구현 맡기기</span></li><li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><span class="muted-d">회고 한 단락: Plan과 리뷰는 내가, Code는 에이전트가 — 어디까지 맡겼나</span></li></ul></div></div>
<span class="pg">48</span>
</section></main>
<div id="bar"></div><div id="noteview"></div>
<div id="hud"><button id="prev" aria-label="이전">◀</button><button id="nt">노트</button><button id="fs">전체화면</button><button id="pr">PDF 저장</button><button id="next" aria-label="다음">▶</button></div>
<script>
const S=[...document.querySelectorAll('.slide')];let i=0;
function fit(){const k=Math.min(innerWidth/1280,innerHeight/720);S.forEach(s=>s.style.transform='scale('+k+')')}
function go(n){i=Math.max(0,Math.min(S.length-1,n));S.forEach((s,j)=>s.classList.toggle('on',j===i));
document.getElementById('bar').style.width=((i+1)/S.length*100)+'%';const nt=S[i].querySelector('.notes');
document.getElementById('noteview').textContent=nt?nt.textContent:'(강사 노트 없음)';try{history.replaceState(null,'','#'+(i+1))}catch(e){}}
addEventListener('resize',fit);
addEventListener('keydown',e=>{if(['ArrowRight','PageDown',' ','Enter'].includes(e.key)){e.preventDefault();go(i+1)}
else if(['ArrowLeft','PageUp','Backspace'].includes(e.key)){e.preventDefault();go(i-1)}else if(e.key==='Home')go(0);else if(e.key==='End')go(S.length-1);
else if(e.key==='n')document.body.classList.toggle('shownotes');else if(e.key==='f')toggleFs()});
let tx=null;addEventListener('touchstart',e=>tx=e.touches[0].clientX);addEventListener('touchend',e=>{if(tx===null)return;const dx=e.changedTouches[0].clientX-tx;if(Math.abs(dx)>40)go(i+(dx<0?1:-1));tx=null});
function toggleFs(){document.fullscreenElement?document.exitFullscreen():document.documentElement.requestFullscreen()}
prev.onclick=()=>go(i-1);next.onclick=()=>go(i+1);nt.onclick=()=>document.body.classList.toggle('shownotes');fs.onclick=toggleFs;pr.onclick=()=>print();
fit();go((parseInt(location.hash.slice(1))||1)-1);
</script></body></html>