KB Bank Style Guide (KB국민은행 / KB스타뱅킹 UI)

이 스킬은 KB금융그룹 / KB국민은행 / KB스타뱅킹의 시각 언어를 토대로 한국형 인터넷뱅킹 UI를 빠르게 구축하기 위한 가이드와 토큰·컴포넌트 모음이다.

1. 디자인 정체성

요소	톤
인상	신뢰감 있고 명료한 / 정보 밀도가 높지만 답답하지 않은
분위기	화이트 캔버스 + 강한 옐로우 포인트 + 진한 본문 그레이
형태	큰 라운딩(12–20px), 옅은 그림자, 카드 단위 정보 그룹화
모션	과하지 않게. 누름 상태(scale 0.98) + 토글 트랜지션 위주
보이스	"○○님, ~하세요/했어요" 친근한 존댓말. 숫자는 천단위 콤마 + "원"

KB의 시각적 코어는 단 두 가지다:

스타-비(Star-b) 옐로우 — 단일 강한 액센트
두꺼운 본문 그레이/블랙 — 가독 중심 정보

→ 이 두 개를 깨지 않고 보조 컬러(민트·코랄·앰버)는 거래 분류용으로만 절제 사용.

2. 분기: 모바일 앱 vs 웹

이 스킬은 두 프리셋을 제공한다.

항목	모바일 (KB스타뱅킹 톤)	웹 (kbstar.com 톤)
배경	`#FFFFFF` 또는 `#F7F8FA`	`#F4F6F9`
카드	그림자 있는 화이트 카드	보더 위주, 그림자 약함
본문 폰트 크기	15–17px	14–15px
정보 밀도	낮음 (큰 잔액·큰 버튼)	높음 (테이블·폼·탭 많음)
헤더	콤팩트 + 검색/알림/MY	GNB 2단(상단 유틸 + 메인 메뉴)
주 사용처	홈/송금/카드/자산	조회/거래/상품가입/고객센터

요청에 "앱"/"모바일"/"스타뱅킹" 키워드가 있으면 모바일 프리셋, "웹"/"인터넷뱅킹"/"홈페이지"이면 웹 프리셋을 우선 사용한다. 명시 없으면 모바일을 기본으로 한다.

3. 컬러 토큰

KB의 정확한 브랜드 컬러는 KB금융그룹 CI 가이드(별색 기준)에 정의되어 있으며, 공개 자료 기반의 가장 널리 알려진 근사값은 다음과 같다.

/* assets/tokens.css 와 동일 */
@theme {
  /* Brand */
  --color-kb-yellow:        #FFBC00;  /* Star-b Yellow (KB 시그니처) */
  --color-kb-yellow-strong: #FFCC00;  /* 강조/상태(클릭) */
  --color-kb-yellow-soft:   #FFF7DB;  /* 노랑 톤 배경 */
  --color-kb-dark:          #60584C;  /* KB 보조 다크 (스톤 그레이) */
  --color-kb-black:         #1A1A1A;  /* 본문 강조 블랙 */

  /* Surface (Mobile preset) */
  --color-bg:        #F7F8FA;
  --color-surface:   #FFFFFF;
  --color-line:      #EEF0F3;
  --color-line-2:    #E5E8EC;

  /* Text — 한국 금융권 표준 그레이 스케일 */
  --color-ink:    #191F28;  /* 본문 강조 */
  --color-ink-2:  #4E5968;  /* 본문 보조 */
  --color-ink-3:  #8B95A1;  /* 캡션/메타 */
  --color-ink-4:  #B0B8C1;  /* placeholder/disabled */

  /* Semantic */
  --color-positive: #1EC894;  /* 입금/상승 */
  --color-negative: #F04452;  /* 출금/하락 (위험·삭제 전용) */
  --color-warn:     #FFB020;
  --color-info:     #3182F6;  /* 링크·정보 */

  /* Category (거래/소비 차트용 절제 팔레트) */
  --color-cat-1: #FFBC00;
  --color-cat-2: #FF8A3D;
  --color-cat-3: #1EC894;
  --color-cat-4: #5D7BFF;
  --color-cat-5: #B795FF;
}

사용 규칙

주 액션 버튼: KB옐로우 배경 + 검정 텍스트. 옐로우 위 흰색 텍스트는 가독성이 부족하며 KB의 실제 패턴도 검정.
보조 액션: --color-line 배경 + --color-ink 텍스트
링크/정보: --color-info (파란색은 거래내역 입금 표시에도 쓰임)
빨강은 위험·삭제·하락에만. 출금 거래는 빨강이 아니라 본문 그레이(--color-ink)로 표시 (KB스타뱅킹 패턴)

4. 타이포그래피

이 스킬은 KB금융그룹 내부 사용을 전제로 하며, KB금융체(KBFG Display / KBFG Text)를 기본 폰트로 사용한다.

KBFG Display (제목): Bold / Medium / Medium Italic / Light
KBFG Text (본문): Bold / Medium / Light — 본문/숫자/UI 전반의 표준

폰트는 examples/tokens.css 안에서 assets/fonts.css(KBFG 웹폰트 @font-face)를 자동 import하며, --font-sans / --font-display 토큰이 KBFG를 직접 가리킨다. 폴백은 시스템 폰트만 둔다.

@theme {
  --font-sans:    'KBFG Text', -apple-system, system-ui, sans-serif;
  --font-display: 'KBFG Display', 'KBFG Text', -apple-system, system-ui, sans-serif;
}

타입 스케일 (모바일 프리셋)

토큰	크기 / 줄간 / 굵기	용도
display-1	36 / 1.1 / 700	큰 잔액 ("12,442,910원")
display-2	28 / 1.2 / 700	페이지 헤딩 ("안녕하세요, 이수진님")
heading	18 / 1.4 / 700	섹션 타이틀
body	15 / 1.55 / 500	본문
body-strong	15 / 1.55 / 700	거래 금액·계좌명
caption	12 / 1.4 / 500	메타·시간·계좌번호
micro	11 / 1.4 / 600	배지·태그

숫자는 항상 tabular-nums. 금액은 font-bold + 천단위 콤마 + 원 접미사.

5. 스페이싱·라운딩·그림자

토큰	값	용도
`--radius-sm`	`8px`	칩, 작은 버튼
`--radius-md`	`12px`	입력, 중간 카드
`--radius-lg`	`16px`	표준 카드
`--radius-xl`	`20px`	메인 잔액 카드
`--radius-full`	`9999px`	필터 칩, 아바타
`--shadow-card`	`0 2px 10px rgba(25,31,40,0.04)`	표준 카드
`--shadow-pop`	`0 8px 24px rgba(25,31,40,0.08)`	모달, 토스트

레이아웃 거터: 모바일 24px, 웹 데스크톱 max-width 1200px + 24~32px 패딩. 세로 간격은 24px(섹션 간) / 16px(카드 내부) / 12px(리스트 행) 기준.

6. 컴포넌트 라이브러리 (`examples/`)

이 스킬은 다음 React + Tailwind v4 컴포넌트 예시를 포함한다.

기본 (홈/리스트)

파일	설명
`examples/tokens.css`	`@theme` 토큰 (앱에 그대로 import 가능)
`examples/Button.tsx`	Primary(KB옐로우) / Secondary / Ghost / Danger 변형
`examples/AccountCard.tsx`	계좌 잔액 카드 (송금/내역/ATM 액션 버튼 포함)
`examples/TransactionItem.tsx`	거래 1행 (입금·출금·자동이체)
`examples/QuickMenuGrid.tsx`	자주 쓰는 메뉴 4×N 그리드
`examples/HomePage.tsx`	모바일 프리셋 홈 페이지 풀 템플릿

송금·인증 (Transfer / Auth)

파일	설명
`examples/AmountInput.tsx`	금액 입력 + 천단위 콤마 + 빠른 추가 칩
`examples/NumericKeypad.tsx`	숫자/보안 키패드 (shuffle 옵션)
`examples/PINInput.tsx`	간편비밀번호 도트 표시
`examples/BottomSheet.tsx`	모바일 표준 바텀시트 (dim·body 잠금)
`examples/TransferConfirmSheet.tsx`	"정말 보낼까요?" 송금 확인
`examples/ReceiptCard.tsx`	송금 영수증 (캡처/공유용, 톱니 디테일)

카드·차트 (Card / Insights)

파일	설명
`examples/VirtualCard.tsx`	가상 카드 (번호 마스킹 토글)
`examples/SpendingBar.tsx`	멀티 세그먼트 소비 바 + 카테고리 범례
`examples/CategoryDonut.tsx`	SVG 도넛 차트 (의존성 없음)

상태·약관 (Feedback / Forms)

파일	설명
`examples/Feedback.tsx`	`EmptyState`, `Skeleton`, `AccountCardSkeleton`, `Toast` 묶음 export
`examples/TermsAccordion.tsx`	약관 동의 (필수/선택, 전체동의 토글)

각 파일은 최소 의존성으로 작성되어 있고, examples/tokens.css만 import하면 그대로 동작한다.

7. 동작 흐름 (스킬 사용 시)

요청이 들어오면 다음 순서로 동작한다.

1단계 — 컨텍스트 파악

요청에 "앱/모바일/스타뱅킹" → 모바일 프리셋
요청에 "웹/인터넷뱅킹/홈페이지" → 웹 프리셋
명시 없음 → 모바일 프리셋

2단계 — 토큰 주입

프로젝트의 메인 CSS 파일(예: src/index.css)에 examples/tokens.css의 내용을 머지한다. 이미 @theme 블록이 있으면 토큰 키를 추가만 하고, 충돌하는 키는 건드리지 않고 사용자에게 차이만 보고한다.

3단계 — 폰트 주입

KBFG 웹폰트는 examples/tokens.css에서 자동으로 import된다. 별도 작업 불필요. (KBFG 로드 실패 시에는 시스템 기본 sans 폰트로 자연 대체된다.)

4단계 — 컴포넌트 생성

요청한 페이지/컴포넌트에 따라 examples/의 파일들을 src/components/kb/ 또는 사용자가 지정한 경로로 복사한다. 이미 같은 이름의 컴포넌트가 있으면 덮어쓰지 않고 충돌을 보고한다.

5단계 — 사용 가이드 출력

어떤 토큰/컴포넌트가 추가됐는지 요약
라이선스 주의사항 (KB CI 사용 금지, 폰트 라이선스 확인)

8. 작성 규칙 (체크리스트)

KB 스타일로 UI를 작성할 때 항상 지킬 것:

강조 색은 KB옐로우 1개. 보조 액션은 회색.
옐로우 위 텍스트는 흰색 ❌ → 검정 또는 진한 그레이 ⭕
출금 거래는 빨강 ❌ → 본문 그레이 ⭕ (입금만 파란색·민트로 강조)
금액 표기: 12,442,910원 (콤마 + "원" 접미사 + tabular-nums)
본문은 KBFG Text, 절대 시스템 기본 sans 노출 금지
카드 라운딩 16~20px, 그림자는 매우 옅게 (rgba(25,31,40,0.04))
친근 존댓말: "안녕하세요, ○○님 / ~했어요 / ~하세요"
정보 단위는 카드로 그룹. 카드 간 충분한 세로 간격(24px)
모바일은 최대 너비 480px 가정, 웹은 1200px 가정

kb-bank-styles