브랜드 로고

형태 5종입니다. 아래에서 실물을 보고, 파일 이름을 눌러 경로를 복사하세요.

어느 것을 쓸까

형태	파일	언제
Horizontal (기본)	`logo-h.svg`	문서 헤더 · 명함 · 웹 상단바 — 가로 공간이 있으면 이것
Horizontal + 태그라인	`logo-h-tagline.svg`	회사 소개 · 표지 · 대외 문서 — 무엇을 하는 회사인지 함께 말할 때
Mark (심볼)	`logo-mark.svg`	앱 아이콘 · 파비콘 · SNS 프로필 — 정사각이고 작은 자리
Vertical (세로형)	`logo-v.svg`	로그인 · 스플래시 · 표지 — 세로 중앙 정렬
Wordmark (글자만)	`logo.svg`	심볼이 이미 옆에 있거나 아주 납작한 자리

각 형태에 -light 버전(흰색) 이 짝으로 있습니다. -light = 흰색 로고 = 어두운 배경용입니다.

logo-h-tagline.svg의 copy는 복사본이 아니라 “카피(문안)” 입니다 — 태그라인 Professional Dermo Cosmetics가 붙은 버전입니다.

규칙은 세 개뿐입니다

1. 최소 크기

화면: 가로형 높이 20px 미만 금지 (심볼 단독은 16px)

인쇄: 가로형 폭 12mm 미만 금지

2. 최소 여백: 심볼 높이의 50% — 다른 요소 침범 금지

3. 무결성: 색 변경 · 비율 왜곡 · 그림자 · 효과 금지. 먹색/흰색 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>

밝은 배경용에만 alt를 넣고 어두운 배경용은 alt="" + aria-hidden입니다. 같은 로고를 두 번 읽지 않게 하기 위해서입니다.

이 개발자센터 상단의 로고가 바로 이 방식입니다.

권장 시작값 (규칙 아님)

위치	형태	높이
앱 상단바 · 사이드바	h 또는 mark	28~32px
문서 레터헤드	h	30~34px
로그인 · 스플래시	v	52~64px
SNS 프로필 · 앱 아이콘	mark	정사각

세로형(v)은 심볼+글자 2단이라 같은 높이여도 심볼이 절반으로 보입니다. 가로형보다 1.8배 이상 크게 잡아야 균형이 맞습니다.

파일 형식


SVG	기본. 어느 크기에서도 선명하고 용량이 작습니다
PNG	SVG를 못 쓰는 환경(일부 메일 클라이언트·오래된 오피스)에서만
`favicon.ico`	브라우저 탭

앱 아이콘으로 쓸 때는 앱 구별색을 참조하세요.

UI Icon Library Pictogram Library