크라우니AI 브라우저 디자인 기준 (사장님 확정 SSOT, 2026-07-12)
원본: CrownyBrowser/디자인기준-SSOT.html (Claude Design 산출). "이 문서와 다르게 구현하면 버그로 간주."
0 · 절대원칙
- 4px 그리드: 모든 크기·간격·위치는 4의 배수만. 임의수치(13px 등) 금지.
- 높이 고정: 탭바40·툴바48·옴니박스36·북마크바32·다운로드바44. 창 커져도 불변, 가로만 늘어남.
- 폰트=스케일표 6단계만. 줄높이도 표값 고정.
- 모든 컨트롤 4상태(기본·hover·pressed·비활성) 전부 정의돼야 출시. "눌러도 반응없음"=hover/pressed 누락.
- 입력위치=출력위치(같은 열·폭).
- 이미지 의존 금지, 아이콘 전부 벡터. 이미지엔 크기고정+대체배경 필수.
1 · 컬러 토큰
라이트(크림 아이보리): chrome/bg #EFE7D8 · surface #FAF6ED · input #FFFFFF · border #E0D5C1 · text #2E211A · text-2nd #8A7965 · accent(골드) #B4863B · hover 8%초콜릿 pressed 14%
다크(다크 초콜릿): chrome/bg #201711 · surface #2B2016 · content #171008 · border #3E3123 · text #F1E7D6 · text-2nd #A08B72 · accent #D9A85C · hover 8%아이보리 pressed 14%
2 · 타이포 (Pretendard 단일, 6단계 외 금지)
display 26/34 700 (새탭 인사말) · title 20/28 700 (설정제목) · heading 15/22 700 (섹션·다이얼로그) · body 14/21 400 (옴니박스·본문·대화) · ui 13/18 400~600 (탭·버튼·메뉴) · caption 12/16 400 (북마크·단축키)
3 · 프레임 규격 (불변 px)
탭바40 · 탭 높이34 라운드10/10/0/0 폭max240/min72 · 툴바48 · 옴니박스 높이36 라운드18 · 아이콘버튼32 아이콘20 · 북마크바32 · 다운로드바44 · 집사패널340고정 · 툴바gap4 · 클릭영역 최소24×24 · 창최소960×600 · macOS 신호등좌측 76px예약 · Windows 창버튼우측 46×32×3. 그 외 두 OS 동일수치.
4 · 인터랙션 4상태 (필수)
전환 ease-out 120ms · hover 80ms · pressed 즉시.
accent버튼: 기본 accent / hover −12%명도 / pressed −20%+scale.97 / 비활성 opacity35%.
아이콘버튼: hover 8%오버레이 / pressed 14%.
포커스링: accent 1.5px + 25%골드 3px외곽 — 키보드 탐색 시 모든 컨트롤.
반응없는 클릭은 존재불가.5 · 메뉴·다이얼로그
메뉴항목 32px 패딩6 라운드12, 단축키 caption 우측정렬. 다이얼로그 최대400px, 주버튼 항상 우측끝·취소 그 왼쪽.
6 · 설정
사이드바168 고정 · 본문최대680 · 행상하패딩12 · 토글40×24. 라벨 body(14) 설명 caption(12).
7 · 토스트
우측하단 여백24 · 폭360고정 · 4초 자동소멸(액션시 8초) · 항상 다크초콜릿 배경(라이트/다크 공통).
화면 구성 (목업 참조)
- 새 탭 = AI 홈: 중앙 큰 입력창(검색/질문/주소 통합) + 크라우니AI/프렌즈/라이프 카드. display 인사말.
- 브라우징: 우측 크라우니집사 패널(340), 페이지 요약/번역/집사 대화. 입력창=말풍선 같은 열.