diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index 359d18b..1362dbd 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -28,7 +28,8 @@ const viewKey = computed(() => {
     route.name === 'illustrator-viewer' ||
     route.name === 'photoshop-viewer' ||
     route.name === 'tools-scanner' ||
-    route.name === 'tools-bg-remove'
+    route.name === 'tools-bg-remove' ||
+    route.name === 'tools-image-edit'
   ) {
     return String(route.name);
   }
@@ -50,6 +51,7 @@ const viewKey = computed(() => {
         'PhotoshopViewerView',
         'ToolsScannerView',
         'ToolsBgRemoveView',
+        'ToolsImageEditView',
       ]"
       :max="10"
     >
diff --git a/packages/frontend/src/components/imageedit/CropEditor.vue b/packages/frontend/src/components/imageedit/CropEditor.vue
new file mode 100644
index 0000000..5be0f96
--- /dev/null
+++ b/packages/frontend/src/components/imageedit/CropEditor.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount } from 'vue';
+import {
+  clampCrop,
+  type PixelRect,
+} from '@/integrations/imageedit/process';
+
+defineOptions({ name: 'CropEditor' });
+
+const props = defineProps<{
+  src: string;
+  crop: PixelRect;
+  imageWidth: number;
+  imageHeight: number;
+  aspect: number | null;
+}>();
+
+const emit = defineEmits<{
+  'update:crop': [PixelRect];
+}>();
+
+type Handle = 'move' | 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+
+const handles = computed<Handle[]>(() =>
+  props.aspect
+    ? ['nw', 'ne', 'se', 'sw']
+    : ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'],
+);
+
+const boxStyle = computed(() => {
+  const w = props.imageWidth || 1;
+  const h = props.imageHeight || 1;
+  return {
+    left: `${(props.crop.x / w) * 100}%`,
+    top: `${(props.crop.y / h) * 100}%`,
+    width: `${(props.crop.width / w) * 100}%`,
+    height: `${(props.crop.height / h) * 100}%`,
+  };
+});
+
+let drag: {
+  handle: Handle;
+  pointerId: number;
+  startX: number;
+  startY: number;
+  start: PixelRect;
+  displayScale: number;
+} | null = null;
+
+function displayScaleFromEvent(event: PointerEvent) {
+  const stage = (event.currentTarget as HTMLElement).closest('.crop');
+  const img = stage?.querySelector('img');
+  if (!img || !props.imageWidth) return 1;
+  return img.clientWidth / props.imageWidth;
+}
+
+function bindWindow(on: boolean) {
+  if (on) {
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', endDrag);
+    window.addEventListener('pointercancel', endDrag);
+  } else {
+    window.removeEventListener('pointermove', onPointerMove);
+    window.removeEventListener('pointerup', endDrag);
+    window.removeEventListener('pointercancel', endDrag);
+  }
+}
+
+function beginDrag(handle: Handle, event: PointerEvent) {
+  event.preventDefault();
+  event.stopPropagation();
+  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+  bindWindow(false);
+  drag = {
+    handle,
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    start: { ...props.crop },
+    displayScale: displayScaleFromEvent(event),
+  };
+  bindWindow(true);
+}
+
+function applyAspectFromFixedCorner(
+  next: PixelRect,
+  fixed: { x: number; y: number },
+  preferWidth: boolean,
+) {
+  const aspect = props.aspect;
+  if (!aspect) return next;
+  if (preferWidth) {
+    next.height = next.width / aspect;
+  } else {
+    next.width = next.height * aspect;
+  }
+  next.x = fixed.x < next.x + next.width ? fixed.x : fixed.x - next.width;
+  next.y = fixed.y < next.y + next.height ? fixed.y : fixed.y - next.height;
+  if (next.width < 0) {
+    next.x += next.width;
+    next.width = Math.abs(next.width);
+  }
+  if (next.height < 0) {
+    next.y += next.height;
+    next.height = Math.abs(next.height);
+  }
+  return next;
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!drag || event.pointerId !== drag.pointerId) return;
+  const scale = drag.displayScale || 1;
+  const dx = (event.clientX - drag.startX) / scale;
+  const dy = (event.clientY - drag.startY) / scale;
+  const start = drag.start;
+  let next: PixelRect = { ...start };
+  const handle = drag.handle;
+  const aspect = props.aspect;
+
+  if (handle === 'move') {
+    next.x = start.x + dx;
+    next.y = start.y + dy;
+    emit(
+      'update:crop',
+      clampCrop(next, props.imageWidth, props.imageHeight),
+    );
+    return;
+  }
+
+  const se = { x: start.x + start.width, y: start.y + start.height };
+  const nw = { x: start.x, y: start.y };
+
+  if (handle.includes('e') || handle === 'e') next.width = start.width + dx;
+  if (handle.includes('s') || handle === 's') next.height = start.height + dy;
+  if (handle.includes('w') || handle === 'w') {
+    next.x = start.x + dx;
+    next.width = start.width - dx;
+  }
+  if (handle.includes('n') || handle === 'n') {
+    next.y = start.y + dy;
+    next.height = start.height - dy;
+  }
+
+  if (aspect) {
+    if (handle === 'se') {
+      next = applyAspectFromFixedCorner(next, nw, Math.abs(dx) >= Math.abs(dy));
+      next.x = nw.x;
+      next.y = nw.y;
+    } else if (handle === 'nw') {
+      next = applyAspectFromFixedCorner(next, se, Math.abs(dx) >= Math.abs(dy));
+      next.x = se.x - next.width;
+      next.y = se.y - next.height;
+    } else if (handle === 'ne') {
+      const fixed = { x: start.x, y: se.y };
+      next = applyAspectFromFixedCorner(next, fixed, Math.abs(dx) >= Math.abs(dy));
+      next.x = start.x;
+      next.y = se.y - next.height;
+    } else if (handle === 'sw') {
+      const fixed = { x: se.x, y: start.y };
+      next = applyAspectFromFixedCorner(next, fixed, Math.abs(dx) >= Math.abs(dy));
+      next.x = se.x - next.width;
+      next.y = start.y;
+    }
+  }
+
+  emit('update:crop', clampCrop(next, props.imageWidth, props.imageHeight));
+}
+
+function endDrag(event: PointerEvent) {
+  if (!drag || event.pointerId !== drag.pointerId) return;
+  drag = null;
+  bindWindow(false);
+}
+
+onBeforeUnmount(() => bindWindow(false));
+</script>
+
+<template>
+  <div class="crop">
+    <img :src="src" alt="편집할 이미지" draggable="false" />
+    <div class="crop__shade" aria-hidden="true" />
+    <div
+      class="crop__box"
+      :style="boxStyle"
+      @pointerdown="beginDrag('move', $event)"
+    >
+      <span
+        v-for="handle in handles"
+        :key="handle"
+        class="crop__handle"
+        :class="`crop__handle--${handle}`"
+        @pointerdown="beginDrag(handle, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.crop {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+
+.crop img {
+  display: block;
+  max-width: 100%;
+  max-height: min(70vh, 44rem);
+  width: auto;
+  height: auto;
+}
+
+.crop__shade {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.crop__box {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--accent);
+  box-shadow: 0 0 0 9999px rgb(0 0 0 / 42%);
+  cursor: move;
+}
+
+.crop__handle {
+  position: absolute;
+  width: 0.8rem;
+  height: 0.8rem;
+  background: var(--surface);
+  border: 2px solid var(--accent);
+  border-radius: 1px;
+  box-sizing: border-box;
+}
+
+.crop__handle--nw {
+  left: -0.4rem;
+  top: -0.4rem;
+  cursor: nwse-resize;
+}
+.crop__handle--ne {
+  right: -0.4rem;
+  top: -0.4rem;
+  cursor: nesw-resize;
+}
+.crop__handle--se {
+  right: -0.4rem;
+  bottom: -0.4rem;
+  cursor: nwse-resize;
+}
+.crop__handle--sw {
+  left: -0.4rem;
+  bottom: -0.4rem;
+  cursor: nesw-resize;
+}
+.crop__handle--n {
+  left: 50%;
+  top: -0.4rem;
+  transform: translateX(-50%);
+  cursor: ns-resize;
+}
+.crop__handle--s {
+  left: 50%;
+  bottom: -0.4rem;
+  transform: translateX(-50%);
+  cursor: ns-resize;
+}
+.crop__handle--e {
+  right: -0.4rem;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: ew-resize;
+}
+.crop__handle--w {
+  left: -0.4rem;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: ew-resize;
+}
+</style>
diff --git a/packages/frontend/src/config/favicons.ts b/packages/frontend/src/config/favicons.ts
index 329df25..cdd2b4e 100644
--- a/packages/frontend/src/config/favicons.ts
+++ b/packages/frontend/src/config/favicons.ts
@@ -22,6 +22,7 @@ export type FaviconKind =
   | 'photoshop'
   | 'scanner'
   | 'bgremove'
+  | 'imgedit'
   | 'text'
   | 'csv'
   | 'file';
@@ -51,6 +52,9 @@ export const ICON_PATHS: Record<FaviconKind, string> = {
   scanner: 'M4 4H10V6H6V10H4V4M14 4H20V10H18V6H14V4M4 14H6V18H10V20H4V14M18 14H20V20H14V18H18V14M8 8H16V16H8V8Z',
   bgremove:
     'M19.36,2.72L20.78,4.14L15.06,9.85C16.13,11.39 16.28,13.24 15.38,14.44L9.06,8.12C10.26,7.22 12.11,7.37 13.65,8.44L19.36,2.72M5.93,17.57C3.92,15.56 2.69,13.16 2.35,10.92L7.23,8.83L14.67,16.27L12.58,21.15C10.34,20.81 7.94,19.58 5.93,17.57Z',
+  /** mdi:crop */
+  imgedit:
+    'M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17H19V7H7V17M17,17H7V7H17V17Z',
   text: 'M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z',
   csv: 'M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2M18 20H6V4H13V9H18V20M10 19L12 15H9V10H15V15L13 19H10',
   file: 'M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z',
@@ -91,6 +95,7 @@ export const ICON_COLORS: Record<FaviconKind, string> = {
   photoshop: '#31a8ff',
   scanner: '#00897b',
   bgremove: '#5c6bc0',
+  imgedit: '#c2185b',
   text: '#607d8b',
   csv: '#00838f',
   file: '#546e7a',
@@ -153,6 +158,7 @@ const EXT_KIND: Record<string, FaviconKind> = {
   gif: 'scanner',
   bmp: 'scanner',
   bgremove: 'bgremove',
+  imgedit: 'imgedit',
   txt: 'text',
 };
 
diff --git a/packages/frontend/src/integrations/imageedit/process.ts b/packages/frontend/src/integrations/imageedit/process.ts
new file mode 100644
index 0000000..63f1e72
--- /dev/null
+++ b/packages/frontend/src/integrations/imageedit/process.ts
@@ -0,0 +1,272 @@
+export type PixelRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type ExportFormat = 'image/jpeg' | 'image/webp' | 'image/png';
+
+export type RatioFit = 'crop' | 'pad';
+
+const MIN_CROP = 8;
+
+export function loadImageFromUrl(url: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.decoding = 'async';
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('이미지를 불러오지 못했습니다.'));
+    image.src = url;
+  });
+}
+
+export function clampCrop(
+  crop: PixelRect,
+  imageWidth: number,
+  imageHeight: number,
+): PixelRect {
+  const maxW = Math.max(1, Math.floor(imageWidth));
+  const maxH = Math.max(1, Math.floor(imageHeight));
+  const width = Math.min(Math.max(MIN_CROP, Math.round(crop.width)), maxW);
+  const height = Math.min(Math.max(MIN_CROP, Math.round(crop.height)), maxH);
+  const x = Math.min(Math.max(0, Math.round(crop.x)), maxW - width);
+  const y = Math.min(Math.max(0, Math.round(crop.y)), maxH - height);
+  return { x, y, width, height };
+}
+
+export function fullImageCrop(imageWidth: number, imageHeight: number): PixelRect {
+  return clampCrop(
+    { x: 0, y: 0, width: imageWidth, height: imageHeight },
+    imageWidth,
+    imageHeight,
+  );
+}
+
+/** Largest rectangle of `aspect` (width/height) that fits in the image. */
+export function maxCropForAspect(
+  imageWidth: number,
+  imageHeight: number,
+  aspect: number,
+  center?: { x: number; y: number },
+): PixelRect {
+  if (!(aspect > 0) || !Number.isFinite(aspect)) {
+    return fullImageCrop(imageWidth, imageHeight);
+  }
+  let width = imageWidth;
+  let height = width / aspect;
+  if (height > imageHeight) {
+    height = imageHeight;
+    width = height * aspect;
+  }
+  const cx = center?.x ?? imageWidth / 2;
+  const cy = center?.y ?? imageHeight / 2;
+  return clampCrop(
+    { x: cx - width / 2, y: cy - height / 2, width, height },
+    imageWidth,
+    imageHeight,
+  );
+}
+
+export function formatBytes(bytes: number) {
+  if (!Number.isFinite(bytes) || bytes < 0) return '—';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+export function extensionForFormat(format: ExportFormat) {
+  if (format === 'image/jpeg') return 'jpg';
+  if (format === 'image/webp') return 'webp';
+  return 'png';
+}
+
+function outputSize(
+  srcWidth: number,
+  srcHeight: number,
+  scale: number,
+  maxEdge: number | null,
+  padAspect: number | null,
+) {
+  let width = Math.max(1, srcWidth);
+  let height = Math.max(1, srcHeight);
+
+  if (padAspect && padAspect > 0) {
+    const current = width / height;
+    if (current < padAspect) {
+      width = height * padAspect;
+    } else if (current > padAspect) {
+      height = width / padAspect;
+    }
+  }
+
+  const factor = Math.min(1, Math.max(0.01, scale));
+  width *= factor;
+  height *= factor;
+
+  if (maxEdge && maxEdge > 0) {
+    const long = Math.max(width, height);
+    if (long > maxEdge) {
+      const shrink = maxEdge / long;
+      width *= shrink;
+      height *= shrink;
+    }
+  }
+
+  return {
+    width: Math.max(1, Math.round(width)),
+    height: Math.max(1, Math.round(height)),
+  };
+}
+
+export function previewOutputSize(options: {
+  crop: PixelRect;
+  scale: number;
+  maxEdge: number | null;
+  padAspect: number | null;
+  fit: RatioFit;
+}) {
+  const padAspect = options.fit === 'pad' ? options.padAspect : null;
+  return outputSize(
+    options.crop.width,
+    options.crop.height,
+    options.scale,
+    options.maxEdge,
+    padAspect,
+  );
+}
+
+function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  format: ExportFormat,
+  quality: number,
+) {
+  return new Promise<Blob>((resolve, reject) => {
+    const q = format === 'image/png' ? undefined : Math.min(1, Math.max(0.01, quality));
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error('이미지를 인코딩하지 못했습니다.'));
+          return;
+        }
+        resolve(blob);
+      },
+      format,
+      q,
+    );
+  });
+}
+
+function parseCssColor(color: string): { r: number; g: number; b: number } {
+  const hex = color.trim();
+  const short = /^#([0-9a-f]{3})$/i.exec(hex);
+  if (short) {
+    const n = short[1];
+    return {
+      r: Number.parseInt(n[0] + n[0], 16),
+      g: Number.parseInt(n[1] + n[1], 16),
+      b: Number.parseInt(n[2] + n[2], 16),
+    };
+  }
+  const full = /^#([0-9a-f]{6})$/i.exec(hex);
+  if (full) {
+    const n = full[1];
+    return {
+      r: Number.parseInt(n.slice(0, 2), 16),
+      g: Number.parseInt(n.slice(2, 4), 16),
+      b: Number.parseInt(n.slice(4, 6), 16),
+    };
+  }
+  return { r: 255, g: 255, b: 255 };
+}
+
+export async function exportEditedImage(options: {
+  image: HTMLImageElement;
+  crop: PixelRect;
+  scale: number;
+  maxEdge: number | null;
+  format: ExportFormat;
+  quality: number;
+  fit: RatioFit;
+  padAspect: number | null;
+  padColor: string;
+}): Promise<{ blob: Blob; width: number; height: number }> {
+  const crop = clampCrop(
+    options.crop,
+    options.image.naturalWidth || options.image.width,
+    options.image.naturalHeight || options.image.height,
+  );
+  const padAspect =
+    options.fit === 'pad' && options.padAspect && options.padAspect > 0
+      ? options.padAspect
+      : null;
+  const size = outputSize(
+    crop.width,
+    crop.height,
+    options.scale,
+    options.maxEdge,
+    padAspect,
+  );
+
+  const canvas = document.createElement('canvas');
+  canvas.width = size.width;
+  canvas.height = size.height;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('캔버스를 만들 수 없습니다.');
+
+  if (options.format === 'image/jpeg' || padAspect) {
+    const { r, g, b } = parseCssColor(options.padColor);
+    ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+    ctx.fillRect(0, 0, size.width, size.height);
+  } else {
+    ctx.clearRect(0, 0, size.width, size.height);
+  }
+
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+
+  if (padAspect) {
+    const fitted = containSize(crop.width, crop.height, size.width, size.height);
+    const dx = Math.round((size.width - fitted.width) / 2);
+    const dy = Math.round((size.height - fitted.height) / 2);
+    ctx.drawImage(
+      options.image,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      dx,
+      dy,
+      fitted.width,
+      fitted.height,
+    );
+  } else {
+    ctx.drawImage(
+      options.image,
+      crop.x,
+      crop.y,
+      crop.width,
+      crop.height,
+      0,
+      0,
+      size.width,
+      size.height,
+    );
+  }
+
+  const blob = await canvasToBlob(canvas, options.format, options.quality);
+  return { blob, width: size.width, height: size.height };
+}
+
+function containSize(
+  srcW: number,
+  srcH: number,
+  boxW: number,
+  boxH: number,
+) {
+  const scale = Math.min(boxW / srcW, boxH / srcH);
+  return {
+    width: Math.max(1, Math.round(srcW * scale)),
+    height: Math.max(1, Math.round(srcH * scale)),
+  };
+}
diff --git a/packages/frontend/src/router/index.ts b/packages/frontend/src/router/index.ts
index e675127..4a69b7f 100644
--- a/packages/frontend/src/router/index.ts
+++ b/packages/frontend/src/router/index.ts
@@ -64,6 +64,11 @@ const router = createRouter({
       name: 'tools-bg-remove',
       component: () => import('@/views/ToolsBgRemoveView.vue'),
     },
+    {
+      path: '/tools/image-edit',
+      name: 'tools-image-edit',
+      component: () => import('@/views/ToolsImageEditView.vue'),
+    },
     {
       path: '/licenses',
       name: 'licenses',
diff --git a/packages/frontend/src/views/HomeView.vue b/packages/frontend/src/views/HomeView.vue
index a384ee5..6f3c1b9 100644
--- a/packages/frontend/src/views/HomeView.vue
+++ b/packages/frontend/src/views/HomeView.vue
@@ -87,6 +87,12 @@ const toolTypes = [
     title: '배경 제거',
     subtitle: '로고 단색 배경 · 투명 PNG',
   },
+  {
+    route: 'tools-image-edit',
+    extension: 'imgedit',
+    title: '이미지 편집',
+    subtitle: '크롭 · 축소 · 경량화 · 비율',
+  },
 ] as const;
 
 function onDrop(e: DragEvent) {
@@ -225,7 +231,7 @@ function onOpenTool(route: string) {
       <section class="section">
         <h2 class="section__title">도구</h2>
         <p class="section__lead">
-          브라우저에서 문서를 스캔·보정하고 OCR이 포함된 PDF로 저장합니다.
+          브라우저에서 문서를 스캔하고, 배경을 제거하며, 이미지를 크롭·축소·경량화합니다.
         </p>
 
         <div class="grid">
diff --git a/packages/frontend/src/views/ToolsImageEditView.vue b/packages/frontend/src/views/ToolsImageEditView.vue
new file mode 100644
index 0000000..6f4441f
--- /dev/null
+++ b/packages/frontend/src/views/ToolsImageEditView.vue
@@ -0,0 +1,860 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import AppShell from '@/components/AppShell.vue';
+import EditorToolbar from '@/components/EditorToolbar.vue';
+import CropEditor from '@/components/imageedit/CropEditor.vue';
+import { useFileDropZone } from '@/composables/useFileDropZone';
+import { usePageTitle } from '@/composables/usePageTitle';
+import {
+  exportEditedImage,
+  extensionForFormat,
+  formatBytes,
+  fullImageCrop,
+  loadImageFromUrl,
+  maxCropForAspect,
+  previewOutputSize,
+  type ExportFormat,
+  type PixelRect,
+  type RatioFit,
+} from '@/integrations/imageedit/process';
+import { downloadBlob } from '@/utils/downloadBlob';
+
+defineOptions({ name: 'ToolsImageEditView' });
+
+const RATIO_PRESETS = [
+  { id: 'free', label: '자유', aspect: null as number | null },
+  { id: 'orig', label: '원본', aspect: -1 },
+  { id: '1:1', label: '1:1', aspect: 1 },
+  { id: '4:3', label: '4:3', aspect: 4 / 3 },
+  { id: '3:2', label: '3:2', aspect: 3 / 2 },
+  { id: '16:9', label: '16:9', aspect: 16 / 9 },
+  { id: '3:4', label: '3:4', aspect: 3 / 4 },
+  { id: '9:16', label: '9:16', aspect: 9 / 16 },
+] as const;
+
+const MAX_EDGE_PRESETS = [
+  { id: '', label: '제한 없음' },
+  { id: '1920', label: '긴 변 1920px' },
+  { id: '1280', label: '긴 변 1280px' },
+  { id: '800', label: '긴 변 800px' },
+] as const;
+
+const router = useRouter();
+const fileInput = ref<HTMLInputElement | null>(null);
+const filename = ref('이미지 편집');
+const sourceUrl = ref<string | null>(null);
+const sourceSize = ref(0);
+const imageWidth = ref(0);
+const imageHeight = ref(0);
+const loadedImage = ref<HTMLImageElement | null>(null);
+const crop = ref<PixelRect>({ x: 0, y: 0, width: 1, height: 1 });
+const ratioId = ref<(typeof RATIO_PRESETS)[number]['id']>('free');
+const fit = ref<RatioFit>('crop');
+const scalePercent = ref(100);
+const maxEdgeId = ref('');
+const format = ref<ExportFormat>('image/jpeg');
+const quality = ref(80);
+const padColor = ref('#ffffff');
+const busy = ref(false);
+const error = ref('');
+const notice = ref('');
+const imageUrlInput = ref('');
+const estimateBytes = ref<number | null>(null);
+const estimateBusy = ref(false);
+
+usePageTitle(filename, { faviconKind: 'imgedit' });
+
+const hasImage = computed(() => Boolean(sourceUrl.value && loadedImage.value));
+
+const originalAspect = computed(() =>
+  imageHeight.value ? imageWidth.value / imageHeight.value : 1,
+);
+
+const cropAspect = computed(() => {
+  const preset = RATIO_PRESETS.find((item) => item.id === ratioId.value);
+  if (!preset || preset.id === 'free') return null;
+  if (preset.id === 'orig') return originalAspect.value;
+  return preset.aspect;
+});
+
+const maxEdge = computed(() => {
+  const n = Number(maxEdgeId.value);
+  return n > 0 ? n : null;
+});
+
+const outputHint = computed(() =>
+  previewOutputSize({
+    crop: crop.value,
+    scale: scalePercent.value / 100,
+    maxEdge: maxEdge.value,
+    padAspect: cropAspect.value,
+    fit: fit.value,
+  }),
+);
+
+const qualityDisabled = computed(() => format.value === 'image/png');
+
+function revoke(url: string | null) {
+  if (url?.startsWith('blob:')) URL.revokeObjectURL(url);
+}
+
+function baseName(name = filename.value) {
+  return name.replace(/\.[^.]+$/, '') || 'image';
+}
+
+function onClose() {
+  void router.push({ name: 'home' });
+}
+
+function onOpen() {
+  fileInput.value?.click();
+}
+
+function isImageFile(file: File) {
+  if (file.type.startsWith('image/')) return true;
+  return /\.(png|jpe?g|webp|gif|bmp|svg)$/i.test(file.name);
+}
+
+async function loadFile(file: File) {
+  if (!isImageFile(file)) {
+    error.value = 'PNG, JPEG, WebP, GIF, BMP, SVG 이미지를 선택해 주세요.';
+    return;
+  }
+  error.value = '';
+  notice.value = '';
+  estimateBytes.value = null;
+  const url = URL.createObjectURL(file);
+  try {
+    const image = await loadImageFromUrl(url);
+    revoke(sourceUrl.value);
+    sourceUrl.value = url;
+    loadedImage.value = image;
+    sourceSize.value = file.size;
+    filename.value = file.name;
+    imageWidth.value = image.naturalWidth || image.width;
+    imageHeight.value = image.naturalHeight || image.height;
+    ratioId.value = 'free';
+    fit.value = 'crop';
+    scalePercent.value = 100;
+    maxEdgeId.value = '';
+    crop.value = fullImageCrop(imageWidth.value, imageHeight.value);
+    notice.value = `${imageWidth.value}×${imageHeight.value} · ${formatBytes(file.size)}`;
+  } catch (reason) {
+    revoke(url);
+    error.value =
+      reason instanceof Error ? reason.message : '이미지를 열지 못했습니다.';
+  }
+}
+
+async function loadFromUrl(raw = imageUrlInput.value) {
+  const trimmed = raw.trim();
+  if (!trimmed) {
+    error.value = '이미지 URL을 입력해 주세요.';
+    return;
+  }
+  let parsed: URL;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    error.value = '올바른 이미지 URL을 입력해 주세요.';
+    return;
+  }
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+    error.value = 'http(s) URL만 사용할 수 있습니다.';
+    return;
+  }
+
+  busy.value = true;
+  error.value = '';
+  try {
+    const response = await fetch(parsed.href, { mode: 'cors' });
+    if (!response.ok) {
+      throw new Error(`이미지를 가져오지 못했습니다 (${response.status}).`);
+    }
+    const blob = await response.blob();
+    const looksImage =
+      blob.type.startsWith('image/') ||
+      /\.(png|jpe?g|webp|gif|bmp|svg)(\?|$)/i.test(parsed.pathname);
+    if (!looksImage) {
+      throw new Error('응답이 이미지가 아닙니다.');
+    }
+    const leaf = decodeURIComponent(
+      parsed.pathname.split('/').filter(Boolean).pop() || 'image',
+    );
+    const name = /\.[a-z0-9]+$/i.test(leaf) ? leaf : `${leaf}.png`;
+    const file = new File([blob], name, {
+      type: blob.type || 'image/png',
+    });
+    imageUrlInput.value = parsed.href;
+    await loadFile(file);
+  } catch (reason) {
+    const message =
+      reason instanceof Error ? reason.message : 'URL에서 이미지를 불러오지 못했습니다.';
+    error.value = /Failed to fetch|NetworkError|CORS/i.test(message)
+      ? '이미지를 가져오지 못했습니다. CORS를 허용하는 URL인지 확인해 주세요.'
+      : message;
+  } finally {
+    busy.value = false;
+  }
+}
+
+function onFilesSelected(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) void loadFile(file);
+}
+
+const {
+  dropActive,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  onDrop: onZoneDrop,
+} = useFileDropZone((files) => {
+  const file = files[0];
+  if (file) void loadFile(file);
+});
+
+function resetCrop() {
+  if (!imageWidth.value) return;
+  if (fit.value === 'crop' && cropAspect.value) {
+    crop.value = maxCropForAspect(
+      imageWidth.value,
+      imageHeight.value,
+      cropAspect.value,
+    );
+  } else {
+    crop.value = fullImageCrop(imageWidth.value, imageHeight.value);
+  }
+}
+
+watch(ratioId, () => {
+  if (!hasImage.value) return;
+  if (fit.value === 'crop' && cropAspect.value) {
+    const center = {
+      x: crop.value.x + crop.value.width / 2,
+      y: crop.value.y + crop.value.height / 2,
+    };
+    crop.value = maxCropForAspect(
+      imageWidth.value,
+      imageHeight.value,
+      cropAspect.value,
+      center,
+    );
+  }
+});
+
+watch(fit, (next) => {
+  if (next === 'crop' && cropAspect.value && hasImage.value) {
+    crop.value = maxCropForAspect(
+      imageWidth.value,
+      imageHeight.value,
+      cropAspect.value,
+      {
+        x: crop.value.x + crop.value.width / 2,
+        y: crop.value.y + crop.value.height / 2,
+      },
+    );
+  }
+});
+
+let estimateTimer = 0;
+let estimateGen = 0;
+
+watch(
+  [
+    crop,
+    scalePercent,
+    maxEdgeId,
+    format,
+    quality,
+    fit,
+    ratioId,
+    padColor,
+    loadedImage,
+  ],
+  () => {
+    window.clearTimeout(estimateTimer);
+    if (!loadedImage.value) {
+      estimateBytes.value = null;
+      return;
+    }
+    estimateTimer = window.setTimeout(() => {
+      void refreshEstimate();
+    }, 350);
+  },
+  { deep: true },
+);
+
+async function refreshEstimate() {
+  const image = loadedImage.value;
+  if (!image) return;
+  const gen = ++estimateGen;
+  estimateBusy.value = true;
+  try {
+    const result = await exportEditedImage({
+      image,
+      crop: crop.value,
+      scale: scalePercent.value / 100,
+      maxEdge: maxEdge.value,
+      format: format.value,
+      quality: quality.value / 100,
+      fit: fit.value,
+      padAspect: cropAspect.value,
+      padColor: padColor.value,
+    });
+    if (gen !== estimateGen) return;
+    estimateBytes.value = result.blob.size;
+  } catch {
+    if (gen !== estimateGen) return;
+    estimateBytes.value = null;
+  } finally {
+    if (gen === estimateGen) estimateBusy.value = false;
+  }
+}
+
+async function saveImage() {
+  const image = loadedImage.value;
+  if (!image) return;
+  busy.value = true;
+  error.value = '';
+  try {
+    const result = await exportEditedImage({
+      image,
+      crop: crop.value,
+      scale: scalePercent.value / 100,
+      maxEdge: maxEdge.value,
+      format: format.value,
+      quality: quality.value / 100,
+      fit: fit.value,
+      padAspect: cropAspect.value,
+      padColor: padColor.value,
+    });
+    const ext = extensionForFormat(format.value);
+    downloadBlob(result.blob, `${baseName()}-edited.${ext}`);
+    notice.value = `${result.width}×${result.height} · ${formatBytes(result.blob.size)} 저장`;
+  } catch (reason) {
+    error.value =
+      reason instanceof Error ? reason.message : '이미지를 저장하지 못했습니다.';
+  } finally {
+    busy.value = false;
+  }
+}
+
+onBeforeUnmount(() => {
+  window.clearTimeout(estimateTimer);
+  estimateGen += 1;
+  revoke(sourceUrl.value);
+});
+</script>
+
+<template>
+  <AppShell :editor="true">
+    <div
+      class="edit-page"
+      :class="{ 'is-drop-active': dropActive }"
+      @dragenter="onDragEnter"
+      @dragover="onDragOver"
+      @dragleave="onDragLeave"
+      @drop="onZoneDrop"
+    >
+      <EditorToolbar
+        :filename="filename"
+        :show-save="hasImage"
+        save-label="다운로드"
+        :busy="busy"
+        @open="onOpen"
+        @save="void saveImage()"
+        @close="onClose"
+      />
+      <input
+        ref="fileInput"
+        class="sr-only"
+        type="file"
+        accept="image/png,image/jpeg,image/webp,image/gif,image/bmp,image/svg+xml,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg"
+        @change="onFilesSelected"
+      />
+
+      <p v-if="error" class="viewer-message viewer-message--error" role="alert">
+        {{ error }}
+      </p>
+      <p v-else-if="notice" class="viewer-message">{{ notice }}</p>
+
+      <main class="workspace">
+        <div
+          v-if="!hasImage"
+          class="empty"
+          :class="{ 'is-drop-active': dropActive }"
+        >
+          <strong>이미지 편집</strong>
+          <p>
+            사진을 열거나 끌어다 놓은 뒤 크롭, 축소, 경량화, 비율 변경을 적용해
+            JPEG·WebP·PNG로 저장합니다. 서버에 업로드하지 않습니다.
+          </p>
+          <button
+            type="button"
+            class="btn-primary"
+            :disabled="busy"
+            @click="onOpen"
+          >
+            이미지 열기
+          </button>
+          <form class="url-form" @submit.prevent="void loadFromUrl()">
+            <input
+              v-model="imageUrlInput"
+              type="url"
+              inputmode="url"
+              placeholder="https://example.com/photo.jpg"
+              :disabled="busy"
+              aria-label="이미지 URL"
+            />
+            <button type="submit" :disabled="busy">URL 불러오기</button>
+          </form>
+        </div>
+
+        <template v-else>
+          <div class="layout">
+            <aside class="controls">
+              <form
+                class="url-form url-form--stack"
+                @submit.prevent="void loadFromUrl()"
+              >
+                <input
+                  v-model="imageUrlInput"
+                  type="url"
+                  inputmode="url"
+                  placeholder="이미지 URL"
+                  :disabled="busy"
+                  aria-label="이미지 URL"
+                />
+                <button type="submit" :disabled="busy">URL</button>
+              </form>
+
+              <section class="group">
+                <h2>크롭</h2>
+                <p class="hint">
+                  영역을 드래그해 자르세요. {{ crop.width }}×{{ crop.height }}px
+                </p>
+                <button type="button" class="btn-ghost" @click="resetCrop">
+                  영역 초기화
+                </button>
+              </section>
+
+              <section class="group">
+                <h2>비율 변경</h2>
+                <div class="chips" role="list">
+                  <button
+                    v-for="preset in RATIO_PRESETS"
+                    :key="preset.id"
+                    type="button"
+                    class="chip"
+                    :aria-pressed="ratioId === preset.id"
+                    @click="ratioId = preset.id"
+                  >
+                    {{ preset.label }}
+                  </button>
+                </div>
+                <label class="field field--inline">
+                  <span>맞추는 방법</span>
+                  <select v-model="fit" :disabled="!cropAspect">
+                    <option value="crop">잘라내기</option>
+                    <option value="pad">여백 추가</option>
+                  </select>
+                </label>
+                <label v-if="fit === 'pad' && cropAspect" class="field field--inline">
+                  <span>여백 색</span>
+                  <input v-model="padColor" type="color" />
+                </label>
+              </section>
+
+              <section class="group">
+                <h2>축소</h2>
+                <label class="field">
+                  <span class="field__row">
+                    배율
+                    <em>{{ scalePercent }}%</em>
+                  </span>
+                  <input
+                    v-model.number="scalePercent"
+                    type="range"
+                    min="10"
+                    max="100"
+                    step="1"
+                  />
+                </label>
+                <label class="field field--inline">
+                  <span>최대 크기</span>
+                  <select v-model="maxEdgeId">
+                    <option
+                      v-for="preset in MAX_EDGE_PRESETS"
+                      :key="preset.id"
+                      :value="preset.id"
+                    >
+                      {{ preset.label }}
+                    </option>
+                  </select>
+                </label>
+              </section>
+
+              <section class="group">
+                <h2>경량화</h2>
+                <label class="field field--inline">
+                  <span>형식</span>
+                  <select v-model="format">
+                    <option value="image/jpeg">JPEG</option>
+                    <option value="image/webp">WebP</option>
+                    <option value="image/png">PNG (무손실)</option>
+                  </select>
+                </label>
+                <label class="field">
+                  <span class="field__row">
+                    품질
+                    <em>{{ qualityDisabled ? '해당 없음' : quality }}</em>
+                  </span>
+                  <input
+                    v-model.number="quality"
+                    type="range"
+                    min="10"
+                    max="100"
+                    step="1"
+                    :disabled="qualityDisabled"
+                  />
+                </label>
+              </section>
+
+              <section class="group group--stat">
+                <p>
+                  출력
+                  <strong
+                    >{{ outputHint.width }}×{{ outputHint.height }}</strong
+                  >
+                </p>
+                <p>
+                  용량
+                  <strong v-if="estimateBytes != null">{{
+                    formatBytes(estimateBytes)
+                  }}</strong>
+                  <strong v-else-if="estimateBusy">계산 중…</strong>
+                  <strong v-else>—</strong>
+                  <span v-if="sourceSize" class="muted">
+                    / 원본 {{ formatBytes(sourceSize) }}
+                  </span>
+                </p>
+              </section>
+
+              <button
+                type="button"
+                class="btn-primary"
+                :disabled="busy"
+                @click="void saveImage()"
+              >
+                다운로드
+              </button>
+            </aside>
+
+            <div class="stage">
+              <CropEditor
+                v-if="sourceUrl"
+                :src="sourceUrl"
+                :crop="crop"
+                :image-width="imageWidth"
+                :image-height="imageHeight"
+                :aspect="fit === 'crop' ? cropAspect : null"
+                @update:crop="crop = $event"
+              />
+            </div>
+          </div>
+        </template>
+
+        <div
+          v-if="dropActive && hasImage"
+          class="drop-overlay"
+          aria-hidden="true"
+        >
+          이미지를 놓아 바꾸기
+        </div>
+      </main>
+    </div>
+  </AppShell>
+</template>
+
+<style scoped>
+.edit-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  background: var(--canvas);
+}
+
+.workspace {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 0.85rem;
+}
+
+.empty {
+  height: 100%;
+  min-height: min(60vh, 28rem);
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: 0.75rem;
+  text-align: center;
+  color: var(--ink);
+  border: 1px dashed transparent;
+  border-radius: 6px;
+  padding: 1.25rem;
+}
+
+.empty.is-drop-active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.empty p {
+  margin: 0;
+  max-width: 28rem;
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
+  gap: 0.85rem;
+  align-items: start;
+}
+
+.controls {
+  display: grid;
+  gap: 0.85rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+}
+
+.group {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.group h2 {
+  margin: 0;
+  font-size: 0.86rem;
+}
+
+.hint,
+.muted {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.group--stat p {
+  margin: 0;
+  font-size: 0.86rem;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.chip {
+  min-height: 2rem;
+  padding: 0.2rem 0.55rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--canvas);
+  color: var(--ink);
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.chip[aria-pressed='true'] {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  font-weight: 650;
+}
+
+.field {
+  display: grid;
+  gap: 0.3rem;
+  font-size: 0.86rem;
+}
+
+.field--inline {
+  grid-template-columns: 5.5rem minmax(0, 1fr);
+  align-items: center;
+}
+
+.field__row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.field__row em {
+  font-style: normal;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+}
+
+.field select,
+.field input[type='range'],
+.field input[type='color'] {
+  width: 100%;
+  accent-color: var(--accent);
+}
+
+.field select {
+  min-height: 2.25rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.3rem 0.45rem;
+  background: var(--canvas);
+  color: var(--ink);
+  font: inherit;
+}
+
+.field input[type='color'] {
+  min-height: 2.25rem;
+  padding: 0.15rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--canvas);
+}
+
+.btn-primary,
+.btn-ghost {
+  min-height: 2.5rem;
+  border-radius: 4px;
+  padding: 0.4rem 0.9rem;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-primary {
+  border: 1px solid var(--accent);
+  background: var(--accent-soft);
+  color: var(--ink);
+}
+
+.btn-ghost {
+  justify-self: start;
+  min-height: 2.1rem;
+  border: 1px solid var(--border);
+  background: var(--canvas);
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.url-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  width: min(100%, 28rem);
+}
+
+.url-form--stack {
+  width: auto;
+}
+
+.url-form input {
+  flex: 1 1 12rem;
+  min-height: 2.5rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.35rem 0.55rem;
+  background: var(--canvas);
+  color: var(--ink);
+  font: inherit;
+}
+
+.url-form button {
+  min-height: 2.5rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.35rem 0.75rem;
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+
+.url-form button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.stage {
+  min-width: 0;
+  overflow: auto;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+}
+
+.drop-overlay {
+  position: absolute;
+  inset: 0.75rem;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  border: 2px dashed var(--accent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--accent-soft) 88%, transparent);
+  color: var(--ink);
+  font-weight: 650;
+  pointer-events: none;
+}
+
+.viewer-message {
+  margin: 0;
+  padding: 0.45rem 0.85rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 0.86rem;
+}
+
+.viewer-message--error {
+  color: #b42318;
+  background: color-mix(in srgb, #b42318 10%, var(--surface));
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/packages/frontend/src/views/ToolsScannerView.vue b/packages/frontend/src/views/ToolsScannerView.vue
index f34560f..10b5ce0 100644
--- a/packages/frontend/src/views/ToolsScannerView.vue
+++ b/packages/frontend/src/views/ToolsScannerView.vue
@@ -56,6 +56,9 @@ const coarsePointer = ref(false);
 const mobilePane = ref<'edit' | 'preview'>('edit');
 const queueOpen = ref(false);
 const settingsOpen = ref(false);
+const warpPromptOpen = ref(false);
+/** `열기` replaces the queue; `파일 추가`/카메라/드롭은 뒤에 덧붙입니다. */
+const replaceOnSelect = ref(false);
 const mediaQueryCleanups: Array<() => void> = [];
 
 function refreshPointerMode() {
@@ -72,7 +75,9 @@ function refreshPointerMode() {
 function syncBodyScrollLock() {
   if (typeof document === 'undefined') return;
   document.body.style.overflow =
-    queueOpen.value || settingsOpen.value ? 'hidden' : '';
+    queueOpen.value || settingsOpen.value || warpPromptOpen.value
+      ? 'hidden'
+      : '';
 }
 
 usePageTitle(filename, { faviconKind: 'scanner' });
@@ -119,7 +124,7 @@ async function pushPageFromSource(
     sourceWidth: w,
     sourceHeight: h,
     corners,
-    aspect: 'a4-portrait',
+    aspect: 'auto',
     scanIntensity: DEFAULT_SCAN_INTENSITY,
     warpedUrl: null,
     warpedWidth: 0,
@@ -131,13 +136,14 @@ async function pushPageFromSource(
   filename.value = name;
 }
 
-async function addFiles(files: File[]) {
+async function addFiles(files: File[], replace = false) {
   const images = files.filter(isScannerImageFile);
   const pdfs = files.filter(isPdfFile);
   if (!images.length && !pdfs.length) {
     error.value = 'PNG, JPEG, WebP 이미지 또는 PDF를 선택해 주세요.';
     return;
   }
+  if (replace) clearPages();
   error.value = '';
   busy.value = true;
   progressLabel.value = '파일 준비 중';
@@ -167,9 +173,10 @@ async function addFiles(files: File[]) {
       }
     }
 
+    const verb = replace ? '열었습니다' : '추가했습니다';
     notice.value = coarsePointer.value
-      ? `${added}장을 추가했습니다. 화살표로 순서를 바꿀 수 있습니다.`
-      : `${added}장을 추가했습니다. 드래그로 순서를 바꿀 수 있습니다.`;
+      ? `${added}장을 ${verb}. 화살표로 순서를 바꿀 수 있습니다.`
+      : `${added}장을 ${verb}. 드래그로 순서를 바꿀 수 있습니다.`;
   } catch (reason) {
     error.value =
       reason instanceof Error
@@ -227,7 +234,7 @@ watch(activePage, (page) => {
   if (page) filename.value = page.name;
 });
 
-watch([queueOpen, settingsOpen], () => {
+watch([queueOpen, settingsOpen, warpPromptOpen], () => {
   syncBodyScrollLock();
 });
 
@@ -237,23 +244,46 @@ watch(
     if (!count) {
       queueOpen.value = false;
       settingsOpen.value = false;
+      warpPromptOpen.value = false;
     }
   },
 );
 
+function clearPages() {
+  for (const page of pages.value) {
+    revokeUrl(page.sourceUrl);
+    revokeUrl(page.warpedUrl);
+  }
+  pages.value = [];
+  activeId.value = null;
+  filename.value = '문서 스캔';
+  mobilePane.value = 'edit';
+  warpPromptOpen.value = false;
+}
+
+/** Toolbar `열기`: discards the current queue and starts over. */
 function onOpen() {
+  replaceOnSelect.value = true;
+  fileInput.value?.click();
+}
+
+function onAddFiles() {
+  replaceOnSelect.value = false;
   fileInput.value?.click();
 }
 
 function onCamera() {
+  replaceOnSelect.value = false;
   cameraInput.value?.click();
 }
 
 function onFilesSelected(event: Event) {
   const input = event.target as HTMLInputElement;
   const selected = Array.from(input.files ?? []);
+  const replace = replaceOnSelect.value;
+  replaceOnSelect.value = false;
   input.value = '';
-  if (selected.length) void addFiles(selected);
+  if (selected.length) void addFiles(selected, replace);
 }
 
 function selectPage(id: string) {
@@ -277,6 +307,27 @@ function closeSettings() {
   settingsOpen.value = false;
 }
 
+/** Ask before showing a preview that has no correction applied yet. */
+function requestWarpPrompt() {
+  if (busy.value) return;
+  if (!activePage.value || activePage.value.warpedUrl) return;
+  warpPromptOpen.value = true;
+}
+
+function showPreviewPane() {
+  mobilePane.value = 'preview';
+  requestWarpPrompt();
+}
+
+function closeWarpPrompt() {
+  warpPromptOpen.value = false;
+}
+
+async function confirmWarpPrompt() {
+  warpPromptOpen.value = false;
+  await warpActive();
+}
+
 function removePage(id: string) {
   const index = pages.value.findIndex((page) => page.id === id);
   if (index < 0) return;
@@ -646,7 +697,7 @@ const progressPercent = computed(() =>
       <div class="layout" :class="{ 'has-pages': pages.length > 0 }">
         <aside v-if="pages.length" class="queue queue--rail">
           <div class="queue__actions">
-            <button type="button" :disabled="busy" @click="onOpen">
+            <button type="button" :disabled="busy" @click="onAddFiles">
               파일 추가
             </button>
             <button
@@ -758,7 +809,7 @@ const progressPercent = computed(() =>
               </button>
             </header>
             <div class="queue-sheet__actions">
-              <button type="button" :disabled="busy" @click="onOpen">
+              <button type="button" :disabled="busy" @click="onAddFiles">
                 파일 추가
               </button>
               <button
@@ -1062,6 +1113,43 @@ const progressPercent = computed(() =>
               </div>
             </Teleport>
 
+            <Teleport to="body">
+              <div
+                v-if="warpPromptOpen"
+                class="warp-modal"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="warp-modal-title"
+              >
+                <button
+                  type="button"
+                  class="warp-modal__backdrop"
+                  aria-label="닫기"
+                  @click="closeWarpPrompt"
+                />
+                <div class="warp-modal__panel">
+                  <h2 id="warp-modal-title">지금 보정할까요?</h2>
+                  <p>
+                    이 장은 아직 원근 보정을 하지 않았습니다. 보정하면 코너 기준으로
+                    문서를 펴서 미리보기에 표시합니다.
+                  </p>
+                  <div class="warp-modal__actions">
+                    <button
+                      type="button"
+                      class="warp-modal__primary"
+                      :disabled="busy"
+                      @click="void confirmWarpPrompt()"
+                    >
+                      보정하기
+                    </button>
+                    <button type="button" @click="closeWarpPrompt">
+                      나중에
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </Teleport>
+
             <div class="pane-tabs" role="tablist" aria-label="편집 보기">
               <button
                 type="button"
@@ -1077,7 +1165,7 @@ const progressPercent = computed(() =>
                 role="tab"
                 :aria-selected="mobilePane === 'preview'"
                 :class="{ active: mobilePane === 'preview' }"
-                @click="mobilePane = 'preview'"
+                @click="showPreviewPane"
               >
                 미리보기
               </button>
@@ -1101,7 +1189,16 @@ const progressPercent = computed(() =>
                   :src="activePage.warpedUrl"
                   alt="보정된 스캔"
                 />
-                <p v-else class="muted">보정 후 미리보기가 표시됩니다.</p>
+                <button
+                  v-else
+                  type="button"
+                  class="preview-empty"
+                  :disabled="busy"
+                  @click="requestWarpPrompt"
+                >
+                  <strong>미리보기 준비</strong>
+                  <span>눌러서 이 장을 보정합니다.</span>
+                </button>
                 <div v-if="activePage.ocr" class="ocr-box">
                   <h3>OCR 결과</h3>
                   <pre>{{ activePage.ocr.text || '(텍스트 없음)' }}</pre>
@@ -1567,6 +1664,111 @@ const progressPercent = computed(() =>
   background: #111;
 }
 
+.preview-empty {
+  display: grid;
+  gap: 0.25rem;
+  justify-items: start;
+  width: 100%;
+  padding: 1.1rem 0.9rem;
+  border: 1px dashed var(--border);
+  border-radius: 6px;
+  background: var(--canvas);
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.preview-empty:hover:not(:disabled) {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.preview-empty:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.preview-empty strong {
+  font-size: 0.9rem;
+}
+
+.preview-empty span {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.warp-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 95;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+}
+
+.warp-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: color-mix(in srgb, black 45%, transparent);
+  cursor: pointer;
+}
+
+.warp-modal__panel {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 24rem);
+  display: grid;
+  gap: 0.65rem;
+  padding: 1.1rem 1.15rem 1.15rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: 0 12px 32px color-mix(in srgb, black 28%, transparent);
+}
+
+.warp-modal__panel h2 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.warp-modal__panel p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.warp-modal__actions {
+  display: flex;
+  gap: 0.45rem;
+}
+
+.warp-modal__actions button {
+  flex: 1;
+  min-height: 2.6rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.4rem 0.7rem;
+  background: var(--canvas);
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+
+.warp-modal__primary {
+  border-color: var(--accent) !important;
+  background: var(--accent-soft) !important;
+  font-weight: 600;
+}
+
+.warp-modal__actions button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .ocr-box {
   margin-top: 0.75rem;
 }