Crowny INT 모바일 자동 전환 + 폰트 정합
개요
int.crowny.org(9500)에서
/ 접속 시 User-Agent로 PC/모바일 자동 분기, mobile.html 래퍼에
viewport meta + 실기기 어댑터(폰 목업 베젤 해제) 주입, 자체 페이지 5종 폰트 스택을
dc 디자인 정본으로 통일.
무엇을 했는지
1. 서버 UA 분기 (INT서버.한선)
_모바일UA인가(요청) 헬퍼 추가(§823 부근) — User-Agent에 iPhone/Android/Mobile 포함 시 1.
라우팅 디스패치에서 기존 (경로=="/") 또는 (경로=="/pc") 묶인 분기를 분리:
/ : _모바일UA인가()==1이면 mobile.html, 아니면 pc.html
/pc : 무조건 pc.html (데스크톱 탈출구)
/mobile : 무조건 mobile.html (기존 유지)
CROWNY_STRICT=1 컴파일 경고 0, launchctl 재기동 완료.2. 래퍼 viewport + 모바일 실기기 어댑터
- mobile.html·pc.html·bar.html 3파일 head에 viewport meta 삽입(각 71바이트 증가, base64/JS 번들 본문 무손상 diff 확인).
- mobile.html에 인라인 어댑터
<script> 추가: matchMedia(max-width:480px) 또는 UA로 모바일 판정 시
200ms 간격(최대 15s)으로 dc 번들이 비동기 렌더한 390×844 폰 프레임 div를 탐색,
발견 시 전체화면(100vw/100dvh)·베젤 제거·캡션 숨김·배경색 적용.
- 실측 버그 발견 및 수정: dc 번들이
document.documentElement.replaceWith(doc.documentElement)로
전체 문서를 재구성하면서 style 속성이
"width:390px" →
"width: 390px"(공백 삽입)로
재직렬화됨 — 최초 구현의 무공백 substring 매칭이 영구히 실패하는 버그였음.
공백 전부 제거 후 매칭하도록 수정, claude-in-chrome 실브라우저(390×844)에서
베젤 해제·전체화면 렌더 실측 확인(스크린샷 첨부 확인 완료).
3. 폰트 정합
- 트리맵.html·장비.html·guide.html·기관현황.html: 축약 스택
'Helvetica Neue','Apple SD Gothic Neo',sans-serif → 정본
'Helvetica Neue',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif
- guide.html: 원시
monospace 6곳 → 'SF Mono',Menlo,Consolas,monospace
- demo.html: 이미 정본 스택 사용 중 — 수정 불필요(확인만).
관련 파일
/Users/ef/crowny-int2/INT서버.한선 (백업: INT서버.한선.bak-모바일전환전)
/Users/ef/crowny-int2/INT서버.toau (재컴파일 배포)
/Users/ef/crowny-int2/public/mobile.html / pc.html / bar.html (백업: *.bak-모바일전환전)
/Users/ef/crowny-int2/public/mobile-어댑터.한선 — 어댑터 판정 로직 한선씨 동반본(시뮬레이션, ALL_PASS 셀프테스트)
/Users/ef/crowny-int2/public/트리맵.html, 장비.html, guide.html, 기관현황.html — 폰트 정합
검증 (실측)
- 컴파일:
CROWNY_STRICT=1 hanseonc_high 경고 0.
- UA 분기: iPhone UA
/ → mobile.html(148227B), 데스크톱 UA / → pc.html(268577B).
/pc(iPhone UA)→pc.html,
/mobile(데스크톱 UA)→mobile.html 모두 실측 일치.
- viewport: 3파일 각 1건, 원본과 diff 시 head 삽입 라인 외 변경 0(bak 대조).
- 폰트: 대상 5파일 축약 스택 잔존 0, 정본 스택 존재 확인. guide.html raw monospace 0.
- 어댑터: claude-in-chrome 실브라우저(390×844 뷰포트) 재현 — 베젤/캡션 제거, 전체화면 렌더 스크린샷 확인.
- 회귀: /map /equip /orgs /health /tablet /bar /design /guide 전부 200, /api/orgs 정상 응답.
잔여 이슈
- bar.html 어댑터는 지시에 따라 이번 범위 제외(별도 검토 진행 중).
- 데스크톱 폭(1400px 등)에서 어댑터 미동작(false 분기)은 코드 리뷰 + 한선씨 유닛테스트로만 확인 —
이번 세션의 claude-in-chrome 자동화 뷰포트가 resize_window 후에도 423px 고정이라 실브라우저
와이드 뷰포트 라이브 확인은 못함(로직 가드 자체는 단순 조건문이라 위험 낮음).
- VPS 배포는 메인 세션이 별도 수행(이번 작업 범위 아님, 로컬 9500만 적용/재기동).