CrownyDesign Partner — 모바일 지원 구현
개요
design.crowny.org (CDP v4.2) CATIA급 CAD/CAM 웹 앱에 완전한 모바일 지원을 추가했다. 로그인부터 3D 뷰어, 리뷰 마크업, 작업 모드 전환까지 모바일에서 전체 워크플로우가 동작한다.
구현 내용
Phase 1: 모바일 인증 + 레이아웃 + 제스처
- mobile-auth.js: 역할 기반 로그인 (admin/designer/engineer/reviewer/viewer), localStorage 세션, 게스트 모드
- mobile-layout.js: 모바일 헤더, 하단 탭바, FAB 메뉴, 바텀시트 (peek/half/full), 도구 팔레트, AI 코파일럿 시트
- mobile-gestures.js: 터치 제스처 엔진 (1손가락 오빗, 2손가락 핀치줌/팬, 더블탭 프레임올, 롱프레스 컨텍스트, 3손가락 언두)
- mobile.css: 480줄+ 모바일 전용 스타일, CSS Grid 재정의 (<768px), 노치/세이프에리어, 가로모드
Phase 2: 리뷰 마크업
Phase 3: 작업 모드
Phase 4: PWA + Service Worker
- sw.js: stale-while-revalidate 캐싱 (JS/CSS/HTML)
- manifest.json: standalone 디스플레이, SVG 아이콘, 테마색 #2D7D5F
cdp-dist 동기화
- cdp-dist/index.html에 리뷰/모드 CSS, HTML, JS 인라인 통합
- sw.js, manifest.json 복사
파일 구조
cdp/
├── mobile.css # 모바일 전용 스타일 (480줄+)
├── sw.js # Service Worker
├── manifest.json # PWA 매니페스트
├── MOBILE_SPEC.md # 모바일 기획 선언서
├── src/
│ ├── app.js # (수정) 모바일 모듈 임포트/초기화
│ └── mobile/
│ ├── mobile-auth.js # 인증
│ ├── mobile-layout.js # 레이아웃
│ ├── mobile-gestures.js # 터치 제스처
│ ├── mobile-review.js # 리뷰 마크업
│ └── mobile-modes.js # 작업 모드
├── han/
│ ├── 모바일인증.한선 # 역할 권한 로직
│ ├── 모바일레이아웃.한선 # 탭/시트/FAB 상태
│ ├── 모바일제스처.한선 # 거리/제스처 계산
│ ├── 모바일리뷰.한선 # 마크업/코멘트/승인 로직
│ ├── 모바일모드.한선 # 모드 전환/접근 제어
│ ├── 모바일저장소.한선 # IndexedDB 오프라인 저장 로직
│ └── 모바일펜슬.한선 # Apple Pencil 스타일러스 로직
cdp-dist/
├── index.html # (수정) 인라인 모바일 전체 통합 (807줄)
├── sw.js # (복사)
└── manifest.json # (복사)
기술 결정
- 바텀시트 UX 패턴: 사이드바 대신 바텀시트로 모바일 패널 접근 (peek 60px / half 50% / full 85%)
- CSS Grid 오버라이드: <768px에서 데스크톱 패널 숨기고 모바일 헤더+뷰포트+탭바 3행 그리드
- cdp-dist 인라인: cdp-dist는 단일 HTML이므로 모든 모바일 코드를 인라인으로 통합
- IndexedDB: 최대 3개 프로젝트 로컬 캐싱, 온라인 복귀 시 자동 동기화
- Apple Pencil: PointerEvent 기반 압력감지 스타일러스, 모델링 모드에서 자동 활성화
서버
- 개발: cdp/ (모듈 기반)
- 프로덕션: cdp-dist/ (인라인 단일파일, :8729)
잔여 이슈
- crownyc VM 틱/배열 한계로 한선씨 런타임 테스트 제한적
- JWT 토큰 기반 인증 (현재는 localStorage 이름+역할)
- 서버 사이드 프로젝트 동기화 API