크라우니버스 디자인 표준 적용 — 2026-05-02

개요

verse.crowny.org (6561 Verse Ecosystem)에 크라우니디자인표준202605를 적용. 기존 premium.crowny.org 사이트의 dark+gold CSS를 복사한 디자인에서, 표준 API(62 범용 규칙 + culture 업종 가이드)를 기반으로 전면 개선.

핵심 변경

팔레트 변경 (culture 업종 가이드 준수)

• 기존: dark+gold (#09090B + #D4A72C) — premium.crowny.org 사이트 스타일 복사
• 변경: velvet+rose-gold (#140A10 + #D4A088) — culture 업종 표준 팔레트
• crowny-verse는 industryGuides.culture에 등록된 서비스

타이포그래피 (T01~T08)

• Cormorant Garamond: 히어로 제목, 모달 제목 (display)
• Inter: 본문, UI 텍스트 (body)
• JetBrains Mono: Verse 코드, 숫자, 시장규모 (mono)
• tabular-nums 적용 (금액/통계)
• 히어로 letter-spacing: -0.03em

CSS 변수 체계화 (X04 준수)

• 색상: --bg, --surface, --raised, --higher, --border, --accent, --text 등
• 간격: --space-xs(4px) ~ --space-section(56px) — 4px 그리드 (S01)
• 라운딩: --radius-sm(6px) / --radius-md(8px) / --radius-lg(12px) (B02)
• 그림자: --shadow-sm ~ --shadow-xl 4단계 (D01)
• 모션: --ease(cubic-bezier) + --dur-fast ~ --dur-enter (M01,M02)

컴포넌트 표준 (K01~K08)

• 카드: surface + 1px border + radius + padding
• 버튼: primary(accent 채움) + ghost(border) 2종만
• 모달: overlay rgba(0,0,0,0.7) + shadow-xl
• 토스트: 하단 중앙 + fadeUp + 3초 자동닫기 (alert() 대체)
• 입력: raised 배경 + border + focus시 accent

접근성

• prefers-reduced-motion 미디어 쿼리 (M03)
• focus-visible 스타일 (QC24)
• aria-label, role, aria-modal 속성 (QC25)
• 모바일 터치 타겟 44px (R05)

반응형 (R01~R05)

• 데스크톱 우선 (768px / 480px 브레이크포인트)
• 768px 이하: 2컬럼 그리드
• 480px 이하: 1컬럼 그리드

Arch 구조 패턴

• 카드 hover시 ::after 그라데이션 탑바 (arch-landing 핵심 패턴)
• translateY(-2~3px) + shadow 부상 효과

적용한 규칙 수

• 범용 규칙: 62개 중 적용 가능한 전부 적용
• Culture 업종 규칙: CU01~CU08 중 UI 관련 전부 적용
• 검수 체크리스트: 25항목 중 자동 검수 가능한 19항목 준수

관련 파일

• /Users/ef/crowny-verse/web/index.html — 프론트엔드 (전면 리디자인)
• /Users/ef/crowny-primium/server.js — 디자인 표준 API (참조)
• /Users/ef/CrownyDoc/projects/2026-05-08-design-standard-3layer.md — 표준 문서 (참조)

잔여 이슈

• /story 페이지도 동일 표준 적용 필요
• 서비스 상세 모달에서 실제 이메일 연동 (현재 토스트만)