# 서버지식 백과사전 — 이미지 생성 프롬프트 > **작성일**: 2026-02-23 > **용도**: `/academy/server-knowledge` 페이지에 사용할 AI 생성 이미지 12장 > **저장 경로**: `mng/public/images/academy/server-knowledge/` > **이미지 형식**: SVG, 800x600 viewport > **권장 도구**: DALL-E 3, Midjourney, Stable Diffusion --- ## 공통 스타일 가이드 - **색상 톤**: 그린 계열 (#22c55e, #16a34a, #166534, #f0fdf4) - **스타일**: 깔끔한 플랫 다이어그램 / 인포그래픽 - **배경**: 밝은 민트 (#f0fdf4) 또는 흰색 - **아이콘/도형**: 둥근 모서리, 그린 그라데이션 강조 - **텍스트**: 영문 라벨 + 한글 보조 설명, 고딕 계열 폰트 - **뷰포트**: 800x600 SVG --- ## 이미지 프롬프트 목록 ### 1. 히어로 이미지 — 서버실과 사용자 연결 일러스트 (`1.svg`) **용도**: 페이지 상단 히어로 배너 ``` A flat-style SVG illustration of a modern server room connected to end users. Left side: a row of green-tinted server racks with blinking LED indicators in a clean data center. Right side: a person sitting at a desk with a laptop, browsing a website. Between them: glowing green network lines and nodes flowing from servers to the user, representing data transmission. Green color scheme (#22c55e primary, #166534 dark accents, #f0fdf4 light background). Minimalist flat design, 800x600 viewport. No text. ``` --- ### 2. SAM 5개 서비스 "건물 지도" 다이어그램 (`2.svg`) **용도**: 섹션 — SAM 서비스 구조 소개 ``` A bird's-eye view isometric city map diagram showing 5 buildings representing SAM services. Each building is labeled and color-coded in green tones: (1) "MNG" - a tall office tower (admin portal), (2) "API" - a data center building with antenna, (3) "React" - a modern glass storefront (frontend), (4) "MySQL" - a vault/warehouse building (database), (5) "Nginx" - a gateway/bridge structure (web server). Roads connect all buildings. Green gradient color scheme (#22c55e, #16a34a, #166534). Light mint background (#f0fdf4). Clean isometric flat SVG style, 800x600 viewport. ``` --- ### 3. 요청 흐름도 (브라우저 → Nginx → PHP → DB) (`3.svg`) **용도**: 섹션 — 웹 요청이 처리되는 과정 ``` A horizontal left-to-right flow diagram showing a web request lifecycle. 4 stages connected by green arrows: (1) Browser icon (monitor with globe) labeled "브라우저/Browser", (2) Nginx shield icon labeled "Nginx (웹서버)", (3) PHP elephant icon labeled "PHP/Laravel (앱서버)", (4) Database cylinder icon labeled "MySQL (DB)". Below the arrows, small labels: "HTTP Request →", "Proxy Pass →", "SQL Query →". A return path below shows: "← HTML Response", "← PHP Output", "← Result Set". Green color scheme with #22c55e arrows and #166534 icons on #f0fdf4 background. Clean flat SVG infographic, 800x600 viewport. ``` --- ### 4. Linux 사용자/그룹 = 회사 조직도 (`4.svg`) **용도**: 섹션 — Linux 사용자와 그룹 개념 ``` A split-view comparison diagram. Left side: a corporate organizational chart with a CEO at top, departments (HR, Dev, Sales) as branches, and employees as leaf nodes. Right side: a Linux user/group hierarchy mirroring the same structure — root user at top, groups (www-data, developers, admin) as branches, and individual users (pro, deploy, webservice) as leaf nodes. A dashed line connects corresponding levels with "=" signs between them. Labels: "회사 조직도" (left), "Linux 사용자/그룹" (right). Green nodes and connectors (#22c55e, #16a34a). Light background (#f0fdf4). Clean flat SVG diagram, 800x600 viewport. ``` --- ### 5. `drwxrwxr-x` 해독 인포그래픽 (`5.svg`) **용도**: 섹션 — 파일 권한 읽는 법 ``` An infographic breaking down the Linux permission string "drwxrwxr-x" character by character. The string is displayed large at the top in a monospace green font. Below it, 10 columns, each character highlighted and connected by a line to its explanation: - "d" → "디렉토리(Directory)" in a green badge, - "rwx" (positions 2-4) → "소유자(Owner): 읽기+쓰기+실행" in a dark green box, - "rwx" (positions 5-7) → "그룹(Group): 읽기+쓰기+실행" in a medium green box, - "r-x" (positions 8-10) → "기타(Others): 읽기+실행" in a light green box. Octal equivalent "775" shown in a circle to the right. Color scheme: #22c55e, #16a34a, #166534 on white/#f0fdf4 background. Clean educational infographic SVG, 800x600 viewport. ``` --- ### 6. umask 계산법 (666 - 022 = 644) (`6.svg`) **용도**: 섹션 — umask 이해하기 ``` A math-style educational diagram showing umask calculation. Top row: "파일 기본 권한" with large digits "6 6 6" in green boxes. Middle row: minus sign, then "umask 값" with "0 2 2" in orange/amber boxes. Bottom row: equals sign, then "최종 권한" with "6 4 4" in dark green boxes. Below the result, a visual breakdown: - 6 → "rw-" (Owner: read+write) - 4 → "r--" (Group: read only) - 4 → "r--" (Others: read only) A side note showing directory example: "777 - 022 = 755 (rwxr-xr-x)". Green color scheme (#22c55e primary, #166534 result). Light background (#f0fdf4). Clean flat SVG infographic, 800x600 viewport. ``` --- ### 7. 사고 타임라인 (5단계) (`7.svg`) **용도**: 섹션 — 서버 장애 대응 프로세스 ``` A vertical timeline diagram showing 5 stages of a server incident response. Each stage is a horizontal card connected by a vertical green line with circle markers: (1) "감지(Detection)" — alarm bell icon, light green card, (2) "분석(Analysis)" — magnifying glass icon, green card, (3) "대응(Response)" — wrench/tool icon, medium green card, (4) "복구(Recovery)" — refresh/restore icon, dark green card, (5) "회고(Retrospective)" — clipboard/checklist icon, darkest green card. Each card has a brief Korean description. Time flows top to bottom. Left side shows elapsed time markers (0min, 5min, 15min, 30min, 1hr). Green gradient from light (#22c55e) to dark (#166534) as stages progress. Background: #f0fdf4. Clean flat SVG timeline, 800x600 viewport. ``` --- ### 8. git push → Gitea → 서버 pull 택배 비유 (`8.svg`) **용도**: 섹션 — 코드 배포 흐름 ``` A fun metaphor diagram comparing code deployment to a package delivery system. Three main stations connected by a conveyor belt / road: (1) Left: "개발자 PC" — a developer at a desk with a laptop, placing a box labeled "git push" onto a conveyor belt. (2) Center: "Gitea 저장소" — a warehouse/post office building with the Gitea logo, receiving and storing the box. Shelves with version-labeled boxes inside. (3) Right: "운영 서버" — a server rack receiving the box via "git pull", a robot/worker unpacking it. Green arrows showing flow direction. Package/box icons in green tones. Labels in Korean with English git commands in monospace. Green color scheme (#22c55e, #16a34a, #166534). Background: #f0fdf4. Playful but clean flat SVG illustration, 800x600 viewport. ``` --- ### 9. Hook 동작 흐름 + 권한 체크 포인트 (`9.svg`) **용도**: 섹션 — Git Hook과 배포 자동화 ``` A flowchart diagram showing the Git hook deployment process with permission checkpoints. Flow from left to right: (1) "git push" trigger box → (2) "post-receive hook" process box (with a gear icon) → (3) Diamond decision: "실행 권한 있음?" (permission check). Yes path (green arrow) → (4) "cd /deploy && git pull" action box → (5) "composer install" → (6) "cache:clear" → (7) "완료" success circle. No path (red arrow) → (8) "Permission Denied" error box (red). Permission checkpoints marked with shield icons at steps 2, 4, 5: - "hook 파일 +x 권한" - "deploy 디렉토리 쓰기 권한" - "composer 실행 권한" Green flow (#22c55e) for success path, red (#ef4444) for failure path. Background: #f0fdf4. Clean flat SVG flowchart, 800x600 viewport. ``` --- ### 10. 금지 행위 경고 카드 (`10.svg`) **용도**: 섹션 — 서버에서 절대 하지 말아야 할 것들 ``` A set of 6 warning cards arranged in a 3x2 grid, each showing a prohibited server action. Each card has: - A red circle with white X icon (prohibition sign) at the top - A monospace command in the center - A Korean warning description below Cards content: (1) "rm -rf /" — "루트 삭제 금지" (2) "chmod 777" — "전체 권한 개방 금지" (3) "서버에서 npm run build" — "서버 빌드 금지 (메모리 부족)" (4) "DROP DATABASE" — "DB 직접 삭제 금지" (5) "kill -9" — "프로세스 강제 종료 금지" (6) "nano /etc/nginx/..." — "설정 파일 직접 수정 금지" Red (#ef4444) prohibition icons and borders on each card. Overall frame border in green (#166534). Background: #f0fdf4. Bold, attention-grabbing warning style. Clean flat SVG, 800x600 viewport. ``` --- ### 11. 올바른 절차 4단계 흐름도 (`11.svg`) **용도**: 섹션 — 서버 변경 시 올바른 절차 ``` A horizontal 4-step process flow diagram showing the correct server change procedure. Each step is a large rounded rectangle with a number badge, icon, and description: Step 1 (light green): "로컬에서 코드 수정" — laptop icon with code editor Step 2 (medium green): "git commit & push" — git branch icon with arrow Step 3 (dark green): "서버에서 git pull" — server icon with download arrow Step 4 (darkest green): "테스트 & 확인" — checkmark/clipboard icon Steps connected by thick green arrows (→). Below each step, a small note: (1) "WSL/Docker 환경에서" (2) "Gitea 저장소로" (3) "운영 서버에서" (4) "브라우저에서 동작 확인" A green progress bar runs along the bottom showing completion. Green gradient (#22c55e → #166534). Background: #f0fdf4. Clean professional flat SVG infographic, 800x600 viewport. ``` --- ### 12. 안전(초록) vs 위험(빨강) 명령어 대비표 (`12.svg`) **용도**: 섹션 — 명령어 안전도 분류 ``` A two-column comparison table/chart. Left column "안전한 명령어 (Safe)" with green header (#22c55e) and right column "위험한 명령어 (Dangerous)" with red header (#ef4444). Left (green) column lists safe commands in green-tinted rows: - "ls, cat, head, tail" — 파일 조회 - "git status, git log" — Git 상태 확인 - "ps aux, top" — 프로세스 확인 - "df -h, free -m" — 시스템 리소스 확인 - "tail -f /var/log/*.log" — 로그 모니터링 - "nginx -t" — 설정 검증 (변경 아님) Right (red) column lists dangerous commands in red-tinted rows: - "rm -rf" — 파일/폴더 삭제 - "chmod 777, chown" — 권한 변경 - "systemctl restart" — 서비스 재시작 - "DROP, TRUNCATE" — DB 파괴 - "kill -9" — 프로세스 강제 종료 - "nano /etc/..." — 시스템 설정 수정 A vertical dividing line in the center with a shield icon. Green side has checkmark icons, red side has warning triangle icons. Background: #f0fdf4. Clean flat SVG comparison chart, 800x600 viewport. ``` --- ## 생성 후 작업 1. 생성된 이미지를 `1.svg` ~ `12.svg`로 저장 2. `mng/public/images/academy/server-knowledge/` 경로에 배치 3. SVG 최적화 도구(SVGO 등)로 불필요한 메타데이터 제거 권장 --- **최종 업데이트**: 2026-02-23