← 목록
기타 2026-05-27 3KB 읽기 4분

크라우니메신저 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#e8f4ffvar(--accent-soft)
  • .mention-mergba(0,102,204,0.12)var(--accent-soft)
  • .poll-barrgba(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/): 서버 실행 후 골드 토큰 확인
  • 이모지 픽커 색상은 별도 에이전트가 처리 예정