Didit의 JavaScript SDK와 Tailwind CSS: 매끄러운 UI 맞춤 설정 (KO)

일관된 브랜드 경험이 핵심입니다. 본인 확인을 포함한 모든 접점에서 통일된 브랜드 경험을 유지하는 것은 사용자 신뢰와 충성도를 구축하는 데 중요합니다. Didit의 유연한 통합 옵션은 이를 가능하게 합니다.

제어를 위한 JavaScript SDK Didit의 JavaScript SDK는 확인 흐름에 대한 완전한 프로그래밍 제어를 제공하여 React, Vue, Angular와 같은 최신 웹 프레임워크에 깊이 있는 맞춤 설정과 원활한 통합을 가능하게 합니다.

빠른 스타일링을 위한 Tailwind CSS Tailwind CSS의 유틸리티 우선 접근 방식을 활용하여 Didit의 UI 구성 요소를 빠르고 효율적으로 스타일링하고, 복잡한 재정의 없이 기존 디자인 시스템과 완벽하게 일치시킬 수 있습니다.

Didit의 화이트 라벨 솔루션 직접적인 스타일링 외에도 Didit은 비즈니스 콘솔 내에서 포괄적인 화이트 라벨 기능을 제공하여 사용자 정의 도메인, 색상, 로고를 포함한 광범위한 브랜딩 맞춤 설정을 워크플로에 손쉽게 적용할 수 있습니다.

본인 확인에서 원활한 사용자 경험의 중요성

오늘날의 디지털 환경에서 사용자 경험(UX)은 매우 중요합니다. 사용자가 애플리케이션과 상호 작용할 때 모든 접점은 브랜드에 대한 전반적인 인식에 기여합니다. 여기에는 본인 확인과 같은 중요한 프로세스가 포함됩니다. 어설프고 브랜드에 맞지 않는 확인 흐름은 사용자 여정을 방해하고 이탈을 유발하며 신뢰를 훼손할 수 있습니다. 반대로, 원활하게 통합되고 아름답게 브랜딩된 확인 프로세스는 전문성을 향상시키고 사용자 신뢰를 강화합니다.

많은 본인 확인 솔루션은 회사에서 세심하게C 제작한 브랜드 가이드라인과 충돌하는 일반적인 일률적인 UI를 제공합니다. 이로 인해 기업은 강력한 보안과 일관된 사용자 경험 중 하나를 선택해야 합니다. Didit은 이러한 문제를 이해하고 JavaScript SDK 및 광범위한 화이트 라벨 옵션과 같은 강력한 도구를 제공하여 타협할 필요가 없도록 합니다. 심층적인 맞춤 설정을 통해 Didit은 본인 확인 프로세스가 외부의 거슬리는 중단이 아닌, 애플리케이션의 필수적인 부분처럼 느껴지도록 합니다.

궁극적인 유연성을 위한 Didit의 JavaScript SDK 통합

Didit의 JavaScript SDK는 최대의 제어와 유연성을 추구하는 개발자를 위해 설계되었습니다. 세션 관리, 이벤트 콜백, React, Vue, Angular, NextJS, Nuxt, Svelte와 같은 인기 프레임워크 및 바닐라 JS 지원을 포함한 포괄적인 기능으로 인해 프로덕션 애플리케이션에 권장되는 통합 방법입니다. 간단한 iframe 임베드 또는 리디렉션과 달리 JavaScript SDK를 사용하면 애플리케이션 내에서 확인 흐름을 프로그래밍 방식으로 관리하고 이벤트를 직접 처리할 수 있습니다.

기본 통합은 간단합니다:

import DiditSdk from '@didit-protocol/sdk-web';

DiditSdk.init({
  session_token: 'YOUR_BACKEND_GENERATED_TOKEN',
  onSuccess: (session) => {
    console.log('Verification completed:', session.sessionId, session.status);
    // Handle successful verification, e.g., redirect user, update UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Handle errors appropriately
  },
  onCancel: () => {
    console.log('User cancelled verification');
    // Handle user cancellation
  }
});

이 SDK를 사용하면 확인이 모달로 표시될지 인라인으로 표시될지 제어할 수 있어 사용자 상호 작용에 대한 세부적인 제어가 가능합니다. 이 SDK를 활용하면 Didit 구성 요소를 애플리케이션의 자체 구조 내에 래핑하여 사용자 정의 스타일링에 적합하도록 만들 수 있습니다.

Tailwind CSS로 Didit 구성 요소 스타일링

Tailwind CSS는 유틸리티 우선 접근 방식으로 개발자들 사이에서 인기를 얻었으며, 빠른 UI 개발과 매우 일관된 디자인을 가능하게 합니다. Didit의 JavaScript SDK를 통합할 때 Didit UI를 호스팅하는 컨테이너 요소에 Tailwind CSS 스타일을 적용하여 응집력 있는 모양과 느낌을 보장할 수 있습니다. Didit의 핵심 구성 요소는 견고하고 기능적으로 설계되었지만, 해당 프레젠테이션은 주변 DOM 구조 및 애플리케이션의 전역 스타일에 영향을 받을 수 있습니다.

예를 들어, Didit SDK가 특정 div 내에서 모달 또는 인라인 구성 요소를 렌더링하는 경우, 해당 div에 Tailwind 클래스를 적용하여 크기, 간격 및 일부 모양을 제어할 수 있습니다. 실제 확인 흐름의 내부 요소(버튼, 입력 필드, 텍스트 등)에 대한 더 깊은 맞춤 설정을 위해 Didit은 비즈니스 콘솔을 통해 광범위한 화이트 라벨링 기능을 제공하며, 이는 스타일을 직접 재정의하려고 시도하는 것보다 더 효과적이고 유지 관리가 용이한 접근 방식인 경우가 많습니다.

그러나 래퍼 요소 또는 Didit SDK 주변에 구축하는 사용자 정의 UI의 경우 Tailwind CSS가 이상적입니다. 애플리케이션의 특정 카드 구성 요소 내에 확인 흐름을 표시하려고 한다고 가정해 보겠습니다.

<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center">Verify Your Identity</h2>
    <!-- Didit SDK will render its UI here -->
    <div id="didit-verification-container"></div>
  </div>
</div>

이 예제에서 모든 외부 스타일링(배경, 카드 모양, 텍스트 스타일)은 Tailwind에서 처리합니다. Didit SDK는 #didit-verification-container 내에 렌더링되도록 초기화되어 일부 컨텍스트 스타일을 상속하고 주변 애플리케이션과 시각적으로 일관되도록 합니다. Didit 흐름 내부 요소의 경우 Didit의 화이트 라벨 기능이 확실한 맞춤 설정을 제공합니다.

Didit의 포괄적인 화이트 라벨링 솔루션

직접적인 CSS 조작으로 일부 측면을 처리할 수 있지만, UI 맞춤 설정을 위한 Didit의 주요하고 가장 강력한 방법은 Didit 비즈니스 콘솔을 통해 액세스할 수 있는 내장 화이트 라벨링 기능입니다. 이는 단순한 CSS 재정의로 달성할 수 있는 것 이상으로, 진정으로 브랜딩된 경험을 위한 강력한 솔루션을 제공합니다. Didit의 화이트 라벨 기능을 사용하면 다음을 수행할 수 있습니다:

• 색상 맞춤 설정: 버튼, 텍스트, 패널 및 배경을 브랜드 팔레트에 맞게 제어합니다.
• 타이포그래피 설정: 일관된 모양을 위해 브랜드의 글꼴을 적용합니다.
• 로고 업로드: 정사각형 및 직사각형 로고를 확인 흐름에 직접 통합합니다.
• 레이아웃 조정: 패널 및 버튼의 테두리 반경을 미세 조정합니다.
• 로그인 화면 구성: 초기 로그인 화면을 표시할지 건너뛸지 결정합니다.
• 사용자 정의 도메인 사용: verify.didit.me 대신 자체 도메인(예: verify.yourcompany.com)에서 확인 흐름을 호스팅하여 외부 브랜딩 없이 완벽하게 원활한 사용자 여정을 보장합니다.

이러한 수준의 맞춤 설정은 Didit 워크플로 내에서 직접 적용됩니다. 즉, 비즈니스 콘솔에서 구성되면 해당 워크플로를 통해 시작된 모든 확인 세션에 브랜드가 자동으로 반영됩니다. 이는 ID 확인, 수동 및 능동 생체 인식, 연령 추정과 같은 Didit 제품에 특히 효과적이며, 이러한 기능과의 사용자 상호 작용의 모든 단계가 브랜드와 완벽하게 일치하도록 보장합니다.

Didit이 도움이 되는 방법

Didit은 기업이 본인 확인 경험을 완전히 맞춤 설정할 수 있도록 지원하는 AI 기반의 개발자 우선 신원 플랫폼으로 두드러집니다. 모듈식 아키텍처를 통해 기존 시스템에 원활하게 통합되는 플러그 앤 플레이 신원 확인 기능을 제공합니다. 당사의 JavaScript SDK는 최신 웹 프레임워크와의 심층적인 통합에 필요한 프로그래밍 제어를 제공하며, 비즈니스 콘솔의 포괄적인 화이트 라벨 기능은 색상 및 글꼴에서 사용자 정의 도메인에 이르기까지 광범위한 브랜딩 맞춤 설정을 허용합니다. 이를 통해 강력한 ID 확인(OCR, MRZ, 바코드), 사기 방지를 위한 수동 및 능동 생체 인식 감지, 개인 정보 보호 연령 추정을 포함한 모든 Didit 제품에서 일관되고 신뢰할 수 있는 사용자 경험을 보장합니다. Didit은 무료 Core KYC와 설정 비용 없는 성공적인 확인 건당 지불 모델을 제공하여 고급 본인 확인을 접근 가능하고 효율적으로 만듭니다.

시작할 준비가 되셨습니까?

Didit을 직접 보고 싶으십니까? 지금 바로 무료 데모를 받아보세요.

Didit의 무료 티어로 무료로 신원 확인을 시작하세요.