위젯 사용자 정의

작동 방식

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

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

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

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

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

게시자 계정에서 위젯 맞춤 설정

다음과 같은 장점이 있어서 게시자 계정에서의 위젯 편집을 권장합니다.

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

알림
게시자 계정을 통한 위젯 변경 사항은 사용되는 모든 곳에 적용됩니다.
주의
위젯 맞춤 설정은 엑솔라 제품 라이선스 계약에 서명한 이후에만 사용할 수 있습니다. 계약에 서명하려면, 게시자 계정계약 섹션으로 이동합니다.

위젯 맞춤 설정 방법:

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

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

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

위젯 편집기 사용 방법

  1. 위젯 편집기를 열려면, 위젯 맞춤 설정 페이지에서 맞춤 설정을 클릭합니다.
  2. 편집기 창에서 위젯 스타일에 필요한 사항을 변경합니다:모든 변경 사항은 위젯 미리보기 영역에 실시간으로 표시됩니다.

알림
모든 매개 변수 변경 사항은 자동으로 저장되므로 언제든지 위젯 편집을 중단 및 재개할 수 있습니다.

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

알림
편집기에서 언어를 변경해도 위젯이 사용자에게 표시되는 언어에는 영향을 주지 않습니다.

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

주의
일단 한 번 게시하면, 위젯 변경 사항은 연결된 모든 application과 웹 사이트에 걸쳐서 변경됩니다.
알림
게시 후, 위젯 맞춤 설정 페이지에 브라우저가 캐쉬에서 불러 온 이전 버전의 위젯이 표시될 수도 있습니다. 이러한 경우에는, Control+F5를 눌러서 페이지 새로 고침을 하세요.

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

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

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

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

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

위젯 색상 구성 변경 방법

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

  • 문장 - 설명 문장, 입력 필드 콘텐츠 및 위젯 하단 버튼의 SNS 로고에 사용됩니다.
  • 버튼 - 로그인수락 및 생성 버튼, 강조 표시된 필드 및 버튼 윤곽, 활성 위젯 탭 링크 및 제목에 사용됩니다.
  • 페이지 색조 - 위젯 배경 색상을 정의합니다.
전체 화면 모드에서 위젯이 표시되는 페이지 색상은 버튼페이지 색조 색상의 조합으로 이루어집니다. 이 색상은 자동으로 설정됩니다.

알림
선택한 색상 구성과 무관하게 위젯 상단의 가장 많이 사용되는 SNS 버튼은 항상 동일한 색상을 유지합니다.

위젯 기본 색상 변경 방법:

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

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

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

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

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

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

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

버튼 형상 변경 방법

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

곡률 변경 방법:

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

SNS 버튼 표시 순서 변경 방법

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

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

알림
SNS 버튼이 위젯에 표시되는 순서를 다르게 지정하려면, 계정 관리자에게 문의하세요.

위젯 표시 언어 설정 방법

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

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

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

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

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

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

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

알림
여러분의 application 혹은 웹 사이트에 통합된 위젯 초기화 코드에서 preferredLocale 값을 직접 바꾸어도 위젯 표시 언어를 맞춤 설정할 수 있습니다.

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

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

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

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

알림
위젯 표시 언어는 JSON 파일에서 설정하지 않고 preferredLocale 매개 변수를 사용하여 위젯 초기화 코드에서 설정합니다.
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.
이 페이지 평가
이 페이지 평가
개선해야 할 점이 있을까요?

답하기 원하지 않습니다

의견을 보내 주셔서 감사드립니다!
마지막 업데이트: 2022년 8월 8일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!