94be5a81e6
- Icon.tsx: 크기 고정 + flex center로 정렬 일관성 - cuisine-icons.ts: Tabler → Phosphor 매핑(BowlFood/FishSimple/Pizza 등) - FoodIcon.tsx 신규: 한식 specific 자체 SVG (찌개/전골/탕) - frontend/docs/brand-guide.md 신규: 브랜드 아이덴티티 + 디자인 시스템 정책 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
342 lines
13 KiB
Markdown
342 lines
13 KiB
Markdown
# 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)
|
||
```
|