Files

taekyoungc 912ffdbe23 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>

2026-06-10 10:19:37 +09:00

6.1 KiB

Raw Blame History

화면 구성 · 워크스페이스 · 단축키

이 시스템은 여러 작업 화면을 탭으로 열어 두고 오가며 일할 수 있도록 만들어졌습니다(웹 브라우저의 탭과 비슷합니다). 이 페이지는 화면이 어떻게 구성되는지, 탭을 어떻게 쓰는지, 그리고 빠르게 쓰는 단축키를 설명합니다.

1. 전체 화면 구성

로그인하면 워크스페이스(탭 작업공간)가 기본으로 열립니다. 화면은 크게 네 부분입니다.

영역	위치	설명
상단 헤더	맨 위	로고, 대분류 메뉴, 오른쪽에 소속 지자체·접속자·관리자·로그아웃
왼쪽 사이드바	좌측	현재 선택한 대분류의 소메뉴 목록. 아래에는 매뉴얼·FAQ 링크
탭바	본문 위	지금 열어 둔 작업 화면들의 탭 목록
본문	가운데	현재 탭의 실제 작업 화면

대분류를 클릭하면 왼쪽 사이드바에 그 안의 소메뉴가 펼쳐집니다. 현재 위치한 메뉴는 왼쪽에서 ▸ 로 표시됩니다.

2. 탭(워크스페이스) 사용법

메뉴를 클릭하면 탭으로 열립니다. 같은 메뉴를 다시 누르면 새 탭을 또 만들지 않고 이미 열린 탭으로 이동합니다.
탭을 전환해도 작업 내용이 유지됩니다. A 화면에 무언가 입력하다가 B 화면을 잠깐 보고 와도, A 탭의 입력은 그대로 남아 있습니다.
탭 ↔ 왼쪽 메뉴 연동: 탭을 전환하면 왼쪽 사이드바의 강조 위치도 그 탭의 메뉴로 자동으로 따라갑니다.
탭이 많아지면 가로로 스크롤되며, 최대 12개까지 열 수 있습니다. 12개를 넘기면 가장 오래된 탭이 자동으로 닫힙니다.

탭의 버튼

버튼	동작
↻ (탭 위)	그 탭만 새로고침합니다. 다른 탭은 그대로 둡니다.
× (탭 위)	그 탭을 닫습니다.
탭을 가운데(휠) 클릭	마우스 휠을 누르면 그 탭이 닫힙니다(브라우저와 동일).
탭에 마우스를 올리면	이름이 길어 잘렸을 때 전체 제목이 말풍선으로 보입니다.

탭이 유지되는 범위

브라우저를 새로고침하거나 관리자 페이지에 갔다가 돌아와도 열어 두었던 탭이 다시 복원됩니다.
단, 브라우저 탭(창)을 완전히 닫으면 작업공간은 초기화됩니다. (이 유지는 "이번 접속 동안"만 적용됩니다.)
다른 아이디로 로그인하면 이전 사용자의 탭은 복원되지 않고 기본 화면으로 초기화됩니다. (계정별로 분리됩니다.)
복원되는 것은 열려 있던 화면 목록입니다. 관리자 페이지를 거치는 등 작업공간을 완전히 벗어났던 경우, 각 화면은 새로 불러와지므로 입력 중이던 폼 내용까지 그대로 살아나지는 않습니다.

3. 분할 보기 (여러 화면 한눈에)

여러 화면을 동시에 펼쳐 놓고 비교하거나 함께 작업할 수 있습니다. 탭바 오른쪽의 분할 버튼으로 화면을 나눕니다.

버튼	모양	설명
1분할	□	한 화면만 크게 (기본)
2분할 (좌우)	◫	화면을 왼쪽/오른쪽 두 칸으로
2분할 (상하)	⬓	화면을 위/아래 두 칸으로
4분할	⊞	2×2 네 칸으로

칸에 화면 배치하기

분할하면 열어 둔 화면들이 칸에 자동으로 채워집니다. 빈 칸에는 안내 문구가 표시됩니다.
칸을 클릭하면 그 칸이 "선택"(파란 테두리)됩니다. 이 상태에서 위 탭바의 탭을 클릭하면 그 화면이 선택된 칸에 들어갑니다.
각 칸 위의 헤더에는 화면 이름과 함께 ↻(이 칸 새로고침)·×(이 칸 비우기) 버튼이 있습니다.

칸 크기 조절

칸 사이의 구분선에 마우스를 올리면 ↔/↕ 커서가 나타납니다. 드래그하면 칸 크기(비율)를 자유롭게 조절할 수 있습니다.
구분선을 더블클릭하면 50:50으로 초기화됩니다.
조절한 분할 모양·크기도 새로고침·관리자 왕복 후 그대로 복원됩니다.

분할 상태에서도 각 화면의 작업 내용은 그대로 유지됩니다. 마음껏 나눴다 합쳤다 해도 입력하던 내용이 사라지지 않습니다.

4. 키보드 단축키

자주 쓰는 동작은 키보드로 더 빠르게 할 수 있습니다. 브라우저 기본 단축키와 겹치지 않도록 Alt 키를 함께 누르는 방식입니다.

동작은 현재 선택된 칸을 기준으로 적용됩니다(1분할이면 그 한 화면).

단축키	동작
Alt + 1 ~ 9	n번째 탭을 선택된 칸에 표시
Alt + W	선택된 칸의 탭 닫기
Alt + ]	선택된 칸을 다음 탭으로
Alt + [	선택된 칸을 이전 탭으로

macOS 에서도 동일하게 Option(⌥) 키가 Alt 역할을 합니다 (예: ⌥ + 1).

참고: Ctrl/⌘ + W, Ctrl/⌘ + 숫자, Ctrl + Tab 은 브라우저 자체가 먼저 가로채기 때문에 이 시스템에서 다른 용도로 바꿀 수 없어, 위와 같이 Alt 조합을 사용합니다.

5. 그 밖의 이동

관리자 버튼(헤더 오른쪽, 관리자 권한일 때) — 메뉴·코드·판매소 등 관리자 설정 화면으로 이동합니다. 갔다가 워크스페이스로 돌아오면 열어 두었던 탭이 복원됩니다.
지자체 선택(왼쪽 사이드바 아래) — 슈퍼 관리자가 작업할 지자체를 바꿀 때 사용합니다.
로그아웃(헤더 오른쪽) — 시스템에서 나갑니다.

6. 도움말 보는 법

각 작업 화면의 "이 화면 설명"(❓) 버튼 — 지금 보고 있는 화면에 해당하는 매뉴얼이 새 탭으로 열립니다.
이 매뉴얼 왼쪽 위 검색창 — 모든 매뉴얼 페이지에서 단어를 찾아, 결과를 누르면 해당 페이지의 그 단어 위치로 이동해 노란색으로 표시해 줍니다.

6.1 KiB Raw Blame History Unescape Escape