본문으로 건너뛰기

브랜드 맞춤화

옴니 로그인 경험​

콘솔 > 로그인 & 계정 > 브랜딩으로 이동하여 로그인 페이지의 외관과 느낌을 맞춤화하세요. 이 섹션에서는 주요 브랜딩 요소를 쉽게 조정할 수 있습니다.

브랜드 색상​

로그인 경험과 기본 제공 계정 센터 전반에 사용되는 기본 색상을 정의하세요. 기본 Logto 보라색을 귀사의 브랜드 색상으로 교체할 수 있습니다. 다크 모드의 경우 별도의 브랜드 색상을 지정할 수 있습니다.

로고는 로그인 홈, 회원가입 홈, 로딩 페이지 및 기타 확장된 인터페이스에 표시됩니다.

  • 이미지에는 몇 가지 제한이 있습니다: 500KB 이하, SVG, PNG, JPG, JPEG, ICO 형식이어야 합니다.
  • 로고 필드를 비워두면 인터페이스에 로고가 표시되지 않습니다.
  • 다크 모드 버전의 로고도 업로드할 수 있습니다.

파비콘​

파비콘은 웹사이트를 대표하는 작은 아이콘으로, 브라우저 탭, 즐겨찾기, 기타 브라우저 인터페이스 영역에 표시됩니다.

  • 이미지는 500KB 이하, SVG, PNG, JPG, JPEG, ICO 형식이어야 합니다. 좋은 표시 효과를 위해 정사각형 이미지를 업로드하는 것이 좋습니다.
  • 다크 모드 버전의 파비콘도 업로드할 수 있습니다.
  • 또한, 다양한 플로우(로그인/회원가입/비밀번호 찾기 등)에서는 이제 커스텀 타이틀 대신 브라우저 타이틀이 사용됩니다.

다크 모드​

다크 모드를 활성화하면 사용자의 시스템 환경설정에 따라 로그인 페이지의 외관이 자동으로 조정됩니다.

Logto 브랜딩 숨기기​

기본적으로, 기본 제공 로그인 경험 페이지와 계정 센터 하단에는 "Powered by Logto"가 표시됩니다. "Logto 브랜딩 숨기기" 옵션을 활성화하면 Logto 마크가 제거되어 귀사의 브랜드 아이덴티티만을 강조하는 깔끔하고 전문적인 로그인 경험을 제공할 수 있습니다.

앱별 브랜딩​

여러 앱을 운영하는 비즈니스에서 앱 단위의 로그인 경험이 필요하다면, 애플리케이션 상세 페이지에서 설정할 수 있습니다. 콘솔 > 애플리케이션으로 이동하세요.

"앱 단위 로그인 경험"을 활성화하면 각 앱별로 브랜딩 로고, 파비콘, 색상, 심지어 커스텀 CSS까지 설정할 수 있습니다. 앱 단위 브랜딩이 활성화된 앱에서 로그인을 시작하면, 해당 앱의 브랜딩 설정에 따라 로그인 경험이 맞춤화됩니다. 그렇지 않은 경우 기본 옴니 로그인 경험 설정이 적용됩니다.

앱 단위 브랜딩에도 라이트 모드와 다크 모드 설정이 모두 제공됩니다. 다크 모드 설정은 옴니 로그인 경험에서 다크 모드가 활성화된 경우에만 적용됩니다.

조직별 브랜딩​

클라이언트의 조직 로고를 로그인 경험에 동적으로 표시하려면, 조직 설정 페이지에서 조직 로고를 업로드할 수 있습니다. 콘솔 > 조직으로 이동하세요.

"조직 단위 로그인 경험"을 활성화하면, 앱 단위 브랜딩과 마찬가지로 각 조직별로 브랜딩 로고, 파비콘, 색상, 커스텀 CSS까지 설정할 수 있습니다.

이후 로그인을 트리거할 때, organization_id 파라미터에 조직 ID를 전달하여 Logto에 어떤 조직 로고를 표시할지 지정할 수 있습니다. 예를 들어, 조직 ID가 123456인 조직의 로고를 표시하려면:

  • Logto SDK를 사용하는 경우, signIn 메서드의 extraParams 객체에 organization_id 파라미터를 전달할 수 있습니다.
  • OIDC 클라이언트를 사용하는 경우, 인가 엔드포인트 요청 시 organization_id 파라미터를 전달할 수 있습니다.

조직 단위 브랜딩에도 라이트 모드와 다크 모드 설정이 모두 제공됩니다. 다크 모드 설정은 옴니 로그인 경험에서 다크 모드가 활성화된 경우에만 적용됩니다.

노트:

앱 단위 브랜딩과 조직 단위 브랜딩이 모두 활성화된 경우, 조직 단위 브랜딩이 우선 적용됩니다. 전체 우선순위는 다음과 같습니다: 조직 단위 브랜딩 -> 앱 단위 브랜딩 -> 옴니 로그인 경험

다음은 Logto 브라우저 SDK를 사용하여 signIn 메서드에서 organization_id 파라미터를 전달하는 예시입니다:

index.ts

logtoClient.signIn({
  // ...기타 파라미터
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
노트:

extraParams 기능은 모든 Logto SDK에 점진적으로 적용되고 있습니다. 아직 귀하의 SDK에서 보이지 않는다면 문의해 주세요.

각 앱 또는 조직별로 로그인 경험을 맞춤화하는 방법?