diff --git a/public/images/academy/web-basics/1.svg b/public/images/academy/web-basics/1.svg
new file mode 100644
index 00000000..f19e9443
--- /dev/null
+++ b/public/images/academy/web-basics/1.svg
@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="hero-bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2d1b69"/>
+      <stop offset="100%" style="stop-color:#0f172a"/>
+    </linearGradient>
+    <linearGradient id="screen-glow" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#a78bfa;stop-opacity:0.3"/>
+      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0.1"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="400" fill="url(#hero-bg)" rx="16"/>
+  <!-- 노트북 -->
+  <g transform="translate(120,80)">
+    <rect x="30" y="20" width="200" height="130" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="2"/>
+    <rect x="40" y="30" width="180" height="110" rx="4" fill="url(#screen-glow)"/>
+    <!-- 화면 콘텐츠 -->
+    <rect x="55" y="45" width="80" height="8" rx="2" fill="#a78bfa" opacity="0.6"/>
+    <rect x="55" y="60" width="60" height="6" rx="2" fill="#c4b5fd" opacity="0.4"/>
+    <rect x="55" y="72" width="100" height="6" rx="2" fill="#c4b5fd" opacity="0.4"/>
+    <rect x="55" y="84" width="40" height="20" rx="4" fill="#7c3aed" opacity="0.5"/>
+    <rect x="100" y="84" width="40" height="20" rx="4" fill="#6d28d9" opacity="0.5"/>
+    <rect x="55" y="110" width="150" height="4" rx="2" fill="#c4b5fd" opacity="0.3"/>
+    <rect x="55" y="120" width="120" height="4" rx="2" fill="#c4b5fd" opacity="0.3"/>
+    <!-- 키보드 -->
+    <path d="M10,150 L250,150 L240,180 L20,180 Z" fill="#312e81" stroke="#4c1d95" stroke-width="1"/>
+    <rect x="40" y="155" width="180" height="2" rx="1" fill="#4c1d95"/>
+    <rect x="40" y="162" width="180" height="2" rx="1" fill="#4c1d95"/>
+    <rect x="40" y="169" width="180" height="2" rx="1" fill="#4c1d95"/>
+  </g>
+  <!-- 스마트폰 -->
+  <g transform="translate(480,100)">
+    <rect x="0" y="0" width="80" height="150" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="2"/>
+    <rect x="6" y="15" width="68" height="115" rx="4" fill="url(#screen-glow)"/>
+    <rect x="14" y="30" width="50" height="6" rx="2" fill="#a78bfa" opacity="0.6"/>
+    <rect x="14" y="42" width="40" height="4" rx="2" fill="#c4b5fd" opacity="0.4"/>
+    <rect x="14" y="52" width="50" height="4" rx="2" fill="#c4b5fd" opacity="0.4"/>
+    <rect x="14" y="65" width="25" height="18" rx="3" fill="#7c3aed" opacity="0.5"/>
+    <rect x="42" y="65" width="25" height="18" rx="3" fill="#6d28d9" opacity="0.5"/>
+    <rect x="14" y="90" width="50" height="3" rx="1" fill="#c4b5fd" opacity="0.3"/>
+    <rect x="14" y="98" width="40" height="3" rx="1" fill="#c4b5fd" opacity="0.3"/>
+    <circle cx="40" cy="142" r="5" fill="none" stroke="#4c1d95" stroke-width="1.5"/>
+  </g>
+  <!-- 사람 -->
+  <g transform="translate(370,120)">
+    <circle cx="30" cy="20" r="20" fill="#a78bfa"/>
+    <circle cx="24" cy="16" r="2" fill="#1e1b4b"/>
+    <circle cx="36" cy="16" r="2" fill="#1e1b4b"/>
+    <path d="M24,24 Q30,30 36,24" fill="none" stroke="#1e1b4b" stroke-width="1.5" stroke-linecap="round"/>
+    <path d="M10,45 Q30,60 50,45" fill="#7c3aed"/>
+    <rect x="10" y="45" width="40" height="60" rx="8" fill="#7c3aed"/>
+    <!-- 손 -->
+    <line x1="5" y1="55" x2="-30" y2="80" stroke="#a78bfa" stroke-width="6" stroke-linecap="round"/>
+    <line x1="55" y1="55" x2="85" y2="80" stroke="#a78bfa" stroke-width="6" stroke-linecap="round"/>
+  </g>
+  <!-- 연결 점선 -->
+  <line x1="320" y1="160" x2="370" y2="160" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="4,4" opacity="0.5"/>
+  <line x1="430" y1="160" x2="480" y2="160" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="4,4" opacity="0.5"/>
+  <!-- 떠다니는 아이콘들 -->
+  <g opacity="0.3">
+    <circle cx="650" cy="60" r="15" fill="#a78bfa"/>
+    <text x="650" y="65" text-anchor="middle" fill="#1e1b4b" font-size="14" font-family="sans-serif">@</text>
+    <circle cx="700" cy="120" r="12" fill="#c4b5fd"/>
+    <text x="700" y="125" text-anchor="middle" fill="#1e1b4b" font-size="11" font-family="sans-serif">Wi</text>
+    <circle cx="680" cy="200" r="18" fill="#8b5cf6"/>
+    <text x="680" y="206" text-anchor="middle" fill="#fff" font-size="16" font-family="sans-serif">www</text>
+    <circle cx="100" cy="300" r="14" fill="#a78bfa"/>
+    <text x="100" y="305" text-anchor="middle" fill="#1e1b4b" font-size="12" font-family="sans-serif">SSL</text>
+    <circle cx="650" cy="300" r="16" fill="#c4b5fd"/>
+    <text x="650" y="306" text-anchor="middle" fill="#1e1b4b" font-size="14" font-family="monospace">&lt;/&gt;</text>
+  </g>
+  <!-- 타이틀 -->
+  <text x="400" y="360" text-anchor="middle" fill="#e9d5ff" font-size="22" font-weight="bold" font-family="sans-serif">웹 기초지식 백과사전</text>
+  <text x="400" y="385" text-anchor="middle" fill="#a78bfa" font-size="12" font-family="sans-serif">인터넷과 웹의 기초 — IT 지식이 없어도 이해할 수 있는 친절한 바이블</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/10.svg b/public/images/academy/web-basics/10.svg
new file mode 100644
index 00000000..ac3baa4b
--- /dev/null
+++ b/public/images/academy/web-basics/10.svg
@@ -0,0 +1,90 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <rect width="800" height="400" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">데이터베이스 = 초대형 엑셀 파일</text>
+  <!-- 엑셀 비유 -->
+  <g transform="translate(50,55)">
+    <rect x="0" y="0" width="340" height="290" rx="10" fill="#fff" stroke="#c4b5fd" stroke-width="2"/>
+    <rect x="0" y="0" width="340" height="35" rx="10" fill="#7c3aed"/>
+    <rect x="0" y="20" width="340" height="15" fill="#7c3aed"/>
+    <text x="170" y="23" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold" font-family="sans-serif">거래처 테이블 (= 엑셀 시트)</text>
+    <!-- 헤더 -->
+    <rect x="1" y="35" width="60" height="28" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+    <text x="30" y="54" text-anchor="middle" fill="#4c1d95" font-size="9" font-weight="bold" font-family="sans-serif">번호</text>
+    <rect x="61" y="35" width="100" height="28" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+    <text x="111" y="54" text-anchor="middle" fill="#4c1d95" font-size="9" font-weight="bold" font-family="sans-serif">회사명</text>
+    <rect x="161" y="35" width="100" height="28" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+    <text x="211" y="54" text-anchor="middle" fill="#4c1d95" font-size="9" font-weight="bold" font-family="sans-serif">연락처</text>
+    <rect x="261" y="35" width="78" height="28" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+    <text x="300" y="54" text-anchor="middle" fill="#4c1d95" font-size="9" font-weight="bold" font-family="sans-serif">지역</text>
+    <!-- 데이터 행들 -->
+    <rect x="1" y="63" width="60" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="30" y="80" text-anchor="middle" fill="#6b7280" font-size="9" font-family="sans-serif">1</text>
+    <rect x="61" y="63" width="100" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="111" y="80" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">삼성전자</text>
+    <rect x="161" y="63" width="100" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="211" y="80" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">02-1234-5678</text>
+    <rect x="261" y="63" width="78" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="300" y="80" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">서울</text>
+
+    <rect x="1" y="88" width="60" height="25" fill="#faf5ff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="30" y="105" text-anchor="middle" fill="#6b7280" font-size="9" font-family="sans-serif">2</text>
+    <rect x="61" y="88" width="100" height="25" fill="#faf5ff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="111" y="105" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">LG전자</text>
+    <rect x="161" y="88" width="100" height="25" fill="#faf5ff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="211" y="105" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">02-9876-5432</text>
+    <rect x="261" y="88" width="78" height="25" fill="#faf5ff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="300" y="105" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">서울</text>
+
+    <rect x="1" y="113" width="60" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="30" y="130" text-anchor="middle" fill="#6b7280" font-size="9" font-family="sans-serif">3</text>
+    <rect x="61" y="113" width="100" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="111" y="130" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">현대건설</text>
+    <rect x="161" y="113" width="100" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="211" y="130" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">031-555-7890</text>
+    <rect x="261" y="113" width="78" height="25" fill="#fff" stroke="#e5e7eb" stroke-width="0.5"/>
+    <text x="300" y="130" text-anchor="middle" fill="#374151" font-size="9" font-family="sans-serif">경기</text>
+    <!-- 라벨 -->
+    <text x="30" y="170" text-anchor="middle" fill="#9ca3af" font-size="8" font-family="sans-serif">↑ 행(Row)</text>
+    <text x="30" y="182" text-anchor="middle" fill="#9ca3af" font-size="8" font-family="sans-serif">= 한 건의</text>
+    <text x="30" y="194" text-anchor="middle" fill="#9ca3af" font-size="8" font-family="sans-serif">데이터</text>
+    <line x1="80" y1="35" x2="80" y2="145" stroke="#a78bfa" stroke-width="1" stroke-dasharray="3,3"/>
+    <text x="170" y="160" text-anchor="middle" fill="#9ca3af" font-size="8" font-family="sans-serif">↑ 열(Column) = 항목 이름</text>
+    <!-- 비유 박스 -->
+    <rect x="10" y="210" width="320" height="70" rx="8" fill="#ede9fe"/>
+    <text x="170" y="232" text-anchor="middle" fill="#4c1d95" font-size="10" font-weight="bold" font-family="sans-serif">비유 대응표</text>
+    <text x="170" y="250" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">테이블 = 엑셀 시트 | 행 = 한 줄 데이터</text>
+    <text x="170" y="266" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">열 = 항목 이름 | 데이터베이스 = 엑셀 파일 전체</text>
+  </g>
+  <!-- 오른쪽: DB 구조 -->
+  <g transform="translate(430,55)">
+    <rect x="0" y="0" width="320" height="290" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="160" y="28" text-anchor="middle" fill="#4c1d95" font-size="12" font-weight="bold" font-family="sans-serif">SAM 데이터베이스 구조</text>
+    <line x1="20" y1="38" x2="300" y2="38" stroke="#c4b5fd" stroke-width="1"/>
+    <!-- 테이블 목록 -->
+    <g transform="translate(20,50)">
+      <rect x="0" y="0" width="260" height="28" rx="4" fill="#7c3aed"/>
+      <text x="15" y="19" fill="#fff" font-size="10" font-weight="bold" font-family="monospace">📊 거래처 (companies)</text>
+    </g>
+    <g transform="translate(20,85)">
+      <rect x="0" y="0" width="260" height="28" rx="4" fill="#a855f7"/>
+      <text x="15" y="19" fill="#fff" font-size="10" font-weight="bold" font-family="monospace">📊 견적서 (quotes)</text>
+    </g>
+    <g transform="translate(20,120)">
+      <rect x="0" y="0" width="260" height="28" rx="4" fill="#c084fc"/>
+      <text x="15" y="19" fill="#fff" font-size="10" font-weight="bold" font-family="monospace">📊 주문 (orders)</text>
+    </g>
+    <g transform="translate(20,155)">
+      <rect x="0" y="0" width="260" height="28" rx="4" fill="#d8b4fe"/>
+      <text x="15" y="19" fill="#4c1d95" font-size="10" font-weight="bold" font-family="monospace">📊 제품 (items)</text>
+    </g>
+    <g transform="translate(20,190)">
+      <rect x="0" y="0" width="260" height="28" rx="4" fill="#e9d5ff"/>
+      <text x="15" y="19" fill="#4c1d95" font-size="10" font-weight="bold" font-family="monospace">📊 직원 (employees)</text>
+    </g>
+    <text x="160" y="245" text-anchor="middle" fill="#9ca3af" font-size="9" font-family="sans-serif">... 그 외 수십 개의 테이블</text>
+    <text x="160" y="272" text-anchor="middle" fill="#6d28d9" font-size="10" font-family="sans-serif">모든 데이터가 체계적으로</text>
+    <text x="160" y="286" text-anchor="middle" fill="#6d28d9" font-size="10" font-family="sans-serif">테이블에 저장/관리된다</text>
+  </g>
+  <!-- 하단 -->
+  <text x="400" y="385" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">데이터베이스 = 수백 개의 엑셀 시트를 컴퓨터가 자동으로 관리하는 초대형 파일</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/11.svg b/public/images/academy/web-basics/11.svg
new file mode 100644
index 00000000..b4aafd3f
--- /dev/null
+++ b/public/images/academy/web-basics/11.svg
@@ -0,0 +1,94 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <rect width="800" height="400" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">API 동작 원리 — "식당의 메뉴판과 주문 시스템"</text>
+  <!-- 손님 (앱/브라우저) -->
+  <g transform="translate(40,70)">
+    <rect x="0" y="0" width="140" height="280" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <text x="70" y="28" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">손님 (앱/브라우저)</text>
+    <circle cx="70" cy="60" r="18" fill="#a78bfa"/>
+    <circle cx="64" cy="56" r="2" fill="#1e1b4b"/>
+    <circle cx="76" cy="56" r="2" fill="#1e1b4b"/>
+    <path d="M64,66 Q70,71 76,66" fill="none" stroke="#1e1b4b" stroke-width="1.5"/>
+    <rect x="50" y="83" width="40" height="30" rx="5" fill="#7c3aed"/>
+    <!-- 주문서 -->
+    <rect x="15" y="130" width="110" height="50" rx="6" fill="#fff" stroke="#a78bfa" stroke-width="1"/>
+    <text x="70" y="148" text-anchor="middle" fill="#4c1d95" font-size="8" font-weight="bold" font-family="sans-serif">1. 메뉴판 보기</text>
+    <text x="70" y="165" text-anchor="middle" fill="#6d28d9" font-size="7" font-family="monospace">GET /api/orders</text>
+    <!-- 주문 -->
+    <rect x="15" y="190" width="110" height="50" rx="6" fill="#fff" stroke="#a78bfa" stroke-width="1"/>
+    <text x="70" y="208" text-anchor="middle" fill="#4c1d95" font-size="8" font-weight="bold" font-family="sans-serif">2. 주문하기</text>
+    <text x="70" y="225" text-anchor="middle" fill="#6d28d9" font-size="7" font-family="monospace">POST /api/orders</text>
+    <text x="70" y="265" text-anchor="middle" fill="#6d28d9" font-size="8" font-family="sans-serif">원하는 데이터를</text>
+    <text x="70" y="278" text-anchor="middle" fill="#6d28d9" font-size="8" font-family="sans-serif">API로 요청!</text>
+  </g>
+  <!-- 메뉴판 (API) -->
+  <g transform="translate(260,70)">
+    <rect x="0" y="0" width="280" height="280" rx="10" fill="#fff" stroke="#7c3aed" stroke-width="2"/>
+    <rect x="0" y="0" width="280" height="32" rx="10" fill="#7c3aed"/>
+    <rect x="0" y="20" width="280" height="12" fill="#7c3aed"/>
+    <text x="140" y="22" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold" font-family="sans-serif">메뉴판 (API 목록)</text>
+    <!-- API 메뉴 항목들 -->
+    <g transform="translate(15,45)">
+      <rect x="0" y="0" width="250" height="35" rx="5" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+      <rect x="5" y="5" width="40" height="18" rx="3" fill="#16a34a"/>
+      <text x="25" y="18" text-anchor="middle" fill="#fff" font-size="8" font-weight="bold" font-family="monospace">GET</text>
+      <text x="55" y="15" fill="#374151" font-size="9" font-family="monospace">/api/orders</text>
+      <text x="55" y="27" fill="#9ca3af" font-size="7" font-family="sans-serif">주문 목록 조회</text>
+    </g>
+    <g transform="translate(15,90)">
+      <rect x="0" y="0" width="250" height="35" rx="5" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+      <rect x="5" y="5" width="40" height="18" rx="3" fill="#2563eb"/>
+      <text x="25" y="18" text-anchor="middle" fill="#fff" font-size="8" font-weight="bold" font-family="monospace">POST</text>
+      <text x="55" y="15" fill="#374151" font-size="9" font-family="monospace">/api/orders</text>
+      <text x="55" y="27" fill="#9ca3af" font-size="7" font-family="sans-serif">새 주문 등록</text>
+    </g>
+    <g transform="translate(15,135)">
+      <rect x="0" y="0" width="250" height="35" rx="5" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+      <rect x="5" y="5" width="40" height="18" rx="3" fill="#f59e0b"/>
+      <text x="25" y="18" text-anchor="middle" fill="#fff" font-size="8" font-weight="bold" font-family="monospace">PUT</text>
+      <text x="55" y="15" fill="#374151" font-size="9" font-family="monospace">/api/orders/1</text>
+      <text x="55" y="27" fill="#9ca3af" font-size="7" font-family="sans-serif">주문 수정</text>
+    </g>
+    <g transform="translate(15,180)">
+      <rect x="0" y="0" width="250" height="35" rx="5" fill="#ede9fe" stroke="#c4b5fd" stroke-width="0.5"/>
+      <rect x="5" y="5" width="40" height="18" rx="3" fill="#ef4444"/>
+      <text x="25" y="18" text-anchor="middle" fill="#fff" font-size="7" font-weight="bold" font-family="monospace">DEL</text>
+      <text x="55" y="15" fill="#374151" font-size="9" font-family="monospace">/api/orders/1</text>
+      <text x="55" y="27" fill="#9ca3af" font-size="7" font-family="sans-serif">주문 삭제</text>
+    </g>
+    <text x="140" y="245" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">API = 정해진 형식으로</text>
+    <text x="140" y="260" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">데이터를 주고받는 창구</text>
+  </g>
+  <!-- 주방 (서버/DB) -->
+  <g transform="translate(620,70)">
+    <rect x="0" y="0" width="140" height="280" rx="10" fill="#4c1d95"/>
+    <text x="70" y="28" text-anchor="middle" fill="#fff" font-size="11" font-weight="bold" font-family="sans-serif">주방 (서버+DB)</text>
+    <!-- 서버 -->
+    <rect x="20" y="45" width="100" height="30" rx="5" fill="#6d28d9"/>
+    <text x="70" y="65" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">요리사 (서버)</text>
+    <!-- DB -->
+    <rect x="20" y="85" width="100" height="30" rx="5" fill="#5b21b6"/>
+    <text x="70" y="105" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">냉장고 (DB)</text>
+    <text x="70" y="145" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">3. 요리 (처리)</text>
+    <text x="70" y="165" text-anchor="middle" fill="#c4b5fd" font-size="8" font-family="sans-serif">DB에서 데이터를</text>
+    <text x="70" y="180" text-anchor="middle" fill="#c4b5fd" font-size="8" font-family="sans-serif">꺼내서 가공</text>
+    <text x="70" y="220" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">4. 서빙 (응답)</text>
+    <text x="70" y="240" text-anchor="middle" fill="#c4b5fd" font-size="8" font-family="sans-serif">완성된 데이터를</text>
+    <text x="70" y="255" text-anchor="middle" fill="#c4b5fd" font-size="8" font-family="sans-serif">JSON으로 전달</text>
+  </g>
+  <!-- 화살표 -->
+  <line x1="180" y1="180" x2="255" y2="180" stroke="#7c3aed" stroke-width="2" marker-end="url(#arr11a)"/>
+  <line x1="545" y1="170" x2="615" y2="170" stroke="#7c3aed" stroke-width="2" marker-end="url(#arr11a)"/>
+  <line x1="615" y1="210" x2="545" y2="210" stroke="#a855f7" stroke-width="2" marker-end="url(#arr11b)"/>
+  <line x1="255" y1="220" x2="180" y2="220" stroke="#a855f7" stroke-width="2" marker-end="url(#arr11b)"/>
+  <defs>
+    <marker id="arr11a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#7c3aed"/>
+    </marker>
+    <marker id="arr11b" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#a855f7"/>
+    </marker>
+  </defs>
+  <!-- 하단 -->
+  <text x="400" y="385" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">API = 메뉴판으로 주문(요청) → 주방에서 요리(처리) → 완성된 음식(응답) 서빙</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/12.svg b/public/images/academy/web-basics/12.svg
new file mode 100644
index 00000000..3ae91087
--- /dev/null
+++ b/public/images/academy/web-basics/12.svg
@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 350">
+  <rect width="800" height="350" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">SAM 접속 4단계</text>
+  <!-- 단계 1: 브라우저 열기 -->
+  <g transform="translate(20,55)">
+    <rect x="0" y="0" width="170" height="240" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <circle cx="85" cy="32" r="18" fill="#7c3aed"/>
+    <text x="85" y="38" text-anchor="middle" fill="#fff" font-size="16" font-weight="bold" font-family="sans-serif">1</text>
+    <text x="85" y="68" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">브라우저 열기</text>
+    <!-- 브라우저 아이콘 -->
+    <circle cx="85" cy="110" r="30" fill="#fff" stroke="#7c3aed" stroke-width="2"/>
+    <circle cx="85" cy="110" r="12" fill="#7c3aed"/>
+    <circle cx="85" cy="110" r="6" fill="#fff"/>
+    <line x1="85" y1="80" x2="85" y2="98" stroke="#7c3aed" stroke-width="2"/>
+    <line x1="55" y1="110" x2="73" y2="110" stroke="#7c3aed" stroke-width="2"/>
+    <text x="85" y="165" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">Chrome, Edge 등</text>
+    <text x="85" y="180" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">아무 브라우저 OK</text>
+    <rect x="25" y="200" width="120" height="28" rx="6" fill="#7c3aed" opacity="0.1"/>
+    <text x="85" y="218" text-anchor="middle" fill="#7c3aed" font-size="9" font-weight="bold" font-family="sans-serif">인터넷 창문 열기</text>
+  </g>
+  <!-- 화살표 -->
+  <text x="205" y="180" fill="#7c3aed" font-size="24" font-family="sans-serif">→</text>
+  <!-- 단계 2: 주소 입력 -->
+  <g transform="translate(220,55)">
+    <rect x="0" y="0" width="170" height="240" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <circle cx="85" cy="32" r="18" fill="#a855f7"/>
+    <text x="85" y="38" text-anchor="middle" fill="#fff" font-size="16" font-weight="bold" font-family="sans-serif">2</text>
+    <text x="85" y="68" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">주소 입력</text>
+    <!-- URL 바 -->
+    <rect x="15" y="90" width="140" height="30" rx="15" fill="#fff" stroke="#a78bfa" stroke-width="1.5"/>
+    <text x="28" y="109" fill="#16a34a" font-size="10" font-family="sans-serif">🔒</text>
+    <text x="44" y="110" fill="#374151" font-size="7" font-family="monospace">sam.jooil.co.kr</text>
+    <text x="85" y="145" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">주소창에 SAM 주소</text>
+    <text x="85" y="160" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">입력 후 Enter</text>
+    <rect x="25" y="200" width="120" height="28" rx="6" fill="#a855f7" opacity="0.1"/>
+    <text x="85" y="218" text-anchor="middle" fill="#7c3aed" font-size="9" font-weight="bold" font-family="sans-serif">건물 주소 입력</text>
+  </g>
+  <!-- 화살표 -->
+  <text x="405" y="180" fill="#7c3aed" font-size="24" font-family="sans-serif">→</text>
+  <!-- 단계 3: 로그인 -->
+  <g transform="translate(420,55)">
+    <rect x="0" y="0" width="170" height="240" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <circle cx="85" cy="32" r="18" fill="#c084fc"/>
+    <text x="85" y="38" text-anchor="middle" fill="#fff" font-size="16" font-weight="bold" font-family="sans-serif">3</text>
+    <text x="85" y="68" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">로그인</text>
+    <!-- 로그인 폼 -->
+    <rect x="20" y="90" width="130" height="22" rx="4" fill="#fff" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="32" y="105" fill="#9ca3af" font-size="8" font-family="sans-serif">아이디</text>
+    <rect x="20" y="118" width="130" height="22" rx="4" fill="#fff" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="32" y="133" fill="#9ca3af" font-size="8" font-family="sans-serif">●●●●●●</text>
+    <rect x="20" y="148" width="130" height="22" rx="4" fill="#7c3aed"/>
+    <text x="85" y="163" text-anchor="middle" fill="#fff" font-size="9" font-weight="bold" font-family="sans-serif">로그인</text>
+    <rect x="25" y="200" width="120" height="28" rx="6" fill="#c084fc" opacity="0.1"/>
+    <text x="85" y="218" text-anchor="middle" fill="#7c3aed" font-size="9" font-weight="bold" font-family="sans-serif">사원증 제시</text>
+  </g>
+  <!-- 화살표 -->
+  <text x="605" y="180" fill="#7c3aed" font-size="24" font-family="sans-serif">→</text>
+  <!-- 단계 4: 대시보드 -->
+  <g transform="translate(620,55)">
+    <rect x="0" y="0" width="160" height="240" rx="10" fill="#7c3aed"/>
+    <circle cx="80" cy="32" r="18" fill="#fff"/>
+    <text x="80" y="38" text-anchor="middle" fill="#7c3aed" font-size="16" font-weight="bold" font-family="sans-serif">4</text>
+    <text x="80" y="68" text-anchor="middle" fill="#fff" font-size="11" font-weight="bold" font-family="sans-serif">대시보드!</text>
+    <!-- 대시보드 미니 -->
+    <rect x="15" y="85" width="130" height="90" rx="6" fill="#5b21b6" stroke="#a78bfa" stroke-width="0.5"/>
+    <rect x="20" y="90" width="35" height="80" rx="3" fill="#6d28d9"/>
+    <rect x="22" y="95" width="31" height="5" rx="1" fill="#a78bfa" opacity="0.5"/>
+    <rect x="22" y="103" width="31" height="5" rx="1" fill="#a78bfa" opacity="0.3"/>
+    <rect x="22" y="111" width="31" height="5" rx="1" fill="#a78bfa" opacity="0.3"/>
+    <rect x="60" y="90" width="80" height="35" rx="3" fill="#4c1d95"/>
+    <rect x="60" y="130" width="38" height="35" rx="3" fill="#4c1d95"/>
+    <rect x="102" y="130" width="38" height="35" rx="3" fill="#4c1d95"/>
+    <text x="80" y="200" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">업무 시작!</text>
+    <rect x="20" y="210" width="120" height="22" rx="6" fill="#fff" opacity="0.15"/>
+    <text x="80" y="225" text-anchor="middle" fill="#e9d5ff" font-size="9" font-weight="bold" font-family="sans-serif">사무실 입장 완료</text>
+  </g>
+  <!-- 하단 -->
+  <text x="400" y="330" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">브라우저 열기 → SAM 주소 입력 → 로그인 → 대시보드에서 업무 시작!</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/2.svg b/public/images/academy/web-basics/2.svg
new file mode 100644
index 00000000..7eea4965
--- /dev/null
+++ b/public/images/academy/web-basics/2.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="bg2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#faf5ff"/>
+      <stop offset="100%" style="stop-color:#f3e8ff"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="400" fill="url(#bg2)" rx="12"/>
+  <!-- 지구본 -->
+  <g transform="translate(400,190)">
+    <circle cx="0" cy="0" r="120" fill="#ede9fe" stroke="#7c3aed" stroke-width="2"/>
+    <ellipse cx="0" cy="0" rx="120" ry="40" fill="none" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4,3"/>
+    <ellipse cx="0" cy="0" rx="60" ry="120" fill="none" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4,3"/>
+    <line x1="-120" y1="0" x2="120" y2="0" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4,3"/>
+    <line x1="0" y1="-120" x2="0" y2="120" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4,3"/>
+    <!-- 대륙 표현 -->
+    <path d="M-40,-60 Q-20,-80 10,-70 Q30,-60 20,-40 Q10,-30 -10,-35 Q-30,-40 -40,-60Z" fill="#7c3aed" opacity="0.3"/>
+    <path d="M30,-20 Q50,-30 70,-10 Q60,10 40,5 Q30,0 30,-20Z" fill="#7c3aed" opacity="0.3"/>
+    <path d="M-70,20 Q-50,10 -30,20 Q-20,40 -40,50 Q-60,40 -70,20Z" fill="#7c3aed" opacity="0.3"/>
+    <path d="M20,30 Q40,20 60,35 Q50,55 30,50 Q20,40 20,30Z" fill="#7c3aed" opacity="0.3"/>
+  </g>
+  <!-- 주변 컴퓨터들 -->
+  <g transform="translate(100,60)">
+    <rect x="0" y="0" width="50" height="35" rx="4" fill="#4c1d95" stroke="#7c3aed" stroke-width="1.5"/>
+    <rect x="4" y="4" width="42" height="24" rx="2" fill="#a78bfa" opacity="0.3"/>
+    <rect x="15" y="35" width="20" height="5" rx="1" fill="#4c1d95"/>
+    <text x="25" y="22" text-anchor="middle" fill="#e9d5ff" font-size="8" font-family="sans-serif">PC</text>
+  </g>
+  <g transform="translate(650,50)">
+    <rect x="0" y="0" width="50" height="35" rx="4" fill="#4c1d95" stroke="#7c3aed" stroke-width="1.5"/>
+    <rect x="4" y="4" width="42" height="24" rx="2" fill="#a78bfa" opacity="0.3"/>
+    <rect x="15" y="35" width="20" height="5" rx="1" fill="#4c1d95"/>
+    <text x="25" y="22" text-anchor="middle" fill="#e9d5ff" font-size="8" font-family="sans-serif">PC</text>
+  </g>
+  <g transform="translate(80,280)">
+    <rect x="0" y="0" width="50" height="35" rx="4" fill="#4c1d95" stroke="#7c3aed" stroke-width="1.5"/>
+    <rect x="4" y="4" width="42" height="24" rx="2" fill="#a78bfa" opacity="0.3"/>
+    <rect x="15" y="35" width="20" height="5" rx="1" fill="#4c1d95"/>
+    <text x="25" y="22" text-anchor="middle" fill="#e9d5ff" font-size="8" font-family="sans-serif">PC</text>
+  </g>
+  <g transform="translate(670,280)">
+    <rect x="0" y="0" width="50" height="35" rx="4" fill="#4c1d95" stroke="#7c3aed" stroke-width="1.5"/>
+    <rect x="4" y="4" width="42" height="24" rx="2" fill="#a78bfa" opacity="0.3"/>
+    <rect x="15" y="35" width="20" height="5" rx="1" fill="#4c1d95"/>
+    <text x="25" y="22" text-anchor="middle" fill="#e9d5ff" font-size="8" font-family="sans-serif">PC</text>
+  </g>
+  <!-- 스마트폰 -->
+  <g transform="translate(170,170)">
+    <rect x="0" y="0" width="30" height="55" rx="5" fill="#4c1d95" stroke="#7c3aed" stroke-width="1.5"/>
+    <rect x="3" y="8" width="24" height="35" rx="2" fill="#a78bfa" opacity="0.3"/>
+  </g>
+  <g transform="translate(600,170)">
+    <rect x="0" y="0" width="30" height="55" rx="5" fill="#4c1d95" stroke="#7c3aed" stroke-width="1.5"/>
+    <rect x="3" y="8" width="24" height="35" rx="2" fill="#a78bfa" opacity="0.3"/>
+  </g>
+  <!-- 연결선 -->
+  <line x1="150" y1="78" x2="300" y2="150" stroke="#7c3aed" stroke-width="1.5" opacity="0.5"/>
+  <line x1="675" y1="68" x2="510" y2="140" stroke="#7c3aed" stroke-width="1.5" opacity="0.5"/>
+  <line x1="105" y1="280" x2="310" y2="230" stroke="#7c3aed" stroke-width="1.5" opacity="0.5"/>
+  <line x1="695" y1="280" x2="500" y2="230" stroke="#7c3aed" stroke-width="1.5" opacity="0.5"/>
+  <line x1="200" y1="195" x2="280" y2="190" stroke="#7c3aed" stroke-width="1.5" opacity="0.5"/>
+  <line x1="600" y1="195" x2="520" y2="190" stroke="#7c3aed" stroke-width="1.5" opacity="0.5"/>
+  <!-- 라벨 -->
+  <text x="400" y="25" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">전 세계 컴퓨터가 연결된 네트워크 = 인터넷</text>
+  <text x="400" y="385" text-anchor="middle" fill="#6d28d9" font-size="12" font-family="sans-serif">"전 세계를 연결하는 도로망"</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/3.svg b/public/images/academy/web-basics/3.svg
new file mode 100644
index 00000000..16e2f16b
--- /dev/null
+++ b/public/images/academy/web-basics/3.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 350">
+  <defs>
+    <linearGradient id="bg3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#faf5ff"/>
+      <stop offset="100%" style="stop-color:#f3e8ff"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="350" fill="url(#bg3)" rx="12"/>
+  <!-- URL 바 -->
+  <rect x="60" y="30" width="680" height="50" rx="25" fill="#fff" stroke="#7c3aed" stroke-width="2"/>
+  <circle cx="90" cy="55" r="10" fill="#6d28d9" opacity="0.2"/>
+  <text x="90" y="59" text-anchor="middle" fill="#6d28d9" font-size="12" font-family="sans-serif">🔒</text>
+  <text x="120" y="60" fill="#374151" font-size="15" font-family="monospace" font-weight="bold">https://sam.jooil.co.kr/orders</text>
+  <!-- 분해 화살표 -->
+  <!-- 프로토콜 -->
+  <line x1="143" y1="80" x2="143" y2="110" stroke="#7c3aed" stroke-width="2"/>
+  <rect x="90" y="115" width="110" height="40" rx="8" fill="#7c3aed"/>
+  <text x="145" y="140" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold" font-family="sans-serif">프로토콜</text>
+  <text x="145" y="178" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">https://</text>
+  <text x="145" y="196" text-anchor="middle" fill="#9ca3af" font-size="9" font-family="sans-serif">"봉투에 넣어 보내기"</text>
+  <text x="145" y="210" text-anchor="middle" fill="#9ca3af" font-size="9" font-family="sans-serif">(암호화 통신)</text>
+  <!-- 도메인 -->
+  <line x1="310" y1="80" x2="310" y2="110" stroke="#a855f7" stroke-width="2"/>
+  <rect x="245" y="115" width="130" height="40" rx="8" fill="#a855f7"/>
+  <text x="310" y="140" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold" font-family="sans-serif">도메인</text>
+  <text x="310" y="178" text-anchor="middle" fill="#7c3aed" font-size="11" font-family="sans-serif">sam.jooil.co.kr</text>
+  <text x="310" y="196" text-anchor="middle" fill="#9ca3af" font-size="9" font-family="sans-serif">"건물의 이름"</text>
+  <text x="310" y="210" text-anchor="middle" fill="#9ca3af" font-size="9" font-family="sans-serif">(서버 주소)</text>
+  <!-- 경로 -->
+  <line x1="485" y1="80" x2="485" y2="110" stroke="#c084fc" stroke-width="2"/>
+  <rect x="430" y="115" width="110" height="40" rx="8" fill="#c084fc"/>
+  <text x="485" y="140" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold" font-family="sans-serif">경로</text>
+  <text x="485" y="178" text-anchor="middle" fill="#7c3aed" font-size="11" font-family="sans-serif">/orders</text>
+  <text x="485" y="196" text-anchor="middle" fill="#9ca3af" font-size="9" font-family="sans-serif">"건물 안의 몇 층 몇 호"</text>
+  <text x="485" y="210" text-anchor="middle" fill="#9ca3af" font-size="9" font-family="sans-serif">(페이지 위치)</text>
+  <!-- 아래쪽 비유 박스 -->
+  <rect x="80" y="240" width="640" height="90" rx="12" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1"/>
+  <text x="400" y="268" text-anchor="middle" fill="#4c1d95" font-size="14" font-weight="bold" font-family="sans-serif">비유: 건물의 정확한 주소</text>
+  <text x="400" y="295" text-anchor="middle" fill="#6d28d9" font-size="12" font-family="sans-serif">https = 안전한 배달 방식 | sam.jooil.co.kr = 건물 이름 | /orders = 3층 주문관리실</text>
+  <text x="400" y="315" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="sans-serif">URL은 인터넷에서 원하는 페이지를 정확히 찾아가는 "주소"다</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/4.svg b/public/images/academy/web-basics/4.svg
new file mode 100644
index 00000000..b3ce2e58
--- /dev/null
+++ b/public/images/academy/web-basics/4.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="bg4" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#faf5ff"/>
+      <stop offset="100%" style="stop-color:#f3e8ff"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="400" fill="url(#bg4)" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">HTTP 요청/응답 흐름 — "주문서 양식"</text>
+  <!-- 사용자(손님) -->
+  <g transform="translate(80,80)">
+    <rect x="0" y="0" width="180" height="260" rx="12" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <text x="90" y="30" text-anchor="middle" fill="#4c1d95" font-size="13" font-weight="bold" font-family="sans-serif">손님 (브라우저)</text>
+    <!-- 사람 아이콘 -->
+    <circle cx="90" cy="70" r="20" fill="#a78bfa"/>
+    <circle cx="84" cy="66" r="2" fill="#1e1b4b"/>
+    <circle cx="96" cy="66" r="2" fill="#1e1b4b"/>
+    <path d="M84,75 Q90,80 96,75" fill="none" stroke="#1e1b4b" stroke-width="1.5"/>
+    <rect x="70" y="95" width="40" height="35" rx="5" fill="#7c3aed"/>
+    <!-- 주문서 -->
+    <rect x="20" y="150" width="140" height="80" rx="6" fill="#fff" stroke="#a78bfa" stroke-width="1"/>
+    <text x="90" y="170" text-anchor="middle" fill="#6d28d9" font-size="10" font-weight="bold" font-family="sans-serif">주문서 (요청)</text>
+    <line x1="35" y1="180" x2="145" y2="180" stroke="#e5e7eb" stroke-width="1"/>
+    <text x="40" y="195" fill="#6b7280" font-size="9" font-family="monospace">GET /orders</text>
+    <text x="40" y="210" fill="#6b7280" font-size="9" font-family="monospace">Host: sam.jooil.co.kr</text>
+    <text x="40" y="225" fill="#6b7280" font-size="9" font-family="monospace">Accept: text/html</text>
+  </g>
+  <!-- 서버(식당) -->
+  <g transform="translate(540,80)">
+    <rect x="0" y="0" width="180" height="260" rx="12" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <text x="90" y="30" text-anchor="middle" fill="#4c1d95" font-size="13" font-weight="bold" font-family="sans-serif">식당 (서버)</text>
+    <!-- 서버 아이콘 -->
+    <rect x="55" y="50" width="70" height="20" rx="4" fill="#7c3aed"/>
+    <circle cx="70" cy="60" r="3" fill="#a78bfa"/>
+    <circle cx="80" cy="60" r="3" fill="#a78bfa"/>
+    <rect x="55" y="75" width="70" height="20" rx="4" fill="#6d28d9"/>
+    <circle cx="70" cy="85" r="3" fill="#a78bfa"/>
+    <circle cx="80" cy="85" r="3" fill="#a78bfa"/>
+    <rect x="55" y="100" width="70" height="20" rx="4" fill="#5b21b6"/>
+    <circle cx="70" cy="110" r="3" fill="#a78bfa"/>
+    <circle cx="80" cy="110" r="3" fill="#a78bfa"/>
+    <!-- 응답 -->
+    <rect x="20" y="150" width="140" height="80" rx="6" fill="#fff" stroke="#a78bfa" stroke-width="1"/>
+    <text x="90" y="170" text-anchor="middle" fill="#6d28d9" font-size="10" font-weight="bold" font-family="sans-serif">음식 (응답)</text>
+    <line x1="35" y1="180" x2="145" y2="180" stroke="#e5e7eb" stroke-width="1"/>
+    <text x="40" y="195" fill="#6b7280" font-size="9" font-family="monospace">200 OK</text>
+    <text x="40" y="210" fill="#6b7280" font-size="9" font-family="monospace">Content-Type: HTML</text>
+    <text x="40" y="225" fill="#6b7280" font-size="9" font-family="monospace">&lt;html&gt;주문목록...&lt;/html&gt;</text>
+  </g>
+  <!-- 화살표: 요청 -->
+  <g>
+    <line x1="260" y1="170" x2="530" y2="170" stroke="#7c3aed" stroke-width="2.5" marker-end="url(#arrow4)"/>
+    <text x="395" y="160" text-anchor="middle" fill="#7c3aed" font-size="12" font-weight="bold" font-family="sans-serif">요청 (주문)</text>
+  </g>
+  <!-- 화살표: 응답 -->
+  <g>
+    <line x1="530" y1="240" x2="260" y2="240" stroke="#a855f7" stroke-width="2.5" marker-end="url(#arrow4b)"/>
+    <text x="395" y="265" text-anchor="middle" fill="#a855f7" font-size="12" font-weight="bold" font-family="sans-serif">응답 (음식)</text>
+  </g>
+  <defs>
+    <marker id="arrow4" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#7c3aed"/>
+    </marker>
+    <marker id="arrow4b" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#a855f7"/>
+    </marker>
+  </defs>
+  <!-- 하단 설명 -->
+  <rect x="100" y="360" width="600" height="30" rx="8" fill="#ede9fe"/>
+  <text x="400" y="380" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">HTTP = 손님과 식당이 대화하는 "주문서 양식". 요청을 보내면 응답이 돌아온다.</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/5.svg b/public/images/academy/web-basics/5.svg
new file mode 100644
index 00000000..76bf810d
--- /dev/null
+++ b/public/images/academy/web-basics/5.svg
@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 350">
+  <rect width="800" height="350" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">자주 보는 에러 코드</text>
+  <!-- 404 -->
+  <g transform="translate(30,55)">
+    <rect x="0" y="0" width="170" height="250" rx="12" fill="#fef3c7" stroke="#f59e0b" stroke-width="1.5"/>
+    <text x="85" y="40" text-anchor="middle" fill="#92400e" font-size="36" font-weight="bold" font-family="sans-serif">404</text>
+    <text x="85" y="65" text-anchor="middle" fill="#b45309" font-size="11" font-weight="bold" font-family="sans-serif">Not Found</text>
+    <line x1="20" y1="80" x2="150" y2="80" stroke="#fbbf24" stroke-width="1"/>
+    <text x="85" y="105" text-anchor="middle" fill="#78350f" font-size="28" font-family="sans-serif">🏚️</text>
+    <text x="85" y="140" text-anchor="middle" fill="#92400e" font-size="11" font-weight="bold" font-family="sans-serif">주소가 틀림</text>
+    <text x="85" y="165" text-anchor="middle" fill="#a16207" font-size="10" font-family="sans-serif">빈 땅에 도착!</text>
+    <text x="85" y="190" text-anchor="middle" fill="#a16207" font-size="9" font-family="sans-serif">주소를 다시 확인하거나</text>
+    <text x="85" y="205" text-anchor="middle" fill="#a16207" font-size="9" font-family="sans-serif">삭제된 페이지일 수 있음</text>
+    <rect x="30" y="220" width="110" height="22" rx="6" fill="#f59e0b" opacity="0.2"/>
+    <text x="85" y="235" text-anchor="middle" fill="#92400e" font-size="9" font-weight="bold" font-family="sans-serif">URL 확인 필요</text>
+  </g>
+  <!-- 500 -->
+  <g transform="translate(215,55)">
+    <rect x="0" y="0" width="170" height="250" rx="12" fill="#fee2e2" stroke="#ef4444" stroke-width="1.5"/>
+    <text x="85" y="40" text-anchor="middle" fill="#991b1b" font-size="36" font-weight="bold" font-family="sans-serif">500</text>
+    <text x="85" y="65" text-anchor="middle" fill="#dc2626" font-size="11" font-weight="bold" font-family="sans-serif">Server Error</text>
+    <line x1="20" y1="80" x2="150" y2="80" stroke="#fca5a5" stroke-width="1"/>
+    <text x="85" y="105" text-anchor="middle" fill="#991b1b" font-size="28" font-family="sans-serif">🔥</text>
+    <text x="85" y="140" text-anchor="middle" fill="#991b1b" font-size="11" font-weight="bold" font-family="sans-serif">주방 화재 발생!</text>
+    <text x="85" y="165" text-anchor="middle" fill="#dc2626" font-size="10" font-family="sans-serif">서버 내부 오류</text>
+    <text x="85" y="190" text-anchor="middle" fill="#dc2626" font-size="9" font-family="sans-serif">프로그램 코드에</text>
+    <text x="85" y="205" text-anchor="middle" fill="#dc2626" font-size="9" font-family="sans-serif">문제가 발생한 상태</text>
+    <rect x="30" y="220" width="110" height="22" rx="6" fill="#ef4444" opacity="0.2"/>
+    <text x="85" y="235" text-anchor="middle" fill="#991b1b" font-size="9" font-weight="bold" font-family="sans-serif">개발팀 연락!</text>
+  </g>
+  <!-- 502 -->
+  <g transform="translate(400,55)">
+    <rect x="0" y="0" width="170" height="250" rx="12" fill="#fce7f3" stroke="#ec4899" stroke-width="1.5"/>
+    <text x="85" y="40" text-anchor="middle" fill="#831843" font-size="36" font-weight="bold" font-family="sans-serif">502</text>
+    <text x="85" y="65" text-anchor="middle" fill="#be185d" font-size="11" font-weight="bold" font-family="sans-serif">Bad Gateway</text>
+    <line x1="20" y1="80" x2="150" y2="80" stroke="#f9a8d4" stroke-width="1"/>
+    <text x="85" y="105" text-anchor="middle" fill="#831843" font-size="28" font-family="sans-serif">🚪</text>
+    <text x="85" y="140" text-anchor="middle" fill="#831843" font-size="11" font-weight="bold" font-family="sans-serif">요리사 퇴근!</text>
+    <text x="85" y="165" text-anchor="middle" fill="#be185d" font-size="10" font-family="sans-serif">서비스 중단 상태</text>
+    <text x="85" y="190" text-anchor="middle" fill="#be185d" font-size="9" font-family="sans-serif">백엔드 서비스가</text>
+    <text x="85" y="205" text-anchor="middle" fill="#be185d" font-size="9" font-family="sans-serif">응답하지 않는 상태</text>
+    <rect x="30" y="220" width="110" height="22" rx="6" fill="#ec4899" opacity="0.2"/>
+    <text x="85" y="235" text-anchor="middle" fill="#831843" font-size="9" font-weight="bold" font-family="sans-serif">잠시 후 재시도</text>
+  </g>
+  <!-- 403 -->
+  <g transform="translate(585,55)">
+    <rect x="0" y="0" width="170" height="250" rx="12" fill="#ede9fe" stroke="#8b5cf6" stroke-width="1.5"/>
+    <text x="85" y="40" text-anchor="middle" fill="#3b0764" font-size="36" font-weight="bold" font-family="sans-serif">403</text>
+    <text x="85" y="65" text-anchor="middle" fill="#6d28d9" font-size="11" font-weight="bold" font-family="sans-serif">Forbidden</text>
+    <line x1="20" y1="80" x2="150" y2="80" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="85" y="105" text-anchor="middle" fill="#3b0764" font-size="28" font-family="sans-serif">🚫</text>
+    <text x="85" y="140" text-anchor="middle" fill="#3b0764" font-size="11" font-weight="bold" font-family="sans-serif">출입 금지!</text>
+    <text x="85" y="165" text-anchor="middle" fill="#6d28d9" font-size="10" font-family="sans-serif">권한 없음</text>
+    <text x="85" y="190" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">이 페이지를 볼</text>
+    <text x="85" y="205" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">권한이 없는 상태</text>
+    <rect x="30" y="220" width="110" height="22" rx="6" fill="#8b5cf6" opacity="0.2"/>
+    <text x="85" y="235" text-anchor="middle" fill="#3b0764" font-size="9" font-weight="bold" font-family="sans-serif">관리자 확인 필요</text>
+  </g>
+  <!-- 하단 -->
+  <text x="400" y="340" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">에러 코드 = 서버가 보내는 "상태 신호". 숫자만 알면 문제를 빠르게 파악할 수 있다.</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/6.svg b/public/images/academy/web-basics/6.svg
new file mode 100644
index 00000000..ddbbdc1a
--- /dev/null
+++ b/public/images/academy/web-basics/6.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <rect width="800" height="400" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">설치형 vs 클라우드 비교</text>
+  <!-- 설치형 -->
+  <g transform="translate(50,55)">
+    <rect x="0" y="0" width="320" height="300" rx="12" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5"/>
+    <text x="160" y="30" text-anchor="middle" fill="#475569" font-size="14" font-weight="bold" font-family="sans-serif">설치형 (내 컴퓨터)</text>
+    <line x1="20" y1="42" x2="300" y2="42" stroke="#cbd5e1" stroke-width="1"/>
+    <!-- 내 PC 아이콘 -->
+    <rect x="110" y="60" width="100" height="70" rx="6" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1"/>
+    <rect x="120" y="68" width="80" height="48" rx="3" fill="#fff"/>
+    <text x="160" y="97" text-anchor="middle" fill="#64748b" font-size="10" font-family="sans-serif">내 PC</text>
+    <rect x="140" y="130" width="40" height="8" rx="2" fill="#94a3b8"/>
+    <!-- 단점 리스트 -->
+    <g transform="translate(30,160)">
+      <text x="0" y="0" fill="#dc2626" font-size="11" font-family="sans-serif">✗ CD/USB로 설치 필요</text>
+      <text x="0" y="22" fill="#dc2626" font-size="11" font-family="sans-serif">✗ 컴퓨터 바뀌면 재설치</text>
+      <text x="0" y="44" fill="#dc2626" font-size="11" font-family="sans-serif">✗ 수동 업데이트 필요</text>
+      <text x="0" y="66" fill="#dc2626" font-size="11" font-family="sans-serif">✗ 데이터 백업 직접 관리</text>
+      <text x="0" y="88" fill="#dc2626" font-size="11" font-family="sans-serif">✗ 높은 초기 비용</text>
+    </g>
+    <!-- 비유 -->
+    <rect x="20" y="270" width="280" height="22" rx="6" fill="#e2e8f0"/>
+    <text x="160" y="285" text-anchor="middle" fill="#475569" font-size="10" font-family="sans-serif">비유: 집에서 직접 요리하기 (재료+도구 필요)</text>
+  </g>
+  <!-- VS -->
+  <text x="400" y="215" text-anchor="middle" fill="#7c3aed" font-size="24" font-weight="bold" font-family="sans-serif">VS</text>
+  <!-- 클라우드 -->
+  <g transform="translate(430,55)">
+    <rect x="0" y="0" width="320" height="300" rx="12" fill="#ede9fe" stroke="#7c3aed" stroke-width="2"/>
+    <text x="160" y="30" text-anchor="middle" fill="#4c1d95" font-size="14" font-weight="bold" font-family="sans-serif">클라우드 (공유 오피스)</text>
+    <line x1="20" y1="42" x2="300" y2="42" stroke="#c4b5fd" stroke-width="1"/>
+    <!-- 클라우드 아이콘 -->
+    <g transform="translate(100,55)">
+      <path d="M30,50 Q0,50 5,30 Q5,10 30,10 Q40,0 60,5 Q80,0 85,15 Q110,15 110,35 Q115,55 90,55 Z" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1.5"/>
+      <text x="57" y="40" text-anchor="middle" fill="#4c1d95" font-size="14" font-weight="bold" font-family="sans-serif">Cloud</text>
+    </g>
+    <!-- 장점 리스트 -->
+    <g transform="translate(30,160)">
+      <text x="0" y="0" fill="#16a34a" font-size="11" font-family="sans-serif">✓ 설치 불필요 (브라우저만!)</text>
+      <text x="0" y="22" fill="#16a34a" font-size="11" font-family="sans-serif">✓ 어디서든 접속 가능</text>
+      <text x="0" y="44" fill="#16a34a" font-size="11" font-family="sans-serif">✓ 자동 업데이트</text>
+      <text x="0" y="66" fill="#16a34a" font-size="11" font-family="sans-serif">✓ 데이터 자동 백업</text>
+      <text x="0" y="88" fill="#16a34a" font-size="11" font-family="sans-serif">✓ 월 구독으로 부담 적음</text>
+    </g>
+    <!-- 비유 -->
+    <rect x="20" y="270" width="280" height="22" rx="6" fill="#ddd6fe"/>
+    <text x="160" y="285" text-anchor="middle" fill="#4c1d95" font-size="10" font-family="sans-serif">비유: 식당에서 주문하기 (전문가가 관리)</text>
+  </g>
+  <!-- 하단 -->
+  <text x="400" y="385" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">SAM은 클라우드 방식! 브라우저만 있으면 어디서든 사용 가능</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/7.svg b/public/images/academy/web-basics/7.svg
new file mode 100644
index 00000000..6e17bdaa
--- /dev/null
+++ b/public/images/academy/web-basics/7.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 380">
+  <rect width="800" height="380" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">SaaS = 소프트웨어 구독 서비스</text>
+  <!-- 넷플릭스 비유 -->
+  <g transform="translate(50,55)">
+    <rect x="0" y="0" width="320" height="130" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="160" y="28" text-anchor="middle" fill="#4c1d95" font-size="12" font-weight="bold" font-family="sans-serif">넷플릭스 (영상 구독)</text>
+    <line x1="20" y1="38" x2="300" y2="38" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="30" y="60" fill="#6d28d9" font-size="10" font-family="sans-serif">✓ 앱 설치 필요 없음 (브라우저OK)</text>
+    <text x="30" y="78" fill="#6d28d9" font-size="10" font-family="sans-serif">✓ 매달 요금 결제</text>
+    <text x="30" y="96" fill="#6d28d9" font-size="10" font-family="sans-serif">✓ 새 영화 자동 추가 (자동 업데이트)</text>
+    <text x="30" y="114" fill="#6d28d9" font-size="10" font-family="sans-serif">✓ TV, 폰, PC 어디서든 시청</text>
+  </g>
+  <!-- = 기호 -->
+  <text x="400" y="130" text-anchor="middle" fill="#7c3aed" font-size="30" font-weight="bold" font-family="sans-serif">=</text>
+  <!-- SAM 비유 -->
+  <g transform="translate(430,55)">
+    <rect x="0" y="0" width="320" height="130" rx="10" fill="#7c3aed" stroke="#6d28d9" stroke-width="1"/>
+    <text x="160" y="28" text-anchor="middle" fill="#fff" font-size="12" font-weight="bold" font-family="sans-serif">SAM (업무 관리 구독)</text>
+    <line x1="20" y1="38" x2="300" y2="38" stroke="#a78bfa" stroke-width="1"/>
+    <text x="30" y="60" fill="#e9d5ff" font-size="10" font-family="sans-serif">✓ 설치 없이 브라우저로 접속</text>
+    <text x="30" y="78" fill="#e9d5ff" font-size="10" font-family="sans-serif">✓ 매달 이용료 결제</text>
+    <text x="30" y="96" fill="#e9d5ff" font-size="10" font-family="sans-serif">✓ 새 기능 자동 추가 (자동 업데이트)</text>
+    <text x="30" y="114" fill="#e9d5ff" font-size="10" font-family="sans-serif">✓ 사무실, 현장, 집 어디서든 업무</text>
+  </g>
+  <!-- SaaS 흐름 -->
+  <g transform="translate(100,210)">
+    <rect x="0" y="0" width="600" height="60" rx="10" fill="#f3e8ff" stroke="#c4b5fd" stroke-width="1"/>
+    <g transform="translate(20,15)">
+      <rect x="0" y="0" width="100" height="30" rx="6" fill="#7c3aed"/>
+      <text x="50" y="20" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold" font-family="sans-serif">가입/구독</text>
+    </g>
+    <text x="140" y="35" fill="#7c3aed" font-size="16" font-family="sans-serif">→</text>
+    <g transform="translate(160,15)">
+      <rect x="0" y="0" width="120" height="30" rx="6" fill="#a855f7"/>
+      <text x="60" y="20" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold" font-family="sans-serif">브라우저 접속</text>
+    </g>
+    <text x="300" y="35" fill="#7c3aed" font-size="16" font-family="sans-serif">→</text>
+    <g transform="translate(320,15)">
+      <rect x="0" y="0" width="100" height="30" rx="6" fill="#c084fc"/>
+      <text x="50" y="20" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold" font-family="sans-serif">바로 사용!</text>
+    </g>
+    <text x="440" y="35" fill="#7c3aed" font-size="16" font-family="sans-serif">→</text>
+    <g transform="translate(460,15)">
+      <rect x="0" y="0" width="120" height="30" rx="6" fill="#d8b4fe"/>
+      <text x="60" y="20" text-anchor="middle" fill="#4c1d95" font-size="10" font-weight="bold" font-family="sans-serif">자동 업데이트</text>
+    </g>
+  </g>
+  <!-- 하단 비유 요약 -->
+  <rect x="80" y="295" width="640" height="70" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1"/>
+  <text x="400" y="320" text-anchor="middle" fill="#4c1d95" font-size="13" font-weight="bold" font-family="sans-serif">SaaS = "Software as a Service"</text>
+  <text x="400" y="340" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">소프트웨어를 사서 설치하는 게 아니라, 구독해서 인터넷으로 쓰는 방식</text>
+  <text x="400" y="355" text-anchor="middle" fill="#9ca3af" font-size="10" font-family="sans-serif">넷플릭스가 영상의 SaaS라면, SAM은 업무관리의 SaaS!</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/8.svg b/public/images/academy/web-basics/8.svg
new file mode 100644
index 00000000..0393ae86
--- /dev/null
+++ b/public/images/academy/web-basics/8.svg
@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 380">
+  <rect width="800" height="380" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">로그인/인증 흐름 — "사원증으로 출입하기"</text>
+  <!-- 단계 1: 사원증 제시 -->
+  <g transform="translate(30,60)">
+    <rect x="0" y="0" width="160" height="200" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <circle cx="80" cy="35" r="18" fill="#7c3aed"/>
+    <text x="80" y="41" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold" font-family="sans-serif">1</text>
+    <text x="80" y="72" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">사원증 제시</text>
+    <text x="80" y="88" text-anchor="middle" fill="#6d28d9" font-size="10" font-family="sans-serif">(ID + 비밀번호 입력)</text>
+    <!-- 로그인 폼 -->
+    <rect x="20" y="105" width="120" height="25" rx="4" fill="#fff" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="35" y="122" fill="#9ca3af" font-size="9" font-family="sans-serif">아이디</text>
+    <rect x="20" y="138" width="120" height="25" rx="4" fill="#fff" stroke="#c4b5fd" stroke-width="1"/>
+    <text x="35" y="155" fill="#9ca3af" font-size="9" font-family="sans-serif">●●●●●●</text>
+    <rect x="20" y="172" width="120" height="22" rx="4" fill="#7c3aed"/>
+    <text x="80" y="187" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold" font-family="sans-serif">로그인</text>
+  </g>
+  <!-- 화살표 1→2 -->
+  <text x="210" y="165" fill="#7c3aed" font-size="24" font-family="sans-serif">→</text>
+  <!-- 단계 2: 확인 -->
+  <g transform="translate(240,60)">
+    <rect x="0" y="0" width="160" height="200" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <circle cx="80" cy="35" r="18" fill="#a855f7"/>
+    <text x="80" y="41" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold" font-family="sans-serif">2</text>
+    <text x="80" y="72" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">신원 확인</text>
+    <text x="80" y="88" text-anchor="middle" fill="#6d28d9" font-size="10" font-family="sans-serif">(서버가 DB 조회)</text>
+    <!-- 서버 아이콘 -->
+    <rect x="40" y="105" width="80" height="25" rx="4" fill="#7c3aed"/>
+    <circle cx="55" cy="118" r="4" fill="#c4b5fd"/>
+    <circle cx="68" cy="118" r="4" fill="#c4b5fd"/>
+    <circle cx="81" cy="118" r="4" fill="#c4b5fd"/>
+    <rect x="40" y="140" width="80" height="25" rx="4" fill="#6d28d9"/>
+    <text x="80" y="157" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">DB 조회중...</text>
+    <text x="80" y="187" text-anchor="middle" fill="#16a34a" font-size="10" font-weight="bold" font-family="sans-serif">✓ 확인 완료!</text>
+  </g>
+  <!-- 화살표 2→3 -->
+  <text x="420" y="165" fill="#7c3aed" font-size="24" font-family="sans-serif">→</text>
+  <!-- 단계 3: 출입증 발급 -->
+  <g transform="translate(450,60)">
+    <rect x="0" y="0" width="160" height="200" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
+    <circle cx="80" cy="35" r="18" fill="#c084fc"/>
+    <text x="80" y="41" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold" font-family="sans-serif">3</text>
+    <text x="80" y="72" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">출입증 발급</text>
+    <text x="80" y="88" text-anchor="middle" fill="#6d28d9" font-size="10" font-family="sans-serif">(세션/토큰 생성)</text>
+    <!-- 출입증 -->
+    <rect x="25" y="105" width="110" height="70" rx="8" fill="#fff" stroke="#7c3aed" stroke-width="1.5"/>
+    <rect x="35" y="115" width="30" height="30" rx="4" fill="#c4b5fd"/>
+    <text x="50" y="135" text-anchor="middle" fill="#4c1d95" font-size="14" font-family="sans-serif">👤</text>
+    <text x="90" y="128" text-anchor="middle" fill="#4c1d95" font-size="8" font-weight="bold" font-family="sans-serif">홍길동</text>
+    <text x="90" y="140" text-anchor="middle" fill="#6d28d9" font-size="7" font-family="sans-serif">영업팀</text>
+    <text x="75" y="165" text-anchor="middle" fill="#9ca3af" font-size="7" font-family="monospace">유효: 2시간</text>
+    <text x="80" y="195" text-anchor="middle" fill="#7c3aed" font-size="10" font-weight="bold" font-family="sans-serif">세션 = 출입증</text>
+  </g>
+  <!-- 화살표 3→4 -->
+  <text x="630" y="165" fill="#7c3aed" font-size="24" font-family="sans-serif">→</text>
+  <!-- 단계 4: 자유 출입 -->
+  <g transform="translate(660,60)">
+    <rect x="0" y="0" width="120" height="200" rx="10" fill="#7c3aed"/>
+    <circle cx="60" cy="35" r="18" fill="#fff"/>
+    <text x="60" y="41" text-anchor="middle" fill="#7c3aed" font-size="18" font-weight="bold" font-family="sans-serif">4</text>
+    <text x="60" y="72" text-anchor="middle" fill="#fff" font-size="11" font-weight="bold" font-family="sans-serif">자유 출입!</text>
+    <text x="60" y="88" text-anchor="middle" fill="#e9d5ff" font-size="10" font-family="sans-serif">(메뉴 자유 이용)</text>
+    <text x="60" y="120" text-anchor="middle" fill="#fff" font-size="28" font-family="sans-serif">🎉</text>
+    <text x="60" y="155" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">출입증 유효기간</text>
+    <text x="60" y="170" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">동안 재로그인</text>
+    <text x="60" y="185" text-anchor="middle" fill="#e9d5ff" font-size="9" font-family="sans-serif">불필요!</text>
+  </g>
+  <!-- 하단 -->
+  <rect x="80" y="290" width="640" height="70" rx="10" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1"/>
+  <text x="400" y="315" text-anchor="middle" fill="#4c1d95" font-size="12" font-weight="bold" font-family="sans-serif">로그인 = 사원증 제시 → 신원 확인 → 출입증(세션) 발급 → 자유 이동</text>
+  <text x="400" y="340" text-anchor="middle" fill="#6d28d9" font-size="10" font-family="sans-serif">세션이 만료되면 출입증이 무효화 → 다시 로그인(사원증 제시) 필요</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/web-basics/9.svg b/public/images/academy/web-basics/9.svg
new file mode 100644
index 00000000..fcfcd13e
--- /dev/null
+++ b/public/images/academy/web-basics/9.svg
@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <rect width="800" height="400" fill="#faf5ff" rx="12"/>
+  <text x="400" y="30" text-anchor="middle" fill="#4c1d95" font-size="16" font-weight="bold" font-family="sans-serif">ERP 전체 구조 — "회사를 하나로 관리하는 시스템"</text>
+  <!-- 중앙 ERP -->
+  <circle cx="400" cy="200" r="70" fill="#7c3aed" stroke="#4c1d95" stroke-width="2"/>
+  <text x="400" y="192" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold" font-family="sans-serif">ERP</text>
+  <text x="400" y="212" text-anchor="middle" fill="#e9d5ff" font-size="10" font-family="sans-serif">(SAM)</text>
+  <!-- 영업 -->
+  <g transform="translate(120,50)">
+    <rect x="0" y="0" width="120" height="65" rx="10" fill="#ede9fe" stroke="#a78bfa" stroke-width="1.5"/>
+    <text x="60" y="22" text-anchor="middle" fill="#4c1d95" font-size="18" font-family="sans-serif">📋</text>
+    <text x="60" y="42" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">영업관리</text>
+    <text x="60" y="56" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">견적/수주/거래처</text>
+  </g>
+  <line x1="240" y1="100" x2="350" y2="155" stroke="#a78bfa" stroke-width="2"/>
+  <!-- 생산 -->
+  <g transform="translate(560,50)">
+    <rect x="0" y="0" width="120" height="65" rx="10" fill="#ede9fe" stroke="#a78bfa" stroke-width="1.5"/>
+    <text x="60" y="22" text-anchor="middle" fill="#4c1d95" font-size="18" font-family="sans-serif">🏭</text>
+    <text x="60" y="42" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">생산관리</text>
+    <text x="60" y="56" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">작업지시/공정/자재</text>
+  </g>
+  <line x1="560" y1="100" x2="455" y2="155" stroke="#a78bfa" stroke-width="2"/>
+  <!-- 재고 -->
+  <g transform="translate(620,175)">
+    <rect x="0" y="0" width="120" height="65" rx="10" fill="#ede9fe" stroke="#a78bfa" stroke-width="1.5"/>
+    <text x="60" y="22" text-anchor="middle" fill="#4c1d95" font-size="18" font-family="sans-serif">📦</text>
+    <text x="60" y="42" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">재고관리</text>
+    <text x="60" y="56" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">입출고/재고현황</text>
+  </g>
+  <line x1="620" y1="207" x2="470" y2="200" stroke="#a78bfa" stroke-width="2"/>
+  <!-- 출하 -->
+  <g transform="translate(560,295)">
+    <rect x="0" y="0" width="120" height="65" rx="10" fill="#ede9fe" stroke="#a78bfa" stroke-width="1.5"/>
+    <text x="60" y="22" text-anchor="middle" fill="#4c1d95" font-size="18" font-family="sans-serif">🚚</text>
+    <text x="60" y="42" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">출하관리</text>
+    <text x="60" y="56" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">납품/배송/출고</text>
+  </g>
+  <line x1="560" y1="310" x2="455" y2="250" stroke="#a78bfa" stroke-width="2"/>
+  <!-- 회계 -->
+  <g transform="translate(120,295)">
+    <rect x="0" y="0" width="120" height="65" rx="10" fill="#ede9fe" stroke="#a78bfa" stroke-width="1.5"/>
+    <text x="60" y="22" text-anchor="middle" fill="#4c1d95" font-size="18" font-family="sans-serif">💰</text>
+    <text x="60" y="42" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">회계관리</text>
+    <text x="60" y="56" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">매출/매입/세금</text>
+  </g>
+  <line x1="240" y1="310" x2="350" y2="250" stroke="#a78bfa" stroke-width="2"/>
+  <!-- 인사 -->
+  <g transform="translate(60,175)">
+    <rect x="0" y="0" width="120" height="65" rx="10" fill="#ede9fe" stroke="#a78bfa" stroke-width="1.5"/>
+    <text x="60" y="22" text-anchor="middle" fill="#4c1d95" font-size="18" font-family="sans-serif">👥</text>
+    <text x="60" y="42" text-anchor="middle" fill="#4c1d95" font-size="11" font-weight="bold" font-family="sans-serif">인사관리</text>
+    <text x="60" y="56" text-anchor="middle" fill="#6d28d9" font-size="9" font-family="sans-serif">직원/급여/근태</text>
+  </g>
+  <line x1="180" y1="207" x2="330" y2="200" stroke="#a78bfa" stroke-width="2"/>
+  <!-- 하단 -->
+  <text x="400" y="390" text-anchor="middle" fill="#6d28d9" font-size="11" font-family="sans-serif">ERP = 영업→생산→재고→출하→회계를 하나로 연결하는 통합 시스템</text>
+</svg>
\ No newline at end of file