feat: 워크스페이스 분할 보기(2·4분할) + 구분선 드래그 크기 조절

- 탭바에 분할 레이아웃 버튼 추가: 1분할 / 2분할(좌우) / 2분할(상하) / 4분할
  - iframe reparent 없이 absolute 위치만 재계산해 작업 상태 보존
  - 포커스된 칸에 탭 클릭으로 화면 배치, 칸 헤더(↻ 새로고침 · × 비우기)
  - 칸 안 클릭 시 해당 칸 포커스
- 분할 구분선 드래그로 칸 크기(비율) 조절, 더블클릭 50% 초기화
  - 드래그 중 투명 오버레이로 iframe 위에서도 이벤트 유지
  - 비율 12~88% 제한
- 레이아웃·칸 배치·비율을 세션에 저장/복원(계정별 격리 유지)
- 단축키를 포커스 칸 기준으로 동작하도록 정리
- 매뉴얼: [화면 구성·워크스페이스] 에 분할 보기·크기 조절 절 추가, 개요 안내 보강
- e2e: 분할 보기(2·4분할 전환) 케이스 추가

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/Docs/manual/00_overview.md

@@ -31,7 +31,7 @@
 - 메뉴를 클릭하면 **탭으로 열립니다.** 여러 화면을 열어두고 전환해도 입력하던 내용이 유지됩니다.
 - 각 화면에서 **"이 화면 설명"(❓) 버튼**을 누르면, 그 화면에 해당하는 매뉴얼이 새 탭으로 열립니다.
 
-> 탭 사용법, 탭별 새로고침, **키보드 단축키**(Alt+1~9 / Alt+W / Alt+[ / Alt+]) 등 자세한 내용은 좌측 목차 **[화면 구성·워크스페이스·단축키]** 를 참고하세요.
+> 탭 사용법, **분할 보기(2·4분할)·구분선 드래그로 크기 조절**, **키보드 단축키**(Alt+1~9 / Alt+W / Alt+[ / Alt+]) 등 자세한 내용은 좌측 목차 **[화면 구성·워크스페이스·단축키]** 를 참고하세요.
 
 ## 4. 사용자 역할(권한)
 

app/Docs/manual/05_workspace.md

@@ -38,28 +38,55 @@
 - **다른 아이디로 로그인하면** 이전 사용자의 탭은 복원되지 않고 **기본 화면으로 초기화**됩니다. (계정별로 분리됩니다.)
 - 복원되는 것은 **열려 있던 화면 목록**입니다. 관리자 페이지를 거치는 등 작업공간을 완전히 벗어났던 경우, 각 화면은 새로 불러와지므로 **입력 중이던 폼 내용까지 그대로 살아나지는 않습니다.**
 
-## 3. 키보드 단축키
+## 3. 분할 보기 (여러 화면 한눈에)
+
+여러 화면을 **동시에 펼쳐 놓고** 비교하거나 함께 작업할 수 있습니다. 탭바 오른쪽의 **분할 버튼**으로 화면을 나눕니다.
+
+| 버튼 | 모양 | 설명 |
+|---|---|---|
+| **1분할** | □ | 한 화면만 크게 (기본) |
+| **2분할 (좌우)** | ◫ | 화면을 왼쪽/오른쪽 두 칸으로 |
+| **2분할 (상하)** | ⬓ | 화면을 위/아래 두 칸으로 |
+| **4분할** | ⊞ | 2×2 네 칸으로 |
+
+### 칸에 화면 배치하기
+
+- 분할하면 열어 둔 화면들이 칸에 자동으로 채워집니다. 빈 칸에는 안내 문구가 표시됩니다.
+- **칸을 클릭하면 그 칸이 "선택"**(파란 테두리)됩니다. 이 상태에서 **위 탭바의 탭을 클릭**하면 그 화면이 **선택된 칸**에 들어갑니다.
+- 각 칸 위의 **헤더**에는 화면 이름과 함께 **↻(이 칸 새로고침)·×(이 칸 비우기)** 버튼이 있습니다.
+
+### 칸 크기 조절
+
+- 칸 사이의 **구분선에 마우스를 올리면 ↔/↕ 커서**가 나타납니다. **드래그**하면 칸 크기(비율)를 자유롭게 조절할 수 있습니다.
+- 구분선을 **더블클릭**하면 **50:50으로 초기화**됩니다.
+- 조절한 분할 모양·크기도 새로고침·관리자 왕복 후 **그대로 복원**됩니다.
+
+> 분할 상태에서도 각 화면의 작업 내용은 그대로 유지됩니다. 마음껏 나눴다 합쳤다 해도 입력하던 내용이 사라지지 않습니다.
+
+## 4. 키보드 단축키
 
 자주 쓰는 동작은 키보드로 더 빠르게 할 수 있습니다. 브라우저 기본 단축키와 겹치지 않도록 **Alt 키**를 함께 누르는 방식입니다.
 
+동작은 **현재 선택된 칸**을 기준으로 적용됩니다(1분할이면 그 한 화면).
+
 | 단축키 | 동작 |
 |---|---|
-| **Alt + 1 ~ 9** | 왼쪽에서 **n번째 탭**으로 이동 |
+| **Alt + 1 ~ 9** | **n번째 탭**을 선택된 칸에 표시 |
-| **Alt + W** | **현재 탭 닫기** |
+| **Alt + W** | 선택된 칸의 **탭 닫기** |
-| **Alt + ]** | **다음 탭**으로 이동 |
+| **Alt + ]** | 선택된 칸을 **다음 탭**으로 |
-| **Alt + [** | **이전 탭**으로 이동 |
+| **Alt + [** | 선택된 칸을 **이전 탭**으로 |
 
 > macOS 에서도 동일하게 **Option(⌥)** 키가 Alt 역할을 합니다 (예: ⌥ + 1).
 >
 > 참고: `Ctrl/⌘ + W`, `Ctrl/⌘ + 숫자`, `Ctrl + Tab` 은 **브라우저 자체가 먼저 가로채기** 때문에 이 시스템에서 다른 용도로 바꿀 수 없어, 위와 같이 Alt 조합을 사용합니다.
 
-## 4. 그 밖의 이동
+## 5. 그 밖의 이동
 
 - **관리자** 버튼(헤더 오른쪽, 관리자 권한일 때) — 메뉴·코드·판매소 등 **관리자 설정 화면**으로 이동합니다. 갔다가 워크스페이스로 돌아오면 열어 두었던 탭이 복원됩니다.
 - **지자체 선택**(왼쪽 사이드바 아래) — 슈퍼 관리자가 **작업할 지자체를 바꿀 때** 사용합니다.
 - **로그아웃**(헤더 오른쪽) — 시스템에서 나갑니다.
 
-## 5. 도움말 보는 법
+## 6. 도움말 보는 법
 
 - 각 작업 화면의 **"이 화면 설명"(❓) 버튼** — 지금 보고 있는 화면에 해당하는 매뉴얼이 새 탭으로 열립니다.
 - 이 매뉴얼 왼쪽 위 **검색창** — 모든 매뉴얼 페이지에서 단어를 찾아, 결과를 누르면 해당 페이지의 그 단어 위치로 이동해 **노란색으로 표시**해 줍니다.

app/Views/bag/layout/workspace.php

@@ -43,17 +43,39 @@ if ($effectiveLgIdx) {
   html, body { height: 100%; }
   body.gov-portal-shell { height: 100vh; overflow: hidden; }
   .ws-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
-  .ws-tabbar { display: flex; align-items: stretch; gap: 2px; background: #e9eef5; border-bottom: 1px solid var(--border); padding: 4px 6px 0; overflow-x: auto; min-height: 36px; }
+  .ws-topbar { display: flex; align-items: stretch; background: #e9eef5; border-bottom: 1px solid var(--border); }
+  .ws-tabbar { display: flex; align-items: stretch; gap: 2px; padding: 4px 6px 0; overflow-x: auto; min-height: 36px; flex: 1; min-width: 0; }
   .ws-tab { display: inline-flex; align-items: center; gap: .4rem; max-width: 200px; padding: .35rem .6rem; background: #f5f7fa; border: 1px solid var(--border); border-bottom: none; border-radius: 7px 7px 0 0; font-size: .78rem; color: #555; cursor: pointer; white-space: nowrap; }
   .ws-tab .t-name { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
   .ws-tab.active { background: #fff; color: var(--navy); font-weight: 700; box-shadow: 0 -2px 0 #007bff inset; }
+  .ws-tab.focused-tab { box-shadow: 0 -2px 0 #243a5e inset; }
   .ws-tab .t-refresh, .ws-tab .t-close { width: 16px; height: 16px; line-height: 14px; text-align: center; border-radius: 50%; color: #999; font-size: 12px; }
   .ws-tab .t-refresh:hover { background: #dbeafe; color: #1d4ed8; }
   .ws-tab .t-close:hover { background: #e2e8f0; color: #333; }
-  .ws-panels { flex: 1; position: relative; min-height: 0; background: #f0f4f8; }
+  /* 분할 레이아웃 컨트롤 */
-  .ws-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; background: #f0f4f8; }
+  .ws-layout { display: flex; align-items: center; gap: 3px; padding: 4px 8px; flex-shrink: 0; border-left: 1px solid var(--border); }
-  .ws-frame.active { display: block; }
+  .ws-layout button { width: 30px; height: 26px; border: 1px solid var(--border); background: #f5f7fa; border-radius: 6px; color: #64748b; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
-  .ws-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; font-size: .9rem; gap: .5rem; }
+  .ws-layout button:hover { background: #e2e8f0; color: #334155; }
+  .ws-layout button.active { background: #243a5e; color: #fff; border-color: #243a5e; }
+  .ws-panels { flex: 1; position: relative; min-height: 0; background: #cbd5e1; }
+  .ws-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; display: none; background: #fff; box-sizing: border-box; }
+  /* 분할 칸 헤더 */
+  .ws-slot-head { position: absolute; display: none; align-items: center; gap: .3rem; height: 28px; padding: 0 .3rem 0 .6rem; background: #eef2f7; border-bottom: 1px solid var(--border); font-size: .72rem; color: #475569; box-sizing: border-box; cursor: pointer; z-index: 3; }
+  .ws-slot-head.focused { background: #dbeafe; color: var(--navy); box-shadow: inset 0 2px 0 #007bff; font-weight: 700; }
+  .ws-slot-head .sh-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ws-slot-head .sh-btn { width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; color: #94a3b8; flex-shrink: 0; font-size: 12px; }
+  .ws-slot-head .sh-btn:hover { background: #fff; color: #334155; }
+  .ws-slot-empty { position: absolute; display: none; align-items: center; justify-content: center; background: #f8fafc; color: #94a3b8; font-size: .8rem; box-sizing: border-box; cursor: pointer; z-index: 1; text-align: center; padding: 1rem; }
+  /* 분할 구분선 드래그 핸들 */
+  .ws-gutter { position: absolute; display: none; z-index: 6; background: transparent; }
+  .ws-gutter.v { width: 9px; height: 100%; top: 0; cursor: col-resize; }
+  .ws-gutter.h { width: 100%; height: 9px; left: 0; cursor: row-resize; }
+  .ws-gutter:hover { background: rgba(37, 99, 235, .25); }
+  /* 드래그 중 iframe 위에서도 마우스 이벤트를 받기 위한 오버레이 */
+  .ws-drag-overlay { position: absolute; inset: 0; z-index: 50; display: none; }
+  .ws-drag-overlay.v { cursor: col-resize; }
+  .ws-drag-overlay.h { cursor: row-resize; }
+  .ws-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; font-size: .9rem; gap: .5rem; z-index: 2; background: #f0f4f8; }
 </style>
 </head>
 <body class="gov-portal-shell">
@@ -78,7 +100,15 @@ if ($effectiveLgIdx) {
     <?= view('home/_dashboard_gov_portal_sidebar', $navPartial) ?>
 
     <main class="ws-main">
-      <div class="ws-tabbar" id="wsTabBar" role="tablist"></div>
+      <div class="ws-topbar">
+        <div class="ws-tabbar" id="wsTabBar" role="tablist"></div>
+        <div class="ws-layout" id="wsLayout">
+          <button type="button" data-mode="single" title="1분할 (한 화면)"><i class="fa-regular fa-square"></i></button>
+          <button type="button" data-mode="lr" title="2분할 (좌우)"><i class="fa-solid fa-table-columns"></i></button>
+          <button type="button" data-mode="tb" title="2분할 (상하)"><i class="fa-solid fa-table-columns fa-rotate-90"></i></button>
+          <button type="button" data-mode="quad" title="4분할"><i class="fa-solid fa-table-cells-large"></i></button>
+        </div>
+      </div>
       <div class="ws-panels" id="wsPanels">
         <div class="ws-empty" id="wsEmpty">
           <i class="fa-regular fa-window-restore" style="font-size:1.6rem;opacity:.5;"></i>
@@ -96,46 +126,227 @@ if ($effectiveLgIdx) {
     var empty = document.getElementById('wsEmpty');
     var tabs = {}; // id -> {url,title,frame,btn}
     var order = [];
-    var activeId = null;
     var MAX = 12;
 
+    // 분할 레이아웃 상태
+    var layout = 'single';        // single | lr | tb | quad
+    var slots = [null];           // 칸별로 배치된 tab id (길이 = 칸 수)
+    var focused = 0;              // 포커스된 칸 인덱스
+
     function norm(u) { try { var a = new URL(u, location.origin); return a.pathname + a.search; } catch (e) { return u; } }
     function withEmbed(u) {
       try { var a = new URL(u, location.origin); a.searchParams.set('embed', '1'); return a.pathname + a.search; }
       catch (e) { return u + (u.indexOf('?') >= 0 ? '&' : '?') + 'embed=1'; }
     }
 
+    // 분할 비율 (좌 컬럼 폭 / 위 행 높이), 드래그로 조절
+    var vRatio = 0.5, hRatio = 0.5;
+    var RATIO_MIN = 0.12, RATIO_MAX = 0.88;
+    function pct(r) { return (r * 100).toFixed(3) + '%'; }
+
+    // 레이아웃별 칸 사각형 (2px 간격, 비율 반영) — left/top/width/height CSS 문자열
+    function rectsFor(mode) {
+      var Lw = 'calc(' + pct(vRatio) + ' - 1px)';            // 좌 컬럼 폭
+      var Rl = 'calc(' + pct(vRatio) + ' + 1px)';            // 우 컬럼 시작
+      var Rw = 'calc(' + pct(1 - vRatio) + ' - 1px)';        // 우 컬럼 폭
+      var Th = 'calc(' + pct(hRatio) + ' - 1px)';            // 위 행 높이
+      var Bt = 'calc(' + pct(hRatio) + ' + 1px)';            // 아래 행 시작
+      var Bh = 'calc(' + pct(1 - hRatio) + ' - 1px)';        // 아래 행 높이
+      if (mode === 'lr') return [
+        { l: '0', t: '0', w: Lw, h: '100%' },
+        { l: Rl, t: '0', w: Rw, h: '100%' }
+      ];
+      if (mode === 'tb') return [
+        { l: '0', t: '0', w: '100%', h: Th },
+        { l: '0', t: Bt, w: '100%', h: Bh }
+      ];
+      if (mode === 'quad') return [
+        { l: '0', t: '0', w: Lw, h: Th },
+        { l: Rl, t: '0', w: Rw, h: Th },
+        { l: '0', t: Bt, w: Lw, h: Bh },
+        { l: Rl, t: Bt, w: Rw, h: Bh }
+      ];
+      return [{ l: '0', t: '0', w: '100%', h: '100%' }]; // single
+    }
+
     var STORE_KEY = 'jrj_ws_tabs';
     var WS_OWNER = '<?= (string) (session()->get('mb_idx') ?? '') ?>'; // 탭 저장 소유자(로그인 사용자) 식별
     function persist() {
       try {
-        var data = {
+        sessionStorage.setItem(STORE_KEY, JSON.stringify({
           owner: WS_OWNER,
           tabs: order.map(function (id) { return { url: tabs[id].url, title: tabs[id].title }; }),
-          active: activeId
+          layout: layout,
-        };
+          focused: focused,
-        sessionStorage.setItem(STORE_KEY, JSON.stringify(data));
+          vRatio: vRatio,
+          hRatio: hRatio,
+          slots: slots.map(function (id) { return (id && tabs[id]) ? tabs[id].url : null; })
+        }));
       } catch (e) {}
     }
 
-    function activate(id) {
+    // 분할 칸 헤더·빈칸 안내 요소 4개 미리 생성
-      if (!tabs[id]) return;
+    var slotHeads = [], slotEmpties = [];
-      activeId = id;
+    for (var si = 0; si < 4; si++) {
+      (function (idx) {
+        var h = document.createElement('div');
+        h.className = 'ws-slot-head';
+        var nm = document.createElement('span'); nm.className = 'sh-name';
+        var rl = document.createElement('span'); rl.className = 'sh-btn sh-reload'; rl.textContent = '↻'; rl.title = '이 칸 새로고침';
+        var cl = document.createElement('span'); cl.className = 'sh-btn sh-clear'; cl.textContent = '×'; cl.title = '이 칸 비우기';
+        h.appendChild(nm); h.appendChild(rl); h.appendChild(cl);
+        h.addEventListener('click', function (e) {
+          if (e.target === rl) { var sid = slots[idx]; if (sid) reloadTab(sid); return; }
+          if (e.target === cl) { slots[idx] = null; render(); return; }
+          focusSlot(idx);
+        });
+        panels.appendChild(h);
+        var emp = document.createElement('div');
+        emp.className = 'ws-slot-empty';
+        emp.textContent = '＋ 위 탭에서 이 칸에 표시할 화면을 선택하세요';
+        emp.addEventListener('click', function () { focusSlot(idx); });
+        panels.appendChild(emp);
+        slotHeads.push(h); slotEmpties.push(emp);
+      })(si);
+    }
+
+    // 분할 구분선(드래그 핸들) + 드래그용 투명 오버레이
+    var vGutter = document.createElement('div'); vGutter.className = 'ws-gutter v';
+    var hGutter = document.createElement('div'); hGutter.className = 'ws-gutter h';
+    var dragOverlay = document.createElement('div'); dragOverlay.className = 'ws-drag-overlay';
+    panels.appendChild(vGutter); panels.appendChild(hGutter); panels.appendChild(dragOverlay);
+
+    function clampRatio(r) { return Math.min(RATIO_MAX, Math.max(RATIO_MIN, r)); }
+    function startDrag(axis) {
+      dragOverlay.className = 'ws-drag-overlay ' + axis;
+      dragOverlay.style.display = 'block';
+      function move(ev) {
+        var rect = panels.getBoundingClientRect();
+        if (axis === 'v') vRatio = clampRatio((ev.clientX - rect.left) / rect.width);
+        else hRatio = clampRatio((ev.clientY - rect.top) / rect.height);
+        render();
+      }
+      function up() {
+        document.removeEventListener('mousemove', move);
+        document.removeEventListener('mouseup', up);
+        dragOverlay.style.display = 'none';
+        persist();
+      }
+      document.addEventListener('mousemove', move);
+      document.addEventListener('mouseup', up);
+    }
+    vGutter.addEventListener('mousedown', function (e) { e.preventDefault(); startDrag('v'); });
+    hGutter.addEventListener('mousedown', function (e) { e.preventDefault(); startDrag('h'); });
+    // 더블클릭 시 50%로 초기화
+    vGutter.addEventListener('dblclick', function () { vRatio = 0.5; render(); persist(); });
+    hGutter.addEventListener('dblclick', function () { hRatio = 0.5; render(); persist(); });
+
+    var layoutBtns = Array.prototype.slice.call(document.querySelectorAll('#wsLayout button'));
+
+    // CSS 길이 가감 (calc(0 + 28px) 같은 무효 표현 방지)
+    function addPx(val, px) { return val === '0' ? (px + 'px') : ('calc(' + val + ' + ' + px + 'px)'); }
+    function subPx(val, px) { return 'calc(' + val + ' - ' + px + 'px)'; }
+
+    function render() {
+      var rects = rectsFor(layout);
+      var n = rects.length;
+      var split = layout !== 'single';
+      // single 모드에서 포커스 칸이 비면 가장 최근 탭으로 자동 채움
+      if (!split && !(slots[0] && tabs[slots[0]]) && order.length) {
+        slots[0] = order[order.length - 1];
+      }
+      if (focused >= n) focused = n - 1;
+      var shown = {};
+      for (var i = 0; i < 4; i++) {
+        var head = slotHeads[i], emp = slotEmpties[i];
+        if (i >= n) { head.style.display = 'none'; emp.style.display = 'none'; continue; }
+        var r = rects[i];
+        var bodyTop = split ? addPx(r.t, 28) : r.t;
+        var bodyH = split ? subPx(r.h, 28) : r.h;
+        if (split) {
+          head.style.display = 'flex';
+          head.style.left = r.l; head.style.top = r.t; head.style.width = r.w;
+          head.classList.toggle('focused', i === focused);
+          var sid = slots[i];
+          head.querySelector('.sh-name').textContent = (sid && tabs[sid]) ? tabs[sid].title : '비어 있음';
+        } else {
+          head.style.display = 'none';
+        }
+        var id = slots[i];
+        if (id && tabs[id]) {
+          shown[id] = true;
+          var f = tabs[id].frame;
+          f.style.left = r.l; f.style.top = bodyTop; f.style.width = r.w; f.style.height = bodyH;
+          f.style.display = 'block';
+          emp.style.display = 'none';
+        } else if (split) {
+          emp.style.display = 'flex';
+          emp.style.left = r.l; emp.style.top = bodyTop; emp.style.width = r.w; emp.style.height = bodyH;
+        } else {
+          emp.style.display = 'none';
+        }
+      }
+      // 어느 칸에도 없는 iframe 은 숨김 / 포커스 칸 프레임에 active 표시
       Object.keys(tabs).forEach(function (k) {
-        tabs[k].frame.classList.toggle('active', k === id);
+        if (!shown[k]) tabs[k].frame.style.display = 'none';
-        tabs[k].btn.classList.toggle('active', k === id);
+        tabs[k].frame.classList.toggle('active', k === slots[focused]);
       });
-      if (empty) empty.style.display = 'none';
+      // 탭 버튼 강조 (표시 중 = active, 포커스 칸 = focused-tab)
-      // 현재 탭에 맞춰 좌측 사이드바(대메뉴/소메뉴) 강조 동기화
+      Object.keys(tabs).forEach(function (k) {
-      try { if (window.govPortalNav && tabs[id]) window.govPortalNav.syncByUrl(tabs[id].url); } catch (e) {}
+        var pos = slots.indexOf(k);
+        tabs[k].btn.classList.toggle('active', pos >= 0 && pos < n);
+        tabs[k].btn.classList.toggle('focused-tab', split && slots[focused] === k);
+      });
+      // 분할 구분선 위치/표시
+      if (layout === 'lr' || layout === 'quad') { vGutter.style.display = 'block'; vGutter.style.left = 'calc(' + pct(vRatio) + ' - 4px)'; }
+      else { vGutter.style.display = 'none'; }
+      if (layout === 'tb' || layout === 'quad') { hGutter.style.display = 'block'; hGutter.style.top = 'calc(' + pct(hRatio) + ' - 4px)'; }
+      else { hGutter.style.display = 'none'; }
+      // 레이아웃 버튼 강조
+      layoutBtns.forEach(function (b) { b.classList.toggle('active', b.getAttribute('data-mode') === layout); });
+      // 전체 빈 상태
+      if (empty) empty.style.display = order.length === 0 ? 'flex' : 'none';
+      // 포커스 칸 화면에 맞춰 좌측 사이드바 동기화
+      var fid = slots[focused];
+      try { if (window.govPortalNav) window.govPortalNav.syncByUrl(fid && tabs[fid] ? tabs[fid].url : ''); } catch (e) {}
       persist();
     }
 
+    function focusSlot(i) { focused = i; render(); }
+
+    // 포커스 칸에 탭 배치 (이미 다른 칸에 있으면 두 칸을 맞바꿈)
+    function placeInFocused(id) {
+      if (!tabs[id]) return;
+      if (layout === 'single') { slots = [id]; }
+      else {
+        var j = slots.indexOf(id);
+        if (j >= 0 && j !== focused) { var tmp = slots[focused]; slots[focused] = id; slots[j] = tmp; }
+        else { slots[focused] = id; }
+      }
+      render();
+    }
+
+    function setLayout(mode) {
+      var n = rectsFor(mode).length;
+      var keep = [], seen = {};
+      slots.forEach(function (id) { if (id && tabs[id] && !seen[id]) { seen[id] = true; keep.push(id); } });
+      var ns = keep.slice(0, n);
+      for (var i = 0; i < order.length && ns.length < n; i++) { if (ns.indexOf(order[i]) < 0) ns.push(order[i]); }
+      while (ns.length < n) ns.push(null);
+      slots = ns;
+      layout = mode;
+      if (focused >= n) focused = n - 1;
+      render();
+    }
+    layoutBtns.forEach(function (b) {
+      b.addEventListener('click', function () { setLayout(b.getAttribute('data-mode')); });
+    });
+
     function reloadTab(id) {
       var t = tabs[id];
       if (!t) return;
       try { t.frame.contentWindow.location.reload(); }
-      catch (e) { t.frame.src = t.frame.src; } // 교차출처 등 예외 시 src 재설정
+      catch (e) { t.frame.src = t.frame.src; }
     }
 
     function closeTab(id) {
@@ -144,31 +355,32 @@ if ($effectiveLgIdx) {
       tabs[id].btn.remove();
       delete tabs[id];
       order = order.filter(function (x) { return x !== id; });
-      if (activeId === id) {
+      for (var i = 0; i < slots.length; i++) { if (slots[i] === id) slots[i] = null; }
-        var next = order[order.length - 1];
+      render();
-        if (next) activate(next); else { activeId = null; if (empty) empty.style.display = 'flex'; }
-      }
-      persist();
     }
 
-    function openTab(url, title) {
+    function openTab(url, title, opts) {
       var id = norm(url);
-      if (tabs[id]) { activate(id); return; }
+      if (tabs[id]) { if (!(opts && opts.noFocus)) placeInFocused(id); return; }
       if (order.length >= MAX) { closeTab(order[0]); } // 오래된 탭 정리
       var frame = document.createElement('iframe');
       frame.className = 'ws-frame';
       frame.src = withEmbed(url);
       frame.setAttribute('title', title || '탭');
-      // iframe 내부에 포커스가 있어도 단축키가 동작하도록 같은 출처 문서에 핸들러 부착
+      // iframe 내부 포커스에서도 단축키 동작 + 칸 클릭 시 그 칸 포커스
       frame.addEventListener('load', function () {
-        try { frame.contentDocument.addEventListener('keydown', handleShortcut); } catch (e) {}
+        try {
+          var d = frame.contentDocument;
+          d.addEventListener('keydown', handleShortcut);
+          d.addEventListener('mousedown', function () { var j = slots.indexOf(id); if (j >= 0 && j !== focused) focusSlot(j); }, true);
+        } catch (e) {}
       });
       panels.appendChild(frame);
 
       var btn = document.createElement('div');
       btn.className = 'ws-tab';
       btn.setAttribute('role', 'tab');
-      btn.title = title || '탭'; // 잘린 이름 전체를 툴팁으로
+      btn.title = title || '탭';
       var nameSpan = document.createElement('span');
       nameSpan.className = 't-name';
       nameSpan.textContent = title || '탭';
@@ -183,53 +395,53 @@ if ($effectiveLgIdx) {
       btn.appendChild(nameSpan); btn.appendChild(refresh); btn.appendChild(close);
       btn.addEventListener('click', function (e) {
         if (e.target === close) { closeTab(id); }
-        else if (e.target === refresh) { activate(id); reloadTab(id); }
+        else if (e.target === refresh) { placeInFocused(id); reloadTab(id); }
-        else { activate(id); }
+        else { placeInFocused(id); }
       });
-      // 가운데(휠) 클릭으로 탭 닫기 — 브라우저 탭과 동일한 동작
       btn.addEventListener('mousedown', function (e) { if (e.button === 1) e.preventDefault(); });
       btn.addEventListener('auxclick', function (e) { if (e.button === 1) { e.preventDefault(); closeTab(id); } });
       bar.appendChild(btn);
 
       tabs[id] = { url: url, title: title, frame: frame, btn: btn };
       order.push(id);
-      activate(id);
+      if (!(opts && opts.noFocus)) placeInFocused(id);
     }
     window.wsOpenTab = openTab;
 
-    // 키보드 단축키 (브라우저 기본 단축키와 충돌하지 않도록 Alt 기반)
+    // 키보드 단축키 (Alt 기반, 포커스 칸 기준)
-    //  Alt+1~9: 해당 번호 탭으로  ·  Alt+W: 현재 탭 닫기  ·  Alt+[ / Alt+]: 이전/다음 탭
+    //  Alt+1~9: 번호 탭을 포커스 칸에  ·  Alt+W: 포커스 칸 탭 닫기  ·  Alt+[ / Alt+]: 포커스 칸 탭 전환
     function handleShortcut(e) {
       if (!e.altKey || e.ctrlKey || e.metaKey) return;
       var k = e.key;
       if (k >= '1' && k <= '9') {
         var i = parseInt(k, 10) - 1;
-        if (order[i]) { e.preventDefault(); activate(order[i]); }
+        if (order[i]) { e.preventDefault(); placeInFocused(order[i]); }
       } else if (k === 'w' || k === 'W' || k === 'ㅈ') {
-        if (activeId) { e.preventDefault(); closeTab(activeId); }
+        var fid = slots[focused];
+        if (fid) { e.preventDefault(); closeTab(fid); }
       } else if (k === '[' || k === ']') {
-        if (!activeId || order.length < 2) return;
+        var cur = order.indexOf(slots[focused]);
+        if (order.length < 2) return;
         e.preventDefault();
-        var cur = order.indexOf(activeId);
+        if (cur < 0) cur = 0;
         var nx = k === ']' ? (cur + 1) % order.length : (cur - 1 + order.length) % order.length;
-        activate(order[nx]);
+        placeInFocused(order[nx]);
       }
     }
     document.addEventListener('keydown', handleShortcut);
 
-    // 좌측 사이드바 소메뉴 클릭 → 탭으로 열기 (전체 페이지 이동 대신)
+    // 좌측 사이드바 소메뉴 클릭 → 포커스 칸에 열기
     document.querySelector('.sidebar').addEventListener('click', function (e) {
       var a = e.target.closest('a[href]');
       if (!a) return;
       var href = a.getAttribute('href') || '';
-      // 지자체 선택(sb-gray)·모바일앱(sb-teal)은 그대로 이동, 나머지(소메뉴·하단 링크)는 탭으로
       if (a.closest('.sb-gray') || a.closest('.sb-teal')) return;
       if (/\/logout|\/login/.test(href) || href.charAt(0) === '#' || href === '') return;
       e.preventDefault();
       openTab(href, (a.textContent || '').trim());
     });
 
-    // 상단 대메뉴의 직접 링크(자식 없는 대메뉴)도 탭으로
+    // 상단 대메뉴 직접 링크도 포커스 칸에 열기
     document.querySelectorAll('.portal-nav-link[href]').forEach(function (lnk) {
       lnk.addEventListener('click', function (e) {
         var href = lnk.getAttribute('href') || '';
@@ -239,19 +451,24 @@ if ($effectiveLgIdx) {
       });
     });
 
-    // 첫 화면: 세션에 저장된 탭이 있으면 복원(관리자 페이지 등 전체 이동 후 복귀·새로고침 대응),
+    // 첫 화면: 세션 저장 복원(레이아웃·분할 배치 포함), 없으면 대시보드 1분할
-    // 없으면 대시보드 탭 자동 열기
     (function restore() {
       var saved = null;
       try { saved = JSON.parse(sessionStorage.getItem(STORE_KEY) || 'null'); } catch (e) {}
-      // 저장된 탭의 소유자가 현재 로그인 사용자와 다르면(같은 브라우저 탭에서 계정 전환 등) 복원하지 않고 초기화
+      if (saved && saved.owner !== WS_OWNER) { try { sessionStorage.removeItem(STORE_KEY); } catch (e) {} saved = null; }
-      if (saved && saved.owner !== WS_OWNER) {
-        try { sessionStorage.removeItem(STORE_KEY); } catch (e) {}
-        saved = null;
-      }
       if (saved && saved.tabs && saved.tabs.length) {
-        saved.tabs.forEach(function (t) { if (t && t.url) openTab(t.url, t.title); });
+        saved.tabs.forEach(function (t) { if (t && t.url) openTab(t.url, t.title, { noFocus: true }); });
-        if (saved.active && tabs[saved.active]) activate(saved.active);
+        layout = (saved.layout === 'lr' || saved.layout === 'tb' || saved.layout === 'quad') ? saved.layout : 'single';
+        if (typeof saved.vRatio === 'number') vRatio = clampRatio(saved.vRatio);
+        if (typeof saved.hRatio === 'number') hRatio = clampRatio(saved.hRatio);
+        var n = rectsFor(layout).length;
+        slots = [];
+        for (var i = 0; i < n; i++) {
+          var u = saved.slots && saved.slots[i] ? norm(saved.slots[i]) : null;
+          slots.push(u && tabs[u] ? u : null);
+        }
+        focused = Math.min(Math.max(parseInt(saved.focused, 10) || 0, 0), n - 1);
+        render();
         return;
       }
       openTab('<?= base_url('/') ?>', '업무 현황');

e2e/workspace.spec.js

@@ -93,6 +93,46 @@ test.describe('워크스페이스 탭', () => {
     await expect(page.locator('.ws-tab')).toHaveCount(1);
   });
 
+  test('분할 보기: 2분할(좌우)·4분할에서 여러 화면 동시 표시', async ({ page }) => {
+    await login(page, 'admin');
+    await page.goto('/admin/select-local-government');
+    await page.evaluate(() => {
+      const r = document.querySelector('input[name="lg_idx"][value="1"]');
+      if (r) { r.checked = true; r.form.submit(); }
+    });
+    await page.waitForTimeout(700);
+    await page.goto('/workspace');
+    await page.waitForTimeout(2500);
+
+    // 분할 컨트롤 버튼 4개 존재
+    await expect(page.locator('#wsLayout button')).toHaveCount(4);
+
+    // 소메뉴 2개를 탭으로 열기
+    await page.locator('.sidebar .my-menu-list a').nth(0).click();
+    await page.waitForTimeout(1200);
+    await page.locator('.sidebar .my-menu-list a').nth(1).click();
+    await page.waitForTimeout(1200);
+    // 단일 모드: 화면에 보이는 프레임은 1개
+    await expect(page.locator('.ws-frame:visible')).toHaveCount(1);
+
+    // 2분할(좌우) → 보이는 프레임 2개 + 칸 헤더 2개
+    await page.locator('#wsLayout button[data-mode="lr"]').click();
+    await page.waitForTimeout(600);
+    await expect(page.locator('.ws-frame:visible')).toHaveCount(2);
+    await expect(page.locator('.ws-slot-head:visible')).toHaveCount(2);
+
+    // 4분할 → 칸 헤더 4개
+    await page.locator('#wsLayout button[data-mode="quad"]').click();
+    await page.waitForTimeout(600);
+    await expect(page.locator('.ws-slot-head:visible')).toHaveCount(4);
+
+    // 다시 1분할 → 보이는 프레임 1개
+    await page.locator('#wsLayout button[data-mode="single"]').click();
+    await page.waitForTimeout(600);
+    await expect(page.locator('.ws-frame:visible')).toHaveCount(1);
+    await expect(page.locator('.ws-slot-head:visible')).toHaveCount(0);
+  });
+
   test('편의: 가운데클릭 닫기·사이드바 동기화', async ({ page }) => {
     await login(page, 'admin');
     await page.goto('/admin/select-local-government');