--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/getting-started/first-page' title: '첫 페이지 만들기 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:04:31+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder로 페이지를 만듭니다. 제목 옆의 이미지, 짧은 단락, 버튼이 예시입니다. 준비된 템플릿으로 시작하여 문구를 바꿔도 됩니다. 어느 쪽이든 몇 분이면 되며, 마지막에는 방문자에게 표시되는 모습으로 미리 보는 저장된 페이지가 완성됩니다. DXPR Builder 설치 후에 이 페이지를 사용합니다. 동영상에서는 섹션, 행, 이미지, 버튼, 텍스트 순서로 페이지를 처음부터 만들고 저장한 뒤 미리 봅니다. tags: - 'Build your first page' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+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로 페이지를 만듭니다. 제목 옆의 이미지, 짧은 단락, 버튼이 예시입니다. 준비된 템플릿으로 시작하여 문구를 바꿔도 됩니다. 어느 쪽이든 몇 분이면 되며, 마지막에는 방문자에게 표시되는 모습으로 미리 보는 저장된 페이지가 완성됩니다. DXPR Builder 설치 후에 이 페이지를 사용합니다. 동영상에서는 섹션, 행, 이미지, 버튼, 텍스트 순서로 페이지를 처음부터 만들고 저장한 뒤 미리 봅니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:04:31+0000' dateModified: '2026-10-24T17:19:22+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/getting-started/first-page' articleSection: '첫 페이지 만들기' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/getting-started/first-page' description: |- DXPR Builder로 페이지를 만듭니다. 제목 옆의 이미지, 짧은 단락, 버튼이 예시입니다. 준비된 템플릿으로 시작하여 문구를 바꿔도 됩니다. 어느 쪽이든 몇 분이면 되며, 마지막에는 방문자에게 표시되는 모습으로 미리 보는 저장된 페이지가 완성됩니다. DXPR Builder 설치 후에 이 페이지를 사용합니다. 동영상에서는 섹션, 행, 이미지, 버튼, 텍스트 순서로 페이지를 처음부터 만들고 저장한 뒤 미리 봅니다. 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 --- [도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[여기서 시작](/ko/hc/documentation/learn-dxpr-builder/start-here) /[첫 페이지 만들기](/ko/hc/documentation/learn-dxpr-builder/start-here/first-steps) # 첫 페이지 만들기. DXPR Builder 배우기여기서 시작첫 페이지 만들기 ## 이 가이드의 내용 DXPR Builder로 페이지를 만듭니다. 제목 옆의 이미지, 짧은 단락, 버튼이 예시입니다. 준비된 템플릿으로 시작하여 문구를 바꿔도 됩니다. 어느 쪽이든 몇 분이면 되며, 마지막에는 방문자에게 표시되는 모습으로 미리 보는 저장된 페이지가 완성됩니다. [DXPR Builder 설치](/ko/hc/documentation/learn-dxpr-builder/getting-started/installation) 후에 이 페이지를 사용합니다. 동영상에서는 섹션, 행, 이미지, 버튼, 텍스트 순서로 페이지를 처음부터 만들고 저장한 뒤 미리 봅니다. ## 시작하기 전에 - DXPR Builder가 제품 키와 함께 설치되어 있습니다([DXPR Builder 설치](/ko/hc/documentation/learn-dxpr-builder/getting-started/installation)). - 빌더가 표시되는 콘텐츠 유형이 있으며, 해당 텍스트 필드는 **DXPR Builder** 포매터를 사용합니다. **드래그 앤 드롭 페이지**(`dxpr_builder_page`)가 예시입니다. - 역할에 **DXPR Builder로 편집** 권한이 있습니다. ## 페이지 만들기 1. 메뉴 **콘텐츠** > **콘텐츠 추가**로 이동하여 빌더가 표시되는 콘텐츠 유형을 선택합니다. 2. 입력란 **제목**에 입력하고 **저장**을 클릭합니다. 저장된 페이지가 빈 빌더와 함께 열립니다. DXPR Builder는 편집 양식이 아니라 이 페이지에서 작동합니다. ## 옵션 A: 템플릿으로 시작 탭 **저장된 템플릿**에는 사이트 사용자가 재사용을 위해 저장한 레이아웃이 나열됩니다. DXPR CMS에는 **색상 아이콘 상자** 등 여러 템플릿이 포함되어 있습니다. 다른 사이트에서는 탭이 비어 있을 수 있습니다. 빈 페이지의 **템플릿 선택**에는 DXPR Builder에 포함된 페이지 템플릿이 표시됩니다. [저장된 템플릿 삽입](/ko/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)에서 이러한 단계를 동영상으로 확인할 수 있습니다. 1. 요소 선택 도구를 열려면 **요소 추가**를 클릭합니다. 2. 탭을 **저장된 템플릿**으로 전환합니다. 3. 템플릿을 클릭하여 삽입합니다. 섹션, 행, 요소가 페이지에 나타나 편집할 수 있습니다. 4. 툴바에서 **저장**을 클릭합니다. 5. 눈 모양 메뉴를 열고 **미리보기**를 선택하여 방문자에게 표시되는 페이지를 확인합니다. ## 옵션 B: 처음부터 만들기 위 동영상은 다음 단계를 따릅니다. 1. 먼저 **요소 추가**를 클릭하고 **레이아웃** 탭에서 **섹션**을 선택합니다. 2. 섹션 컨트롤 바의 **+**를 클릭하고 **행**을 선택합니다. 3. 행의 격자 아이콘을 클릭하고 1/3 + 2/3 같은 컬럼 사전 설정을 선택한 뒤 **저장**을 클릭합니다. 4. 왼쪽 컬럼의 **+**를 클릭하고 **콘텐츠** 탭을 열어 **이미지**를 선택합니다. 5. 다음으로 **이미지 선택**을 클릭하고 **필터 적용**으로 미디어 브라우저를 검색한 뒤 사진을 선택하고 **선택 항목 삽입**을 클릭합니다. 6. 패널 **SEO**를 열고 **Alt 속성**을 입력한 뒤 **저장**을 클릭합니다. 7. 오른쪽 컬럼의 **+**를 클릭하고 **버튼**을 선택합니다. 8. 입력란 **제목**과 **링크**에 입력하고 **유형**을 선택한 뒤 **저장**을 클릭합니다. 9. 넓은 컬럼 컨트롤 바의 **+**를 클릭하고 **텍스트**를 선택합니다. 10. 제목을 입력하고 **제목 2**로 설정한 뒤 아래에 단락을 입력하고 **저장**을 클릭합니다. 11. 툴바에서 **저장**을 클릭합니다. 12. 눈 모양 메뉴를 열고 **미리보기**를 선택하여 방문자에게 표시되는 페이지를 확인합니다. 계속 작업하려면 같은 메뉴에서 **편집**을 선택합니다. ## 추가한 내용 변경 - **텍스트**: 텍스트 요소를 클릭하여 제자리에서 편집합니다. 툴바에 굵게, 기울임, 제목, 링크, 목록, 글꼴 색상 등이 제공됩니다. 표시되는 버튼은 [사용자 프로필](/ko/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)에서 정합니다. - **설정**: 요소 컨트롤 바의 **더보기**를 열고 **설정**을 선택합니다. 이미지에는 너비, 높이, 링크, 대체 텍스트가 있으며, 버튼에는 **유형**, 크기, 링크가 있습니다. - **순서**: 요소를 컨트롤 바로 드래그하여 다른 위치로 이동합니다. 완료되면 툴바에서 **저장**을 클릭합니다. 저장되지 않은 변경 사항이 있는 상태에서 페이지를 떠나려고 하면 브라우저에서 경고를 표시합니다. ## 표시 내용 모드 **미리보기**에서는 이미지가 왼쪽에 표시됩니다. 제목, 단락, 버튼은 컨트롤 바 없이 오른쪽에 표시됩니다. **편집**으로 돌아가면 각 요소에 마우스를 올릴 때 컨트롤 바가 표시됩니다. DXPR Builder는 편집하는 필드(보통 **본문**)에 페이지를 HTML로 저장합니다. 콘텐츠가 게시되면 방문자에게 페이지가 표시됩니다. ## 요소 추가 버튼이 표시되지 않는 경우 - **빈 페이지에 “Choose a template”과 “Or add elements using the +”가 표시됩니다.** **페이지 생성 도우미 활성화**가 `/admin/dxpr_studio/dxpr_builder/ai_settings`에서 꺼져 있습니다. 대신 빌더 툴바의 **+**를 클릭하여 요소 선택 도구를 엽니다. - **페이지에 빌더가 전혀 표시되지 않습니다.** 콘텐츠 유형이 **DXPR Builder** 포매터를 사용하지 않거나 역할에 **DXPR Builder로 편집** 권한이 없습니다. [설치 확인](/ko/hc/documentation/learn-dxpr-builder/getting-started/installation#verify-the-installation)을 따릅니다. - **저장된 템플릿 탭에 템플릿이 없습니다.** 아직 사이트에 저장된 항목이 없거나 사용자 프로필에서 숨겨져 있습니다. 빈 페이지에서 **템플릿 선택**을 사용하거나 [직접 저장](/ko/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)합니다. - **다시 로드하면 변경 사항이 사라집니다.** 페이지가 저장되지 않았습니다. 페이지를 떠나기 전에 빌더 툴바에서 **저장**을 클릭합니다. ## 다음 단계 - [편집 도구](/hc/documentation/learn-dxpr-builder/editing): 모든 컨트롤과 키보드 단축키. - [요소](/hc/documentation/learn-dxpr-builder/elements): 22개의 콘텐츠 요소와 6개의 레이아웃 요소. - [레이아웃](/hc/documentation/learn-dxpr-builder/layout/overview): 화면마다 적응하는 섹션, 행, 컬럼.