화면 좌우 맞추기

frontend/components/screen/ResponsiveDesignerContainer.tsx

@@ -35,9 +35,9 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
 
     switch (viewMode) {
       case "fit":
-        // 컨테이너에 맞춰 비율 유지하며 조정 (여백 허용)
-        const scaleX = (containerSize.width - 40) / designWidth;
-        const scaleY = (containerSize.height - 40) / designHeight;
+        // 컨테이너에 맞춰 비율 유지하며 조정 (좌우 여백 16px씩 유지)
+        const scaleX = (containerSize.width - 32) / designWidth;
+        const scaleY = (containerSize.height - 64) / designHeight;
         return Math.min(scaleX, scaleY, 2); // 최대 2배까지 허용
 
       case "custom":
@@ -154,7 +154,7 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
       {/* 디자인 영역 */}
       <div
         ref={containerRef}
-        className="flex-1 overflow-auto p-8"
+        className="flex-1 overflow-auto px-4 py-8"
         style={{
           justifyContent: "center",
           alignItems: "flex-start",