콘텐츠로 건너뛰기
HubSpot 기술 자료
주의:: 이 문서는 사용자의 편의를 위해 제공됩니다. 이 문서는 번역 소프트웨어를 사용하여 자동으로 번역되었으며 교정을 거치지 않았을 수 있습니다. 이 문서의 영어 버전이 가장 최신의 정보를 확인할 수 있는 공식 버전으로 간주해야 합니다. 여기에서 액세스할 수 있습니다..

디자인 관리자에서 모듈 생성 및 편집

마지막 업데이트 날짜: 2025년 10월 24일

명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.

디자인 관리자를 사용하면 사용자 정의 모듈을 만들어 블로그, 페이지 또는 이메일에 고급 기능을 추가할 수 있습니다. 사용자 정의 모듈은 페이지, 이메일 또는 블로그 편집기 내에서 콘텐츠를 완전히 사용자 정의할 수 있도록 다양한 기능을 제공합니다.

참고: 모듈을 만들려면 HTML, CSS, HubL 및 HubSpot 디자인 매니저에 대한 지식이 필요합니다. 코딩된 모듈을 만들 때는 개발자와 함께 작업하는 것이 좋습니다.

새 모듈 만들기

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더 상단에서 파일 드롭다운 메뉴를 클릭하고 새 파일을 선택합니다.

In the design manager, within the finder, a box is placed around the File dropdown menu and the options are displayed. An arrow points to the 'New file' option.

  1. 대화 상자에서 오늘 무엇을 빌드하시겠습니까? 드롭다운 메뉴를 클릭하고 모듈을 선택합니다.
  2. 다음을 클릭합니다 .
  3. 이 모듈을 사용할 위치 필드에서 모듈을 사용할 각 콘텐츠 유형(예: 블로그 글, 이메일 또는 랜딩 페이지) 옆의 확인란을 선택합니다.
  4. 모듈 콘텐츠 범위 필드에서 옵션 (예: 로컬 모듈 또는 글로벌 모듈)을 선택합니다. 글로벌 모듈을 만드는 경우 이 모듈의 콘텐츠를 편집하면 모듈이 사용되는 모든 위치가 업데이트됩니다.
  5. 모듈의 파일 이름을 입력합니다.
  6. 모듈의 파일 위치를 변경하려면 파일 위치 섹션에서 변경을 클릭합니다. 팝업 상자에서 새 위치를 선택한 다음 선택을 클릭합니다.
  7. 완료했으면 만들기를 클릭합니다.
  8. 모듈 편집을 계속합니다.

참고: 이메일에 사용되는 모듈은 마케팅 허브 프로페셔널 또는 엔터프라이즈에 가입한 계정에서만 만들 수 있습니다. 모듈에는 CSS 또는 JavaScript를 포함할 수 없습니다.

모듈 편집

디자인 관리자에서 모듈을 만든 후에는 모듈의 기능과 모양을 사용자 지정할 수 있습니다. 명확성을 위해 모듈에 레이블을 지정하고, 필드를 추가 및 구성하고, 기본 콘텐츠와 같은 필드 편집기 옵션을 조정합니다. 표시 조건 및 중계기 옵션을 설정하고 관련 필드를 그룹화하여 더 잘 정리할 수 있습니다. 필드 스니펫을 복사하여 붙여넣고, 사용자 지정 모듈 구문을 작성하고, 유용한 안내 텍스트를 추가하고, 모듈에 사용할 수 있는 템플릿 유형을 편집할 수도 있습니다.

모듈에 라벨 추가하기

디자인 관리자에서 사용자가 콘텐츠 편집기에서 모듈을 식별할 수 있도록 모듈의 레이블을 추가하거나 업데이트할 수 있습니다. 레이블이 비어 있으면 기본적으로 모듈의 이름이 표시됩니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 레이블을 편집하려는 모듈을 클릭하여 엽니다.
  3. 인스펙터에서 레이블을 입력합니다.
In the design manager, the inspector is displayed for a module. At the top of the inspector, the label field is empty.

모듈에 필드 추가

모듈에 필드를 추가하여 모듈의 콘텐츠 또는 스타일을 설정하고 콘텐츠 편집기에서 편집할 수 있도록 합니다. 사용 가능한 필드 유형에 대해 자세히 알아보세요.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 클릭하여 모듈을 엽니다.
  3. 인스펙터의 필드 섹션에서 필드 추가 드롭다운 메뉴를 클릭합니다. 그런 다음 모듈에 추가할 필드를 선택합니다.

In the design manager, the inspector is displayed for a module. In the Fields section, a box is placed around the Add field dropdown menu.

  1. 필드 이름을 편집하려면 edit 편집 아이콘을 클릭하고 새 이름을 입력합니다. HubL 변수 이름을 편집하려면 HubL 변수 이름 필드에 새 이름을 입력합니다.

In the design manager, the inspector is displayed for a module field. At the top of the module field's details is a box placed around the edit icon to edit the name of the module field. An arrow points to the HubL variable name text input field with a value of 'event_date_and_time'.

필드 기본 콘텐츠 사용자 지정

콘텐츠 옵션 섹션에서 템플릿 및 콘텐츠 편집기에서 모듈을 사용할 때 표시되는 기본 콘텐츠를 추가할 수 있습니다. 기본 콘텐츠 옵션은 필드 유형에 따라 다릅니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 모듈을 클릭하여 엽니다.
  3. 인스펙터의 필드 섹션에서 필드를 마우스로 가리키고 편집을 클릭합니다.
  4. 콘텐츠 옵션 섹션에서 기본 콘텐츠 옵션을 추가하거나 편집합니다. 사용 가능한 기본 콘텐츠 옵션은 선택한 필드 유형에 따라 달라집니다.

예를 들어 모듈에 날짜 및 시간 필드 유형을 추가하면 기본 날짜 및 시간을 선택할 수 있습니다. 기본 시간 간격을 입력할 수도 있습니다.

In the design manager, the inspector displays a field's default content options. For the Date and time field type, you can select a default date and time. You can also select a time interval in minutes.

필드 편집기 옵션 설정

편집기 옵션 섹션에서 필드를 필수로 설정하고 콘텐츠 편집기에서 편집하지 못하도록 할 수 있습니다. 도움말 텍스트를 사용자 지정할 수도 있습니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 모듈을 클릭하여 엽니다.
  3. 인스펙터의 필드 섹션에서 필드를 마우스오버하고 편집을 클릭합니다.
  4. 편집기 옵션 섹션에서 필드를 필수로 설정하려면 이 필드 필수로 설정 스위치를 켭니다. 이렇게 하면 사용자가 콘텐츠 편집기 내에서 필드를 비워 둘 수 없습니다.
  5. 필드의 콘텐츠가 편집되지 않도록 하려면 콘텐츠 편집기에서 편집 방지 스위치를 켭니다. 필드의 콘텐츠는 템플릿 수준에서 디자인 관리자에서 계속 사용자 지정할 수 있습니다. 이 옵션은 글로벌 모듈에는 사용할 수 없습니다.
  6. 필드 사용 방법에 대한 컨텍스트 또는 지침을 추가하려면 툴팁 도움말 텍스트 필드 또는 인라인 도움말 텍스트 필드에 텍스트를 입력합니다.
    • 도구 설명 도움말 텍스트: 이 텍스트는 사용자가 콘텐츠 편집기에서 infoCircleIcon 정보 아이콘을 마우스오버하면 도구 설명에 표시됩니다.
    • 인라인 도움말 텍스트: 이 텍스트는 사용자가 콘텐츠 편집기에서 모듈을 편집할 때 필드 아래에 표시됩니다.

In the design manager, the inspector shows a field's editor options. These options include making the field required, preventing editing in the content editor, and adding help text.

필드 표시 조건 설정

표시 조건 섹션에서 필드 표시 조건을 사용하여 다른 필드가 특정 기준을 충족하는 경우에만 모듈 필드가 표시되도록 설정할 수 있습니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 클릭하여 모듈을 엽니다.
  3. 인스펙터의 필드 섹션에서 필드를 마우스오버하고 편집을 클릭합니다.
  4. 표시 조건 섹션에서 HubL 변수 드롭다운 메뉴를 클릭하고 변수를 선택합니다.
  5. 두 번째 드롭다운 메뉴를 클릭하고 옵션 (예: 다음과 같음 또는 비어 있지 않음)을 선택합니다. 선택한 옵션에 따라 더 많은 조건 필드가 필요할 수 있습니다. 예를 들어 다음과 같음을 선택하면 추가 값 필드가 필요합니다.
  6. 기본적으로 표시 조건은 조건이 구성되면 자동으로 켜집니다. 표시 조건을 끄려면 표시 조건 스위치를 끕니다.

In the design manager, the inspector shows a field's display conditions. At the top of the section, a toggle is switched on for Display conditions. The HubL variable dropdown menu has the event_date_and_time variable selected. The condition dropdown menu has the Is not empty condition selected.

필드 반복 옵션 설정

반복 옵션 섹션에서 필드 및 그룹에 대한 반복 옵션을 구성할 수 있습니다. 반복기 옵션이 켜져 있으면 for 루프를 사용하여 여러 개체가 만들어지고 표시됩니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 모듈을 클릭하여 엽니다.
  3. 인스펙터의 필드 섹션에서 필드를 마우스로 가리키고 편집을 클릭합니다.
  4. 중계기 옵션 섹션의 최소 및 최대 (선택 사항) 필드에 숫자를 입력합니다. 이렇게 하면 필드가 모듈에 표시되는 최소 횟수가 최대 값까지 설정됩니다.
  5. 필드가 기본적으로 표시되는 횟수를 설정하려면 기본 개체 수 필드에 숫자를 입력합니다.
  6. 기본적으로 반복 옵션은 한 번 구성하면 자동으로 켜집니다. 반복 옵션을 끄려면 반복 옵션 스위치 끄기를 토글합니다.

예를 들어 이미지 필드의 반복기 옵션은 최소 3개에서 최대 5개의 이미지 필드를 표시하도록 변경됩니다. 이미지 필드 4개가 기본값으로 구성됩니다. 콘텐츠 편집기에서 사용자는 기본적으로 4개의 이미지 필드를 볼 수 있으며 이미지 필드를 하나 더 추가하거나 기존 이미지 필드를 제거할 수 있습니다.

In the design manager, the inspector shows a field's repeater options. At the top of the section, a toggle is switched on for Repeater options. A minimum value of three and a maximum value (optional) of five are configured. The default object count contains a value of four.

모듈 필드 그룹화

필드를 만든 후에는 필드를 그룹화하여 관련성별로 필드를 체계적으로 정리할 수 있습니다. 필드 그룹을 사용하여 사용자 정의 필드 로직을 구축할 수 있습니다. 최대 4개의 필드를 함께 그룹화할 수 있습니다. 모듈 필드 그룹에 대해 자세히 알아보세요.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 모듈을 클릭하여 엽니다.
  3. 인스펙터의 필드 섹션에서 작업 드롭다운 메뉴를 클릭하고 그룹을 선택합니다.
  4. 그룹화할 필드를 하나 이상 선택한 다음 그룹 만들기를 클릭합니다.

In the design manager, the inspector shows a module's Fields section. A box is placed around the Actions dropdown menu and the options are displayed. An arrow points to the Group option.

모듈에 도움말 텍스트 추가하기

편집기 옵션 섹션에서 도움말 텍스트를 추가하여 모듈을 편집할 때 사용자에게 컨텍스트를 제공할 수 있습니다. 이 텍스트는 모듈의 필드 위에 표시됩니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 클릭하여 모듈을 엽니다.
  3. 인스펙터의 편집기 옵션 섹션에서 인라인 도움말 텍스트 필드에 텍스트를 입력합니다.

In the design manager, the inspector shows a module's Editor options section. The Inline help text field contains the following text: Example help text that gives user's context and instructions on what this module is used for and how to use it.

모듈의 콘텐츠 유형 및 사용 가능성 관리

블로그 글이나 랜딩 페이지 등 사용자가 모듈을 사용할 수 있는 콘텐츠 유형을 추가하거나 제거합니다. 템플릿 및 페이지에서 모듈의 사용 가능성을 설정하거나 해제할 수도 있습니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 클릭하여 모듈을 엽니다.
  3. 모듈의 콘텐츠 유형을 편집하려면 오른쪽 상단의 인스펙터에서 모듈 이름 아래의 콘텐츠 유형을 클릭합니다.
In the design manager, the inspector is displayed for a module. At the top of the inspector, a box is placed around the content types for the module (e.g., Landing pages, Site pages, Blog listing pages, Blog posts).
    • 대화 상자에서 모듈을 사용하거나 사용하지 않을 각 콘텐츠 유형(예: 블로그 글, 이메일 또는 랜딩 페이지) 옆의 확인란을 선택하거나 선택 취소합니다.
    • 완료했으면 업데이트를 클릭합니다.
  1. 템플릿 또는 페이지에서 모듈의 사용 가능성을 관리하려면 오른쪽 상단의 템플릿 및 페이지에 사용 가능 스위치를 켭니다. 모듈의 기능을 테스트하거나 템플릿 및 페이지에서 사용 가능성을 해제하려면 템플릿 및 페이지에 사용 가능 스위치를 끕니다.

참고: 템플릿 또는 페이지에 사용 가능 전환을 해제해도 기존 템플릿 또는 페이지에서 모듈이 제거되지는 않습니다.

필드 스니펫 복사 및 붙여넣기

필드를 모듈에 통합할 때 필드 스니펫을 복사하여 모듈 편집기 내의 module.html(HTML + HubL) 섹션에 붙여넣을 수 있습니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 클릭하여 모듈을 엽니다.
  3. 인스펙터에서 모듈 필드 위로 마우스를 가져간 다음 필드 섹션의 작업 드롭다운 메뉴를 클릭합니다. 그런 다음 코드 조각 복사를 선택합니다.
  4. 모듈 편집기에서 module.html(HTML. + HubL) 섹션 내 원하는 위치에 필드 스니펫을 붙여넣습니다. 키보드 단축키 Cmd+V 또는 Ctrl+V를 사용할 수 있습니다.

모듈 구문 작성

모듈을 편집할 때 module.html(HTML + HubL), module.css 및 module.js 모듈 편집기 섹션에서 모듈 구문을 작성할 수 있습니다. 모듈 편집기 및 모듈 개요에 대해 자세히 알아보세요.

모듈 미리보기 및 게시하기

필드 추가 및 모듈 구문 작성 등 모듈 편집을 마치면 모듈을 미리 보고 게시할 수 있습니다.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 클릭하여 모듈을 엽니다.
  3. 모듈을 미리 보려면 오른쪽 상단에서 미리 보기를 클릭합니다. 모듈을 미리 볼 수 있는 새 브라우저 탭으로 이동합니다. 이 미리 보기는 모듈 편집기와 동기화되며 수정 사항이 발생하면 자동으로 새로 고쳐집니다.
  4. 모듈을 게시하려면 변경 사항 게시를 클릭합니다.

템플릿에 모듈 추가하기

모듈을 게시한 후에는 디자인 관리자에서 드래그 앤 드롭 템플릿 또는 사용자 정의 코딩 템플릿에 추가하여 여러 템플릿에서 모듈을 사용할 수 있습니다. 콘텐츠 편집기에서 모듈을 추가하려면 콘텐츠 편집기에서 모듈 추가 및 편집에 대해 자세히 알아보세요.

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 템플릿을 클릭하여 엽니다.
  3. 레이아웃 편집기에서 끌어서 놓기 템플릿에 모듈을 추가하려면 인스펙터 상단의 + 추가 탭을 클릭합니다.
    • 검색 필드에 모듈의 이름을 입력합니다. 사용자 지정 모듈로 검색 범위를 좁히려면 카테고리 또는 태그별 필터링 드롭다운 메뉴를 클릭하고 사용자 지정 모듈을 선택합니다.
    • dragHandleIcon 드래그 앤 드롭 아이콘을 클릭하고 레이아웃 편집기에서 모듈을 원하는 위치로 이동합니다.
  4. 사용자 정의 코딩된 템플릿에 모듈을 추가하려면 다음과 같이 하세요:
    • 찾기에서 모듈을 마우스 오른쪽 버튼으로 클릭하거나 Ctrl+클릭하고 코드 조각 복사를 선택합니다. 또는 클릭하여 모듈을 연 다음 인스펙터의 템플릿 사용 섹션에서 코드 조각 복사를 클릭합니다.
    • 사용자 지정 코딩 템플릿에서 코드 편집기에 모듈 스니펫을 붙여넣습니다.
  5. 완료되면 오른쪽 상단에서 변경 사항 게시를 클릭합니다.

예시

카운트다운 모듈 만들기

  1. 디자인 관리자에서모듈을 만들고 이름을'카운트다운 타이머'로 지정합니다.
  2. 인스펙터의 필드 섹션에서 필드 추가 드롭다운 메뉴를 클릭합니다.
    • 날짜 및 시간 필드를 선택합니다. '이벤트 날짜 및 시간' 이라는 이름을 입력합니다. 그러면 HubL 변수 이름 필드가 event_date_and_time 로 업데이트됩니다.
In the design manager, the inspector is displayed for a module field. At the top of the module field's details is a box placed around the edit icon to edit the name of the module field. An arrow points to the HubL variable name text input field with a value of 'event_date_and_time'.
    • 색상 필드를 선택합니다. '타이머 글꼴 색상' 이라는 이름을 입력합니다. 그러면 HubL 변수 이름 필드가 timer_font_color 으로 업데이트됩니다.

참고: HubL 변수 이름은 아래 module.html(HTML + HubL) 코드 섹션에 포함된 변수 이름과 일치해야 합니다.

  1. 모듈 편집기에서 다음 코드를 복사하여 module.html(HTML + HubL) 섹션에 붙여넣습니다:

<!-- 대상 날짜를 저장하기 위한 숨겨진 스팬 -->
<span id="target-date" style="display: none;"></span>

<!-- 카운트다운 타이머 표시 -->
<div style="float: 왼쪽; width: 100%; color: ;">
<div class="time_container" style="여백-왼쪽: 30%;">
<span id="days"></span><br>
Days
</div>
<div class="time_container">
<span id="hours"></span><br>
Hours
</div>
<div class="time_container">
<span id="minutes"></span><br>
Minutes
</div>
<div class="time_container">
<span id="seconds"></span><br>
초
</div>
</div>

  1. module.css 섹션에 다음 코드를 복사하여 붙여넣습니다:

.time_container {
float: 왼쪽;
width: 10%;
text-align: 가운데
}
.time_container span {
글꼴 무게: 굵게;
font-size: 200%;
}

  1. module.js 섹션에 다음 코드를 복사하여 붙여넣습니다:

// 카운트다운을 계산하고 표시하는 함수
함수 updateCountdown() {
// 숨겨진 스팬에서 목표 날짜 가져오기
const targetDate = new Date(document.getElementById('target-date').textContent);
// 현재 날짜를 가져옵니다.
const currentDate = new Date();
// 남은 시간(밀리초 단위)을 계산합니다.
const timeRemaining = targetDate - currentDate;
// 목표 날짜가 지났는지 확인
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = '카운트다운 만료';
return;
}
// 남은 일, 시간, 분, 초를 계산합니다.
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// 카운트다운 표시
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// 매초마다 카운트다운 업데이트
setInterval(updateCountdown, 1000);
// 카운트다운을 즉시 업데이트하는 초기 호출
updateCountdown();

In the design manager, the code editor and the inspector are displayed for a module. Boxes are placed around the module.html, module.css, and the module.js sections in the. code editor.

  1. 완료되면 모듈을 미리 보고 게시합니다.
  2. 계속해서 템플릿에 모듈을 추가합니다.
이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.
목차 메뉴

관련 콘텐츠

New call-to-action