기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # 브랜딩 에디터와 관리형 로그인 사용자 지정 브랜딩 편집기는 관리형 로그인 웹 페이지를 위한 시각적 디자인 및 편집 도구입니다. Amazon Cognito 콘솔에 내장되어 있습니다. 브랜딩 편집기에서 로그인 페이지의 미리 보기로 시작하여 빠른 설정 옵션 또는 고급 옵션이 포함된 세부 보기로 진행할 수 있습니다. 스타일 파라미터를 수정 및 미리 보거나 사용자 지정 배경 이미지 및 로고를 추가할 수 있습니다. 라이트 모드와 다크 모드를 구성할 수 있습니다. ![Amazon Cognito 사용자 풀의 브랜딩 편집기 시각적 편집기 미리 보기입니다.](http://docs.aws.amazon.com/ko_kr/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) 시작하려면 사용자 풀 또는 앱 클라이언트에 적용할 수 있는 스타일을 생성합니다. **브랜딩 편집기를 시작하려면** 1. **도메인** 탭에서 [도메인을 생성](cognito-user-pools-assign-domain.md)하거나 기존 도메인을 업데이트합니다. **브랜딩 버전**에서 **관리형 로그인**을 사용하도록 도메인을 설정합니다. 1. 기존 앱 클라이언트 스타일이 있는 경우 삭제합니다. 1. **앱 클라이언트** 메뉴에서 앱 클라이언트를 선택합니다. 1. **관리형 로그인 스타일**에서 앱 클라이언트에 할당된 스타일을 선택합니다. 1. **스타일 삭제**를 선택합니다. 선택 항목을 확인합니다. 1. 사용자 풀의 **관리형 로그인** 메뉴로 이동합니다. 아직 선택하지 않은 경우 프롬프트에 따라 관리형 로그인이 포함된 [기능 플랜](cognito-sign-in-feature-plans.md)을 선택합니다. 변경하지 않고 브랜딩 편집기를 체크아웃하려면 **이 기능 미리 보기**를 선택할 수도 있습니다. 1. **스타일**에서 **스타일 생성**을 선택합니다. 1. 스타일을 할당할 앱 클라이언트를 선택하고 **생성**을 선택합니다. 새 앱 클라이언트를 생성할 수도 있습니다. 1. Amazon Cognito 콘솔이 브랜딩 편집기를 시작합니다. 1. 편집을 시작할 탭을 선택하거나 **편집기 시작**을 선택하고 [빠른 설정](#branding-designer-quick-setup)을 입력합니다. 다음 탭을 사용할 수 있습니다. **미리 보기** 관리형 로그인 페이지에서 현재 선택 항목이 어떻게 보이는지 확인합니다. **기본** 전체 테마를 설정하고, 외부 ID 제공업체에 대한 링크를 구성하고, 양식 필드를 스타일화합니다. **구성 요소** 헤더, 바닥글 및 개별 UI 요소에 대한 스타일을 구성합니다. 1. 초기 설정을 선택하려면 빠른 설정을 입력합니다. **설정 범주 변경**을 선택하고 **빠른 설정**을 선택합니다. **계속**을 선택하면 구성할 수 있는 기본 옵션 세트와 함께 브랜딩 편집기가 시작됩니다. ## 텍스트 및 현지화 브랜딩 편집기에서는 텍스트를 수정하거나 현지화할 수 없습니다. 대신 사용자에게 배포하는 URL에 `lang` 쿼리 파라미터를 추가합니다. 이 파라미터를 사용하면 관리형 로그인 페이지가 사용 가능한 여러 언어 중 하나로 현지화됩니다. 자세한 내용은 [관리형 로그인 현지화](cognito-user-pools-managed-login.md#managed-login-localization) 단원을 참조하십시오. ## 빠른 설정 **브랜딩 편집기 시작** 버튼은 다양한 기본 사용자 지정 옵션 중에서 선택할 수 있는 관리형 로그인 구성의 시각적 편집기를 로드합니다. 선택하면 Amazon Cognito가 미리 보기 창에서 관리형 로그인 변경 사항을 렌더링합니다. 세부 설정 메뉴로 돌아가려면 **설정 범주 변경** 버튼을 선택합니다. **전반적인 디자인과 느낌은 어떤가요?** 관리형 로그인에 대한 기본 테마 설정을 구성합니다. **표시 모드** 관리형 로그인을 위한 라이트 모드, 다크 모드 또는 적응형 환경을 선택합니다. Amazon Cognito가 관리형 로그인을 렌더링할 때 적응형 설정은 사용자의 브라우저 기본 설정에 따라 달라집니다. 브라우저 적응 모드를 선택하면 밝은 모드와 어두운 모드에 대해 다양한 색상과 로고 이미지를 선택할 수 있습니다. **Spacing** 페이지의 요소 간에 기본 간격을 설정합니다. **테두리 반경** 요소의 바깥쪽 테두리의 반올림 깊이를 설정합니다. **페이지 배경은 어떻게 보여야 하나요?** **배경 유형** **이미지 표시** 확인란은 배경 이미지를 설정할지 아니면 단색 배경 색상을 설정할지를 나타냅니다. 1. 이미지를 사용하려면 **이미지 표시**를 선택하고 라이트 모드와 다크 모드의 배경 이미지를 선택합니다. 이미지에서 다루지 않는 배경 영역에 대해 다크 모드 및 라이트 모드 **페이지 배경색**을 설정할 수도 있습니다. 1. 배경에 색상만 사용하려면 **이미지 표시**를 선택 취소하고 라이트 모드 및 다크 모드 **페이지 배경 색상**을 선택합니다. **양식은 어떻게 보여야 하나요?** 관리형 로그인의 양식 요소에 대한 설정을 구성합니다. 양식 항목의 예로는 로그인 및 코드 프롬프트가 있습니다. **가로 맞춤** 양식 필드의 수평 정렬을 설정합니다. **양식 로고** 로고 이미지의 위치를 설정합니다. **로고 이미지** 라이트 모드와 다크 모드의 양식 요소에 포함할 로고 이미지 파일을 선택합니다. 이미지를 업로드하려면 **로고 이미지** 드롭다운을 선택하고 **새 자산 추가**를 선택한 다음 로고 파일을 추가합니다. **기본 브랜딩 색상** 라이트 모드와 다크 모드의 테마 색상을 설정합니다. 이 색상은 기본으로 분류된 모든 요소에 배경 색상으로 적용됩니다. **헤더는 어떻게 표시되어야 하나요?** 관리형 로그인 페이지에 헤더를 포함할지 여부를 선택합니다. 헤더에는 로고 이미지가 포함될 수 있습니다. **헤더 로고** 헤더에서 로고 이미지의 위치를 설정합니다. **로고 이미지** 헤더에 포함할 로고 위치와 로고 이미지 파일을 선택합니다. 이미지를 업로드하려면 **로고 이미지** 드롭다운을 선택하고 **새 자산 추가**를 선택한 다음 로고 파일을 추가합니다. **헤더 배경색** 헤더 배경의 라이트 모드 색상과 다크 모드 색상을 설정합니다. ## 세부 설정 세부 설정 보기에서 **파운데이션** 및 **구성 요소**의 개별 성 요소를 수정할 수 있습니다. **미리 보기** 탭에는 사용자 지정과 함께 현재 컨텍스트의 관리형 로그인 미리 보기가 표시됩니다. ![관리형 로그인 구성 요소의 세부 구성 AWS Management Console 스크린샷입니다.](http://docs.aws.amazon.com/ko_kr/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) 구성 요소의 시각적 편집기를 입력하려면 구성 요소의 타일에서 편집 아이콘을 선택합니다. 테마 스튜디오 편집기에서 **설정 범주 변경** 버튼을 사용하여 구성 요소 간에 전환할 수 있습니다. ### 기본 **앱 스타일** 관리형 로그인 구성의 기본 사항을 구성합니다. 이 범주에는 전체 테마, 텍스트 간격, 페이지 헤더 및 바닥글에 대한 설정이 있습니다. **표시 모드** 관리형 로그인 페이지를 위한 라이트 모드, 다크 모드 또는 적응형 환경을 선택합니다. 브라우저 적응 모드를 선택하면 밝은 모드와 어두운 모드에 대해 다양한 색상과 로고 이미지를 선택할 수 있습니다. **Spacing** 페이지의 요소 간에 기본 간격을 설정합니다. **인증 동작** 사용자를 외부 ID 제공업체(idP)에 연결하는 버튼의 스타일을 구성합니다. 이 섹션에는 관리형 로그인 프롬프트 사용자에게 이메일 주소를 제공하고 이를 [SAML 자격 증명 공급자 식별자](cognito-user-pools-managing-saml-idp-naming.md)와 일치시키는 **도메인 검색 입력** 옵션이 포함되어 있습니다. **양식 동작** 입력 양식의 스타일 구성: 입력 위치, 색상 및 요소 정렬. ### 구성 요소 **버튼** Amazon Cognito가 관리형 로그인 페이지에서 렌더링하는 버튼의 스타일입니다. **분할 도구** 입력 양식과 외부 공급자 로그인 선택기와 같은 관리형 로그인 요소 간의 분할선 및 경계에 대한 스타일입니다. **Dropdown** 드롭다운 메뉴의 스타일입니다. **파비콘** Amazon Cognito가 탭 및 북마크 아이콘에 제공하는 이미지 스타일입니다. **포커스 링** 현재 선택된 입력을 나타내는 하이라이트의 스타일입니다. **양식 컨테이너** 양식을 바인딩하는 요소의 스타일입니다. **글로벌 바닥글** Amazon Cognito가 관리형 로그인 페이지 하단에 표시하는 바닥글의 스타일입니다. **글로벌 헤더** Amazon Cognito가 관리형 로그인 페이지 상단에 표시하는 헤더의 스타일입니다. **표시** 오류 및 성공 메시지의 스타일입니다. **옵션 제어** 확인란, 다중 선택 및 기타 입력 프롬프트의 스타일입니다. **페이지 배경** 관리형 로그인의 전체 배경에 대한 스타일입니다. **입력** 양식 필드 입력 프롬프트의 스타일입니다. **링크** 관리형 로그인 페이지의 하이퍼링크 스타일입니다. **페이지 텍스트** 페이지 내 텍스트의 스타일입니다. **필드 텍스트** 양식 입력 주변의 텍스트 스타일입니다. ## 관리형 로그인 브랜딩을 위한 API 및 SDK 작업 API 작업인 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 및 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)을 사용하여 관리형 로그인 스타일에 브랜딩을 적용할 수도 있습니다. 이러한 작업은 다른 앱 클라이언트 또는 사용자 풀에 대해 동일하거나 약간 수정된 버전의 브랜딩 스타일을 생성하는 데 적합합니다. API 작업 [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html)을 사용하여 기존 스타일의 관리형 로그인 브랜딩을 쿼리한 다음 필요에 따라 출력을 수정하고 다른 리소스에 적용합니다. `UpdateManagedLoginBranding` 작업은 스타일이 적용되는 앱 클라이언트를 변경하지 않습니다. 앱 클라이언트에 할당된 기존 스타일만 업데이트합니다. 앱 클라이언트의 스타일을 완전히 바꾸려면 [DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html)으로 기존 스타일을 삭제하고 `CreateManagedLoginBranding`으로 새 스타일을 할당합니다. Amazon Cognito 콘솔에서도 마찬가지입니다. 기존 스타일을 삭제하고 새 스타일을 생성해야 합니다. API 또는 SDK 요청에서 관리형 로그인 브랜딩을 설정하려면 설정을 `Document` 데이터 유형으로 변환되는 JSON 파일에 포함해야 합니다. 다음은 추가할 수 있는 이미지와 브랜딩 스타일을 구성하기 위한 프로그래밍 방식 요청을 생성하는 방법에 대한 지침입니다. ### 이미지 자산 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 및 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)에는 `Assets` 파라미터가 포함됩니다. 이 파라미터는 base64 인코딩 바이너리 형식의 이미지 파일 배열입니다. **참고** 브랜딩 스타일을 생성하거나 업데이트하는 프로그래밍 방식의 요청은 요청 크기가 2MB 이하여야 합니다. 요청의 자산으로 인해 이 제한을 초과할 수 있습니다. 이 경우 최대 요청 크기를 초과하지 않는 파라미터 그룹에 대해 요청을 여러 개의 `UpdateManagedLoginBranding` 요청으로 나눕니다. 이러한 요청으로 인해 지정되지 않은 파라미터가 기본값으로 설정되지 않으므로 기존 설정에 영향을 주지 않고 부분 요청을 보낼 수 있습니다. 일부 자산에는 제출할 수 있는 파일 유형에 대한 제한이 있습니다. **** | 자산 | 허용되는 파일 확장명 | | --- | --- | | FAVICON\_ICO | ico | | FAVICON\_SVG | svg | | EMAIL\_GRAPHIC | png, svg, jpeg | | SMS\_GRAPHIC | png, svg, jpeg | | AUTH\_APP\_GRAPHIC | png, svg, jpeg | | PASSWORD\_GRAPHIC | png, svg, jpeg | | PASSKEY\_GRAPHIC | png, svg, jpeg | | PAGE\_HEADER\_LOGO | png, svg, jpeg | | PAGE\_HEADER\_BACKGROUND | png, svg, jpeg | | PAGE\_FOOTER\_LOGO | png, svg, jpeg | | PAGE\_FOOTER\_BACKGROUND | png, svg, jpeg | | PAGE\_BACKGROUND | png, svg, jpeg | | FORM\_BACKGROUND | png, svg, jpeg | | FORM\_LOGO | png, svg, jpeg | | IDP\_BUTTON\_ICON | ico, svg | SVG 유형의 파일은 다음 속성과 요소를 지원합니다. ------ #### [ Attributes ] ``` accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan ``` ------ #### [ Elements ] ``` svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence ``` ------ ### 관리형 로그인 브랜딩 작업을 위한 도구 Amazon Cognito는 관리형 로그인 브랜딩 설정 객체에 대해 [JSON-Schema 형식](https://json-schema.org/docs)으로 파일을 관리합니다. 다음은 브랜딩 스타일을 프로그래밍 방식으로 업데이트하는 방법입니다. **사용자 풀 API에서 브랜딩을 업데이트하려면** 1. Amazon Cognito 콘솔에서 사용자 풀의 관리형 로그인 메뉴에서 기본 **관리형 로그인** 브랜딩 스타일을 생성합니다. 앱 클라이언트에 할당합니다. 1. 예를 들어 `1example23456789`와 같이 스타일을 만든 앱 클라이언트의 ID를 기록합니다. 1. `ReturnMergedResources`가 `true`로 설정된 [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html) API 요청을 사용하여 브랜딩 스타일의 설정을 검색합니다. 다음은 요청 본문의 예입니다. ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. 사용자 지정을 사용하여 `DescribeManagedLoginBrandingByClient`의 출력을 수정합니다. 1. 응답 본문은 생성 및 업데이트 작업을 위한 구문의 일부가 아닌 `ManagedLoginBranding` 요소로 래핑됩니다. JSON 객체의 이 최상위 수준을 제거합니다. 1. 이미지를 바꾸려면 `Bytes` 값을 각 이미지 파일의 Base64-encoded 바이너리 데이터로 바꿉니다. 1. 설정을 업데이트하려면 `Settings` 객체의 출력을 수정하고 다음 요청에 포함시킵니다. Amazon Cognito는 API 응답에서 수신하는 스키마에 없는 `Settings` 객체의 값을 무시합니다. 1. [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 또는 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) 요청에서 업데이트된 응답 본문을 사용합니다. 이 요청의 크기가 2MB를 초과하는 경우 여러 요청으로 구분합니다. 이러한 작업은 달리 지정하지 않는 한 원래 설정이 변경되지 않은 상태로 유지되는 `PATCH` 모델에서 작동합니다.