diff --git a/frontend/public/interview-session-background.png b/frontend/public/interview-session-background.png
new file mode 100644
index 00000000..398ee436
Binary files /dev/null and b/frontend/public/interview-session-background.png differ
diff --git a/frontend/src/features/interview/lib/categoryLabel.ts b/frontend/src/features/interview/lib/categoryLabel.ts
new file mode 100644
index 00000000..de7f41d2
--- /dev/null
+++ b/frontend/src/features/interview/lib/categoryLabel.ts
@@ -0,0 +1,12 @@
+// 면접 질문 카테고리 ENUM → 한국어 라벨. 라이브 스테이지와 채팅 버블이 공유한다.
+const CATEGORY_LABEL: Record<string, string> = {
+  CS_FUNDAMENTAL: 'CS 기초',
+  PROJECT_DEEP_DIVE: '프로젝트 심화',
+  TECH_CHOICE: '기술 선택',
+  BEHAVIORAL: '인성·행동',
+}
+
+export function categoryLabel(category?: string | null): string | null {
+  if (!category) return null
+  return CATEGORY_LABEL[category] ?? category
+}
diff --git a/frontend/src/features/interview/lib/media/useTtsPlayback.tsx b/frontend/src/features/interview/lib/media/useTtsPlayback.tsx
new file mode 100644
index 00000000..dea542a5
--- /dev/null
+++ b/frontend/src/features/interview/lib/media/useTtsPlayback.tsx
@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useMessageAudio } from './useMessageAudio'
+
+// 질문 TTS 오디오의 로드·자동재생·토글을 캡슐화한다.
+// QuestionBubble(채팅)과 StageQuestion(몰입형 스테이지)이 공유한다.
+// audioNode 를 렌더 트리에 그대로 끼워 넣으면 된다.
+export function useTtsPlayback({
+  sessionId,
+  messageId,
+  enabled,
+  autoPlay = false,
+}: {
+  sessionId?: number
+  messageId?: number
+  enabled: boolean
+  autoPlay?: boolean
+}) {
+  const { url, load } = useMessageAudio(sessionId, messageId)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [playing, setPlaying] = useState(false)
+  const wantPlay = useRef(false)
+  const autoTried = useRef(false)
+
+  // 최신 질문이면 오디오를 받아 자동재생 시도(브라우저 차단 시 조용히 폴백).
+  useEffect(() => {
+    if (!autoPlay || !enabled || autoTried.current) return
+    autoTried.current = true
+    wantPlay.current = true
+    void load()
+  }, [autoPlay, enabled, load])
+
+  // object URL 이 준비되면 대기 중이던 재생 요청을 반영.
+  useEffect(() => {
+    if (url && wantPlay.current) {
+      wantPlay.current = false
+      audioRef.current?.play().catch(() => {})
+    }
+  }, [url])
+
+  const toggle = useCallback(async () => {
+    const el = audioRef.current
+    if (!url) {
+      wantPlay.current = true
+      await load()
+      return
+    }
+    if (!el) return
+    if (el.paused) el.play().catch(() => {})
+    else el.pause()
+  }, [url, load])
+
+  const audioNode =
+    enabled && url ? (
+      <audio
+        ref={audioRef}
+        src={url}
+        preload="none"
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onEnded={() => setPlaying(false)}
+      />
+    ) : null
+
+  return { playing, toggle, audioNode }
+}
diff --git a/frontend/src/features/interview/ui/live/InterviewHeader.tsx b/frontend/src/features/interview/ui/live/InterviewHeader.tsx
deleted file mode 100644
index 3dacad96..00000000
--- a/frontend/src/features/interview/ui/live/InterviewHeader.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { StatusBadge } from '@/shared/ui/StatusBadge'
-import { Button } from '@/shared/ui/Button'
-import { sessionProgress } from '@/domain/session'
-import type { Session } from '@/domain/session'
-import type { ConnectionStatus } from '../../model/useLiveInterview'
-
-const connTone: Record<ConnectionStatus, 'success' | 'warning' | 'danger'> = {
-  open: 'success',
-  connecting: 'warning',
-  closed: 'danger',
-}
-const connLabel: Record<ConnectionStatus, string> = {
-  open: '연결됨',
-  connecting: '연결 중',
-  closed: '재연결 중',
-}
-
-export function InterviewHeader({
-  session,
-  connection,
-  onEnd,
-}: {
-  session: Session
-  connection: ConnectionStatus
-  onEnd: () => void
-}) {
-  const progress = sessionProgress(session)
-  return (
-    <header className="flex items-center justify-between gap-4 border-b border-border bg-surface-raised px-4 py-3">
-      <div className="min-w-0">
-        <h1 className="truncate text-h6 text-fg">{session.title ?? '모의 면접'}</h1>
-        <p className="text-caption text-fg-muted">
-          질문 {progress.current} / {progress.max}
-        </p>
-      </div>
-      <div className="flex items-center gap-3">
-        <StatusBadge tone={connTone[connection]}>{connLabel[connection]}</StatusBadge>
-        <Button variant="danger" size="sm" onClick={onEnd}>
-          면접 종료
-        </Button>
-      </div>
-    </header>
-  )
-}
diff --git a/frontend/src/features/interview/ui/live/InterviewStage.tsx b/frontend/src/features/interview/ui/live/InterviewStage.tsx
new file mode 100644
index 00000000..3492b799
--- /dev/null
+++ b/frontend/src/features/interview/ui/live/InterviewStage.tsx
@@ -0,0 +1,135 @@
+import { useState } from 'react'
+import { StatusBadge } from '@/shared/ui/StatusBadge'
+import { Button } from '@/shared/ui/Button'
+import { isQuestion, isTranscribing, sessionProgress } from '@/domain/session'
+import type { Session } from '@/domain/session'
+import type { ConnectionStatus, ThreadItem } from '../../model/useLiveInterview'
+import { ConnectionBanner } from './ConnectionBanner'
+import { AnswerComposer } from './AnswerComposer'
+import { StageQuestion } from './StageQuestion'
+import { TranscriptDrawer } from './TranscriptDrawer'
+
+const BG = '/interview-session-background.png'
+
+const connTone: Record<ConnectionStatus, 'success' | 'warning' | 'danger'> = {
+  open: 'success',
+  connecting: 'warning',
+  closed: 'danger',
+}
+const connLabel: Record<ConnectionStatus, string> = {
+  open: '연결됨',
+  connecting: '연결 중',
+  closed: '재연결 중',
+}
+
+function ThinkingState({ transcribing }: { transcribing: boolean }) {
+  return (
+    <div className="flex flex-col items-center gap-4 text-fg-muted">
+      <span className="flex gap-1.5" aria-hidden>
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            className="h-2.5 w-2.5 animate-pulse rounded-full bg-sage-700/70"
+            style={{ animationDelay: `${i * 150}ms` }}
+          />
+        ))}
+      </span>
+      <p className="text-body font-medium text-fg">
+        {transcribing ? '답변을 받아 적고 있어요…' : '다음 질문을 준비하고 있어요…'}
+      </p>
+    </div>
+  )
+}
+
+export function InterviewStage({
+  session,
+  connection,
+  items,
+  awaitingQuestion,
+  onSubmit,
+  onSubmitVoice,
+  voiceUploading,
+  onEnd,
+}: {
+  session: Session
+  connection: ConnectionStatus
+  items: ThreadItem[]
+  awaitingQuestion: boolean
+  onSubmit: (content: string) => void
+  onSubmitVoice: (audio: Blob) => void
+  voiceUploading: boolean
+  onEnd: () => void
+}) {
+  const [transcriptOpen, setTranscriptOpen] = useState(false)
+  const progress = sessionProgress(session)
+  const currentQuestion = [...items].reverse().find(isQuestion)
+  const lastItem = items[items.length - 1]
+  const transcribing = Boolean(lastItem && isTranscribing(lastItem))
+
+  return (
+    <section className="relative flex h-full flex-col overflow-hidden">
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-cover bg-center"
+        style={{ backgroundImage: `url(${BG})` }}
+      />
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-gradient-to-b from-white/55 via-white/25 to-white/75"
+      />
+
+      {/* 진행도 바 */}
+      <div className="relative z-10 h-1 w-full bg-white/40">
+        <div
+          className="h-full bg-primary transition-[width] duration-slow ease-standard"
+          style={{ width: `${progress.ratio * 100}%` }}
+        />
+      </div>
+
+      <header className="relative z-10 flex items-center justify-between gap-3 border-b border-white/40 bg-white/55 px-4 py-3 backdrop-blur-md">
+        <div className="min-w-0">
+          <h1 className="truncate text-h6 text-fg">{session.title ?? '모의 면접'}</h1>
+          <p className="text-caption text-fg-muted">
+            질문 {progress.current} / {progress.max}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <StatusBadge tone={connTone[connection]}>{connLabel[connection]}</StatusBadge>
+          <Button variant="ghost" size="sm" onClick={() => setTranscriptOpen(true)}>
+            기록
+          </Button>
+          <Button variant="danger" size="sm" onClick={onEnd}>
+            종료
+          </Button>
+        </div>
+      </header>
+
+      <ConnectionBanner connection={connection} />
+
+      <div className="relative z-10 flex flex-1 items-center justify-center overflow-y-auto px-5 py-8">
+        {awaitingQuestion || !currentQuestion ? (
+          <ThinkingState transcribing={transcribing} />
+        ) : (
+          <StageQuestion question={currentQuestion} />
+        )}
+      </div>
+
+      <div className="relative z-10">
+        <AnswerComposer
+          disabled={awaitingQuestion || connection !== 'open'}
+          onSubmit={onSubmit}
+          onSubmitVoice={onSubmitVoice}
+          voiceUploading={voiceUploading}
+        />
+      </div>
+
+      {transcriptOpen && (
+        <TranscriptDrawer
+          items={items}
+          awaitingQuestion={awaitingQuestion}
+          onClose={() => setTranscriptOpen(false)}
+        />
+      )}
+    </section>
+  )
+}
diff --git a/frontend/src/features/interview/ui/live/LiveInterview.tsx b/frontend/src/features/interview/ui/live/LiveInterview.tsx
index 0de93778..5a1a3f83 100644
--- a/frontend/src/features/interview/ui/live/LiveInterview.tsx
+++ b/frontend/src/features/interview/ui/live/LiveInterview.tsx
@@ -1,9 +1,6 @@
 import { Spinner } from '@/shared/ui/Spinner'
 import { useLiveInterview } from '../../model/useLiveInterview'
-import { InterviewHeader } from './InterviewHeader'
-import { ConnectionBanner } from './ConnectionBanner'
-import { ConversationThread } from './ConversationThread'
-import { AnswerComposer } from './AnswerComposer'
+import { InterviewStage } from './InterviewStage'
 import { SessionEndedPanel } from './SessionEndedPanel'
 import { InterviewLobby } from './InterviewLobby'
 
@@ -37,18 +34,15 @@ export function LiveInterview({ sessionId }: { sessionId: number }) {
 
   const awaitingQuestion = turn === 'WAITING_FOR_QUESTION'
   return (
-    <div className="flex h-full flex-col">
-      <InterviewHeader session={session} connection={connection} onEnd={endSession} />
-      <ConnectionBanner connection={connection} />
-      <div className="min-h-0 flex-1">
-        <ConversationThread items={items} awaitingQuestion={awaitingQuestion} />
-      </div>
-      <AnswerComposer
-        disabled={turn !== 'AWAITING_ANSWER' || connection !== 'open'}
-        onSubmit={submitAnswer}
-        onSubmitVoice={submitVoice}
-        voiceUploading={voiceUploading}
-      />
-    </div>
+    <InterviewStage
+      session={session}
+      connection={connection}
+      items={items}
+      awaitingQuestion={awaitingQuestion}
+      onSubmit={submitAnswer}
+      onSubmitVoice={submitVoice}
+      voiceUploading={voiceUploading}
+      onEnd={endSession}
+    />
   )
 }
diff --git a/frontend/src/features/interview/ui/live/QuestionBubble.tsx b/frontend/src/features/interview/ui/live/QuestionBubble.tsx
index 9da2de6e..3c46a15d 100644
--- a/frontend/src/features/interview/ui/live/QuestionBubble.tsx
+++ b/frontend/src/features/interview/ui/live/QuestionBubble.tsx
@@ -1,14 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
 import type { Message } from '@/domain/session'
 import { StatusBadge } from '@/shared/ui/StatusBadge'
-import { useMessageAudio } from '../../lib/media/useMessageAudio'
-
-const CATEGORY_LABEL: Record<string, string> = {
-  CS_FUNDAMENTAL: 'CS 기초',
-  PROJECT_DEEP_DIVE: '프로젝트 심화',
-  TECH_CHOICE: '기술 선택',
-  BEHAVIORAL: '인성·행동',
-}
+import { categoryLabel } from '../../lib/categoryLabel'
+import { useTtsPlayback } from '../../lib/media/useTtsPlayback'
 
 function PlayIcon({ playing }: { playing: boolean }) {
   return (
@@ -25,52 +18,23 @@ export function QuestionBubble({
   message: Message
   autoPlay?: boolean
 }) {
-  const categoryLabel = message.category
-    ? (CATEGORY_LABEL[message.category] ?? message.category)
-    : null
-  const hasMeta = Boolean(categoryLabel || message.targetEvidence)
+  const label = categoryLabel(message.category)
+  const hasMeta = Boolean(label || message.targetEvidence)
   const ttsReady = message.ttsStatus === 'SUCCEEDED'
 
-  const { url, load } = useMessageAudio(message.sessionId, message.id)
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-  const [playing, setPlaying] = useState(false)
-  const wantPlay = useRef(false)
-  const autoTried = useRef(false)
-
-  // 최신 질문이면 오디오를 받아 자동재생 시도(차단 시 조용히 폴백).
-  useEffect(() => {
-    if (!autoPlay || !ttsReady || autoTried.current) return
-    autoTried.current = true
-    wantPlay.current = true
-    void load()
-  }, [autoPlay, ttsReady, load])
-
-  // object URL 이 준비되면 재생 요청을 반영.
-  useEffect(() => {
-    if (url && wantPlay.current) {
-      wantPlay.current = false
-      audioRef.current?.play().catch(() => {})
-    }
-  }, [url])
-
-  const toggle = async () => {
-    const el = audioRef.current
-    if (!url) {
-      wantPlay.current = true
-      await load()
-      return
-    }
-    if (!el) return
-    if (el.paused) el.play().catch(() => {})
-    else el.pause()
-  }
+  const { playing, toggle, audioNode } = useTtsPlayback({
+    sessionId: message.sessionId,
+    messageId: message.id,
+    enabled: ttsReady,
+    autoPlay,
+  })
 
   return (
     <div className="flex justify-start">
       <div className="flex max-w-[80%] flex-col gap-1.5">
         {hasMeta && (
           <div className="flex flex-wrap items-center gap-2">
-            {categoryLabel && <StatusBadge tone="info">{categoryLabel}</StatusBadge>}
+            {label && <StatusBadge tone="info">{label}</StatusBadge>}
             {message.targetEvidence && (
               <span className="text-caption text-fg-muted">근거: {message.targetEvidence}</span>
             )}
@@ -89,16 +53,7 @@ export function QuestionBubble({
                 <PlayIcon playing={playing} />
                 {playing ? '일시정지' : '음성 듣기'}
               </button>
-              {url && (
-                <audio
-                  ref={audioRef}
-                  src={url}
-                  preload="none"
-                  onPlay={() => setPlaying(true)}
-                  onPause={() => setPlaying(false)}
-                  onEnded={() => setPlaying(false)}
-                />
-              )}
+              {audioNode}
             </div>
           )}
         </div>
diff --git a/frontend/src/features/interview/ui/live/StageQuestion.tsx b/frontend/src/features/interview/ui/live/StageQuestion.tsx
new file mode 100644
index 00000000..d91f1406
--- /dev/null
+++ b/frontend/src/features/interview/ui/live/StageQuestion.tsx
@@ -0,0 +1,62 @@
+import type { Message } from '@/domain/session'
+import { categoryLabel } from '../../lib/categoryLabel'
+import { useTtsPlayback } from '../../lib/media/useTtsPlayback'
+
+function PlayIcon({ playing }: { playing: boolean }) {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+      {playing ? <path d="M8 6h3v12H8zM13 6h3v12h-3z" /> : <path d="M8 5v14l11-7z" />}
+    </svg>
+  )
+}
+
+// 면접관이 지금 막 던진 한 질문에만 집중시키는 카드.
+export function StageQuestion({ question }: { question: Message }) {
+  const label = categoryLabel(question.category)
+  const ttsReady = question.ttsStatus === 'SUCCEEDED'
+
+  const { playing, toggle, audioNode } = useTtsPlayback({
+    sessionId: question.sessionId,
+    messageId: question.id,
+    enabled: ttsReady,
+    autoPlay: true,
+  })
+
+  return (
+    <div className="w-full max-w-2xl rounded-2xl border border-white/50 bg-white/70 px-6 py-7 shadow-lg backdrop-blur-md sm:px-9 sm:py-10">
+      <div className="flex items-center gap-2.5">
+        <span
+          aria-hidden
+          className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-sage-800 text-[11px] font-semibold uppercase tracking-wide text-white"
+        >
+          AI
+        </span>
+        <div className="flex flex-col">
+          <span className="text-caption font-medium text-fg">면접관</span>
+          {label && (
+            <span className="text-caption text-fg-muted">{label}</span>
+          )}
+        </div>
+      </div>
+
+      <p className="mt-5 whitespace-pre-wrap text-[22px] font-medium leading-relaxed text-fg sm:text-[26px]">
+        {question.content}
+      </p>
+
+      {ttsReady && (
+        <div className="mt-6 flex items-center gap-2">
+          <button
+            type="button"
+            onClick={toggle}
+            aria-label={playing ? '음성 일시정지' : '질문 음성 재생'}
+            className="inline-flex items-center gap-1.5 rounded-pill border border-border bg-white/70 px-3 py-1.5 text-caption font-medium text-fg transition-colors hover:bg-white"
+          >
+            <PlayIcon playing={playing} />
+            {playing ? '일시정지' : '질문 다시 듣기'}
+          </button>
+          {audioNode}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/features/interview/ui/live/TranscriptDrawer.tsx b/frontend/src/features/interview/ui/live/TranscriptDrawer.tsx
new file mode 100644
index 00000000..1803b858
--- /dev/null
+++ b/frontend/src/features/interview/ui/live/TranscriptDrawer.tsx
@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+import type { ThreadItem } from '../../model/useLiveInterview'
+import { ConversationThread } from './ConversationThread'
+
+// 몰입형 스테이지는 현재 질문에만 집중하므로, 지난 문답 전체는
+// 필요할 때만 이 드로어에서 확인한다(채팅 스레드 재사용).
+export function TranscriptDrawer({
+  items,
+  awaitingQuestion,
+  onClose,
+}: {
+  items: ThreadItem[]
+  awaitingQuestion: boolean
+  onClose: () => void
+}) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <div className="absolute inset-0 z-30 flex">
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-black/30"
+        onClick={onClose}
+      />
+      <aside
+        role="dialog"
+        aria-label="대화 기록"
+        className="relative ml-auto flex h-full w-full max-w-md flex-col bg-bg shadow-xl"
+      >
+        <header className="flex items-center justify-between border-b border-border px-4 py-3">
+          <h2 className="text-h6 text-fg">대화 기록</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="닫기"
+            className="rounded-md px-2 py-1 text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+          >
+            ✕
+          </button>
+        </header>
+        <div className="min-h-0 flex-1">
+          <ConversationThread items={items} awaitingQuestion={awaitingQuestion} />
+        </div>
+      </aside>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/InterviewSession/ui/InterviewSessionPage.tsx b/frontend/src/pages/InterviewSession/ui/InterviewSessionPage.tsx
index c54be742..536fdfaa 100644
--- a/frontend/src/pages/InterviewSession/ui/InterviewSessionPage.tsx
+++ b/frontend/src/pages/InterviewSession/ui/InterviewSessionPage.tsx
@@ -13,8 +13,8 @@ export default function InterviewSessionPage() {
       <SiteNav />
       <main className="mx-auto w-full max-w-content flex-1 px-6 py-6 lg:px-12">
         {valid ? (
-          // 라이브 채팅은 고정 높이 카드로 — 내부에서 thread 스크롤 + composer 하단 고정.
-          <div className="flex h-[70svh] min-h-120 flex-col overflow-hidden rounded-xl border border-border bg-surface-raised shadow-sm">
+          // 라이브 면접은 몰입형 스테이지 — 배경 위에 현재 질문 집중 + composer 하단 고정.
+          <div className="flex h-[78svh] min-h-120 flex-col overflow-hidden rounded-xl border border-border bg-surface-raised shadow-sm">
             <LiveInterview sessionId={sessionId} />
           </div>
         ) : (