브랜드 맞춤화

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

브랜드 색상

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

회사 로고

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

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

파비콘

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

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

다크 모드

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

앱별 브랜딩

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

"앱 단위 로그인 경험"을 활성화하면 각 앱별로 브랜딩 로고, 파비콘, 색상, 심지어 커스텀 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에서 보이지 않는다면 문의해 주세요.

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

옴니 로그인 경험​

앱별 브랜딩​

조직별 브랜딩​

관련 리소스​

옴니 로그인 경험

앱별 브랜딩

조직별 브랜딩

관련 리소스