estel.crowny.org 모바일 전용 모드
개요
estEL QI(estel.crowny.org)를 실제 폰에서 열면 데스크톱 레이아웃 안의 402×874 폰 목업(라운드 54px·보더 10px·가짜 "9:41" 상태바)이 그대로 보이던 문제를 해결. 기본 사용자가 모바일 전용으로 쓸 예정이라, 실모바일에서는 목업 프레임 없이 네이티브 앱처럼 풀스크린이 되도록 구현.
무엇을 했는지
- 판정:
@media (max-width:768px)를 기본 렌더 판정으로 사용 + 셸.js에서 matchMedia로 <html>에 is-mobile 클래스 토글(리사이즈 대응 JS 훅).
- 별하늘(sky) 모듈 풀스크린:
.sky-phone을 width/height 100%로, border/radius/box-shadow/margin 제거. 가짜 노치·가짜 "9:41" 상태바(.sky-status) display:none. 하단 5탭은 env(safe-area-inset-bottom) 반영.
- 셸 컴팩트화: 상단 탭의
⌘n 라벨 숨김, ⌘K 필은 아이콘/축약형(⌘K만 노출), 상태바는 핵심 3항목(트윈 구축자·시드 재현·정직 경계)만 남기고 나머지는 숨김(행은 가로 스크롤 유지), 도움말 FAB에 safe-area 패딩.
- 뷰포트:
viewport-fit=cover 추가, .estel-shell 높이를 모바일에서 100dvh로.
- 데스크톱 회귀 0: 모든 변경은
@media (max-width:768px) 안에만 있어 768px 초과에서는 픽셀 변화 없음(1440×900 스크린샷으로 확인).
실측으로 잡은 버그 2건
.sky-phone이 데스크톱 규칙(flex:none = flex-shrink:0)을 그대로 상속한 채 width:100%만 주면, 내부 콘텐츠 min-content가 flex 컨테이너를 뷰포트보다 넓게 밀어내 텍스트 중간이 화면 밖으로 밀려 조용히 잘려 보이는 버그(스크린샷/실기기 둘 다 재현). min-width:0; flex:1 1 auto;를 같이 덮어써서 해결.- 도움말 FAB가 sky 모듈의 하단 5탭(h88,
position:absolute)과 겹치는 버그. html[data-estel-view="sky"](셸.js가 activateModule()에서 세팅)로 sky 뷰에서만 FAB/토스트를 탭바 위로 올림.
- 디버깅 방법론 노트: 헤드리스 크롬
--headless=new --window-size=390,844의 --window-size는 실제 window.innerWidth와 불일치할 수 있음(실측: 500으로 렌더됨). CDP Emulation.setDeviceMetricsOverride + Runtime.evaluate로 직접 scrollWidth/innerWidth를 읽어 확인하는 게 신뢰 가능한 검증법.
관련 파일
/Users/ef/crowny-estel/앱.html — 뷰포트 메타, 모바일 CSS(@media max-width:768px 블록)/Users/ef/crowny-estel/셸.js — setupMobileWatcher()(is-mobile 클래스 토글), renderStatus() 핵심/옵션 클래스 분리, activateModule()의 data-estel-view 속성/Users/ef/crowny-estel/셸.한선 — 판정모바일()/모바일기준너비()/상태바핵심텍스트() 미러 함수(9/9 자체검증 통과)/Users/ef/crowny-estel/모듈/sky.js — .sky-phone 풀스크린 CSS, 노치/가짜 상태바 숨김, 하단탭 safe-area- 백업:
앱.html.bak-모바일전, 셸.js.bak-모바일전, 모듈/sky.js.bak-모바일전, 셸.한선.bak-모바일전
검증
node --check 전체 통과(앱.html은 HTML이라 해당 없음)- CDP(Chrome DevTools Protocol)로 390px 폭에서 sky 전체 뷰(별하늘/퍼즐/물어보기/설계/내별) + 8개 데스크톱 모듈(qi/lab/puzzle/vault/learn/partner/hw/ops) 전부
document.documentElement.scrollWidth === window.innerWidth === 390 확인(가로 오버플로 0)
- 1440×900 데스크톱 스크린샷으로 기존 폰 프리뷰+우측 레일 룩 회귀 없음 확인
- 셸.한선 자체검증 9/9 통과
잔여 이슈
- 없음(요청 범위 내 완료). 향후 다른 모듈에 모바일 전용 바텀시트/제스처 UX가 필요해지면
is-mobile 클래스를 그대로 훅으로 활용 가능.