# 사용자 인터페이스

위핀은 다양한 로그인 UI 옵션을 통해 개발자들이 사용자의 필요에 맞게 로그인 경험을 맞춤화할 수 있도록 지원합니다. 로그인 UI 기능은 크게 세 가지 접근 방식으로 나뉘며, 이들 방식에 따라 사용자는 위핀의 기본 제공 UI를 사용하거나, 커스텀 UI를 직접 제작할 수 있습니다.

### 위젯 기본 로그인 UI 사용 <a href="#using-the-default-widget-login-ui" id="using-the-default-widget-login-ui"></a>

위핀 위젯은 기본적인 로그인 UI를 제공하여, OAuth Provider를 통해 쉽게 소셜 로그인을 구현할 수 있도록 지원합니다. 이 UI는 별도의 커스텀 작업 없이 바로 사용할 수 있으며, Google, Apple, Naver, Discord 등의 주요 소셜 로그인을 적용할 수 있습니다.

* 위젯 SDK를 설치하고 초기화한 후, `loginWithUI` 메서드를 호출하여 사용자에게 로그인 UI를 표시합니다.

### 커스텀 로그인 UI 구현 <a href="#implementing-a-custom-login-ui" id="implementing-a-custom-login-ui"></a>

위핀의 기본 제공 UI 대신, 직접 커스텀 UI를 디자인하여 구현할 수 있습니다. 이를 통해 앱의 고유한 디자인을 유지하고, 사용자 맞춤형 경험을 제공할 수 있습니다. 이 방식의 경우, 커스텀 UI와 위핀의 로그인 기능을 통합하여, 앱의 고유한 사용자 흐름과 인터페이스에 맞게 로그인 과정을 구현해야 합니다.

#### 이메일/패스워드 로그인 <a href="#email-password-login" id="email-password-login"></a>

* `loginWithEmailAndPassword` 메서드를 사용하여 이메일로 로그인한 후 Firebase에 인증 정보를 전달하고, 인증을 완료합니다.
* 이후 `loginWepin` 메서드를 사용하여 Firebase Token을 통해 위핀에 로그인합니다.

#### OAuth Provider 로그인 <a href="#oauth-provider-login" id="oauth-provider-login"></a>

* (Web SDK 사용 시) `loginWithOauthProvider` 메서드를 사용하여 OAuth Provider로 로그인한 후 Firebase에 인증 정보를 전달하고, 인증을 완료합니다.
* (Web 외 SDK 사용 시)`loginWithOauthProvider` 메서드를 사용하여 OAuth Provider로 로그인한 후, OAuth Token(Access Token 또는 ID Token)을 발급받습니다.
* 이후 `loginWithIdToken` 또는 `loginWithAccessToken` 메서드를 사용하여 해당 OAuth Token을 Firebase에 전달하고, 인증을 완료합니다.
* 이후 `loginWepin` 메서드를 사용하여 Firebase Token을 통해 위핀에 로그인합니다.

### 로그인 일원화 UI 사용 <a href="#using-simplified-login-ui" id="using-simplified-login-ui"></a>

로그인 일원화 기능을 통해, 앱의 회원가입과 지갑 로그인을 단일 프로세스로 처리할 수 있습니다. 이 방식은 사용자 경험을 단순화하고, 한 번의 로그인으로 앱과 지갑 모두에 접근할 수 있게 합니다.

* 로그인 라이브러이의 `loginWithIdToken`, `loginWithAccessToken` 메서드를 사용하여 OAuth 및 Firebase 토큰을 처리하며, 로그인 일원화를 구현할 수 있습니다.

보다 상세한 내용은 로그인 일원화 페이지를 통해 살펴보세요.

{% content-ref url="simplified-login" %}
[simplified-login](https://docs.wepin.io/login/simplified-login)
{% endcontent-ref %}