diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 7479c9c9..3ea717d3 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -24,6 +24,13 @@ import {
   calculateRelativePositions,
   restoreAbsolutePositions,
 } from "@/lib/utils/groupingUtils";
+import {
+  adjustGridColumnsFromSize,
+  updateSizeFromGridColumns,
+  calculateWidthFromColumns,
+  snapSizeToGrid,
+  snapToGrid,
+} from "@/lib/utils/gridUtils";
 
 // 10px 단위 스냅 함수
 const snapTo10px = (value: number): number => {
@@ -533,7 +540,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               padding: prevLayout.gridSettings.padding,
               snapToGrid: prevLayout.gridSettings.snapToGrid || false,
             });
-            const snappedSize = snapSizeTo10px(
+            const snappedSize = snapSizeToGrid(
               newComp.size,
               currentGridInfo,
               prevLayout.gridSettings as GridUtilSettings,
@@ -1083,8 +1090,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         };
 
         const adjustedComponents = layout.components.map((comp) => {
-          const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings);
-          const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings);
+          const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
+          const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
 
           // gridColumns가 없거나 범위를 벗어나면 자동 조정
           let adjustedGridColumns = comp.gridColumns;
@@ -1198,8 +1205,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         };
 
         finalComponents = scaledComponents.map((comp) => {
-          const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings);
-          const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings);
+          const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
+          const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
 
           // gridColumns 재계산
           const adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings);
@@ -1268,8 +1275,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     };
 
     const adjustedComponents = layout.components.map((comp) => {
-      const snappedPosition = snapPositionTo10px(comp.position, currentGridInfo, gridUtilSettings);
-      const snappedSize = snapSizeTo10px(comp.size, currentGridInfo, gridUtilSettings);
+      const snappedPosition = snapToGrid(comp.position, currentGridInfo, gridUtilSettings);
+      const snappedSize = snapSizeToGrid(comp.size, currentGridInfo, gridUtilSettings);
 
       // gridColumns가 없거나 범위를 벗어나면 자동 조정
       let adjustedGridColumns = comp.gridColumns;
@@ -1404,7 +1411,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       // 격자 스냅 적용
       const snappedPosition =
         layout.gridSettings?.snapToGrid && currentGridInfo
-          ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
+          ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
           : { x: dropX, y: dropY, z: 1 };
 
       console.log("🎨 템플릿 드롭:", {
@@ -1823,7 +1830,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       // 격자 스냅 적용
       const snappedPosition =
         layout.gridSettings?.snapToGrid && currentGridInfo
-          ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
+          ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
           : { x: dropX, y: dropY, z: 1 };
 
       console.log("🏗️ 레이아웃 드롭 (줌 보정):", {