ABLY (에이블리)

흑백 ABLY 워드마크 위 코럴 핑크 #FF5160 할인율·찜 하트 — 사진이 주인공인 3열 상품 그리드

한국이커머스라이프스타일소비자따뜻한modern-minimal고딕compactsoftflat라이트한글 지원출시 2018개정 2024

Brand DNA

브랜드 DNA

브랜드명: ABLY (에이블리, 운영사 ㈜에이블리코퍼레이션, 2015년 설립)
한 줄 정체성: 동대문 기반 여성 패션 마켓 수천 곳을 한 앱에 모아 AI 추천으로 "내 취향 상품만" 보여 주는 스타일 커머스 앱. 앱 스토어 부제는 「패션, 뷰티, 라이프. 초개인화 AI 쇼핑메이트」, 앱 이름에 「전 상품 무료배송」을 붙여 쓴다.
공식 디자인 철학: 공개된 디자인 시스템 문서는 없다. 이름은 'able'에서 왔고 "누구나 쉽게 창업하고 쇼핑할 수 있게(able) 만든다"는 뜻을 담는다(나무위키·언론 인터뷰 기반). 웹앱 번들에서 확인한 내부 토큰 체계(gray·pink·lilac·blue·slate 팔레트 → content_*/bg_*/border_* 의미 토큰, h1~h5/subtitle1~7/body1~7 타입 스케일)가 사실상의 디자인 시스템이다.
시그니처 요소 1개: 로고와 앱 아이콘은 흰 바탕에 검정 `ABLY` 대문자 워드마크(#1F1F1F)로 색을 뺐고, 색은 상품 카드의 코럴 핑크 `#FF5160` 할인율·찜 하트·장바구니 배지에만 쓴다. 흑백 뼈대 + 핑크 한 점이 에이블리를 알아보게 한다.

> 참고: 예전 에이블리는 핑크 계열 로고를 썼던 것으로 알려져 있으나(추정), 현행 로고·앱 아이콘은 흑백 대문자 워드마크다(웹앱 헤더 L8 컴포넌트, App Store 아이콘 실측). 회사 소개 사이트 ably.team 도 같은 글자꼴의 ABLY TEAM 로고를 쓴다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 발랄함, 담백함, 취향중심
무드 설명: 화면 대부분은 흰 바탕과 회색 글씨로 비워 두고, 상품 사진이 3열로 빽빽하게 깔린다. 색은 할인율·찜·알림 배지 같은 "사고 싶게 만드는 지점"에만 코럴 핑크로 찍힌다. 말투는 "하나만 사도 무료배송", "로그인에 실패했어요"처럼 짧고 부드러운 해요체다.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 3열 상품 그리드에 마켓명·상품명·가격·리뷰를 11~13px 로 촘촘히 쌓아 한 화면에 상품 9~12개를 보여 준다.
모서리 성향: Soft(4~8px) — 내부 radius 스케일 xsmall 2 / small 4 / medium 8 / large 12 / xlarge 16, 버튼은 4~8px. 단, 필터 칩은 18px 알약형이다. 상품 이미지는 모서리를 굴리지 않는다.
평면성: Flat — 그림자 대신 0.5px rgba(0,0,0,.08) 이미지 테두리와 #EEEEEE 구분선으로 층을 나눈다.

Color System

컬러 시스템 (CSS 변수)

웹앱 번들(mobile.a-bly.com/assets/index-*.js)의 팔레트 객체와 의미 토큰(content_*, bg_*, border_*)을 그대로 옮겼다. (추정) 표기가 없는 값은 전부 실측이다.

:root {
  /* Primary — Ably Pink (pink 계열) */
  --color-primary-50: #FFF4F6;   /* pink3 — 가장 옅은 배경 */
  --color-primary-100: #FFEFF2;  /* pink5 — NEW 배지·세컨더리 버튼 배경 */
  --color-primary-200: #FFDFE4;  /* pink10 — BEST 배지 배경 */
  --color-primary-300: #FFA8AF;  /* pink20 — 핑크 보조 테두리·스위치 트랙 */
  --color-primary-400: #FF7A86;  /* (추정) pink20~30 보간 */
  --color-primary-500: #FF5160;  /* pink30 — 기본: 할인율·찜·CTA·배지 */
  --color-primary-600: #E21F2C;  /* pink40 — 오류/부정(content_negative) */
  --color-primary-700: #BF3C47;  /* pink50 — 핑크 버튼 눌림(bg_pink_pressed) */
  --color-primary-800: #97303A;  /* (추정) */
  --color-primary-900: #6C222A;  /* (추정) */

  /* Secondary — Lilac(오늘출발·빠른배송) · Slate(선택 칩) · Orange(포인트/리워드) */
  --color-secondary-500: #6668FF;  /* lilac40 — 오늘출발 표기 */
  --color-lilac-50: #F2F6FF;       /* lilac5 */
  --color-lilac-100: #E8E8FF;      /* lilac10 */
  --color-slate-500: #56667D;      /* slate50 — 선택된 필터 칩 */
  --color-slate-600: #414C5A;      /* slate60 — 눌림 */
  --color-orange-500: #FE9D1E;     /* orange40 — 적립·이벤트 배지 */
  --color-point-yellow: #FFD350;   /* 헤더 포인트(P) 코인 */

  /* Neutral — gray 스케일 (번호는 문서용, 괄호가 원래 이름) */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F9F9F9;    /* gray5 */
  --color-neutral-100: #F5F5F5;   /* gray10 — bg_secondary */
  --color-neutral-200: #EEEEEE;   /* gray20 — 구분선·bg_tertiary */
  --color-neutral-300: #DDDDDD;   /* gray30 — border_secondary */
  --color-neutral-400: #CCCCCC;   /* gray40 — border_primary·비활성 글자 */
  --color-neutral-500: #9E9E9E;   /* gray50 — content_tertiary */
  --color-neutral-600: #777777;   /* gray60 — content_secondary */
  --color-neutral-700: #424242;   /* gray65 */
  --color-neutral-900: #1F1F1F;   /* gray70 — content_primary·로고 */
  --color-neutral-1000: #000000;  /* bg_black_button */

  /* Semantic */
  --color-success-bg: #F4F8FF;   /* blue5 — 에이블리는 긍정을 파랑으로 표시 */
  --color-success-fg: #6093FC;   /* blue30 — content_positive */
  --color-warning-bg: #FFF6EB;   /* orange5 */
  --color-warning-fg: #FE9D1E;   /* orange40 */
  --color-error-bg: #FFEFF2;     /* pink5 */
  --color-error-fg: #E21F2C;     /* pink40 — content_negative */
  --color-info-bg: #DFE9FE;      /* blue10 */
  --color-info-fg: #2572F7;      /* blue40 — content_blue_primary */

  /* Surface */
  --bg-base: #FFFFFF;      /* bg_primary */
  --bg-subtle: #F5F5F5;    /* bg_secondary — 섹션 구분 띠 */
  --bg-elevated: #FFFFFF;  /* 카드·바텀시트 */
  --bg-overlay: rgba(0, 0, 0, 0.4);  /* overlay_dark (alpha_dark40) */

  /* Text */
  --text-primary: #1F1F1F;    /* content_primary */
  --text-secondary: #777777;  /* content_secondary */
  --text-tertiary: #9E9E9E;   /* content_tertiary */
  --text-on-primary: #FFFFFF; /* content_always_white */
  --text-disabled: #CCCCCC;   /* content_disabled */

  /* Border */
  --border-default: #DDDDDD;  /* border_secondary — 칩·입력 */
  --border-subtle: #EEEEEE;   /* border_tertiary — 구분선 */
  --border-strong: #1F1F1F;   /* border_black_primary */
  --border-focus: #FF5160;    /* border_pink_primary */
  --border-image: rgba(0, 0, 0, 0.08);  /* 상품 이미지 0.5px 테두리 */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL OFL) — 웹앱이 Pretendard-Regular(400)·Pretendard-SemiBold(600) 두 굵기의 서브셋 woff2 를 직접 싣는다. 안드로이드 앱은 pretendard_regular/pretendard_semi_bold.
- 영문: Pretendard 동일(라틴 글리프 포함). 폴백 -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic.
위계 (앱 타입 스케일 실측, 굵기는 regular 400 / bold 600 두 가지만):
- Display: 32px / 600 / 42px / -0.8px (h1)
- H1: 26px / 600 / 34px / -0.6px (h2)
- H2: 20px / 600 / 24px / -0.6px (h4)
- H3: 16px / 600 / 20px / -0.4px (subtitle1 — 가격·섹션 제목)
- Body Large: 15px / 400 / 19px / -0.4px (body1.5)
- Body: 14px / 400 / 18px / -0.4px (body2)
- Body Small: 12px / 400 / 16px / -0.2px (body4 — 상품명)
- Caption: 10px / 400 / 14px / 0 (body6), 가장 작은 배지 글자 8px / 600 / 10px (subtitle7)

Spacing

스페이싱

Base unit: 4px (패딩 값이 2·4·8·12·16 으로 떨어진다)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; /* 화면 좌우 기본 여백 */ --space-lg: 24px; --space-xl: 32px; --space-2xl: 44px; /* 헤더 높이(rc=44) (추정: 토큰이 아니라 상수) */ --space-3xl: 64px; ``
Container: 모바일 전용 앱. 웹은 폭 최대 600px 가운데 정렬(추정), 좌우 패딩 16px, 3열 그리드 간격 4~8px.

Border Radius

--radius-none: 0;      /* 상품 이미지 */
--radius-sm: 2px;      /* xsmall — BEST·NEW 배지 */
--radius-md: 4px;      /* small — 중·소형 버튼 */
--radius-lg: 8px;      /* medium — 대형 버튼·카드·배너 */
--radius-xl: 12px;     /* large — 바텀시트 상단 */
--radius-2xl: 16px;    /* xlarge */
--radius-chip: 18px;   /* 필터 칩(small·medium), large 칩은 24px */
--radius-full: 9999px; /* 프로필 이미지·카운트 배지 */

Shadow / Elevation

앱 elevation 스케일(shadowColor #000) 실측값을 CSS 로 옮겼다.

--shadow-none: none;                               /* 기본 — 상품 카드는 그림자 없음 */
--shadow-sm: 0 1px 1.4px rgba(0, 0, 0, 0.12);      /* small — 플로팅 칩 */
--shadow-md: 0 1px 2.2px rgba(0, 0, 0, 0.15);      /* medium — 탑 버튼 */
--shadow-lg: 0 2px 2.6px rgba(0, 0, 0, 0.16);      /* large — 떠 있는 배너 */
--shadow-xl: 0 2px 8px rgba(0, 0, 0, 0.15);        /* 토스트·팝업 */

Iconography

스타일: Outline 기본 + 활성 상태 Filled(찜 하트는 채운 #FF5160, 홈 탭은 채운 검정)
Stroke 굵기: 1.5~2px (24px 그리드)
모서리 처리: Round
추천 라이브러리: 자체 SVG 아이콘(번들 내 react-native-svg 컴포넌트). 대체로는 Lucide / Tabler

Component Guide

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

Button — 높이 xlarge 56 / large 48 / medium 40 / small 32 / xsmall 28, 색 변형은 pink·black·slate·blue × solid·secondary·outline

.ab-btn { height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-lg); font: 600 14px/18px Pretendard, sans-serif; letter-spacing: -0.4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.ab-btn--primary { background: var(--color-primary-500); border-color: var(--color-primary-500); color: var(--text-on-primary); }
.ab-btn--primary:active { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.ab-btn--secondary { background: var(--color-primary-100); border-color: var(--color-primary-100); color: var(--color-primary-500); }
.ab-btn--outline { background: #FFFFFF; border-color: var(--color-primary-300); color: var(--color-primary-500); }
.ab-btn--black { background: var(--color-neutral-1000); color: #FFFFFF; }
.ab-btn--black:active { background: var(--color-neutral-600); }
.ab-btn--ghost { background: transparent; color: var(--text-secondary); }
.ab-btn--ghost:active { background: var(--color-neutral-200); }
.ab-btn--danger { background: var(--color-error-fg); color: #FFFFFF; }
.ab-btn:disabled, .ab-btn[aria-disabled="true"] { background: var(--color-neutral-200); border-color: var(--color-neutral-200); color: var(--text-disabled); cursor: not-allowed; }
.ab-btn--loading { color: transparent; position: relative; pointer-events: none; }
.ab-btn--loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #FFFFFF; border-radius: 50%; animation: ab-spin .8s linear infinite; }
@keyframes ab-spin { to { transform: rotate(360deg); } }

Filter Chip (필터·정렬, 실측 wne/Tne)

.ab-chip { padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-chip); background: transparent; color: var(--text-secondary); font: 600 13px/16px Pretendard, sans-serif; }
.ab-chip:active { background: var(--color-neutral-200); }
.ab-chip.is-selected { background: var(--color-slate-500); border-color: var(--color-slate-500); color: #FFFFFF; }
.ab-chip.is-active { border-color: var(--color-slate-500); color: var(--color-slate-500); }
.ab-chip:disabled { background: var(--color-neutral-100); border-color: var(--color-neutral-200); color: var(--text-disabled); }

Input — 검색창 높이 36px, 회색 면

.ab-input { height: 40px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: #FFFFFF; font: 400 14px/18px Pretendard, sans-serif; color: var(--text-primary); }
.ab-input::placeholder { color: var(--text-secondary); }
.ab-input:focus { outline: none; border-color: var(--border-strong); }
.ab-input.is-error { border-color: var(--color-error-fg); }
.ab-input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }
.ab-search { height: 36px; border: 0; border-radius: var(--radius-md); background: var(--color-neutral-100); padding: 0 12px; }

Card — 상품 카드(기본형) · 강조형 · Outlined

.ab-goods { min-width: 0; }
.ab-goods__img { position: relative; aspect-ratio: 3 / 4; background: var(--bg-subtle); box-shadow: inset 0 0 0 .5px var(--border-image); }
.ab-goods__rank { position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: var(--text-primary); color: #FFFFFF; font: 600 12px/24px Pretendard, sans-serif; text-align: center; }
.ab-goods__like { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; }
.ab-goods__market { margin-top: 8px; font: 600 12px/16px Pretendard, sans-serif; color: var(--text-primary); }
.ab-goods__name { font: 400 12px/16px Pretendard, sans-serif; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-goods__price { font: 600 16px/20px Pretendard, sans-serif; letter-spacing: -0.4px; color: var(--text-primary); }
.ab-goods__rate { color: var(--color-primary-500); margin-right: 2px; }
.ab-card--accent { background: var(--color-primary-50); border-radius: var(--radius-lg); padding: 16px; }
.ab-card--outlined { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 16px; }

Badge / Tag

.ab-badge { display: inline-flex; align-items: center; padding: 1px 4px; border-radius: var(--radius-sm); font: 600 10px/14px Pretendard, sans-serif; }
.ab-badge--solid { background: var(--color-primary-500); color: #FFFFFF; }
.ab-badge--subtle { background: var(--color-primary-200); color: var(--color-primary-500); }  /* BEST */
.ab-badge--outline { border: 1px solid var(--color-primary-300); color: var(--color-primary-500); background: #FFFFFF; }
.ab-count { min-width: 16px; height: 16px; padding: 0 2px; border-radius: 8px; background: var(--color-primary-500); color: #FFFFFF; font: 400 10px/16px Pretendard, sans-serif; text-align: center; }  /* 장바구니 숫자 */

Navigation — 상단 헤더(로고·포인트·검색·장바구니) + 가로 탭 + 하단 탭 바

.ab-header { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 16px; background: #FFFFFF; }
.ab-tabs { display: flex; gap: 20px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--border-subtle); }
.ab-tab { height: 40px; line-height: 40px; font: 400 15px/40px Pretendard, sans-serif; color: var(--text-tertiary); }
.ab-tab.is-on { color: var(--text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--text-primary); }
.ab-tabbar { height: 56px; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -1px 0 var(--border-subtle); background: #FFFFFF; font: 400 10px/14px Pretendard, sans-serif; color: var(--text-tertiary); }
.ab-tabbar .is-on { color: var(--text-primary); font-weight: 600; }

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); /* (추정) */

홈 헤더는 스크롤 진행도(progress)에 맞춰 로고 투명도와 헤더 높이를 보간한다(Reanimated 워크릿 실측). 찜 하트는 누르면 채워지며 살짝 튄다(추정).

Anti-patterns

1. 로고를 핑크로 칠하지 않는다 — 현행 ABLY 워드마크는 #1F1F1F(어두운 배경에선 흰색) 단색이다. 2. 코럴 핑크를 넓은 면이나 본문 글자에 쓰지 않는다 — 할인율·찜·배지·주요 CTA 같은 "점"에만 쓴다. 3. 상품 이미지에 둥근 모서리나 그림자를 주지 않는다 — 각진 사진 + 0.5px 8% 테두리가 기본이다. 4. 400·600 외의 굵기(700·800)를 섞지 않는다 — Pretendard Regular·SemiBold 두 서브셋만 싣는다. 5. 선택된 필터 칩을 핑크로 채우지 않는다 — 선택 상태는 슬레이트 #56667D, 핑크는 가격·찜에 남겨 둔다.

ABLY (에이블리)

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

출처