14. 로고 & 브랜드 자산
14-1. 자산 폴더
brand/logo/를 프로젝트 정적 경로에 둡니다(Next.js면 public/ 아래 → /brand/logo/...).
명명 규칙: logo-{형태}[-light].{확장자} — -light = 흰색 로고 = 어두운 배경용 / 무접미사 = 먹색 = 밝은 배경용
| 형태 | 밝은 배경 | 어두운 배경 | 언제 |
|---|---|---|---|
| h (가로 · 기본) | logo-h.svg | logo-h-light.svg | 문서 헤더·명함·웹 상단바 |
| h + 태그라인 | logo-h-tagline.svg | logo-h-light-tagline.svg | 회사 소개·표지·대외 문서 |
| mark (심볼) | logo-mark.svg | logo-mark-light.svg | 앱 아이콘·파비콘·SNS 프로필 |
| v (세로) | logo-v.svg | logo-v-light.svg | 로그인·스플래시·표지 |
| wordmark (글자) | logo.svg | logo-light.svg | 심볼이 이미 옆에 있는 자리 |
| 파비콘 | favicon.ico | — | 브라우저 탭 |
logo-h-tagline.svg는 태그라인 Professional Dermo Cosmetics가 붙은 버전입니다.
전 파일 하이픈 통일. SVG가 기본, PNG는 SVG 미지원 환경 폴백용.
14-2. 라이트/다크 자동 교체
<span class="jt-logo">
<img src="/brand/logo/logo-h.svg" alt="Janytree" class="on-light">
<img src="/brand/logo/logo-h-light.svg" alt="" aria-hidden="true" class="on-dark">
</span>14-3. 로고 사용 규칙 〔v5.0 완화〕
v4.0은 위치별 고정 높이표(상단바 28~32px 등)를 규칙으로 뒀습니다. 그 결과 히어로·표지의 대형 사용과 자유 배치가 막혔습니다. v5.0에서 그 표는 권장 시작값으로 격하하고, 규칙으로 남는 것은 3개뿐입니다.
1. 최소 크기
- 화면: 가로형(h) 높이 20px 미만 금지 (mark 단독은 16px)
- 인쇄: 가로형 폭 12mm 미만 금지
2. 최소 여백: 심볼 높이의 50% — 다른 요소 침범 금지
3. 무결성: 색 변경·비율 왜곡·그림자·효과 금지. 먹색/흰색 2종만
위치·크기는 컨텍스트 소관입니다. 히어로·랜딩·표지의 대형 사용, 자유 배치 모두 허용됩니다.
권장 시작값 (규칙 아님)
| 위치 | 형태 | 높이 |
|---|---|---|
| 앱 상단바·사이더 | h 또는 mark | 28~32px |
| 문서 레터헤드 | h | 30~34px |
| 로그인·스플래시 | v(세로형) | 52~64px |
| SNS 프로필 | mark | 정사각 |
세로형(v)은 심볼+글자 2단이라 같은 높이여도 심볼이 절반으로 보입니다. 가로형보다 1.8배 이상 크게 잡아야 균형이 맞습니다. 복잡한 배경 위에는 흰색 또는 #1F2328 단색 배지를 깔고 배치합니다.
실물과 최소 크기·여백·금지 사례는 디자인 킷 · 브랜드 로고에서 눈으로 확인하세요.