앱 아이콘
Tinyrack 형태를 바탕으로 만든 Tinest, Dotweave, Proxer, TinyAuth 앱 아이콘을 SVG와 PNG 형식으로 제공해요.
제공된 파일을 완성된 원본으로 사용하세요. 먼저 형식과 표시 크기를 정한 다음 제품 마크를 선택하세요. 미리보기에서 형태를 다시 만들거나 Tinyrack 워드마크와 결합하지 마세요.
형식과 픽셀 크기 선택
대상에서 지원한다면 SVG를 선택하세요. PNG가 필요하면 실제 표시 크기와 같은 파일을 사용하고 작은 이미지를 확대하지 마세요. 긴 표는 좁은 화면에서 페이지가 아닌 표 영역 안에서 가로로 스크롤돼요.
| 파일 | 용도 | 지침 |
|---|---|---|
| SVG | 웹 화면과 크기가 바뀌는 자산 | 기본 선택이에요. 64×64 벡터 격자를 사용해요. |
| 16px PNG | 브라우저 파비콘 | SVG 파비콘을 쓸 수 없을 때 선택하세요. |
| 32px PNG | 고밀도 파비콘과 작은 목록 | 32px 또는 2배율 화면의 16px로 표시하세요. |
| 48px PNG | 작은 목록과 바로 가기 | 원본 48px 크기로 사용하세요. |
| 128px PNG | 서비스 아바타와 큰 목록 | 래스터 이미지가 필요한 표면에 사용하세요. |
| 512px PNG | 큰 웹 아트워크 | 설치형 앱에는 아래의 런처 전용 파일을 사용하세요. |
런처 원본 선택
설치형 앱 아이콘에는 파비콘이나 화면용 아트워크보다 넓은 여백이 필요해요. 완성형 아이콘에는 launcher-icon 파일을 사용하세요. 64×64 캔버스 안에서 타일 전체를 유지하고 사방에 8px 투명 여백을 포함해요. Android adaptive icon에는 같은 제품의 adaptive-foreground를 #0a0a0a 배경 위에 사용하세요. 전경 파일은 타일을 제외하고, Android의 108×108 레이어 격자 가운데 54×54 영역 안에 심볼을 배치해요.
파비콘, 서비스 아바타, 웹 화면에는 기존 app-icon 파일을 계속 사용하세요. 런처 아트워크의 알파 채널을 허용하지 않는 플랫폼에서는 원본을 직접 잘라내거나 합치지 말고 플랫폼 아이콘 생성기가 요구하는 불투명 배경을 적용하세요.
화면용 아트워크
런처용 아트워크
제품 마크
실제 크기 미리보기
표시된 PNG 네 개를 원래 크기인 16px, 32px, 48px, 128px로 확인하세요. 다운로드할 수 있는 512px 파일은 실제 크기로 미리 보여 주지 않아요.
Tinest
16
32
48
128Dotweave
16
32
48
128Proxer
16
32
48
128TinyAuth
16
32
48
128주변 표면
검은 타일은 원본의 일부이므로 같은 자산을 밝은 화면과 어두운 화면 모두에서 사용할 수 있어요. 둥근 타일 가장자리가 보이도록 충분한 주변 여백을 유지하세요.
공통 구성
Tinyrack과 네 제품 마크는 같은 행 경계를 사용해요. 제품 아이콘의 64×64 격자에서 행은 14.666667, 28, 41.333333에서 시작하고 높이는 8이며, 좌우 경계는 14.666667과 49.333333이에요.
사용 규칙
다운로드
각 제품은 기준 SVG 하나와 생성된 PNG 크기 다섯 개를 제공해요. 모든 래스터 다운로드의 원본은 SVG예요.
전체 아이콘 세트를 @tinyrack/ui에서도 제공해요. SVG 원본이나 생성된 PNG를 사용하려면 중첩된 brand/apps 하위 경로에서 불러오세요.
import tinestIconUrl from '@tinyrack/ui/brand/apps/tinest-app-icon.svg';
import dotweaveIconUrl from '@tinyrack/ui/brand/apps/dotweave-app-icon.svg';
import proxerIconUrl from '@tinyrack/ui/brand/apps/proxer-app-icon.svg';
import tinyAuthIconUrl from '@tinyrack/ui/brand/apps/tinyauth-app-icon-512.png';
