Hana Bank (하나은행)

두 팔 벌린 ㅎ 심볼의 하나 그린과 붉은 점, 옅은 청록 면 위에 잔액을 크게 띄운 하나원큐 홈

한국핀테크소비자차가운modern-minimalhumanism고딕comfortableroundsubtle라이트한글 지원출시 1991개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Hana Bank (하나은행, 하나금융그룹 계열). 모바일 뱅킹 앱은 「하나원큐」(2025년 새 앱으로 교체 출시, 구 앱은 순차 종료)
한 줄 정체성: 외환·자산관리에 강한 시중은행이 「금융은 더 쉽고, 혜택은 더 즐겁게」를 내건 모바일 우선 은행
공식 디자인 철학: 하나금융그룹 CI 는 "함께 성장하며 행복을 나누는 금융, 하나로 연결된 모두의 금융"을 모티브로 한다. 심볼마크는 'ㅎ'의 형태를 토대로 고객을 환영하는 자세를 역동적으로 표현하고 "세계로 뻗어가는 하나인의 진취적인 기상"을 형상화했다(hanafn.com CI 소개). 로고타입은 스톤(Stone)체를 심볼에 맞게 재구성한 장체로, "금융기관으로서의 보수성과 정통성"과 젊은 인상을 함께 노린다. 1991년 은행명 확정 → 1998 CI 리뉴얼(디자인파크) → 2003·2015 CI 수정(2015 Frum Insight·Brand&Company). 2020년 'KEB' 를 떼고 「하나은행」으로 복귀했고, 현행 CI 는 워드마크까지 녹색으로 통일했다(구 CI 는 검정 글자).
시그니처 요소 1개: 두 팔을 벌린 'ㅎ' 심볼 — 녹색 몸(가로 스우시 + 휘어 내려가는 획)과 머리 자리의 붉은 점. 화면에서는 이 녹색이 청록(#008485) 한 가지로 좁혀져 버튼·강조 글자에만 쓰이고, 붉은 점은 로고 밖에서 거의 쓰지 않는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 신뢰감, 환대, 산뜻함
무드 설명: 회색이 살짝 도는 흰 배경(#F1F2F4) 위에 흰 카드를 둥글게 얹고, 하나 그린은 "보내기" 같은 핵심 행동과 헤드라인 강조에만 쓴다. 하나원큐 홈은 계좌 카드 뒤에 옅은 파스텔 면(사용자가 테마를 고를 수 있음)을 깔고 잔액을 20pt 이상 굵게 띄워 "은행이지만 가볍다"는 인상을 만든다. 3D 캐릭터·이모지 일러스트(놀이터·축구 Play)로 친근함을 더한다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 (3D 오브젝트 일러스트, 말 거는 문장형 카피 "~해 보세요")
밀도(Density): Comfortable — 모바일 카드 안 여백 20px 안팎, 목록은 한 줄 44~52px. 웹뱅킹(kebhana.com)은 14px 본문의 표가 많아 더 촘촘하다.
모서리 성향: Round (앱 카드 16px 안팎, 주요 버튼은 높이 절반의 캡슐형, 웹은 6~8px)
평면성: Subtle — 테두리 없이 흰 카드와 회색 바탕의 명도 차로 구획하고, 떠 있는 요소만 아주 옅은 그림자(2px 2px 20px rgba(0,0,0,.04))

Color System

컬러 시스템 (CSS 변수)

kebhana.com CSS 7종(renewal-style.css·hana-main.css·layout-new.css 등)의 hex 빈도 집계 + 하나원큐 App Store 스크린샷 픽셀 실측. 웹 1위 브랜드색은 #008485(87회), 그다음 #27B2A5(61회)·#009591(53회)·#222A3B(50회, 제목 남색). 하나원큐 앱의 CTA 는 조금 밝은 #00A38E, 앱 강조 글자는 #12927E 로 측정됐다. 로고 벡터(hanafn.com logo.svg)의 CI 녹색은 #009178, 붉은 점은 #DC231E. 9단계 중 표시 없는 값은 (추정) 보간.

:root {
  /* Primary - Hana Green (웹 실측 #008485 기준) */
  --color-primary-50:  #E6F5F3;  /* (추정) 선택 행·아이콘 타일 바탕 */
  --color-primary-100: #DDF3EE;  /* 앱 홈 계좌 카드 뒤 옅은 면 (추정) */
  --color-primary-200: #A9DDD6;  /* (추정) 보간 */
  --color-primary-300: #27B2A5;  /* 웹 실측 — 보조 강조·그래프 */
  --color-primary-400: #00A38E;  /* 앱 실측 — 하나원큐 CTA 버튼 */
  --color-primary-500: #008485;  /* 웹 실측 1위 — 기본 브랜드색·링크·탭 */
  --color-primary-600: #00706F;  /* (추정) hover/pressed */
  --color-primary-700: #005A5A;  /* (추정) */
  --color-primary-800: #0B3F3D;  /* (추정) */
  --color-primary-900: #062925;  /* 웹 실측 — 딥 그린 배경 섹션 */

  /* Secondary - CI 색 (로고 전용) */
  --color-secondary-500: #009178;  /* 로고 녹색 (hanafn.com logo.svg) */
  --color-accent-500:    #DC231E;  /* 로고 붉은 점 — 로고 밖 사용 금지 */
  --color-point-500:     #ED1651;  /* 웹 실측 — 이벤트·NEW 표시 핑크레드 */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F6F7F9;  /* 앱 실측 — 카드 안 구획 면 */
  --color-neutral-100:  #F1F2F4;  /* 앱 실측 — 페이지 바탕 */
  --color-neutral-200:  #E5E7EB;  /* (추정) 구분선 */
  --color-neutral-300:  #DDDDDD;  /* 웹 실측 — 표 테두리 */
  --color-neutral-500:  #8A9099;  /* (추정) 비활성 아이콘·플레이스홀더 */
  --color-neutral-700:  #6E7277;  /* 웹 실측 — 보조 글자 */
  --color-neutral-900:  #222A3B;  /* 웹 실측 — 제목·잔액 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F5F3;  /* 성공은 브랜드 그린 계열로 (추정) */
  --color-success-fg: #008485;
  --color-warning-bg: #FDF1E6;  /* (추정) */
  --color-warning-fg: #E77513;  /* 웹 실측 오렌지 */
  --color-error-bg:   #FDECEF;  /* (추정) */
  --color-error-fg:   #E71064;  /* 웹 실측 색(용도는 추정) — 오류·수익률 상승 */
  --color-info-bg:    #EAF1FB;  /* (추정) */
  --color-info-fg:    #3B6FD8;  /* (추정) — 수익률 하락은 파랑 */

  /* Surface (배경 위계) */
  --bg-base:     #F1F2F4;             /* 앱 페이지 바탕 */
  --bg-subtle:   #F6F7F9;             /* 카드 안 요약 칸 */
  --bg-elevated: #FFFFFF;             /* 카드·시트 */
  --bg-overlay:  rgba(17, 22, 32, 0.5); /* 바텀시트 딤 (추정) */

  /* Text 위계 */
  --text-primary:    #222A3B;  /* 본문·잔액 */
  --text-secondary:  #4A5160;  /* (추정) 보조 */
  --text-tertiary:   #6E7277;  /* 계좌번호·캡션 */
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B7BCC4;  /* (추정) */

  /* Border */
  --border-default: #E5E7EB;  /* (추정) */
  --border-subtle:  #EEEEEE;  /* 웹 실측 */
  --border-strong:  #C1C1C1;  /* 웹 실측 */
  --border-focus:   #008485;
}

Typography

타이포그래피

폰트 페어링:
- 한글: 하나체 2.0(Hana2.0, 하나금융그룹 전용서체 — 개인·기업 상업 사용 무료, 수정·재판매·CI 제작 불가). L·R·M·B·H 5굵기 + CM(장체). 2009년 은행권 최초 전용서체, 2023년 2.0 개발
- 영문: 하나체 2.0 라틴 (웹뱅킹 kebhana.com 은 실측상 Noto Sans KR 웹폰트 NotoSans_Regular/Medium/Bold 를 쓴다). 폴백 Pretendard → Noto Sans KR
위계 (앱 스크린샷·웹 CSS 기반, 행간·자간 (추정)):
- Display: 32px / 800 / 40px / -0.8px — 스토어·프로모션 헤드라인("하나원큐 놀이터")
- H1: 26px / 700 / 34px / -0.6px — 홈 잔액
- H2: 20px / 700 / 28px / -0.5px — 화면 제목
- H3: 17px / 700 / 24px / -0.4px — 카드 제목
- Body Large: 16px / 400 / 24px / -0.3px
- Body: 14px / 400 / 21px / -0.3px — 웹 CSS 최빈 크기(159회)
- Body Small: 13px / 400 / 19px / -0.2px — 계좌번호·보조 설명
- Caption: 12px / 400 / 16px / 0 — 기준일·유의 문구

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; /* 앱 좌우 화면 여백 20~24px (추정) */ --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 앱은 화면 폭 전체 + 좌우 20px(카드 사이 12px). 웹뱅킹 kebhana.com 은 본문 1200px 고정폭 (추정)

Border Radius

--radius-none: 0;
--radius-sm: 6px;      /* 웹 버튼·입력 (웹 실측 최빈 6·8px) */
--radius-md: 10px;     /* 앱 입력·작은 카드 (추정) */
--radius-lg: 16px;     /* 앱 계좌 카드·콘텐츠 카드 */
--radius-xl: 20px;     /* 바텀시트 윗모서리 (웹 실측 20px 도 다수) */
--radius-full: 9999px; /* 가져오기·보내기 캡슐 버튼, 칩, 페이저 */

Shadow / Elevation

--shadow-none: none;                                  /* 기본 카드 — 명도 차로만 구획 */
--shadow-sm: 0 1px 3px rgba(34, 42, 59, 0.08);         /* 계좌 카드 위 흰 버튼 (추정) */
--shadow-md: 2px 2px 20px 0 rgba(0, 0, 0, 0.04);       /* 웹 실측 — 떠 있는 카드 */
--shadow-lg: 2px 2px 20px 0 rgba(0, 0, 0, 0.10);       /* 웹 실측 — 드롭다운·레이어 */
--shadow-xl: 3px 4px 20px 0 rgba(0, 0, 0, 0.20);       /* 웹 실측 — 모달·팝업 */

Iconography

스타일: 혼합 — 내비·기능 아이콘은 Outline, 홈 바로가기·이벤트는 컬러 Filled/3D 오브젝트 일러스트
Stroke 굵기: 1.8~2px (24px 그리드 기준, 추정)
모서리 처리: Round
추천 라이브러리: 공식 공개 아이콘 없음. 대체로 Lucide(2px, round) + 3D 일러스트는 별도 제작

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button (Primary / Secondary / Ghost / Danger)

.hb-btn { height: 48px; padding: 0 20px; border: 0; border-radius: 12px; font: 700 16px/22px 'Hana2.0', 'Pretendard', 'Noto Sans KR', sans-serif; letter-spacing: -0.3px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.hb-btn--primary { background: var(--color-primary-400); color: var(--text-on-primary); }   /* 앱 CTA #00A38E */
.hb-btn--primary:hover { background: var(--color-primary-500); }
.hb-btn--primary:active { background: var(--color-primary-600); }
.hb-btn--secondary { background: var(--color-primary-50); color: var(--color-primary-500); }
.hb-btn--secondary:hover { background: var(--color-primary-100); }
.hb-btn--ghost { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.hb-btn--ghost:hover { background: var(--bg-subtle); }
.hb-btn--danger { background: var(--color-error-fg); color: #fff; }
.hb-btn:disabled { background: var(--color-neutral-200); color: var(--text-disabled); cursor: not-allowed; }
.hb-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.hb-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: hb-spin .8s linear infinite; }
@keyframes hb-spin { to { transform: rotate(360deg); } }
.hb-pill { height: 36px; border-radius: var(--radius-full); padding: 0 18px; font-size: 14px; }  /* 홈 가져오기·보내기 */

Input

.hb-input { height: 52px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); font: 400 16px/22px 'Hana2.0', 'Noto Sans KR', sans-serif; }
.hb-input:focus { outline: none; border-color: var(--border-focus); }
.hb-input.is-error { border-color: var(--color-error-fg); }
.hb-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
.hb-amount { border: 0; border-bottom: 2px solid var(--border-default); border-radius: 0; font-size: 28px; font-weight: 700; }  /* 이체 금액 입력 (추정) */
.hb-amount:focus { border-bottom-color: var(--color-primary-500); }

Card

.hb-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 20px; }
.hb-card--account { background: var(--color-primary-100); }        /* 홈 계좌 카드 — 사용자 테마 면 */
.hb-card--accent { background: var(--color-primary-900); color: #fff; }  /* 딥 그린 프로모션 */
.hb-card--outlined { box-shadow: inset 0 0 0 1px var(--border-default); }
.hb-summary { background: var(--bg-subtle); border-radius: 12px; padding: 12px 14px; }

Badge / Tag

.hb-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-full); font: 700 11px/16px 'Hana2.0', 'Noto Sans KR', sans-serif; }
.hb-badge--solid { background: var(--color-primary-500); color: #fff; }
.hb-badge--subtle { background: var(--color-primary-50); color: var(--color-primary-500); }   /* "정상" 상태 칩 */
.hb-badge--outline { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-tertiary); border-radius: 4px; }  /* "원금손실가능상품" */
.hb-new { background: var(--color-point-500); color: #fff; }

Navigation (하나원큐 하단 탭바)

.hb-tabbar { height: 64px; background: var(--bg-elevated); display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -1px 0 var(--border-subtle); }
.hb-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--color-neutral-500); }
.hb-tabbar__item.is-active { color: var(--text-primary); font-weight: 700; }
.hb-topbar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.hb-seg { display: inline-flex; background: #fff; border-radius: var(--radius-full); padding: 2px; }       /* 홈 ↔ 간편 전환 */
.hb-seg span.is-on { background: var(--text-primary); color: #fff; border-radius: var(--radius-full); }

Motion

--duration-fast: 150ms;   /* 버튼 눌림·토글 (추정) */
--duration-base: 250ms;   /* 계좌 카드 좌우 넘김·탭 전환 (추정) */
--duration-slow: 400ms;   /* 바텀시트 등장 (추정) */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

Anti-patterns

1. 로고의 붉은 점 색(#DC231E)을 버튼·강조색으로 끌어 쓰지 않는다 — 붉은 점은 심볼의 머리일 뿐, 화면의 강조는 하나 그린 하나다. 2. 청록을 넓은 면에 진하게 깔지 않는다 — 넓은 면은 옅은 민트 틴트나 딥 그린(#062925)으로, 진한 청록은 버튼·강조 글자에만. 3. 카드마다 진한 테두리를 두르지 않는다 — 회색 바탕과 흰 카드의 명도 차로 구획한다. 4. 잔액·금액을 가늘게 쓰지 않는다 — 금액은 항상 굵게, "원"은 한 단계 작게 붙인다. 5. 구 CI(검정 워드마크·'KEB하나은행')를 쓰지 않는다 — 현행은 녹색 워드마크의 「하나은행」이다.

Hana Bank (하나은행)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처