브랜딩 | XID

색상, 글꼴, 반경, 로고, 커스텀 CSS로 Hosted Auth 외관을 맞춤 설정합니다.

브랜딩 옵션

브랜딩 설정은 Hosted Auth 페이지, consent 화면, 이메일 템플릿의 시각적 외관을 제어합니다. 각 조직은 인스턴스 수준 기본값을 오버라이드할 수 있습니다.

옵션	설명
기본 색상	버튼, 링크, 포커스 링에 사용되는 기본 동작 색상입니다. CSS hex 또는 oklch 값을 허용합니다.
배경 색상	Hosted Auth 화면의 페이지 배경입니다.
강조 색상	레이블 및 장식 요소에 사용되는 보조 강조 색상입니다.
테두리 반경	카드, 입력 필드, 버튼에 적용되는 모서리 반경입니다. none, small, medium, large, full 중 선택하세요.
글꼴 패밀리	Google Fonts 이름 또는 커스텀 CDN 글꼴 URL입니다. 설정이 없으면 시스템 sans-serif 스택으로 폴백합니다.
로고 (라이트)	라이트 테마 페이지에 표시되는 PNG 또는 SVG입니다. R2에 저장됩니다.
로고 (다크)	다크 테마 페이지에 표시되는 PNG 또는 SVG입니다. 설정하지 않으면 라이트 로고로 폴백합니다.

조직별 브랜딩

각 조직은 자체 로고, 색상, 배경으로 인스턴스 수준 브랜딩을 오버라이드할 수 있습니다. Login Worker는 조직별로 브랜드 설정을 해석하며 조직 오버라이드가 없으면 인스턴스 기본값으로 폴백합니다. 브랜드 캐시 읽기는 P50 기준 2ms 이내에 완료됩니다.

관리 API 엔드포인트

PATCH 요청으로 조직 브랜딩을 업데이트합니다. 요청 본문에 있는 필드만 변경됩니다. 필드를 지우고 상위 기본값으로 복원하려면 null을 전달하세요.

curl -X PATCH https://xid.dev/v1/organizations/org_xxx/branding \
  -H 'Authorization: Bearer sk_live_xxx' \
  -H 'Content-Type: application/json' \
  -d '{
    "primary_color": "#6366f1",
    "border_radius": "medium",
    "font_family": "Inter",
    "hide_xid_branding": true
  }'

커스텀 CSS 제약 조건

조직당 최대 크기는 50 KB입니다.
CSP 필터는 허용 목록 외부를 가리키는 @import 규칙과 url() 참조를 제거합니다. 순수 CSS 속성 선언만 남습니다.
커스텀 CSS 내에서 외부 script 실행은 차단됩니다. 커스텀 CSS는 동작 로직이 아닌 시각적 오버라이드에만 사용하세요.
변경 사항은 게시 전 iframe 샌드박스에서 미리 볼 수 있습니다. 미리보기와 라이브 상태는 분리됩니다.

이메일 템플릿 브랜딩

트랜잭션 이메일 템플릿(인증, 매직 링크, OTP, 비밀번호 재설정, 초대)은 조직 로고와 기본 색상을 자동으로 적용합니다. 커스텀 이메일 HTML 템플릿은 콘솔에서 조직별로 업로드할 수 있습니다.