ZIGZAG (지그재그)

검정 대문자 ZIGZAG 워드마크 옆에 하나만 켜지는 톤다운 핑크 #F55DD6 — 흑백 상품 그리드 위 찜·바로가기·스위치에만

한국이커머스라이프스타일따뜻한modern-minimal고딕compactsoftflat라이트다크한글 지원출시 2022개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: ZIGZAG (지그재그, 운영사 카카오스타일 — 옛 크로키닷컴)
한 줄 정체성: 동대문 기반 소호 쇼핑몰부터 브랜드·뷰티까지 한 앱에 모아 1020~30 여성이 "나만의 스타일을 발견하는" 스타일 커머스 플랫폼
공식 디자인 철학: 2022년 BI 리뉴얼(8월 22일 발표, 2015년 론칭 후 7년 만)에서 지그재그를 "영감을 주는 큐레이터"로 정의하고 네 목표 — 기억에 남고(Memorable), 쉽고 편하며(Effortless), 영감을 주고(Inspiring), 트렌드 변화를 반영하는(Contextual) — 를 세웠다. 모티프는 패션 잡지. 리서치에서 "가장 바꾸지 말아야 할 요소"로 핑크가 꼽혀, 경쟁 앱이 대부분 흑백인 가운데 핑크를 전략적으로 유지하되 기존 핫핑크보다 톤을 낮추고 약간 차갑게 조정했다. 로고는 "예전보다 뾰족한 Z, 더 단순하고 직관적인 모양"의 볼드 대문자 워드마크로 바뀌었다. 사내 디자인 시스템 이름은 ZDS(웹 CSS 변수 접두사 --zds-, 현행 4세대 zds4_ 클래스)이며 외부 문서 사이트는 공개하지 않는다.
시그니처 요소 1개: 흑백(#121212) 대문자 ZIGZAG 워드마크 + 핑크 앱 아이콘 위 검정 Z — 화면 대부분은 흰 바탕·검정 글자·상품 사진이고, 톤다운 핑크 #F55DD6 은 찜 하트·바로가기 버튼·스위치·선택 상태처럼 "지금 반응한 곳"에만 켜진다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 발랄함, 트렌디함, 볼드함
무드 설명: 잡지처럼 사진이 주인공이다. 헤더·탭·가격은 굵은 검정 산세리프(Pretendard JP)로 단단하게 잡고, 핑크는 아주 좁은 면적의 강조로만 써서 "귀엽지만 유치하지 않은" 톤을 만든다. 할인율은 코랄 레드, 직진배송은 보라 칩, 첫구매가·무료배송은 회색 칩으로 역할을 나눠 정보가 많은 상품 카드를 한눈에 읽히게 한다.
비주얼 스타일: 모던 미니멀 (사진 중심 매거진 그리드 + 굵은 타이포)
밀도(Density): Compact — 2~3열 상품 그리드에 스토어명·상품명·할인율·가격·배지·별점까지 한 카드에 넣고 10~13px 캡션 위계를 촘촘히 쓴다.
모서리 성향: Soft (배지·칩 4px, 버튼·배너 8~12px, 카드 사진 4~6px. 필터 칩·카카오 로그인 버튼만 Pill)
평면성: Flat — 카드는 테두리·그림자 없이 사진과 여백으로 구분하고, 그림자는 바텀시트·토스트에만

Color System

컬러 시스템 (CSS 변수)

zigzag.kr 웹 CSS(2026-09-20 수집)의 ZDS 토큰 실측. --zds-color-semantic-brand-zigzag-primary: var(--zds-color-palette-pink-400) = #F55DD6 이 현행 브랜드 핑크다. 같은 CSS에 구세대 변수 --zds-color-semantic-brand-zigzag: #fa6ee3(앱 번들의 Zigzag_Pink/Brand_400 도 #FA6EE3)가 남아 있는데, 새 컴포넌트(zds4_* 스위치·체크박스·탭 선택)는 전부 pink-400 을 참조한다. 아래 9단계는 ZDS pink 팔레트를 meta 스키마 순서에 맞게 옮긴 것(ZDS 번호 병기).

:root {
  /* Primary - Zigzag Pink (ZDS palette pink) */
  --color-primary-50:  #FEEEFA;  /* pink-50 — 선택 칩 배경 */
  --color-primary-100: #FDDEF6;  /* pink-100 */
  --color-primary-200: #FCCEF2;  /* pink-150 — brand-zigzag-border(라이트) */
  --color-primary-300: #FAAEEA;  /* pink-200 */
  --color-primary-400: #F88DE2;  /* pink-300 */
  --color-primary-500: #F55DD6;  /* pink-400 — brand-zigzag-primary: 찜·바로가기·스위치 ON */
  --color-primary-600: #E356C6;  /* pink-450 — button-pink-hovered */
  --color-primary-700: #D14FB7;  /* pink-550 — button-pink-pressed */
  --color-primary-800: #8F357C;  /* pink-700 */
  --color-primary-900: #4F1D45;  /* pink-900 */

  /* Secondary - 역할 색 (ZDS semantic) */
  --color-secondary-500: #6E52FF;  /* purple-400 — service-z-delivery(직진배송) 칩 */
  --color-accent-500:    #FB4333;  /* coral-red-400 — accent-primary: 상품 카드 할인율 */
  --color-ai-500:        #644BE8;  /* purple-500 — brand-ai-primary */
  --color-kakao:         #FEE500;  /* brand-kakao — 카카오 로그인 버튼 */

  /* Neutral - ZDS gray (살짝 푸른 회색) */
  --color-neutral-0:    #FFFFFF;  /* common-white — surface */
  --color-neutral-50:   #F9FAFA;  /* gray-10 — on-surface */
  --color-neutral-100:  #F5F6F6;  /* gray-20 — background-base, fill-tertiary */
  --color-neutral-200:  #ECEDEE;  /* gray-30 — border-primary, fill-secondary */
  --color-neutral-300:  #E2E5E6;  /* gray-50 — fill-primary */
  --color-neutral-500:  #878F91;  /* gray-400 — text-tertiary */
  --color-neutral-700:  #606567;  /* gray-550 — text-secondary */
  --color-neutral-900:  #121212;  /* gray-970 — text-strong, 로고(#121314) */
  --color-neutral-1000: #000000;

  /* Semantic (state-positive / negative + sub 팔레트, 배경은 12% 합성값) */
  --color-success-bg: #E0F7E2;  /* green-400 12% */
  --color-success-fg: #00BF10;  /* state-positive-primary */
  --color-warning-bg: #FFEDE7;  /* orange-400 12% (ZDS 에 warning 시맨틱 없음 — sub-orange 대용) */
  --color-warning-fg: #FF6734;  /* sub-orange-primary */
  --color-error-bg:   #FFE4E4;  /* red-400 12% */
  --color-error-fg:   #E52D2D;  /* state-negative-primary */
  --color-info-bg:    #E4EDFF;  /* blue-400 12% */
  --color-info-fg:    #216BFF;  /* sub-blue-primary (service-store-zigzin 도 같은 blue-400) */

  /* Surface (배경 위계) */
  --bg-base:     #F5F6F6;             /* background-base — 섹션 사이 회색 띠 */
  --bg-subtle:   #F9FAFA;             /* background-on-surface */
  --bg-elevated: #FFFFFF;             /* background-surface / elevated — 화면·카드·시트 */
  --bg-overlay:  rgba(0, 0, 0, 0.50); /* background-dimmed — 바텀시트 딤 */

  /* Text 위계 */
  --text-primary:    #292B2B;  /* text-primary (gray-800) — 본문·가격 */
  --text-secondary:  #606567;  /* text-secondary (gray-550) */
  --text-tertiary:   #878F91;  /* text-tertiary (gray-400) — 별점·캡션 */
  --text-on-primary: #FFFFFF;  /* static-white */
  --text-disabled:   #B3BABD;  /* text-disabled (gray-200) */
  --text-strong:     #121212;  /* text-strong (gray-970) — 헤더·탭 선택 */

  /* Border */
  --border-default: #ECEDEE;  /* border-primary (gray-30) */
  --border-subtle:  rgba(0, 0, 0, 0.05);  /* divider-thin */
  --border-strong:  #C6CBCD;  /* border-active (gray-100) */
  --border-focus:   #121212;  /* 입력 포커스 = 검정 테두리 (추정) */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard JP → Pretendard (SIL OFL) — --zds-typography-font-family-sans 첫 두 항목
- 영문: 같은 Pretendard 가 영문까지 처리. 폴백은 -apple-system, Roboto, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic
- 로고: 전용 커스텀 워드마크(글꼴 아님, SVG LogoBiBasic)
굵기: 400 regular · 500 medium · 600 semibold · 700 bold (ZDS weight 토큰 4종)
위계 (ZDS 텍스트 스타일 이름 Head_22_Bold·Body_15_Medium·Caption_12_Regular 형식 실측. 행간은 line-height 토큰 중 짝지어진 값 (추정)):
- Display: 28px / 700 / 38px / -0.3px (font-size-28 — 기획전 제목)
- H1: 24px / 700 / 32px / -0.3px
- H2: 22px / 700 / 30px / -0.2px (Head_22_Bold)
- H3: 20px / 700 / 28px / -0.2px (Head_20_Bold — 섹션 「첫 구매 한정 특가」)
- Body Large: 17px / 700 / 24px / -0.2px (Body_17_Bold) · 16px / 600 (Body_16_SemiBold)
- Body: 15px / 500 / 22px / -0.1px (Body_15_Medium · Regular · SemiBold)
- Body Small: 13px / 400 / 18px / 0 (Body_13_Regular — 상품명)
- Caption: 12px / 400 / 16px / 0 (Caption_12_*) · 11px·10px 은 배지·별점

Spacing

스페이싱

Base unit: 4px (카드 내부는 2px 단위 보정)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 모바일 우선. 웹(zigzag.kr)도 본문 max-width: 600px 가운데 정렬(실측) — 앱 화면을 그대로 옮긴 폭. 좌우 여백 16px, 상품 그리드 간격 가로 8px·세로 24px (추정)

Border Radius

ZDS --zds-corner-radius-* 실측: 0 · 2 · 4 · 6 · 8 · 12 · 16 · 20 · full.

--radius-none: 0;
--radius-sm: 4px;      /* 직진배송·무료배송 배지, 상품 사진 */
--radius-md: 8px;      /* 버튼·입력·키워드 배너 */
--radius-lg: 12px;     /* 쿠폰 카드·메인 배너 */
--radius-xl: 16px;     /* 바텀시트 상단 */
--radius-full: 9999px; /* 필터 칩·카카오 로그인 버튼·스위치 */

Shadow / Elevation

ZDS --zds-shadow-* 실측 4종. 상품 카드·리스트에는 쓰지 않는다.

--shadow-none: none;                              /* 상품 카드·탭·배너 — 기본 */
--shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.1);      /* shadow-small — 플로팅 버튼·툴팁 */
--shadow-md: 0px 4px 16px rgba(0, 0, 0, 0.1);     /* shadow-medium — 드롭다운·토스트 */
--shadow-lg: 0px 8px 32px rgba(0, 0, 0, 0.1);     /* shadow-large — 바텀시트·모달 */
--shadow-xl: 0px 0px 16px rgba(0, 0, 0, 0.3);     /* shadow-selected — 사진 위 선택 강조 */

Iconography

스타일: 혼합 — 기본은 Bold(두꺼운 외곽선 2px), 선택된 탭은 Solid(면). 홈 탭 아이콘 IconHomeSolid 자체가 둥근 사각형 안의 Z다
Stroke 굵기: 32px 그리드 기준 2px (IconSearchBold, IconShoppingbagBold, IconHeartBold 등 실측)
모서리 처리: Round (끝은 각지고 모서리만 둥근 편)
추천 라이브러리: 공식 ZDS 아이콘(data-zds-icon, 32×32). 대체로는 Phosphor Bold 또는 Tabler(2px)

Component Guide

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

Button (Primary / Secondary / Ghost / Danger)

.zz-btn { height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius-md); font: 700 15px/22px Pretendard, sans-serif; letter-spacing: -0.1px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.zz-btn--primary { background: var(--text-strong); color: var(--text-on-primary); }          /* 구매하기·상품보기 = 검정 */
.zz-btn--primary:active { background: #292B2B; }
.zz-btn--pink { background: var(--color-primary-500); color: var(--text-on-primary); }       /* 바로가기·쿠폰받기 */
.zz-btn--pink:hover { background: var(--color-primary-600); }
.zz-btn--pink:active { background: var(--color-primary-700); }
.zz-btn--secondary { background: var(--bg-elevated); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.zz-btn--ghost { background: transparent; color: var(--text-secondary); }
.zz-btn--ghost:hover { background: var(--bg-base); }
.zz-btn--danger { background: var(--color-error-fg); color: var(--text-on-primary); }
.zz-btn:disabled { background: rgba(0,0,0,0.03); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }
.zz-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.zz-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: zz-spin 0.8s linear infinite; }
@keyframes zz-spin { to { transform: rotate(360deg); } }
.zz-btn--kakao { background: var(--color-kakao); color: var(--text-primary); border-radius: 24px; }  /* 카카오로 3초 만에 시작하기 */

Input

.zz-input { height: 48px; padding: 0 14px; border: 0; border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); font: 400 15px/22px Pretendard, sans-serif; }
.zz-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--border-focus); }
.zz-input.is-error { box-shadow: inset 0 0 0 1px var(--color-error-fg); }   /* ZDS 실측: inset 1px state-negative */
.zz-input:disabled { box-shadow: inset 0 0 0 1px var(--border-default); background: var(--bg-base); color: var(--text-disabled); }
.zz-search { height: 40px; border-radius: var(--radius-md); background: var(--bg-base); padding: 0 12px; }

Card (상품 카드)

.zz-product { display: flex; flex-direction: column; gap: 2px; }
.zz-product__thumb { position: relative; aspect-ratio: 5 / 6; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-base); }
.zz-product__store { font: 600 12px/16px Pretendard, sans-serif; color: var(--text-primary); margin-top: 6px; }
.zz-product__name { font: 400 13px/18px Pretendard, sans-serif; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zz-product__price { font: 700 16px/22px Pretendard, sans-serif; color: var(--text-primary); }
.zz-product__price b { color: var(--color-accent-500); margin-right: 4px; }  /* 할인율 = accent-primary(coral-red) */
.zz-product--feature { background: var(--color-primary-50); border-radius: var(--radius-lg); padding: 12px; }   /* 강조형: 기획전 묶음 */
.zz-product--outlined .zz-product__thumb { box-shadow: inset 0 0 0 1px var(--border-default); }

Badge / Tag

.zz-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 4px; border-radius: var(--radius-sm); font: 600 10px/14px Pretendard, sans-serif; }
.zz-badge--solid { background: var(--color-secondary-500); color: #fff; }             /* 직진배송 (사진 위) */
.zz-badge--subtle { background: var(--bg-base); color: var(--text-secondary); }       /* 무료배송 */
.zz-badge--pink { background: var(--color-primary-50); color: var(--color-primary-500); }  /* 첫구매가 */
.zz-badge--outline { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-secondary); }
.zz-chip { height: 32px; padding: 0 12px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--border-default); font: 500 13px/18px Pretendard, sans-serif; }
.zz-chip.is-selected { background: var(--text-strong); color: #fff; box-shadow: none; }  /* 필터 칩 선택 = 검정 채움 */

Navigation (홈 상단 탭 + 하단 탭바)

.zz-tabs { display: flex; gap: 16px; padding: 8px 16px; overflow-x: auto; font: 700 17px/24px Pretendard, sans-serif; }
.zz-tabs a { color: var(--text-disabled); position: relative; }
.zz-tabs a.is-active { color: var(--text-strong); }
.zz-tabs a.is-active::before { content: ""; position: absolute; left: 50%; top: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }  /* 선택 탭 위 점 */
.zz-tabs a.is-event { color: var(--color-secondary-500); }  /* 1만원특가 같은 이벤트 탭 */
.zz-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); height: 56px; background: var(--bg-elevated); box-shadow: 0 -1px 0 var(--border-subtle); }
.zz-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 500 10px/12px Pretendard, sans-serif; color: var(--text-disabled); }
.zz-tabbar a.is-active { color: var(--text-strong); }

Motion

공개 토큰 없음 — 앱 관찰 기반 (추정).

--duration-fast: 150ms;   /* 찜 하트 채움·버튼 눌림 */
--duration-base: 250ms;   /* 탭 전환·칩 선택 */
--duration-slow: 350ms;   /* 바텀시트 올라옴 */
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. 핑크를 넓은 면(헤더 배경·전체 버튼 줄)에 깔지 않는다 — 2022 리뉴얼이 핫핑크의 피로도를 줄이려 톤을 낮춘 이유다. 핑크는 찜·바로가기·스위치처럼 좁은 강조에만. 2. 할인율을 브랜드 핑크로 칠하지 않는다 — 할인율은 accent-primary(coral-red #FB4333), 직진배송은 보라, 핑크는 브랜드 반응색으로 역할이 나뉜다. 3. 상품 카드에 테두리·그림자를 두르지 않는다 — 사진과 여백만으로 구분하는 잡지형 그리드다. 4. 로고를 소문자·필기체로 바꾸거나 핑크로 칠하지 않는다 — 현행 워드마크는 검정(다크에선 흰색) 볼드 대문자, 핑크는 앱 아이콘 바탕 쪽이다. 5. 순수 회색(#888 등)을 쓰지 않는다 — ZDS gray 는 살짝 푸른 쿨 그레이(#878F91·#606567)다.

ZIGZAG (지그재그)

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

출처