---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/reusable-templates/importing-exporting'
title: '제품 페이지 만들기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:57:11+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  여기서는 제품 하나의 페이지를 만듭니다. 이름, 가격, 지금 구매하기 버튼 옆에 사진이 있고, 이어서 세 가지 기능, 사양 목록, 판매 유도 문구가 나옵니다. 판매하는 모든 것에 사용합니다. 여러 요금제를 비교하려면 pricing table을 추가합니다.
  동영상에서는 Insight Hub라는 하드웨어 제품의 페이지를 만듭니다.
tags:
  - 'Lay-outs hergebruiken'
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: |-
        여기서는 제품 하나의 페이지를 만듭니다. 이름, 가격, 지금 구매하기 버튼 옆에 사진이 있고, 이어서 세 가지 기능, 사양 목록, 판매 유도 문구가 나옵니다. 판매하는 모든 것에 사용합니다. 여러 요금제를 비교하려면 pricing table을 추가합니다.
        동영상에서는 Insight Hub라는 하드웨어 제품의 페이지를 만듭니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:57:11+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/reusable-templates/importing-exporting'
      articleSection: 'Lay-outs hergebruiken'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/reusable-templates/importing-exporting'
      description: |-
        여기서는 제품 하나의 페이지를 만듭니다. 이름, 가격, 지금 구매하기 버튼 옆에 사진이 있고, 이어서 세 가지 기능, 사양 목록, 판매 유도 문구가 나옵니다. 판매하는 모든 것에 사용합니다. 여러 요금제를 비교하려면 pricing table을 추가합니다.
        동영상에서는 Insight Hub라는 하드웨어 제품의 페이지를 만듭니다.
      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) /[Lay-outs hergebruiken](/hc/documentation/learn-dxpr-builder/reusable-templates) # 제품 페이지 만들기.

 Learn DXPR BuilderBuild pagesLay-outs hergebruiken

   ## In this guide

 Related guides

- [템플릿으로 페이지 시작하기](/ko/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)
- [팀 디렉터리 만들기](/ko/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)

여기서는 제품 하나의 페이지를 만듭니다. 이름, 가격, **지금 구매하기** 버튼 옆에 사진이 있고, 이어서 세 가지 기능, 사양 목록, 판매 유도 문구가 나옵니다. 판매하는 모든 것에 사용합니다. 여러 요금제를 비교하려면 [pricing table](/ko/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)을 추가합니다.

동영상에서는 Insight Hub라는 하드웨어 제품의 페이지를 만듭니다.

  ## 시작하기 전에

- 역할에 **Edit with DXPR Builder** 권한이 있습니다.
- 미디어 라이브러리에 제품 사진이 있습니다.
- 페이지가 빌더에서 열려 있습니다. 새 페이지의 경우 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`)로 이동한 뒤 **Save**를 클릭합니다.
- 새 요소는 컬럼 맨 위에 추가됩니다. 오른쪽 컬럼을 버튼부터 만드는 이유가 이것입니다.

## 1단계: 제품 추가하기

1. 빈 페이지에서 **Add Elements**를 클릭하고 **Section**을 **Layout** 탭에서 고릅니다.
2. 섹션에서 **+**를 클릭하고 **Row**를 고릅니다. 동일한 컬럼 두 개가 딸려 옵니다.
3. 왼쪽 컬럼에서 **+**를 클릭하고 **Image**를 고릅니다. **Select Image**를 클릭하고 제품 사진을 체크한 뒤 **Insert selected**를 클릭합니다. **Alt attribute**를 **SEO** 패널에서 입력하고 **Save**를 클릭합니다.
4. 오른쪽 컬럼에서 **+**를 클릭하고 **Button**을 고릅니다. **Title**을 "지금 구매하기"로, **Link**를 쇼핑몰로, **Type**을 **Primary**로, **Size**를 **Large**로 설정한 뒤 **Save**를 클릭합니다.
5. 오른쪽 컬럼에서 **+**를 클릭하고 **Text**를 고릅니다. 버튼 위에 추가됩니다. 가격을 **Heading 2**로 입력하고 **Save**를 클릭합니다.
6. 다시 **+**를 클릭하고 **Text**를 고릅니다. 맨 위에 추가됩니다. 제품 이름을 **Heading 2**로 입력하고 설명 한 줄을 추가한 뒤 **Save**를 클릭합니다. 테마는 페이지 제목을 페이지의 Heading 1로 출력합니다. 이 제목을 대신 Heading 1으로 쓰려면 [Build SEO-friendly pages](/ko/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)를 참조합니다.

## 2단계: 기능 추가하기

1. 섹션에 마우스를 올리고 **Add Section Below**를 클릭합니다. 새 섹션에 **Align text center** 클래스를 지정합니다.
2. 섹션에서 **+**를 클릭하고 **Row**를 고릅니다. 격자 아이콘(**Column layout**)을 클릭하고 **1/3 + 1/3 + 1/3** 프리셋을 고른 뒤 **Save**를 클릭합니다.
3. 첫 번째 컬럼에서 **+**를 클릭하고 **Text**를 고릅니다. 기능 이름을 **Heading 3**으로 입력하고 한 줄을 추가한 뒤 **Save**를 클릭합니다.
4. 동일한 컬럼에서 **+**를 클릭하고 **Icon**을 고릅니다. 텍스트 위에 추가됩니다. **Font Awesome Free Solid** 세트를 선택하고 `plug`를 검색한 뒤 아이콘을 클릭합니다. **Size**를 **Very Large (3x)**로 설정하고 **Icon utilities**를 열어 **Style**을 **Circle**로 설정한 뒤 **Save**를 클릭합니다.
5. 두 번째 컬럼에는 `cloud`로, 세 번째 컬럼에는 `battery-full`로 반복합니다.

## 3단계: 사양 추가하기

1. 다음 버튼으로 세 번째 섹션을 추가합니다. **Add Section Below**로 세 번째 섹션을 추가합니다. **More** > **Settings**를 열고 **Style** 패널에서 연회색 **Background**를 고른 뒤 **Save**를 클릭합니다.
2. 섹션에서 **+**를 클릭하고 **Text**를 고릅니다. "Specifications"를 **Heading 2**로 입력한 뒤 줄에 하나씩 사양을 입력하고 **Save**를 클릭합니다.

## 4단계: 행동 유도 추가하기

1. 네 번째 섹션을 추가하고 **More** > **Settings**를 엽니다. **HTML classes** 아래에서 **Align text center**를 고른 뒤 **Style** 패널에서 보라색 **Background**와 흰색 **Font color**를 고릅니다. **Save**를 클릭합니다.
2. 섹션에서 **+**를 클릭하고 **Button**을 고릅니다. **Title**을 "영업팀과 상담"으로, **Link**를 `/contact`로, **Type**을 **Light**로, **Size**를 **Large**로 설정한 뒤 **Save**를 클릭합니다.
3. 다시 **+**를 클릭하고 **Text**를 고릅니다. 버튼 위에 추가됩니다. "Insight Hub from 249 euro"를 **Heading 2**로 입력하고 한 줄을 추가합니다. **Font color**를 흰색으로 설정하고 **Save**를 클릭합니다.

## 5단계: 저장 및 미리보기

1. 빌더 도구 모음에서 **Save**를 클릭합니다.
2. 보기 메뉴(**eye icon**)를 열고 **Preview**를 선택합니다.

## 더 나아가기

동영상에 나오지 않는 내용:

- **Specification table**: 사양마다 한 줄씩 쓰는 대신 텍스트 도구 모음의 **Table** 버튼으로 표를 삽입합니다.
- **Gallery**: 사진 하나를 제품 사진의 **Image carousel**로 바꿉니다.
- **Plans**: 가격을 [pricing table](/ko/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)에 연결합니다.

## 표시 내용

제품 사진이 왼쪽 절반을 채우고, 오른쪽에 이름, 가격, **지금 구매하기** 버튼이 있습니다. 이어서 가운데 정렬된 기능 세 개가 나오며, 각 기능은 이름과 한 줄 위에 원형 아이콘이 있습니다. 사양은 회색 띠 위에 있으며, 보라색 띠가 **영업팀과 상담**으로 페이지를 마무리합니다.

## 표시된 대로 보이지 않는 경우

- **이름, 가격, 버튼 순서가 잘못되었습니다.** 위에서부터 들어갔고, 새 요소는 컬럼 맨 위에 추가됩니다. 컨트롤 표시줄의 드래그 핸들로 제자리에 드래그합니다.
- **아이콘에 원이 없습니다.** **Style**은 **Icon utilities** 패널에 있으며 **General**에는 없습니다. 아이콘 설정을 열고 **Icon utilities**를 연 뒤 **Style**을 **Circle**로 설정합니다.
- **보라색 배경에서 제목이 계속 어둡게 보입니다.** Text 요소에는 자체 **Font color**가 없습니다. **Style** 패널을 열고 **Font color**를 흰색으로 설정합니다.
- **다시 로드하면 변경 내용이 사라졌습니다.** 빌더 도구 모음에서 **Save**를 클릭하기 전에 페이지를 떠났습니다. 이 경우 Save에 오류가 표시되면 [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)를 참조합니다.

## 다음 단계

- [Pricing table](/ko/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)에서 다단계 요금제 섹션을 만듭니다.
- [Icon element](/hc/documentation/learn-dxpr-builder/elements/icon)에서 아이콘 크기와 스타일을 알아봅니다.
- [Marketing landing page](/ko/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)에서 제품 중심 캠페인 페이지를 만듭니다.