Experience Builder 지침 및 제한 사항
Experience Builder는 사용자가 역동적이고 매력적인 웹 페이지를 손쉽게 만들 수 있도록 설계된 강력한 도구입니다. 최적의 성능, 사용성 및 보안을 보장하기 위해 페이지 구성, 위젯 사용 및 레이아웃 사용자 정의 시 특정 지침 및 권장 사항을 따라야 합니다. 이 문서에서는 사용자가 Experience Builder로 작업하는 동안 고려해야 할 주요 참고 사항 및 주요 사항에 대해 자세히 설명합니다.
여기에 설명된 정보는 페이지 및 위젯 구성, 사용자 정의 옵션, 사용자 정의 코드 처리 및 보안 고려 사항과 같은 주요 측면에 대해 다룹니다. 사용자는 이러한 권장 사항을 준수함으로써 Experience Builder 프로젝트의 효율성을 최대화하고 일반적인 위험을 방지하며 업데이트 및 변경 사항에 원활하게 적응할 수 있습니다.
페이지 및 위젯 구성
최대 페이지 수
Experience Builder에서 최대 1000개의 페이지를 만들 수 있습니다. 상한선이지만 불필요한 복잡성을 피하기 위해 페이지를 전략적으로 계획하는 것이 좋습니다.
페이지당 위젯
- 하드 제한: 한 페이지에 최대 25개의 위젯을 추가할 수 있습니다.
- 권장 제한: 성능 향상을 위해 페이지당 10개 이하의 위젯을 사용하는 것이 좋습니다.
- API 기반 위젯: ALM API에 종속된 위젯(예: 강의 및 경로, 범주, 내 학습, 소셜 학습, 달력, 규정 준수, 순위표)은 페이지당 10개로 제한되어야 합니다.
- 독립 위젯: ALM API에 의존하지 않는 HTML 및 콘텐츠 상자와 같은 위젯은 최대 25개 위젯의 하드 제한까지 사용할 수 있습니다.
일회용 위젯
달력, 소셜 학습, 규정 준수 및 순위표 등의 특정 위젯은 페이지당 한 번만 사용해야 합니다. 이러한 옵션을 여러 번 사용하면 성능 문제가 발생할 수 있으며, 특히 달력과 같은 위젯의 경우 세션을 로드하는 데 상당한 리소스가 필요합니다.
위젯 크기 조정 지침
달력, 순위표, 소셜 및 규정 준수와 같은 위젯은 페이지의 최소 1/3 너비로 레이아웃에 배치해야 합니다. 최적의 표시를 위해 이 너비에는 단일 카드 위젯이 가장 적합합니다. 달력 및 규정 준수(확장된 보기)와 같은 위젯은 더 나은 사용자 경험을 제공하기 위해 반자 레이아웃용으로 설계되었습니다. 다른 레이아웃 크기의 경우 위젯은 사용 가능한 공간에 맞게 반응형으로 조정되며 사용성을 유지합니다.
이 권장 크기 지침 내에 위젯을 사용하면 전반적인 사용자 상호 작용이 향상됩니다.
사용자 정의 지침
기본 픽셀 거리
세로 거리: 위젯 사이의 기본 세로 거리는 80픽셀입니다.
수평 거리: 위젯 사이의 기본 수평 거리는 20픽셀입니다.
사용자 정의 CSS
사용자는 사용자 정의 CSS를 사용하여 기본 거리 및 기타 시각적 속성을 재정의할 수 있습니다.
사용자 정의를 위한 단계:
- Inspect은 CSS 클래스를 식별하기 위한 페이지 요소를 제공합니다.
- 전역 수준, 위젯 수준 또는 페이지 수준에서 변경 사항을 적용합니다.
예를 들어 위젯 간의 세로 거리를 줄이려면 관련 클래스의 CSS 속성을 수정합니다.
메뉴 위치 지정
메뉴는 페이지의 위쪽 또는 왼쪽에 배치할 수 있습니다. 사용자 정의 CSS를 사용하여 추가로 조정할 수 있습니다.
기능별 권장 사항
소셜 학습 및 게임화 위젯
- 이러한 기능이 비활성화된 경우 관리자는 페이지에서 해당 위젯을 수동으로 제거해야 합니다.
- 이러한 기능을 비활성화한 후에도 페이지가 제대로 작동하고 시각적으로 손상되지 않도록 다시 디자인해야 합니다.
사용자 정의 코드 처리
업데이트의 영향
- 백엔드에 삽입된 기존 사용자 정의 코드(HTML, CSS, JS)가 Experience Builder 업데이트 후 예상대로 작동하지 않을 수 있습니다.
- 사용자는 업데이트된 클래스 이름과 같은 새로운 UI 변경 내용에 맞게 코드를 재작성해야 합니다.
프런트엔드 지원
- HTML 위젯 또는 계정 수준 CSS/JS 블록을 사용하여 관리 포털에서 직접 사용자 정의 코드를 추가합니다.
면책 조항
- 사용자 정의 코드는 향후 릴리스에서 예상대로 작동하지 않을 수 있으므로 조정이 필요합니다. 각 릴리스 후 코드를 업데이트할 준비를 하십시오.
일반 권장 사항
성능 고려 사항
- 성능 저하를 방지하려면 권장 위젯 제한을 초과하지 마십시오.
- 리소스 사용량이 많은 위젯(예: 달력)을 페이지에 여러 번 사용하면 페이지 로드 시간에 상당한 영향을 줄 수 있습니다.
보안 고려 사항
- HTML 위젯: XSS(크로스 사이트 스크립팅) 공격과 같은 보안 문제는 Experience Builder의 제어 범위를 벗어나므로 코드에서 처리해야 합니다.
- 사용자 지정 바닥글: HTML 또는 CSS를 사용하여 바닥글을 사용자 지정할 때 코드가 보안 모범 사례를 준수하는지 확인하십시오.
변경 내용 깨뜨리기
Experience Builder를 업데이트하면 사용자 정의에 대한 변경 사항이 중단될 수 있습니다. 사용자의 의무:
- 새 UI 요소와 일치하도록 코드를 조정합니다.
- 업데이트할 때마다 사용자 정의를 테스트합니다.
추가 정보
사용자 정의 CSS 구현
- 페이지 요소를 검사하고, CSS 클래스를 복사하고, 원하는 속성을 적용하여 위젯 수준 또는 페이지 수준에서 레이아웃을 전체적으로 사용자 정의할 수 있습니다.
위젯 ID 및 페이지 ID
각 위젯과 페이지에는 대상 CSS 변경 내용에 사용할 수 있는 고유 ID가 있습니다. 이를 통해 다양한 수준에서 사용자 정의할 수 있습니다.
- 전체 레벨: 모든 페이지에 CSS 변경 사항을 적용합니다.
- 위젯 수준: CSS 변경 사항을 특정 위젯에 적용합니다.
- 페이지 수준: 특정 페이지 내의 모든 위젯에 CSS 변경 사항을 적용합니다.