docs: 이중 실행 구조(Lesson/Playground) 아키텍처 문서 업데이트 + C/Python 레슨 품질 스캔 결과 반영

- CLAUDE.md, architecture.md, project_overview.md: Lesson(사전 스크립팅) vs Playground(동적 실행) 이중 구조 설명 추가
- 배포 아키텍처를 실제 환경(Render)에 맞게 수정
- C 레슨 9건 데이터 품질 수정 (변수 누락, explanation 추가, 한국어 번역)
- Python 레슨 2건 한국어 번역 (py-3-5, py-3-6)
- C/Python 레슨 스캔 계획 및 결과 문서 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: jammy0903

.claude/CLAUDE.md

@@ -4,18 +4,40 @@
 
 ## 🎯 프로젝트 개요
 
-**CodeInsight** - 코드 실행 학습 플랫폼
+**CodeInsight** - 코드 실행 시각화 학습 플랫폼
 
 ### 핵심 목표
-- C 언어 메모리 시각화 학습
-- 코드 실행 단계별 추적
+- 코드 실행 과정을 단계별로 시각화 (메모리, 변수, 콜스택)
+- C, Python, JavaScript, Java 다국어 지원
 - 인터랙티브한 교육 경험 제공
 
+### 🏗️ 핵심 아키텍처: 이중 실행 구조
+
+이 앱은 **두 가지 실행 경로**를 가진다:
+
+| 모드 | 데이터 출처 | 시뮬레이터 사용 | 설명 |
+|------|------------|---------------|------|
+| **Lesson** | 사전 제작 JSON | ❌ 불필요 | 단계별 시각화 데이터가 JSON에 미리 스크립팅됨 |
+| **Playground** | 동적 실행 | ✅ 사용 | 사용자 코드를 시뮬레이터가 실행하여 동적으로 시각화 생성 |
+
+```
+[ Lesson 모드 ]
+  DB(JSON) → 프론트엔드 로드 → 사전 스크립팅된 단계별 시각화 표시
+  - 시뮬레이터 미지원 개념(yield, decorator, async 등)도 교육 가능
+  - 교육 품질을 직접 통제 가능
+
+[ Playground 모드 ]
+  사용자 코드 → 백엔드 → 시뮬레이터 실행 → JSON 변환 → 동적 시각화
+  - 자유 코드 입력 가능
+  - 시뮬레이터가 지원하는 범위 내에서 동작
+```
+
 ### 기술 스택
 - **Frontend**: React 18, Vite, TypeScript, Framer Motion
 - **Backend**: Node.js, Express, Prisma ORM
 - **Database**: PostgreSQL (Neon)
-- **Simulators**: JDI (Java), Python `sys.settrace()`, Node.js VM, C (GCC)
+- **Simulators**: Python `sys.settrace()`, Node.js VM, C (Emscripten 검증 + 인터프리터)
+- **Lesson Data**: JSON 파일 (`packages/backend/prisma/content/`) → DB seed로 자동 동기화
 
 ---
 

.claude/context/architecture.md

@@ -59,9 +59,54 @@
 
 ---
 
-## 📊 데이터 흐름
+## 📊 데이터 흐름 (이중 실행 구조)
 
-### 1. 코드 실행 흐름
+### ⭐ 핵심 개념: 두 가지 실행 경로
+
+이 앱은 **Lesson**과 **Playground** 두 가지 모드가 별개의 데이터 흐름을 가진다.
+
+### 1. Lesson 모드 (사전 스크립팅 — 시뮬레이터 미사용)
+
+```
+┌──────────────────────────────────────────┐
+│ 사용자: 레슨 선택                         │
+└────────────────┬─────────────────────────┘
+                 │
+                 ▼
+         ┌───────────────┐
+         │ Frontend      │
+         │ GET /lessons  │
+         └───────┬───────┘
+                 │
+                 ▼
+         ┌───────────────────────────┐
+         │ Backend                   │
+         │ Prisma → DB 조회          │
+         │ (JSON seed 데이터 반환)    │
+         └───────┬───────────────────┘
+                 │ HTTP 200
+                 │ { steps, quiz, ... }
+                 ▼
+         ┌───────────────────────────┐
+         │ Frontend                  │
+         │ - 사전 스크립팅된 steps   │
+         │ - 변수/메모리 상태 표시   │
+         │ - explanation 표시        │
+         │ - 퀴즈 & keyTakeaway      │
+         └───────┬───────────────────┘
+                 │
+                 ▼
+         ┌───────────────┐
+         │ 사용자 화면   │
+         │ - 단계별 학습 │
+         │ - 퀴즈 풀이   │
+         └───────────────┘
+
+※ 시뮬레이터 없이 동작 — JSON에 모든 시각화 데이터가 미리 정의됨
+※ 시뮬레이터 미지원 개념(yield, decorator, async 등)도 교육 가능
+```
+
+### 2. Playground 모드 (동적 실행 — 시뮬레이터 사용)
 
 ```
 ┌─────────────────────────────────────┐
@@ -90,16 +135,16 @@
          │ (언어별)         │
          └───────┬──────────┘
                  │
-    ┌────────────┼────────────┬──────────┐
-    │            │            │          │
-   (C)         (Py)         (JS)        (Java)
-    │            │            │          │
-    ▼            ▼            ▼          ▼
- GCC          Python         Node        JDI
-  +             +              +          +
-디버거        sys.trace       VM        디버거
-    │            │            │          │
-    └────────────┼────────────┴──────────┘
+    ┌────────────┼────────────┐
+    │            │            │
+   (C)         (Py)         (JS)
+    │            │            │
+    ▼            ▼            ▼
+Emscripten   Python         Node
+  검증 +      sys.trace       VM
+인터프리터
+    │            │            │
+    └────────────┼────────────┘
                  │
                  ▼
          ┌───────────────┐
@@ -382,19 +427,19 @@ interface PlaygroundStore {
 ## 🚀 배포 아키텍처
 
 ```
-GitHub Repo
+GitHub Repo (main branch push)
     ↓
-GitHub Actions (CI)
-    ├─ 테스트
-    ├─ 빌드
-    └─ 검증
-    ↓
-Railway (CD)
-    ├─ Frontend → Vercel
-    ├─ Backend → Railway
-    └─ Database → Neon
+Render (자동 배포)
+    ├─ Frontend → Render Static Site
+    ├─ Backend → Render Docker
+    │   ├─ prisma migrate deploy
+    │   ├─ prisma db seed (JSON → DB 동기화)
+    │   └─ node dist/app.js
+    └─ Database → Neon PostgreSQL
     ↓
 프로덕션 서버
+
+※ 레슨 JSON 파일 수정 후 push하면 자동으로 DB에 반영됨
 ```
 
 ---

.claude/context/project_overview.md

@@ -5,34 +5,70 @@
 **코드 실행 과정을 시각화하여 프로그래밍 학습을 돕는 플랫폼**
 
 ### 핵심 가치
-1. **시각화**: 코드 실행 단계별 메모리/스택/힙 상태 표시
-2. **인터랙티브**: 단계별 진행, 브레이크포인트, 변수 추적
+1. **시각화**: 코드 실행 단계별 메모리/변수/콜스택 상태 표시
+2. **인터랙티브**: 단계별 진행, 변수 추적, 퀴즈
 3. **교육 중심**: 초보자도 쉽게 이해할 수 있는 UI/UX
 
 ---
 
+## 🏗️ 핵심 아키텍처: 이중 실행 구조
+
+### 아키텍처 전환 배경
+
+초기에는 시뮬레이터가 모든 코드를 동적으로 실행하여 시각화를 생성하는 단일 구조였으나, 다음 문제점들이 있었다:
+- 시뮬레이터가 지원하지 못하는 고급 개념(yield, decorator, async/await 등) 교육 불가
+- 동적 실행 결과의 교육적 품질 통제 어려움
+- 시뮬레이터 버그가 교육 품질에 직접 영향
+
+이를 해결하기 위해 **이중 실행 구조**로 전환했다:
+
+### 모드 1: Lesson (사전 스크립팅 방식)
+
+```
+DB(JSON 파일) → API → 프론트엔드 → 사전 제작된 단계별 시각화 표시
+```
+
+- 레슨 콘텐츠는 **JSON 파일에 단계별 시각화 데이터를 미리 스크립팅**
+- 시뮬레이터를 사용하지 않음 — 코드 실행 없이 JSON 데이터만 로드
+- 시뮬레이터가 지원 못하는 개념도 교육 가능 (수동 스크립팅)
+- 교육 품질을 직접 통제 (변수 상태, 설명, 퀴즈 등)
+- JSON 위치: `packages/backend/prisma/content/{language}/lessons/`
+- 배포 시 `prisma db seed`로 DB에 자동 동기화
+
+### 모드 2: Playground (동적 실행 방식)
+
+```
+사용자 코드 입력 → 백엔드 검증 → 시뮬레이터 실행 → JSON 변환 → 동적 시각화
+```
+
+- 사용자가 자유롭게 코드를 작성하면 시뮬레이터가 실제 실행
+- 실행 결과를 파싱하여 동적으로 시각화 생성
+- 시뮬레이터가 지원하는 범위 내에서만 동작
+
+---
+
 ## 📊 주요 기능
 
 ### 1. 코드 에디터
 - 여러 언어 지원 (C, Python, JavaScript, Java)
 - 구문 강조
 - 실시간 유효성 검사
 
-### 2. 시뮬레이터
-- **C**: GCC + 메모리 시뮬레이션
+### 2. 시뮬레이터 (Playground용)
+- **C**: Emscripten 검증 + 인터프리터 실행 (하이브리드)
 - **Python**: sys.settrace() 기반
 - **JavaScript**: Node.js VM 기반
-- **Java**: JDI (Java Debug Interface) 기반
 
 ### 3. 시각화 엔진
-- 메모리 레이아웃 (스택, 힙)
-- 변수 값 실시간 추적
+- 메모리 레이아웃 (스택, 힙 - C언어)
+- 변수 값 단계별 추적 (Python, JS)
 - 콜 스택 표시
 - 실행 흐름 하이라이트
 
-### 4. 학습 콘텐츠
-- 사전 제작된 레슨
-- 인터랙티브 문제
+### 4. 학습 콘텐츠 (Lesson용)
+- **사전 제작된 JSON 레슨** — 시뮬레이터 없이 동작
+- 단계별 explanation, 변수 상태, 메모리 시각화 포함
+- 퀴즈, misconceptions, keyTakeaway 포함
 - 진행 상황 추적
 
 ---
@@ -85,16 +121,28 @@
 
 ## 🗄️ 데이터 흐름
 
+### Lesson 모드 (사전 스크립팅)
+```
+DB (JSON seed 데이터)
+    ↓
+[Backend] GET /api/lessons/:id → 레슨 데이터 반환
+    ↓
+[Frontend] JSON steps 로드 → 단계별 시각화 렌더링
+    ↓
+사용자 화면 (단계별 시각화 + 퀴즈)
+```
+
+### Playground 모드 (동적 실행)
 ```
 사용자 입력 (코드)
     ↓
 [Backend] 코드 검증
     ↓
-[Backend] 시뮬레이터 선택
+[Backend] 시뮬레이터 선택 (언어별)
     ↓
 [Simulator] 코드 실행 (디버거 모드)
     ↓
-[Backend] 실행 결과 수집
+[Backend] 실행 결과 수집 → JSON 변환
     ↓
 [Frontend] 시각화 엔진으로 렌더링
     ↓
@@ -151,9 +199,60 @@ packages/backend/src/
 
 ---
 
-## 🔌 시뮬레이터 프로토콜
+## 📄 레슨 JSON 구조 (사전 스크립팅)
+
+레슨 데이터는 JSON 파일에 미리 스크립팅되어 있다:
+
+```
+packages/backend/prisma/content/
+├── c/lessons/           # C 레슨 (c-1-1.json ~ c-10-4.json)
+├── python/lessons/      # Python 레슨 (py-1-1.json ~ py-10-4.json)
+├── javascript/lessons/  # JS 레슨
+└── java/lessons/        # Java 레슨
+```
+
+### Lesson JSON 구조 예시
+```json
+{
+  "lessonId": "py-3-1",
+  "title": "리스트 기초",
+  "concept": "리스트의 생성과 기본 조작",
+  "content": {
+    "code": "fruits = ['apple', 'banana']\nfruits.append('cherry')",
+    "steps": [
+      {
+        "step": 1,
+        "line": 1,
+        "title": "리스트 생성",
+        "explanation": "리스트를 생성하고 변수에 할당합니다.",
+        "highlight": [1],
+        "visualizationType": "pythonMemory",
+        "pythonMemoryState": {
+          "variables": [
+            { "name": "fruits", "value": "['apple', 'banana']", "type": "list" }
+          ],
+          "output": []
+        }
+      }
+    ]
+  },
+  "quiz": { "question": "...", "options": [...], "answer": 1 },
+  "misconceptions": ["..."],
+  "keyTakeaway": "..."
+}
+```
+
+### 핵심 포인트
+- **시뮬레이터 없이 동작**: JSON에 모든 시각화 데이터가 사전 정의됨
+- **교육 품질 통제**: 변수 상태, explanation, 퀴즈를 직접 스크립팅
+- **시뮬레이터 미지원 개념도 교육 가능**: yield, decorator, async/await 등
+- **자동 배포**: JSON 수정 → git push → prisma db seed → DB 반영
+
+---
+
+## 🔌 시뮬레이터 프로토콜 (Playground용)
 
-모든 시뮬레이터는 동일한 프로토콜 사용:
+Playground 모드에서 시뮬레이터는 동일한 프로토콜 사용:
 
 ### Input (JSON)
 ```json
@@ -276,7 +375,7 @@ Frontend → Backend POST /api/execute
 
 ## 🚀 배포
 
-- **프론트엔드**: Vercel / Railway
-- **백엔드**: Railway / Heroku
+- **프론트엔드**: Render (Static Site)
+- **백엔드**: Render (Docker) — 배포 시 `prisma db seed`로 JSON → DB 자동 동기화
 - **데이터베이스**: Neon PostgreSQL
-- **모니터링**: Sentry
+- **배포 방식**: Git push → Render 자동 배포