# 웹 기초지식 백과사전 — 이미지 생성 프롬프트

> **작성일**: 2026-02-23
> **대상 페이지**: `/academy/web-basics`
> **이미지 저장 경로**: `mng/public/images/academy/web-basics/`
> **형식**: SVG (벡터 일러스트)
> **테마 색상**: 퍼플 계열 (#7c3aed, #a78bfa, #4c1d95, #ede9fe)

---

## 이미지 목록

### 1. 히어로 이미지 (1.svg)
- **섹션**: 히어로 배너
- **내용**: 노트북과 스마트폰에서 웹을 탐색하는 사람 일러스트
- **스타일**: 다크 퍼플 그라데이션 배경, 미니멀 플랫 일러스트
- **프롬프트**: Flat vector illustration of a person browsing the web on a laptop and smartphone, dark purple gradient background (#2d1b69 to #0f172a), floating web icons (www, @, SSL, code), minimal clean style, purple accent colors

### 2. 인터넷 지구본 (2.svg)
- **섹션**: 1-1. 인터넷의 정의
- **내용**: 전 세계 컴퓨터가 선으로 연결된 지구본 다이어그램
- **프롬프트**: Network diagram showing a globe with computers and smartphones connected by lines, representing the internet as "roads connecting the world", purple theme, light background

### 3. URL 해부도 (3.svg)
- **섹션**: 1-3. URL이란
- **내용**: https://sam.jooil.co.kr/orders URL을 프로토콜/도메인/경로로 분해
- **프롬프트**: URL anatomy diagram breaking down https://sam.jooil.co.kr/orders into protocol, domain, and path segments with Korean labels, purple color coding

### 4. HTTP 요청/응답 흐름 (4.svg)
- **섹션**: 2-2. HTTP란 무엇인가
- **내용**: 주문서 비유를 활용한 HTTP 요청(주문)과 응답(음식) 흐름도
- **프롬프트**: HTTP request/response flow diagram with restaurant analogy - customer (browser) sends order (request) to restaurant (server), receives food (response), purple theme

### 5. 에러 코드 인포그래픽 (5.svg)
- **섹션**: 2-4. 자주 보는 에러 코드
- **내용**: 404/500/502/403 에러를 카드 형태로 시각화
- **프롬프트**: Error code infographic cards: 404 (wrong address/empty lot), 500 (kitchen fire), 502 (chef went home), 403 (no entry), each with icon and Korean description, colorful card layout

### 6. 설치형 vs 클라우드 비교 (6.svg)
- **섹션**: 3-1. 클라우드란
- **내용**: 내 컴퓨터(설치형) vs 공유 오피스(클라우드) 비교 다이어그램
- **프롬프트**: Side-by-side comparison diagram: installed software (single PC with disadvantages) vs cloud (shared cloud with advantages), purple theme, Korean labels

### 7. SaaS 구독 모델 (7.svg)
- **섹션**: 3-2. SaaS란 무엇인가
- **내용**: 넷플릭스 비유를 활용한 SaaS 개념 설명
- **프롬프트**: SaaS subscription model comparison: Netflix (video subscription) equals SAM (business management subscription), showing similar benefits, purple theme

### 8. 로그인/인증 흐름도 (8.svg)
- **섹션**: 4-1. 로그인과 인증
- **내용**: 사원증 비유를 활용한 4단계 로그인 흐름
- **프롬프트**: Login authentication flow in 4 steps: present ID card (enter credentials) → verify identity (server check) → issue pass (create session) → free access (use system), employee badge analogy, purple theme

### 9. ERP 전체 구조도 (9.svg)
- **섹션**: 5-1. ERP란
- **내용**: 영업→생산→재고→출하→회계가 중앙 ERP를 중심으로 연결된 구조도
- **프롬프트**: ERP system structure: central SAM/ERP hub connected to Sales, Production, Inventory, Shipping, Accounting, and HR modules in a radial layout, purple theme, Korean module names with icons

### 10. 데이터베이스 = 엑셀 비유 (10.svg)
- **섹션**: 5-3. 데이터베이스란
- **내용**: 엑셀 시트와 데이터베이스 테이블 비교
- **프롬프트**: Database explained as Excel: left side shows an Excel-like table (companies with columns for name, contact, region), right side shows SAM database structure with multiple tables, purple theme

### 11. API 동작 원리 (11.svg)
- **섹션**: 5-4. API란
- **내용**: 메뉴판/주문/요리/서빙 4단계 흐름
- **프롬프트**: API workflow as restaurant: customer (app) views menu (API list with GET/POST/PUT/DELETE), kitchen (server+DB) processes order and serves response, purple theme with REST API color coding

### 12. SAM 접속 단계 (12.svg)
- **섹션**: 6-1. SAM 접속 방법
- **내용**: 브라우저 열기→URL 입력→로그인→대시보드 4단계
- **프롬프트**: SAM access 4 steps: open browser → enter URL → login → dashboard, step-by-step cards with browser/URL/form/dashboard illustrations, purple theme

---

## 공통 스타일 가이드

| 항목 | 값 |
|------|------|
| 형식 | SVG (벡터) |
| 메인 컬러 | #7c3aed (purple-600) |
| 보조 컬러 | #a78bfa (purple-400), #4c1d95 (purple-900) |
| 배경 컬러 | #faf5ff (purple-50), #ede9fe (purple-100) |
| 폰트 | sans-serif (한글), monospace (코드) |
| 스타일 | 플랫 미니멀, 둥근 모서리, 부드러운 그라데이션 |
| 해상도 | viewBox 800x350~400 |

---

**최종 업데이트**: 2026-02-23