11 KiB
11 KiB
서버지식 백과사전 — 이미지 생성 프롬프트
작성일: 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.svg~12.svg로 저장 mng/public/images/academy/server-knowledge/경로에 배치- SVG 최적화 도구(SVGO 등)로 불필요한 메타데이터 제거 권장
최종 업데이트: 2026-02-23