크라우니메신저 v3 — crowny.org 본체 디자인 시스템 통일
개요
크라우니메신저 v3의 UI를 crowny.org 본체 디자인 시스템(크림 + 브론즈 골드)과 통일했다.
기존 파란색(
#0066CC,
#007aff,
#1a73e8) 계열을 브론즈 골드(
#8B6914) + 초콜릿 브라운(
#3D2B1F) + 크림 아이보리(
#FFF8F0)로 전면 교체.
작업 내역
1. 메신저테마.한선 신규 생성 (정본)
/Users/ef/CrownyOS/apps/메신저/v3/메신저테마.한선
crowny테마라이트(), crowny테마다크(), 테마CSS생성(모드) 3개 함수
- crowny.org
:root 토큰 완전 이식
2. UI컴포넌트.한선 갱신
/Users/ef/CrownyOS/apps/메신저/v3/웹v3/UI컴포넌트.한선
테마CSS생성() 함수 전체 — 파란색→골드 크림 토큰으로 교체
.bubble-row.ai .bubble — #e8f4ff → var(--accent-soft)
.mention-me — rgba(0,102,204,0.12) → var(--accent-soft)
.poll-bar — rgba(0,102,204,0.1) → var(--accent-soft)
.sso-login-btn, .wallet-modal-header-grad, .tx-card, .profile-crn-box — 파란 그라디언트 → 골드 그라디언트
3. index.html 갱신
/Users/ef/CrownyOS/apps/메신저/v3/웹v3/index.html
:root 변수 블록 전체 교체 (crowny-blue/purple → 크림+골드 시스템)
[data-theme=dark] 블록 갱신 (다크: #1A1208 배경, #C49A25 골드)
- 폰트:
Noto Sans CJK KR 포함으로 crowny.org와 동일하게
<meta name="theme-color"> — #1a73e8 → #8B6914
<link rel="mask-icon"> color — #1a73e8 → #8B6914
- 로그인화면 그라디언트, 아바타, 전송버튼, AI버블, 지갑패널 등 파란색 19곳 교체
- PWA 설치 배너 —
#1a73e8 → #8B6914
4. manifest.json 갱신
/Users/ef/CrownyOS/apps/메신저/v3/웹v3/manifest.json
theme_color: #1a73e8 → #8B6914
background_color: #0e1419 → #FFF8F0
적용된 디자인 토큰 (라이트 모드)
| 변수 | 값 | 용도 |
|---|
--bg / --bg-primary | #FFF8F0 | 크림 아이보리 배경 |
--bg-secondary | #FFFBF5 | 밝은 크림 |
--bg-card | #F7F3ED | 카드/상대방 말풍선 |
--text-primary | #3D2B1F | 초콜릿 브라운 |
--text-secondary | #6B5744 | 보조 텍스트 |
--border | #E8E0D8 | 경계선 |
--accent | #8B6914 | 브론즈 골드 시그니처 |
--accent-hover | #6B500F | 호버 |
--bg-bubble-me | #8B6914 | 내 말풍선 (골드) |
--bg-bubble-other | #F7F3ED | 상대 말풍선 (크림) |
--text-bubble-me | #FFF8F0 | 내 말풍선 글자 |
관련 파일 경로
- 정본 테마:
/Users/ef/CrownyOS/apps/메신저/v3/메신저테마.한선
- UI 컴포넌트:
/Users/ef/CrownyOS/apps/메신저/v3/웹v3/UI컴포넌트.한선
- SPA HTML:
/Users/ef/CrownyOS/apps/메신저/v3/웹v3/index.html
- PWA 매니페스트:
/Users/ef/CrownyOS/apps/메신저/v3/웹v3/manifest.json
- 참조 원본:
/Users/ef/crowny-org/style.css
잔여 이슈
- 한선씨 컴파일 검증 (Bash 권한 필요):
hanseonc_high 메신저테마.한선, UI컴포넌트.한선
- JS 문법 검증 (
node -e): index.html 스크립트 블록
- 라이브 검증 (
curl http://localhost:9752/): 서버 실행 후 골드 토큰 확인
- 이모지 픽커 색상은 별도 에이전트가 처리 예정