diff --git a/src/components/common/skeleton.tsx b/src/components/common/skeleton.tsx
new file mode 100644
index 0000000..2c9b30b
--- /dev/null
+++ b/src/components/common/skeleton.tsx
@@ -0,0 +1,20 @@
+import { css } from '@emotion/react'
+
+type SkeletonProps = {
+  height?: number
+  width?: string | number
+}
+
+export function Skeleton({ height = 14, width = '100%' }: SkeletonProps) {
+  return (
+    <span
+      css={(t) => css`
+        display: inline-block;
+        width: ${width};
+        height: ${height}px;
+        border-radius: ${t.radius.sm}px;
+        background: ${t.color.border};
+      `}
+    />
+  )
+}
diff --git a/src/components/stepper/step-footer.tsx b/src/components/stepper/step-footer.tsx
index c30a8de..f67ef6d 100644
--- a/src/components/stepper/step-footer.tsx
+++ b/src/components/stepper/step-footer.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/common/button'
-import { footerBar } from '@/styles/form-styles'
+import { footerStyle } from '@/styles/step-styles'
 
 import type { StepActions, StepState } from '@/features/book-form/hooks/use-multi-step-form'
 
@@ -19,7 +19,7 @@ export function StepFooter({
   submitLabel = '제출',
 }: StepFooterProps) {
   return (
-    <footer css={(t) => footerBar(t)}>
+    <footer css={(t) => footerStyle(t)}>
       {!state.isFirst && (
         <Button
           type="button"
diff --git a/src/components/stepper/step-navigator.tsx b/src/components/stepper/step-navigator.tsx
index 5cedc39..6179654 100644
--- a/src/components/stepper/step-navigator.tsx
+++ b/src/components/stepper/step-navigator.tsx
@@ -5,9 +5,9 @@ import { StepProgress } from '@/components/stepper/step-progress'
 import { StepFooter } from '@/components/stepper/step-footer'
 import { SwitchCases } from '@/components/common/switch-cases'
 
-import { stepFormLayout, stepMainArea } from '@/styles/form-styles'
-
 import { FormStep, useStepController } from '@/features/book-form/hooks/use-multi-step-form'
+import { stepFormLayout } from '@/styles/form-styles'
+import { stepMainArea } from '@/styles/step-styles'
 
 type StepNavigatorProps<TValues extends FieldValues, TComponentId extends string> = {
   title: string
diff --git a/src/features/book-form/components/book-review-step.tsx b/src/features/book-form/components/book-review-step.tsx
index 6b13d59..9361874 100644
--- a/src/features/book-form/components/book-review-step.tsx
+++ b/src/features/book-form/components/book-review-step.tsx
@@ -2,11 +2,7 @@ import { RHFSegmented } from '@/components/rhf-inputs/rhf-segmented'
 import { FormValues, RecommendationValue } from '@/lib/schema'
 import { sectionStyle, titleStyle } from '@/styles/form-styles'
 import { RHFRatingStars } from '@/components/rhf-inputs/rhf-rating-stars'
-
-const recommendationOptions: { label: string; value: RecommendationValue }[] = [
-  { label: '추천해요', value: 'RECOMMEND' },
-  { label: '추천하지 않아요', value: 'NOT_RECOMMEND' },
-]
+import { recommendationOptions } from '../constant/constant'
 
 function getRatingDescription(value: number) {
   if (value >= 4.5) return '최고예요'
diff --git a/src/features/book-form/components/visibility-settings-step.tsx b/src/features/book-form/components/visibility-settings-step.tsx
index 9254bb5..2287917 100644
--- a/src/features/book-form/components/visibility-settings-step.tsx
+++ b/src/features/book-form/components/visibility-settings-step.tsx
@@ -1,11 +1,7 @@
 import { RHFSegmented } from '@/components/rhf-inputs/rhf-segmented'
 import { FormValues, VisibilityValue } from '@/lib/schema'
 import { sectionStyle, titleStyle } from '@/styles/form-styles'
-
-const visibilityOptions: { label: string; value: VisibilityValue }[] = [
-  { label: '공개', value: 'PUBLIC' },
-  { label: '비공개', value: 'PRIVATE' },
-]
+import { visibilityOptions } from '../constant/constant'
 
 export default function VisibilitySettingsStep() {
   return (
diff --git a/src/features/book-form/constant/constant.ts b/src/features/book-form/constant/constant.ts
index b309dd9..48bfc98 100644
--- a/src/features/book-form/constant/constant.ts
+++ b/src/features/book-form/constant/constant.ts
@@ -1,8 +1,34 @@
+import type { RecommendationValue, VisibilityValue } from '@/lib/schema'
 import { ReadingStatus } from '@/types/type'
 
-export const statusOptions = [
+type Option<T extends string> = { label: string; value: T }
+
+function toLabelMap<T extends string>(options: Option<T>[]) {
+  return options.reduce<Record<T, string>>((acc, option) => {
+    acc[option.value] = option.label
+    return acc
+  }, {} as Record<T, string>)
+}
+
+export const statusOptions: Option<ReadingStatus>[] = [
   { label: '읽고 싶은 책', value: ReadingStatus.WANT },
   { label: '읽는 중', value: ReadingStatus.READING },
   { label: '읽음', value: ReadingStatus.DONE },
   { label: '보류 중', value: ReadingStatus.HOLD },
 ]
+
+export const statusLabelMap = toLabelMap(statusOptions)
+
+export const recommendationOptions: Option<RecommendationValue>[] = [
+  { label: '추천해요', value: 'RECOMMEND' },
+  { label: '추천하지 않아요', value: 'NOT_RECOMMEND' },
+]
+
+export const recommendationLabelMap = toLabelMap(recommendationOptions)
+
+export const visibilityOptions: Option<VisibilityValue>[] = [
+  { label: '전체 공개', value: 'PUBLIC' },
+  { label: '비공개', value: 'PRIVATE' },
+]
+
+export const visibilityLabelMap = toLabelMap(visibilityOptions)
diff --git a/src/features/book-form/multi-step-form.tsx b/src/features/book-form/multi-step-form.tsx
index 7682441..79c35d3 100644
--- a/src/features/book-form/multi-step-form.tsx
+++ b/src/features/book-form/multi-step-form.tsx
@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { ReadingStatus } from '@/types/type'
 import { formSchema, FormValues, step1Schema, step2Schema, step3Schema, step4Schema, step5Schema } from '@/lib/schema'
 import { StepNavigator } from '@/components/stepper/step-navigator'
+import { formScreenLayout } from '@/styles/form-styles'
 
 import BookDetailsStep from './components/book-details-step'
 import BookReviewStep from './components/book-review-step'
@@ -11,6 +12,7 @@ import ReadingReflectionStep from './components/reading-reflection-step'
 import QuoteSelectionStep from './components/quote-selection-step'
 import VisibilitySettingsStep from './components/visibility-settings-step'
 import type { FormStep } from './hooks/use-multi-step-form'
+import { FormPreviewPanel } from '../preview-form/component/form-preview-panel'
 
 const stepCases = {
   bookDetails: <BookDetailsStep />,
@@ -79,7 +81,10 @@ export default function MultiStepForm() {
 
   return (
     <FormProvider {...methods}>
-      <StepNavigator title="도서 정보 입력" steps={steps} cases={stepCases} methods={methods} onSubmit={onSubmit} />
+      <div css={formScreenLayout}>
+        <StepNavigator title="도서 정보 입력" steps={steps} cases={stepCases} methods={methods} onSubmit={onSubmit} />
+        <FormPreviewPanel />
+      </div>
     </FormProvider>
   )
 }
diff --git a/src/features/preview-form/component/form-preview-panel.tsx b/src/features/preview-form/component/form-preview-panel.tsx
new file mode 100644
index 0000000..ac14a36
--- /dev/null
+++ b/src/features/preview-form/component/form-preview-panel.tsx
@@ -0,0 +1,51 @@
+import { DeepPartial, useFormContext, useWatch } from 'react-hook-form'
+
+import type { FormValues } from '@/lib/schema'
+import { ReadingStatus } from '@/types/type'
+import { useDelayedPreview } from '../hooks/use-delayed-preview'
+import {
+  formatNumberWithLocale,
+  formatRating,
+  getReadablePeriod,
+  toPreviewQuotes,
+} from '@/features/preview-form/utils/preview-utils'
+import { recommendationLabelMap, statusLabelMap, visibilityLabelMap } from '@/features/book-form/constant/constant'
+import { BookMetaSection, PreviewField, QuotesSection, ReflectionSection } from './form-preview-sections'
+import { previewWrapper, previewCard, bookStatus } from './form-preview-sections.styles'
+
+export function FormPreviewPanel() {
+  const { control } = useFormContext<FormValues>()
+  const watchedValues = useWatch<FormValues>({ control }) as DeepPartial<FormValues>
+  const previewValues = useDelayedPreview<DeepPartial<FormValues>>(watchedValues, 500)
+
+  const quotes = toPreviewQuotes(previewValues?.quotes)
+  const rating = formatRating(previewValues?.rating)
+  const periodText = getReadablePeriod(previewValues)
+  const shouldShowPeriod = Boolean(previewValues?.status && previewValues.status !== ReadingStatus.WANT)
+  const totalPages = formatNumberWithLocale(previewValues?.totalPages)
+
+  return (
+    <aside css={previewWrapper}>
+      <section css={previewCard}>
+        <BookMetaSection values={previewValues} />
+        <dl css={bookStatus}>
+          <PreviewField label="출판일" value={previewValues?.publishedAt} />
+          <PreviewField label="전체 페이지 수" value={totalPages} />
+          <PreviewField label="상태" value={previewValues?.status ? statusLabelMap[previewValues.status] : undefined} />
+          <PreviewField label="기간" value={periodText} isVisible={shouldShowPeriod} />
+          <PreviewField label="별점" value={rating} />
+          <PreviewField
+            label="추천"
+            value={previewValues?.isRecommended ? recommendationLabelMap[previewValues.isRecommended] : undefined}
+          />
+          <PreviewField
+            label="공개"
+            value={previewValues?.visibility ? visibilityLabelMap[previewValues.visibility] : undefined}
+          />
+          <ReflectionSection reflection={previewValues?.reflection} />
+          <QuotesSection quotes={quotes} />
+        </dl>
+      </section>
+    </aside>
+  )
+}
diff --git a/src/features/preview-form/component/form-preview-sections.styles.ts b/src/features/preview-form/component/form-preview-sections.styles.ts
new file mode 100644
index 0000000..2c8d2b1
--- /dev/null
+++ b/src/features/preview-form/component/form-preview-sections.styles.ts
@@ -0,0 +1,127 @@
+import { css, Theme } from '@emotion/react'
+
+export const bookMeta = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(1)};
+  border-radius: ${theme.radius.md}px;
+  background: ${theme.color.surface};
+
+  h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: ${theme.color.text};
+    margin: 0;
+  }
+
+  span {
+    font-size: 13px;
+    color: ${theme.color.muted};
+  }
+`
+
+export const reflectionBox = (theme: Theme) => css`
+  border-radius: ${theme.radius.md}px;
+  background: ${theme.color.surface};
+  font-size: 14px;
+  line-height: 1.6;
+  color: ${theme.color.text};
+  white-space: pre-wrap;
+  display: grid;
+  gap: ${theme.spacing(1)};
+`
+
+export const sectionTitle = (theme: Theme) => css`
+  font-size: 13px;
+  font-weight: 700;
+  color: ${theme.color.muted};
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: ${theme.spacing(1)};
+`
+
+export const quotesList = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(2)};
+  padding: 0;
+
+  li {
+    list-style: none;
+    border-left: 2px solid ${theme.color.border};
+    padding-left: ${theme.spacing(2)};
+    display: grid;
+    gap: ${theme.spacing(1)};
+  }
+
+  blockquote {
+    font-size: 14px;
+    line-height: 1.6;
+    color: ${theme.color.text};
+    margin: 0;
+  }
+
+  cite {
+    font-size: 12px;
+    color: ${theme.color.muted};
+  }
+`
+
+export const placeholderList = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(2)};
+`
+
+export const previewWrapper = (theme: Theme) => css`
+  display: none;
+
+  @media (min-width: 1024px) {
+    position: sticky;
+    top: ${theme.spacing(4)};
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.spacing(3)};
+    width: min(360px, 100%);
+    height: calc(100vh - ${theme.spacing(8)});
+  }
+`
+
+export const previewCard = (theme: Theme) => css`
+  flex: 1 1 auto;
+  border-radius: ${theme.radius.xl}px;
+  background: ${theme.color.surface};
+  border: 1px solid ${theme.color.border};
+  padding: ${theme.spacing(5)} ${theme.spacing(4)};
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(4)};
+  min-height: 520px;
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+export const bookStatus = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing(4)};
+
+  dt {
+    font-size: 12px;
+    font-weight: 600;
+    color: ${theme.color.muted};
+    text-transform: uppercase;
+  }
+
+  dd {
+    font-size: 14px;
+    color: ${theme.color.text};
+    margin: 0;
+  }
+`
diff --git a/src/features/preview-form/component/form-preview-sections.tsx b/src/features/preview-form/component/form-preview-sections.tsx
new file mode 100644
index 0000000..58c1ff7
--- /dev/null
+++ b/src/features/preview-form/component/form-preview-sections.tsx
@@ -0,0 +1,94 @@
+import { ReactNode } from 'react'
+
+import type { DeepPartial } from 'react-hook-form'
+
+import type { FormValues } from '@/lib/schema'
+import { Skeleton } from '@/components/common/skeleton'
+import type { PreviewQuote } from '@/features/preview-form/utils/preview-utils'
+import { formatNumberWithLocale, hasMeaningfulValue } from '@/features/preview-form/utils/preview-utils'
+import { bookMeta, placeholderList, quotesList, reflectionBox, sectionTitle } from './form-preview-sections.styles'
+
+export function BookMetaSection({ values }: { values?: DeepPartial<FormValues> }) {
+  return (
+    <div css={bookMeta}>
+      <h3>{renderText(values?.bookTitle, { width: '70%', height: 18 })}</h3>
+      <span>{renderText(values?.author, { width: '50%' })}</span>
+      <span>{renderText(values?.publisher, { width: '40%' })}</span>
+    </div>
+  )
+}
+
+export function PreviewField({
+  label,
+  value,
+  isVisible = true,
+}: {
+  label: string
+  value?: ReactNode
+  isVisible?: boolean
+}) {
+  if (!isVisible) return null
+  const hasContent = hasMeaningfulValue(value)
+
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd>{hasContent ? value : <Skeleton width={'60%'} />}</dd>
+    </div>
+  )
+}
+
+export function ReflectionSection({ reflection }: { reflection?: string }) {
+  const trimmedReflection = reflection?.trim()
+
+  return (
+    <section css={reflectionBox}>
+      <h4 css={sectionTitle}>독후감</h4>
+      {!trimmedReflection ? (
+        <>
+          <Skeleton />
+          <Skeleton width="80%" />
+          <Skeleton width="65%" />
+        </>
+      ) : (
+        trimmedReflection
+      )}
+    </section>
+  )
+}
+
+export function QuotesSection({ quotes }: { quotes: PreviewQuote[] }) {
+  const shouldShowPlaceholder = quotes.length === 0
+
+  return (
+    <section>
+      <h4 css={sectionTitle}>인용구</h4>
+      {shouldShowPlaceholder ? (
+        <div css={placeholderList}>
+          <Skeleton height={48} />
+          <Skeleton height={48} width="85%" />
+        </div>
+      ) : (
+        <ul css={quotesList}>
+          {quotes.map((quote, index) => {
+            const formattedPage = formatNumberWithLocale(quote.page)
+
+            return (
+              <li key={`${quote.content}-${index}`}>
+                <blockquote>{quote.content}</blockquote>
+                {formattedPage ? <cite>{formattedPage}쪽</cite> : null}
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </section>
+  )
+}
+
+function renderText(content: string | undefined, skeletonProps: { width?: number | string; height?: number }) {
+  if (!content?.trim()) {
+    return <Skeleton {...skeletonProps} />
+  }
+  return content
+}
diff --git a/src/features/preview-form/hooks/use-delayed-preview.ts b/src/features/preview-form/hooks/use-delayed-preview.ts
new file mode 100644
index 0000000..4e0694d
--- /dev/null
+++ b/src/features/preview-form/hooks/use-delayed-preview.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export function useDelayedPreview<T>(value: T, delay: number) {
+  const [data, setData] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setData(value)
+    }, delay)
+
+    return () => clearTimeout(timer)
+  }, [value, delay])
+
+  return data
+}
diff --git a/src/features/preview-form/utils/preview-utils.ts b/src/features/preview-form/utils/preview-utils.ts
new file mode 100644
index 0000000..56d5d2f
--- /dev/null
+++ b/src/features/preview-form/utils/preview-utils.ts
@@ -0,0 +1,85 @@
+import { ReactNode } from 'react'
+import type { DeepPartial } from 'react-hook-form'
+
+import type { FormValues } from '@/lib/schema'
+import { ReadingStatus } from '@/types/type'
+
+const koreanNumberFormatter = new Intl.NumberFormat('ko-KR')
+
+export type PreviewQuote = {
+  content: string
+  page?: number
+}
+
+export function formatNumberWithLocale(value: unknown): string | undefined {
+  if (value === null || value === undefined) {
+    return undefined
+  }
+
+  const trimmed = typeof value === 'string' ? value.trim() : undefined
+  const numericCandidate =
+    typeof value === 'number' ? value : trimmed && trimmed.length > 0 ? Number(trimmed) : Number.NaN
+
+  if (Number.isFinite(numericCandidate)) {
+    return koreanNumberFormatter.format(numericCandidate)
+  }
+
+  return trimmed && trimmed.length > 0 ? trimmed : undefined
+}
+
+export function toPreviewQuotes(quotes: DeepPartial<FormValues>['quotes']): PreviewQuote[] {
+  if (!Array.isArray(quotes)) {
+    return []
+  }
+
+  return quotes
+    .filter((quote): quote is { content: string; page?: number } => typeof quote?.content === 'string')
+    .map((quote) => ({
+      content: quote.content.trim(),
+      page: quote.page,
+    }))
+    .filter((quote) => quote.content.length > 0)
+}
+
+export function formatRating(rating: FormValues['rating'] | undefined) {
+  if (typeof rating !== 'number' || Number.isNaN(rating)) {
+    return undefined
+  }
+
+  return rating.toFixed(1).replace('.0', '')
+}
+
+export function getReadablePeriod(values?: DeepPartial<FormValues>) {
+  if (!values?.status || values.status === ReadingStatus.WANT) {
+    return undefined
+  }
+
+  const startedAt = values.startedAt?.trim()
+  const endedAt = values.endedAt?.trim()
+
+  if (!startedAt) {
+    return undefined
+  }
+
+  if (values.status === ReadingStatus.DONE && endedAt) {
+    return `${startedAt} ~ ${endedAt}`
+  }
+
+  return startedAt
+}
+
+export function hasMeaningfulValue(value: ReactNode) {
+  if (value === null || value === undefined || value === false) {
+    return false
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length > 0
+  }
+
+  if (Array.isArray(value)) {
+    return value.length > 0
+  }
+
+  return true
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0b747f1..c130958 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,11 +2,8 @@ import MultiStepForm from '@/features/book-form/multi-step-form'
 import { css } from '@emotion/react'
 
 const mainStyles = css`
-  max-width: 1024px;
-  height: 100dvh;
   margin: 0 auto;
-  padding: 2rem;
-  background-color: white;
+  max-width: 1200px;
 `
 
 export default function Home() {
diff --git a/src/styles/form-styles.ts b/src/styles/form-styles.ts
index 4769fec..0f8e801 100644
--- a/src/styles/form-styles.ts
+++ b/src/styles/form-styles.ts
@@ -2,39 +2,38 @@ import { css, Theme } from '@emotion/react'
 
 export const sectionStyle = (theme: Theme) => css`
   width: 100%;
-  padding: ${theme.spacing(5)} ${theme.spacing(4)} ${theme.spacing(7)};
-  margin: 0 auto;
-  background: ${theme.color.surface};
 `
 
-export const stepFormLayout = css`
-  height: 100%;
-  min-height: 100vh;
+export const stepFormLayout = (theme: Theme) => css`
   display: flex;
   flex-direction: column;
+  height: 100%;
   min-height: 0;
   overflow: hidden;
+  padding: 1rem 2rem;
+  background-color: white;
 `
 
-export const stepMainArea = (t: Theme) => css`
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
+export const formScreenLayout = (t: Theme) => css`
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: ${t.spacing(3)} 0 ${t.spacing(10)};
-  scroll-padding-top: ${t.spacing(4)};
-`
+  gap: ${t.spacing(4)};
 
-export const footerBar = (t: Theme) => css`
-  display: flex;
-  gap: ${t.spacing(2)};
-  margin-top: ${t.spacing(5)};
-  background: ${t.color.surface};
-  flex-shrink: 0;
+  > * {
+    min-height: 0;
+  }
+
+  > form {
+    flex: 1 1 auto;
+  }
 
-  @media (max-width: 560px) {
-    flex-direction: column;
+  @media (min-width: 1024px) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
+    gap: ${t.spacing(6)};
+    align-items: stretch;
+    height: 100vh;
   }
 `
 
diff --git a/src/styles/step-styles.ts b/src/styles/step-styles.ts
index 16fa571..71e561d 100644
--- a/src/styles/step-styles.ts
+++ b/src/styles/step-styles.ts
@@ -23,6 +23,8 @@ export const navStyle = (t: Theme) => css`
   width: 100%;
   padding: ${t.spacing(5)} 0 ${t.spacing(3)};
   flex-shrink: 0;
+  position: sticky;
+  top: 0;
   background: ${t.color.surface};
 `
 
@@ -106,3 +108,31 @@ export const optional = (t: Theme) => css`
   font-weight: 500;
   font-size: 12px;
 `
+
+export const footerStyle = (t: Theme) => css`
+  display: flex;
+  gap: ${t.spacing(2)};
+  margin-top: ${t.spacing(5)};
+  flex-shrink: 0;
+  background: ${t.color.surface};
+
+  @media (max-width: 560px) {
+    flex-direction: column;
+  }
+`
+
+export const stepMainArea = (t: Theme) => css`
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  padding: ${t.spacing(3)} 0 ${t.spacing(10)};
+  scroll-padding-top: ${t.spacing(4)};
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`