diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index 21a5bb0f..fdaddfc3 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -1684,53 +1684,43 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                       const isExpanded = expandedItems.has(itemId);
                       const level = item.level || 0;
 
-                      // 조인에 사용하는 leftColumn을 필수로 표시
-                      const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
+                      // 🔧 수정: "표시할 컬럼 선택"에서 설정한 컬럼을 우선 사용
+                      const configuredColumns = componentConfig.leftPanel?.columns || [];
                       let displayFields: { label: string; value: any }[] = [];
 
                       // 디버그 로그
                       if (index === 0) {
                         console.log("🔍 좌측 패널 표시 로직:");
-                        console.log("  - leftColumn (조인 키):", leftColumn);
+                        console.log("  - 설정된 표시 컬럼:", configuredColumns);
                         console.log("  - item keys:", Object.keys(item));
                       }
 
-                      if (leftColumn) {
-                        // 조인 모드: leftColumn 값을 첫 번째로 표시 (필수)
-                        displayFields.push({
-                          label: leftColumn,
-                          value: item[leftColumn],
+                      if (configuredColumns.length > 0) {
+                        // 🔧 "표시할 컬럼 선택"에서 설정한 컬럼 사용
+                        displayFields = configuredColumns.slice(0, 2).map((col: any) => {
+                          const colName = typeof col === "string" ? col : col.name || col.columnName;
+                          const colLabel = typeof col === "object" ? col.label : leftColumnLabels[colName] || colName;
+                          return {
+                            label: colLabel,
+                            value: item[colName],
+                          };
                         });
 
-                        // 추가로 다른 의미있는 필드 1-2개 표시 (동적)
-                        const additionalKeys = Object.keys(item).filter(
-                          (k) =>
-                            k !== "id" &&
-                            k !== "ID" &&
-                            k !== leftColumn &&
-                            shouldShowField(k),
-                        );
-
-                        if (additionalKeys.length > 0) {
-                          displayFields.push({
-                            label: additionalKeys[0],
-                            value: item[additionalKeys[0]],
-                          });
-                        }
-
                         if (index === 0) {
-                          console.log("  ✅ 조인 키 기반 표시:", displayFields);
+                          console.log("  ✅ 설정된 컬럼 기반 표시:", displayFields);
                         }
                       } else {
-                        // 상세 모드 또는 설정 없음: 자동으로 첫 2개 필드 표시
-                        const keys = Object.keys(item).filter((k) => k !== "id" && k !== "ID");
+                        // 설정된 컬럼이 없으면 자동으로 첫 2개 필드 표시
+                        const keys = Object.keys(item).filter(
+                          (k) => k !== "id" && k !== "ID" && k !== "children" && k !== "level" && shouldShowField(k)
+                        );
                         displayFields = keys.slice(0, 2).map((key) => ({
-                          label: key,
+                          label: leftColumnLabels[key] || key,
                           value: item[key],
                         }));
 
                         if (index === 0) {
-                          console.log("  ⚠️ 조인 키 없음, 자동 선택:", displayFields);
+                          console.log("  ⚠️ 설정된 컬럼 없음, 자동 선택:", displayFields);
                         }
                       }