Logto 로그인 UI 커스터마이징

Logto는 기본 로그인 화면을 제공하며, 브랜드 색상·로고 적용부터 CSS 전면 커스터마이징, 커스텀 도메인 설정까지 다양한 방식으로 로그인 경험을 맞춤화할 수 있습니다.

7.1 브랜딩 설정

기본 브랜딩 설정

Admin Console → Sign-in experience → Branding 탭에서 설정합니다.

설정 항목	설명
로고	라이트/다크 모드별 로고 이미지 업로드
Favicon	브라우저 탭 아이콘
브랜드 색상	버튼, 링크 등에 사용되는 주 색상
다크 모드	사용자 시스템 설정에 따른 자동 전환

색상 설정 예시

Primary color:     #2563EB  (파란색 계열)
Dark mode color:   #3B82F6  (다크 모드용)

로고 업로드 가이드

권장 형식: SVG 또는 PNG (투명 배경)
권장 크기: 200px × 60px 이상
최대 파일 크기: 500KB

로그인 화면 텍스트 커스터마이징

Admin Console → Sign-in experience → Branding → App name 및 Slogan 설정

앱 이름: Your Company
슬로건: 안전하고 빠른 로그인

7.2 CSS 커스터마이징

더 깊은 UI 변경이 필요할 경우 Custom CSS를 직접 주입할 수 있습니다.

Custom CSS 적용

Admin Console → Sign-in experience → Branding → Custom CSS 탭

예시 1: 배경 그라디언트 변경

.logto-sign-in {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.logto-sign-in .main-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

예시 2: 버튼 스타일 변경

.logto-sign-in button[type="submit"] {
  background: #2563EB;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: background 0.2s;
}

.logto-sign-in button[type="submit"]:hover {
  background: #1D4ED8;
}

.logto-sign-in .social-sign-in-button {
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
}

예시 3: 입력 필드 커스터마이징

.logto-sign-in input[type="email"],
.logto-sign-in input[type="password"],
.logto-sign-in input[type="text"] {
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.logto-sign-in input:focus {
  border-color: #2563EB;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

예시 4: 다크 모드 스타일

@media (prefers-color-scheme: dark) {
  .logto-sign-in .main-content {
    background: #1F2937;
    color: #F9FAFB;
  }

  .logto-sign-in input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
  }
}

Custom CSS 디버깅 팁

Admin Console의 Preview 버튼으로 실시간 미리보기를 확인합니다.
브라우저 개발자 도구(F12)에서 요소 클래스명을 확인한 후 CSS를 작성합니다.
CSS 우선순위 문제가 있을 경우 !important를 신중하게 사용합니다.

7.3 커스텀 도메인 설정

기본 로그인 URL(your-tenant-id.logto.app) 대신 자체 도메인(auth.yourcompany.com)을 사용할 수 있습니다.

사전 요구사항

도메인의 DNS 관리 권한 보유
SSL 인증서 (Let's Encrypt 자동 발급 지원)
Logto Cloud Pro 플랜 이상 (셀프호스팅은 무료)

설정 순서

Step 1: Admin Console에서 커스텀 도메인 추가

Admin Console → Settings → Custom domain → 도메인 입력
도메인: auth.yourcompany.com

Step 2: DNS CNAME 레코드 등록

타입:   CNAME
이름:   auth
값:     cname.logto.app  (Logto가 제공하는 실제 값 사용)
TTL:    300

Step 3: SSL 인증서 발급 대기

DNS 전파(최대 48시간)가 완료되면 Logto가 자동으로 Let's Encrypt 인증서를 발급합니다.

Step 4: 앱 설정 업데이트

// 기존
const config = { endpoint: 'https://your-tenant-id.logto.app', ... };

// 변경 후
const config = { endpoint: 'https://auth.yourcompany.com', ... };

7.4 Organization별 로고 커스터마이징 (엔터프라이즈)

Organization 브랜딩 설정

await fetch(
  `https://your-tenant-id.logto.app/api/organizations/${orgId}`,
  {
    method: 'PATCH',
    headers: {
      Authorization: `Bearer ${managementToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      branding: {
        logoUrl: 'https://assets.company-a.com/logo.svg',
        darkLogoUrl: 'https://assets.company-a.com/logo-dark.svg',
        favicon: 'https://assets.company-a.com/favicon.ico',
        primaryColor: '#DC2626',
      },
    }),
  }
);

Organization 컨텍스트 로그인 화면 표시

const { signIn } = useLogto();

signIn('https://yourapp.com/callback', {
  extraParams: {
    organization_id: 'org-a',
  },
});

다음 단계

로그인 UI 커스터마이징이 완료되었습니다. 이제 서비스를 운영 환경에 배포하기 위한 보안 점검과 설정을 진행합니다.

다음: Logto 프로덕션 배포 — 보안 체크리스트, Docker 배포, 모니터링

참고: Logto Sign-in experience — https://docs.logto.io/sign-in-experience