크라우니브라우저 + 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 미구현