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: 배경 그라디언트 변경

1.logto-sign-in {2  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);3}4 5.logto-sign-in .main-content {6  background: rgba(255, 255, 255, 0.95);7  backdrop-filter: blur(10px);8  border-radius: 16px;9  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);10}

예시 2: 버튼 스타일 변경

1.logto-sign-in button[type="submit"] {2  background: #2563EB;3  border-radius: 8px;4  font-weight: 600;5  letter-spacing: 0.025em;6  transition: background 0.2s;7}8 9.logto-sign-in button[type="submit"]:hover {10  background: #1D4ED8;11}12 13.logto-sign-in .social-sign-in-button {14  border: 1.5px solid #E5E7EB;15  border-radius: 8px;16}

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

1.logto-sign-in input[type="email"],2.logto-sign-in input[type="password"],3.logto-sign-in input[type="text"] {4  border: 1.5px solid #D1D5DB;5  border-radius: 8px;6  padding: 12px 16px;7  font-size: 16px;8  transition: border-color 0.2s;9}10 11.logto-sign-in input:focus {12  border-color: #2563EB;13  outline: none;14  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);15}

예시 4: 다크 모드 스타일

1@media (prefers-color-scheme: dark) {2  .logto-sign-in .main-content {3    background: #1F2937;4    color: #F9FAFB;5  }6 7  .logto-sign-in input {8    background: #374151;9    border-color: #4B5563;10    color: #F9FAFB;11  }12}

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: 앱 설정 업데이트

1// 기존2const config = { endpoint: 'https://your-tenant-id.logto.app', ... };3 4// 변경 후5const config = { endpoint: 'https://auth.yourcompany.com', ... };

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

Organization 브랜딩 설정

1await fetch(2  `https://your-tenant-id.logto.app/api/organizations/${orgId}`,3  {4    method: 'PATCH',5    headers: {6      Authorization: `Bearer ${managementToken}`,7      'Content-Type': 'application/json',8    },9    body: JSON.stringify({10      branding: {11        logoUrl: 'https://assets.company-a.com/logo.svg',12        darkLogoUrl: 'https://assets.company-a.com/logo-dark.svg',13        favicon: 'https://assets.company-a.com/favicon.ico',14        primaryColor: '#DC2626',15      },16    }),17  }18);

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

1const { signIn } = useLogto();2 3signIn('https://yourapp.com/callback', {4  extraParams: {5    organization_id: 'org-a',6  },7});

다음 단계

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

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

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