위젯 사용자 정의

작동 방식

로그인 위젯은 여러분 application에서 사용자를 등록하고 인증하기 위한 그래픽 인터페이스입니다. 위젯은 사용자 자격증명을 입력하기 위한 필드와 SNS를 통한 로그인을 위한 버튼을 포함할 수 있습니다. 위젯은 또한, 예를 들어 비밀번호 초기화 혹은 확인 코드 요청을 위한 설명 문구나 추가 버튼을 포함할 수 있습니다.

엑솔라는 표준 위젯 템플릿을 제공합니다. 그 외형과 콘텐츠는 여러분의 프로젝트를 위해 선택한 로그인 메소드에 의해 결정됩니다. 아래 내용은 고전적 로그인 위젯 표준 화면입니다.

애플리케이션 및 웹사이트의 인터페이스와 일관되고 인식 가능하도록 로그인 제품을 사용하여 위젯을 사용자 정의할 수 있습니다. 이러한 목적을 달성하기 위해 다음 작업을 수행할 수 있습니다.

• 자신의 로고 추가
• 색상 구성 변경
• 이미지를 업로드하여 위젯 주변 배경으로 사용
• 버튼 형태 및 입력 필드 윤곽 변경
• 위젯에 SNS 버튼 순서 (이 순서는 현지화 대상국 선택에 따라 결정됩니다) 변경
• 위젯 표시 언어 설정

위젯의 외형과 콘텐츠를 맞춤 설정할 수 있습니다.

• 관리자 페이지의 그래픽 편집기 사용
• 상응하는 엑솔라 로그인 위젯 SDK 라이브러리의 JSON 파일 설정 변경

관리자 페이지에서 위젯 맞춤 설정

다음과 같은 장점이 있어서 관리자 페이지에서의 위젯 편집을 권장합니다.

• 실시간으로 변경 사항 보기
• 편집기 혹은 위젯 맞춤 설정 페이지의 미리보기 창에서 위젯 버튼 동작을 바로 테스트해보기

위젯 맞춤 설정 방법:

1. 관리자 페이지에서 프로젝트를 열고 로그인 섹션으로 이동합니다.
2. 로그인 프로젝트 패널의 구성을 클릭합니다.
3. 탐색 페이지에서 맞춤 설정 블록으로 이동하여 위젯 맞춤 설정 섹션을 선택합니다.

4. 언어 및 위젯 현지화 국가를 선택합니다 (선택 사항).
5. 편집기로 위젯 스타일 맞춤 설정.
6. 모든 설정 완료 후, 위젯 미리보기 영역 위의 버튼을 사용하여 HTML 모드로 전환합니다.

7. 생성된 위젯 초기화 코드를 복사하기 위하여 코드 복사를 클릭합니다. 이 코드를 사용하여 application 혹은 웹 사이트에 위젯을 통합합니다.

위젯 편집기 사용 방법

1. 위젯 편집기를 열려면, 위젯 맞춤 설정 페이지에서 맞춤 설정을 클릭합니다.
2. 편집기 창에서 위젯 스타일에 필요한 사항을 변경합니다:
   • 자신의 로고 추가
   • 위젯 색상 구성 변경
   • 이미지 업로드 및 위젯 주변 영역 배경에 사용
   • 버튼 및 입력 필드 윤곽 형태 설정
   모든 변경 사항은 위젯 미리보기 영역에 실시간으로 표시됩니다.

3. 위젯에 서로 다른 언어로 어떻게 표시되는지 확인하려면 위젯 미리보기 영역 위의 드롭다운 목록에서 언어를 변경합니다.

4. 위젯 편집기에서 모든 변경 사항을 완료한 후 게시를 클릭합니다.

로고 추가 방법

1. 위젯 편집기를 엽니다.
2. 편집기 사이드바에서, 로그인 위젯을 클릭합니다.
3. 열린 로그인 위젯 편집기에서 로고 토글을 선택합니다.

4. 토글 아래 업로드 버튼을 클릭합니다.
5. 파일 검색창에서, 로고 이미지 파일을 선택하고 열기를 클릭합니다.

편집기 사이드바에 자산 패널이 열립니다. 업로드한 로고가 이 패널과 위젯 미리보기 영역에 나타납니다.

6. 다른 로고 버전을 테스트하려면, 자산 패널의 업로드 버튼을 사용합니다.

7. 위젯에 서로 다른 로고 버전을 표시하려면, 자산 패널의 이미지를 클릭합니다.
8. 로고 맞춤 설정 완료 후, 자산 패널을 닫습니다. 최종 선택 사항은 자동으로 저장됩니다.

위젯 색상 구성 변경 방법

위젯 색상 구성은 세 가지 기본 색상에 의해 정의됩니다:

• 문장 - 설명 문장, 입력 필드 콘텐츠 및 위젯 하단 버튼의 SNS 로고에 사용됩니다.
• 버튼 - 로그인과 수락 및 생성 버튼, 강조 표시된 필드 및 버튼 윤곽, 활성 위젯 탭 링크 및 제목에 사용됩니다.
• 페이지 색조 - 위젯 배경 색상을 정의합니다.

위젯 기본 색상 변경 방법:

1. 위젯 편집기 열기.
2. 편집기 사이드바에서, 전역 테마를 클릭하고 변경하려는 기본 색상 버튼을 클릭합니다.
3. 다음 방법중 하나를 통해 신규 색상을 선택합니다:
   • 열린 색상 팔레트에서 지정합니다. 팔레트에서 색상을 변경하려면, 그 아래 슬라이더를 사용합니다.
   • 모드를 변경하려면 슬라이더바 아래 버튼을 사용합니다: HEX, RGB 혹은 HSL, 그리고 선택한 형식의 색상 코드를 입력합니다.
   색상 구성 변경 내역은 위젯 미리보기 영역에 실시간으로 표시됩니다.

4. 필요한 경우, 다른 기본 색상도 같은 방식으로 변경합니다.

위젯 주위 영역에 배경 이미지 넣는 방법

1. 위젯 편집기를 엽니다.
2. 편집기 사이드바에서 로그인 위젯을 클릭합니다.
3. 페이지 배경 섹션의 열린 로그인 위젯 편집기 패널에서, + 아이콘을 클릭하고 업로드 버튼을 클릭합니다.

4. 파일 탐색창에서 배경 이미지 파일을 선택하고 열기를 클릭합니다.

자산 패널이 편집기 사이드바에서 열립니다. 업로드한 이미지는 이 패널과 위젯 근처 영역에 모두 나타납니다.

5. 다른 배경 이미지 버전을 테스트하려면, 자산 패널의 업로드 버튼을 사용합니다.
6. 위젯 미리보기 영역에 다양한 배경을 표시하려면, 자산 패널에서 이미지를 클릭합니다.
7. 배경 이미지 맞춤 설정을 완료한 이후, 자산 패널을 닫습니다. 최종 선택 사항은 자동으로 저장됩니다.

버튼 형상 변경 방법

위젯의 모든 버튼과 입력 필드는 모서리가 둥근 직사각형 혹은 정사각형입니다. 곡률은 0(직각)에서 100% 사이입니다.

곡률 변경 방법:

1. 위젯 편집기를 엽니다.
2. 위젯 버튼 형상을 선택하기 위해 곡률도 슬라이더를 사용합니다.

SNS 버튼 표시 순서 변경 방법

SNS 버튼은 일단 로그인 프로젝트 설정에 연결되어야만 위젯에 표시될 수 있습니다. 버튼 순서는 현지화 국가에 따라 결정됩니다. 위젯은 해당 국가에서 가장 인기있는 네트워크의 인기도에 따라 왼쪽에서 오른쪽의 순서로 내림차순으로 정렬하여 버튼을 표시합니다. 위젯 맨 윗줄에는 각 사용자가 application에 들어간 최종 SNS가 표시됩니다.

국가 매개 변수는 기본으로 자동 감지로 설정됩니다. 이 설정을 변경하려면, 위젯 맞춤 설정 페이지의 국가 드론다운 목록을 사용합니다.

위젯 표시 언어 설정 방법

표준 엑솔라 로그인 위젯은 20개 언어로 현지화됩니다. 인터페이스 현지화 언어는 preferredLocale 변수의 처음 두 문자로 인코딩되는데 이는 위젯 초기화 시 위젯에 전달됩니다.

사례: 위젯을 영어로 표시하려면, preferredLocale: "en_XX"를 설정합니다.

preferredLocale 변수 값이 설정되지 않으면, 언어는 IP 주소 혹은 브라우저 언어에 따라 자동으로 결정됩니다.

위젯이 사용자에게 표시되는 언어 설정 방법:

1. 위젯 맞춤 설정 페이지에서 사용 가능 언어 드롭다운 목록으로부터 언어를 선택합니다.

엑솔라가 생성한 위젯 초기화 코드에서, preferredLocale 변수는 여러분의 선택에 따라 값이 변경됩니다.

2. 초기화 코드를 보려면, HTML 모드로(미리보기 영역 위 버튼 사용) 전환합니다.
3. 위젯이 선택한 언어로 어떻게 보일지 확인하려면, 미리보기 모드로 전환합니다.

JSON 파일을 이용하여 위젯 맞춤 설정

만약 엑솔라 로그인 위젯 SDK에 이미 연결한 경우, 자신의 관리자 페이지을 사용하지 않고 위젯의 외형과 콘텐츠를 변경할 수 있습니다. 문장 편집기에서 다음 JSON 파일을 변경할 수 있습니다:

• socialsJSON, SNS 버튼이 위젯에 표시되는 순서 설정;
• themeJSON, 위젯 외형 맞춤 설정:
  • 위젯과 그 주변의 색상 구성 설정;
  • 특정 유형 요소의 모서리 곡률 설정: 버튼, 입력 필드, 위젯 자신;
  • 다른 요소를 위한 배경 이미지 사용: 위젯 제목, 위젯 자신, 위젯 주변 영역;
  • 필요한 경우, SNS 버튼 뿐만 아니라 위젯의 인증 혹은 등록 탭도 감춥니다.

편집 가능한 위젯 설정에 관한 내용은 JSON 파일 위젯 설정 섹션에 기술되어 있습니다.

사이트에서 CSS 코드를 사용하여 위젯 사용자 정의하기

1. CSS 파일을 생성하고 로그인 블록에 대한 비주얼 설정을 포함합니다.

글꼴 사용자 정의 코드 예제:

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Chakra-Petch-Regular'),
        url('https://some-url-to-fonts/Chakra-Petch-Regular.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Chakra-Petch-Bold'),
        url('https://some-url-to-fonts/Chakra-Petch-Bold.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Chakra-Petch-Thin'),
        url('https://some-url-to-fonts/Chakra-Petch-Thin.woff2 ') format('woff2');
}

body, .app-block {
    font-family: 'Chakra petch', sans-serif;
}

스타일 사용자 정의 코드 예제:

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. 퍼블릭 액세스 권한이 있는 호스팅용 CSS 코드 파일을 업로드합니다.
3. 초기 스크립트의 customStyle 매개변수에 CSS 코드가 포함된 파일에 대한 링크를 제공합니다.

const xl = new Widget({
  // your other params
 projectId: '[Login ID]',
 preferredLocale: 'en_US',
 // new param for CSS styling
  customStyle: ‘https://your-domain.com/assets/loginWidgetStyles.css’
});

여기서 https://your-domain.com/assets/loginWidgetStyles.css는 스타일이 포함된 CSS 파일에 대한 링크입니다.

웹사이트 빌더를 사용한 위젯 사용자 정의

엑솔라 웹사이트 빌더를 사용하는 경우 빌더의 블록 설정에서 로그인 위젯을 사용자 정의할 수 있습니다.

웹사이트 빌더에서 위젯을 사용자 정의하는 방법:

1. 관리자 페이지에서 프로젝트를 엽니다.
2. 사이드 메뉴에서 웹사이트 빌더를 클릭합니다.
3. 사이트 섹션에서 사이트를 선택한 후 웹사이트 빌더 열기를 클릭합니다.
4. 로그인 설정에서 레이아웃 섹션으로 이동합니다.
5. 로고를 업로드하거나 배경을 사용자 정의합니다. 이렇게 하려면:
   1. 로고 또는 사용자 정의 배경 토글을 선택합니다.
   2. 토글 아래의 업로드 버튼을 클릭합니다.
   3. 파일 검색 창에서 로고 이미지 파일을 선택한 후 열기를 클릭합니다. 편집기의 사이드바에 자산 패널이 열리고 이 패널과 미리보기 영역의 위젯에 업로드한 이미지가 모두 표시됩니다.
   4. 이미지 크기 선택(선택 사항):
      1. 업로드한 이미지를 클릭합니다.
      2. 이미지 섹션에서 크기 드롭다운 목록을 연 후 맞춤 확인, 최대화 또는 맞춤을 선택합니다.
   5. 이미지 색조 변경(선택 사항):
      1. 업로드한 이미지를 클릭합니다.
      2. 이미지 > 색조 섹션에서 ⚙ 아이콘을 클릭한 후 옵션 중 하나를 선택하거나 팔레트에서 아무 색상이나 선택합니다.
   6. 위젯에 다른 버전의 로고나 배경을 표시하려면 자산 패널에서 해당 이미지를 클릭합니다.
6. 엑솔라 로그인 섹션에서 로그인 블록의 색상을 자동으로 선택하도록 설정할 수 있습니다. 이렇게 하려면 사이트 스타일 사용 토글을 선택합니다.

웹사이트 빌더에서 CSS 코드를 사용한 위젯 사용자 정의

1. CSS 파일을 생성하고 로그인 블록에 대한 비주얼 설정을 포함합니다.

예제:

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

2. 퍼블릭 액세스를 위해 호스팅에 CSS 코드가 포함된 파일을 업로드하고 파일 링크를 복사합니다.
3. 웹사이트 빌더에서 블록 추가 > 사용자 정의 코드를 클릭합니다.
4. 다음 코드를 삽입합니다.

<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

여기서 https://your-domain.com/assets/loginWidgetStyles.css는 스타일이 포함된 CSS 파일에 대한 링크입니다.

이 페이지 평가

개선해야 할 점이 있을까요? 전송

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!