로그인 페이지 브랜딩
브랜딩은 호스팅 로그인, 계정 포털, 이메일의 모양을 변경합니다. 설정은 다음 순서로 상속됩니다: 플랫폼 기본값, 환경, 애플리케이션, 조직. 각 토큰은 해당 값을 정의하는 가장 구체적인 수준의 값을 사용합니다.
설정할 수 있는 항목
- 색상:
color.primary,color.primary_contrast,color.background,color.surface,color.text,color.text_muted,color.border,color.link,color.focus_ring,color.error,color.success를 sRGB 16진수로 설정합니다. 라이트 모드와 다크 모드에 각각 별도의 값을 지정하며,mode는light,dark또는system입니다. - 글꼴: 허용된 글꼴 목록 또는 업로드한 글꼴에서
font.body와font.heading을 선택합니다.font.size_base는 14~18px입니다. - 모양:
radius.card는 0~24px,radius.control은 0~16px입니다. - 레이아웃:
center,split_left또는split_right. - 이미지:
logo,logo_height(24~80px),favicon,background_image(split_*레이아웃에서만 사용 가능).
조직은 logo 및 color.primary 토큰만 재정의할 수 있습니다. 조직의 브랜드는 조직 컨텍스트가 검증된 경우에만 표시됩니다. 예를 들어 유효한 초대 또는 조직 선택기를 거친 후입니다. organization 매개변수만 단독으로 전달해도 페이지 모양은 바뀌지 않습니다.
대비 보호
저장할 때 KeenAuth는 라이트 모드와 다크 모드를 각각 기준으로 다음 조합을 확인합니다.
| 조합 | 최소 대비율 |
|---|---|
| 배경 위의 텍스트 | 4.5:1 |
배경 위의 color.link |
4.5:1 |
color.primary 위의 color.primary_contrast |
4.5:1 |
| 배경 위의 컨트롤 테두리 | 3:1 |
배경 위의 포커스 링(color.focus_ring) |
3:1 |
최소 대비율에 미치지 못하는 조합은 Management API에서 422 brand_contrast_insufficient(RFC 9457)로 거부됩니다. 오류 본문에는 문제가 된 필드가 표시되고, 기준을 통과하는 가장 가까운 색상이 제안됩니다. 이 제안은 색조와 채도를 유지하고 명도만 조정합니다. 대시보드에서도 한 번의 클릭으로 같은 제안을 적용할 수 있습니다. 기준을 통과하지 못한 값은 게시할 수 없습니다. 오류 형식은 브랜딩 게시를 참조하십시오.
사용자 지정 CSS(Startup 요금제)는 대비를 낮출 수 있으며, KeenAuth는 이를 자동으로 보정하지 않습니다. 미리 보기 검사는 문제를 대시보드에 경고로 표시하며, 사용자 지정 CSS로 적용한 변경 사항의 기준 준수 여부는 고객님의 책임입니다.
에셋
POST /v1/branding/assets로 이미지와 글꼴을 업로드하십시오. 이미지는 최대 1MB, 글꼴은 최대 300KB까지 허용됩니다. PNG, JPEG, WebP는 허용되며, ICO는 파비콘에만, WOFF2는 글꼴에만 허용됩니다. SVG는 거부됩니다. 이미지는 PNG로 다시 인코딩되고, 최대 1024×1024px로 축소되며, 메타데이터가 제거됩니다. 환경당 파일 200개, 총 50MB까지 보관할 수 있습니다.
사용자 지정 CSS 및 템플릿
Startup 요금제 이상에서는 사용자 지정 CSS와 페이지 템플릿을 추가할 수 있습니다. 보안에 중요한 페이지 요소는 보호된 계층에 표시되며, 사용자 지정 CSS로 숨기거나 가릴 수 없습니다. 여기에는 동의 화면의 애플리케이션 이름과 검증된 출처, 요청된 권한 목록, 허용 및 거부 버튼, 보안 경고, 환경 배너, 법적 링크가 포함됩니다. 모든 요금제에서 고객이 작성한 JavaScript는 실행되지 않습니다.
논리적 CSS 속성(margin-left가 아닌 margin-inline-start)을 사용하십시오. 물리적 속성은 거부되며, 이는 스타일이 오른쪽에서 왼쪽으로 쓰는 언어에서도 작동하도록 하기 위함입니다. 언어 및 오른쪽에서 왼쪽으로 쓰기를 참조하십시오.
KeenAuth 표시
호스팅 로그인, 계정 포털, 이메일에는 보호된 계층에 "Secured by KeenAuth" 문구가 작게 표시됩니다. Business 및 Enterprise 요금제와 development 환경에서는 이 문구가 표시되지 않습니다. 페이지나 이메일이 그려질 때마다 요금제를 확인하므로, 요금제가 변경되면 문구가 다시 표시됩니다. 사용자 지정 CSS와 텍스트 재정의로는 이 문구를 숨기거나 변경할 수 없습니다.
게시
변경 사항은 초안으로 저장되며, 게시하면 실시간으로 적용됩니다. 이전 버전은 목록에서 확인하고 롤백할 수 있습니다. API 페이지는 /docs/api/management/branding/ 아래에 있으며, 브랜딩 게시부터 시작하십시오.