SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
sam-manage/docs/academy/web-basics-image-prompts.md
김보곤 10eaf82bb7 feat: [academy] 웹 기초지식 백과사전 페이지 추가 
- 퍼플 테마 6대 섹션 22소 섹션 Blade 뷰 작성
- SVG 이미지 12장 생성 (인터넷, URL, HTTP, 에러코드 등)
- AcademyController webBasics() 메서드 및 라우트 등록
- academy-glossary 컴포넌트에 web-basics 도메인 추가
- 이미지 생성 프롬프트 문서 작성
2026-02-23 11:17:49 +09:00

5.0 KiB
Raw Permalink Blame History

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

작성일: 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)

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