--- title: "달록 브랜드 설명서 (v0.1 초안)" notion_id: "36d2296208688142abbac0f566226d06" notion_url: "https://app.notion.com/p/36d2296208688142abbac0f566226d06" category: "brand" parent: "달록 PaceLog" updated: "2026-05-27" priority: "High" purpose: "달록 브랜드 스토리·컬러 토큰·BI 아이콘 규정·자산 운영 가이드 진본 설명서 (v0.1 초안)" read_when: ["브랜딩","UI작업"] --- > 🎨 **상태:** v0.1 초안 · 2026-05-27 작성 (Claude Opus 4.7) > **확정 예정:** v0.9 베타 출시 전 최종 검토 > **출처:** `dallog_git/src/index.css`, `dallog_git/public/icons/*` 산출물에서 직접 추출 — 별도 디자인 시스템 문서 없음 --- ## 1. 브랜드 스토리 (초안) **달록(Dallog)** 은 "달리는 기록"의 줄임말이자, 매일 자신과 마주하는 **페이스로그(PaceLog)** 입니다. 달록은 러닝·근력·체성분이라는 세 가지 자기 데이터를 한 곳에 시계열로 쌓고, AI 코치가 매주 한 줄의 인사이트로 응답하는 셀프 코칭 도구입니다. 다이어트 앱처럼 "줄여야 할 숫자"가 아니라, 어제의 나보다 오늘의 페이스를 가지런히 정렬하는 도구를 지향합니다. **형광 라임**은 달록의 첫인상입니다. 출발 신호의 색이자 야간 러닝 안전 조끼의 색입니다 — "멈춰 있지 않다"는 신호입니다. 라임의 짝인 **진한 티일**은 코치의 톤입니다. 라이트 모드에서 라임이 가진 자극을 가라앉히고, 숫자와 차트가 또렷하게 읽히도록 시선을 정돈합니다. 러너의 동세를 둘러싼 네 개의 호(arc)는 동·서·남·북 4분원의 트레이닝 트랙이자 심장 박동의 사분면입니다 — 어디로 달려도 자기 페이스로 돌아온다는 약속입니다. --- ## 2. 브랜드 컬러 ### 2-1. 메인 — 라임 (Lime) ![메인 브랜드 컬러 — 라임 #c8f135](https://dallog.pages.dev/brand/swatch/swatch-c8f135.svg) > 🟢 > **대표:** `#c8f135` (`--accent`) · **보조:** `#a8d420` (`--accent2`) > **위 텍스트:** `#0a0a0a` 검정 (`--btn-primary-fg`) — 흰 글씨 금지 > **의미:** 출발 신호의 형광 라임 — 시작·움직임·역동·야간 가시성 - ![보조 라임 #a8d420](https://dallog.pages.dev/brand/swatch/swatch-a8d420.svg) **`#a8d420`** — `--accent2` · hover · press · 보조 액센트 - ![라임 위 검정 텍스트](https://dallog.pages.dev/brand/swatch/swatch-0a0a0a.svg) **`#0a0a0a`** — `--btn-primary-fg` · 라임 배경 위 텍스트 (반드시 검정 계열) | 토큰 | 컬러코드 | 적용 위치 | | --- | --- | --- | | `--accent` | **#c8f135** | 다크 모드 메인 액센트, CTA 버튼, 사이드바 활성, 로고/심볼 | | `--accent2` | #a8d420 | hover · press · 보조 액센트 | | `--brief-h3` | #c8f135 | 코치 브리프 서브 헤더 (다크) | | `--sidebar-text-active` | #c8f135 | 사이드바 활성 메뉴 텍스트 (다크) | | `--btn-primary-fg` | #0a0a0a | 라임 배경 위 텍스트 (반드시 검정) | ### 2-2. 대비색 (라이트 모드 전용) — 진한 티일 (Teal) **(잠정)** ![라이트 모드 대비색 — 티일 #0a8e9e (잠정)](https://dallog.pages.dev/brand/swatch/swatch-0a8e9e.svg) > 🔵 > **(잠정) 대표:** `#0a8e9e` (`--accent`, 라이트 한정) · **보조:** `#098190` (`--accent2`) > **위 텍스트:** `#ffffff` 흰색 (`--btn-primary-fg`) — 검정 글씨 금지 > **전환 사유:** 라이트 모드에서 라임이 흰 배경 위에서 자극·가독성 문제 → 진한 티일로 잠정 치환 > **확정 일정:** v0.9 베타 출시 전 사용자 피드백·디자인 검토 후 결정 — "(잠정)" 라벨 유지 - ![보조 티일 #098190](https://dallog.pages.dev/brand/swatch/swatch-098190.svg) **`#098190`** — `--accent2` (잠정) · hover · press · 보조 액센트 - ![티일 위 흰 텍스트](https://dallog.pages.dev/brand/swatch/swatch-ffffff.svg) **`#ffffff`** — `--btn-primary-fg` · 티일 배경 위 텍스트 (반드시 흰색) | 토큰 | 컬러코드 | 적용 위치 | | --- | --- | --- | | `--accent` (라이트) | **#0a8e9e** *(잠정)* | 라이트 메인 액센트, CTA, 사이드바 활성 | | `--accent2` (라이트) | #098190 *(잠정)* | hover · press · 보조 액센트 | | `--brief-h2` (라이트) | #0a8e9e | 코치 브리프 섹션 헤더 | | `--sidebar-text-active` (라이트) | #0a8e9e | 사이드바 활성 메뉴 텍스트 | > 💡 **라이트 모드 로고 자동 변환** — CSS `--logo-filter`가 다크용 라임 SVG를 진한 티일로 hue-shift 처리: > `brightness(0) saturate(100%) invert(40%) sepia(85%) saturate(1500%) hue-rotate(155deg) brightness(85%)` ### 2-3. 차트 팔레트 **다크 모드** - ![chart-1 다크 라임](https://dallog.pages.dev/brand/swatch/swatch-c8f135.svg) **chart-1** · `#c8f135` 라임 · 체중 · 마일리지 · 케이던스 - ![chart-2 다크 블루](https://dallog.pages.dev/brand/swatch/swatch-378add.svg) **chart-2** · `#378ADD` 블루 · 골격근 · 심박 · 운동량 - ![chart-3 다크 오렌지](https://dallog.pages.dev/brand/swatch/swatch-ef9f27.svg) **chart-3** · `#EF9F27` 오렌지 · 체지방 · 페이스 **라이트 모드** *(잠정)* - ![chart-1 라이트 티일](https://dallog.pages.dev/brand/swatch/swatch-0a8e9e.svg) **chart-1** · `#0a8e9e` 티일 · 체중 · 마일리지 · 케이던스 - ![chart-2 라이트 진블루](https://dallog.pages.dev/brand/swatch/swatch-2563eb.svg) **chart-2** · `#2563eb` 진한 블루 · 골격근 · 심박 · 운동량 - ![chart-3 라이트 진코랄](https://dallog.pages.dev/brand/swatch/swatch-b54a28.svg) **chart-3** · `#b54a28` 진한 코랄 · 체지방 · 페이스 ### 2-4. 보조 의미 컬러 (다크 기준) - ![블루 #378ADD](https://dallog.pages.dev/brand/swatch/swatch-378add.svg) **`#378ADD`** — `--blue` · 정보 · 심박 - ![코랄 #D85A30](https://dallog.pages.dev/brand/swatch/swatch-d85a30.svg) **`#D85A30`** — `--coral` · 경고 · 체지방 증가 - ![티일 그린 #1D9E75](https://dallog.pages.dev/brand/swatch/swatch-1d9e75.svg) **`#1D9E75`** — `--teal` · 긍정 · 근력 증가 - ![앰버 #EF9F27](https://dallog.pages.dev/brand/swatch/swatch-ef9f27.svg) **`#EF9F27`** — `--amber` · 주의 · 페이스 저하 - ![브리프 시안 #5fd9e6](https://dallog.pages.dev/brand/swatch/swatch-5fd9e6.svg) **`#5fd9e6`** — `--brief-h2` (다크) · 코치 브리프 섹션 헤더 - ![브리프 라임 진톤 #6b8400](https://dallog.pages.dev/brand/swatch/swatch-6b8400.svg) **`#6b8400`** — `--brief-h3` (라이트) · 라이트 모드 서브 헤더 ### 2-5. 배경·텍스트 토큰 **다크 모드 배경** - ![bg 다크](https://dallog.pages.dev/brand/swatch/swatch-0a0a0a.svg) `--bg` · `#0a0a0a` - ![bg2 다크](https://dallog.pages.dev/brand/swatch/swatch-111111.svg) `--bg2` · `#111111` - ![bg3 다크](https://dallog.pages.dev/brand/swatch/swatch-1a1a1a.svg) `--bg3` · `#1a1a1a` - ![border 다크](https://dallog.pages.dev/brand/swatch/swatch-2a2a2a.svg) `--border` · `#2a2a2a` **라이트 모드 배경** - ![bg 라이트](https://dallog.pages.dev/brand/swatch/swatch-fafafa.svg) `--bg` · `#fafafa` - ![bg2 라이트](https://dallog.pages.dev/brand/swatch/swatch-ffffff.svg) `--bg2` · `#ffffff` - ![bg3 라이트](https://dallog.pages.dev/brand/swatch/swatch-f1f1f1.svg) `--bg3` · `#f1f1f1` - ![border 라이트](https://dallog.pages.dev/brand/swatch/swatch-e5e5e5.svg) `--border` · `#e5e5e5` | 역할 | 다크 | 라이트 | | --- | --- | --- | | `--text` 본문 | #f0f0f0 | #181818 | | `--text2` 보조 | #b8b8b8 | #4a4a4a | | `--text3` 라벨·캡션 | #8f8f8f | #6f6f6f | | `--brief-text` 본문 | #d8d8d8 | #1a1a1a | | `--brief-muted` 캡션 | #a0a0a0 | #5a5a5a | --- ## 3. BI 아이콘 규정 달록 BI는 **러너 심볼(Running Figure) + 외곽 4분원 호(EGC 모티프)** 의 결합입니다. ### 3-1. 공식 변형 4종 - ![Black on Lime — 메인 BI](https://dallog.pages.dev/icons/dallog_runner_black_on_lime.svg) **Black on Lime** *(메인 BI)* — 라임 배경 + 검정 러너. 외부 공유 · 앱 아이콘 · 로딩 스플래시 · OG 이미지. 파일: `public/icons/dallog_runner_black_on_lime.svg` - ![Lime on Transparent](https://dallog.pages.dev/icons/dallog_runner_lime_transparent.svg) **Lime on Transparent** — 다크 배경 위 단색 라임 러너. 다크 모드 로고 · 다크 OG 배경. 파일: `public/icons/dallog_runner_lime_transparent.svg` - ![Master Path — currentColor 기반](https://dallog.pages.dev/dallog_runner_symbol_flipped.svg) **Master Path** *(currentColor)* — 메뉴 · Favicon · 사이드바 로고 — 상위 CSS color 그대로 상속하여 다크/라이트 자동 대응. 파일: `public/dallog_runner_symbol_flipped.svg` - ![Black on Hot Pink — 캠페인 변형](https://dallog.pages.dev/icons/dallog_runner_black_on_hotpink.svg) **Black on Hot Pink** *(캠페인)* — 1회성 이벤트 변형 — 정식 BI 아님. 캠페인 종료 시 회수. 파일: `public/icons/dallog_runner_black_on_hotpink.svg` ### 3-2. 심볼 구성 > 🏃 > - **중앙 path** — 달리는 러너의 동세. 한 다리는 지면, 다른 다리는 공중. 단일 패스로 단순화하여 12px까지 형태 보존. > - **외곽 호 4개** — 동·서·남·북 4분원의 일부. "트레이닝 트랙" + "심장 박동 사분면" 메타포. `opacity 0.45`로 보조 시각 요소. > - **컬러 시스템** — Master Path는 `fill="currentColor"` 기반. 상위 텍스트 색을 그대로 상속하여 다크/라이트 자동 대응. > - **viewBox** — `0 0 100 100` 정사각 고정. 비율 변경 금지. ### 3-3. 사용 가이드 > ✅ **권장** > - 최소 크기 32×32px (모바일 탭바) > - 안전 영역(Clear Space) ≥ 심볼 외곽의 12% padding > - 다크 배경 → 라임 `#c8f135` 단색 > - 라이트 배경 → 티일 `#0a8e9e` 단색 *(잠정)* > - 라임/티일 배경 위 → 검정/흰색 단색 러너 > 🚫 **금지** > - 회전 · 왜곡 · 전단 변형 > - 라임/티일 외 컬러로 fill (캠페인 핫핑크는 예외) > - 외곽 호 4개 임의 제거 > - viewBox `0 0 100 100` 비율 변경 > - 32px 미만 크기 사용 > - 러너 단독 사용 시 외곽 호와의 비율 무시 ### 3-4. 마스터 SVG 소스 보기
Master Path SVG 코드 (currentColor 기반) ```xml ```
> ℹ️ 비트맵 추적 변형 SVG(black_on_lime, lime_transparent, black_on_hotpink)는 path 데이터가 매우 커서 본 문서에 인라인하지 않습니다. 위 §3-1 카드에서 라이브 미리보기로 확인하시고, 원본은 표시된 파일 경로에서 가져오세요. --- ## 4. 로고 타이포 (참고) - **3단 구성:** 러너 심볼 + `DALLOG` 워드마크 + `PACELOG` 서브 워드마크 - **현행 폰트:** 시스템 기본 `-apple-system, BlinkMacSystemFont, 'Pretendard', 'Noto Sans KR'` *(정식 폰트 미확정)* - 향후 정식 폰트 확정 시 본 섹션 갱신 --- ## 5. 변경 이력 | 일자 | 변경 | | --- | --- | | 2026-05-27 | **브랜드 설명서 v0.1 시각화 보강** — BI 아이콘 라이브 임베드 + 컬러 칩 이미지 + columns 카드 형식 | | 2026-05-27 | 브랜드 설명서 v0.1 최초 초안 — 컬러 · BI 규정 · 스토리 통합 | | 2026-05-27 | 라이트 모드 액센트 라임 → 티일 `#0a8e9e` 잠정 전환 (가독성 사유) | | 2026-05-27 | 라이트 한정 차트 팔레트 분리 (chart-1/2/3 별도 정의) | | 2026-05-22 | 메뉴 SVG 9종 달록 러너 심볼 기반으로 통일 (체크리스트 F-6b) | | 2026-05-20 | 로고 3단 배치 정착 (dallog_runner_symbol_flipped + DALLOG + PACELOG) | --- ## 6. 미확정 항목 (Open Questions) - [ ] 라이트 모드 대비색 `#0a8e9e` 정식 채택 여부 — v0.9 출시 전 확정 - [ ] 정식 워드마크 폰트 선정 - [ ] OG 이미지 · 앱 스토어 아이콘 1024px 마스터 제작 - [ ] 핫핑크 변형의 정식 캠페인 가이드라인 (현재 1회성) - [ ] 모노크롬 단색 변형 (인쇄 · 팩스용 흑백 1색) 제작 필요 여부 --- ## 7. 자산 운영 가이드 (Asset Operation Guide) > 🛠️ 본 섹션은 본 브랜드 설명서를 유지·확장하기 위한 **영속 운영 절차**입니다. 미래의 작업자 또는 Claude Code 컨텍스트가 본 문서를 fetch했을 때 동일한 흐름을 재현할 수 있도록 보존됩니다. 핸드오프 페이지의 일자별 메모와 충돌하는 경우 **본 페이지가 진본(Single Source of Truth)** 입니다. ### 7-1. 호스팅 구조 - **브랜드 컬러 스와치:** `dallog.pages.dev/brand/swatch/swatch-{hex}.svg` (hex는 소문자, # 없이) - **BI 아이콘 4종:** `dallog.pages.dev/icons/dallog_runner_{variant}.svg` (variant: black_on_lime, lime_transparent, black_on_hotpink) - **마스터 패스:** `dallog.pages.dev/dallog_runner_symbol_flipped.svg` (currentColor 기반) - **호스팅:** Cloudflare Pages — main 브랜치 push 시 자동 배포 (보통 수십 초~수 분) - **외부 의존성:** 없음 — [placehold.co](http://placehold.co) 의존은 2026-05-27 제거 완료 ### 7-2. 스와치 신규 추가 절차 1. `scripts/gen_brand_swatches.sh` 파일을 연다 2. `colors=(...)` 배열에 hex(소문자, # 없이) 1개 추가 3. bash 셸에서 `bash scripts/gen_brand_swatches.sh` 실행 → `public/brand/swatch/swatch-{hex}.svg` 자동 생성 4. git에 add → 단일 의미 단위로 commit → push (main 브랜치) 5. 배포 후 `dallog.pages.dev/brand/swatch/swatch-{hex}.svg` 접근하여 200 OK 확인 6. 본 페이지에 임베드 + §5 변경 이력에 1줄 추가 ### 7-3. 스와치 디자인 일괄 변경 - viewBox 또는 aspect ratio 변경 시: 스크립트의 SVG 헤더 부분만 수정 → 재실행 → 20개 일괄 갱신 - 컬러는 그대로, 모양·비율만 바뀜 - 현행 규격: 와이드 띠 7:1 (`viewBox="0 0 100 14"`) ### 7-4. BI 아이콘 신규 변형 추가 - 파일 위치 규칙: `public/icons/dallog_runner_{variant}.svg` - 노션 임베드 URL: `dallog.pages.dev/icons/dallog_runner_{variant}.svg` - 정식 변형 4종 외 추가 시 §3-1 표에 행 추가 + 시각 카드 columns 추가 - 캠페인성 1회용 변형은 §3-3 금지 사항을 따르고 종료 시 회수 ### 7-5. 컬러 토큰 출처 - **원천:** `src/index.css` 의 다크 기본 블록 + 라이트 한정 오버라이드 블록 - 토큰 키 변경·추가 시 본 설명서 §2 표·칩 동기화 **필수** - 라임 `#c8f135` 및 티일 `#0a8e9e` *(잠정)* 정식 채택은 v0.9 베타 출시 전 확정 예정 ### 7-6. 노션 페이지 좌표 - **본 브랜드 설명서:** `notion.so/36d2296208688142abbac0f566226d06` - **부모 페이지:** 📁 달록 PaceLog (ID `36422962-0868-8132-8e63-c185344b77d3`) ### 7-7. 미래 작업자 · Claude Code 컨텍스트 안내 > 📌 > - **검색 진입점:** Notion search에서 "달록 브랜드", "브랜드 컬러", "BI 아이콘", "스와치" 키워드로 본 페이지 발견 가능 > - **진본 우선:** 핸드오프에 단편적으로 적힌 컬러·BI 정보가 본 설명서와 충돌하면 본 설명서가 우선 > - **변경 의무:** 새 브랜드 자산을 추가하거나 토큰을 변경한 경우 §5 변경 이력에 일자 + 1줄 요약 추가 > - **자체 호스팅 원칙:** 외부 이미지 호스팅 서비스 의존 금지 — 새 컬러도 §7-2 절차로 자체 호스팅 > - **재생성 가능성:** 스와치 SVG 20종 전부 손실되어도 `scripts/gen_brand_swatches.sh` 단일 실행으로 복원 가능