tasteby/frontend/docs/brand-guide.md

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)