Dribbble

흰 캔버스 위 4:3 샷 썸네일 격자와 농구공 분홍(#EA4C89) 한 점

서양크리에이티브 도구소셜따뜻한modern-minimal복합comfortablesoftflat라이트한글 지원출시 2009개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: Dribbble (드리블)
한 줄 정체성: 디자이너가 작업 한 컷(「샷」)을 올려 보여 주고, 기업은 그 샷을 보고 디자이너를 찾는 디자인 포트폴리오·구인 커뮤니티
공식 디자인 철학: 공개 디자인 시스템 문서는 없다. 2023년 리브랜딩 때 밝힌 방향은 "구인·채용까지 넓어진 서비스에 맞춰 더 성숙하고 전문적인 인상"이다. 흘려 쓴 필기체 로고를 버리고 반듯하게 세운 워드마크(Alkaline 변형)로 바꿨다.
시그니처 요소 1개: 흰 캔버스에 4:3 샷 썸네일이 빽빽하게 깔리고, 인터페이스 자체는 검정 글자·회색 선만 남긴 채 농구공 로고의 분홍(#EA4C89)을 좋아요·검색 버튼 같은 몇 곳에만 찍는 절제

Tone & Mood

톤 & 무드

핵심 키워드 3개: 감각적, 전시적, 경쾌함
무드 설명: 화면의 주인공은 디자이너가 올린 샷이다. 인터페이스는 갤러리 벽처럼 하얗게 물러나 있고, 분홍은 로고와 "좋아요" 같은 반응 지점에서만 톡 튄다. 큰 제목은 세리프로 편집 매체 느낌을 주고, 나머지는 산세리프로 가볍게 흐른다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 썸네일 격자는 촘촘하지만 카드 사이 간격(약 24~36px)과 여백이 넉넉해 한 장씩 눈에 들어온다.
모서리 성향: Soft (8px) — 썸네일은 8px, 버튼·검색창·필터 칩은 필(9999px)
평면성: Flat — 그림자 거의 없이 면과 hairline 으로 구획한다. 드롭다운·모달만 그림자를 쓴다.

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Dribbble Pink (로고 농구공) */
  --color-primary-50:  #FDEEF4;  /* 선택 배경 (추정) */
  --color-primary-100: #FBD5E4;  /* (추정) */
  --color-primary-200: #F7ADCB;  /* (추정) */
  --color-primary-300: #F284B1;  /* (추정) */
  --color-primary-400: #EE679D;  /* (추정) */
  --color-primary-500: #EA4C89;  /* 기본 · 로고·좋아요·검색 버튼 */
  --color-primary-600: #D6336F;  /* hover (추정) */
  --color-primary-700: #B82A5F;  /* pressed (추정) */
  --color-primary-800: #8E2149;  /* (추정) */
  --color-primary-900: #621733;  /* (추정) */

  /* Secondary - 잉크 (주 CTA 버튼·본문 글자) */
  --color-secondary-500: #0D0C22;  /* Sign up·Get started 검정 필 버튼 (추정) */

  /* 레거시 보조 팔레트 (구 브랜드 가이드 인용 값) */
  --accent-green:  #8ABA56;
  --accent-orange: #FF8833;
  --accent-blue:   #00B6E3;

  /* Neutral (제품 관찰 · 추정) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F8F7F4;  /* 따뜻한 오프화이트 섹션 */
  --color-neutral-100:  #F3F3F4;  /* 검색창·선택 칩 */
  --color-neutral-200:  #E7E7E9;  /* 구분선 */
  --color-neutral-300:  #DBDBDE;  /* PRO 배지·입력 테두리 */
  --color-neutral-500:  #9E9EA7;  /* 아이콘·플레이스홀더 */
  --color-neutral-700:  #6E6D7A;  /* 보조 글자 */
  --color-neutral-800:  #3D3D4E;  /* 내비 글자 */
  --color-neutral-900:  #0D0C22;  /* 본문·제목 */
  --color-neutral-1000: #000000;

  /* Semantic (추정) */
  --color-success-bg: #EEF7E6;
  --color-success-fg: #4F7F2A;
  --color-warning-bg: #FFF1E3;
  --color-warning-fg: #B45309;
  --color-error-bg:   #FDECEC;
  --color-error-fg:   #D92D20;
  --color-info-bg:    #E5F7FC;
  --color-info-fg:    #0086A8;

  /* Surface */
  --bg-base:     #FFFFFF;               /* 샷 격자 페이지 */
  --bg-subtle:   #F8F7F4;               /* 푸터·소개 섹션 */
  --bg-elevated: #FFFFFF;               /* 드롭다운·카드 */
  --bg-overlay:  rgba(13,12,34,0.72);   /* 샷 상세 모달 뒤 */

  /* Text */
  --text-primary:    #0D0C22;
  --text-secondary:  #6E6D7A;
  --text-tertiary:   #9E9EA7;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #C4C4CC;

  /* Border */
  --border-default: #E7E7E9;
  --border-subtle:  #F3F3F4;
  --border-strong:  #DBDBDE;
  --border-focus:   #EA4C89;   /* 입력 포커스 링 (추정) */
}

Typography

타이포그래피

폰트 페어링:
- 영문 UI: Mona Sans (SIL OFL, GitHub 제작) — 대체 g·a 글리프를 쓴 맞춤판
- 영문 제목: Source Serif (SIL OFL) — 홈 히어로·마케팅 큰 제목
- 한글: Pretendard (OFL) / 세리프 제목은 Noto Serif KR (OFL) 폴백
- 워드마크: Alkaline 맞춤 변형 (상용, 로고 전용)
위계 (추정):
- Display: 64px / 600 / 1.05 / -0.02em (세리프 · 홈 히어로)
- H1: 40px / 600 / 1.15 / -0.01em (세리프)
- H2: 28px / 700 / 1.25 / -0.01em (Mona Sans)
- H3: 20px / 600 / 1.3 / 0
- Body Large: 18px / 400 / 1.5 / 0
- Body: 16px / 400 / 1.5 / 0
- Body Small: 14px / 400 / 1.45 / 0 (샷 카드 이름·수치)
- Caption: 11px / 700 / 1.2 / 0.02em (PRO·TEAM 배지)

Spacing

스페이싱

Base unit: 4px (추정)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 샷 격자는 max-width 없이 화면 폭을 채우며 좌우 패딩 72px(데스크톱)·20px(모바일). 격자는 repeat(auto-fill, minmax(270px, 1fr)), 간격 36px (추정)

Border Radius

--radius-none: 0;
--radius-sm: 4px;      /* PRO·TEAM 배지 */
--radius-md: 8px;      /* 샷 썸네일·드롭다운 */
--radius-lg: 12px;     /* 모달·가입 카드 */
--radius-xl: 16px;     /* 마케팅 섹션 큰 카드 */
--radius-full: 9999px; /* 버튼·검색창·필터 칩·아바타 */

Shadow / Elevation

--shadow-none: none;                               /* 샷 카드 기본 (평면) */
--shadow-sm: 0 1px 2px rgba(13,12,34,0.06);        /* 버튼 눌림 없이 살짝 띄울 때 */
--shadow-md: 0 8px 24px rgba(13,12,34,0.10);       /* 드롭다운·필터 팝오버 */
--shadow-lg: 0 16px 40px rgba(13,12,34,0.14);      /* 샷 상세 모달 */
--shadow-xl: 0 24px 64px rgba(13,12,34,0.20);      /* 전체 화면 가입 다이얼로그 */

Iconography

스타일: Outline 중심, 좋아요 하트·로고만 Filled
Stroke 굵기: 1.5px (16~20px 아이콘)
모서리 처리: Round
추천 라이브러리: Lucide 또는 Heroicons Outline (자체 아이콘 세트와 인상이 가장 가깝다)

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 14px/1 'Mona Sans', 'Pretendard', sans-serif; height: 40px; padding: 0 20px;
  border-radius: var(--radius-full); border: 0; display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
/* 주 CTA 는 분홍이 아니라 잉크 검정이다 */
.btn-primary { background: var(--color-secondary-500); color: #FFFFFF; }
.btn-primary:hover { background: #3D3D4E; }
.btn-primary:active { background: #000000; }
.btn-primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }
.btn-primary.is-loading { color: transparent; background: #6E6D7A; }
.btn-secondary { background: var(--bg-base); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--text-tertiary); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--color-neutral-100); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
/* 분홍 버튼은 좋아요·검색처럼 "반응" 지점에만 */
.btn-pink { background: var(--color-primary-500); color: #FFFFFF; }
.btn-pink:hover { background: var(--color-primary-600); }

Input (검색창)

.search { height: 48px; padding: 0 6px 0 20px; border-radius: var(--radius-full); background: var(--color-neutral-100);
  border: 1px solid transparent; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.search:focus-within { background: var(--bg-base); border-color: var(--color-primary-200); box-shadow: 0 0 0 4px var(--color-primary-50); }
.search.is-error { border-color: var(--color-error-fg); }
.search.is-disabled { opacity: .5; }
.search .go { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-500); color: #FFFFFF; }
.input { height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 15px; }
.input:focus { outline: none; border-color: var(--border-focus); }
.input.is-error { border-color: var(--color-error-fg); background: var(--color-error-bg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card (샷 카드)

.shot-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-100); }
.shot-thumb .overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; padding: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55)); opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.shot-thumb:hover .overlay { opacity: 1; }
.shot-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; }
.shot-meta .stat { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 12px; }
.card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 24px; }
.card-strong { background: var(--color-secondary-500); color: #FFFFFF; }
.card-outlined { border: 1px solid var(--border-default); }

Badge / Tag

.badge { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.badge-solid { background: var(--color-neutral-300); color: #FFFFFF; }   /* PRO·TEAM */
.badge-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.badge-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }
.chip { height: 36px; padding: 0 16px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; color: var(--color-neutral-800); }
.chip.is-active { background: var(--color-neutral-100); color: var(--text-primary); }

Navigation

.gnb { height: 80px; padding: 0 32px; display: flex; align-items: center; gap: 28px; background: var(--bg-base); }
.gnb a { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.gnb .right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.cat-bar { display: flex; gap: 4px; overflow-x: auto; padding: 0 72px; }

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

썸네일에 마우스를 올리면 제목과 저장·좋아요 버튼이 담긴 어두운 그라데이션이 페이드인된다. 샷 안의 GIF·영상은 hover 할 때만 재생된다 (추정).

Anti-patterns

1. 분홍을 넓은 배경이나 주 CTA 면에 깔기 금지 — 주 버튼은 잉크 검정, 분홍은 로고·좋아요·검색 한 점 2. 샷 썸네일에 테두리·그림자·두꺼운 액자 두르기 금지 — 작업물이 곧 디자인이라 틀은 비운다 3. 썸네일 비율 흩뜨리기 금지 — 격자는 4:3 한 가지로 줄을 맞춘다 4. 카드 아래에 설명문·태그를 길게 달기 금지 — 아바타·이름·배지·좋아요·조회수까지만 5. 각진 직사각 버튼 금지 — 누르는 요소는 필 모양, 썸네일만 8px

Dribbble

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처