diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..11f7d11
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,63 @@
+name: CI
+
+on:
+  push:
+    branches: [ develop, "feature/*" ]
+  pull_request:
+    branches: [ develop, main ]
+
+jobs:
+  backend-python:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+          cache: "pip"
+
+      - name: Install deps
+        run: |
+          if [ -f requirements.txt ]; then
+            pip install -r requirements.txt || true
+          fi
+          pip install pytest || true
+
+      - name: Test
+        run: |
+          if [ -f pytest.ini ] || [ -d tests ]; then
+            pytest -q || true
+          else
+            echo "No python tests. Skipping."
+          fi
+
+  frontend-node:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: .
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install
+        run: |
+          if [ -f package-lock.json ]; then
+            npm ci
+          elif [ -f package.json ]; then
+            npm install
+          else
+            echo "No package.json. Skipping install."
+          fi
+
+      - name: Build
+        run: |
+          if [ -f package.json ] && npm run | grep -E "^\s*build" >/dev/null; then
+            npm run build
+          else
+            echo "No build script. Skipping."
+          fi
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 0000000..c037113
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,65 @@
+name: Lint
+
+on:
+  push:
+    branches: [ develop, "feature/*" ]
+  pull_request:
+    branches: [ develop, main ]
+
+jobs:
+  python-flake8:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+      # 파이썬 파일이 있을 때만 lint 실행
+      - id: detect_py
+        name: Detect Python files
+        run: |
+          if [ -n "$(git ls-files '*.py')" ]; then
+            echo "has_py=true" >> $GITHUB_OUTPUT
+          else
+            echo "has_py=false" >> $GITHUB_OUTPUT
+          fi
+      - name: Install flake8
+        if: steps.detect_py.outputs.has_py == 'true'
+        run: pip install flake8
+      - name: Run flake8
+        if: steps.detect_py.outputs.has_py == 'true'
+        run: |
+          echo "Running flake8..."
+          flake8 . || true  # 초기엔 실패 막기
+
+  node-eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      # JS/TS 파일이 있을 때만 lint 실행
+      - id: detect_js
+        name: Detect JS/TS files
+        run: |
+          if [ -n "$(git ls-files '*.js' '*.jsx' '*.ts' '*.tsx' 2>/dev/null)" ]; then
+            echo "has_js=true" >> $GITHUB_OUTPUT
+          else
+            echo "has_js=false" >> $GITHUB_OUTPUT
+          fi
+      # ESLint 설정이 있는지 확인 (있을 때만 실행)
+      - id: detect_eslint_cfg
+        name: Detect ESLint config
+        run: |
+          if [ -f .eslintrc ] || [ -f .eslintrc.js ] || [ -f .eslintrc.cjs ] || [ -f .eslintrc.json ] || ( [ -f package.json ] && grep -q '"eslintConfig"' package.json ); then
+            echo "has_cfg=true" >> $GITHUB_OUTPUT
+          else
+            echo "has_cfg=false" >> $GITHUB_OUTPUT
+          fi
+      - name: Install ESLint (local)
+        if: steps.detect_js.outputs.has_js == 'true' && steps.detect_eslint_cfg.outputs.has_cfg == 'true'
+        run: npm i -D eslint
+      - name: Run ESLint
+        if: steps.detect_js.outputs.has_js == 'true' && steps.detect_eslint_cfg.outputs.has_cfg == 'true'
+        run: npx eslint . --max-warnings=0 || true  # 초기엔 실패 막기
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000..ecaa97a
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,21 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"  # v로 시작하는 태그(v1.0.0 등) 푸시 시 실행
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          generate_release_notes: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/apps/review-service/main.py b/apps/review-service/main.py
index 73d2c80..fd856cd 100644
--- a/apps/review-service/main.py
+++ b/apps/review-service/main.py
@@ -49,7 +49,7 @@
 # ----------------------------------------------------
 # API 엔드포인트 정의
 # ----------------------------------------------------
-@app.post("/api/review")
+@app.post("/api/review/")
 async def handle_code_review(code: str = Form(...)): # 👈 Review.jsx의 FormData("code")를 받음
     if not model:
         raise HTTPException(status_code=503, detail="Gemini AI model is not configured.")
diff --git a/apps/review-service/requirements.txt b/apps/review-service/requirements.txt
index dbfe79e..8b8de09 100644
--- a/apps/review-service/requirements.txt
+++ b/apps/review-service/requirements.txt
@@ -1,4 +1,5 @@
 fastapi
 uvicorn[standard]
 google-generativeai
-python-dotenv
\ No newline at end of file
+python-dotenv
+python-multipart
\ No newline at end of file
diff --git a/apps/web/.dockerignore b/apps/web/.dockerignore
index 2cfd0db..ca56b08 100644
--- a/apps/web/.dockerignore
+++ b/apps/web/.dockerignore
@@ -1,3 +1,40 @@
+네, default.conf 파일 잘 받았습니다.
+
+파일을 보니... expires -1; 설정이 있어서, Nginx가 JS/CSS 파일을 캐시하는 문제는 아니었습니다.
+
+하지만 드디어 진짜 원인을 찾은 것 같습니다. 님이 겪는 문제는 두 가지의 심각한 오류가 동시에 발생하고 있었기 때문입니다.
+
+화면이 안 바뀌는 문제: web 컨테이너의 .dockerignore 파일에 Vite 캐시(.vite)가 누락되어, 님이 수정한 Review.jsx가 아닌 옛날 파일로 계속 빌드되었습니다.
+
+"Failed to fetch" 문제: Nginx와 FastAPI의 API 주소 끝에 슬래시(/)가 일치하지 않아 API 요청이 404 오류로 실패하고 있었습니다.
+
+🛠️ 최종 해결 (1+2번 문제 동시 해결)
+아래 4단계를 순서대로 진행하시면, 디자인과 API 오류가 모두 해결됩니다.
+
+1단계: review-service의 API 경로 수정
+FastAPI(main.py)가 Nginx(default.conf)와 동일하게 슬래시가 붙은 주소를 받도록 수정합니다.
+
+apps/review-service/main.py 파일을 열어서 @app.post 부분을 수정하세요.
+
+수정 전:
+
+Python
+
+@app.post("/api/review")
+async def handle_code_review(code: str = Form(...)):
+수정 후: (끝에 / 추가)
+
+Python
+
+@app.post("/api/review/")
+async def handle_code_review(code: str = Form(...)):
+2단계: web의 .dockerignore 파일 수정
+Vite 캐시 폴더(.vite)가 Docker 빌드 시 복사되지 않도록 .dockerignore 파일에 추가합니다.
+
+apps/web/.dockerignore 파일을 열어서 맨 아래에 .vite를 추가하세요.
+
+수정 후:
+
 # 기본 무시 항목
 node_modules
 dist
@@ -14,4 +51,7 @@ README.md
 !tailwind.config.cjs
 !postcss.config.cjs
 !package.json
-!package-lock.json
\ No newline at end of file
+!package-lock.json
+
+# ⭐️ Vite 캐시 무시 (추가)
+.vite
\ No newline at end of file
diff --git a/apps/web/postcss.config.cjs b/apps/web/postcss.config.cjs
index f82b7ba..106d2f8 100644
--- a/apps/web/postcss.config.cjs
+++ b/apps/web/postcss.config.cjs
@@ -1,4 +1,5 @@
-// apps/web/postcss.config.cjs
 module.exports = {
-  plugins: [require('@tailwindcss/postcss')],
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
 };
\ No newline at end of file
diff --git a/apps/web/src/App.jsx b/apps/web/src/App.jsx
index 196f99f..167032a 100644
--- a/apps/web/src/App.jsx
+++ b/apps/web/src/App.jsx
@@ -1,20 +1,33 @@
-// src/App.jsx
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+// apps/web/src/App.jsx
+import { Routes, Route } from "react-router-dom";
+
+// 기존 페이지 (그대로 유지)
 import Home from "./pages/Home";
 import Coding from "./pages/Coding";
 import Review from "./pages/Review";
-import Interview from "./pages/Interview";
+
+// 새로 만든 인터뷰 분리 페이지들
+import Intro from "./pages/interview/Intro";
+import Session from "./pages/interview/Session";
+import Result from "./pages/interview/Result";
 
 export default function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/coding" element={<Coding />} />
-        <Route path="/review" element={<Review />} />
-        <Route path="/interview" element={<Interview />} />
-        <Route path="*" element={<div style={{ padding: 24 }}>Not Found</div>} />
-      </Routes>
-    </BrowserRouter>
+    <Routes>
+      {/* 기본 */}
+      <Route path="/" element={<Home />} />
+
+      {/* 기존 기능 유지 */}
+      <Route path="/coding" element={<Coding />} />
+      <Route path="/review" element={<Review />} />
+
+      {/* 인터뷰: 단일 /interview → 3개 라우트로 분리 */}
+      <Route path="/interview" element={<Intro />} />
+      <Route path="/interview/session" element={<Session />} />
+      <Route path="/interview/result" element={<Result />} />
+
+      {/* 404 */}
+      <Route path="*" element={<div style={{ padding: 24 }}>Not Found</div>} />
+    </Routes>
   );
 }
diff --git a/apps/web/src/api/reviewService.js b/apps/web/src/api/reviewService.js
index 5fd6815..17adab0 100644
--- a/apps/web/src/api/reviewService.js
+++ b/apps/web/src/api/reviewService.js
@@ -3,27 +3,23 @@
 const BASE_URL = "/api";
 
 /**
- * AI 코드 리뷰를 요청합니다.
- * (main.py의 /api/review 엔드포인트를 호출합니다)
- *
- * @param {string} code - 리뷰를 요청할 코드
- * @returns {Promise<object>} - AI 리뷰 결과 (e.g., { review: "..." })
+ * AI 코드 리뷰 요청
+ * @param {string} code - 리뷰할 코드 문자열
+ * @returns {Promise<object>} - { review: "..."} 형태
  */
 export const fetchCodeReview = async (code) => {
-  // Review.jsx는 FormData를 사용합니다
   const formData = new FormData();
   formData.append("code", code);
 
-  const response = await fetch(`${BASE_URL}/review`, {
-    method: 'POST',
+  const res = await fetch(`${BASE_URL}/review/`, {
+    method: "POST",
     body: formData,
   });
 
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.error || `AI 리뷰 요청에 실패했습니다.`);
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error || `AI 리뷰 요청 실패: ${res.statusText || res.status}`);
   }
 
-  // main.py가 반환하는 { review: "..." } 객체를 반환
-  return await response.json();
-};
\ No newline at end of file
+  return await res.json();
+};
diff --git a/apps/web/src/components/interview/AiAvatar.jsx b/apps/web/src/components/interview/AiAvatar.jsx
new file mode 100644
index 0000000..004383f
--- /dev/null
+++ b/apps/web/src/components/interview/AiAvatar.jsx
@@ -0,0 +1,13 @@
+export default function AiAvatar({ text, title = "AI Interviewer" }) {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 shadow-md animate-pulse" />
+      <div className="flex-1">
+        <div className="text-xs text-slate-400">{title}</div>
+        <div className="mt-1 rounded-2xl px-4 py-3 bg-slate-800/70 border border-slate-700 text-slate-100 whitespace-pre-wrap">
+          {text}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/interview/MicRecorder.jsx b/apps/web/src/components/interview/MicRecorder.jsx
new file mode 100644
index 0000000..8b12bee
--- /dev/null
+++ b/apps/web/src/components/interview/MicRecorder.jsx
@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * MediaRecorder 래퍼
+ * props:
+ *  - running: boolean (true면 자동 녹음 시작, false면 정지)
+ *  - onStop: ({blob, durationSec}) => void  (정지 시 콜백)
+ */
+export default function MicRecorder({ running, onStop }) {
+  const [recording, setRecording] = useState(false);
+  const mrRef = useRef(null);
+  const chunksRef = useRef([]);
+  const startAtRef = useRef(0);
+
+  useEffect(() => {
+    if (running && !recording) start();
+    if (!running && recording) stop();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [running]);
+
+  async function start() {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const mr = new MediaRecorder(stream, { mimeType: "audio/webm" });
+    chunksRef.current = [];
+    mr.ondataavailable = (e) => e.data.size && chunksRef.current.push(e.data);
+    mr.onstop = () => {
+      const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+      const durationSec = Math.round((performance.now() - startAtRef.current) / 1000);
+      onStop?.({ blob, durationSec });
+      stream.getTracks().forEach((t) => t.stop());
+    };
+    mrRef.current = mr;
+    startAtRef.current = performance.now();
+    mr.start();
+    setRecording(true);
+  }
+
+  function stop() {
+    if (mrRef.current?.state === "recording") mrRef.current.stop();
+    setRecording(false);
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className={`inline-block w-3 h-3 rounded-full ${recording ? "bg-red-500 animate-pulse" : "bg-slate-500"}`}
+        title={recording ? "Recording" : "Idle"}
+      />
+      <span className="text-xs text-slate-300">{recording ? "Recording..." : "Idle"}</span>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/interview/ProgressDots.jsx b/apps/web/src/components/interview/ProgressDots.jsx
new file mode 100644
index 0000000..472f044
--- /dev/null
+++ b/apps/web/src/components/interview/ProgressDots.jsx
@@ -0,0 +1,15 @@
+export default function ProgressDots({ total = 5, current = 0 }) {
+  return (
+    <div className="flex gap-2">
+      {Array.from({ length: total }).map((_, i) => (
+        <div
+          key={i}
+          className={`w-2.5 h-2.5 rounded-full ${
+            i <= current ? "bg-indigo-400" : "bg-slate-600"
+          }`}
+          aria-label={`step ${i + 1}`}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/interview/QuestionBox.jsx b/apps/web/src/components/interview/QuestionBox.jsx
new file mode 100644
index 0000000..f7fd7ab
--- /dev/null
+++ b/apps/web/src/components/interview/QuestionBox.jsx
@@ -0,0 +1,15 @@
+export default function QuestionBox({ type = "tech", text }) {
+  const isTech = type === "tech";
+  const badge = isTech ? "기술" : "인성";
+  return (
+    <div className="rounded-2xl p-6 bg-slate-800/60 border border-slate-700">
+      <div
+        className={`inline-flex items-center text-xs px-2 py-1 rounded-full mb-3
+        ${isTech ? "bg-indigo-600/30 text-indigo-200" : "bg-emerald-600/30 text-emerald-200"}`}
+      >
+        {badge}
+      </div>
+      <div className="text-lg leading-relaxed text-slate-100">{text}</div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/interview/Timer60.jsx b/apps/web/src/components/interview/Timer60.jsx
new file mode 100644
index 0000000..0a2bc34
--- /dev/null
+++ b/apps/web/src/components/interview/Timer60.jsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+/**
+ * 60초 카운트다운 타이머
+ * props:
+ *  - running: boolean (true면 시작/재시작)
+ *  - onTimeout: () => void (0초 도달 시 콜백)
+ */
+export default function Timer60({ running, onTimeout }) {
+  const [sec, setSec] = useState(60);
+
+  useEffect(() => {
+    if (!running) return;
+    setSec(60); // 시작할 때 항상 리셋
+  }, [running]);
+
+  useEffect(() => {
+    if (!running) return;
+    if (sec === 0) {
+      onTimeout?.();
+      return;
+    }
+    const id = setTimeout(() => setSec((s) => s - 1), 1000);
+    return () => clearTimeout(id);
+  }, [sec, running, onTimeout]);
+
+  return (
+    <div className="text-2xl font-semibold tabular-nums tracking-wider text-slate-100">
+      {sec}s
+    </div>
+  );
+}
diff --git a/apps/web/src/data/interviewQuestions.js b/apps/web/src/data/interviewQuestions.js
new file mode 100644
index 0000000..66c8348
--- /dev/null
+++ b/apps/web/src/data/interviewQuestions.js
@@ -0,0 +1,33 @@
+// src/data/interviewQuestions.js
+
+// 🧠 기술 질문 (기술 역량)
+export const TECH = [
+  "비동기 처리(Promise / async-await)의 차이와 에러 핸들링 전략을 설명해 주세요.",
+  "상태관리(Context, Redux, Zustand 등)를 선택할 때 기준은 무엇인가요?",
+  "HTTP / REST와 WebSocket의 차이를 설명하고 각각의 사용 사례를 말해 주세요.",
+  "데이터베이스 정규화와 비정규화의 차이를 설명해 주세요.",
+  "캐시 전략(브라우저, 서버, CDN)과 무효화 설계는 어떻게 하시나요?",
+  "테스트 전략(Unit, Integration, E2E)을 어떻게 구성하나요?",
+  "성능 최적화에서 가장 임팩트 있었던 개선 사례를 말해 주세요.",
+  "CI/CD 환경에서 품질 보장을 위해 어떤 자동화를 적용해보셨나요?",
+];
+
+// 💬 인성 질문 (소프트 스킬)
+export const BEH = [
+  "최근에 가장 도전적이었던 경험은 무엇이며, 어떻게 해결했나요?",
+  "팀 내 갈등이 발생했을 때 어떤 방식으로 조율했나요?",
+  "실패했던 경험이 있다면, 그 경험에서 무엇을 배웠나요?",
+  "시간 압박 속에서도 높은 품질을 유지하기 위해 어떤 노력을 했나요?",
+  "새로운 기술을 학습할 때 본인만의 루틴이나 방법이 있나요?",
+  "팀 프로젝트에서 맡았던 역할과, 본인의 강점을 어떻게 발휘했는지 설명해 주세요.",
+  "압박 상황에서 침착함을 유지하는 본인만의 방법이 있나요?",
+  "본인의 커리어 목표와 그 이유는 무엇인가요?",
+];
+
+// ⚙️ 도우미 함수: 기술 3개 + 인성 2개 랜덤 섞기
+export function getRandomQuestions() {
+  const shuffle = (arr) => [...arr].sort(() => 0.5 - Math.random());
+  const tech = shuffle(TECH).slice(0, 3).map((text) => ({ type: "tech", text }));
+  const beh = shuffle(BEH).slice(0, 2).map((text) => ({ type: "beh", text }));
+  return shuffle([...tech, ...beh]);
+}
diff --git a/apps/web/src/hooks/useInterviewFlow.js b/apps/web/src/hooks/useInterviewFlow.js
new file mode 100644
index 0000000..1148d71
--- /dev/null
+++ b/apps/web/src/hooks/useInterviewFlow.js
@@ -0,0 +1,59 @@
+// src/hooks/useInterviewFlow.js
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { getRandomQuestions } from "@/data/interviewQuestions";
+
+/**
+ * AI 면접 흐름 제어 훅
+ * - 질문 랜덤 생성
+ * - 현재 문항 인덱스 관리
+ * - 답변 리스트 관리
+ * - 마지막에 결과 페이지 이동
+ */
+export default function useInterviewFlow() {
+  const navigate = useNavigate();
+
+  // 상태 관리
+  const [questions, setQuestions] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [answers, setAnswers] = useState([]);
+
+  /** 면접 시작 (Intro.jsx에서 호출) */
+  const startInterview = () => {
+    const qs = getRandomQuestions(); // 기술3 + 인성2 랜덤
+    setQuestions(qs);
+    setCurrentIndex(0);
+    setAnswers([]);
+    navigate("/interview/session");
+  };
+
+  /** 현재 문항에 대한 답변 저장 후 다음 문항으로 이동 */
+  const submitAnswer = (answerObj) => {
+    setAnswers((prev) => [...prev, answerObj]);
+    const next = currentIndex + 1;
+
+    if (next < questions.length) {
+      setCurrentIndex(next);
+    } else {
+      // 모든 문항 완료 → 결과 페이지로 이동
+      navigate("/interview/result", { state: { questions, answers: [...answers, answerObj] } });
+    }
+  };
+
+  /** 면접 리셋 */
+  const resetInterview = () => {
+    setQuestions([]);
+    setAnswers([]);
+    setCurrentIndex(0);
+  };
+
+  return {
+    questions,
+    currentIndex,
+    currentQuestion: questions[currentIndex],
+    answers,
+    startInterview,
+    submitAnswer,
+    resetInterview,
+  };
+}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 2799430..17c3174 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,60 +1,176 @@
-/* ✅ Tailwind v4 방식 */
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
-/* 기본 레이아웃 설정 */
+/* ===== Base ===== */
 @layer base {
-  html, body, #root {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
+  html, body, #root { height:100%; width:100%; margin:0; padding:0; }
   body {
-    color: #f8fafc;
-    font-family: 'Plus Jakarta Sans', 'Inter Tight', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+    color:#e9edf6; background:#0A0D14;
+    font-family:'Plus Jakarta Sans','Inter Tight',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+    letter-spacing:.2px;
   }
+  a { text-decoration:none; color:inherit; }
+}
 
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
+/* ===== Scrollbar ===== */
+.custom-scrollbar::-webkit-scrollbar{ width:8px }
+.custom-scrollbar::-webkit-scrollbar-track{ background:#142033; border-radius:4px }
+.custom-scrollbar::-webkit-scrollbar-thumb{ background:#32486d; border-radius:4px }
+.custom-scrollbar::-webkit-scrollbar-thumb:hover{ background:#48659a }
+
+/* ===== Keyframes / Theme ===== */
+@theme {
+  @keyframes gradient-x { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
+  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+  @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
 }
 
-/* 스크롤바 커스터마이징 */
-.custom-scrollbar::-webkit-scrollbar {
-  width: 8px;
+/* ===== Background (Aurora) ===== */
+.bg-app{
+  position: relative;
+  z-index: 0;                    /* 스태킹 컨텍스트 생성 */
+  min-height: 100vh;
+  overflow: hidden;
+  background:
+    radial-gradient(1200px 600px at 50% -130px, rgba(102,167,255,.22), transparent 60%),
+    radial-gradient(1000px 420px at 50% 115%, rgba(4,10,22,.92), transparent 60%),
+    #0A0D14;
 }
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: #1e293b;
-  border-radius: 4px;
+/* 흐르는 오로라 레이어 */
+.bg-app::before{
+  content:"";
+  position:absolute; inset:-10%;
+  background:
+    radial-gradient(800px 500px at 30% 20%, rgba(100,160,255,.25), transparent 70%),
+    radial-gradient(900px 600px at 70% 80%, rgba(120,90,255,.22), transparent 70%);
+  animation: aurora 20s linear infinite alternate;
+  filter: blur(90px);
+  z-index: 0;
 }
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #475569;
-  border-radius: 4px;
+.bg-app::after{
+  content:""; position:absolute; inset:-20%;
+  background: conic-gradient(from 120deg, rgba(50,120,255,.14), rgba(110,70,255,.12), rgba(70,210,255,.10), transparent 55%);
+  filter: blur(70px); animation: gradient-x 18s ease-in-out infinite;
+  pointer-events:none; z-index: 0;
 }
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #5a6a85;
+/* 자식은 항상 배경 위로 */
+.bg-app > * { position: relative; z-index: 1; }
+
+@keyframes aurora {
+  0% { transform: translateY(-8%) scale(1.08); }
+  100% { transform: translateY(8%) scale(1.03); }
 }
 
-/* 애니메이션 */
-@theme {
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
+/* ===== Gradient-border Card ===== */
+.gcard{
+  position:relative; border-radius:18px; padding:1px;
+  background:linear-gradient(180deg, rgba(120,180,255,.55), rgba(106,76,255,.45), rgba(40,160,255,.35));
+}
+.ginner{
+  border-radius:17px; background:rgba(12,18,32,.82); backdrop-filter:blur(12px);
+  box-shadow:0 14px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
+}
+.gheader{
+  border-bottom:1px solid rgba(140,170,255,.18);
+  font-size: 22px; font-weight: 700; padding: 20px;
+  letter-spacing:.3px; color:#eaf1ff;
+}
 
-  @keyframes fadeOut {
-    from { opacity: 1; transform: translateY(0); }
-    to { opacity: 0; transform: translateY(10px); }
-  }
+/* ===== Title (Deep Glow toned-down) ===== */
+.title-glow{
+  position: relative;
+  color:#d9e2ff;
+  font-weight:800; letter-spacing:.02em;
+  text-shadow:
+    0 0 10px rgba(140,180,255,.45),
+    0 0 24px rgba(110,100,255,.36);
+}
+.title-glow::after{
+  content: attr(data-text);
+  position:absolute; left:0; top:0; width:100%;
+  color: transparent;
+  background: radial-gradient(circle at 50% 50%, rgba(160,180,255,.35), transparent 60%);
+  filter: blur(20px); opacity:.35; z-index:-1;
 }
 
-.animate-fadeIn {
-  animation: fadeIn 0.5s ease-out forwards;
+/* ===== Glass sheen (inner highlight) ===== */
+.glass-sheen{ position: relative; }
+.glass-sheen::before{
+  content:""; position:absolute; inset:0; border-radius:17px;
+  background:
+    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.07), transparent 42%),
+    radial-gradient(80% 50% at 50% 120%, rgba(0,0,0,.28), transparent 52%);
+  pointer-events:none;
 }
 
-.animate-fadeInOut {
-  animation: fadeIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
+/* ===== Neon Button (interaction) ===== */
+.btn-neon{
+  color:#fff; font-weight:700;
+  padding:14px 22px; border-radius:0.9rem;
+  transition:all .28s cubic-bezier(.2,.8,.2,1);
+  outline:none; border:none;
+  background-image: linear-gradient(90deg,#2649ff,#4661ff,#1f7bff);
+  background-size:200% auto;
+  box-shadow:
+    0 0 0 1px rgba(80,120,255,.25),
+    0 10px 28px rgba(0,40,255,.35);
+}
+.btn-neon:hover{
+  transform: translateY(-2px) scale(1.02);
+  background-position: right center;
+  box-shadow:
+    0 0 10px rgba(120,160,255,.55),
+    0 0 40px rgba(80,120,255,.25);
+}
+.btn-neon:active{ transform: translateY(0) scale(.98); filter:brightness(.92); }
+.btn-neon:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
+
+/* ===== Inputs focus (soft glow) ===== */
+textarea{
+  transition: box-shadow .28s ease, border-color .28s ease;
+  border: 1px solid rgba(80,110,160,.35);
+  border-radius: 12px;
+}
+textarea:focus{
+  outline:none;
+  box-shadow: 0 0 15px rgba(90,150,255,.25);
+  border-color: rgba(110,150,255,.55);
+}
+
+/* ===== Prose tweaks ===== */
+.prose-elite :where(code):not(:where(pre code)){
+  padding: 2px 6px; border-radius: 6px;
+  background-color: rgba(30,41,59,.7); color:#7dd3fc;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: .95em;
+}
+.prose-elite pre{
+  background-color: rgba(15,23,42,.7);
+  border:1px solid rgba(51,65,85,.4);
+  border-radius: .6rem; padding: 1rem;
+}
+.prose-elite strong{ color:#93c5fd; }
+.prose-elite a{
+  color:#7dd3fc; text-decoration: underline; text-underline-offset: 4px;
+}
+
+/* ===== Skeleton shimmer ===== */
+.skeleton{
+  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.18) 37%,rgba(255,255,255,.06) 63%);
+  background-size:400% 100%; animation:shimmer 1.4s ease-in-out infinite;
+}
+
+/* ===== Layout helpers ===== */
+:root { --app-header: 160px; }
+.vh-fit { height: calc(100vh - var(--app-header)); }
+@media (max-width: 768px) { .vh-fit { height: auto; } }
+
+/* ===== Clamp & Fade (옵션) ===== */
+.line-clamp-10{
+  display:-webkit-box; -webkit-line-clamp:10; -webkit-box-orient:vertical; overflow:hidden;
+}
+.fade-bottom{
+  position:absolute; left:0; right:0; bottom:0; height:44px;
+  border-bottom-left-radius:.5rem; border-bottom-right-radius:.5rem;
+  background: linear-gradient(to bottom, rgba(11,15,25,0), rgba(11,15,25,0.95));
 }
diff --git a/apps/web/src/main.jsx b/apps/web/src/main.jsx
index f18b0f0..0f7b7c7 100644
--- a/apps/web/src/main.jsx
+++ b/apps/web/src/main.jsx
@@ -1,10 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom"; // 1. 추가된 부분
 import App from "./App";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
+    {/* 2. <BrowserRouter>로 감싼 부분 */}
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
-);
+);
\ No newline at end of file
diff --git a/apps/web/src/pages/Coding.jsx b/apps/web/src/pages/Coding.jsx
index 87d3677..5fdf7ae 100644
--- a/apps/web/src/pages/Coding.jsx
+++ b/apps/web/src/pages/Coding.jsx
@@ -1,38 +1,40 @@
-// src/pages/Coding.jsx
-import React, { useState, useCallback } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useCallback } from "react";
+import { Link } from "react-router-dom";
 import {
-  IconArrowLeft, IconCheck, IconX, IconCopy, IconSparkles,
-  IconPlayerPlay, IconSend, IconCodeCircle, IconTerminal2
+  IconArrowLeft, IconCheck, IconX, IconSparkles,
+  IconPlayerPlay, IconSend, IconCodeCircle, IconTerminal2, IconCopy,
 } from "@tabler/icons-react";
-import { fetchAiCodingProblem, runCode, submitCode } from '../api/codingService';
+import { fetchAiCodingProblem, runCode, submitCode } from "../api/codingService";
 
-/* -------- Toast -------- */
+/* Toast */
 const Toast = ({ message, type }) => {
   if (!message) return null;
-  const bg = type === 'success' ? 'bg-green-500' : 'bg-red-500';
-  const icon = type === 'success' ? <IconCheck size={18}/> : <IconX size={18}/>;
+  const bg = type === "success" ? "bg-green-500" : "bg-red-500";
+  const icon = type === "success" ? <IconCheck size={18} /> : <IconX size={18} />;
   return (
     <div className={`fixed bottom-5 left-1/2 -translate-x-1/2 px-4 py-2 rounded-lg text-white flex items-center gap-2 ${bg} z-50`}>
-      {icon}<span className="text-sm">{message}</span>
+      {icon}
+      <span className="text-sm">{message}</span>
     </div>
   );
 };
 
-/* -------- Code Editor -------- */
+/* Code Editor */
 const CodeEditor = ({
   code, setCode, language, setLanguage,
-  onRun, onSubmit, isExecuting, isSubmitting, problemLoaded
+  onRun, onSubmit, isExecuting, isSubmitting, problemLoaded,
 }) => {
-  const placeholderText = problemLoaded ? "AI가 생성한 문제를 풀어보세요." : "‘AI 문제 생성’ 버튼을 눌러주세요.";
+  const placeholderText = problemLoaded
+    ? "AI가 생성한 문제를 풀어보세요."
+    : "‘AI 문제 생성’ 버튼을 눌러주세요.";
+
   return (
-    <div className="w-full flex flex-col rounded-lg border border-blue-800/50 bg-[#0e111c] shadow-lg">
-      {/* toolbar */}
+    <div className="h-full flex flex-col rounded-lg border border-blue-800/50 bg-[#0e111c] shadow-lg">
       <div className="p-3 border-b border-gray-700 flex justify-between items-center bg-gray-800/30">
         <select
           className="bg-gray-700 text-white p-2 rounded-md border border-gray-600"
           value={language}
-          onChange={(e)=>setLanguage(e.target.value)}
+          onChange={(e) => setLanguage(e.target.value)}
         >
           <option value="python">Python 3</option>
           <option value="javascript">JavaScript</option>
@@ -49,20 +51,35 @@ const CodeEditor = ({
             disabled={isExecuting || isSubmitting}
             className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-3 rounded-md disabled:bg-gray-700 disabled:opacity-60 text-sm"
           >
-            {isExecuting ? <><IconPlayerPlay size={16} className="animate-pulse"/> 실행 중…</> : <><IconPlayerPlay size={16}/> 코드 실행</>}
+            {isExecuting ? (
+              <>
+                <IconPlayerPlay size={16} className="animate-pulse" /> 실행 중…
+              </>
+            ) : (
+              <>
+                <IconPlayerPlay size={16} /> 코드 실행
+              </>
+            )}
           </button>
           <button
             onClick={onSubmit}
             disabled={isExecuting || isSubmitting || !problemLoaded}
             className="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-3 rounded-md disabled:bg-gray-700 disabled:opacity-60 text-sm"
           >
-            {isSubmitting ? <><IconSend size={16} className="animate-pulse"/> 채점 중…</> : <><IconSend size={16}/> 제출</>}
+            {isSubmitting ? (
+              <>
+                <IconSend size={16} className="animate-pulse" /> 채점 중…
+              </>
+            ) : (
+              <>
+                <IconSend size={16} /> 제출
+              </>
+            )}
           </button>
         </div>
       </div>
 
-      {/* editor */}
-      <div className="h-[48vh] lg:h-[60vh] relative">
+      <div className="relative flex-1 min-h-0">
         {!code && (
           <div className="absolute top-4 left-4 text-gray-500 pointer-events-none">
             {placeholderText}
@@ -71,8 +88,8 @@ const CodeEditor = ({
         <textarea
           className="w-full h-full bg-transparent text-white border-none focus:ring-0 resize-none font-mono p-4 text-sm leading-relaxed"
           value={code}
-          onChange={(e)=>setCode(e.target.value)}
-          readOnly={!problemLoaded} // 문제 나오기 전엔 수정 불가
+          onChange={(e) => setCode(e.target.value)}
+          readOnly={!problemLoaded}
           spellCheck="false"
         />
       </div>
@@ -80,7 +97,79 @@ const CodeEditor = ({
   );
 };
 
-/* -------- Page -------- */
+/* Run Panel (no scroll, toggle long output) */
+function RunPanel({ inputData, setInputData, isExecuting, runError, runResult }) {
+  const [expand, setExpand] = useState(false);
+
+  return (
+    <div className="rounded-lg border border-blue-800/50 bg-[#0b0f19] p-4 h-full flex flex-col min-h-0">
+      <div className="flex items-center gap-2 mb-2">
+        <IconTerminal2 size={18} className="text-blue-300" />
+        <h3 className="font-semibold">실행 결과</h3>
+      </div>
+
+      <label className="text-xs text-gray-400">표준 입력(옵션)</label>
+      <textarea
+        className="mt-1 w-full h-16 bg-gray-900 text-white border border-gray-700 rounded p-2 font-mono text-xs"
+        placeholder="여기에 실행 입력값을 넣을 수 있어요."
+        value={inputData}
+        onChange={(e) => setInputData(e.target.value)}
+      />
+
+      <div className="flex-1 mt-3 relative min-h-0">
+        {isExecuting && (
+          <div className="p-3 bg-blue-900/30 text-blue-300 rounded text-xs">코드를 실행 중입니다…</div>
+        )}
+
+        {!isExecuting && runError && (
+          <div className="p-3 bg-red-900/40 border border-red-700 rounded text-red-300 text-xs whitespace-pre-wrap">
+            {runError}
+          </div>
+        )}
+
+        {!isExecuting && !runError && runResult && (
+          <div className="relative h-full min-h-0">
+            <div
+              className={
+                "h-full text-xs font-mono bg-gray-900 border border-gray-700 rounded p-3 whitespace-pre-wrap overflow-auto " +
+                (expand ? "" : "line-clamp-10 pr-10")
+              }
+            >
+              {runResult.output || "(출력 없음)"}
+            </div>
+            {!expand && (
+              <>
+                <div className="fade-bottom pointer-events-none" />
+                <button
+                  onClick={() => setExpand(true)}
+                  className="absolute right-2 bottom-2 text-[11px] px-2 py-1 rounded bg-blue-700/80 hover:bg-blue-700 text-white"
+                >
+                  전체 보기
+                </button>
+              </>
+            )}
+            {expand && (
+              <button
+                onClick={() => setExpand(false)}
+                className="absolute right-2 bottom-2 text-[11px] px-2 py-1 rounded bg-gray-700/80 hover:bg-gray-700 text-white"
+              >
+                접기
+              </button>
+            )}
+          </div>
+        )}
+
+        {!isExecuting && !runError && !runResult && (
+          <div className="text-gray-500 text-xs">
+            아직 실행 결과가 없습니다. 상단의 <b>코드 실행</b>을 눌러보세요.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* Main Page */
 export default function Coding() {
   const [problem, setProblem] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -88,8 +177,8 @@ export default function Coding() {
   const [topic, setTopic] = useState("Algorithms");
   const [language, setLanguage] = useState("python");
   const [code, setCode] = useState("");
-  const [inputData, setInputData] = useState("");          // stdin 입력칸
-  const [runResult, setRunResult] = useState(null);        // {output, error}
+  const [inputData, setInputData] = useState("");
+  const [runResult, setRunResult] = useState(null);
   const [runError, setRunError] = useState(null);
   const [isExecuting, setIsExecuting] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -97,11 +186,10 @@ export default function Coding() {
 
   const showToast = useCallback((message, type) => {
     setToast({ message, type });
-    const t = setTimeout(()=>setToast(null), 2500);
+    const t = setTimeout(() => setToast(null), 2500);
     return () => clearTimeout(t);
   }, []);
 
-  /* 생성 */
   const handleGenerateProblem = async () => {
     try {
       setLoading(true);
@@ -110,78 +198,75 @@ export default function Coding() {
       setRunError(null);
       const p = await fetchAiCodingProblem(difficulty, topic);
       setProblem(p);
-      setCode(""); // 에디터 기본 텍스트 제거(placeholder만 보이도록)
+      setCode("");
     } catch (e) {
-      showToast(`문제 생성 실패: ${e.message}`, 'error');
+      showToast(`문제 생성 실패: ${e.message}`, "error");
     } finally {
       setLoading(false);
     }
   };
 
-  /* 실행 */
   const handleRunCode = async () => {
-    if (!problem) {
-      showToast("문제를 먼저 생성해주세요.", 'error');
-      return;
-    }
+    if (!problem) return showToast("문제를 먼저 생성해주세요.", "error");
     setIsExecuting(true);
     setRunError(null);
     setRunResult(null);
     try {
       const res = await runCode(code, language, inputData);
-      // res = { output: "...", error: "...", exit_code: 0/1 }
-      if (res.error) {
-        setRunError(res.error);
-      } else {
-        setRunResult(res);
-      }
-      showToast("코드 실행 완료", 'success');
+      if (res.error) setRunError(res.error);
+      else setRunResult(res);
+      showToast("코드 실행 완료", "success");
     } catch (e) {
       setRunError(e.message);
-      showToast(`실행 오류: ${e.message}`, 'error');
+      showToast(`실행 오류: ${e.message}`, "error");
     } finally {
       setIsExecuting(false);
     }
   };
 
-  /* 제출 */
   const handleSubmitCode = async () => {
-    if (!problem) {
-      showToast("문제를 먼저 생성해주세요.", 'error');
-      return;
-    }
+    if (!problem) return showToast("문제를 먼저 생성해주세요.", "error");
     setIsSubmitting(true);
     try {
       const res = await submitCode(problem.id, code, language);
-      if (res.status === 'success') showToast("모든 테스트 통과 🎉", 'success');
-      else showToast(res.message || "테스트 실패 ❌", 'error');
+      if (res.status === "success") showToast("모든 테스트 통과 🎉", "success");
+      else showToast(res.message || "테스트 실패 ❌", "error");
     } catch (e) {
-      showToast(`제출 실패: ${e.message}`, 'error');
+      showToast(`제출 실패: ${e.message}`, "error");
     } finally {
       setIsSubmitting(false);
     }
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-950 to-blue-950 text-white p-6 md:p-8">
-      {/* 상단 컨트롤 바 */}
+    <div className="bg-app text-white p-6 md:p-8">
+      {/* Top Bar */}
       <div className="flex flex-col md:flex-row items-center justify-between mb-6 gap-4 p-4 rounded-xl border border-blue-700/40 bg-[#0a0d16]/70 backdrop-blur-md">
         <Link to="/" className="flex items-center gap-2 text-gray-400 hover:text-blue-300">
-          <IconArrowLeft size={18}/><span className="text-sm">Home</span>
+          <IconArrowLeft size={18} />
+          <span className="text-sm">Home</span>
         </Link>
 
         <div className="flex flex-wrap items-center gap-3">
           <div>
             <label className="text-sm text-gray-300 mr-2">난이도</label>
-            <select className="p-2 bg-gray-700 border border-gray-600 rounded-md"
-                    value={difficulty} onChange={(e)=>setDifficulty(e.target.value)}>
-              <option>Easy</option><option>Medium</option><option>Hard</option>
+            <select
+              className="p-2 bg-gray-700 border border-gray-600 rounded-md"
+              value={difficulty}
+              onChange={(e) => setDifficulty(e.target.value)}
+            >
+              <option>Easy</option>
+              <option>Medium</option>
+              <option>Hard</option>
             </select>
           </div>
           <div>
             <label className="text-sm text-gray-300 mr-2">유형</label>
-            <select className="p-2 bg-gray-700 border border-gray-600 rounded-md"
-                    value={topic} onChange={(e)=>setTopic(e.target.value)}>
+            <select
+              className="p-2 bg-gray-700 border border-gray-600 rounded-md"
+              value={topic}
+              onChange={(e) => setTopic(e.target.value)}
+            >
               <option value="Algorithms">알고리즘</option>
               <option value="Data Structures">자료구조</option>
             </select>
@@ -191,8 +276,15 @@ export default function Coding() {
             disabled={loading}
             className="flex items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800 text-white font-bold py-2 px-4 rounded-md disabled:opacity-60"
           >
-            {loading ? <><IconSparkles size={18} className="animate-spin"/> 생성 중…</>
-                      : <><IconSparkles size={18}/> AI 문제 생성</>}
+            {loading ? (
+              <>
+                <IconSparkles size={18} className="animate-spin" /> 생성 중…
+              </>
+            ) : (
+              <>
+                <IconSparkles size={18} /> AI 문제 생성
+              </>
+            )}
           </button>
         </div>
 
@@ -201,18 +293,27 @@ export default function Coding() {
         </h1>
       </div>
 
-      {/* 본문: 문제 / 에디터 */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* 문제 영역 */}
-        <div className="rounded-xl border border-blue-700/40 bg-[#0a0d16]/70 overflow-hidden">
+      {/* === Full-width main area === */}
+      <div
+        className="w-full grid grid-cols-1 lg:grid-cols-2 gap-6 px-2 min-h-0"
+        style={{ height: "calc(100vh - 170px)" }}
+      >
+        {/* LEFT: Problem panel */}
+        <div className="rounded-xl border border-blue-700/40 bg-[#0a0d16]/70 overflow-hidden h-full min-h-0 flex flex-col">
           <h2 className="flex items-center gap-2 text-xl font-semibold text-white p-5 border-b border-blue-700/40 bg-blue-900/20">
-            <IconCodeCircle size={22} className="text-blue-400"/> 문제
+            <IconCodeCircle size={22} className="text-blue-400" /> 문제
           </h2>
-          <div className="h-[70vh] overflow-y-auto p-6 text-gray-200">
+          <div className="flex-1 overflow-auto p-6 text-gray-200 min-h-0">
             {!problem && !loading && (
-              <p className="text-gray-500 text-center py-10">옵션을 선택하고 ‘AI 문제 생성’을 눌러주세요.</p>
+              <p className="text-gray-500 text-center py-10">
+                옵션을 선택하고 ‘AI 문제 생성’을 눌러주세요.
+              </p>
+            )}
+            {loading && (
+              <p className="text-blue-300 text-center py-10 animate-pulse">
+                새로운 문제를 생성 중입니다…
+              </p>
             )}
-            {loading && <p className="text-blue-300 text-center py-10 animate-pulse">새로운 문제를 생성 중입니다…</p>}
             {problem && (
               <div className="prose prose-invert max-w-none">
                 <div className="flex justify-between items-start mb-4">
@@ -220,21 +321,25 @@ export default function Coding() {
                   <button
                     onClick={() =>
                       navigator.clipboard.writeText(
-                        `${problem.title}\n\n${problem.description}\n\n제약 조건:\n${(problem.constraints||[]).join('\n')}`
+                        `${problem.title}\n\n${problem.description}\n\n제약 조건:\n${(problem.constraints || []).join("\n")}`
                       )
                     }
                     className="text-gray-400 hover:text-blue-400"
                     title="문제 복사"
                   >
-                    <IconCopy size={18}/>
+                    <IconCopy size={18} />
                   </button>
                 </div>
-                <p className="whitespace-pre-line text-gray-300">{problem.description}</p>
+                <p className="whitespace-pre-line text-gray-300">
+                  {problem.description}
+                </p>
                 {problem.constraints?.length > 0 && (
                   <>
                     <h4 className="mt-6 font-semibold text-blue-200">제약 조건</h4>
                     <ul className="list-disc list-inside text-gray-300">
-                      {problem.constraints.map((c,i)=><li key={i}>{c}</li>)}
+                      {problem.constraints.map((c, i) => (
+                        <li key={i}>{c}</li>
+                      ))}
                     </ul>
                   </>
                 )}
@@ -243,56 +348,32 @@ export default function Coding() {
           </div>
         </div>
 
-        {/* 에디터 + 결과 콘솔 */}
-        <div className="flex flex-col gap-4">
-          <CodeEditor
-            code={code} setCode={setCode}
-            language={language} setLanguage={setLanguage}
-            onRun={handleRunCode} onSubmit={handleSubmitCode}
-            isExecuting={isExecuting} isSubmitting={isSubmitting}
-            problemLoaded={!!problem}
-          />
-
-          {/* 실행 결과 콘솔 */}
-          <div className="rounded-lg border border-blue-800/50 bg-[#0b0f19] p-4">
-            <div className="flex items-center gap-2 mb-3">
-              <IconTerminal2 size={18} className="text-blue-300"/>
-              <h3 className="font-semibold">실행 결과</h3>
-            </div>
-
-            {/* stdin 입력창 */}
-            <div className="mb-3">
-              <label className="text-sm text-gray-400">표준 입력 (옵션)</label>
-              <textarea
-                className="mt-1 w-full h-20 bg-gray-900 text-white border border-gray-700 rounded p-2 font-mono text-sm"
-                placeholder="여기에 실행 입력값을 넣을 수 있어요."
-                value={inputData}
-                onChange={(e)=>setInputData(e.target.value)}
-              />
-            </div>
-
-            {/* 상태별 출력 */}
-            {isExecuting && (
-              <div className="p-4 bg-blue-900/30 text-blue-300 rounded text-sm">코드를 실행 중입니다…</div>
-            )}
-            {!isExecuting && runError && (
-              <pre className="p-4 bg-red-900/40 border border-red-700 rounded text-red-300 whitespace-pre-wrap text-sm">
-                {runError}
-              </pre>
-            )}
-            {!isExecuting && !runError && runResult && (
-              <pre className="p-4 bg-gray-900 border border-gray-700 rounded text-white whitespace-pre-wrap text-sm">
-                {runResult.output || "(출력 없음)"}
-              </pre>
-            )}
-            {!isExecuting && !runError && !runResult && (
-              <div className="text-gray-500 text-sm">아직 실행 결과가 없습니다. 오른쪽 상단의 <b>코드 실행</b>을 눌러보세요.</div>
-            )}
+        {/* RIGHT: Editor (2/3) + Run (1/3) */}
+        <div className="grid grid-rows-[2fr_1fr] gap-4 h-full min-h-0">
+          <div className="min-h-0 overflow-hidden">
+            <CodeEditor
+              code={code}
+              setCode={setCode}
+              language={language}
+              setLanguage={setLanguage}
+              onRun={handleRunCode}
+              onSubmit={handleSubmitCode}
+              isExecuting={isExecuting}
+              isSubmitting={isSubmitting}
+              problemLoaded={!!problem}
+            />
           </div>
+          <RunPanel
+            inputData={inputData}
+            setInputData={setInputData}
+            isExecuting={isExecuting}
+            runError={runError}
+            runResult={runResult}
+          />
         </div>
       </div>
 
-      {toast && <Toast message={toast.message} type={toast.type}/>}
+      {toast && <Toast message={toast.message} type={toast.type} />}
     </div>
   );
 }
diff --git a/apps/web/src/pages/Interview.jsx b/apps/web/src/pages/Interview.jsx
deleted file mode 100644
index 01cc5c3..0000000
--- a/apps/web/src/pages/Interview.jsx
+++ /dev/null
@@ -1,180 +0,0 @@
-// src/pages/Interview.jsx
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { IconArrowLeft, IconSend, IconUser, IconBrain } from "@tabler/icons-react";
-import { sendChatRequest } from '../api/interviewService';
-
-// 채팅 메시지를 표시하는 컴포넌트
-const ChatBubble = ({ role, text }) => {
-  const isUser = role === 'user';
-  return (
-    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`}>
-      <div className={`flex items-start gap-3 max-w-xl ${isUser ? 'flex-row-reverse' : ''}`}>
-        <div className={`grid place-items-center w-10 h-10 rounded-full flex-shrink-0 ${isUser ? 'bg-blue-600' : 'bg-gray-700'}`}>
-          {isUser ? <IconUser size={20} /> : <IconBrain size={20} />}
-        </div>
-        <div className={`p-4 rounded-lg shadow-md ${isUser ? 'bg-blue-700/80' : 'bg-gray-700/80'}`}>
-          {/* AI 응답 텍스트 포맷팅 (간단 버전) */}
-          <p className="text-white whitespace-pre-wrap">{text}</p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default function Interview() {
-  const [topic, setTopic] = useState("React"); // 면접 주제
-  const [history, setHistory] = useState([]); // 대화 기록
-  const [userMessage, setUserMessage] = useState(""); // 현재 입력
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  // 면접 시작 (첫 질문 받기)
-  const handleStartInterview = async () => {
-    setIsLoading(true);
-    setError(null);
-    setHistory([]); // 대화 기록 초기화
-    
-    try {
-      // "start" 메시지를 보내 AI의 첫 질문을 유도
-      const aiResponse = await sendChatRequest(topic, [], "start");
-      setHistory([{ role: "model", text: aiResponse }]);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // 메시지 전송 (답변 제출 및 다음 질문 받기)
-  const handleSubmitMessage = async (e) => {
-    e.preventDefault();
-    if (!userMessage || isLoading) return;
-
-    setIsLoading(true);
-    setError(null);
-    
-    // 1. 사용자 메시지를 히스토리에 추가
-    const newHistory = [...history, { role: "user", text: userMessage }];
-    setHistory(newHistory);
-    setUserMessage("");
-
-    try {
-      // 2. AI에게 (주제, 전체 히스토리, 현재 메시지) 전송
-      const aiResponse = await sendChatRequest(topic, history, userMessage);
-      
-      // 3. AI 응답을 히스토리에 추가
-      setHistory([...newHistory, { role: "model", text: aiResponse }]);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex flex-col bg-gray-900 text-white p-8">
-      {/* --- 헤더 --- */}
-      <header className="flex items-center justify-between mb-8 z-10 relative">
-        <Link
-          to="/"
-          className="flex items-center gap-2 text-gray-400 hover:text-blue-300 transition-colors duration-300
-                     group rounded-full p-2 hover:bg-white/5"
-        >
-          <IconArrowLeft size={20} className="transition-transform group-hover:-translate-x-1" />
-          <span className="opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
-        </Link>
-        <h1 className="text-3xl font-bold text-transparent bg-clip-text 
-                       bg-[linear-gradient(180deg,#f8faff_0%,#e8ecff_70%)]
-                       drop-shadow-[0_4px_20px_rgba(120,160,255,0.3)]">
-          AI Interview
-        </h1>
-        <div className="w-32"></div>
-      </header>
-
-      {/* --- 메인 채팅 UI --- */}
-      <div className="flex-1 flex flex-col max-w-4xl w-full mx-auto">
-        
-        {/* 면접 시작/설정 영역 */}
-        <div className="mb-6 p-4 bg-[#0e111c]/80 rounded-lg border border-blue-900/50 shadow-xl flex items-center gap-4">
-          <label className="font-semibold">면접 주제:</label>
-          <select 
-            className="p-2 bg-gray-700 rounded"
-            value={topic}
-            onChange={(e) => setTopic(e.target.value)}
-          >
-            <option value="React">React</option>
-            <option value="JavaScript">JavaScript</option>
-            <option value="Python">Python</option>
-            <option value="Data Structures">Data Structures</option>
-            <option value="System Design">System Design</option>
-          </select>
-          <button
-            onClick={handleStartInterview}
-            disabled={isLoading}
-            className="ml-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition
-                       disabled:bg-gray-700 disabled:opacity-50"
-          >
-            {history.length > 0 ? "면접 다시 시작" : "면접 시작"}
-          </button>
-        </div>
-
-        {/* 채팅 메시지 영역 */}
-        <div className="flex-1 p-6 bg-[#0e111c]/80 rounded-lg border border-blue-900/50 shadow-xl overflow-y-auto mb-6">
-          {history.length === 0 && !isLoading && (
-            <p className="text-gray-400 text-center">면접 주제를 선택하고 '면접 시작' 버튼을 눌러주세요.</p>
-          )}
-          {isLoading && history.length === 0 && (
-            <p className="text-gray-400 text-center animate-pulse">AI 면접관이 첫 질문을 생성 중입니다...</p>
-          )}
-
-          {history.map((msg, index) => (
-            <ChatBubble key={index} role={msg.role} text={msg.text} />
-          ))}
-
-          {isLoading && history.length > 0 && (
-             <div className="flex justify-start mb-4">
-               <div className="flex items-start gap-3 max-w-xl">
-                 <div className="grid place-items-center w-10 h-10 rounded-full flex-shrink-0 bg-gray-700">
-                   <IconBrain size={20} />
-                 </div>
-                 <div className="p-4 rounded-lg shadow-md bg-gray-700/80 animate-pulse">
-                   <div className="h-4 bg-gray-600 rounded w-24"></div>
-                 </div>
-               </div>
-             </div>
-          )}
-          
-          {error && (
-            <div className="p-4 bg-red-900/50 border border-red-700 rounded-lg text-red-300">
-              <h3 className="font-bold">오류</h3>
-              <p>{error}</p>
-            </div>
-          )}
-        </div>
-
-        {/* 메시지 입력 폼 */}
-        <form onSubmit={handleSubmitMessage} className="flex gap-4">
-          <input
-            type="text"
-            value={userMessage}
-            onChange={(e) => setUserMessage(e.target.value)}
-            placeholder={history.length > 0 ? "답변을 입력하세요..." : "면접을 먼저 시작해주세요."}
-            disabled={isLoading || history.length === 0}
-            className="flex-1 p-4 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500
-                       disabled:opacity-50"
-          />
-          <button
-            type="submit"
-            disabled={isLoading || history.length === 0 || !userMessage}
-            className="w-16 h-16 grid place-items-center bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-lg transition
-                       disabled:bg-gray-700 disabled:opacity-50"
-          >
-            <IconSend size={24} />
-          </button>
-        </form>
-
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/web/src/pages/Review.jsx b/apps/web/src/pages/Review.jsx
index ffb51fa..7d79a97 100644
--- a/apps/web/src/pages/Review.jsx
+++ b/apps/web/src/pages/Review.jsx
@@ -1,80 +1,178 @@
-// src/pages/Review.jsx
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import { IconArrowLeft, IconSparkles } from "@tabler/icons-react";
+import {
+  IconArrowLeft, IconSparkles, IconLoader2, IconAlertTriangle, IconCopy
+} from "@tabler/icons-react";
 import Particles from "@tsparticles/react";
-import { particlesOptions, particlesVersion } from "@/config/particles";
-import { useParticlesInit } from "../hooks/useParticlesInit";
-
-// 1. (신규) formatters.js에서 함수 임포트
-import { formatAiResponse } from "../utils/formatters.jsx";
-// 2. (신규) api/reviewService.js에서 함수 임포트
 import { fetchCodeReview } from "../api/reviewService";
 
+const particlesOptions = {
+  background: { color: { value: "transparent" } },
+  fpsLimit: 60,
+  interactivity: { events: { resize: true } },
+  particles: {
+    color: { value: "#8eb5ff" },
+    links: { enable: true, opacity: 0.22, width: 1 },
+    move: { enable: true, speed: 0.45 },
+    number: { value: 42 },
+    opacity: { value: 0.25 },
+    size: { value: { min: 1, max: 3 } },
+  },
+};
+
 export default function Review() {
   const [code, setCode] = useState("");
   const [review, setReview] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  
-  const init = useParticlesInit();
+  const [copied, setCopied] = useState(false);
 
-  // 3. (수정) handleSubmit 함수가 fetchCodeReview를 사용하도록 변경
   const handleSubmit = async (e) => {
     e.preventDefault();
+    if (!code.trim()) return;
     setIsLoading(true);
     setError(null);
     setReview("");
-
     try {
-      // API 모듈을 통해 요청
       const data = await fetchCodeReview(code);
-      
-      if (data.review) {
-        setReview(data.review);
-      } else {
-        throw new Error(data.error || "Unknown error occurred.");
-      }
+      if (data?.review) setReview(data.review);
+      else throw new Error(data?.error || "Unknown error");
     } catch (err) {
-      setError(err.message);
+      setError(err.message || "Failed to fetch review");
     } finally {
       setIsLoading(false);
     }
   };
 
-  // 4. (삭제) 기존 formatReviewText 함수를 여기서 삭제합니다.
-  
-  if (!init) {
-    return null;
-  }
+  const copyReview = async () => {
+    try {
+      await navigator.clipboard.writeText(review || "");
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {}
+  };
 
   return (
-    <div className="min-h-screen flex flex-col relative overflow-hidden text-white p-8">
-      {/* ... (Particles, header UI는 동일) ... */}
-      
-      <div className="max-w-7xl w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 z-10">
-        <form onSubmit={handleSubmit} className="flex flex-col">
-          {/* ... (textarea, button UI는 동일) ... */}
-        </form>
-        
-        <div className="h-[calc(60vh+68px)] flex flex-col rounded-lg ...">
-          <h2 className="text-xl ...">Review Feedback</h2>
-          <div className="flex-1 p-6 overflow-y-auto">
-            {/* ... (isLoading, error UI는 동일) ... */}
-            
-            {/* 5. (수정) formatAiResponse 훅을 직접 호출 */}
-            {review && (
-              <div className="prose prose-invert max-w-none ...">
-                {formatAiResponse(review)}
+    <div className="bg-app text-white px-6 py-10">
+      {/* 배경 입자: 배경 레이어(z-0)로 */}
+      <Particles
+        options={particlesOptions}
+        className="pointer-events-none absolute inset-0 z-0"
+      />
+
+      {/* Header */}
+      <header className="max-w-7xl mx-auto flex items-center justify-between mb-10 relative z-10">
+        <Link
+          to="/"
+          className="flex items-center gap-2 text-slate-300/90 hover:text-sky-300 transition-colors rounded-full p-2 hover:bg-white/5"
+        >
+          <IconArrowLeft size={20} /> <span>Home</span>
+        </Link>
+
+        <h1
+          className="title-glow text-4xl md:text-5xl font-extrabold"
+          data-text="AI Code Review"
+        >
+          AI Code Review
+        </h1>
+
+        <div className="w-24" />
+      </header>
+
+      {/* Main */}
+      <main
+        className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 px-1 relative z-10"
+        style={{ height: "calc(100vh - 170px)" }}
+      >
+        {/* LEFT: Code input */}
+        <section className="flex flex-col h-full">
+          <div className="gcard h-full">
+            <div className="ginner glass-sheen h-full flex flex-col overflow-hidden">
+              <div className="gheader flex items-center justify-between">
+                <span>Paste Your Code</span>
+              </div>
+
+              <textarea
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                placeholder="여기에 리뷰할 코드를 붙여넣으세요..."
+                className="flex-1 w-full p-5 bg-transparent text-slate-200/95 leading-6 resize-none focus:outline-none custom-scrollbar"
+                spellCheck="false"
+              />
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit}>
+            <button
+              type="submit"
+              disabled={isLoading || !code.trim()}
+              className="btn-neon mt-4 w-full flex items-center justify-center gap-2"
+            >
+              {isLoading ? (
+                <>
+                  <IconLoader2 size={20} className="animate-spin" />
+                  Reviewing...
+                </>
+              ) : (
+                <>
+                  <IconSparkles size={20} />
+                  AI 리뷰 요청
+                </>
+              )}
+            </button>
+          </form>
+        </section>
+
+        {/* RIGHT: Feedback */}
+        <section className="flex flex-col h-full">
+          <div className="gcard h-full">
+            <div className="ginner glass-sheen h-full flex flex-col">
+              <div className="gheader flex items-center justify-between">
+                <span>Review Feedback</span>
+                <button
+                  onClick={copyReview}
+                  className="flex items-center gap-1 text-slate-300/90 hover:text-sky-300 transition-colors disabled:opacity-50"
+                  disabled={!review}
+                  title={copied ? "복사됨!" : "복사"}
+                >
+                  <IconCopy size={18} /> {copied ? "Copied" : "Copy"}
+                </button>
+              </div>
+
+              <div className="flex-1 p-6 overflow-y-auto custom-scrollbar">
+                {isLoading && !review && (
+                  <div className="flex flex-col items-center justify-center h-full text-gray-400">
+                    <IconLoader2 size={40} className="animate-spin mb-4" />
+                    <p className="text-lg">AI가 코드를 분석 중입니다...</p>
+                    <p>잠시만 기다려주세요.</p>
+                  </div>
+                )}
+
+                {error && (
+                  <div className="p-4 bg-red-900/50 border border-red-700/60 rounded-lg text-red-200">
+                    <div className="flex items-center gap-2 font-semibold">
+                      <IconAlertTriangle size={18} /> Error
+                    </div>
+                    <p className="mt-2 text-sm">{error}</p>
+                  </div>
+                )}
+
+                {review && (
+                  <article className="prose prose-invert prose-elite max-w-none leading-relaxed">
+                    <pre className="whitespace-pre-wrap">{review}</pre>
+                  </article>
+                )}
+
+                {!isLoading && !error && !review && (
+                  <div className="text-center text-slate-400/90">
+                    코드를 제출하면 AI 리뷰가 여기에 표시됩니다.
+                  </div>
+                )}
               </div>
-            )}
-            
-            {!isLoading && !error && !review && (
-              <p className="text-gray-500">코드를 제출하면 AI 리뷰가 여기에 표시됩니다.</p>
-            )}
+            </div>
           </div>
-        </div>
-      </div>
+        </section>
+      </main>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/pages/interview/Intro.jsx b/apps/web/src/pages/interview/Intro.jsx
new file mode 100644
index 0000000..db9d1aa
--- /dev/null
+++ b/apps/web/src/pages/interview/Intro.jsx
@@ -0,0 +1,20 @@
+export default function Intro() {
+  return (
+    <div className="bg-app min-h-screen flex items-center justify-center p-6">
+      <div className="gcard max-w-xl w-full">
+        <div className="ginner glass-sheen">
+          <div className="gheader">AI Interview</div>
+          <div className="p-6 space-y-4">
+            <p className="text-slate-300">
+              5개의 질문(기술+인성 랜덤), 문항당 60초입니다. 준비되면 시작하세요.
+            </p>
+            <a href="/interview/session" className="btn-neon block text-center">
+              면접 시작
+            </a>
+            <a href="/" className="block text-center text-slate-400 text-sm">홈으로</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/pages/interview/Result.jsx b/apps/web/src/pages/interview/Result.jsx
new file mode 100644
index 0000000..63ab02c
--- /dev/null
+++ b/apps/web/src/pages/interview/Result.jsx
@@ -0,0 +1,18 @@
+export default function Result() {
+  return (
+    <div className="bg-app min-h-screen flex items-center justify-center p-6">
+      <div className="gcard max-w-xl w-full">
+        <div className="ginner glass-sheen">
+          <div className="gheader">수고하셨습니다!</div>
+          <div className="p-6 space-y-4">
+            <p className="text-slate-300">AI가 곧 요약과 점수를 보여줄 거예요.</p>
+            <div className="flex gap-3">
+              <a href="/interview" className="btn-neon">다시 면접</a>
+              <a href="/" className="px-4 py-3 rounded-xl bg-slate-700 hover:bg-slate-600">홈으로</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/pages/interview/Session.jsx b/apps/web/src/pages/interview/Session.jsx
new file mode 100644
index 0000000..9c44195
--- /dev/null
+++ b/apps/web/src/pages/interview/Session.jsx
@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+
+export default function Session() {
+  // 질문 상태
+  const [questions, setQuestions] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // 페이지 로드 시 랜덤 질문 생성
+  useEffect(() => {
+    const tech = [
+      "비동기 처리(Promise/async-await)의 차이와 에러 핸들링 전략을 설명해 주세요.",
+      "상태관리(Context, Redux, Zustand 등)를 선택할 때 기준은 무엇인가요?",
+      "HTTP/REST와 WebSocket의 차이점을 설명해 주세요.",
+      "데이터베이스 정규화와 비정규화의 차이점을 설명해 주세요.",
+    ];
+
+    const beh = [
+      "최근 가장 도전적이었던 경험은 무엇이었나요?",
+      "팀 내 갈등이 발생했을 때 어떻게 해결했나요?",
+      "실패 경험과 그 이후의 학습 과정을 말해 주세요.",
+      "압박 상황에서 자신을 어떻게 관리하나요?",
+    ];
+
+    // 기술 3 + 인성 2 랜덤 섞기
+    const randomTech = tech.sort(() => 0.5 - Math.random()).slice(0, 3);
+    const randomBeh = beh.sort(() => 0.5 - Math.random()).slice(0, 2);
+    const combined = [...randomTech, ...randomBeh].sort(() => 0.5 - Math.random());
+
+    setQuestions(combined);
+  }, []);
+
+  // 질문 아직 없을 때
+  if (questions.length === 0) {
+    return (
+      <div className="bg-app min-h-screen flex items-center justify-center text-white">
+        질문 불러오는 중...
+      </div>
+    );
+  }
+
+  // 현재 질문 표시
+  const question = questions[currentIndex];
+
+  return (
+    <div className="bg-app min-h-screen flex items-center justify-center p-6 text-white">
+      <div className="gcard max-w-3xl w-full">
+        <div className="ginner glass-sheen">
+          <div className="gheader">면접 진행</div>
+
+          <div className="p-6 space-y-6">
+            <div className="text-slate-400 text-sm">
+              {currentIndex + 1} / {questions.length} 문항
+            </div>
+
+            <div className="rounded-xl p-6 bg-slate-800/60 border border-slate-700 text-lg leading-relaxed">
+              {question}
+            </div>
+
+            <div className="flex gap-4">
+              {currentIndex > 0 && (
+                <button
+                  onClick={() => setCurrentIndex((i) => i - 1)}
+                  className="px-4 py-2 rounded-xl bg-slate-700 hover:bg-slate-600"
+                >
+                  이전
+                </button>
+              )}
+
+              {currentIndex < questions.length - 1 ? (
+                <button
+                  onClick={() => setCurrentIndex((i) => i + 1)}
+                  className="btn-neon"
+                >
+                  다음 질문
+                </button>
+              ) : (
+                <a
+                  href="/interview/result"
+                  className="btn-neon text-center inline-block"
+                >
+                  결과 보기
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/services/interviewApi.js b/apps/web/src/services/interviewApi.js
new file mode 100644
index 0000000..e147360
--- /dev/null
+++ b/apps/web/src/services/interviewApi.js
@@ -0,0 +1,43 @@
+// src/api/interviewApi.js
+// 게이트웨이(Nginx)에서 `/api/interview/*` 프록시된다고 가정
+const BASE_URL = "/api/interview";
+
+/**
+ * 5문항(기술3+인성2) 랜덤 세트 가져오기
+ * GET /api/interview/start  → { questions: [{type,text}] }
+ */
+export async function fetchQuestions() {
+  const res = await fetch(`${BASE_URL}/start`);
+  if (!res.ok) throw new Error(`질문 요청 실패: ${res.status} ${res.statusText}`);
+  return res.json(); // { questions }
+}
+
+/**
+ * 면접 결과 분석 요청 (multipart/form-data)
+ * POST /api/interview/analyze
+ *
+ * @param {{questions: Array<{type:string,text:string}>, answers: Array<{text:string|null,durationSec:number}>}} meta
+ * @param {Blob[]} [audioBlobs]  // 길이 5, 없으면 생략 가능
+ * @returns {Promise<{summary:string, scores: Record<string,number>, detail:any}>}
+ */
+export async function analyzeInterview(meta, audioBlobs = []) {
+  const form = new FormData();
+  form.append("meta", JSON.stringify(meta)); // {questions, answers}
+
+  // audio_0..audio_4 형식으로 첨부 (선택)
+  audioBlobs.forEach((blob, idx) => {
+    if (blob) form.append(`audio_${idx}`, blob, `q${idx}.webm`);
+  });
+
+  const res = await fetch(`${BASE_URL}/analyze`, {
+    method: "POST",
+    body: form,
+  });
+
+  if (!res.ok) {
+    // 서버가 {error:"..."}를 주는 경우 대비
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error || `분석 요청 실패: ${res.status} ${res.statusText}`);
+  }
+  return res.json(); // { summary, scores, detail }
+}
diff --git a/apps/web/src/store/interviewStore.js b/apps/web/src/store/interviewStore.js
new file mode 100644
index 0000000..2ef940b
--- /dev/null
+++ b/apps/web/src/store/interviewStore.js
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+export const useInterviewStore = create((set) => ({
+  questions: [],            // [{ type, text }]
+  currentIndex: 0,           // 진행 중인 질문 인덱스
+  answers: [],               // [{ blob, durationSec }]
+  result: null,              // 분석 결과
+
+  // 액션들
+  setQuestions: (qs) => set({ questions: qs, currentIndex: 0, answers: [], result: null }),
+  setCurrentIndex: (i) => set({ currentIndex: i }),
+  addAnswer: (a) => set((s) => ({ answers: [...s.answers, a] })),
+  setResult: (r) => set({ result: r }),
+  reset: () => set({ questions: [], currentIndex: 0, answers: [], result: null }),
+}));
diff --git a/apps/web/src/utils/audio.js b/apps/web/src/utils/audio.js
new file mode 100644
index 0000000..708d8a6
--- /dev/null
+++ b/apps/web/src/utils/audio.js
@@ -0,0 +1,14 @@
+/** Blob → ArrayBuffer */
+export async function blobToArrayBuffer(blob) {
+  return await blob.arrayBuffer();
+}
+
+/** Blob → Base64 문자열 (분석 서버에 전송 시 사용 가능) */
+export async function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result.split(",")[1]);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
diff --git a/apps/web/src/utils/random.js b/apps/web/src/utils/random.js
new file mode 100644
index 0000000..b639472
--- /dev/null
+++ b/apps/web/src/utils/random.js
@@ -0,0 +1,16 @@
+/** 배열 셔플 */
+export function shuffle(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+/** 기술 + 인성 질문 샘플링 */
+export function sampleFive(TECH, BEH) {
+  const techQs = shuffle(TECH).slice(0, 3).map((t) => ({ type: "tech", text: t }));
+  const behQs = shuffle(BEH).slice(0, 2).map((t) => ({ type: "beh", text: t }));
+  return shuffle([...techQs, ...behQs]);
+}