Yelp

빨간 burst 로고 아래 도시 행사 그림, 날짜·장소·관심 인원을 잇는 청록 링크와 붉은 행사 만들기 버튼

서양소비자라이프스타일따뜻한humanismmodern-minimal고딕compactsoftsubtle라이트공식

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

Brand DNA

브랜드 DNA

브랜드명: Yelp(옐프). 동네 가게를 찾고 사람들이 올린 경험을 살피는 서비스다. 행사 화면에서는 도시를 고른 뒤 일정과 장소를 비교한다.
한 줄 정체성: 동네에서 새로 해 볼 일을 찾는 생활 안내판. 큰 행사 그림 곁에 날짜·시각·장소를 두고 관심 인원으로 참여 분위기를 전한다.
공식 디자인 철학: Cookbook은 스타일을 Ingredients, 기본 부품을 Recipes, 복합 부품을 Entrees로 구분한다. 사용자가 길을 쉽게 찾고 일을 마치며 신뢰할 수 있도록 설계한다는 원칙을 공개한다.
시그니처 요소 1개: 빨간 burst와 소문자 워드마크 아래 이어지는 지역 정보. 붉은 주동작과 청록 링크는 역할이 다르다. 행사 화면의 정보 단위는 평점이 아니라 날짜·장소·관심 인원이다.
기준 시점: 2026년 11월 공식 문서와 행사 화면을 함께 확인했다. 2024년 12월 Yelp Design 글에도 Cookbook 링크가 있지만, 최초 공개일과 마지막 큰 개편일은 명시되지 않아 연도를 만들지 않았다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근한, 명확한, 활기찬
무드 설명: 흰 카드와 작은 회색 선에 정보를 정렬하고, 행사 그림이 동네의 분위기를 전한다. 이름은 굵게, 일정은 한 줄씩, 관심 수는 맨 아래에 둔다. 색으로 모든 정보를 강조하지 않는다.
비주얼 스타일: 휴머니즘 + 모던 미니멀. 사람·장소를 담은 이미지와 단순한 조작부가 함께 있다.
밀도(Density): Compact — 행사 한 칸에 이름·날짜·시각·장소·소개·분류·관심 수를 담고, PC 인기 목록은 3열이다.
모서리 성향: Soft(4~8px). 행사 카드와 검색창은 작은 둥근 모서리, 선택 pill은 별도 부품이다. 큰 카드 전체를 알약처럼 만들지 않는다.
평면성: Subtle. 목록은 선으로 나누고, 검색창처럼 떠 있는 조작부에만 그림자를 쓴다.

Color System

컬러 시스템 (CSS 변수)

Cookbook은 색마다 Regular·Dark·Light 세 값을 공개한다. 아래 번호는 이 문서의 연결 이름이며, 없는 중간색을 새로 보간하지 않았다. Red Regular는 기본색, Red Dark는 작은 글자·짙은 동작, Teal Dark는 링크에 쓴다. 로고의 빨강은 공식 SVG 원본값을 유지한다.

:root {
  /* 독립 룩북 데모 전용. 사이트 공용 토큰과 별개인 Cookbook 값. */
  --color-primary-50: #FFECEC;
  --color-primary-100: #FFECEC;
  --color-primary-200: #FFECEC; /* 별도 단계 없음: Light 별칭 */
  --color-primary-300: #FA4848;
  --color-primary-400: #FA4848;
  --color-primary-500: #FA4848; /* Red Regular */
  --color-primary-600: #D71616;
  --color-primary-700: #D71616;
  --color-primary-800: #D71616;
  --color-primary-900: #D71616; /* 별도 단계 없음: Dark 별칭 */
  --color-secondary-50: #D9F6FD;
  --color-secondary-500: #0396BC;
  --color-secondary-700: #007692;
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F7F7F7;
  --color-neutral-100: #F0F0F0;
  --color-neutral-200: #E3E3E3;
  --color-neutral-300: #C8C9CA;
  --color-neutral-500: #898A8B;
  --color-neutral-700: #6B6D6F;
  --color-neutral-900: #2D2E2F;
  --color-neutral-1000: #000000;
  --color-success-bg: #DEF6E7;
  --color-success-fg: #007C52;
  --color-warning-bg: #FFEDDD;
  --color-warning-fg: #C04214;
  --color-error-bg: #FFECEC;
  --color-error-fg: #D71616;
  --color-info-bg: #E1F4FE;
  --color-info-fg: #1A6DC3;
  --bg-base: #FFFFFF;
  --bg-subtle: #F7F7F7;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(0,0,0,.4); /* 투명도는 추정: 모달 뒤 가림 */
  --text-primary: #2D2E2F;
  --text-secondary: #6B6D6F;
  --text-tertiary: #6B6D6F; /* 작은 정보는 Black Light 유지 */
  --text-on-primary: #FFFFFF;
  --text-disabled: #898A8B;
  --border-default: #C8C9CA;
  --border-subtle: #E3E3E3;
  --border-strong: #6B6D6F;
  --border-focus: #007692;
  --yelp-action: #D71616; /* Dark: 흰 작은 버튼 글자의 대비 확보 */
  --yelp-link: #007692;
  --font-display: Poppins, Arial, sans-serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

공식 값과 현재 행사 화면: 현재 행사 페이지는 구획 제목 #D32323, 링크 #0073BB, 검색 버튼 #E00707을 쓴다. 본문에는 Helvetica 계열도 남아 있다. 위 토큰과 ⑫는 Cookbook을 적용한 예시이며, 이 옛 화면의 색을 Cookbook 공식값으로 바꿔 적은 것이 아니다.
지원 테마: 라이트만 기록한다. 공개 색 견본의 Dark와 Light는 한 색의 짙고 옅은 단계다. 확인한 문서와 행사 화면에 테마 전환이나 별도 다크 화면 토큰은 없었다.

Typography

타이포그래피

폰트 페어링: Poppins는 제목·버튼·가게 이름·강조, Open Sans는 설명·링크·일정에 쓴다. 공식 한글 가족은 확인되지 않았다. 한글 설명을 더할 때의 시스템 고딕은 대체 선택이며 공식 지정 서체가 아니다.
웹 위계: 아래 크기와 줄높이는 Ingredients의 공개값이다. Bold 700, Semibold 600, Medium 500, Regular 400으로 연결하며 자간 0은 이 예시의 추정값이다.
- Display: 별도 단계 없음. H1과 같은 48px / 700 / 56px / 0.
- H1: Poppins 48px / 700 / 56px / 0.
- H2: Poppins 28px / 700 / 36px / 0.
- H3: Poppins 24px / 700 / 32px / 0. 그 아래 H4는 20px / 700 / 28px.
- Body Large: Poppins 또는 Open Sans 16px / 400·500·600·700 / 24px / 0.
- Body: Open Sans 14px / 400·600·700 / 20px / 0.
- Body Small: Open Sans 12px / 400·600·700 / 16px / 0.
- Caption: Open Sans 10px / 400·600·700 / 12px / 0.
모바일 제목: 28/36 → 24/32 → 20/28. 작은 카드 미리보기의 6~10px와 ⑫의 압축된 10~18px는 룩북용 축소 표현이며 실제 서비스의 표준 글자 크기가 아니다.

Spacing

스페이싱

Base unit: 4px(추정). 확인한 Ingredients·Recipes에서 전체 간격 사다리를 찾지 못해 행사 화면의 작은 간격을 기준으로 연결했다.
Container: 현재 행사 화면 PC 본문은 960px, 1280px 화면 좌우는 160px다. ⑫는 900px 미리보기에 맞춰 좌우 20px로 줄인다. 휴대폰은 16px 여백과 한 열을 쓴다(예시값).

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --container-max: 960px;
}

Border Radius

검색 버튼의 바깥 모서리 4px는 현재 행사 화면 실측값이다. 카드 4px와 선택 pill은 화면 관찰이며, 나머지 크기 구분은 예시용 연결이다(추정).

:root {
  --radius-none: 0;
  --radius-sm: 3px; /* 작은 라벨, 추정 */
  --radius-md: 4px; /* 검색·행사 카드 */
  --radius-lg: 8px; /* 큰 부품, 추정 */
  --radius-xl: 16px; /* 시트, 추정 */
  --radius-full: 9999px; /* 선택 pill·아바타 */
}

Shadow / Elevation

행사 카드는 얇은 선만 있고 검색창은 짧은 그림자가 있다. 확인한 공개 가이드에서 그림자 수치를 찾지 못해 아래 수치는 예시용 추정이다. 목록 전체에 그림자를 반복하지 않는다.

:root {
  --shadow-none: none;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12); /* 검색 제안 */
  --shadow-lg: 0 8px 24px rgba(0,0,0,.16); /* 팝오버 */
  --shadow-xl: 0 16px 40px rgba(0,0,0,.2); /* 모달 */
}

Iconography

스타일: 선과 채움의 혼합. 행사 날짜에는 달력, 장소에는 핀, 분류에는 풍선·식기·음표 등 서로 다른 형상을 쓴다.
Stroke 굵기: 20~24px 아이콘에서 약 2px(관찰·추정). 작은 카드에서는 같은 비율로 줄인다.
모서리 처리: 조작 아이콘은 둥근 선 끝, 달력·카드 윤곽은 작은 모서리다.
사용 방법: 공식 가이드의 아이콘 모양을 먼저 확인한다. 이 예시의 분류·달력·핀은 직접 그린 단순 선 아이콘이며 공식 아이콘 파일이라고 주장하지 않는다. 별도 라이브러리는 쓰지 않는다.

Component Guide

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

Recipes가 분류한 검색·목록·탭·버튼·선택·입력·카드를 행사 화면에 맞췄다. 상태별 상세 수치는 공개 규정이 아니므로 아래 CSS는 Cookbook 색과 관찰한 모양을 연결한 구현 예시다(추정).

.yp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius-md);font:600 14px/20px var(--font-display);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}
.yp-btn--primary,.yp-btn--danger{background:var(--yelp-action);color:var(--text-on-primary)}
.yp-btn--primary:hover,.yp-btn--danger:hover{background:var(--color-primary-700);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.yp-btn--primary:active,.yp-btn--danger:active{background:var(--color-primary-700);box-shadow:inset 0 2px 3px rgba(0,0,0,.15)}
.yp-btn--secondary{background:var(--bg-base);border-color:var(--border-default);color:var(--text-primary)}
.yp-btn--secondary:hover{background:var(--bg-subtle)}
.yp-btn--secondary:active{background:var(--color-neutral-100)}
.yp-btn--ghost{background:transparent;color:var(--yelp-link)}
.yp-btn--ghost:hover{background:var(--color-secondary-50)}
.yp-btn--ghost:active{box-shadow:inset 0 0 0 1px var(--color-secondary-500)}
.yp-btn:disabled{background:var(--color-neutral-100);color:var(--text-disabled);border-color:transparent;box-shadow:none;cursor:default}
.yp-btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px}
.yp-btn[aria-busy="true"]{position:relative;color:transparent;pointer-events:none}
.yp-btn[aria-busy="true"]::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--color-neutral-300);border-top-color:var(--text-primary);border-radius:50%;animation:yelp-spin .8s linear infinite}
@keyframes yelp-spin{to{transform:rotate(360deg)}}
.yp-input{min-width:0;width:100%;height:48px;padding:0 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-base);color:var(--text-primary);font:400 16px/24px var(--font-body)}
.yp-input::placeholder{color:var(--text-secondary)}
.yp-input:focus{outline:2px solid var(--border-focus);outline-offset:2px}
.yp-input[aria-invalid="true"]{border-color:var(--color-error-fg)}
.yp-input:disabled{background:var(--bg-subtle);color:var(--text-disabled)}
.yp-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;min-width:0}
.yp-card--featured{display:grid;grid-template-columns:1fr 1fr}
.yp-card--outlined{border-color:var(--border-default)}
.yp-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:var(--radius-sm);font:600 12px/16px var(--font-body)}
.yp-tag--solid{background:var(--yelp-action);color:var(--text-on-primary)}
.yp-tag--subtle{background:var(--color-secondary-50);color:var(--yelp-link)}
.yp-tag--outline{border:1px solid var(--border-default);color:var(--text-secondary)}
.yp-cities{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border-subtle)}
.yp-cities a{color:var(--yelp-link);text-decoration:none}
.yp-cities a[aria-current="page"]{color:var(--text-primary);font-weight:700}
.yp-filter{color:var(--yelp-link);font:400 12px/20px var(--font-body);background:transparent;border:0;padding:0 8px;border-right:1px solid var(--border-subtle)}
.yp-filter[aria-pressed="true"]{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.yp-link{color:var(--yelp-link);text-decoration:none}
.yp-link:hover{text-decoration:underline}

Motion

확인한 공개 문서에서 시간·곡선 토큰은 찾지 못했다. 아래는 버튼·선택 반응을 위한 추정값이며 행사 그림은 움직이지 않는다. 불러오는 중에는 회전 표시와 함께 읽을 수 있는 상태 이름을 둔다.

:root {
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(.2,0,0,1);
  --ease-in-out: ease-in-out;
}
@media(prefers-reduced-motion:reduce){.yp-btn{transition:none}.yp-btn[aria-busy="true"]::after{animation:none}}

Anti-patterns

1. 색 단계와 화면 테마를 혼동하지 않는다. Red Dark와 Red Light가 있다고 어두운 화면을 만들어 공식 테마라고 부르지 않는다. 2. 로고를 타이핑하거나 찌그러뜨리지 않는다. 공식 80×40 뷰박스와 두 경로의 비율·색을 유지한다. 3. 일정을 별점으로 대체하지 않는다. 행사 목록에는 언제·어디서·몇 명이 관심을 보이는지가 먼저다. 4. 주동작과 탐색을 같은 빨강으로 채우지 않는다. Create an Event는 붉은 버튼, 도시·분류·행사 이름은 청록 링크다. 5. 스크롤 아래를 빈 기능 소개로 끝내지 않는다. 인기 행사 다음에도 다가오는 일정·공식 행사·새로 올라온 행사가 구체적으로 이어져야 한다.

Sources

출처

Yelp 이름과 로고는 각 권리자의 상표입니다.