diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index ef989dc2..ca0d00d7 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -1,52 +1,38 @@
 'use client';
 
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { useRef, useState, useMemo, useCallback } from 'react';
 
 import Konva from 'konva';
-import { Stage, Layer, Rect, Line } from 'react-konva';
+import { Stage, Layer } from 'react-konva';
 
-import type {
-  WhiteboardItem,
-  TextItem,
-  ArrowItem,
-  ShapeItem,
-} from '@/types/whiteboard';
+import type { WhiteboardItem, ShapeItem } from '@/types/whiteboard';
 
 import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
 import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
 import { useWhiteboardAwarenessStore } from '@/store/useWhiteboardAwarenessStore';
 import { cn } from '@/utils/cn';
-import {
-  updateBoundArrows,
-  getDraggingArrowPoints,
-} from '@/utils/arrowBinding';
-import { getViewportRect, filterVisibleItems } from '@/utils/viewport';
+import { updateBoundArrows } from '@/utils/arrowBinding';
 
 import { useItemActions } from '@/hooks/useItemActions';
 import { useElementSize } from '@/hooks/useElementSize';
 import { useClickOutside } from '@/hooks/useClickOutside';
 import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
-import { useArrowHandles } from '@/hooks/useArrowHandles';
-import { useCanvasMouseEvents } from '@/hooks/useCanvasMouseEvents';
 import { useCanvasShortcuts } from '@/hooks/useCanvasShortcuts';
 import { useAddWhiteboardItem } from '@/hooks/useAddWhiteboardItem';
-import { useSelectionBox } from '@/hooks/useSelectionBox';
 import { useMultiDrag } from '@/hooks/useMultiDrag';
-import { usePinchZoom } from '@/hooks/usePinchZoom';
-
-import RenderItem from '@/components/whiteboard/items/RenderItem';
-import TextArea from '@/components/whiteboard/items/text/TextArea';
-import ShapeTextArea from '@/components/whiteboard/items/shape/ShapeTextArea';
-import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
-import RemoteSelectionLayer from '@/components/whiteboard/remote/RemoteSelectionLayer';
-import RemoteSelectionIndicator from '@/components/whiteboard/remote/RemoteSelectionIndicator';
-import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
-import SelectionBox from '@/components/whiteboard/SelectionBox';
-import Portal from '@/components/common/Portal';
+import { useViewportController } from '@/hooks/useViewportController';
+import { useCanvasGlobalEvents } from '@/hooks/useCanvasGlobalEvents';
+
+import BackgroundLayer from '@/components/whiteboard/layers/BackgroundLayer';
+import ItemRenderingLayer from '@/components/whiteboard/layers/ItemRenderingLayer';
+import CollaborationLayer from '@/components/whiteboard/layers/CollaborationLayer';
+import TextEditorLayer from '@/components/whiteboard/layers/TextEditorLayer';
+import InteractionLayer from '@/components/whiteboard/layers/InteractionLayer';
 
 const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'rotation'] as const;
 
 export default function Canvas() {
+  const myUserId = useWhiteboardAwarenessStore((state) => state.myUserId);
   const canvasWidth = useWhiteboardSharedStore((state) => state.canvasWidth);
   const canvasHeight = useWhiteboardSharedStore((state) => state.canvasHeight);
   const items = useWhiteboardSharedStore((state) => state.items);
@@ -66,20 +52,14 @@ export default function Canvas() {
   const setEditingTextId = useWhiteboardLocalStore(
     (state) => state.setEditingTextId,
   );
-  const setViewportSize = useWhiteboardLocalStore(
-    (state) => state.setViewportSize,
-  );
-  const setStageScale = useWhiteboardLocalStore((state) => state.setStageScale);
-  const setStagePos = useWhiteboardLocalStore((state) => state.setStagePos);
   const cursorMode = useWhiteboardLocalStore((state) => state.cursorMode);
-  const myUserId = useWhiteboardAwarenessStore((state) => state.myUserId);
 
   const { processImageFile, getCanvasPointFromEvent } = useAddWhiteboardItem();
 
   const stageRef = useRef<Konva.Stage | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const isInitialMount = useRef(true);
   const [isDraggingArrow, setIsDraggingArrow] = useState(false);
+  const [isDraggingHandle, setIsDraggingHandle] = useState(false);
   const [isDraggingCanvas, setIsDraggingCanvas] = useState(false);
   const [localDraggingId, setLocalDraggingId] = useState<string | null>(null);
   const [localDraggingPos, setLocalDraggingPos] = useState<{
@@ -99,177 +79,38 @@ export default function Canvas() {
     getMultiDragPosition,
   } = useMultiDrag({ selectedIds, items });
 
-  // Viewport culling을 위한 상태
-  const [viewportRect, setViewportRect] = useState<{
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  } | null>(null);
-
   const size = useElementSize(containerRef);
 
-  // 초기 Stage 위치 설정
-  useEffect(() => {
-    const stage = stageRef.current;
-    if (
-      !stage ||
-      !isInitialMount.current ||
-      size.width === 0 ||
-      size.height === 0
-    )
-      return;
-
-    // 캔버스를 화면 정가운데 배치
-    const centerPos = {
-      x: (size.width - canvasWidth) / 2,
-      y: (size.height - canvasHeight) / 2,
-    };
-
-    stage.scale({ x: 1, y: 1 });
-    stage.position(centerPos);
-    stage.batchDraw();
-    setViewportSize(size.width, size.height);
-    setStagePos(centerPos);
-    setStageScale(1);
-
-    useWhiteboardLocalStore.getState().setStageRef(stageRef);
-
-    isInitialMount.current = false;
-  }, [
-    size.width,
-    size.height,
-    canvasWidth,
-    canvasHeight,
-    setViewportSize,
-    setStagePos,
-    setStageScale,
-  ]);
-
-  // viewport 업데이트
-  useEffect(() => {
-    const stage = stageRef.current;
-    if (!stage) return;
-
-    const updateViewport = () => {
-      setViewportRect(getViewportRect(stage));
-    };
-
-    // 초기 viewport 설정
-    updateViewport();
-
-    // Stage 이동/줌 시 viewport 업데이트
-    let rafId: number;
-    const throttledUpdate = () => {
-      if (rafId) return;
-      rafId = requestAnimationFrame(() => {
-        updateViewport();
-        rafId = 0;
-      });
-    };
-
-    stage.on('dragmove', throttledUpdate);
-    stage.on('wheel', throttledUpdate);
-
-    return () => {
-      stage.off('dragmove', throttledUpdate);
-      stage.off('wheel', throttledUpdate);
-      if (rafId) cancelAnimationFrame(rafId);
-    };
-  }, []);
-
-  // 화면에 보이는 아이템만 필터링
-  const visibleItems = useMemo(() => {
-    if (!viewportRect) return items;
-    const filtered = filterVisibleItems(items, viewportRect);
-
-    return filtered;
-  }, [items, viewportRect]);
-
-  // 줌 레벨에 따른 pixelRatio 조절
-  const [pixelRatio, setPixelRatio] = useState(window.devicePixelRatio);
-
-  useEffect(() => {
-    const stage = stageRef.current;
-    if (!stage) return;
-
-    const updatePixelRatio = () => {
-      const scale = stage.scaleX();
-      let ratio: number;
-      if (scale >= 1.5) ratio = window.devicePixelRatio;
-      else if (scale >= 1) ratio = 1.5;
-      else if (scale >= 0.5) ratio = 1;
-      else if (scale >= 0.3) ratio = 0.5;
-      else ratio = 0.25;
-
-      setPixelRatio(ratio);
-    };
-
-    updatePixelRatio();
-
-    stage.on('wheel', updatePixelRatio);
-
-    return () => {
-      stage.off('wheel', updatePixelRatio);
-    };
-  }, []);
-
-  // viewport 크기를 store에 업데이트
-  useEffect(() => {
-    if (size.width > 0 && size.height > 0) {
-      setViewportSize(size.width, size.height);
-    }
-  }, [size.width, size.height, setViewportSize]);
+  // Viewport 관련 로직 (스케일, 줌, 패닝 뷰포트 컬링)
+  const { visibleItems, pixelRatio } = useViewportController({
+    stageRef,
+    size,
+    items,
+  });
 
   const { handleWheel, handleDragMove, handleDragEnd } = useCanvasInteraction(
     size.width,
     size.height,
   );
 
-  const handleWheelWithEvent = useCallback(
-    (e: Konva.KonvaEventObject<WheelEvent>) => {
-      handleWheel(e);
-
-      const stage = stageRef.current;
-      if (!stage) return;
-
-      // wheel 후 커서 위치 업데이트
-      const pointerPos = stage.getPointerPosition();
-      if (pointerPos) {
-        const transform = stage.getAbsoluteTransform().copy().invert();
-        const canvasPos = transform.point(pointerPos);
-
-        const awareness = useWhiteboardSharedStore.getState().awareness;
-        if (awareness) {
-          const currentState = awareness.getLocalState();
-          if (currentState) {
-            awareness.setLocalState({
-              ...currentState,
-              cursor: { x: canvasPos.x, y: canvasPos.y },
-            });
-          }
-        }
-      }
-
-      stage.fire('stageTransformChange');
-    },
-    [handleWheel],
-  );
-
-  const editingItem = useMemo(
-    () =>
-      items.find((item) => item.id === editingTextId) as
-        | TextItem
-        | ShapeItem
-        | undefined,
-    [items, editingTextId],
-  );
+  const {
+    isDraggable,
+    handlePointerDown,
+    handlePointerMove,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleWheelWithEvent,
+  } = useCanvasGlobalEvents({
+    stageRef,
+    handleWheel,
+  });
 
   const singleSelectedId = selectedIds.length === 1 ? selectedIds[0] : null;
   const selectedItem = useMemo(
     () =>
       singleSelectedId
-        ? items.find((item) => item.id === singleSelectedId)
+        ? items.find((item) => item.id === singleSelectedId) || null
         : null,
     [items, singleSelectedId],
   );
@@ -278,31 +119,9 @@ export default function Canvas() {
     !!singleSelectedId &&
     (selectedItem?.type === 'arrow' || selectedItem?.type === 'line');
 
-  // 화살표/선 훅
-  const {
-    selectedHandleIndex,
-    setSelectedHandleIndex,
-    handleHandleClick,
-    handleArrowStartDrag,
-    handleArrowControlPointDrag,
-    handleArrowEndDrag,
-    handleHandleDragEnd,
-    handleArrowDblClick,
-    draggingPoints,
-    snapIndicator,
-    deleteControlPoint,
-  } = useArrowHandles({
-    arrow: isArrowOrLineSelected ? (selectedItem as ArrowItem) : null,
-    items,
-    stageRef,
-    updateItem,
-  });
-
   // 키보드 단축키 훅
   useCanvasShortcuts({
     isArrowOrLineSelected,
-    selectedHandleIndex,
-    deleteControlPoint,
   });
 
   // 도형 더블클릭 핸들러 (텍스트 편집 모드)
@@ -310,21 +129,6 @@ export default function Canvas() {
     setEditingTextId(id);
   };
 
-  // 선택 해제 핸들러
-  const handleCheckDeselect = (
-    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => {
-    if (editingTextId) return;
-
-    const clickedOnEmpty =
-      e.target === e.target.getStage() || e.target.hasName('bg-rect');
-
-    if (clickedOnEmpty) {
-      clearSelection();
-      setSelectedHandleIndex(null);
-    }
-  };
-
   // 드래그 앤 드롭
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
@@ -362,17 +166,12 @@ export default function Canvas() {
 
       if (selectedIds.length > 0) {
         clearSelection();
-        setSelectedHandleIndex(null);
+        useWhiteboardLocalStore.getState().setSelectedHandleIndex(null);
       }
     },
     !editingTextId && selectedIds.length > 0,
   );
 
-  const { startSelection, cancelSelection } = useSelectionBox({
-    stageRef,
-    enabled: cursorMode === 'select',
-  });
-
   const handleSelectItem = useCallback(
     (id: string, e: Konva.KonvaEventObject<MouseEvent | TouchEvent>) => {
       const nativeEvent = e?.evt as MouseEvent | TouchEvent | undefined;
@@ -402,67 +201,6 @@ export default function Canvas() {
     [addToSelection, selectOnly, toggleSelection, selectedIds],
   );
 
-  // 마우스 이벤트 통합 훅
-  const { handlePointerDown, handlePointerMove, cancelDrawing, cancelErasing } =
-    useCanvasMouseEvents({
-      onDeselect: handleCheckDeselect,
-      onSelectionBoxStart: startSelection,
-    });
-
-  // 핀치 줌 훅
-  const {
-    isActive: isPinching,
-    handleTouchStart: handlePinchStart,
-    handleTouchMove: handlePinchMove,
-    handleTouchEnd: handlePinchEnd,
-  } = usePinchZoom({
-    stageRef,
-    onScaleChange: setStageScale,
-    onPositionChange: setStagePos,
-    onPinchStart: () => {
-      // 핀치 시작 시 그리기/지우개/선택박스 취소
-      cancelDrawing();
-      cancelErasing();
-      cancelSelection();
-      // 아이템 선택 해제
-      clearSelection();
-    },
-  });
-
-  // 캔버스 드래그 가능 여부 (핀치 줌 중에는 비활성화함)
-  const isDraggable =
-    useWhiteboardLocalStore((state) => state.cursorMode === 'move') &&
-    !isPinching;
-
-  const handleTouchStart = useCallback(
-    (e: Konva.KonvaEventObject<TouchEvent>) => {
-      if (e.evt.touches.length === 2) {
-        handlePinchStart(e.evt);
-      } else {
-        handlePointerDown(e);
-      }
-    },
-    [handlePinchStart, handlePointerDown],
-  );
-
-  const handleTouchMove = useCallback(
-    (e: Konva.KonvaEventObject<TouchEvent>) => {
-      if (e.evt.touches.length === 2) {
-        handlePinchMove(e.evt);
-      } else {
-        handlePointerMove(e);
-      }
-    },
-    [handlePinchMove, handlePointerMove],
-  );
-
-  const handleTouchEnd = useCallback(
-    (e: Konva.KonvaEventObject<TouchEvent>) => {
-      handlePinchEnd(e.evt);
-    },
-    [handlePinchEnd],
-  );
-
   const handleItemChange = useCallback(
     (id: string, newAttributes: Partial<WhiteboardItem>) => {
       if (isMultiDragging(id)) {
@@ -600,199 +338,60 @@ export default function Canvas() {
           clipWidth={canvasWidth}
           clipHeight={canvasHeight}
         >
-          {/* Canvas 경계 */}
-          <Rect
-            name="bg-rect"
-            x={0}
-            y={0}
-            width={canvasWidth}
-            height={canvasHeight}
-            fill="white"
-            stroke="gray"
-            strokeWidth={2}
-            listening={true}
+          <BackgroundLayer
+            canvasWidth={canvasWidth}
+            canvasHeight={canvasHeight}
           />
 
           {/* 아이템 렌더링 */}
-          {visibleItems.map((item) => {
-            let displayItem = item;
-
-            const multiDragPos = getMultiDragPosition(item.id);
-            if (multiDragPos && 'x' in item && 'y' in item) {
-              displayItem = {
-                ...item,
-                x: multiDragPos.x,
-                y: multiDragPos.y,
-              } as WhiteboardItem;
-            }
-
-            if (
-              !multiDragPos &&
-              item.type === 'arrow' &&
-              localDraggingId &&
-              localDraggingPos &&
-              (item.startBinding?.elementId === localDraggingId ||
-                item.endBinding?.elementId === localDraggingId)
-            ) {
-              const targetShape = items.find(
-                (it) => it.id === localDraggingId,
-              ) as ShapeItem;
-              if (targetShape) {
-                const tempPoints = getDraggingArrowPoints(
-                  item as ArrowItem,
-                  localDraggingId,
-                  localDraggingPos.x,
-                  localDraggingPos.y,
-                  targetShape,
-                  localDraggingPos.width,
-                  localDraggingPos.height,
-                  localDraggingPos.rotation,
-                );
-                if (tempPoints) {
-                  displayItem = {
-                    ...displayItem,
-                    points: tempPoints,
-                  } as WhiteboardItem;
-                }
-              }
-            }
-
-            if (
-              displayItem.id === singleSelectedId &&
-              (displayItem.type === 'arrow' || displayItem.type === 'line') &&
-              draggingPoints
-            ) {
-              displayItem = {
-                ...displayItem,
-                points: draggingPoints,
-              } as WhiteboardItem;
-            }
-
-            return (
-              <RenderItem
-                key={item.id}
-                item={displayItem}
-                isSelected={selectedIds.includes(item.id)}
-                onSelect={handleSelectItem}
-                onChange={(newAttributes) =>
-                  handleItemChange(item.id, newAttributes)
-                }
-                onArrowDblClick={handleArrowDblClick}
-                onShapeDblClick={handleShapeDblClick}
-                onDragStart={() => {
-                  if (item.type === 'arrow' || item.type === 'line') {
-                    setIsDraggingArrow(true);
-                  }
-                  startMultiDrag(item.id);
-                }}
-                onDragMove={handleDragMoveItem}
-                onTransformMove={handleTransformMoveItem}
-                onDragEnd={handleDragEndItem}
-              />
-            );
-          })}
-          {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
-            <ArrowHandles
-              arrow={selectedItem as ArrowItem}
-              selectedHandleIndex={selectedHandleIndex}
-              onHandleClick={handleHandleClick}
-              onStartDrag={handleArrowStartDrag}
-              onControlPointDrag={handleArrowControlPointDrag}
-              onEndDrag={handleArrowEndDrag}
-              onDragEnd={handleHandleDragEnd}
-              draggingPoints={draggingPoints}
-            />
-          )}
-
-          {/* 부착 표시 */}
-          {snapIndicator && (
-            <Rect
-              x={snapIndicator.x}
-              y={snapIndicator.y}
-              width={snapIndicator.width}
-              height={snapIndicator.height}
-              rotation={snapIndicator.rotation}
-              stroke="#0096FF"
-              strokeWidth={3}
-              cornerRadius={3}
-            />
-          )}
-
-          {/* 선택 박스 */}
-          <SelectionBox />
-
-          {/* 내 멀티 선택 개별 박스 */}
-          {selectedIds.length > 1 &&
-            selectedIds.map((itemId) => (
-              <RemoteSelectionIndicator
-                key={`my-selection-${itemId}`}
-                selectedId={itemId}
-                userColor="#0369A1"
-                items={items}
-                stageRef={stageRef}
-              />
-            ))}
-
-          {/* 다른 사용자의 선택 표시 */}
-          <RemoteSelectionLayer
+          <ItemRenderingLayer
+            items={items}
+            visibleItems={visibleItems}
+            selectedIds={selectedIds}
+            singleSelectedId={singleSelectedId}
+            isDraggingArrow={isDraggingArrow}
+            isDraggingHandle={isDraggingHandle}
+            localDraggingId={localDraggingId}
+            localDraggingPos={localDraggingPos}
+            getMultiDragPosition={getMultiDragPosition}
+            handleSelectItem={handleSelectItem}
+            handleItemChange={handleItemChange}
+            handleShapeDblClick={handleShapeDblClick}
+            setIsDraggingArrow={setIsDraggingArrow}
+            setIsDraggingHandle={setIsDraggingHandle}
+            startMultiDrag={startMultiDrag}
+            handleDragMoveItem={handleDragMoveItem}
+            handleTransformMoveItem={handleTransformMoveItem}
+            handleDragEndItem={handleDragEndItem}
+          />
+          <CollaborationLayer
             myUserId={myUserId}
-            selectedId={singleSelectedId}
             items={items}
+            selectedIds={selectedIds}
+            singleSelectedId={singleSelectedId}
             stageRef={stageRef}
           />
-
-          {/* 내 Transformer */}
-          <ItemTransformer
+          <InteractionLayer
+            isArrowOrLineSelected={isArrowOrLineSelected}
+            selectedItem={selectedItem}
             selectedIds={selectedIds}
             items={items}
             stageRef={stageRef}
+            isDraggingArrow={isDraggingArrow}
+            isDraggingHandle={isDraggingHandle}
+            setIsDraggingHandle={setIsDraggingHandle}
           />
         </Layer>
       </Stage>
 
-      {/* 텍스트 편집 모드 */}
-      {editingTextId && editingItem && editingItem.type === 'text' && (
-        <Portal>
-          <TextArea
-            textId={editingTextId}
-            textItem={editingItem as TextItem}
-            stageRef={stageRef}
-            onChange={(newText) => {
-              updateItem(editingTextId, { text: newText });
-            }}
-            onClose={() => {
-              setEditingTextId(null);
-              clearSelection();
-            }}
-          />
-        </Portal>
-      )}
-
-      {/* 도형 텍스트 편집 모드 */}
-      {editingTextId && editingItem && editingItem.type === 'shape' && (
-        <Portal>
-          <ShapeTextArea
-            shapeId={editingTextId}
-            shapeItem={editingItem as ShapeItem}
-            stageRef={stageRef}
-            onChange={(newText) => {
-              updateItem(editingTextId, { text: newText });
-            }}
-            onClose={() => {
-              setEditingTextId(null);
-              clearSelection();
-            }}
-            onSizeChange={(width, height, newY, newX, newText) => {
-              const updates: Partial<ShapeItem> = { width, height };
-              if (newY !== undefined) updates.y = newY;
-              if (newX !== undefined) updates.x = newX;
-              if (newText !== undefined) updates.text = newText;
-
-              updateItem(editingTextId, updates);
-            }}
-          />
-        </Portal>
-      )}
+      <TextEditorLayer
+        editingTextId={editingTextId}
+        items={items}
+        stageRef={stageRef}
+        updateItem={updateItem}
+        setEditingTextId={setEditingTextId}
+        clearSelection={clearSelection}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
index 02429148..6ce65e48 100644
--- a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
+++ b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
@@ -4,12 +4,13 @@ import { Circle } from 'react-konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { getControlPoints } from '@/utils/arrow';
 import { useCursorStyle } from '@/hooks/useCursorStyle';
-import type { ArrowItem } from '@/types/whiteboard';
+import type { ArrowItem, LineItem } from '@/types/whiteboard';
 
 interface ArrowHandlesProps {
-  arrow: ArrowItem;
+  arrow: ArrowItem | LineItem;
   selectedHandleIndex: number | null;
   onHandleClick: (e: KonvaEventObject<MouseEvent>, index: number) => void;
+  onDragStart: (handleType: 'start' | 'end' | 'mid') => void;
   onStartDrag: (e: KonvaEventObject<DragEvent>) => void;
   onControlPointDrag: (
     pointIndex: number,
@@ -24,6 +25,7 @@ export default function ArrowHandles({
   arrow,
   selectedHandleIndex,
   onHandleClick,
+  onDragStart,
   onStartDrag,
   onControlPointDrag,
   onEndDrag,
@@ -52,6 +54,7 @@ export default function ArrowHandles({
         stroke="#0369A1"
         strokeWidth={2}
         draggable
+        onDragStart={() => onDragStart('start')}
         onDragMove={onStartDrag}
         onDragEnd={() => onDragEnd('start')}
         onClick={(e) => onHandleClick(e, 0)}
@@ -72,6 +75,7 @@ export default function ArrowHandles({
             stroke="#B8E6FE"
             strokeWidth={isHandleSelected ? 3 : 2}
             draggable
+            onDragStart={() => onDragStart('mid')}
             onDragMove={(e) => onControlPointDrag(point.index, e)}
             onDragEnd={() => onDragEnd('mid')}
             onClick={(e) => onHandleClick(e, point.index)}
@@ -90,6 +94,7 @@ export default function ArrowHandles({
         stroke="#0369A1"
         strokeWidth={2}
         draggable
+        onDragStart={() => onDragStart('end')}
         onDragMove={onEndDrag}
         onDragEnd={() => onDragEnd('end')}
         onClick={(e) => onHandleClick(e, points.length - 2)}
diff --git a/frontend/src/components/whiteboard/layers/BackgroundLayer.tsx b/frontend/src/components/whiteboard/layers/BackgroundLayer.tsx
new file mode 100644
index 00000000..3575f7e3
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/BackgroundLayer.tsx
@@ -0,0 +1,25 @@
+import { Rect } from 'react-konva';
+
+interface BackgroundLayerProps {
+  canvasWidth: number;
+  canvasHeight: number;
+}
+
+export default function BackgroundLayer({
+  canvasWidth,
+  canvasHeight,
+}: BackgroundLayerProps) {
+  return (
+    <Rect
+      name="bg-rect"
+      x={0}
+      y={0}
+      width={canvasWidth}
+      height={canvasHeight}
+      fill="white"
+      stroke="gray"
+      strokeWidth={2}
+      listening={true}
+    />
+  );
+}
diff --git a/frontend/src/components/whiteboard/layers/CollaborationLayer.tsx b/frontend/src/components/whiteboard/layers/CollaborationLayer.tsx
new file mode 100644
index 00000000..28edf379
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/CollaborationLayer.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Konva from 'konva';
+
+import type { WhiteboardItem } from '@/types/whiteboard';
+
+import RemoteSelectionLayer from '@/components/whiteboard/remote/RemoteSelectionLayer';
+import RemoteSelectionIndicator from '@/components/whiteboard/remote/RemoteSelectionIndicator';
+
+interface CollaborationLayerProps {
+  myUserId: string | null;
+  items: WhiteboardItem[];
+  selectedIds: string[];
+  singleSelectedId: string | null;
+  stageRef: React.RefObject<Konva.Stage | null>;
+}
+
+export default function CollaborationLayer({
+  myUserId,
+  items,
+  selectedIds,
+  singleSelectedId,
+  stageRef,
+}: CollaborationLayerProps) {
+  return (
+    <>
+      {/* 본인 선택 박스 */}
+      {selectedIds.length > 1 &&
+        selectedIds.map((itemId) => (
+          <RemoteSelectionIndicator
+            key={`my-selection-${itemId}`}
+            selectedId={itemId}
+            userColor="#0369A1"
+            items={items}
+            stageRef={stageRef}
+          />
+        ))}
+
+      {/* 다른 사용자의 선택 표시 */}
+      <RemoteSelectionLayer
+        myUserId={myUserId ?? ''}
+        selectedId={singleSelectedId}
+        items={items}
+        stageRef={stageRef}
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
new file mode 100644
index 00000000..1e69c970
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import Konva from 'konva';
+import { Rect } from 'react-konva';
+
+import type { WhiteboardItem, ArrowItem, LineItem } from '@/types/whiteboard';
+
+import { useArrowHandles } from '@/hooks/useArrowHandles';
+import { useItemActions } from '@/hooks/useItemActions';
+
+import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
+import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
+import SelectionBox from '@/components/whiteboard/SelectionBox';
+import RenderItem from '@/components/whiteboard/items/RenderItem';
+
+interface InteractionLayerProps {
+  isArrowOrLineSelected: boolean;
+  selectedItem: WhiteboardItem | null;
+  selectedIds: string[];
+  items: WhiteboardItem[];
+  stageRef: React.RefObject<Konva.Stage | null>;
+  isDraggingArrow: boolean;
+  isDraggingHandle: boolean;
+  setIsDraggingHandle: (isDragging: boolean) => void;
+}
+
+export default function InteractionLayer({
+  isArrowOrLineSelected,
+  selectedItem,
+  selectedIds,
+  items,
+  stageRef,
+  isDraggingArrow,
+  setIsDraggingHandle,
+}: InteractionLayerProps) {
+  const { updateItem } = useItemActions();
+  const {
+    selectedHandleIndex,
+    handleHandleClick,
+    handleHandleDragStart,
+    handleArrowStartDrag,
+    handleArrowControlPointDrag,
+    handleArrowEndDrag,
+    handleHandleDragEnd,
+    draggingPoints,
+    snapIndicator,
+  } = useArrowHandles({
+    arrow: isArrowOrLineSelected
+      ? (selectedItem as ArrowItem | LineItem)
+      : null,
+    items,
+    updateItem,
+    setIsDraggingArrow: setIsDraggingHandle,
+  });
+
+  return (
+    <>
+      {/* 화살표 드래그 중 임시 렌더링 */}
+      {draggingPoints && selectedItem && (
+        <RenderItem
+          item={
+            {
+              ...selectedItem,
+              points: draggingPoints,
+            } as ArrowItem | LineItem
+          }
+          isSelected={true}
+          onSelect={() => {}}
+          onChange={() => {}}
+          onArrowDblClick={() => {}}
+          onShapeDblClick={() => {}}
+          onDragStart={() => {}}
+          onDragMove={() => {}}
+          onTransformMove={() => {}}
+          onDragEnd={() => {}}
+        />
+      )}
+
+      {/* 화살표 핸들 */}
+      {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
+        <ArrowHandles
+          arrow={selectedItem as ArrowItem | LineItem}
+          selectedHandleIndex={selectedHandleIndex}
+          onHandleClick={handleHandleClick}
+          onDragStart={handleHandleDragStart}
+          onStartDrag={handleArrowStartDrag}
+          onControlPointDrag={handleArrowControlPointDrag}
+          onEndDrag={handleArrowEndDrag}
+          onDragEnd={handleHandleDragEnd}
+          draggingPoints={draggingPoints}
+        />
+      )}
+
+      {/* 부착 표시 */}
+      {snapIndicator && (
+        <Rect
+          x={snapIndicator.x}
+          y={snapIndicator.y}
+          width={snapIndicator.width}
+          height={snapIndicator.height}
+          rotation={snapIndicator.rotation}
+          stroke="#0096FF"
+          strokeWidth={3}
+          cornerRadius={3}
+        />
+      )}
+
+      {/* 선택 박스 */}
+      <SelectionBox />
+
+      {/* 내 Transformer */}
+      <ItemTransformer
+        selectedIds={selectedIds}
+        items={items}
+        stageRef={stageRef}
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
new file mode 100644
index 00000000..6dfdd6ae
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import Konva from 'konva';
+
+import type { WhiteboardItem, ShapeItem, ArrowItem } from '@/types/whiteboard';
+import { getDraggingArrowPoints } from '@/utils/arrowBinding';
+import { useItemActions } from '@/hooks/useItemActions';
+import RenderItem from '@/components/whiteboard/items/RenderItem';
+
+interface ItemRenderingLayerProps {
+  items: WhiteboardItem[];
+  visibleItems: WhiteboardItem[];
+  selectedIds: string[];
+  singleSelectedId: string | null;
+  isDraggingArrow: boolean;
+  isDraggingHandle: boolean;
+  localDraggingId: string | null;
+  localDraggingPos: {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+  } | null;
+  getMultiDragPosition: (id: string) => { x: number; y: number } | null;
+  handleSelectItem: (
+    id: string,
+    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
+  ) => void;
+  handleItemChange: (
+    id: string,
+    newAttributes: Partial<WhiteboardItem>,
+  ) => void;
+  handleShapeDblClick: (id: string) => void;
+  setIsDraggingArrow: (isDragging: boolean) => void;
+  setIsDraggingHandle: (isDragging: boolean) => void;
+  startMultiDrag: (id: string) => void;
+  handleDragMoveItem: (id: string, x: number, y: number) => void;
+  handleTransformMoveItem: (
+    id: string,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    rotation: number,
+  ) => void;
+  handleDragEndItem: () => void;
+}
+
+export default function ItemRenderingLayer({
+  items,
+  visibleItems,
+  singleSelectedId,
+  isDraggingHandle,
+  localDraggingId,
+  localDraggingPos,
+  getMultiDragPosition,
+  selectedIds,
+  handleSelectItem,
+  handleItemChange,
+  handleShapeDblClick,
+  setIsDraggingArrow,
+  startMultiDrag,
+  handleDragMoveItem,
+  handleTransformMoveItem,
+  handleDragEndItem,
+}: ItemRenderingLayerProps) {
+  const { insertArrowControlPoint } = useItemActions();
+  return (
+    <>
+      {visibleItems.map((item) => {
+        let displayItem = item;
+
+        const multiDragPos = getMultiDragPosition(item.id);
+        if (multiDragPos && 'x' in item && 'y' in item) {
+          displayItem = {
+            ...item,
+            x: multiDragPos.x,
+            y: multiDragPos.y,
+          } as WhiteboardItem;
+        }
+
+        if (
+          !multiDragPos &&
+          item.type === 'arrow' &&
+          localDraggingId &&
+          localDraggingPos &&
+          (item.startBinding?.elementId === localDraggingId ||
+            item.endBinding?.elementId === localDraggingId)
+        ) {
+          const targetShape = items.find(
+            (it) => it.id === localDraggingId,
+          ) as ShapeItem;
+          if (targetShape) {
+            const tempPoints = getDraggingArrowPoints(
+              item as ArrowItem,
+              localDraggingId,
+              localDraggingPos.x,
+              localDraggingPos.y,
+              targetShape,
+              localDraggingPos.width,
+              localDraggingPos.height,
+              localDraggingPos.rotation,
+            );
+            if (tempPoints) {
+              displayItem = {
+                ...displayItem,
+                points: tempPoints,
+              } as WhiteboardItem;
+            }
+          }
+        }
+
+        if (
+          isDraggingHandle &&
+          item.id === singleSelectedId &&
+          (item.type === 'arrow' || item.type === 'line')
+        ) {
+          return null;
+        }
+
+        return (
+          <RenderItem
+            key={item.id}
+            item={displayItem}
+            isSelected={selectedIds.includes(item.id)}
+            onSelect={handleSelectItem}
+            onChange={(newAttributes) =>
+              handleItemChange(item.id, newAttributes)
+            }
+            onArrowDblClick={insertArrowControlPoint}
+            onShapeDblClick={handleShapeDblClick}
+            onDragStart={() => {
+              if (
+                item.id === singleSelectedId &&
+                (item.type === 'arrow' || item.type === 'line')
+              ) {
+                // 핸들 드래그와 구분하기 위한 상태는 InteractionLayer에서 관리
+              }
+              setIsDraggingArrow(true);
+              startMultiDrag(item.id);
+            }}
+            onDragMove={handleDragMoveItem}
+            onTransformMove={handleTransformMoveItem}
+            onDragEnd={handleDragEndItem}
+          />
+        );
+      })}
+    </>
+  );
+}
diff --git a/frontend/src/components/whiteboard/layers/TextEditorLayer.tsx b/frontend/src/components/whiteboard/layers/TextEditorLayer.tsx
new file mode 100644
index 00000000..5785b47a
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/TextEditorLayer.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import Konva from 'konva';
+
+import type { WhiteboardItem, ShapeItem, TextItem } from '@/types/whiteboard';
+
+import Portal from '@/components/common/Portal';
+import TextArea from '@/components/whiteboard/items/text/TextArea';
+import ShapeTextArea from '@/components/whiteboard/items/shape/ShapeTextArea';
+
+interface TextEditorLayerProps {
+  editingTextId: string | null;
+  items: WhiteboardItem[];
+  stageRef: React.RefObject<Konva.Stage | null>;
+  updateItem: (id: string, newAttributes: Partial<WhiteboardItem>) => void;
+  setEditingTextId: (id: string | null) => void;
+  clearSelection: () => void;
+}
+
+export default function TextEditorLayer({
+  editingTextId,
+  items,
+  stageRef,
+  updateItem,
+  setEditingTextId,
+  clearSelection,
+}: TextEditorLayerProps) {
+  // 현재 타이핑 중인 아이템 객체 가져오기
+  const editingItem = editingTextId
+    ? items.find((item) => item.id === editingTextId)
+    : null;
+
+  return (
+    <>
+      {editingItem && editingItem.type === 'text' && (
+        <Portal>
+          <TextArea
+            textId={editingTextId!}
+            textItem={editingItem as TextItem}
+            stageRef={stageRef}
+            onChange={(newText) =>
+              updateItem(editingItem.id, { text: newText })
+            }
+            onClose={() => {
+              setEditingTextId(null);
+              clearSelection();
+            }}
+          />
+        </Portal>
+      )}
+
+      {editingItem && editingItem.type === 'shape' && (
+        <Portal>
+          <ShapeTextArea
+            shapeId={editingTextId!}
+            shapeItem={editingItem as ShapeItem}
+            stageRef={stageRef}
+            onChange={(newText) =>
+              updateItem(editingItem.id, { text: newText })
+            }
+            onSizeChange={(width, height, newY, newX, newText) => {
+              updateItem(editingItem.id, {
+                width,
+                height,
+                ...(newY !== undefined && { y: newY }),
+                ...(newX !== undefined && { x: newX }),
+                ...(newText !== undefined && { text: newText }),
+              });
+            }}
+            onClose={() => {
+              setEditingTextId(null);
+              clearSelection();
+            }}
+          />
+        </Portal>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/hooks/useArrowHandles.ts b/frontend/src/hooks/useArrowHandles.ts
index a52d3933..f420c563 100644
--- a/frontend/src/hooks/useArrowHandles.ts
+++ b/frontend/src/hooks/useArrowHandles.ts
@@ -1,5 +1,4 @@
 import { useState, useRef } from 'react';
-import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import type {
   ArrowItem,
@@ -7,25 +6,27 @@ import type {
   WhiteboardItem,
   ShapeItem,
 } from '@/types/whiteboard';
-import { pointToSegmentDistance } from '@/utils/arrow';
-import { getWorldPointerPosition } from '@/utils/coordinate';
 import { getNearestSnapPoint } from '@/utils/geom';
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
 
 interface UseArrowHandlesProps {
   arrow: ArrowItem | LineItem | null;
   items: WhiteboardItem[];
-  stageRef: React.RefObject<Konva.Stage | null>;
   updateItem: (id: string, payload: Partial<WhiteboardItem>) => void;
+  setIsDraggingArrow: (isDragging: boolean) => void;
 }
 
 export function useArrowHandles({
   arrow,
   items,
-  stageRef,
   updateItem,
+  setIsDraggingArrow,
 }: UseArrowHandlesProps) {
-  const [selectedHandleIndex, setSelectedHandleIndex] = useState<number | null>(
-    null,
+  const selectedHandleIndex = useWhiteboardLocalStore(
+    (state) => state.selectedHandleIndex,
+  );
+  const setSelectedHandleIndex = useWhiteboardLocalStore(
+    (state) => state.setSelectedHandleIndex,
   );
 
   // 드래그 중인 points를 로컬 상태로 관리
@@ -46,45 +47,6 @@ export function useArrowHandles({
     position: { x: number; y: number };
   } | null>(null);
 
-  // 화살표 더블클릭 - 중간점 추가
-  const handleArrowDblClick = (arrowId: string) => {
-    if (!arrow || !stageRef.current) return;
-
-    const stage = stageRef.current;
-    const worldPos = getWorldPointerPosition(stage);
-
-    const worldX = worldPos.x;
-    const worldY = worldPos.y;
-
-    // 가장 가까운 선분 찾기
-    let minDistance = Infinity;
-    let insertIndex = 2;
-
-    for (let i = 0; i < arrow.points.length - 2; i += 2) {
-      const x1 = arrow.points[i];
-      const y1 = arrow.points[i + 1];
-      const x2 = arrow.points[i + 2];
-      const y2 = arrow.points[i + 3];
-
-      const distance = pointToSegmentDistance(worldX, worldY, x1, y1, x2, y2);
-
-      if (distance < minDistance) {
-        minDistance = distance;
-        insertIndex = i + 2;
-      }
-    }
-
-    // 중간 point 삽입
-    const newPoints = [
-      ...arrow.points.slice(0, insertIndex),
-      worldX,
-      worldY,
-      ...arrow.points.slice(insertIndex),
-    ];
-
-    updateItem(arrowId, { points: newPoints });
-  };
-
   // 화살표 핸들 클릭
   const handleHandleClick = (
     e: KonvaEventObject<MouseEvent>,
@@ -163,8 +125,24 @@ export function useArrowHandles({
     }
   };
 
+  // 핸들 드래그 시작
+  const handleHandleDragStart = (handleType: 'start' | 'end' | 'mid') => {
+    if (!arrow) return;
+    setIsDraggingArrow(true);
+    setDraggingPoints([...arrow.points]);
+
+    if (arrow.type === 'arrow') {
+      if (handleType === 'start') {
+        currentSnapTarget.current = arrow.startBinding || null;
+      } else if (handleType === 'end') {
+        currentSnapTarget.current = arrow.endBinding || null;
+      }
+    }
+  };
+
   // 화살표 시작점 드래그
   const handleArrowStartDrag = (e: KonvaEventObject<DragEvent>) => {
+    e.cancelBubble = true;
     if (!arrow) return;
 
     const { x, y } = e.target.position();
@@ -214,19 +192,12 @@ export function useArrowHandles({
 
     const updates: Partial<ArrowItem> = { points: draggingPoints };
 
-    // 바인딩 정보 업데이트
-    if (handleType === 'start') {
-      if (currentSnapTarget.current) {
+    // 바인딩 정보 업데이트 (Arrow 타입일 경우에만)
+    if (arrow.type === 'arrow') {
+      if (handleType === 'start') {
         updates.startBinding = currentSnapTarget.current;
-      } else {
-        // 빈 공간에 놓으면 바인딩 해제
-        updates.startBinding = null;
-      }
-    } else if (handleType === 'end') {
-      if (currentSnapTarget.current) {
+      } else if (handleType === 'end') {
         updates.endBinding = currentSnapTarget.current;
-      } else {
-        updates.endBinding = null;
       }
     }
 
@@ -235,6 +206,7 @@ export function useArrowHandles({
     setDraggingPoints(null);
     setSnapIndicator(null);
     currentSnapTarget.current = null;
+    setIsDraggingArrow(false);
   };
 
   // 화살표 중간점 삭제
@@ -264,11 +236,11 @@ export function useArrowHandles({
     selectedHandleIndex,
     setSelectedHandleIndex,
     handleHandleClick,
+    handleHandleDragStart,
     handleArrowStartDrag,
     handleArrowControlPointDrag,
     handleArrowEndDrag,
     handleHandleDragEnd,
-    handleArrowDblClick,
     deleteControlPoint,
     draggingPoints,
     snapIndicator,
diff --git a/frontend/src/hooks/useCanvasGlobalEvents.ts b/frontend/src/hooks/useCanvasGlobalEvents.ts
new file mode 100644
index 00000000..ef0b600d
--- /dev/null
+++ b/frontend/src/hooks/useCanvasGlobalEvents.ts
@@ -0,0 +1,146 @@
+import { useCallback } from 'react';
+import Konva from 'konva';
+
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
+import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
+import { useSelectionBox } from '@/hooks/useSelectionBox';
+import { useCanvasMouseEvents } from '@/hooks/useCanvasMouseEvents';
+import { usePinchZoom } from '@/hooks/usePinchZoom';
+
+interface UseCanvasGlobalEventsProps {
+  stageRef: React.RefObject<Konva.Stage | null>;
+  handleWheel: (e: Konva.KonvaEventObject<WheelEvent>) => void;
+}
+
+export function useCanvasGlobalEvents({
+  stageRef,
+  handleWheel,
+}: UseCanvasGlobalEventsProps) {
+  const editingTextId = useWhiteboardLocalStore((state) => state.editingTextId);
+  const cursorMode = useWhiteboardLocalStore((state) => state.cursorMode);
+  const setStageScale = useWhiteboardLocalStore((state) => state.setStageScale);
+  const setStagePos = useWhiteboardLocalStore((state) => state.setStagePos);
+  const clearSelection = useWhiteboardLocalStore(
+    (state) => state.clearSelection,
+  );
+
+  // 선택 해제 핸들러
+  const handleCheckDeselect = useCallback(
+    (e: Konva.KonvaEventObject<MouseEvent | TouchEvent>) => {
+      if (editingTextId) return;
+
+      const clickedOnEmpty =
+        e.target === e.target.getStage() || e.target.hasName('bg-rect');
+
+      if (clickedOnEmpty) {
+        clearSelection();
+        useWhiteboardLocalStore.getState().setSelectedHandleIndex(null);
+      }
+    },
+    [editingTextId, clearSelection],
+  );
+
+  const { startSelection, cancelSelection } = useSelectionBox({
+    stageRef,
+    enabled: cursorMode === 'select',
+  });
+
+  // 마우스 이벤트 통합 훅
+  const { handlePointerDown, handlePointerMove, cancelDrawing, cancelErasing } =
+    useCanvasMouseEvents({
+      onDeselect: handleCheckDeselect,
+      onSelectionBoxStart: startSelection,
+    });
+
+  // 핀치 줌 훅
+  const {
+    isActive: isPinching,
+    handleTouchStart: handlePinchStart,
+    handleTouchMove: handlePinchMove,
+    handleTouchEnd: handlePinchEnd,
+  } = usePinchZoom({
+    stageRef,
+    onScaleChange: setStageScale,
+    onPositionChange: setStagePos,
+    onPinchStart: () => {
+      // 핀치 시작 시 그리기/지우개/선택박스 취소
+      cancelDrawing();
+      cancelErasing();
+      cancelSelection();
+      // 아이템 선택 해제
+      clearSelection();
+    },
+  });
+
+  // 캔버스 드래그 가능 여부 (핀치 줌 중에는 비활성화함)
+  const isDraggable = cursorMode === 'move' && !isPinching;
+
+  const handleTouchStart = useCallback(
+    (e: Konva.KonvaEventObject<TouchEvent>) => {
+      if (e.evt.touches.length === 2) {
+        handlePinchStart(e.evt);
+      } else {
+        handlePointerDown(e);
+      }
+    },
+    [handlePinchStart, handlePointerDown],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: Konva.KonvaEventObject<TouchEvent>) => {
+      if (e.evt.touches.length === 2) {
+        handlePinchMove(e.evt);
+      } else {
+        handlePointerMove(e);
+      }
+    },
+    [handlePinchMove, handlePointerMove],
+  );
+
+  const handleTouchEnd = useCallback(
+    (e: Konva.KonvaEventObject<TouchEvent>) => {
+      handlePinchEnd(e.evt);
+    },
+    [handlePinchEnd],
+  );
+
+  const handleWheelWithEvent = useCallback(
+    (e: Konva.KonvaEventObject<WheelEvent>) => {
+      handleWheel(e);
+
+      const stage = stageRef.current;
+      if (!stage) return;
+
+      // wheel 후 커서 위치 업데이트
+      const pointerPos = stage.getPointerPosition();
+      if (pointerPos) {
+        const transform = stage.getAbsoluteTransform().copy().invert();
+        const canvasPos = transform.point(pointerPos);
+
+        const awareness = useWhiteboardSharedStore.getState().awareness;
+        if (awareness) {
+          const currentState = awareness.getLocalState();
+          if (currentState) {
+            awareness.setLocalState({
+              ...currentState,
+              cursor: { x: canvasPos.x, y: canvasPos.y },
+            });
+          }
+        }
+      }
+
+      stage.fire('stageTransformChange');
+    },
+    [handleWheel, stageRef],
+  );
+
+  return {
+    isDraggable,
+    handlePointerDown,
+    handlePointerMove,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleWheelWithEvent,
+  };
+}
diff --git a/frontend/src/hooks/useCanvasShortcuts.ts b/frontend/src/hooks/useCanvasShortcuts.ts
index f1bb2b0d..f1ee2146 100644
--- a/frontend/src/hooks/useCanvasShortcuts.ts
+++ b/frontend/src/hooks/useCanvasShortcuts.ts
@@ -7,14 +7,10 @@ import { CursorMode } from '@/types/whiteboard/base';
 
 interface UseCanvasShortcutsProps {
   isArrowOrLineSelected: boolean;
-  selectedHandleIndex: number | null;
-  deleteControlPoint: () => boolean;
 }
 
 export const useCanvasShortcuts = ({
   isArrowOrLineSelected,
-  selectedHandleIndex,
-  deleteControlPoint,
 }: UseCanvasShortcutsProps) => {
   const selectedIds = useWhiteboardLocalStore((state) => state.selectedIds);
   const selectedId = selectedIds[0] ?? null;
@@ -24,7 +20,10 @@ export const useCanvasShortcuts = ({
   const clearSelection = useWhiteboardLocalStore(
     (state) => state.clearSelection,
   );
-  const { deleteItem, deleteItems } = useItemActions();
+  const selectedHandleIndex = useWhiteboardLocalStore(
+    (state) => state.selectedHandleIndex,
+  );
+  const { deleteItem, deleteItems, deleteArrowControlPoint } = useItemActions();
   const { undo, redo } = useWhiteboardHistory();
   const { copy, paste } = useWhiteboardClipboard();
 
@@ -112,7 +111,10 @@ export const useCanvasShortcuts = ({
           isArrowOrLineSelected &&
           selectedHandleIndex !== null
         ) {
-          const deleted = deleteControlPoint();
+          const deleted = deleteArrowControlPoint(
+            selectedId,
+            selectedHandleIndex,
+          );
           if (deleted) return;
         }
 
@@ -150,7 +152,7 @@ export const useCanvasShortcuts = ({
     deleteItems,
     isArrowOrLineSelected,
     selectedHandleIndex,
-    deleteControlPoint,
+    deleteArrowControlPoint,
     clearSelection,
     undo,
     redo,
diff --git a/frontend/src/hooks/useItemActions.ts b/frontend/src/hooks/useItemActions.ts
index fb64f57c..5315fa67 100644
--- a/frontend/src/hooks/useItemActions.ts
+++ b/frontend/src/hooks/useItemActions.ts
@@ -2,11 +2,14 @@ import { v4 as uuidv4 } from 'uuid';
 import * as Y from 'yjs';
 
 import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
 import {
   CANVAS_WIDTH,
   CANVAS_HEIGHT,
 } from '@/components/whiteboard/constants/canvas';
 import { TEXT_SIZE_PRESETS } from '@/constants/textPresets';
+import { pointToSegmentDistance } from '@/utils/arrow';
+import { getWorldPointerPosition } from '@/utils/coordinate';
 
 import type {
   WhiteboardItem,
@@ -342,6 +345,79 @@ export function useItemActions() {
     yItems.doc.transact(fn, yjsOrigin);
   };
 
+  const deleteArrowControlPoint = (arrowId: string, handleIndex: number) => {
+    if (!yItems || !yItems.doc) return false;
+
+    const yMaps = yItems.toArray();
+    const index = yMaps.findIndex((yMap) => yMap.get('id') === arrowId);
+    if (index === -1) return false;
+
+    const store = useWhiteboardSharedStore.getState();
+    const targetItem = store.items.find((item) => item.id === arrowId);
+    if (
+      !targetItem ||
+      (targetItem.type !== 'arrow' && targetItem.type !== 'line')
+    )
+      return false;
+
+    if (handleIndex >= 2 && handleIndex < targetItem.points.length - 2) {
+      const newPoints = [...targetItem.points];
+      newPoints.splice(handleIndex, 2);
+
+      if (newPoints.length >= 4) {
+        updateItem(arrowId, { points: newPoints });
+        useWhiteboardLocalStore.getState().setSelectedHandleIndex(null);
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const insertArrowControlPoint = (arrowId: string) => {
+    const store = useWhiteboardSharedStore.getState();
+    const localStore = useWhiteboardLocalStore.getState();
+    const targetItem = store.items.find((item) => item.id === arrowId);
+
+    if (
+      !targetItem ||
+      (targetItem.type !== 'arrow' && targetItem.type !== 'line')
+    )
+      return;
+
+    const stage = localStore.stageRef?.current;
+    if (!stage) return;
+
+    const worldPos = getWorldPointerPosition(stage);
+    const worldX = worldPos.x;
+    const worldY = worldPos.y;
+
+    let minDistance = Infinity;
+    let insertIndex = 2;
+
+    for (let i = 0; i < targetItem.points.length - 2; i += 2) {
+      const x1 = targetItem.points[i];
+      const y1 = targetItem.points[i + 1];
+      const x2 = targetItem.points[i + 2];
+      const y2 = targetItem.points[i + 3];
+
+      const distance = pointToSegmentDistance(worldX, worldY, x1, y1, x2, y2);
+
+      if (distance < minDistance) {
+        minDistance = distance;
+        insertIndex = i + 2;
+      }
+    }
+
+    const newPoints = [
+      ...targetItem.points.slice(0, insertIndex),
+      worldX,
+      worldY,
+      ...targetItem.points.slice(insertIndex),
+    ];
+
+    updateItem(arrowId, { points: newPoints });
+  };
+
   return {
     addText,
     addArrow,
@@ -358,5 +434,7 @@ export function useItemActions() {
     bringForward,
     sendBackward,
     performTransaction,
+    deleteArrowControlPoint,
+    insertArrowControlPoint,
   };
 }
diff --git a/frontend/src/hooks/useViewportController.ts b/frontend/src/hooks/useViewportController.ts
new file mode 100644
index 00000000..1bd72dc3
--- /dev/null
+++ b/frontend/src/hooks/useViewportController.ts
@@ -0,0 +1,148 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import Konva from 'konva';
+import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
+import { getViewportRect, filterVisibleItems } from '@/utils/viewport';
+import type { WhiteboardItem } from '@/types/whiteboard';
+
+interface UseViewportControllerProps {
+  stageRef: React.RefObject<Konva.Stage | null>;
+  size: { width: number; height: number };
+  items: WhiteboardItem[];
+}
+
+export function useViewportController({
+  stageRef,
+  size,
+  items,
+}: UseViewportControllerProps) {
+  const canvasWidth = useWhiteboardSharedStore((state) => state.canvasWidth);
+  const canvasHeight = useWhiteboardSharedStore((state) => state.canvasHeight);
+  const setViewportSize = useWhiteboardLocalStore(
+    (state) => state.setViewportSize,
+  );
+  const setStageScale = useWhiteboardLocalStore((state) => state.setStageScale);
+  const setStagePos = useWhiteboardLocalStore((state) => state.setStagePos);
+
+  const isInitialMount = useRef(true);
+  const [pixelRatio, setPixelRatio] = useState(
+    typeof window !== 'undefined' ? window.devicePixelRatio : 1,
+  );
+  const [viewportRect, setViewportRect] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  // 초기 Stage 위치 설정
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (
+      !stage ||
+      !isInitialMount.current ||
+      size.width === 0 ||
+      size.height === 0
+    )
+      return;
+
+    // 캔버스를 화면 정가운데 배치
+    const centerPos = {
+      x: (size.width - canvasWidth) / 2,
+      y: (size.height - canvasHeight) / 2,
+    };
+
+    stage.scale({ x: 1, y: 1 });
+    stage.position(centerPos);
+    stage.batchDraw();
+    setViewportSize(size.width, size.height);
+    setStagePos(centerPos);
+    setStageScale(1);
+
+    useWhiteboardLocalStore.getState().setStageRef(stageRef);
+
+    isInitialMount.current = false;
+  }, [
+    size.width,
+    size.height,
+    canvasWidth,
+    canvasHeight,
+    setViewportSize,
+    setStagePos,
+    setStageScale,
+    stageRef,
+  ]);
+
+  // viewport 업데이트
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+
+    const updateViewport = () => {
+      setViewportRect(getViewportRect(stage));
+    };
+
+    // 초기 viewport 설정
+    updateViewport();
+
+    // Stage 이동/줌 시 viewport 업데이트
+    let rafId: number;
+    const throttledUpdate = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        updateViewport();
+        rafId = 0;
+      });
+    };
+
+    stage.on('dragmove', throttledUpdate);
+    stage.on('wheel', throttledUpdate);
+
+    return () => {
+      stage.off('dragmove', throttledUpdate);
+      stage.off('wheel', throttledUpdate);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [stageRef]);
+
+  // 화면에 보이는 아이템만 필터링
+  const visibleItems = useMemo(() => {
+    if (!viewportRect) return items;
+    return filterVisibleItems(items, viewportRect);
+  }, [items, viewportRect]);
+
+  // 줌 레벨에 따른 pixelRatio 조절
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+
+    const updatePixelRatio = () => {
+      const scale = stage.scaleX();
+      let ratio: number;
+      if (scale >= 1.5) ratio = window.devicePixelRatio;
+      else if (scale >= 1) ratio = 1.5;
+      else if (scale >= 0.5) ratio = 1;
+      else if (scale >= 0.3) ratio = 0.5;
+      else ratio = 0.25;
+
+      setPixelRatio(ratio);
+    };
+
+    updatePixelRatio();
+
+    stage.on('wheel', updatePixelRatio);
+
+    return () => {
+      stage.off('wheel', updatePixelRatio);
+    };
+  }, [stageRef]);
+
+  // viewport 크기를 store에 업데이트
+  useEffect(() => {
+    if (size.width > 0 && size.height > 0) {
+      setViewportSize(size.width, size.height);
+    }
+  }, [size.width, size.height, setViewportSize]);
+
+  return { visibleItems, pixelRatio };
+}
diff --git a/frontend/src/store/useWhiteboardLocalStore.ts b/frontend/src/store/useWhiteboardLocalStore.ts
index ca0c7286..b8af8eaf 100644
--- a/frontend/src/store/useWhiteboardLocalStore.ts
+++ b/frontend/src/store/useWhiteboardLocalStore.ts
@@ -34,6 +34,7 @@ interface LocalState {
     x2: number;
     y2: number;
   } | null;
+  selectedHandleIndex: number | null;
 }
 
 interface LocalActions {
@@ -60,6 +61,7 @@ interface LocalActions {
     callback: ((cursor: { x: number; y: number } | null) => void) | null,
   ) => void;
   setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
+  setSelectedHandleIndex: (index: number | null) => void;
 }
 
 type LocalStore = LocalState & LocalActions;
@@ -140,6 +142,10 @@ export const useWhiteboardLocalStore = create<LocalStore>((set, get) => ({
   setAwarenessCallback: (callback) => set({ awarenessCallback: callback }),
   setCursorCallback: (callback) => set({ cursorCallback: callback }),
 
+  // 화살표 핸들 선택
+  selectedHandleIndex: null,
+  setSelectedHandleIndex: (index) => set({ selectedHandleIndex: index }),
+
   // Text Editing 초기값
   editingTextId: null,
   setEditingTextId: (id) => set({ editingTextId: id }),