# Movemap PC 대형 트랙 여유·드래그 미리보기

2026-11-09. 기존 파형·방향 시안을 보존한 후속 독립 HTML이다. 기본 클릭은 한 명 선택으로 바꾸고
Shift/버튼/박스로 명시적으로 여러 명을 선택한다. 모바일과 본제품은 수정하지 않았다.
후속 음악 흐름 보완은 같은 시안에서 예시 신호를 그대로 두고 표시 방식만 바꿨다.
최신 보완은 대형 행의 여유와 높이 조절, 빈 트랙 드래그 미리보기다.

- [PC 검토 뷰어](index.html): 화면별 탐색, 다크/라이트, 실제1440×960 창 열기.
- [기존·개선 동일 상태 비교](comparison.html): 파형·방향 시안과 같은12명/6대형/f1/p1,p3 선택, 양쪽 뷰포트1440×960.
- [직접 편집](app.html) · [다중 선택](app.html?state=selected) · [라이트](app.html?theme=light).
- [홈](app.html?screen=home) · [리허설](app.html?screen=rehearsal) · [출력](app.html?screen=export).
- [이동 구간의 출발→도착](app.html?state=selected&section=f2&kind=move) · [이동 중7초 위치](app.html?state=selected&section=f2&kind=move&time=7).

## 대형 트랙 높이와 드래그 미리보기

- 기본 높이는352px, 화면 높이800px 이하304px다. 늘어난 공간은 대형 썸네일과 위아래12px
  여백에 배분했다. 파형48px와 시간 배율은 유지한다.
- 타임라인 위 경계를 위로 끌면 커지고 아래로 끌면 줄어든다. 포커스 후 위/아래8px,
  Shift32px, Home/End로 최소/최대로 조절한다. `높이 초기화`는 현재 화면의 기본값으로 복원한다.
  최소256/최대512px이며 가능한 화면에서 무대 작업 영역240px를 확보한다. 아주 낮은 PC 창은
  최소 높이를 우선한다. 최대 확장에서는 무대가 작아지므로 검토 후 높이를 줄일 수 있다.
- 높이는 현재 탭의 PC 보기 설정이다. 화면·테마·프로젝트 문서와 분리하며 문서/undo/저장에는 넣지 않는다.
  창이 줄어들면 상한으로 제한한다. 기본값을 사용하는 동안에는 창 높이에 따라352/304px로 바뀐다.
- 눈금·파형·대형 블록 위아래의 빈 트랙을 누르거나 좌우로 끌면 시간·녹색 재생선·실제 보간 위치와
  토큰 방향을 즉시 보여 준다. 블록 선택/300ms 재정렬·트림 손잡이는 기존 동작을 유지한다.
  이동 리본 중앙44px 누름 영역과 트림 손잡이를 제외한 위아래 빈 공간도 미리보기로 연결한다.
- 드래그 중 자동 재생을 멈추고, 놓으면 원래 재생 중이었을 때만 기존 속도·반복으로 이어간다.
  문서 끝에서는 정지한다. 가로 스크롤을 반영하며 가장자리32px에서는 자동 스크롤한다.
  Escape/포인터 취소/캡처 상실/창 포커스 상실은 시작 시간과 재생 상태를 복원한다.
- 스크럽은 보기 전용/리허설에서도 허용한다. 드래그 중에는 무대/시간/문맥만 갱신하고 트랙 DOM과
  스크롤을 유지한다. 좌표 입력 중 시작하면 먼저 해당 입력을 확정해 편집 초안을 잃지 않게 한다.
  높이 증가 뒤에도1440×960 다중 선택X/Y를 볼 수 있도록 패널 간격을 압축하고 입력 높이는44px로 했다.
  모바일의 기존 구성/기하는 그대로다. 실제 음원은 재생하지 않는다.

## 음악 흐름 파형 보완

- 연속 회색 채움과 작은 소리를 크게 키우는 제곱근 보정을 얇은 세로 피크로 바꿨다.
  약2px마다 시간 구간의 절대 최대 진폭을 위아래로 대칭 표시한다. 간격은0.75px이며
  전체 곡/확대율에 고정된 선형 진폭 배율1.25를 적용한다.
- 전체 보기에서는 큰 강약과 쉬는 구간을, 크게 보기에서는 순간 피크를 확인한다.
  예시 신호 자체는 이전 시안과 같다. 작은 잔향은 낮게 남기고 실제0 진폭에는 막대를 만들지 않는다.
  구간별 정규화·자동 박자/곡 구간 분석은 하지 않는다.
- 48px 행과 대형 썸네일·시간 원점·배율·녹색 재생선은 유지한다. 안내는 파형을 덮지 않도록
  도구줄로 옮겼다. 선택/테마/속도/스크롤은 피크를 바꾸지 않으며 줌은 같은 신호를 다시 집계한다.
- 비교 화면의 왼쪽은 이전 연속 채움, 오른쪽은 새 피크다. 같은 예시 신호·문서·선택·1440×960이다.
  실제 음원이 없는 시안이며 `음악 · 예시 파형 · 무음`을 계속 표시한다.

## 이번 선택 보완

| 조작 | 결과 |
|---|---|
| 일반 클릭 / 재클릭 | 해당 한 명으로 교체 / 선택 유지 |
| Shift+클릭 / 켜진 다중 선택 버튼 / 체크박스 | 기존 선택에 추가·제외 |
| 빈 무대 클릭 | 일반 모드는 해제, Shift/다중 모드는 유지 |
| 빈 무대 드래그 | 중심점이 박스 안에 있는 인물로 교체 |
| Shift/다중 모드의 박스 드래그 | 기존 선택에 박스 안 인물 추가 |
| 그룹 인물 클릭 / 드래그 | 한 명 선택 / 기존 그룹 이동 |
| 미선택 인물 드래그 | 해당 한 명 선택 후 이동 |

다중 선택 버튼은 기본 꺼짐이다. 끌 때 현재 선택은 유지하고, 화면 이탈/프로젝트 교체/모바일 전환 때
모드를 해제한다. Shift/다중 모드에서 시작한 인물 제스처는 위치를 옮기지 않고 선택만 한다.
5px 이상 움직여야 드래그로 처리한다. 그룹을 누르는 순간에는 기존 선택을 보존한다.
박스는 무대 밖으로 나가도 경계로 제한하며 선택 예정 인물과 인원을 표시한다. 이름/화살표/도착 윤곽은
박스 판정에 포함하지 않는다. 박스 추가 순서는 출연자 목록 순서다.
Escape/pointercancel/포인터 캡처 상실은 진행 조작과 선택/앵커를 원복한다. 유휴 Escape는 모드를 끄되
선택을 유지하며 팝업/안내를 닫는다. 겹친 인물 메뉴는 최초 Shift/다중 모드 의도를 보존한다.
목록의 Shift/다중 선택과 체크박스는 목록을 유지하고, 일반 행 클릭과 무대 선택은 상세로 연결한다.
선택/모드/박스는 문서·시간·undo·백업과 분리한다. 접힌 작업 패널을 자동으로 열지 않는다.
입력 중 좌표는 다른 인물을 선택하기 전에 확정한다. 무대에서 선택/드래그 후에는 무대로 포커스를
돌려 연속 방향키 위치 편집을 유지한다. 이동 미리보기에서는 기존처럼 위치 편집을 잠근다.

## 이전 파형·방향 보완에서 유지한 것

- 파형을17→48px로 키웠다. 절대 시간의 고정 예시 신호를 같은 시간 배율로 집계해 큰 강약과
  세부 피크를 그린다. 표시 곡선은 전체에 고정되며 구간별 자동 정규화는 하지 않는다.
  선택·속도·테마·스크롤은 파형을 바꾸지 않고 줌은 같은 시각의 신호를 다른 폭으로 집계한다.
- 토큰 옆에 출연자 색의 약20px 방향 화살표를 두고 선택 인물의 전체 경로·0.7m 도착 윤곽을 강조했다.
  화살표는 클릭을 가로채지 않고 번호·이름보다 아래에 그린다. 아래 방향은 이름표 뒤로 간격을 확보했다.
  라이트에서는 같은 색조를 어둡게 조정해 화살표를 읽기 쉽게 했다. 실제 토큰 색은 그대로다.
- 정지 유지 선택은 다음 대형을, 이동 선택은 이전 배치에서 해당 도착 대형을 가리킨다.
  재생·스크럽·리허설은 실제 이동 중 현재 보간 위치에서 같은 이동의 도착점을 향한다.
  실제 유지 중/마지막 대형/시작 대기/이동 없는 토큰에는 방향을 만들지 않는다.
- 이동 선택의 출발 배치와 정지한 재생 위치 미리보기에서는 위치 편집을 잠근다.
  같은 대형의 유지 블록을 선택하면 도착 위치를 원래처럼 편집할 수 있다. 선택/트림/재정렬은 유지한다.
  출발 토큰을 끌어 다른 도착 좌표를 수정하는 불일치를 방지하기 위한 구분이다.

## 바뀐 작업 구조

PC는 상단 프로젝트 명령56px, 메뉴 레일72px, 왼쪽 작업 패널320px, 중앙 무대,
하단 시간축352px다.1100px 이하 패널280px, 높이800px 이하 시간축304px다.
시간축의 늘어난 공간은 대형 썸네일과 위아래 여백에 배분한다.
오른쪽 고정 속성을 없애고 출연자·대형·음악·무대·검토를 왼쪽에 연결했다.

출연자 목록은 번호/색/이름/현재 편집 대형X/Y를 보여 준다. 행이나 무대 인물은 같은 상세를 연다.
체크박스는 목록을 유지하며 선택을 모으고, 하단의 고정된 선택 상세로 진입한다.
목록 복귀 때 검색·스크롤·선택을 보존한다. 한 명은 이름·좌표, 다중은 적용 인원·파트너 단위·
배치5종을 우선한다. 다중X/Y 기준은 마지막 명시 선택이다.1440×960에서는 X/Y까지 첫 화면에 보인다.
선택만으로 패널 폭이나 무대 크기·위치를 바꾸지 않으며 접힌 패널을 자동으로 열지 않는다.

편집 대형과 재생 위치를 고정 문맥 줄에서 분리한다. 재생·이전/다음·시간·배율·반복은 가까이 두었다.
홈은 실제 배치·프로젝트 이름·저장 상태·이어하기가 중심이다. 리허설은 왼쪽 개인 검색,
중앙 위치·경로·현재 메모와 재생으로 구성하며 편집을 잠근다. 출력은 왼쪽 형식/범위/레이어와
중앙 종이 미리보기다. 링크 공유는 별도 대화상자다.

## 보존과 구현 경계

`app.mjs`는 PC/모바일이 공유하는 문서 상태·명령·undo·재생·출력 컨트롤러다.
`pc-view.mjs`는 PC 표시, `presentation.mjs`는 읽기 전용 구간/방향/파형 계산,
`selection.mjs`는 순수 단일/추가/박스 선택 계산이다.
`timeline-view.mjs`는 문서와 분리된 높이 경계·스크럽 시간·가장자리 스크롤 계산이다.
기존 모바일 표시는 app의 별도 함수, PC CSS는900px 이상에만 적용한다.
HTML 결과 문자열을 바꿔 끼우지 않고 명시적 템플릿으로 화면을 구성한다.
`model.mjs`는 기존 시안과 SHA-256이 같다:
`1a7e8ca0002d216fe80195d9cfb47f59c6788afbebeee29c4f48dc6d0c67c3d9`.

- 실제 좌표·12×8m 비율·관객 방향·출연자 색·0.7m 번호원.
- 실제 배치 썸네일·공통 유지/이동 시간 배율·0초 폭·파랑 선택/녹색 재생선/중립 트림.
- 파트너 상대 간격·전체 경계 검사·원자적 실패·한 undo·트림/재정렬 취소·리플.
- 선택·표시·속도·반복·출력 옵션은 문서/dirty/undo에 기록하지 않는다.
- 기존 `out/pc-motion-refine-20261109/`과 그 이전 시안은 수정하지 않았다.

안내는 새 안내마다4초 타이머를 다시 시작하며 닫기/Escape로 즉시 해제한다.
Escape는 진행 편집 취소가 먼저다. 안내 해제는 안내 노드만 갱신하고 입력/스크롤/드래그를 보존한다.
저장·배치·속도·출력 실패는 작업 위치에 남으며 안내 타이머로 지우지 않는다.
저장 키는 별도 `movemap-pc-selection-refine-draft`다. 선택·모드·박스·방향·파형은 백업에 기록하지 않는다.

## Sway 근거와 채택 판단

아래는 이전 PC 작업 구조 시안의 자료를 그대로 재사용한 기록이다. 이번 보완에서 경쟁 앱이나
실제 음악을 새로 분석한 것은 아니다.

| 자료 | 확인한 것 | 확인 수준 |
|---|---|---|
| [공식 Formation Maker](https://swayformations.com/dance-formation-maker), [공식 PC 이미지](https://swayformations.com/assets/optimized/hero-screenshot.webp) | 상단 전역 명령/왼쪽 Performer Details/중앙 무대/하단 대형·오디오 행 | 2026-11-09 공식 이미지 직접 확인,1600×912 |
| [공식 Create 데모](https://swayformations.com/assets/home-landing-assets/product-demo-gifs/create-demo.mp4) | 왼쪽 선택 상세와 동일 작업면에서 무대·시간축 확인 | 공식 영상720×414,31.066667초;4초 프레임 직접 확인 |
| 로그인 뒤 실제 편집 | 선택·undo·저장·공유의 내부 동작 | 이번 검증에서 미확인 |

전역/로컬 명령 분리와 왼쪽 작업 구조를 채택했다. 실제 배치/시간 비례/페어/모바일 편집은
Movemap 계약을 유지한다. Production·신체·외형 관리는 추가하지 않았다.
`references/`는 공식 이미지와 위 데모4초 프레임의 검토용 사본이다. 권리는 Sway에 있다.
자료의 데이터·해상도가 다르므로 앱 간 면적/작업 속도의 우열을 계산하지 않는다.

## 재현과 검증

저장소 루트에서 다음을 실행한다.

```sh
node out/pc-selection-refine-20261109/build.mjs
node --test out/pc-selection-refine-20261109/model.test.mjs out/pc-selection-refine-20261109/presentation.test.mjs out/pc-selection-refine-20261109/selection.test.mjs out/pc-selection-refine-20261109/timeline-view.test.mjs
python3 -m http.server 5191 --bind 127.0.0.1
# 다른 터미널:
node out/pc-selection-refine-20261109/regression.mjs
node out/pc-selection-refine-20261109/verify.mjs
node out/pc-selection-refine-20261109/verify-motion.mjs
node out/pc-selection-refine-20261109/verify-selection.mjs
node out/pc-selection-refine-20261109/verify-waveform.mjs
node out/pc-selection-refine-20261109/verify-timeline.mjs
```

`http://127.0.0.1:5191/out/pc-selection-refine-20261109/index.html`을 연다.
app/index/comparison은 file://로도 열리며 `app.js`는 소스에서 생성한 배포용 classic bundle이다.
뷰어의 축소 화면은 미리보기이며 실제 크기 버튼은1440×960 편집 뷰포트를 요청한다.
OS 화면/브라우저가 창 크기를 제한하면 상단에 실제 크기와 목표 크기 차이를 표시한다.

후속 시안에서 실행한 결과(Linux headless Chromium):

| 검사 | 결과 |
|---|---|
| `model.test.mjs` | 11/11 통과, 기존 모델과 동일 SHA-256 |
| `presentation.test.mjs` | 구간/방향/페어/절대 시간 파형·줌과 새 강약·무음·피크·선형 진폭9/9 통과 |
| `selection.test.mjs` | 일반/추가/박스/경계·순서 선택4/4 통과 |
| `timeline-view.test.mjs` | 기본/높이 경계·스크롤/줌 시각·끝 경계·자동 스크롤 속도3/3 통과 |
| `regression.mjs` | 기존 조작11묶음 통과: 선택/배치/페어/경계/트림·재정렬·취소/리플/undo/속도·반복/리허설/출력·복구/0초 |
| `verify.mjs` | 추가9묶음 통과, 자동 캡처73장, page/console error0 |
| `verify-motion.mjs` | 방향·파형·미리보기 잠금/트림/복귀 편집·실제 재생/속도/반복/스크럽·뷰어5묶음, 캡처21장 |
| `verify-selection.mjs` | 선택 전용9묶음 통과, 18개 실제 PC 캡처; 그룹 클릭/이동·취소·잠금·겹침 메뉴 포함 |
| `verify-waveform.mjs` | 파형4묶음 통과, 기본/전체 보기·크기/테마·비교14장; 강약/쉬는 구간·seek/재생선·상태 불변 확인 |
| `verify-timeline.mjs` | 높이/키보드/복원·스크럽/보간·재생/반복·경계/자동 스크롤·취소/잠금·문서 불변6묶음,14장 |
| PC | 1440×960 /1280×800 /900×700 양 테마, 패널320/280px·시간축352/304px·파형48px 확인 |
| 모바일 | 390×844 /360×640 /844×390 양 테마의 무대/선택줄/시간축/메뉴/토큰 기하와 문서가 기존 시안과 동일 |
| 안내 | 4초/즉시 닫기/연속 안내/화면 전환/입력 DOM·포커스·스크롤/드래그 유지/Escape 취소 우선, 작업 위치 오류 유지 |
| 출력 | PNG 실패 후 재시도/JSON 다운로드/6대형 인쇄 창·메모/로컬 저장 복구, SVG 자간 정상 확인 |
| 검토 도구 | 같은 상태의1440×960 iframe 비교, 실제1440×960 편집 팝업, file://와 내부 링크 확인 |
| 제품 회귀 보조 검사 | `npm test` 277/277, `npm run build` 통과. 본제품 소스는 수정하지 않음 |

타임라인 보완에서 위 검사를 다시 실행했다. 순수 검사27개와 브라우저44묶음이 통과했다.
브라우저 실행 중 한 차례 `ERR_NETWORK_CHANGED`가 발생한 방향 검사는 오류를 무시하지 않고
다시 실행해 통과했다. 재생/반복의 시간 검사는 멈춘 가상 시계로 동작 시간을 명시해 검증한다.
파형 비교의 예시 신호는 이전과4개 확대율에서 동일함을 별도로 확인했다.
자동 캡처는 총140장이다. 기본1440×960 다크·최대 확장900×700 라이트·최소 높이와
7초 드래그 중 보간 화면을 직접 열어 검토했다. 작은 PC에서 최대 확장하면 무대의 번호/이름이
밀집할 수 있으며, 높이 초기화나 아래로 끌어 무대 여유를 되돌릴 수 있다.
이전 선택 보완에서는 요청한 크기의 양 테마 편집기와 이동 선택/7초 위치/밀집/비교를 직접 열어
방향과 파형을 검토했다. 다중 선택 패널의 반복 간격과 잠금 안내를 압축해1440×960에서 X/Y가
첫 패널 안에 들어오도록 했다. 라이트 화살표 명도와 아래 방향의 이름표 간격을 보완했다.
기존 출력 SVG의 자간 수정과 PC 무대 비율 계산도 그대로 보존했다.
360×640의 작업면은 기존처럼 세로 스크롤하며844×390은 무대/시간축을 나란히 둔다.
40명 밀집 표본과 실제 이동 중 교차에서는 원본 좌표 때문에 일부 번호·이름이 겹친다. 좌표를 임의로 벌리지 않으며 검색/목록과
겹친 인물 선택 메뉴를 사용한다. 좁은 PC에서는 패널을 스크롤해 하단 정밀 도구를 사용할 수 있다.

타임라인 보완의 최신 캡처/JSON/다운로드는 `/tmp/movemap-timeline-final/`에 있다.
음악 흐름 보완의 캡처/JSON은 `/tmp/movemap-waveform-review/`,
회귀 캡처/JSON/다운로드는 `/tmp/movemap-waveform-regression/`에 있다.
이전 선택 보완의 검증 캡처/JSON/다운로드는 `/tmp/movemap-pc-selection-review/`, 기존 조작 결과는
`/tmp/movemap-pc-selection-contract/`에 생성한다. 생성된 테스트 증거·dist는 커밋하지 않는다.

## 검증 범위의 한계

Linux headless Chromium의 로컬 HTML과 브라우저 에뮬레이션이다. PNG·JSON 다운로드와 인쇄 창
열기는 확인하되 사용자의 실제 PDF 저장 성공을 주장하지 않는다. 표본 파형·무음 clock이며
실제 음악, 휴대폰 터치, 운영 저장·공유·인증, Flutter/React 적용·배포는 이번 범위가 아니다.