Branding

circle-info

경로: Customization ➡ Brand ➡ Create brand


1. Theme

circle-info

Logo, Background, Primary color, Secondary color, Favicon 설정이 가능하며, 설정된 항목은 우측 Sign-in page에서 미리 확인해볼 수 있습니다.

  1. Logo

    • 연필 아이콘을 클릭하여 로고로 설정할 이미지 파일을 업로드할 수 있습니다.

    • 로고는 이메일 템플릿과 Okta 로그인 페이지에 사용됩니다.

    • 파일 최대 1MB, 이미지 픽셀 최소 420px*120px의 파일을 업로드할 수 있습니다.

    • 투명한 배경의 가로 이미지를 업로드를 권장드립니다.

  2. Background

    • 연필 아이콘을 클릭하면 배경 이미지를 업로드할 수 있습니다.

    • 배경은 이메일 템플릿, Okta 로그인 페이지, 오류 페이지에서 사용됩니다.

    • 파일 최대 2MB의 파일을 업로드할 수 있습니다.

  3. Primary color/Secondary color

    • 좌측에 3자리 또는 6자리 16진수 코드 값을 사용하거나 우측에 색상을 클릭하여 원하는 색상을 선택할 수 있습니다.

    • Primary color은 이메일 템플릿 및 Okta 로그인 페이지의 버튼과 사용자 대시보드의 탐색 메뉴 색상으로 사용됩니다.

    • Secondary color은 Okta 로그인 페이지 및 이메일 템플릿의 배경으로 사용됩니다.

  4. Favicon

    • 연필 아이콘을 클릭하면 Favicon을 업로드할 수 있습니다.

    • Favicon은 Okta 로그인 페이지의 브라우저 탭에 사용되는 사각형 아이콘입니다.

    • 이미지 픽셀 최대 512px*512px의 파일을 업로드할 수 있습니다.


2. Pages

circle-info
  • 로그인 페이지, 사용자의 대시보드, 오류 메시지에 대한 페이지를 설정할 수 있습니다.

2.1 Sign-in page (Okta 로그인 페이지)

circle-info
  • 사용자가 Okta 로그인할 때 보여지는 로그인 페이지를 설정할 수 있습니다.

  • 원하는 설정으로 설정한 뒤 "Preview"를 통해서 설정한 설정값을 미리 확인할 수 있습니다.

  • 설정이 완료된 뒤 "Save and publish"를 클릭하면 설정값이 적용됩니다.

circle-info
  • "Code editor"를 통해 설정 할 경우, Okta에서 제공하는 기본 UI가 아닌 웹 소스코드로 제작하여 설정할 수 있습니다.

circle-info
  • Labels을 통해서 편집하려는 레이블 유형의 "Edit"을 클릭하여 해당 값을 수정한 후 바뀐 값에 대해 "Publish"를 클릭해야 수정된 내용이 반영됩니다.

  • 로그인 페이지의 제목, 로그인 페이지의 사용자 이름 또는 비밀번호를 넣은 레이블 등 기타 여러가지 레이블에 대해 수정할 수 있습니다.

  1. Heading > Sign in: 로그인 페이지의 제목 부분을 설정할 수 있습니다.

  2. Username&Password fields: 사용자 ID/PW 부분의 레이블을 설정할 수 있습니다.

  3. Account recovery flow > Recovery flow label: 계정 복구에 대한 레이블을 설정할 수 있습니다.

  4. Customized help links: 암호를 잊거나, 잠긴 계정을 해지하거나, Okta Help URL을 설정하거나, 커스텀 링크를 설정할 경우 사용할 수 있습니다.

  5. Authenticator page custom link: 인증 확인에 대한 커스텀 페이지를 만들어서 사용할 수 있습니다.

2.2 End-User Dashboard

circle-info
  • 사용자의 대시보드에 대해서 4가지 스타일 중 원하는 스타일로 설정할 수 있습니다.

  • 원하는 설정으로 설정한 뒤 "Preview"를 통해서 설정한 설정 값을 미리 확인할 수 있습니다.

  • 설정이 완료된 뒤 "Save and publish"를 클릭하면 설정 값이 적용됩니다.

2.3 Error page

circle-info
  • 오류가 발생했을 경우 나타나는 페이지에 대해 커스텀하게 설정할 수 있습니다.

  • Custom domain을 구성한 경우, "Code editor"를 통해 더욱 광범위하게 커스텀을 설정할 수 있습니다.

  • 원하는 설정으로 설정한 뒤 "Preview"를 통해서 설정한 설정값을 미리 확인할 수 있습니다.

  • 설정이 완료된 뒤 "Save and publish"를 클릭하면 설정값이 적용됩니다.

예시 오류 페이지


3. Emails

circle-info
  • Okta에서 발생한 이벤트 이메일에 대하여 템플릿을 수정할 수 있습니다.

  • 이메일 템플릿에 대한 내용을 수정할 수 있습니다.

circle-info
  • "<>code" 코드 기반으로 내용을 수정할 수 있습니다.

  • "Preview"를 통해서 발송될 이메일에 대해서 미리 볼 수 있습니다.

  • "Send test"를 통해서 발송한 이메일에 대해서 테스트할 수 있습니다.

  • 이메일을 보낼 사용자의 범위를 수정하고, 자동 언어 번역을 통해서 원하는 언어로 이메일을 보낼 수 있습니다.

Last updated