크라우니 디자인 표준 v1 — finance / findev / 로컬인덱스 통일
개요
사용자 지시 "finance.crowny.org도 findev.crowny.org도 GUI를 crowny.org / tiomta.com에 통일".
두 사이트의 디자인 토큰을 추출 → 한선씨 표준 라이브러리 발행 → 3개 표면 일괄 적용.
표준 토큰 (라이트)
| 변수 | 값 | 의미 |
|---|
| --bg | #FAF9F7 | 오프화이트 배경 |
| --bg-card | #FFFFFF | 카드 배경 |
| --bg-soft | #F4F1ED | 소프트 배경 |
| --border | #E8E3DC | 보더 |
| --text | #1A1A1A | 본문 글씨 |
| --text2 | #6B6B6B | 보조 글씨 |
| --accent | #C9A961 | 골드 (링크/액센트) |
| --t-color | #22A06B | 4상 T (녹) |
| --o-color | #C9A961 | 4상 O (골드) |
| --a-color | #D93025 | 4상 A (빨) |
| --u-color | #7C6CDB | 4상 U (보라) |
| --font | -apple-system, Pretendard, Noto Sans KR | 한글 우선 |
다크 모드 변형 포함. tiomta 그라데이션 브랜드(
linear-gradient(accent, u-color)) 채택.
발행물
| 위치 | 형식 | 용도 |
|---|
/Users/ef/crowny-design/크라우니디자인.한선 | 한선씨 라이브러리 | 함수로 토큰/컴포넌트 발행 |
/Users/ef/crowny-design/크라우니표준.css | 정적 CSS | link 또는 인라인 주입용 |
libs/크라우니디자인.한선 | 심볼릭 링크 | 한선씨 가져오기 표준 경로 |
std/크라우니디자인.한선 | 심볼릭 링크 | CROWNY_STD 경로 |
한선씨 API
가져오기 "크라우니디자인.한선"
표준_토큰() // :root + [data-theme=dark] CSS
표준_기본() // 리셋 + body + 폰트
표준_컴포넌트() // 헤더/카드/KPI/뱃지/버튼/그리드
표준_헤더(브랜드, 부제, 우측HTML) // sticky 그라데이션 헤더
표준_카드(레이어, 제목, 메타, 본문, URL) // hover 카드
표준_KPI(라벨, 값, 부가) // KPI 카드
표준_페이지시작(제목) / 표준_페이지끝() // <html>~<body> 셸
적용 결과
finance.crowny.org (사용자 서비스)
web/assets/style.css :root 블록 — 다크 8토큰 → 라이트 15토큰- 다크 hex 잔재 8건(
#0a0a0f) → #FFFFFF 일괄 교체
- 기존 클래스명/구조 유지 (변수 값만 교체) → 0건 회귀
- 가동: :9750 백엔드 / :9754 프록시, Ti(건강)
findev.crowny.org (개발서버 노출)
- 시즌1서버.한선 무수정 (다른 세션 영역)
- 9755 Node 프록시가
text/html 응답에 표준 CSS 인라인 주입
</head> 직전 <style data-findev-standard> + 시즌1 인라인 스타일 오버라이드data-theme="light" 강제, <body> 직후 안내 배너 삽입- JSON 응답은 미주입 (content-type 분기)
- 가동: :9753 백엔드 / :9755 프록시, Ti(건강)
/Users/ef/crowny-local-index.html (로컬 인덱스)
- 한선씨
로컬인덱스생성기.한선이 크라우니디자인.한선 가져오기
- 50개 카드 / 7 그룹 / 31KB
- 4상 뱃지(T/O/A/U)로 레이어 표기, tc-card-hover, sticky 헤더
- 빌드:
/Users/ef/crowny-finance/로컬인덱스빌드.sh
패턴 학습
fn_크라우니디자인_라이브러리 — 한선씨 디자인 표준 라이브러리 패턴fn_프록시_표준CSS주입 — Node 프록시 HTML 응답에 표준 CSS 인라인 주입
운영 메모
data-theme="light" 기본 / [data-theme="dark"] 자동 변형- 시즌1 등 다른 세션 영역 백엔드는 무수정 — 프록시 단 주입으로 통일 확보
- 표준 토큰 갱신 시:
/Users/ef/crowny-design/크라우니디자인.한선 편집 → 발행 스크립트 재실행 → finance/findev 자동 반영(프록시는 재기동 필요)
남은 과제
- 시즌1서버.한선 자체적으로 표준 토큰 채택 시 9755 프록시의 주입 제거 가능 (시즌1 세션 작업)
- finance의 헤더/렌탈 hero/모달 등 컴포넌트를 tc-* 표준 클래스로 점진 마이그 (지금은 변수만 교체, 클래스는 기존 그대로)
- premium.crowny.org 9780 백엔드 구축 — 디자인 표준 토큰을 거기서 발행
- 다른 사용자 서비스(bank/dex/asset 등)에도 표준 적용