가이드라인
브랜드 에셋의 원본 위치, 배포 경로, 로고 서체입니다. brand/README.md 의 규격을 옮겼습니다.
- 원본
- 이 저장소의 brand/ (PSD · AI 작업 원본은 github.com/uyoolabs/design 에 보관)
- 배포
- https://cdn.uyoolabs.com/brand/<product>/ (S3 uyoolabs-cdn, CloudFront)
- 로고 영문 서체
- Museo Sans Rounded 900
- 로고 한글 서체
- 배달의민족 도현 OTF
- 로고 글자 크기
- 744 pt (원본 작업 기준)
위 두 서체는 로고 이미지 제작에만 쓰며 UI 텍스트에는 쓰지 않습니다. 제품에서 쓰는 폰트(Noto Sans 가족 · 마루 부리 · 나눔명조 · mono)는 타이포그래피에 있습니다.
파일 이름 규칙
파일 이름에 제품 · 모드 · 레이아웃 · 버전 · 언어가 들어갑니다.
{Product}_Logo-{Mode}_{Layout}-{Version}-{Lang}.png
{Product}_Icon-{Mode}_{Version}.png 투명 배경 마크
{Product}_Icon-{Mode}_BL-{Version}.png|.ico 둥근 바탕 512
{Product}-Notion-Cover-{Version}-kr.png
예) UyooPack_Logo-DM_LS-v1.0-kr.png
→ 우유팩 · 다크 모드 · 가로 · v1.0 · 한글| Mode | 의미 |
|---|---|
| LM | 라이트 |
| DM | 다크 |
| NM | 중립 |
| Layout | 의미 | 폭 |
|---|---|---|
| SQ | 정사각 | 1,000 px |
| LS | 가로 | 1,500 px |
| PT | 세로 | 1,000 px |
| Icon | 파비콘 · 터치 아이콘 | 500 px |
로고 색
로고에 쓰인 색입니다. UI 토큰(--primary 등)과는 별개입니다.
Dark
#3e4758
워드마크 (라이트 배경)
Light
#f0f2f5
워드마크 (다크 배경)
Dark Border
#11487e
마크 외곽선 (라이트 모드)
Light Border
#248ce1
마크 외곽선 (다크 모드)
Dark Background
#5cb2e1
마크 면 (라이트 모드)
Light Background
#9ad6f1
마크 면 (다크 모드)
아이콘 제작
icon/readme.md 의 .ico 변환 기준입니다.
- 도구
- redketchup.io/icon-converter
- 모서리
- Rounded Corners 50%
- 배경
- Transparent
- 포맷
- BMP (32-Bit). 512px 은 PNG 로 저장되므로 구형 앱에서 문제가 될 수 있습니다.
- .ico 크기
- 16 · 24 · 32 · 48 · 64 · 96 · 128 · 256 · 512 px
제품에서 사용하기
제품 코드는 CDN URL 을 참조합니다. 에셋을 갱신할 때는 동기화 스크립트로 S3 에 업로드합니다.
// 제품 코드에서는 CDN URL 을 직접 참조한다. 저장소에 복사하지 않는다.
// next.config.ts: images.remotePatterns 에 { protocol: "https", hostname: "cdn.uyoolabs.com" }
const CDN = "https://cdn.uyoolabs.com/brand";
<BrandLogo
light={`${CDN}/uyoopack/UyooPack_Logo-LM_LS-v1.0-kr.png`}
dark={`${CDN}/uyoopack/UyooPack_Logo-DM_LS-v1.0-kr.png`}
alt="우유팩"
width={150}
height={42}
/># brand/ 를 S3 에 업로드한다(uyooglass 저장소 루트에서 실행)
bash scripts/cdn-brand-sync.sh
# → s3://uyoolabs-cdn/brand/<product>/… , cache-control: public, max-age=86400