---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab'
title: '팀 디렉터리 만들기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:57:26+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  여기서는 팀 페이지를 만듭니다. 가운데 정렬 헤더, 세 번째 아래에 LinkedIn 링크가 있는 리더십 카드 세 개, 팀 카드 네 개의 그리드가 나옵니다. 모든 동료를 쉽게 찾을 수 있게 할 때 사용합니다. 회사 페이지의 짧은 팀 섹션에는 대신 Create an About Us page를 따릅니다.
  동영상에서는 물류 회사의 팀 페이지를 만듭니다.
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: |-
        여기서는 팀 페이지를 만듭니다. 가운데 정렬 헤더, 세 번째 아래에 LinkedIn 링크가 있는 리더십 카드 세 개, 팀 카드 네 개의 그리드가 나옵니다. 모든 동료를 쉽게 찾을 수 있게 할 때 사용합니다. 회사 페이지의 짧은 팀 섹션에는 대신 Create an About Us page를 따릅니다.
        동영상에서는 물류 회사의 팀 페이지를 만듭니다.
      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:26+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/saved-templates-tab'
      articleSection: 'Lay-outs hergebruiken'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab'
      description: |-
        여기서는 팀 페이지를 만듭니다. 가운데 정렬 헤더, 세 번째 아래에 LinkedIn 링크가 있는 리더십 카드 세 개, 팀 카드 네 개의 그리드가 나옵니다. 모든 동료를 쉽게 찾을 수 있게 할 때 사용합니다. 회사 페이지의 짧은 팀 섹션에는 대신 Create an About Us page를 따릅니다.
        동영상에서는 물류 회사의 팀 페이지를 만듭니다.
      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/user-templates)
- [제품 페이지 만들기](/ko/hc/documentation/learn-dxpr-builder/reusable-templates/importing-exporting)

여기서는 팀 페이지를 만듭니다. 가운데 정렬 헤더, 세 번째 아래에 LinkedIn 링크가 있는 리더십 카드 세 개, 팀 카드 네 개의 그리드가 나옵니다. 모든 동료를 쉽게 찾을 수 있게 할 때 사용합니다. 회사 페이지의 짧은 팀 섹션에는 대신 [Create an About Us page](/ko/hc/documentation/learn-dxpr-builder/tutorials/about-page)를 따릅니다.

동영상에서는 물류 회사의 팀 페이지를 만듭니다.

  ## 시작하기 전에

- 역할에 **Edit with DXPR Builder** 권한이 있습니다.
- 페이지가 빌더에서 열려 있습니다. 새 페이지의 경우 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`)로 이동한 뒤 **Save**를 클릭합니다.
- 새 요소는 섹션이나 컬럼 맨 위에 추가됩니다. 소셜 링크를 위 카드보다 먼저 넣는 이유가 이것입니다.

## 1단계: 헤더 추가하기

1. 빈 페이지에서 **Add Elements**를 클릭하고 **Section**을 **Layout** 탭에서 고릅니다.
2. 섹션에 마우스를 올리고 **More** > **Settings**를 엽니다. **HTML classes** 아래에서 **Align text center**를 고른 뒤 **Save**를 클릭합니다.
3. 섹션에서 **+**를 클릭하고 **Text**를 **Content** 탭에서 고릅니다.
4. "Our team"을 **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**를 클릭합니다. 새 섹션의 **More** > **Settings**를 열고 연회색 **Background**를 **Style** 패널에서 고른 뒤 **Save**를 클릭합니다.
2. 섹션에서 **+**를 클릭하고 **Row**를 고릅니다. 격자 아이콘(**Column layout**)을 클릭하고 **1/3 + 1/3 + 1/3** 프리셋을 고른 뒤 **Save**를 클릭합니다.
3. 첫 번째 컬럼에서 **+**를 클릭하고 **Card**를 고릅니다. **More** > **Settings**를 열고 **Header**에 역할을, **Title**에 이름을 입력한 뒤 **Save**를 클릭합니다.
4. 두 번째 컬럼에도 같은 방식으로 **Card**를 추가합니다.
5. 세 번째 컬럼에서 **+**를 클릭하고 **Social links**를 고릅니다. 예시 행 두 개가 딸려 옵니다. 첫 번째 줄의 "Facebook"을 `linkedin`으로 바꾸고 옆에 프로필 URL을 입력합니다. 두 번째 줄은 **×**로 제거하고 **Style**을 **Circle**로, **Size**를 **2x**로 설정한 뒤 **Save**를 클릭합니다.
6. 동일한 컬럼에서 **+**를 클릭하고 **Card**를 고릅니다. 링크 위에 추가됩니다. **Header**와 **Title**을 같은 방식으로 설정하고 **Save**를 클릭합니다.
7. 섹션에서 **+**를 클릭하고 **Text**를 고릅니다. 로우 위에 추가됩니다. "Leadership"을 **Heading 2**로 입력하고 **Save**를 클릭합니다.

## 3단계: 팀 그리드 추가하기

1. 다음 버튼으로 세 번째 섹션을 추가합니다. **Add Section Below**로 세 번째 섹션을 추가한 뒤 **Row**를 추가합니다. 격자 아이콘(**Column layout**)을 클릭하고 **1/4 + 1/4 + 1/4 + 1/4** 프리셋을 고른 뒤 **Save**를 클릭합니다.
2. 카드부터 추가합니다. 각 컬럼에 **Card**를 추가합니다. **More** > **Settings**를 열고 역할을 **Header**로, 이름을 **Title**로 설정한 뒤 **Save**를 클릭합니다.
3. 섹션에서 **+**를 클릭하고 **Text**를 고릅니다. 로우 위에 추가됩니다. "The team"을 **Heading 2**로 입력하고 **Save**를 클릭합니다.

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

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

## 더 나아가기

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

- **Photos and biographies**: 카드에서 **+**를 클릭하고 **Text** 전기를 추가합니다. 카드에서 **+**를 다시 클릭하고 **Image**를 추가합니다. 텍스트 위에 추가됩니다. **Alt attribute**에 인물 이름을 입력합니다.
- **Rounded photos**: 각 이미지에서 **Border radius**를 **Style** 패널에서 설정합니다. 값은 픽셀 단위로 최대 100입니다.
- **Lift on hover**: 카드의 **Hover style** 패널에서 **Drop shadow**를 2로 설정합니다.
- **Team that updates itself**: "Team member" 콘텐츠 유형과 블록 디스플레이의 **Grid** 뷰를 만듭니다. **Drupal Views** 탭에서 뷰를 삽입하면 편집자가 페이지를 건드리지 않고 인물을 추가합니다.

## 표시 내용

"Our team"이 맨 위에 가운데 정렬로 있습니다. 회색 띠에서는 리더십 카드 세 개가 헤더에 역할, 아래에 이름을 표시하고, 세 번째 아래에는 원형 LinkedIn 아이콘이 있습니다. 이어서 "The team"과 나란한 카드 네 개가 나옵니다.

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

- **추가한 후에도 카드에 설정 대화상자가 표시되지 않습니다.** 카드는 빈 상태로 열리며 대화상자가 없습니다. 카드에 마우스를 올리고 **More** > **Settings**를 열어 **Header**와 **Title**을 입력합니다.
- **소셜 링크에 “No matching brand icon found” 메시지가 표시됩니다.** 해당 브랜드는 알려진 아이콘 이름이 아닙니다. `linkedin`처럼 소문자로 입력합니다.
- **The LinkedIn icon sits above the card.** 카드가 링크보다 먼저 들어갔고, 새 요소는 컬럼 맨 위에 추가됩니다. 컨트롤 표시줄의 드래그 핸들로 카드를 링크 위로 드래그합니다.
- **다시 로드하면 변경 내용이 사라졌습니다.** 빌더 도구 모음에서 **Save**를 클릭하기 전에 페이지를 떠났습니다. 이 경우 Save에 오류가 표시되면 [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)를 참조합니다.

## 다음 단계

- [Card element](/hc/documentation/learn-dxpr-builder/elements/card)에서 카드 유형과 자식 요소를 알아봅니다.
- [Social links element](/hc/documentation/learn-dxpr-builder/elements/social-links)에서 아이콘 스타일과 색상을 알아봅니다.
- [About page](/ko/hc/documentation/learn-dxpr-builder/tutorials/about-page)에서 회사 페이지에 짧은 팀 섹션을 배치합니다.