로고

제공된 원본을 다시 만들거나 색을 바꾸거나 재배치하지 말고 그대로 사용하세요. 기본 로고 조합은 대표 브랜드를 Tinyrack으로 표시하고, Tinyrack UI 같은 제품명은 별도의 화면 문구로 유지해요.

자산과 결과 선택

1. Tinyrack 이름 표시: 주변에서 브랜드를 알 수 없다면 로고 조합을 선택하세요.
2. 작은 브랜드 표시: 근처에서 Tinyrack을 이미 밝힌 경우에만 마크를 선택하세요.
3. 정사각형 영역: 파비콘, 실행기, 서비스 아바타에는 앱 아이콘을 선택하세요.
4. 완성 결과: 제공된 SVG 하나를 변경 없이 사용하고 제품명은 별도 화면 텍스트로 두세요.

변형

맥락에서 브랜드를 충분히 보여 주는 가장 작은 승인 변형을 선택하세요.

기본 로고 조합문서, 탐색, 공지, 공용 자산처럼 브랜드 이름을 표시해야 할 때 사용하세요.

반전 로고 조합거의 검은색인 배경에는 제공된 반전 원본을 사용하세요. CSS로 기본 파일의 색을 반전하지 마세요.

마크근처에 이미 Tinyrack 이름이 있거나 로고 조합을 쓰기에는 영역이 너무 작을 때만 사용하세요.

앱 아이콘파비콘, 실행기, 서비스 아바타와 같은 정사각형 영역에는 승인된 타일을 사용하세요.

색상과 배경

로고는 의도적으로 무채색이에요. 색상은 로고가 아니라 제품 상태와 상호작용에 사용해요.

어두운 원본#0a0a0a 색상을 흰색이나 거의 흰색인 배경에 사용하세요.

밝은 원본#fafafa 색상을 검은색이나 거의 검은색인 배경에 사용하세요.

랙 칸과 상태 표시 구멍의 형태가 흐려지는 복잡한 이미지, 그라데이션, 표면 위에는 어느 버전도 배치하지 마세요.

여백

x를 마크 높이의 1/4로 정하세요. 마크나 로고 조합의 모든 면에 최소 x만큼 빈 공간을 두고 화면 가장자리, 텍스트, 구분선, 다른 로고는 그 경계 밖에 두세요.

xx

마크: 최소 여백은 렌더링된 마크 높이의 25%예요.

로고 조합: 마크를 기준으로 x를 정한 뒤, 전체 로고 조합 둘레에 같은 간격을 적용하세요.

여백은 더 넓어도 좋아요. 이 규칙은 권장 컨테이너 크기가 아니라 최솟값을 정해요.

최소 크기

최소 크기는 마크 안쪽의 상태 표시 구멍과 워드마크 글자 안쪽 공간을 보호해요. 로고 조합을 한계보다 작게 줄이는 대신 마크로 전환하세요.

마크

최소 디지털 크기: 16px 정사각형.

로고 조합

최소 디지털 너비: 112px.

배치

각 화면에 로고 조합을 한 번만 사용하고 구성의 안정적인 가장자리에 배치하세요. 왼쪽에서 오른쪽으로 읽는 화면에서는 왼쪽 위를 권장하며, 시작·로딩·종료 화면에는 중앙 배치가 적합해요. 파비콘과 서비스 아바타처럼 반복되는 작은 영역에는 마크를 사용하세요.

제품, 프로젝트, 파트너 이름은 로고 조합의 최소 여백 밖에 두세요. 제품명으로 새 로고 조합을 만들거나 조판하지 말고 Tinyrack UI를 일반 화면 텍스트로 작성해요.

접근성

로고가 링크의 유일한 콘텐츠라면 alt="Tinyrack"을 사용해 링크에 간결한 접근 가능한 이름을 제공하세요. 주변 텍스트가 이미 Tinyrack을 밝히고 이미지가 중복되면 빈 alt 속성을 사용해요.

<a href="/">
  <img src="/brand/tinyrack-lockup.svg" alt="Tinyrack" width="156" height="38" />
</a>

랙 그림을 설명하려고 대체 텍스트에 추가 문구를 넣지 마세요. 접근 가능한 이름은 브랜드를 식별하고, 페이지 문구는 원본을 설명해요.

잘못된 사용

형태와 구성

마크는 정렬된 상태 구멍이 있는 세 단의 랙 칸으로 이루어져요. 로고 조합에서는 외곽선으로 변환한 IBM Plex Sans SemiBold 워드마크와 마크, 고정 간격이 하나의 원본을 이뤄요. 각 부분을 다시 입력하거나 분리하거나 재배치하지 마세요.

현지화 로고 조합

한국어 화면에는 한글 조합을, 그 외 언어에는 라틴 조합을 사용하세요. 읽는 사람의 브라우저 설정이 아니라 화면의 언어를 기준으로 고르세요.

한글 조합은 같은 격자 위에 있어요. 마크와 여백, 높이 38, 워드마크 앞 간격이 모두 같아요. 워드마크는 외곽선으로 변환한 IBM Plex Sans KR SemiBold이고, 글자가 차지하는 높이가 라틴 대문자 높이와 같도록 맞췄어요. 한글 글자폭이 라틴 워드마크와 달라서 캔버스 너비는 더 좁아요. 너비가 아니라 높이를 기준으로 크기를 조절하세요.

위의 규칙은 그대로 적용돼요. 한글 워드마크도 외곽선 원본이라 글자로 조판하면 안 돼요.

다운로드

모든 디지털 환경에서 SVG를 사용하세요. 이 파일에는 윤곽선으로 변환한 원본이 포함되어 있어 설치된 글꼴이나 런타임 스타일시트가 필요하지 않아요.

발표 자료, 스토어 등록 정보, 소셜 프로필처럼 SVG를 넣을 수 없는 곳에서만 PNG를 선택하세요. 모든 PNG는 같은 SVG 원본을 투명 배경으로 렌더링한 파일이라 반전 원본도 어두운 배경에서 그대로 읽혀요. 정사각형 자산은 한 변의 길이로, 로고 조합은 높이로 표기했어요. 로고 조합의 너비는 원본 비율을 따라가요.

같은 원본을 @tinyrack/ui에서도 제공해요. 빌드 도구가 파일을 복사하고 해시를 붙이게 하려면 brand 하위 경로에서 불러오세요.

import tinyrackIconUrl from '@tinyrack/ui/brand/tinyrack-app-icon-512.png';
import tinyrackLogoUrl from '@tinyrack/ui/brand/tinyrack-lockup.svg';