--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/tutorials/faq-page' title: '성능 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:58:39+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder 페이지 로드 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드 구현 그대로 각각을 설명하므로 변경할 항목을 정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 반복하지 않습니다. 빌더 필드의 캐시 동작은 Caching을 참조합니다. 에디터 애셋 소스 Asset source는 Editor Assets 섹션의 DXPR Studio > DXPR Builder > General Settings에서 editor_assets_source를 설정합니다. tags: - 'Volg een tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 성능 description: |- DXPR Builder 페이지 로드 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드 구현 그대로 각각을 설명하므로 변경할 항목을 정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 반복하지 않습니다. 빌더 필드의 캐시 동작은 Caching을 참조합니다. 에디터 애셋 소스 Asset source는 Editor Assets 섹션의 DXPR Studio > DXPR Builder > General Settings에서 editor_assets_source를 설정합니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:58:39+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/tutorials/faq-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/tutorials/faq-page' description: |- DXPR Builder 페이지 로드 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드 구현 그대로 각각을 설명하므로 변경할 항목을 정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 반복하지 않습니다. 빌더 필드의 캐시 동작은 Caching을 참조합니다. 에디터 애셋 소스 Asset source는 Editor Assets 섹션의 DXPR Studio > DXPR Builder > General Settings에서 editor_assets_source를 설정합니다. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 성능. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [접기 패널 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) - [탭 패널 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [페이지를 접근성 있게 만들기](/ko/hc/documentation/learn-dxpr-builder/tutorials/contact-page) - [콘텐츠 유형](/ko/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base) DXPR Builder 페이지 로드 비용은 모듈이 제어하는 세 가지에 달려 있습니다. 에디터 JavaScript 출처, 모듈의 Bootstrap 사이드로드 여부, 저장된 HTML이 요청하는 요소 라이브러리입니다. 이 페이지에서는 코드 구현 그대로 각각을 설명하므로 변경할 항목을 정할 수 있습니다. 일반적인 Drupal 조언(이미지 압축, CDN, 페이지 캐시 설정)은 반복하지 않습니다. 빌더 필드의 캐시 동작은 [Caching](/ko/hc/documentation/learn-dxpr-builder/advanced/caching)을 참조합니다. ## 에디터 애셋 소스 **Asset source**는 **Editor Assets** 섹션의 **DXPR Studio** > **DXPR Builder** > **General Settings**에서 `editor_assets_source`를 설정합니다. | Value | Label | What loads | |---|---|---| | `0` | Cloud | 6개 에디터 스크립트와 `css/dxpr_builder_backend.css`를 `https://cdn2.dxpr.com//`에서 가져오며 제품 키는 `jwt` 쿼리 매개변수로 전달됩니다. | | `1` | Local (minified) | `dxpr_builder/*.min.js` 모듈 디렉터리 버전입니다. | | `2` | Local (unminified) | `dxpr_builder/*.js` 모듈 디렉터리 버전과 `dxpr_builder/editor.dev`입니다. | 해당 설정은 모듈 디렉터리에 로컬 빌드가 있을 때만 표시됩니다. 있으면 Cloud를 설정해도 모듈이 로컬 파일을 쓰는데, 클라우드 애셋은 릴리스용으로만 있기 때문입니다. 사이트가 쓰는 소스를 확인합니다. ```bash drush config:get dxpr_builder.settings editor_assets_source ``` 6개 에디터 스크립트는 절대 집계되지 않습니다. 클라우드 파일은 외부 파일이며, 로컬 항목은 `preprocess: FALSE`와 `defer`로 선언됩니다. Sortable과 Draggabilly가 있는 `dxpr_builder/editor.core` 같은 에디터 헬퍼 라이브러리는 다른 라이브러리처럼 집계되며, 아래 방문자용 파일도 마찬가지입니다. ## Bootstrap 사이드로딩 **Sideload Bootstrap files**(`bootstrap` in `dxpr_builder.settings`)에는 값이 두 개 있습니다. **Bootstrap 5**에서는 포매터가 `dxpr_builder/bootstrap_5`(`bootstrap.min.css`와 `bootstrap.bundle.min.js`, 둘 다 가중치 `-10`)를 빌더 필드를 렌더링하는 모든 페이지에 연결합니다. **None (theme provides Bootstrap)**에서는 아무것도 연결하지 않습니다. 1. 테마가 이미 Bootstrap 5를 로드하는지 확인합니다. 2. 그러면 옵션을 **None**으로 설정하여 방문자가 한 부만 다운로드하게 합니다. 3. 그렇지 않으면 **Bootstrap 5**를 설정합니다. 음수 가중치 덕분에 테마 자체 CSS가 뒤에 로드됩니다. ## 방문자가 로드하는 항목 에디터 접근 권한이 없는 사용자에게는 포매터가 다음을 연결합니다. - `dxpr_builder/core`는 빌더 필드가 있는 모든 페이지에: `dxpr_builder/css/dxpr_builder.css`(`fetchpriority: high` 포함), `js/css-register-properties.js`, 공개 디자인 토큰. - `dxpr_builder/frontend.smooth_scroll`(`dxpr_smooth_scroll.min.js`)은 빌더 필드가 있는 모든 페이지에 있으며 앵커 링크용입니다. - `dxpr_builder/editor.frontend`(`dxpr_frontend.min.js`, 소스 `2`의 축소되지 않은 파일도 해당)는 동적 모드에서만 사용합니다. 저장된 HTML이 `dxpr_frontend.js`를 참조하면 모듈이 필드를 동적 모드로 전환합니다. 에디터는 JavaScript가 필요한 요소(카운터, 캐러셀, 패럴랙스, 동영상 배경)가 있는 페이지에 씁니다. 텍스트, 이미지, 버튼 페이지는 정적으로 유지되며 `core`와 스무스 스크롤 스크립트 외의 빌더 JavaScript 없이 제공됩니다. - 각 요소의 `data-dxpr-builder-libraries` 속성에 지정된 라이브러리: | Element | Library attached | Files | |---|---|---| | Countdown | `elements.counteverest` | Counteverest CSS 및 JS, `js/counteverest-migrate.js` | | Counter | `elements.countto` | `dxb-count-to.min.js` | | Icon, Circle counter | `elements.icon_helpers`와 아이콘 세트 라이브러리 추가 | 아이콘 폰트 CSS 및 폰트 파일 | | Social links | `elements.social_icons`, `elements.font_awesome_6_free`, `elements.icon_helpers` | Font Awesome CSS 및 폰트 | | Progress bar(성장 애니메이션 포함) | `elements.bootstrap_progress_extension` | 확장 CSS 및 JS | | 진입 애니메이션이 있는 모든 요소 | `elements.animate` | `dxpr_animations.min.js`, `native-animations.css` | | Font Awesome 4 또는 5 클래스로 저장된 요소 | `elements.font_awesome_6_free`, `elements.font_awesome_v4_shims` | Font Awesome 및 v4 shim CSS | 동적 모드에서는 `dxpr_frontend.js`가 실행되자마자 Glyphicon, Font Awesome, Bootstrap Icons 스타일시트를 추가하고, 페이지 요소에 필요할 때만 다른 애셋을 로드합니다. 패럴랙스 효과가 있는 섹션용 `dxb-parallax.min.js`입니다. 너비 481픽셀 미만에서는 **Disable on mobile**을 **Background effects** 아래에서 체크하면 건너뜁니다. YouTube 동영상 배경이 있는 섹션용 `vendor/managed/plyr/dist/plyr.min.js`와 해당 CSS, 캐러셀용 `css/carousel.css`입니다. 에디터는 저장 시점에 페이지에 동적 모드가 필요한지 판단하고, 필요하면 저장된 HTML에 `dxpr_frontend.js`용 작은 스크립트 로더를 씁니다. 페이지에 배치된 Blocks와 Views는 필드가 렌더링될 때 서버에서 렌더링되며, 자체 라이브러리가 필드에 복사됩니다. ## 에디터가 로드하는 항목 다음 권한이 있는 사용자의 페이지에는 다음도 추가됩니다. `edit with dxpr builder` 권한이 있는 사용자의 페이지에는 다음도 추가됩니다. - `dxpr_builder/editor.builder`: `dxpr_templates`, `dxpr_global`, `dxpr_events`, `dxpr_param_types`, `dxpr_elements`, `dxpr_builder`이며 모두 지연됩니다. - `dxpr_builder/editor.core`: Sortable, Draggabilly, Floating UI, DXB 슬라이더, lz-string, streaming-markdown, base64-js, ET Line, Pixeden, Glyphicon 폰트, `css/drupal-integration.css`입니다. - `dxpr_builder/editor.core.styles`(`css/dxpr_builder_backend.css`), `dxpr_builder/editor.validation`, `dxpr_builder/twig.js`, `dxpr_builder/dxpr_saved_thumbs`, Media 모듈이 활성화되면 코어 `media/view`입니다. - CKEditor 5(`vendor/managed/dxpr-cke5-superbuild/dist/ckeditor.js`와 해당 번역 파일)는 텍스트 편집이 초기화될 때 `dxpr_global.js`가 추가합니다. 빌더 필드는 로그인한 모든 사용자(에디터 여부와 관계없이)에게 `max-age: 0`으로 렌더링되므로 Dynamic Page Cache가 보관하지 않고 페이지 로드마다 필드를 다시 렌더링합니다. 익명 방문자에게는 캐시된 필드가 제공됩니다. ## 이미지 Image 요소의 **Image** 매개변수로 에디터가 이미지 스타일을 고릅니다. 목록에는 사이트의 모든 이미지 스타일이 있으며, 있으면 **Optimize for fast loading**이 첫 번째, **Original image (No resizing)**이 두 번째입니다. `optimize` 스타일은 `config/optional/image.style.optimize.yml`에 포함됩니다. 업스케일 없이 너비 1024픽셀로 조절한 뒤 WebP로 변환합니다. 레이아웃에 더 넓은 파일이 필요하지 않으면 콘텐츠 이미지에 선택합니다. SVG 파일은 이미지 스타일을 우회합니다. Image 요소는 일반 ``를 `src`, `alt`, `title`, 인라인 너비와 높이와 함께 씁니다. `loading="lazy"`나 `srcset`을 추가하지 않으므로 1024픽셀로 스타일된 이미지가 모든 뷰포트에서 다운로드됩니다. 섹션 배경 이미지는 Style 탭에서 설정되며 동일한 규칙을 따릅니다. Video 요소는 포스터 이미지가 설정되면 방문자가 클릭할 때까지 iframe을 연기합니다. 페이지 로드에 플레이어를 로드하지 않으려면 삽입 동영상에 포스터를 설정합니다. ## 텍스트 형식 필터 **Apply text format filters to frontend content**(`format_filters`)은 필드의 텍스트 형식을 에디터가 아닌 사용자에게 렌더링할 때마다 `processed_text`로 실행합니다. 기본적으로 꺼져 있습니다. 방문자 출력에 필터를 실행해야 할 때만 켭니다. ## 다음 단계 - [Caching](/ko/hc/documentation/learn-dxpr-builder/advanced/caching)에서 모듈이 쓰는 캐시 컨텍스트, 태그, 내부 캐시를 확인합니다. - [Editor assets](/ko/hc/documentation/learn-dxpr-builder/customization/editor-assets)에서 애셋 소스 설정을 확인합니다. - [Architecture](/ko/hc/documentation/learn-dxpr-builder/development/architecture)에서 이러한 라이브러리를 연결하는 코드를 확인합니다.