diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index e09acd6b..8ee116f9 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -328,147 +328,214 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
     const isInputField = inputFieldTypes.includes(componentType);
 
     return (
-      <div className="space-y-2">
-        {/* 너비 + 높이 (같은 행) */}
-        <div className="grid grid-cols-2 gap-2">
-          <div className="space-y-1">
-            <Label className="text-xs">너비 (px)</Label>
-            <Input
-              type="number"
-              min={10}
-              max={3840}
-              step="1"
-              value={localWidth}
-              onChange={(e) => {
-                setLocalWidth(e.target.value);
-              }}
-              onBlur={(e) => {
-                const value = parseInt(e.target.value) || 0;
-                if (value >= 10) {
-                  const snappedValue = Math.round(value / 10) * 10;
-                  handleUpdate("size.width", snappedValue);
-                  setLocalWidth(String(snappedValue));
-                }
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  const value = parseInt(e.currentTarget.value) || 0;
+      <div className="space-y-1">
+        {/* DIMENSIONS 섹션 */}
+        <div className="border-b border-border/50 pb-3 mb-3">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DIMENSIONS</h4>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <Label className="text-[10px] text-muted-foreground">너비</Label>
+              <Input
+                type="number"
+                min={10}
+                max={3840}
+                step="1"
+                value={localWidth}
+                onChange={(e) => {
+                  setLocalWidth(e.target.value);
+                }}
+                onBlur={(e) => {
+                  const value = parseInt(e.target.value) || 0;
                   if (value >= 10) {
                     const snappedValue = Math.round(value / 10) * 10;
                     handleUpdate("size.width", snappedValue);
                     setLocalWidth(String(snappedValue));
                   }
-                  e.currentTarget.blur();
-                }
-              }}
-              placeholder="100"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs">높이</Label>
-            <Input
-              type="number"
-              value={localHeight}
-              onChange={(e) => {
-                setLocalHeight(e.target.value);
-              }}
-              onBlur={(e) => {
-                const value = parseInt(e.target.value) || 0;
-                if (value >= 10) {
-                  const snappedValue = Math.round(value / 10) * 10;
-                  handleUpdate("size.height", snappedValue);
-                  setLocalHeight(String(snappedValue));
-                }
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  const value = parseInt(e.currentTarget.value) || 0;
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    const value = parseInt(e.currentTarget.value) || 0;
+                    if (value >= 10) {
+                      const snappedValue = Math.round(value / 10) * 10;
+                      handleUpdate("size.width", snappedValue);
+                      setLocalWidth(String(snappedValue));
+                    }
+                    e.currentTarget.blur();
+                  }
+                }}
+                placeholder="100"
+                className="h-7 text-xs"
+              />
+            </div>
+            <div className="flex-1">
+              <Label className="text-[10px] text-muted-foreground">높이</Label>
+              <Input
+                type="number"
+                value={localHeight}
+                onChange={(e) => {
+                  setLocalHeight(e.target.value);
+                }}
+                onBlur={(e) => {
+                  const value = parseInt(e.target.value) || 0;
                   if (value >= 10) {
                     const snappedValue = Math.round(value / 10) * 10;
                     handleUpdate("size.height", snappedValue);
                     setLocalHeight(String(snappedValue));
                   }
-                  e.currentTarget.blur();
-                }
-              }}
-              step={1}
-              placeholder="10"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    const value = parseInt(e.currentTarget.value) || 0;
+                    if (value >= 10) {
+                      const snappedValue = Math.round(value / 10) * 10;
+                      handleUpdate("size.height", snappedValue);
+                      setLocalHeight(String(snappedValue));
+                    }
+                    e.currentTarget.blur();
+                  }
+                }}
+                step={1}
+                placeholder="10"
+                className="h-7 text-xs"
+              />
+            </div>
+          </div>
+          {/* Z-Index */}
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">Z-Index</span>
+            <div className="w-[140px]">
+              <Input
+                type="number"
+                step="1"
+                value={currentPosition.z || 1}
+                onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
+                className="h-7 text-xs"
+              />
+            </div>
           </div>
         </div>
 
         {/* Title (group/area) */}
         {(selectedComponent.type === "group" || selectedComponent.type === "area") && (
-          <div className="space-y-1">
-            <Label className="text-xs">제목</Label>
-            <Input
-              value={group.title || area.title || ""}
-              onChange={(e) => handleUpdate("title", e.target.value)}
-              placeholder="제목"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
-          </div>
-        )}
-
-        {/* Description (area만) */}
-        {selectedComponent.type === "area" && (
-          <div className="space-y-1">
-            <Label className="text-xs">설명</Label>
-            <Input
-              value={area.description || ""}
-              onChange={(e) => handleUpdate("description", e.target.value)}
-              placeholder="설명"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
-          </div>
-        )}
-
-        {/* Z-Index */}
-        <div className="space-y-1">
-          <Label className="text-xs">Z-Index</Label>
-          <Input
-            type="number"
-            step="1"
-            value={currentPosition.z || 1}
-            onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
-            className="h-6 w-full px-2 py-0 text-xs"
-          />
-        </div>
-
-        {/* 라벨 스타일 - 입력 필드에서만 표시 */}
-        {isInputField && (
-          <Collapsible>
-            <CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-slate-50 p-2 text-xs font-medium hover:bg-slate-100">
-              라벨 스타일
-              <ChevronDown className="h-3.5 w-3.5" />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="mt-2 space-y-2">
-              <div className="space-y-1">
-                <Label className="text-xs">라벨 텍스트</Label>
+          <div className="border-b border-border/50 pb-3 mb-3">
+            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CONTENT</h4>
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">제목</span>
+              <div className="w-[140px]">
                 <Input
-                  value={
-                    selectedComponent.style?.labelText !== undefined
-                      ? selectedComponent.style.labelText
-                      : selectedComponent.label || selectedComponent.componentConfig?.label || ""
-                  }
-                  onChange={(e) => {
-                    handleUpdate("style.labelText", e.target.value);
-                    handleUpdate("label", e.target.value); // label도 함께 업데이트
-                  }}
-                  placeholder="라벨을 입력하세요 (비우면 라벨 없음)"
-                  className="h-6 w-full px-2 py-0 text-xs"
+                  value={group.title || area.title || ""}
+                  onChange={(e) => handleUpdate("title", e.target.value)}
+                  placeholder="제목"
+                  className="h-7 text-xs"
                 />
               </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs">위치</Label>
+            </div>
+            {selectedComponent.type === "area" && (
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-xs text-muted-foreground">설명</span>
+                <div className="w-[140px]">
+                  <Input
+                    value={area.description || ""}
+                    onChange={(e) => handleUpdate("description", e.target.value)}
+                    placeholder="설명"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* OPTIONS 섹션 */}
+        <div className="border-b border-border/50 pb-3 mb-3">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">OPTIONS</h4>
+          {(isInputField || widget.required !== undefined) && (() => {
+            const colName = widget.columnName || selectedComponent?.columnName;
+            const colMeta = colName ? currentTable?.columns?.find(
+              (c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase()
+            ) : null;
+            const isNotNull = colMeta && ((colMeta as any).isNullable === "NO" || (colMeta as any).isNullable === "N" || (colMeta as any).is_nullable === "NO" || (colMeta as any).is_nullable === "N");
+            return (
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-xs text-muted-foreground">
+                  필수
+                  {isNotNull && <span className="text-muted-foreground/60 ml-1">(NOT NULL)</span>}
+                </span>
+                <Checkbox
+                  checked={isNotNull || widget.required === true || selectedComponent.componentConfig?.required === true}
+                  onCheckedChange={(checked) => {
+                    if (isNotNull) return;
+                    handleUpdate("required", checked);
+                    handleUpdate("componentConfig.required", checked);
+                  }}
+                  disabled={!!isNotNull}
+                  className="h-4 w-4"
+                />
+              </div>
+            );
+          })()}
+          {(isInputField || widget.readonly !== undefined) && (
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">읽기전용</span>
+              <Checkbox
+                checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
+                onCheckedChange={(checked) => {
+                  handleUpdate("readonly", checked);
+                  handleUpdate("componentConfig.readonly", checked);
+                }}
+                className="h-4 w-4"
+              />
+            </div>
+          )}
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">숨김</span>
+            <Checkbox
+              checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
+              onCheckedChange={(checked) => {
+                handleUpdate("hidden", checked);
+                handleUpdate("componentConfig.hidden", checked);
+              }}
+              className="h-4 w-4"
+            />
+          </div>
+        </div>
+
+        {/* LABEL 섹션 - 입력 필드에서만 표시 */}
+        {isInputField && (
+          <Collapsible>
+            <CollapsibleTrigger className="flex w-full items-center justify-between py-0.5 text-left">
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">LABEL</span>
+              <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground/50" />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="mt-1.5 space-y-1">
+              {/* 라벨 텍스트 */}
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-xs text-muted-foreground">텍스트</span>
+                <div className="w-[140px]">
+                  <Input
+                    value={
+                      selectedComponent.style?.labelText !== undefined
+                        ? selectedComponent.style.labelText
+                        : selectedComponent.label || selectedComponent.componentConfig?.label || ""
+                    }
+                    onChange={(e) => {
+                      handleUpdate("style.labelText", e.target.value);
+                      handleUpdate("label", e.target.value);
+                    }}
+                    placeholder="라벨"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+              {/* 위치 + 간격 */}
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground">위치</Label>
                   <Select
                     value={selectedComponent.style?.labelPosition || "top"}
                     onValueChange={(value) => handleUpdate("style.labelPosition", value)}
                   >
-                    <SelectTrigger className="h-6 text-xs">
+                    <SelectTrigger className="h-7 text-xs">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -479,8 +546,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="space-y-1">
-                  <Label className="text-xs">간격</Label>
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground">간격</Label>
                   <Input
                     value={
                       (selectedComponent.style?.labelPosition === "left" || selectedComponent.style?.labelPosition === "right")
@@ -495,21 +562,22 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                         handleUpdate("style.labelMarginBottom", e.target.value);
                       }
                     }}
-                    className="h-6 w-full px-2 py-0 text-xs"
+                    className="h-7 text-xs"
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs">크기</Label>
+              {/* 크기 + 색상 */}
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground">크기</Label>
                   <Input
                     value={selectedComponent.style?.labelFontSize || "12px"}
                     onChange={(e) => handleUpdate("style.labelFontSize", e.target.value)}
-                    className="h-6 w-full px-2 py-0 text-xs"
+                    className="h-7 text-xs"
                   />
                 </div>
-                <div className="space-y-1">
-                  <Label className="text-xs">색상</Label>
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground">색상</Label>
                   <ColorPickerWithTransparent
                     value={selectedComponent.style?.labelColor}
                     onChange={(value) => handleUpdate("style.labelColor", value)}
@@ -518,14 +586,15 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs">굵기</Label>
+              {/* 굵기 */}
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-xs text-muted-foreground">굵기</span>
+                <div className="w-[140px]">
                   <Select
                     value={selectedComponent.style?.labelFontWeight || "500"}
                     onValueChange={(value) => handleUpdate("style.labelFontWeight", value)}
                   >
-                    <SelectTrigger className="h-6 text-xs">
+                    <SelectTrigger className="h-7 text-xs">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -536,84 +605,29 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="flex items-center space-x-2 pt-5">
-                  <Checkbox
-                    checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
-                    onCheckedChange={(checked) => {
-                      const boolValue = checked === true;
-                      // 🔧 "필수"처럼 직접 경로로 업데이트! (style 객체 전체 덮어쓰기 방지)
-                      handleUpdate("style.labelDisplay", boolValue);
-                      handleUpdate("labelDisplay", boolValue);
-                      // labelText도 설정 (처음 켤 때 라벨 텍스트가 없을 수 있음)
-                      if (boolValue && !selectedComponent.style?.labelText) {
-                        const labelValue = selectedComponent.label || selectedComponent.componentConfig?.label || "";
-                        if (labelValue) {
-                          handleUpdate("style.labelText", labelValue);
-                        }
+              </div>
+              {/* 표시 */}
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-xs text-muted-foreground">표시</span>
+                <Checkbox
+                  checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
+                  onCheckedChange={(checked) => {
+                    const boolValue = checked === true;
+                    handleUpdate("style.labelDisplay", boolValue);
+                    handleUpdate("labelDisplay", boolValue);
+                    if (boolValue && !selectedComponent.style?.labelText) {
+                      const labelValue = selectedComponent.label || selectedComponent.componentConfig?.label || "";
+                      if (labelValue) {
+                        handleUpdate("style.labelText", labelValue);
                       }
-                    }}
-                    className="h-4 w-4"
-                  />
-                  <Label className="text-xs">표시</Label>
-                </div>
+                    }
+                  }}
+                  className="h-4 w-4"
+                />
               </div>
             </CollapsibleContent>
           </Collapsible>
         )}
-
-        {/* 옵션 - 입력 필드에서는 항상 표시, 기타 컴포넌트는 속성이 정의된 경우만 표시 */}
-        <div className="grid grid-cols-2 gap-2">
-          {(isInputField || widget.required !== undefined) && (() => {
-            const colName = widget.columnName || selectedComponent?.columnName;
-            const colMeta = colName ? currentTable?.columns?.find(
-              (c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase()
-            ) : null;
-            const isNotNull = colMeta && ((colMeta as any).isNullable === "NO" || (colMeta as any).isNullable === "N" || (colMeta as any).is_nullable === "NO" || (colMeta as any).is_nullable === "N");
-            return (
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  checked={isNotNull || widget.required === true || selectedComponent.componentConfig?.required === true}
-                  onCheckedChange={(checked) => {
-                    if (isNotNull) return;
-                    handleUpdate("required", checked);
-                    handleUpdate("componentConfig.required", checked);
-                  }}
-                  disabled={!!isNotNull}
-                  className="h-4 w-4"
-                />
-                <Label className="text-xs">
-                  필수
-                  {isNotNull && <span className="text-muted-foreground ml-1">(NOT NULL)</span>}
-                </Label>
-              </div>
-            );
-          })()}
-          {(isInputField || widget.readonly !== undefined) && (
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
-                onCheckedChange={(checked) => {
-                  handleUpdate("readonly", checked);
-                  handleUpdate("componentConfig.readonly", checked);
-                }}
-                className="h-4 w-4"
-              />
-              <Label className="text-xs">읽기전용</Label>
-            </div>
-          )}
-          {/* 숨김 옵션 - 모든 컴포넌트에서 표시 */}
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
-              onCheckedChange={(checked) => {
-                handleUpdate("hidden", checked);
-                handleUpdate("componentConfig.hidden", checked);
-              }}
-              className="h-4 w-4"
-            />
-            <Label className="text-xs">숨김</Label>
-          </div>
-        </div>
       </div>
     );
   };