docs: [academy] 서버지식 백과사전 이미지 생성 프롬프트 문서 추가
This commit is contained in:
김보곤
288
docs/academy/server-knowledge-image-prompts.md
Normal file
288
docs/academy/server-knowledge-image-prompts.md
Normal file
@@ -0,0 +1,288 @@
|
||||
# 서버지식 백과사전 — 이미지 생성 프롬프트
|
||||
|
||||
> **작성일**: 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
|
||||
Reference in New Issue
Block a user