diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 679ed5a8..fa5dc755 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -257,13 +257,16 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       }
     : component;
 
+  // componentStyle에서 width, height 제거 (size.width, size.height만 사용)
+  const { width: _styleWidth, height: _styleHeight, ...restComponentStyle } = componentStyle || {};
+  
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    width: getWidth(), // getWidth()가 모든 우선순위를 처리
-    height: getHeight(),
+    ...restComponentStyle, // width/height 제외한 스타일 먼저 적용
+    width: getWidth(), // size.width로 덮어쓰기
+    height: getHeight(), // size.height로 덮어쓰기
     zIndex: component.type === "layout" ? 1 : position.z || 2,
-    ...componentStyle,
     right: undefined,
   };
 
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 54f26a8d..0f3cc9b4 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -634,9 +634,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             }
           }
 
+          console.log("🔍 최종 newComp:", { id: newComp.id, size: newComp.size, path });
           return newComp;
         });
 
+        console.log(
+          "🔍 updatedComponents:",
+          updatedComponents.map((c) => ({ id: c.id, size: c.size })),
+        );
+
         // 🔥 새로운 layout 생성
         const newLayout = { ...prevLayout, components: updatedComponents };