Zigbang (직방)

흰 지도 위 주황 #FF6905 매물 수 원과 검정 라인+주황 포인트 집 아이콘

한국소비자라이프스타일따뜻한modern-minimal고딕comfortablesoftsubtle라이트한글 지원출시 2012개정 2022

Brand DNA

브랜드 DNA

브랜드명: Zigbang (직방, (주)직방)
한 줄 정체성: 원룸에서 시작해 빌라·오피스텔·아파트·상가·단기임대까지 지도 위에서 방을 찾는 국내 대표 부동산 앱. 웹 첫 화면 문구는 「부동산은 직방으로」.
공식 디자인 철학: 2022년 11월 서비스 출시(2012) 이후 처음으로 CI를 바꾸며 「Beyond Home」을 선언했다. 새 로고는 집 모양 아이콘에 '확장'을 뜻하는 타원형을 얹어 "프롭테크로 주거 경험을 무한히 확장하겠다"는 뜻을 담았고, 표기를 한글 '직방'에서 영문 소문자 'zigbang'으로 바꿨다. 시그니처 오렌지는 유지하되 "명도와 색조를 바꿔 더 깊어진 컬러감"으로 다듬었다. 공개된 디자인 시스템 사이트는 없고, 제품 코드에는 사내 UI 킷 「ZUIX2」가 쓰인다(zuix2-* 클래스, zuix2.zigbang.io 글꼴 서버).
시그니처 요소 1개: 무채색 지도 위에 떠 있는 주황 `#FF6905` 매물 수 원(클러스터) — 그리고 검정 1.5px 라인 집 아이콘에 창문만 주황으로 칠하는 아이콘 문법.

> 로고 색과 화면 색이 조금 다르다. 공식 로고 파일(logo_orange.svg)은 #FF681B, 앱·웹 화면의 강조색 토큰(ZUIX2 orange1)은 #FF6905다. 이 문서는 화면 토큰을 대표색으로 쓰고, 로고에는 로고 파일 색을 그대로 쓴다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 선명함, 실용적, 믿음직함
무드 설명: 흰 바탕과 #1A1A1A 먹색 글자, 회색 10단계(gray10~gray99)가 화면 대부분을 차지하고 주황은 "지금 선택된 것·눌러야 할 것·매물 수"에만 쓴다. 장식보다 정보(가격·층·면적·관리비)가 먼저 보이는 목록형 화면이라 차분하지만, 주황이 한 점만 있어도 브랜드가 바로 읽힌다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 매물 카드는 가격·구조·설명 세 줄을 촘촘히 담되 14px/21px 본문으로 숨 쉴 틈을 둔다.
모서리 성향: Soft (칩·버튼·입력 4px, 카드·바텀시트 8px, 매물 수 원·아바타만 원형)
평면성: Subtle — 목록은 1px #E6E6E6 구분선, 지도 위에 뜨는 카드·마커만 짧은 그림자

Color System

컬러 시스템 (CSS 변수)

www.zigbang.com 번들 안 ZUIX2 팔레트(모듈 I 객체)를 그대로 옮겼다. 공식 값: orange1 #FF6905·orange2 #FFF7F0·orange3 #FFE8D9, gray10~gray99, red1/2, blue1~5, navy1~4, green1~6, purple1/2. Primary 200~900 중 표기 없는 단계는 (추정) 보간이다.

:root {
  /* Primary - Zigbang Orange (ZUIX2 orange) */
  --color-primary-50: #FFF7F0;   /* orange2 — 선택 칩·아이콘 원 배경 (공식) */
  --color-primary-100: #FFE8D9;  /* orange3 — 선택 강조 면, 아이콘 속 채움 (공식) */
  --color-primary-200: #FFC8A3;  /* 옅은 테두리 (웹 CSS 실측 빈도 7회) */
  --color-primary-300: #FFA366;  /* (추정) 비활성 강조 */
  --color-primary-400: #FF8533;  /* (추정) hover 밝은 단계 */
  --color-primary-500: #FF6905;  /* orange1 — 기본 강조, 매물 수 원, 주요 버튼 (공식) */
  --color-primary-600: #E85D00;  /* (추정) pressed */
  --color-primary-700: #C24E00;  /* (추정) 강조 텍스트 on 흰 바탕 */
  --color-primary-800: #9E4510;  /* 번들 실측 색 — 짙은 주황 텍스트 (용도 추정) */
  --color-primary-900: #6B2E08;  /* (추정) */
  --color-logo: #FF681B;         /* 2022 CI 로고 파일 색 (공식) */

  /* Secondary - Navy (ZUIX2 navy) */
  --color-secondary-500: #092C59; /* navy1 — 분양·단지 정보 강조 (공식) */
  --color-secondary-50: #F5F7FA;  /* navy4 (공식) */

  /* Neutral - ZUIX2 gray (공식) */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FCFCFC;   /* gray99 */
  --color-neutral-100: #F2F2F2;  /* gray95 — 검색창·섹션 면 */
  --color-neutral-200: #E6E6E6;  /* gray90 — 구분선 */
  --color-neutral-300: #CCCCCC;  /* gray80 — 비활성 아이콘 */
  --color-neutral-500: #808080;  /* gray50 — 캡션 */
  --color-neutral-600: #666666;  /* gray40 */
  --color-neutral-700: #4D4D4D;  /* gray30 — 보조 본문 */
  --color-neutral-900: #1A1A1A;  /* gray10 — 본문·검정 아이콘 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F5ED;   /* green2 (공식) */
  --color-success-fg: #0BA04B;   /* green1 (공식) */
  --color-warning-bg: #FFF6E0;   /* (추정) */
  --color-warning-fg: #E0A134;   /* 번들 실측 색 (용도 추정) */
  --color-error-bg: #FFECEB;     /* red2 (공식) */
  --color-error-fg: #FA4E3E;     /* red1 — 오류·시세 상승 (공식) */
  --color-info-bg: #EBF5FF;      /* blue2 (공식) */
  --color-info-fg: #3798FA;      /* blue1 — 안내·시세 하락 (공식) */

  /* Surface */
  --bg-base: #FFFFFF;
  --bg-subtle: #F7F7F7;          /* gray97 */
  --bg-elevated: #FFFFFF;        /* 지도 위 카드 */
  --bg-overlay: rgba(26, 26, 26, 0.6); /* grayOpacity60 — 딤 (공식) */
  --bg-map: #F4F1EC;             /* (추정) 지도 타일 바탕 */

  /* Text */
  --text-primary: #1A1A1A;
  --text-secondary: #4D4D4D;
  --text-tertiary: #808080;
  --text-on-primary: #FFFFFF;
  --text-disabled: #B3B3B3;      /* gray70 */

  /* Border */
  --border-default: #E6E6E6;
  --border-subtle: #F2F2F2;
  --border-strong: #CCCCCC;
  --border-focus: #FF6905;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL OFL) — zuix2.zigbang.io/font/pretendard-subset.css 로 서브셋을 직접 싣는다. 예전 화면 일부는 Spoqa Han Sans(OFL)가 남아 있다.
- 영문: Pretendard (같은 가족, 숫자 가격 표기에 유리)
위계 (ZUIX2 Text 컴포넌트의 size/lineHeight 짝을 번들에서 실측: 10/12·11/16·12/16·13/18·14/20·14/21·16/24·18/28·20/30·22/32·24/36·26/40):
- Display — 26px / 700 / 40px / -0.02em
- H1 — 24px / 700 / 36px / -0.02em
- H2 — 20px / 700 / 30px / -0.01em
- H3 — 18px / 700 / 28px / -0.01em (매물 가격 「월세 1000/65」)
- Body Large — 16px / 500 / 24px / 0
- Body — 14px / 400 / 21px / 0
- Body Small — 13px / 400 / 18px / 0
- Caption — 11px / 500 / 16px / 0 (마커 라벨은 10px/12px)

Spacing

스페이싱

Base unit: 4px (번들 스타일 값이 4·8·12·16·20 배수로 모인다)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 20px; /* 모바일 좌우 여백 (추정) */ --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 웹 1200px 최대 폭(추정), 모바일 좌우 패딩 20px(추정)

Border Radius

번들 borderRadius 빈도: 4(49회) > 2(23) > 1 > 8·18(12) > 7·20(10).

--radius-none: 0;
--radius-sm: 2px;    /* 태그·체크박스 */
--radius-md: 4px;    /* 칩·버튼·입력·썸네일 — 기본값 */
--radius-lg: 8px;    /* 카드·지도 위 매물 카드 */
--radius-xl: 20px;   /* 바텀시트 상단 (추정) */
--radius-full: 9999px; /* 매물 수 원·아바타 전용 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 0 4px rgba(0, 0, 0, 0.17);        /* 웹 CSS 실측 — 입력·작은 팝업 */
--shadow-md: 0 2px 8px rgba(26, 26, 26, 0.16);   /* 지도 위 매물 카드·플로팅 버튼 (추정) */
--shadow-lg: 0 -4px 16px rgba(26, 26, 26, 0.12); /* 바텀시트 (추정) */
--shadow-xl: 1px 2px 10px rgba(0, 0, 0, 0.5);    /* 웹 CSS 실측 — 모달 */

Iconography

스타일: Outline + 부분 채움 — 검정(#1A1A1A) 외곽선 집에 창문·포인트만 주황(#FF6905) 선으로 그린다. 서비스 소개용 큰 아이콘은 #FFF7F0 원 배경 위 주황 라인.
Stroke 굵기: 1.4~1.5px (40px 아이콘 기준, 번들 실측)
모서리 처리: Round (창문 사각형 rx 1.56)
추천 라이브러리: Lucide (1.5px stroke로 맞추고 강조 부분만 주황)

Component Guide

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

Button

.zb-btn { height: 48px; padding: 0 20px; border-radius: var(--radius-md); font: 700 16px/24px Pretendard, sans-serif; border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-out); }
.zb-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.zb-btn--primary:hover { background: var(--color-primary-400); }
.zb-btn--primary:active { background: var(--color-primary-600); }
.zb-btn--primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }
.zb-btn--primary.is-loading { color: transparent; position: relative; } /* 흰 스피너 16px */
.zb-btn--secondary { background: #FFFFFF; color: var(--text-primary); border-color: var(--border-strong); }
.zb-btn--secondary:hover { background: var(--bg-subtle); }
.zb-btn--secondary:active { background: var(--color-neutral-100); }
.zb-btn--secondary:disabled { color: var(--text-disabled); border-color: var(--border-default); }
.zb-btn--ghost { background: transparent; color: var(--color-primary-500); }
.zb-btn--ghost:hover { background: var(--color-primary-50); }
.zb-btn--ghost:active { background: var(--color-primary-100); }
.zb-btn--danger { background: var(--color-error-fg); color: #FFFFFF; }
.zb-btn--danger:hover { background: #E8453A; } /* (추정) */

Input

.zb-input { height: 44px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: #FFFFFF; font: 400 14px/21px Pretendard, sans-serif; color: var(--text-primary); }
.zb-input::placeholder { color: var(--text-tertiary); }
.zb-input:focus { border-color: var(--border-focus); outline: none; }
.zb-input.is-error { border-color: var(--color-error-fg); }
.zb-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
.zb-search { height: 40px; background: var(--color-neutral-100); border: 0; border-radius: var(--radius-md); } /* 지도 상단 검색 */

Card

.zb-item { display: flex; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-default); background: #FFFFFF; } /* 매물 목록형 기본 */
.zb-item__thumb { width: 104px; height: 104px; border-radius: var(--radius-md); background: var(--color-neutral-100); }
.zb-item__price { font: 700 18px/28px Pretendard, sans-serif; color: var(--text-primary); }
.zb-card--float { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* 강조형 — 지도 위 */
.zb-card--outlined { border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: none; }

Badge / Tag

.zb-tag { height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font: 500 11px/16px Pretendard, sans-serif; }
.zb-tag--solid { background: var(--color-primary-500); color: #FFFFFF; }
.zb-tag--subtle { background: var(--color-primary-50); color: var(--color-primary-500); }  /* 「확인매물」 등 */
.zb-tag--outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }
.zb-chip { height: 32px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-secondary); }
.zb-chip.is-selected { border-color: var(--color-primary-500); background: var(--color-primary-50); color: var(--color-primary-500); font-weight: 700; }

Navigation

.zb-tabbar { height: 56px; display: flex; border-top: 1px solid var(--border-default); background: #FFFFFF; } /* 앱 하단 탭: 홈·찜·분양·MY (추정) */
.zb-tabbar__item { flex: 1; font: 500 10px/12px Pretendard, sans-serif; color: var(--text-tertiary); }
.zb-tabbar__item.is-active { color: var(--text-primary); } /* 아이콘은 검정 채움 */
.zb-cluster { min-width: 32px; height: 32px; border-radius: 9999px; background: var(--color-primary-500); border: 2px solid #FFFFFF; color: #FFFFFF; font: 700 12px/1 Pretendard; box-shadow: 0 2px 4px rgba(26,26,26,.25); } /* 지도 매물 수 마커 */
.zb-cluster.is-visited { background: var(--color-neutral-900); } /* (추정) */

Motion

--duration-fast: 150ms;   /* (추정) 칩 선택 */
--duration-base: 250ms;   /* (추정) 바텀시트·탭 */
--duration-slow: 400ms;   /* (추정) 지도 이동 후 마커 등장 */
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. 주황을 넓은 배경 면에 깔지 않는다 — 주황은 매물 수·선택·주요 버튼에만, 면은 #FFF7F0 한 단계까지. 2. 가격 숫자를 주황으로 칠하지 않는다 — 가격은 #1A1A1A 굵은 글씨, 주황은 행동 신호로 아껴 둔다. 3. 시세 상승·하락을 주황으로 표시하지 않는다 — 상승은 red1 #FA4E3E, 하락은 blue1 #3798FA. 4. 아이콘을 전부 주황으로 채우지 않는다 — 검정 외곽선이 기본, 주황은 창문·포인트 한 곳. 5. 옛 한글 '직방' 로고나 주황 사각 앱 아이콘 로고를 새 화면에 쓰지 않는다 — 2022년 CI 이후 표기는 영문 소문자 'zigbang'.

Zigbang (직방)

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

출처