규격
design 리포 logo/readme.md · icon/readme.md 의 내용입니다.
- 정본
- github.com/uyoolabs/design 의 logo/ · icon/
- 배포
- https://cdn.uyoolabs.com/brand/<product>/ — S3 uyoolabs-cdn, CloudFront
- 영문 서체
- Museo Sans Rounded 900
- 한글 서체
- 배달의민족 도현 OTF
- 글자 크기
- 744 pt (원본 작업 기준)
이름 규칙
{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
- 도구
- redketchup.io/icon-converter
- 모서리
- Rounded Corners 50%
- 배경
- Transparent
- 포맷
- BMP (32-Bit). 512 는 PNG 로 저장되어 구형 앱에서 문제가 될 수 있다
- .ico 크기
- 16 · 24 · 32 · 48 · 64 · 96 · 128 · 256 · 512 px
제품에서 쓰기
// 제품 코드에서는 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}
/># design 리포의 logo/·icon/ 을 S3 에 올린다 (uyooglass 리포 루트)
bash scripts/cdn-brand-sync.sh ../design
# → s3://uyoolabs-cdn/brand/<product>/… , cache-control: public, max-age=86400