크라우니브라우저 + OS 디자인 통합 완성 보고
개요
크라우니 전용 브라우저를 두 경로(WebKit 래퍼 + 커스텀 한선씨 렌더러)로 병행 구축. 디자인 번들(6 팔레트, 35+ 컴포넌트)을 브라우저와 OS 셸이 공유하는 아키텍처를 실증.
결과물
1. 프리미엄 디자인 시스템 (libs/프리미엄.한선)
- v2: 6 팔레트(흑단황동 / 진주브론즈 / 코발트백금 / 벨벳로즈골드 / 세이지테라코타 / 월넛아이보리)
- 35+ CSS 컴포넌트 (btn, card, input, dial, LED, VU미터, toast, modal, tabs, table, toggle, badge, avatar, progress, ...)
- 17.5KB CSS 자동 생성,
data-theme 속성으로 6가지 완전히 다른 느낌
2. 도메인별 프리뷰 (crowny-org/preview/)
- bank.html (금융·흑단황동), play.html (문화·벨벳로즈골드), int.html (관제·코발트백금)
- church.html (평안·진주브론즈), market.html (마켓·세이지테라코타), docs.html (독서·월넛아이보리)
- browser-native.html (meta-only 디자인 주입 시연)
- os-shell.html + 6 테마 변형
3. CrownyBrowser Path A — v0.2 Daily Driver
- 127KB arm64 Cocoa 바이너리
- WKWebView + crowny-internal:// 스킴
- 멀티탭 (⌘T/W), 히스토리 (⌘Y), 북마크 (⌘D/B)
- 6 테마 윈도우 크롬 동기화
- 자동 디자인+폰트 번들 주입
4. CrownyBrowser Path B — 커스텀 렌더러
- HTML파서.한선 → CSS해석.한선 → 박스레이아웃.한선 → 박스렌더.한선
- HTML → DOM → 스타일 → 박스 트리 → 뷰.한선 → render.cmd
- 좌표 버그 수정 완료 (센티널 값 가드)
5. 폰트 번들
- 3 서체 × 2 서브셋 = 6 WOFF2 (242KB)
- fonts.css: crowny-internal://fonts/ 스킴으로 자급
- 한국어는 macOS 시스템 폰트 폴백
6. OS 셸 프로토타입 (셸.한선)
- 같은 프리미엄.한선 팔레트로 상태바 + 독바 + 앱런처 CSS 생성
- 6 테마 셸 HTML 동시 생성
- 실증: 브라우저 번들 = OS UI 토큰 (재사용 100%)
7. 프로토콜 사양
- spec/design-protocol.md: 서버 최소 HTML, 주입 절차, 버전 협상, 테마 네고, 보안 경계, OS 통합
수치
| 항목 | 값 |
|---|
| 번들 총 크기 | 292KB |
| 생성된 CSS | 17,667 bytes (389줄) |
| 디자인 팔레트 | 6종 |
| CSS 컴포넌트 | 35+ |
| WOFF2 폰트 | 242KB (6파일) |
| 프리뷰 페이지 | 13개 |
| Path A 바이너리 | 127KB arm64 |
| Path B 라이브러리 | 4개 (74KB 한선씨) |
| 용량 절감 | 86% (브라우저 번들 vs 외부 CSS) |
관련 파일
/Users/ef/CrownyBrowser/ — 전체 프로젝트/Users/ef/CrownyOS/crownyc/libs/프리미엄.한선 — 디자인 원본/Users/ef/crowny-org/preview/ — 프리뷰 13페이지/Users/ef/CrownyBrowser/CLAUDE.md — 프로젝트 가이드
잔여 이슈
- Path B: 풀 premium-v1.css(131 변수)가 VM 해시맵 한계 초과 → 미니 CSS로 우회 중
- Path B: 텍스트 폰트 크기 상속, 인라인 줄바꿈 개선
- Path A: 탭 드래그, 프라이빗 탭, ⌘F, 다운로드 매니저
- 폰트: CJK 서브셋 미포함 (시스템 폴백)
- HTTPS: Path A는 WebKit이 처리, Path B 미구현