feat: [academy] 웹 기초지식 백과사전 페이지 추가

- 퍼플 테마 6대 섹션 22소 섹션 Blade 뷰 작성 - SVG 이미지 12장 생성 (인터넷, URL, HTTP, 에러코드 등) - AcademyController webBasics() 메서드 및 라우트 등록 - academy-glossary 컴포넌트에 web-basics 도메인 추가 - 이미지 생성 프롬프트 문서 작성
2026-02-23 11:17:49 +09:00
parent dad1e9fe0e
commit 10eaf82bb7
5 changed files with 1395 additions and 1 deletions
--- a/app/Http/Controllers/AcademyController.php
+++ b/app/Http/Controllers/AcademyController.php
@@ -52,4 +52,22 @@ public function dockerEnvironment(Request $request): View|Response

        return view('academy.docker-environment');
    }
+
+    public function webBasics(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('academy.web-basics'));
+        }
+
+        return view('academy.web-basics');
+    }
+
+    public function backendDev(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('academy.backend-dev'));
+        }
+
+        return view('academy.backend-dev');
+    }
 }
--- a/docs/academy/web-basics-image-prompts.md
+++ b/docs/academy/web-basics-image-prompts.md
@@ -0,0 +1,90 @@
+# 웹 기초지식 백과사전 — 이미지 생성 프롬프트
+
+> **작성일**: 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
--- a/resources/views/academy/web-basics.blade.php
+++ b/resources/views/academy/web-basics.blade.php
--- a/resources/views/components/academy-glossary.blade.php
+++ b/resources/views/components/academy-glossary.blade.php
@@ -1,7 +1,7 @@
 {{--
    Academy Glossary Tooltip Component
    @include('components.academy-glossary', ['domain' => 'fire-shutter'])
-    도메인: fire-shutter | it-planning | server-knowledge | frontend-dev | docker-environment
+    도메인: fire-shutter | it-planning | server-knowledge | frontend-dev | docker-environment | backend-dev | web-basics
 --}}

@push('styles')
@@ -226,6 +226,68 @@
    "Next.js": "React 기반의 풀스택 프레임워크. 서버 사이드 렌더링(SSR)을 지원한다.",
    "SSR": "Server-Side Rendering. 서버에서 HTML을 생성하여 브라우저에 전달하는 방식."
 };
+@elseif($domain === 'backend-dev')
+window.__GLOSSARY_DATA['backend-dev'] = {
+    "백엔드": "사용자 눈에 보이지 않는 서버 측 영역. 데이터 저장, 비즈니스 로직, 인증 등을 처리한다.",
+    "API": "Application Programming Interface. 프로그램 간 데이터를 주고받는 규격화된 통신 방식.",
+    "REST": "Representational State Transfer. URL로 자원을 표현하고 HTTP 메서드로 행위를 나타내는 API 설계 방식.",
+    "JSON": "JavaScript Object Notation. 서버와 클라이언트 간 데이터를 주고받는 경량 텍스트 형식.",
+    "MySQL": "오픈소스 관계형 데이터베이스 관리 시스템(RDBMS). SQL 언어로 데이터를 관리한다.",
+    "쿼리": "데이터베이스에 데이터를 요청하거나 조작하는 명령문. SQL로 작성한다.",
+    "ORM": "Object-Relational Mapping. 데이터베이스 테이블을 프로그래밍 언어의 객체로 다루는 기술.",
+    "Eloquent": "Laravel의 ORM. 테이블을 PHP 클래스로 표현하여 SQL 없이 데이터를 조작할 수 있다.",
+    "마이그레이션": "데이터베이스 테이블 구조를 코드로 관리하고 버전별로 적용·롤백하는 기능.",
+    "MVC": "Model-View-Controller. 데이터(M), 화면(V), 제어 로직(C)을 분리하는 소프트웨어 설계 패턴.",
+    "컨트롤러": "사용자 요청을 받아 적절한 모델과 뷰를 연결하는 중재자 역할의 클래스.",
+    "미들웨어": "요청이 컨트롤러에 도달하기 전/후에 실행되는 필터. 인증 확인, 로깅 등을 처리한다.",
+    "라우팅": "URL 경로를 특정 컨트롤러·메서드에 연결하는 규칙 정의.",
+    "세션": "서버에 사용자 상태를 저장하는 방식. 브라우저는 세션 ID만 쿠키로 보관한다.",
+    "토큰": "서버가 발급하는 인증 문자열. 클라이언트가 보유하며 API 요청 시 헤더에 포함한다.",
+    "해싱": "데이터를 되돌릴 수 없는 고정 길이 문자열로 변환하는 것. 비밀번호 저장에 사용한다.",
+    "CSRF": "Cross-Site Request Forgery. 사용자 모르게 악의적 요청을 보내는 공격. 토큰으로 방어한다.",
+    "큐(Queue)": "작업을 대기열에 넣고 순차적으로 처리하는 구조. 이메일 발송, PDF 생성 등에 사용한다.",
+    "캐시": "자주 사용하는 데이터를 빠른 저장소에 임시 보관하여 응답 속도를 높이는 기법.",
+    "N+1 문제": "1번의 쿼리로 목록을 가져온 뒤 각 항목마다 추가 쿼리가 발생하는 성능 문제.",
+    "Eager Loading": "관련 데이터를 미리 한 번에 조회하여 N+1 문제를 방지하는 기법. with() 메서드를 사용한다.",
+    "트랜잭션": "여러 DB 작업을 하나의 단위로 묶어 모두 성공하거나 모두 취소하는 처리 방식.",
+    "인덱스": "테이블의 특정 컬럼에 대한 검색 색인. 조회 속도를 크게 향상시킨다.",
+    "멀티테넌트": "하나의 시스템에서 여러 조직의 데이터를 격리하여 관리하는 아키텍처.",
+    "스케줄러": "정해진 시간에 자동으로 작업을 실행하는 기능. Laravel의 크론 작업 대체.",
+    "로그": "시스템·애플리케이션의 동작 기록. 오류 추적과 모니터링에 필수적이다.",
+    "환경 변수": "운영체제나 앱에 전달되는 설정값. .env 파일로 관리하며 환경마다 다른 값을 사용한다.",
+    "SQL Injection": "사용자 입력에 악의적 SQL을 삽입하여 DB를 조작하는 보안 공격.",
+    "Sanctum": "Laravel 공식 API 인증 패키지. SPA와 모바일 앱을 위한 토큰 발급·인증을 처리한다.",
+    "Artisan": "Laravel의 CLI 도구. 마이그레이션, 시더, 캐시 관리 등 다양한 명령을 제공한다."
+};
+@elseif($domain === 'web-basics')
+window.__GLOSSARY_DATA['web-basics'] = {
+    "인터넷": "전 세계의 컴퓨터를 하나로 연결하는 거대한 네트워크. 이메일, 웹, 스트리밍 등 모든 온라인 서비스의 기반.",
+    "웹(WWW)": "World Wide Web. 인터넷 위에서 동작하는 서비스 중 하나. 브라우저로 웹사이트를 보는 것이 웹 사용.",
+    "URL": "Uniform Resource Locator. 인터넷에서 원하는 페이지를 찾아가기 위한 주소. 프로토콜+도메인+경로로 구성.",
+    "IP 주소": "컴퓨터마다 부여된 고유 숫자 주소. 예: 114.203.209.83. 사람이 외우기 어려워 도메인을 사용한다.",
+    "도메인": "IP 주소 대신 사람이 기억하기 쉽게 만든 이름. 예: sam.jooil.co.kr. DNS가 IP로 변환해준다.",
+    "DNS": "Domain Name System. 도메인 이름을 IP 주소로 변환하는 시스템. 인터넷의 전화번호부 역할.",
+    "브라우저": "웹 페이지를 보여주는 프로그램. Chrome, Edge, Safari 등. 인터넷 세상을 보는 창문.",
+    "HTTP": "HyperText Transfer Protocol. 브라우저와 서버가 데이터를 주고받는 규칙(주문서 양식).",
+    "HTTPS": "HTTP에 SSL/TLS 암호화를 적용한 보안 통신. 데이터를 봉투에 넣어 잠그고 전송한다.",
+    "404": "Not Found. 요청한 페이지를 찾을 수 없음. URL 주소가 틀렸거나 삭제된 페이지.",
+    "500": "Internal Server Error. 서버 내부 오류. 프로그램 코드에 문제가 발생한 상태.",
+    "502": "Bad Gateway. 백엔드 서비스가 응답하지 않는 상태. 서비스가 중단되었을 수 있음.",
+    "403": "Forbidden. 접근 권한이 없음. 해당 페이지를 볼 수 있는 권한이 부족한 상태.",
+    "클라우드": "내 컴퓨터가 아닌 인터넷 상의 서버에서 서비스를 제공하는 방식. 설치 없이 브라우저로 사용.",
+    "SaaS": "Software as a Service. 소프트웨어를 구독하여 인터넷으로 사용하는 방식. 넷플릭스처럼.",
+    "구독": "매달 이용료를 내고 서비스를 사용하는 방식. 큰 초기 비용 없이 바로 사용 가능.",
+    "로그인": "아이디와 비밀번호로 자신을 인증하는 과정. 사원증을 제시하여 출입하는 것과 같다.",
+    "세션": "로그인 후 서버가 발급하는 임시 출입증. 유효시간이 지나면 다시 로그인이 필요하다.",
+    "ERP": "Enterprise Resource Planning. 영업·생산·재고·회계 등 회사 전체를 통합 관리하는 시스템.",
+    "MES": "Manufacturing Execution System. 공장 현장의 생산 공정을 실시간으로 관리하는 시스템.",
+    "데이터베이스": "데이터를 체계적으로 저장·관리하는 시스템. 수백 개의 엑셀 시트를 자동 관리하는 초대형 파일.",
+    "API": "Application Programming Interface. 프로그램 간 데이터를 주고받는 창구. 식당의 메뉴판과 주문 시스템.",
+    "백업": "데이터의 복사본을 안전한 곳에 보관하는 것. 원본 손상 시 복구할 수 있다.",
+    "캐시": "자주 사용하는 데이터를 임시로 저장하여 속도를 높이는 기법. 쌓이면 오류 원인이 되기도 한다.",
+    "새로고침": "현재 페이지를 다시 불러오는 것. F5 또는 Ctrl+R. 일시적 오류의 대부분이 해결된다.",
+    "암호화": "데이터를 제3자가 읽을 수 없는 형태로 변환하는 것. HTTPS가 대표적인 암호화 통신."
+};
@elseif($domain === 'server-knowledge')
 window.__GLOSSARY_DATA['server-knowledge'] = {
    "Nginx": "고성능 웹 서버 소프트웨어. 리버스 프록시, 로드 밸런싱 등을 처리한다.",
--- a/routes/web.php
+++ b/routes/web.php
@@ -1466,6 +1466,8 @@
    Route::get('/server-knowledge', [\App\Http\Controllers\AcademyController::class, 'serverKnowledge'])->name('server-knowledge');
    Route::get('/frontend-dev', [\App\Http\Controllers\AcademyController::class, 'frontendDev'])->name('frontend-dev');
    Route::get('/docker-environment', [\App\Http\Controllers\AcademyController::class, 'dockerEnvironment'])->name('docker-environment');
+    Route::get('/web-basics', [\App\Http\Controllers\AcademyController::class, 'webBasics'])->name('web-basics');
+    Route::get('/backend-dev', [\App\Http\Controllers\AcademyController::class, 'backendDev'])->name('backend-dev');
 });

 // SAM E-Sign - 인증 필요