사이트 디자인 톤을 4시간만에 갈아엎기 — Mono Ledger에서 Toss로

CPATOOLS 사이트를 처음 만들 때 톤은 Mono Ledger 였다. 베이지 종이 + 짙은 잉크 + 차변청 액센트 + 두꺼운 검정 보더 + 홈 hero에 ASCII 박스 프레임(┌─┐ / └─┘). 회계장부 메타포가 강하게 박힌 디자인.

일주일 운영하고 다시 보면서 무거움을 느꼈다. 1인 사이트 + 개업시장 회계사 타깃에는 부담이었다. 메타포가 강할수록 사이트가 무거워진다.

5개 시안 동시 비교 페이지

5개 후보를 한 페이지에서 비교하기 위해 /design-lab 비공개 페이지를 만들었다.

• Toss (한국 fintech)
• Anthropic (베이지 + 오렌지)
• Supabase (다크 우선 + 녹색)
• Obsidian (다크 + 보라)
• PostHog (아이보리 + 노랑 + mono)

각 시안은 헤더 + hero + 도구 카드 + 글 발췌 + 코드 블록을 미니로 렌더하는 미니어처 컴포넌트로 만들었다. 라이트/다크를 좌우로 동시에 보여줘서 한 화면에 5×2 = 10개 미니어처가 쌓였다.

<DemoFrame theme="toss" mode="light" />
<DemoFrame theme="toss" mode="dark" />

CSS 변수 스코프는 data-theme 속성으로 분리했다. 사이트 글로벌 변수에 영향 없이 미니어처 안에서만 변형이 적용된다.

.theme-card[data-theme="toss"][data-mode="light"] {
  --color-bg: #ffffff;
  --color-accent: #3182f6;  /* Toss 청 */
  --demo-radius: 12px;
}

Toss 변형 8안 카탈로그

Toss를 픽한 후, 단독 변형 8가지를 또 한 페이지에 늘어놓았다.

1. 헤딩 폰트 mono → sans
2. 카드 라운드 8 → 16px
3. 카드 그림자 + hover 떠오름
4. 버튼 라운드 12 + 굵은 텍스트
5. 자간 -0.04em + 행간 1.7
6. 칩/뱃지 → pill
7. 코드블록 라운드 0 → 8px
8. ALL — 전부 적용

베이스(현재) + 변형 8개 + ALL = 10개 미니어처. 사용자가 한 화면에서 차이를 보고 “전체 적용” 픽.

적용은 토큰 한 곳에서

진짜 작업은 짧았다. global.css의 @theme 토큰 한 줄로 라운드가 일괄 변경됐다.

@theme {
  --radius-lg: 1rem;       /* 8 → 16px — 카드 */
  --radius-xl: 0.75rem;    /* 버튼 */
  --color-accent: #3182f6;
  /* ... */
}

다만 함정 하나 — “Sharp 라운드 강제 0” 글로벌 셀렉터가 있었다.

/* Mono Ledger 시절: 모든 rounded-* 를 0으로 강제 */
.rounded-lg, .rounded-xl, ... { border-radius: 0 !important; }

이게 살아있으면 토큰을 바꿔도 안 먹는다. 강제 셀렉터를 통째로 제거해야 토큰이 살아남.

그림자·hover 떠오름은 컴포넌트별 — 영향 큰 카드 5~6곳만 손봐도 시각적 변화는 확실하다.

class="block p-5 rounded-lg border border-[var(--color-border)]
       bg-[var(--color-surface)] shadow-sm hover:shadow-md
       hover:-translate-y-0.5 hover:border-[var(--color-accent)]
       transition-all"

회고

• 메타포가 강할수록 사이트가 무거워진다. 회계장부 메타포는 첫 인상에는 강하지만 매일 보는 사이트로는 피곤했다.
• 시안은 텍스트로 설명해도 모른다. 미니어처라도 직접 픽셀로 보여줘야 결정이 빠르다.
• CSS 변수 + Tailwind v4 토큰 시스템은 재시공의 마찰을 거의 0으로 만든다. 한 곳을 바꾸면 사이트 전체가 따라온다.
• 다크모드는 라이트의 단순 반전이 아니다. Toss는 라이트가 메인, 다크가 보조 — 다크 변수 별도 튜닝 필요.

/design-lab 페이지는 톤 결정 후에도 일단 남겨두기로 했다. 향후 또 톤 갈아엎을 때 비교 기준점으로.