# Tasteby Brand & Design Guide

> Tasteby의 브랜드 아이덴티티, 디자인 시스템, 아이콘 정책을 정의하는 가이드 문서.
> 최종 수정: 2026-03-14

---

## 1. 브랜드 개요

### 1.1 서비스 정의
**Tasteby**는 유튜브 맛집 영상에서 레스토랑 정보를 추출하여 지도 위에 큐레이션하는 서비스.
"유튜버의 입맛으로(Taste by)" 찾는 맛집이라는 의미를 담고 있다.

### 1.2 브랜드 키워드
- **미식 큐레이션** — 단순 검색이 아닌, 유튜버가 직접 방문한 맛집을 큐레이팅
- **신뢰** — 실제 영상 기반, 출처가 명확한 정보
- **따뜻함** — 음식과 사람을 연결하는 따뜻한 경험
- **프리미엄 캐주얼** — 고급스럽지만 접근하기 쉬운 톤

### 1.3 브랜드 보이스
| Do | Don't |
|----|-------|
| 친근하고 자연스러운 한국어 | 과도한 존댓말·마케팅 투 |
| 간결하고 핵심적인 정보 전달 | 불필요한 수식어 남발 |
| 음식에 대한 애정이 묻어나는 톤 | 딱딱한 기술 용어 노출 |

---

## 2. 로고

### 2.1 로고 구성
Tasteby 로고는 **워드마크(Wordmark)** 형태로, 글자 "e" 안에 **위치 핀 마커**와 **스마일 곡선**이 결합되어 있다.

- 핀 마커 = 지도 기반 서비스
- 스마일 = 맛있는 음식의 만족감
- 색상: 본문 다크 그레이(`#3C3C3C`) + 핀/스마일 레드(`#E8534A`)

### 2.2 로고 파일
| 파일 | 용도 |
|------|------|
| `logo.png` | 원본 (고해상도) |
| `logo-200h.png` | 히어로/소개 영역 |
| `logo-120h.png` | 헤더/네비게이션 |
| `logo-80h.png` | 파비콘/소형 UI |
| `logo-dark.png` | 다크 배경용 (현재 미사용) |
| `logo-dark-120h.png` | 다크 배경 헤더용 (현재 미사용) |
| `logo-dark-80h.png` | 다크 배경 소형 (현재 미사용) |

### 2.3 로고 사용 규칙
- 최소 여백: 로고 높이의 50% 이상
- 배경: 크림 화이트(`#FFFAF5`) 또는 순백(`#FFFFFF`) 위에 사용
- 변형 금지: 회전, 기울임, 색상 임의 변경 불가
- 현재 라이트 모드 전용 — 다크 모드 미지원

---

## 3. 컬러 시스템

### 3.1 디자인 테마: Saffron (사프란)
따뜻한 금빛 오렌지 톤. 고급스러운 미식 큐레이션 느낌을 전달한다.

### 3.2 브랜드 팔레트
CSS 변수로 `globals.css`의 `@theme inline`에 등록되어 있다.

| 토큰 | Hex | 용도 |
|------|-----|------|
| `brand-50` | `#FFF8F0` | 선택 상태 배경, 카드 hover |
| `brand-100` | `#FFEDD5` | 연한 배경, 뱃지 배경 |
| `brand-200` | `#FFD6A5` | 보조 배경 |
| `brand-300` | `#FFBC72` | 호버 보더, 보조 강조 |
| `brand-400` | `#F5A623` | 스피너, 중간 강조 |
| `brand-500` | `#F59E3F` | Primary 라이트 |
| `brand-600` | `#E8720C` | **Primary** — 아이콘, 버튼, 핵심 강조색 |
| `brand-700` | `#C45A00` | Primary 다크 — 텍스트 강조 |
| `brand-800` | `#9A4500` | 진한 강조 |
| `brand-900` | `#6B3000` | 다크 상태 |
| `brand-950` | `#3D1A00` | 최진한 강조 |

### 3.3 시맨틱 토큰
| 토큰 | Hex | 용도 |
|------|-----|------|
| `background` | `#FFFAF5` | 페이지 배경 (크림 화이트) |
| `foreground` | `#171717` | 본문 텍스트 |
| `surface` | `#FFFFFF` | 카드/패널 배경 |

### 3.4 컬러 사용 원칙
- 인터랙티브/강조 요소에는 반드시 `brand-*` 토큰 사용 (`orange-*` 금지)
- Tailwind 기본 `gray` 팔레트는 변경하지 않음 (다크 모드 호환 문제)
- 라이트 모드 전용 (`color-scheme: only light`)
- 다크 모드 CSS는 코멘트 처리하여 보존 중 (향후 지원 가능성)

---

## 4. 타이포그래피

### 4.1 서체 스택
```
Pretendard Variable → Geist → system-ui → sans-serif
```

| 서체 | 역할 | 로딩 방식 |
|------|------|----------|
| **Pretendard Variable** | 1순위 본문 서체 | 로컬 woff2 (`src/fonts/`) |
| **Geist** | 폴백 서체 | Google Fonts (`next/font/google`) |

### 4.2 선택 이유
- **Pretendard**: 한국어 가독성 최적화, 다양한 웨이트 지원, 깔끔하고 현대적
- **Geist**: 영문/숫자 렌더링 우수, Next.js 기본 서체로 호환성 확보

### 4.3 사용 원칙
- 웨이트: Regular(400), Medium(500), SemiBold(600), Bold(700) 주로 사용
- 한글 최소 본문 크기: 14px (가독성 확보)
- 레이블/캡션: 12px까지 허용
- HTML lang: `ko` (한국어 기본)

---

## 5. 아이콘 시스템

Tasteby는 **3개의 아이콘 레이어**를 사용한다.

### 5.1 Material Symbols Rounded — UI 아이콘
**용도**: 범용 UI (검색, 재생, 네비게이션, 상태 표시 등)

| 항목 | 값 |
|------|-----|
| 폰트 | Material Symbols Rounded (Google Fonts) |
| 기본 설정 | FILL 0, wght 400, GRAD 0, opsz 24 |
| 컴포넌트 | `<Icon name="search" size={20} />` |
| 파일 | `src/components/Icon.tsx` |

**사용 위치**:
- RestaurantList 음식 카테고리 아이콘
- MapView 마커/InfoWindow 카테고리 아이콘
- SearchBar, 네비게이션, 재생 버튼 등 모든 UI 아이콘
- RestaurantDetail 상세 정보 아이콘

**주요 아이콘 매핑** (`getCuisineIcon()`):
- 한식 → `rice_bowl`, 일식 → `set_meal`, 중식 → `skillet`
- 양식 → `dinner_dining`, 아시아 → `restaurant`, 기타 → `flatware`
- 소분류별 세부 매핑 (67개 규칙) — `cuisine-icons.ts` 참조

**스타일 규칙**:
- 아이콘 크기와 `width`/`height`를 동일하게 설정하여 종횡비 고정
- `overflow: hidden`으로 비정형 아이콘(예: sake) 크기 넘침 방지

### 5.2 Phosphor Icons — 장르 카드 픽토그램
**용도**: 홈 탭 장르 필터 카드의 카테고리 아이콘

| 항목 | 값 |
|------|-----|
| 패키지 | `@phosphor-icons/react` (^2.1.10) |
| 라이선스 | MIT |
| 스타일 | Regular (outline) 기본 |
| 파일 | `src/lib/cuisine-icons.ts` → `getPhosphorCuisineIcon()` |

**Phosphor 아이콘 매핑**:

| 카테고리 | 아이콘 | Phosphor 컴포넌트명 |
|----------|--------|---------------------|
| 한식 | 밥그릇 | `BowlFood` |
| 일식 | 물고기 | `FishSimple` |
| 중식 | 불꽃 | `Fire` |
| 양식 | 피자 | `Pizza` |
| 아시아 | 김 나는 그릇 | `BowlSteam` |
| 기타 | 쿠키 | `Cookie` |

**소분류 Phosphor 매핑** (주요 항목):
| 소분류 | 아이콘 | 비고 |
|--------|--------|------|
| 국밥/해장국 | `BowlSteam` | |
| 소고기/한우구이 | `Cow` | |
| 곱창/막창 | `Flame` | |
| 닭/오리구이 | `Bird` | |
| 회/횟집 | `Fish` | |
| 해산물 | `Shrimp` | |
| 주점/포차 | `BeerStein` | |
| 이자카야 | `Martini` | 술잔 모양 |
| 파인다이닝/코스 | `Champagne` | |
| 스시/오마카세 | `Fish` | |
| 스테이크 | `Knife` | |
| 햄버거 | `Hamburger` | |
| 피자 | `Pizza` | |
| 프렌치 | `Champagne` | |
| 마라/훠궈 | `Pepper` | |
| 딤섬/만두 | `Egg` | |
| 비건/샐러드 | `Leaf` | |
| 카페/디저트 | `Coffee` | |
| 베이커리 | `Bread` | |

### 5.3 Custom SVG Food Icons — 커스텀 음식 픽토그램
**용도**: Phosphor에 적합한 아이콘이 없는 특수 음식 카테고리

| 항목 | 값 |
|------|-----|
| 컴포넌트 | `<FoodIcon name="noodle" size={22} />` |
| 파일 | `src/components/FoodIcon.tsx` |
| 접두어 | `food:` (예: `food:noodle`) |
| 렌더링 | SVG inline, `fill` 또는 `stroke` 모드 |

**등록된 커스텀 아이콘**:

| 이름 | 대상 소분류 | viewBox | 렌더링 모드 | 출처 |
|------|------------|---------|------------|------|
| `jjigae` | 찌개/전골/탕 | 0 0 24 24 | stroke | 자체 제작 (뚝배기+김) |
| `tteok` | 분식 | 0 0 24 24 | stroke | 자체 제작 (가래떡) |
| `noodle` | 면, 라멘, 소바/우동, 베트남 | 0 0 363.674 363.674 | fill | 외부 SVG (그릇+면+젓가락) |
| `tempura` | 텐동/튀김 | 0 0 64 64 | fill | Flaticon (텐푸라) |
| `pig` | 삼겹살/돼지구이, 족발/보쌈, 돈카츠 | 0 0 90 90 | fill | 외부 SVG (돼지 전신) |

### 5.4 아이콘 선택 기준

```
1단계: Phosphor Icons에 적합한 아이콘이 있는가?
  → 있으면 Phosphor 사용

2단계: 없으면 커스텀 SVG(FoodIcon)로 제작/수급
  → food: 접두어로 매핑

3단계: UI 범용 아이콘은 Material Symbols
  → 검색, 네비, 상태 표시 등
```

### 5.5 아이콘 제작/추가 가이드

**커스텀 SVG 추가 시:**
1. `FoodIcon.tsx`의 `FOOD_ICONS` Record에 `IconDef` 추가
2. `viewBox`는 원본 SVG에 맞게 설정 (24×24가 아닐 수 있음)
3. `fill: true`면 fill 모드, 생략/false면 stroke 모드
4. `cuisine-icons.ts`의 `PHOSPHOR_SUB_RULES`에서 `food:이름`으로 매핑
5. SVG 경로는 JSX로 변환 (`clip-rule` → `clipRule` 등)

**라이선스 확인:**
- Phosphor Icons: MIT ✅
- Material Symbols: Apache 2.0 ✅
- 외부 SVG: 출처별 라이선스 확인 필수 (Flaticon은 Attribution 필요할 수 있음)

---

## 6. 레이아웃 & 컴포넌트 스타일

### 6.1 홈 탭 구성
```
┌─────────────────────────────────────┐
│  [로고]            [검색] [유튜버▼]  │  ← 헤더
├─────────────────────────────────────┤
│  [한식][일식][중식][양식]... →scroll  │  ← 장르 카드 (가로 스크롤+드래그)
│  [가격▼][지역▼][내위치][N개 결과]    │  ← 필터 바 (flex-wrap)
├─────────────────────────────────────┤
│  지도 / 리스트 / 근처 탭            │  ← 메인 콘텐츠
└─────────────────────────────────────┘
```

### 6.2 장르 카드 스타일
- 칩(chip) 형태, 가로 스크롤 + 마우스 드래그 지원 (`useDragScroll`)
- 아이콘(22px) + 텍스트 라벨
- 선택 시: `bg-brand-50 border-brand-300 text-brand-700`
- 비선택 시: `bg-white border-gray-200 text-gray-600`
- 아이콘 색상: 선택 시 `brand-600`, 비선택 시 `gray-400`

### 6.3 카드/서피스
- 배경: `surface` (#FFFFFF)
- 보더: `border-gray-200` (1px)
- 라운딩: `rounded-lg` (8px) 기본
- 그림자: 최소한 사용 (flat 디자인 지향)

### 6.4 버튼/인터랙티브
- Primary: `bg-brand-600 text-white hover:bg-brand-700`
- Secondary: `bg-brand-50 text-brand-700 border-brand-300`
- 포커스 링: `ring-brand-400`

---

## 7. 지도 마커 스타일

### 7.1 마커 디자인
텍스트 라벨 마커 (핀이 아닌 말풍선 형태):
- 배경: 흰색 (폐업 시 회색)
- 보더: 카테고리별 색상
- 텍스트: 레스토랑 이름 + 카테고리 아이콘 (Material Symbols)
- 하단 꼬리(arrow): 삼각형
- 선택 시: 파란색(`#1d4ed8`) 보더+꼬리

### 7.2 마커 카테고리 색상
| 카테고리 | 보더 | 배경 | 화살표 |
|----------|------|------|--------|
| 한식 | `#E8720C` | `#FFF8F0` | `#E8720C` |
| 일식 | `#D94F5A` | `#FFF5F5` | `#D94F5A` |
| 기타 | 기본 그레이 | 기본 화이트 | 기본 그레이 |

### 7.3 클러스터링
- 라이브러리: supercluster
- 클러스터 마커: 원형 + 개수 텍스트

---

## 8. 향후 방향

### 8.1 다크 모드
- 현재 라이트 모드 전용
- 다크 모드 CSS 토큰은 정의되어 있으나 비활성 상태
- 다크 배경 로고 에셋 준비 완료 (`logo-dark-*.png`)
- 활성화 시 Tailwind 기본 gray 팔레트 유지 (커스텀 gray 금지)

### 8.2 아이콘 정리
- `@tabler/icons-react` 의존성 제거 가능 (현재 미사용)
- 커스텀 SVG 아이콘 추가 확장 가능 (소고기/해산물 등)
- Flaticon 에셋 사용 시 Attribution 라이선스 확인 필요

### 8.3 디자인 토큰 확장
- 현재: 색상 + 폰트 토큰만 정의
- 향후: spacing, radius, shadow, motion 토큰 추가 가능
- Tailwind v4 `@theme` 기반으로 확장

---

## 부록: 파일 구조

```
frontend/
├── docs/
│   ├── brand-guide.md          ← 이 문서
│   └── design-concepts.md      ← 초기 컨셉 후보안
├── public/
│   ├── logo.png                ← 로고 에셋들
│   ├── logo-{80h,120h,200h}.png
│   ├── logo-dark.png
│   └── logo-dark-{80h,120h}.png
├── src/
│   ├── app/
│   │   ├── globals.css         ← 디자인 토큰 (@theme inline)
│   │   ├── layout.tsx          ← 폰트, 메타 설정
│   │   └── page.tsx            ← 홈 탭 (장르 카드 렌더링)
│   ├── components/
│   │   ├── Icon.tsx            ← Material Symbols 래퍼
│   │   └── FoodIcon.tsx        ← 커스텀 SVG 아이콘
│   ├── fonts/
│   │   └── PretendardVariable.woff2
│   └── lib/
│       └── cuisine-icons.ts    ← 아이콘 매핑 (Material + Phosphor + Food)
```