화이트라벨 기능 설정

연간 구독 필요

화이트라벨 기능은 연간 구독 사용자만 사용할 수 있습니다. 연간 계획을 구입한 후 Telegram을 통해 고객 지원팀에 문의하여 잠금 해제 코드를 받으세요.

화이트라벨 기능을 사용하면 TikMatrix의 브랜드 정체성을 사용자 정의하여 회사 이미지와 일치하도록 할 수 있습니다. 앱 이름, 로고 및 브랜드 정보를 수정하여 개인화된 TikMatrix 버전을 만들 수 있습니다.

기능 특성

기본 설정

앱 이름: 사용자 정의 앱 표시 이름
로고 업로드: 사용자 정의 주 로고 업로드(128x128px 권장)
웹사이트 아이콘: 앱의 사용자 정의 아이콘 설정

브랜드 설정

지원 이메일: 고객 지원 이메일 주소
튜토리얼 링크: 사용자 정의 튜토리얼/문서 링크
Telegram 링크: Telegram 그룹 또는 채널 링크 설정

기능 전환

튜토리얼 링크 표시: 튜토리얼 링크 표시 제어
브랜드 정보 표시: 브랜드 정보 표시 제어

설정 방법

방법 1: 인터페이스 구성

TikMatrix 앱을 시작합니다.
제목 표시줄의 팔레트 아이콘 🎨를 클릭합니다.
화이트라벨 설정 대화상자에서 매개변수를 구성합니다:
- 앱 이름: 사용자 정의 앱 이름을 입력합니다.
- 주 로고: 로고 파일을 업로드합니다(PNG/JPG, 128x128px 권장).
- 지원 이메일: 지원 이메일 주소를 입력합니다.
- 튜토리얼 링크: 사용자 정의 튜토리얼 링크를 입력합니다.
- Telegram 링크: Telegram 그룹/채널 링크를 입력합니다.
- 기능 전환: 튜토리얼 링크 및 브랜드 정보 표시 활성화/비활성화
"저장"을 클릭하여 설정을 적용합니다.

방법 2: 구성 파일

샘플 구성 파일을 복사합니다:

cp examples/whitelabel-config.json src/config/whitelabel-custom.json

구성 파일을 편집합니다:

{
  "appName": "사용자 정의 앱 이름",
  "logo": {
    "main": "/path/to/your/logo.webp",
    "favicon": "/path/to/your/favicon.ico"
  },
  "brand": {
    "supportEmail": "support@yourcompany.com",
    "tutorialUrl": "https://yourcompany.com/docs",
    "telegramUrl": "https://t.me/yourgroup"
  },
  "features": {
    "showTutorialLink": true,
    "showBrandInfo": true
  }
}

파일을 저장하고 앱을 다시 시작합니다.

방법 3: 명령줄 도구

프로젝트 디렉토리로 이동합니다:
```
cd tikmatrix-desktop
```
구성 도구를 실행합니다:
```
node scripts/whitelabel-config.js
```
프롬프트에 따라 각 매개변수를 단계적으로 구성합니다.

사용자 정의 버전 빌드

1. 리소스 파일 준비

# 로고 파일을 올바른 위치에 배치합니다
src/assets/your-logo.webp       # 주 로고
public/your-favicon.ico        # 웹 아이콘
src-tauri/icons/               # 앱 아이콘(다양한 크기)

2. 빌드 매개변수 구성

명령줄 도구를 사용하거나 수동으로 구성을 편집합니다:

# 명령줄 도구 사용
node scripts/whitelabel-config.js

# 또는 수동으로 편집
src/config/whitelabel-build.json

3. 앱 빌드

# 개발 모드
npm run dev

# 프로덕션 빌드
npm run build

# Tauri 앱 빌드
npm run tauri build

구성 우선순위

시스템은 다음의 우선순위 순서로 구성을 사용합니다:

런타임 구성: 브라우저 LocalStorage의 whitelabel_config
빌드 구성: src/config/whitelabel-build.json(빌드 시 사용)
샘플 구성: examples/whitelabel-config.json
기본 구성: 기본 제공 기본값

로고 요구사항

주 로고

형식: PNG, JPG 또는 SVG
크기: 128x128px(권장)
배경: 투명 배경(PNG 형식)
용도: 제목 표시줄, 시작 화면, 정보 대화상자

웹사이트 아이콘

형식: ICO 또는 PNG
크기: 32x32px 또는 16x16px
용도: 브라우저 탭, 창 아이콘

앱 아이콘(빌드용)

형식: PNG, ICO, ICNS
크기: 32x32, 128x128, 256x256, 512x512
위치: src-tauri/icons/ 디렉토리

API 통합

JavaScript API

import { 
  getWhiteLabelConfig,
  saveWhiteLabelConfig, 
  resetWhiteLabelConfig,
  validateWhiteLabelConfig 
} from './config/whitelabel.js';

// 현재 구성 가져오기
const config = getWhiteLabelConfig();

// 새 구성 저장
saveWhiteLabelConfig(newConfig);

// 기본값으로 재설정
resetWhiteLabelConfig();

// 구성 검증
validateWhiteLabelConfig(config);

유틸리티 함수

import { 
  initWhiteLabel,
  updateDocumentTitle,
  updateFavicon
} from './utils/whitelabel.js';

// 앱 시작 시 화이트라벨 초기화
initWhiteLabel();

// 문서 제목 업데이트
updateDocumentTitle('사용자 정의 앱 이름');

// 아이콘 업데이트
updateFavicon('/path/to/favicon.ico');

모범 사례

로고 설계

명확한 표시를 위해 고해상도 이미지를 사용합니다.
모든 로고 크기에서 일관된 브랜드 이미지를 유지합니다.
밝고 어두운 배경에서 로고 효과를 테스트합니다.
로고가 작은 크기에서도 읽을 수 있는지 확인합니다.

브랜드 일관성

인터페이스 전체에서 일관된 색상과 글꼴을 사용합니다.
기존 브랜드 가이드라인과 일치시킵니다.
다양한 화면 크기에서 사용자 정의 인터페이스를 테스트합니다.
전문적인 모양을 유지합니다.

링크 구성

모든 외부 링크에 HTTPS를 사용합니다.
배포 전 모든 링크를 테스트합니다.
지원 채널이 적절하게 모니터링되는지 확인합니다.
문서 링크를 최신 상태로 유지합니다.

문제 해결

일반적인 문제

로고가 표시되지 않음:

파일 경로 및 권한을 확인합니다.
이미지 형식이 지원되는지 확인합니다.
이미지 크기가 적절한지 확인합니다.
브라우저 캐시를 지우고 앱을 다시 시작합니다.

구성이 저장되지 않음:

파일 시스템 권한을 확인합니다.
JSON 구문이 올바른지 확인합니다.
구성 디렉토리가 존재하는지 확인합니다.
필요한 경우 관리자 권한으로 실행해 봅니다.

빌드 실패:

모든 리소스 파일이 존재하는지 확인합니다.
구성 파일 구문을 확인합니다.
아이콘 파일 형식이 올바른지 확인합니다.
구체적인 오류를 보려면 빌드 로그를 확인합니다.

도움말 받기

화이트라벨 설정 중 문제가 발생하면:

위의 문제 해결 섹션을 확인합니다.
구성 파일 구문을 확인합니다.
Telegram을 통해 기술 지원팀에 문의합니다.
문제를 보고할 때 구성 파일 및 오류 메시지를 포함하세요.

라이선싱 및 사용

화이트라벨 기능은 연간 구독 사용자만 사용할 수 있습니다.
사용자 정의 브랜드 권리는 구독에 포함됩니다.
사용자 정의 버전 배포에는 추가 라이선스가 필요할 수 있습니다.
엔터프라이즈 라이선스 옵션은 고객 지원팀에 문의하세요.

잠금 해제 코드가 필요하신가요? 연간 구독 세부 정보와 함께 Telegram을 통해 고객 지원팀에 문의하세요.

기능 특성​

기본 설정​

브랜드 설정​

기능 전환​

설정 방법​

방법 1: 인터페이스 구성​

방법 2: 구성 파일​

방법 3: 명령줄 도구​

사용자 정의 버전 빌드​

1. 리소스 파일 준비​

2. 빌드 매개변수 구성​

3. 앱 빌드​

구성 우선순위​

로고 요구사항​

주 로고​

웹사이트 아이콘​

앱 아이콘(빌드용)​

API 통합​

JavaScript API​

유틸리티 함수​

모범 사례​

로고 설계​

브랜드 일관성​

링크 구성​

문제 해결​

일반적인 문제​

도움말 받기​

라이선싱 및 사용​