크라우니 오피스 문서 편집기 — Phase 1-D(반응형) + 1-E(크로스플랫폼)

개요

오피스-개발계획.md Phase 1(문서 완성)의 마지막 두 게이트, 1-D(사이즈/반응형 대응)와 1-E(플랫폼 변경 대응)를 실측 기반으로 완료. 앱 번들(bundle/office/app) 무수정, crownyBridge.js(즉시층)만 보강. 회귀 하니스 27/27 유지.

무엇을 했는지

실측 도구 신규 제작

• bundle/office/bridge/반응형측정.js + 정본 반응형측정.한선 — headless Chrome CDP로

4개 창폭(1280·1024·768·390)을 Emulation.setDeviceMetricsOverride로 강제하며 좌측개요/편집영역/우패널 rect, 브릿지 팝오버(표/드롭다운) rect를 측정하고 스크린샷 저장.

1-D 반응형 — 실측 발견 3건 + 보강

1. 앱 자체 CSS @media 쿼리 0건(완전 비반응형) — 3열(좌측개요250/편집영역flex/우패널270)

고정 레이아웃이 좁은 창에서도 압축만 될 뿐 재배치가 없어 390px에서 우패널이 ~55px까지 짜부라짐.

1. 툴바(21버튼 단일 flex row)가 756px대에서 이미 총폭 초과 — 뒤쪽 버튼(🔗/▦표/🖼이미지/

⎙페이지보기/🔍찾기/공유/💬댓글)이 뷰포트 밖으로 밀려 클릭 불가(390px 실측: ▦ 표 버튼 rect가 뷰포트 390 밖).

1. 브릿지 팝오버(표 그리드·스타일/폰트/크기 드롭다운)에 뷰포트 클램프 없음 — 앵커 좌표

그대로 절대배치라 390px에서 카드가 화면 밖으로 나감(표 팝오버 right=688 > 390).

보강(crownyBridge.js):

• clampPopoverCard() 신규 — openTablePopover/openGenericDropdown 둘 다 append 직후

실제 크기 기준으로 우측 초과 시 좌로 밀고 하단 초과 시 앵커 위로 뒤집는 클램프 적용. 링크 다이얼로그·토스트는 max-width+box-sizing:border-box 방어.

• ensureToolbarScrollable() 신규 — 툴바 row에 overflow-x:auto 상시 적용(여유 있으면

스크롤 자체가 안 생겨 넓은 창에서 부작용 0, 1280px 실측 확인).

• applyNarrowLayout() 신규 — 창폭 <900(스펙 예시값)에서 좌측개요/우패널을 display:none

으로 숨겨 편집영역에 전체폭 양보, 넓어지면 우리가 지운 display만 정확히 원복(마커 속성 구분). 경계 실측: 899=숨김/900=표시.

• 재렌더 방어: schedule() 매 틱 + window resize 이벤트 양쪽에서 재적용(앱이 DOM을 다시

그려도 우리 style이 자동 재부착).

수정 후 재실측: 768·390 모두 outline/rightPanel-editable 겹침 해소, 표 팝오버 390px에서 right=382(정확히 클램프), 1280/1024 무변화(회귀 없음).

1-E 크로스플랫폼 — 점검 결과

• Cmd/Ctrl 추상화: 이미 punch #9에서 isMod(e){return e.metaKey||e.ctrlKey}로 완료 —

이번 세션은 재검증만(전수 grep으로 navigator.platform/UA스니핑 0건 확인).

• CSS Custom Highlight API: 이미 HL_SUPPORTED 피처감지로 안전(미지원 시 조용히 no-op).
• caretRangeFromPoint/caretPositionFromPoint: 이미 폴백 체인 존재(Chromium+WebKit 모두

전자만 지원 — 현재로도 충분).

• 폰트 폴백: 4옵션 전부 마지막 값이 총칭 패밀리(sans-serif/serif/monospace)라 3플랫폼

모두 폰트 소실 없음.

• 스크립트 주입 시점: crownyBridge.js는 자체 setInterval 폴링(섹션 7, 기존 코드)으로

DOM 준비를 기다리므로 WKUserScript(atDocumentEnd) 없이 WebView2의 "document created만 지원"(atDocumentEnd 없음) 제약에도 무수정으로 동작 — 이식성 우려가 실제로는 이미 해소돼 있었음을 확인.

• 신규 문서 spec/오피스-브릿지-크로스플랫폼.md — 스크립트 주입(WKUserScript/WebView2

AddScriptToExecuteOnDocumentCreatedAsync/WebKitGTK webkit_user_content_manager_add_script) + 메시지 채널(webkit.messageHandlers vs chrome.webview.postMessage, macOS=Linux 동일 WebKit) + API 가용성 표 + Phase 1-D 실측 요약을 대응표로 정리(Phase 3 확장 대비).

회귀

• bundle/office/bridge/회귀실행.sh 최종 재실행 27/27 PASS 유지(spec/문서-회귀리포트.md).
• 기본 headless 뷰포트가 756×469라 이미 <900(narrow 로직 상시 활성) 상태로 27/27 통과 —

숨김 로직이 DOM 쿼리 기반 상호작용(dispatchEvent)과 무관함을 실측으로 확인.

• hanseonc_high로 반응형측정.한선 컴파일 통과(760 큐브 생성). ./CrownyAI 3초 생존 확인

(native 파일 무수정이라 당연하지만 게이트 요구사항이라 실행 확인).

관련 파일

• /Users/ef/crownybrowser/bundle/office/bridge/crownyBridge.js (수정 — clampPopoverCard/

applyNarrowLayout/ensureToolbarScrollable/findThreeColRow/findToolbarRow 추가, 섹션 16)

• /Users/ef/crownybrowser/bundle/office/bridge/반응형측정.js (신규 — CDP 실측 도구)
• /Users/ef/crownybrowser/bundle/office/bridge/반응형측정.한선 (신규 — 한선씨 정본, 컴파일 확인)
• /Users/ef/crownybrowser/spec/오피스-브릿지-크로스플랫폼.md (신규 — 1-E 대응표/점검표)
• /Users/ef/crownybrowser/spec/문서-회귀리포트.md (갱신 — 27/27 최종)
• /Users/ef/crownybrowser/spec/오피스-개발계획.md (Phase 1-D/1-E 대상 문서, 무수정 참조만)

무수정 확인: native/crowny-browser.m, native/crowny-shell.m, native/Makefile 기존 타깃, .app 번들, bundle/office/app/index.html — 전부 손대지 않음.

잔여 이슈

• 모듈 탭 행(홈/문서/시트/…) 라벨이 768px 이하에서 셀 안 강제 개행(기능 손실은 없음, 미관만)

— 앱 소유 요소라 이번 트랙에서 의도적으로 미개입(스코프 밖 항목으로 문서화).

• outline/rightPanel은 지금 "900px 미만 무조건 숨김"만 구현 — 좁은 폭에서도 열람하고 싶다는

요구가 나오면 드로어/토글 어포던스 추가 트랙 필요(과설계 방지 차원에서 이번엔 보류).

• Phase 1-E 메시지 채널 대응표는 Phase 3(브릿지 프로토콜 window.crownyBridge 확장) 착수 전

선점 문서일 뿐 — 현재 crownyBridge.js는 네이티브로 메시지를 보내지 않아 구현 대상 없음.