White Label 브랜드 자산 모범 사례 안내

White Label Lite에는 밝은 로고, 어두운 로고, 파비콘, 기본 색상 및 강조 색상을 위한 개별 필드가 있습니다. 이 가이드에서는 명확한 브랜드 키트를 준비하고, 양식에서 허용하는 파일을 사용하며, 고객에게 공개하기 전에 결과를 테스트하는 방법을 설명합니다.

로고 업로드

로고 업로드는 두 가지입니다. 밝은 배경용 밝은 로고와 어두운 배경용 어두운 로고입니다. 둘 다 있다면 업로드한 후 Branding 미리보기에서 각 로고가 해당 테마에서 잘 보이는지 확인하세요.

지원 파일 유형:

• PNG: 투명 배경에 가장 적합하며 대부분의 용도에 권장됩니다.
• JPG / JPEG: 단색 배경 로고에 적합하며 투명 배경은 지원하지 않습니다.
• SVG: 현재 지원하지 않습니다. 삽입 스크립트를 안전하게 렌더링하는 방법을 개발하고 있습니다.

최대 파일 크기: 업로드당 1 MB입니다. 파일이 더 크면 TinyPNG 또는 pngquant로 압축하세요. 일반적인 로고는 눈에 띄는 품질 저하 없이 50 KB 미만으로 압축됩니다.

권장 원본 크기: 작은 아이콘 대신 선명하고 해상도가 충분히 높은 원본을 사용하세요. 정사각형이나 정사각형에 가까운 로고가 안전한 출발점입니다. 미리보기에서 읽을 수 있다면 넓은 워드마크도 사용할 수 있습니다.

배경:

• 투명 PNG를 적극 권장합니다. 대시보드 배경과 브랜드 이메일 헤더 띠가 순백색이 아닐 수 있으므로, 경계가 뚜렷한 색상 배경은 어색해 보입니다.
• 로고가 모노그램이나 아이콘이면 투명 배경을 통해 어떤 배경에도 자연스럽게 배치할 수 있습니다.
• 로고에 고정 색상 배경이 있다면 대시보드의 기본 또는 강조 색상과 일치시키세요.

파비콘

파비콘에는 별도의 업로드 필드가 있으며 로고에서 자동 생성되지 않습니다. PNG, JPG 또는 ICO 형식의 간단한 정사각형 아이콘을 최대 1 MB까지 사용하세요. 브라우저 탭 크기에서는 전체 워드마크보다 모노그램이나 기호가 더 잘 보입니다.

파비콘은 정사각형으로 유지하세요. 전체 워드마크에는 파비콘이 아닌 밝은 로고와 어두운 로고 필드를 사용하세요.

색상 선택

색상 필드는 두 가지입니다.

• 기본 색상: 버튼, 링크 및 활성 상태에 사용하는 주요 색상입니다.
• 강조 색상: 강조 표시에 사용하는 보조 색상입니다.

#3b82f6과 같은 16진수 색상 값을 입력하세요. 저장하기 전에 라이브 미리보기에서 결과를 확인하세요.

기본 색상 선택

방문자가 가장 많이 보는 색상입니다. 다음 세 가지를 고려하세요.

• 밝은 배경과 어두운 배경 모두에서 테스트하세요. 대시보드는 두 테마를 지원합니다. 흰색에서 눈에 띄는 색상이 어두운 배경에서는 사라질 수 있습니다.
• 상태 색상을 알아볼 수 있게 유지하세요. 주요 브랜드 색상을 경고, 성공 또는 파괴적 작업 색상과 너무 비슷하게 만들지 마세요. 선명한 파랑, 보라, 청록, 차콜 등 독특한 색상이 더 읽기 쉽습니다.
• 중간 채도의 단색이 흰색이나 검은색에 가까운 색상보다 낫습니다. 흰 배경에서 버튼으로 눈에 띄는지 생각해 보세요. 거의 보이지 않는다면 너무 옅습니다.

강조 색상 선택

강조 색상은 기본 색상을 보조하며 다음 조건을 충족해야 합니다.

• 기본 색상과 뚜렷하게 달라야 하며, 비슷한 파란색 두 개를 피해야 함
• 기본 색상과 경쟁하지 않고 보완해야 함
• 기본 색상 옆에서도 선명해야 함

효과적인 방식은 깊고 채도가 높은 브랜드 색상을 기본으로, 더 밝은 보색을 강조 색상으로 사용하는 것입니다. 예: 기본 #2563eb (indigo-600), 강조 #10b981 (emerald-500).

대비와 접근성

인터페이스는 기본 색상 위에 밝은 텍스트를 표시할 수 있습니다. 버튼 레이블이 잘 보이는 색조를 선택하세요. 매우 옅은 파스텔은 견본에서는 예쁘지만 실제 버튼에서는 대비가 부족할 수 있습니다.

WebAIM 대비 검사기로 텍스트와 배경 조합을 확인할 수 있습니다. 주변 인터페이스도 색상 인식에 영향을 주므로 미리보기를 최종 확인으로 사용하세요.

대체로 잘 작동하는 색상은 진한 파랑, 진한 보라, 차콜, 어두운 청록 및 진한 적갈색입니다. 실패하기 쉬운 색상은 밝은 파스텔, 중간 회색, 중간 노랑 및 네온입니다.

표시 이름

표시 이름은 브랜드 대시보드, Webmail 및 지원되는 이메일 화면에 표시됩니다. 다음 세 가지 패턴이 효과적입니다.

• "내브랜드 Email": 이메일 서비스임을 명확히 나타냅니다. 전문적이며 이메일을 서비스로 판매하는 리셀러에게 좋습니다.
• "내브랜드": 브랜드 이름만 사용합니다. 더 깔끔하며 이메일이 더 큰 제품군의 일부일 때 적합합니다.
• "내브랜드 Dashboard": 화면을 강조합니다. 여러 브랜드 제품을 명확히 구분할 때 유용합니다.

한눈에 알아볼 수 있을 만큼 짧게 유지하세요. 문자 수 규칙에만 의존하지 말고 좁은 화면과 두 테마에서 미리보기를 확인하세요.

표시 이름은 다음에 나타납니다.

• 대시보드 및 Webmail 탐색 메뉴
• 브랜드 로그인 및 브라우저 제목
• 지원되는 트랜잭션 이메일 화면

저장 전 확인

Save changes를 클릭하기 전에 파일이 1 MB 미만이고, 두 로고가 해당 미리보기에서 잘 보이며, 파비콘이 간단한 정사각형이고, 기본 색상 대비가 충분하며, 표시 이름이 발신자 이름으로 자연스러운지 확인하세요.

저장한 후 비공개 브라우저 창에서 활성 브랜드 호스트를 여세요. 캐시된 이미지나 파비콘을 현재 버전으로 착각하는 일을 방지합니다.

간단한 자산 준비 절차

1. 스크린샷이나 웹사이트에서 복사한 파일이 아닌 원본 로고 파일로 시작합니다.
2. 밝은 배경용 버전과 어두운 배경용 버전을 각각 내보냅니다.
3. 마크에서 가장 알아보기 쉬운 부분으로 별도의 정사각형 파비콘을 만듭니다.
4. Branding에 브랜드 이름과 색상을 추가한 후 이메일 및 Webmail 미리보기를 비교합니다.
5. 저장하고 휴대전화와 데스크톱 브라우저에서 활성 호스트를 테스트한 후 팀이 나중에 업데이트할 수 있는 위치에 원본을 보관합니다.

나중에 업데이트

기존 브랜드 호스트의 DNS 레코드를 바꾸지 않고 나중에 브랜드 자산을 업데이트할 수 있습니다. 시각적 변경 후에는 항상 활성 호스트를 다시 확인하세요.

잘못된 자산을 업로드했거나 읽기 어려운 색상을 선택했다면 Branding에서 수정한 후 다시 저장하세요. 교체 결과를 확인할 때 일반적인 브라우저 캐싱을 고려하세요.

API 및 MCP로 자동화

통합에 필요한 권한이 있으면 REST API 또는 MCP가 브랜드 설정과 자산을 관리할 수 있습니다. 동일한 파일 유형과 1 MB 제한이 적용됩니다. 최종 시각 확인에는 대시보드와 미리보기를 사용하세요.

지원되는 작업은 White Label Branding API 및 MCP 가이드를 참조하세요.

일반적인 상황

"사이드바에서는 로고가 괜찮지만 휴대전화에서는 흐립니다." 더 선명하고 해상도가 높은 원본을 업로드하고 저장한 후 휴대전화에서 활성 브랜드 호스트를 테스트하세요. 데스크톱 브라우저 미리보기에만 의존하지 마세요.

"기본 색상은 대시보드에서 괜찮지만 버튼 텍스트를 읽기 어렵습니다." 더 어둡거나 채도가 높은 색조를 선택한 후 미리보기와 활성 호스트에서 확인하세요.

"로고의 색상 배경이 대시보드와 맞지 않습니다." 가능하면 투명 PNG 버전을 내보내세요. 밝은 버전과 어두운 버전을 각각의 배경에서 비교하세요.

"이메일과 대시보드에서 다른 로고를 사용할 수 있나요?" Branding이 제공하는 밝은 및 어두운 로고 변형을 사용하세요. 특정 외관을 약속하기 전에 지원되는 이메일 미리보기와 활성 고객 화면을 테스트하세요.

"다크 모드는 어떻게 되나요?" 대시보드는 밝은 테마와 어두운 테마를 지원하며 각각 별도의 로고를 업로드합니다. 밝은 로고는 밝은 배경에, 어두운 로고는 어두운 배경에 표시되므로 밝은 배경에는 어두운 무늬를, 어두운 배경에는 흰색이나 밝은 로고를 사용할 수 있습니다.

"파비콘을 로고와 별도로 업로드할 수 있나요?" 예. 파비콘은 전용 업로드(PNG, JPG 또는 ICO, 최대 1 MB)이며 로고에서 생성되지 않습니다. 브라우저 탭용으로 간단하고 독특한 아이콘을 업로드하세요.

다음 단계

• White Label Lite 설정: 활성화 및 DNS 설정.
• TrekMail 브랜드가 유지되는 부분: 고객이 계속 볼 수 있는 TrekMail 요소.
• White Label Lite 요금 FAQ: 청구 및 통화 질문.
• White Label Branding API 및 MCP 가이드: REST 또는 MCP로 로고를 업로드하고 브랜드를 설정합니다.