Color Consistency Analysis and Adjustment

현재 피드백의 핵심은 페이지별 임의 색상 사용으로 인한 시각적 불일치입니다. 책방골목에는 신뢰감 있는 블루를 기본으로 사용하고, 앰버는 할인·추천·중고 상태 등 주목이 필요한 정보에 제한적으로 사용하는 체계가 적합합니다.

권장 색상 체계

컴포넌트별 통일 규칙

• 주요 CTA는 항상 #2563EB 계열로 통일합니다.
  • 구매하기, 장바구니, 결제하기, 회원가입
• 앰버는 CTA 전체보다 정보 강조에 사용합니다.
  • 할인율, 추천 도서, 오늘의 특가, 적립 포인트, 인기 배지
• 카드 강조 테두리는 블루 또는 앰버 중 하나만 사용합니다.
  • 일반 선택·활성 상태: 블루
  • 가격 혜택·프로모션 상태: 앰버
• 카드마다 서로 다른 파란색이나 주황색을 직접 지정하지 말고, 공통 토큰을 사용해야 합니다.
• 앰버 배경 위에는 흰색 텍스트를 피합니다. #F59E0B는 흰색과의 대비가 낮으므로 #451A03 같은 짙은 갈색 텍스트가 적합합니다.
• 블루 버튼 #2563EB에는 흰색 텍스트를 사용할 수 있습니다.

라이트 모드

:root {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-soft: #DBEAFE;

  --color-secondary: #F59E0B;
  --color-secondary-hover: #D97706;
  --color-secondary-soft: #FEF3C7;
  --color-on-secondary: #451A03;

  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-card: #FFFFFF;
  --color-border: #E5E7EB;

  --color-text: #111827;
  --color-text-muted: #6B7280;
}

다크 모드

다크 모드에서는 배경과 카드의 명도 차이를 작게 유지하고, 색상은 채도를 약간 낮춰 눈부심을 줄이는 것이 좋습니다.

.dark {
  --color-primary: #60A5FA;
  --color-primary-hover: #93C5FD;
  --color-primary-soft: #1E3A8A;

  --color-secondary: #FBBF24;
  --color-secondary-hover: #FCD34D;
  --color-secondary-soft: #78350F;
  --color-on-secondary: #1C1917;

  --color-background: #111827;
  --color-surface: #1F2937;
  --color-card: #253244;
  --color-border: #374151;

  --color-text: #F9FAFB;
  --color-text-muted: #D1D5DB;
}

다크 모드에서 주요 버튼을 너무 어두운 #1D4ED8로 유지하면 버튼과 배경의 구분이 약해질 수 있으므로, 버튼에는 #3B82F6 또는 #60A5FA를 사용하고 텍스트는 어두운 색으로 조정하는 방식도 좋습니다.

자연스러운 색상 전환

버튼과 카드에는 동일한 전환 규칙을 적용합니다.

.button,
.card,
.badge,
.tab {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

권장 상태 변화는 다음과 같습니다.

• 기본 → hover: 명도 8~12% 변화
• hover → pressed: 더 어두운 색으로 8~12% 변화
• 카드 hover: 배경색을 크게 바꾸기보다 translateY(-2px)와 약한 그림자 사용
• 포커스: #2563EB 기반의 2px outline 유지
• 앰버 강조: 전체 카드 배경보다 배지, 가격, 상단 라인에 제한적으로 적용

책방골목에 맞는 시각적 방향

책방골목은 중고서점 커머스 플랫폼이므로 지나치게 강한 원색보다 “신뢰감 있는 블루 + 따뜻한 앰버” 조합이 적합합니다.

• 블루: 안전한 거래, 검색, 구매, 신뢰
• 앰버: 책의 따뜻함, 발견의 즐거움, 할인과 추천
• 중립색: 종이와 서가를 연상시키는 차분한 공간감

특히 상품 카드에서는 가격과 할인율만 앰버로 강조하고, 제목·저자·상태 정보는 중립색으로 유지하면 정보 위계가 명확해집니다. 이 규칙을 공통 디자인 토큰으로 적용하면 페이지마다 버튼과 카드 강조색이 달라지는 문제가 줄어듭니다.