콘텐츠로 건너뛰기

모듈 생성 및 편집

마지막 업데이트 날짜: 2월 12, 2025

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

모든 제품 및 플랜

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

참고: 모듈을 만들려면 HTML, CSS, HubL 및 HubSpot 디자인 매니저에 대한 지식이 필요합니다. HubSpot은 개발자와 협력하여 코딩된 모듈을 만들 것을 권장합니다.

새 모듈 만들기

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

  • 대화 상자에서 오늘 무엇을 빌드하시겠습니까? 드롭다운 메뉴를 클릭하고 모듈을 선택합니다.

  • 다음을 클릭합니다 .
  • 모듈이 사용될 각 콘텐츠 유형( 페이지, 블로그 글, 블로그 목록, 이메일 또는 따옴표) 옆의 확인란을 선택합니다. 이메일 템플릿에 사용되는 모듈에는 CSS 또는 JavaScript를 포함할 수 없습니다.

참고: 이메일에 사용할 사용자 지정 모듈은 Marketing Hub Professional 또는 Enterprise를 구독하는 계정에서만 만들 수 있습니다.

  • 이 모듈을 로컬 모듈로 할지 글로벌 모듈로 할지 선택합니다. 글로벌 모듈을 만드는 경우 이 모듈의 콘텐츠를 편집하면 모듈이 사용되는 모든 위치가 업데이트됩니다.
  • 모듈의 파일 이름을 입력한 다음 만들기를 클릭합니다.

모듈에 레이블 지정

기본적으로 콘텐츠 편집기는 디자인 관리자에서 지정한 이름을 사용하여 모듈을 참조합니다. 콘텐츠 편집기에서 모듈이 다른 이름을 사용하도록 하려면 레이블을 입력하면 됩니다.

모듈에 필드 추가

모듈에 필드를 추가하여 모듈의 콘텐츠 또는 스타일을 설정하고 콘텐츠 편집기에서 편집할 수 있도록 합니다. 사용 가능한 필드 유형에 대한 자세한 내용은 개발자 문서를 참조하세요.

  • 오른쪽의 모듈 검사기에서 필드 섹션의 필드 추가 드롭다운 메뉴를 클릭한 다음 모듈에 추가할 필드를 선택합니다.

  • 필드 이름 옆의 연필 아이콘( edit )을 클릭하여 필드 이름을 편집합니다. HubL 변수 이름을 편집하려면 HubL 변수 이름 텍스트 필드에서 변경합니다.

필드 기본 콘텐츠 추가

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

아래 예제에서 필드 유형은 이미지 필드이므로 기본 콘텐츠 옵션은 기본 이미지 선택과 크기 컨트롤 숨기기입니다.

필드 편집기 옵션 설정

편집기 옵션 섹션에서 사용자가 콘텐츠 편집기에서 모듈을 편집하는 방법에 대한 다음 옵션을 활성화할 수 있습니다:

  • 이 필드를 필수로 설정: 사용자는 콘텐츠 편집기 내에서 이 필드를 비워둘 수 없습니다.
  • 콘텐츠 편집기에서 편집 금지: 필드 콘텐츠는 콘텐츠 편집기 내에서 편집할 수 없지만 템플릿 수준에서는 계속 편집할 수 있습니다. 이 옵션은 페이지 수준에서 편집할 수 없는 전역 모듈에는 사용할 수 없습니다.
  • 도구 설명 도움말 텍스트: 필드에 도움말 텍스트를 추가하여 사용자에게 컨텍스트 또는 지침을 제공합니다. 이 도움말 텍스트는 사용자가 편집하는 동안 필드 위로 마우스를 가져가면 도구 설명에 표시됩니다.

  • 인라인 도움말 텍스트: 필드에 도움말 텍스트를 추가하여 사용자에게 컨텍스트 또는 지침을 제공합니다. 이 도움말 텍스트는 사용자가 모듈을 편집할 때 필드 아래에 표시됩니다.

필드 표시 조건 설정

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

  • 표시 조건 섹션에서 HubL 변수 드롭다운 메뉴를 클릭하여 모듈 필드를 선택한 다음 비어 있지 않음 드롭다운을 클릭하여 해당 필드에 대한 조건을 선택합니다.
  • 조건이 다음과 같음을 선택하는 경우 또는 정규식을 입력합니다.

아래 예에서는 이미지 필드에 대한 표시 조건을 설정하고 있습니다. 조건은 이미지 필드가 모듈에 표시되려면 image_title이라는 텍스트 필드의 값이 Headshot과 같아야 한다는 것입니다.

표시 조건은 조건을 설정하면 자동으로 활성화됩니다. 표시 조건을 비활성화하려면 표시 조건 오른쪽에 있는 토글 스위치를 클릭합니다.

필드 리피터 옵션 설정

반복기 옵션 섹션에서 필드에 대한 반복기 옵션을 설정할 수 있습니다. 반복기는 여러 개체를 생성하고 for 루프를 사용하여 표시할 수 있는 필드 및 그룹입니다.

  • 리피터 옵션 섹션에서 최소 및/또는 최대 이 필드의 필수 인스턴스 수를 선택합니다.
  • 모듈에 기본적으로 표시되는 필드의 인스턴스 수인 기본 개체 수를 설정하도록 선택할 수도 있습니다.

아래 예시에서는 이미지 필드를 이미지 슬라이더로 설정하고 있습니다. 모듈에 최소 3개에서 최대 5개까지 이미지 필드가 표시되도록 개체 수 제한이 설정되어 있습니다. 사용자는 기본적으로 4개의 이미지 필드가 모듈에 표시되며, 이미지 필드를 하나 더 추가하거나 기존 이미지 필드 하나를 제거하도록 선택할 수 있습니다.

리피터 옵션은 옵션 중 하나를 수정하면 자동으로 활성화됩니다. 리피터 옵션을 비활성화하려면 리피터 옵션 오른쪽에 있는 토글 스위치를 클릭합니다.

모듈 필드 그룹화

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

모듈 필드를 함께 그룹화합니다:

  • 모듈 편집기의 오른쪽 사이드바에서 그룹을 클릭합니다.

  • 함께 그룹화할 필드를 선택합니다.
  • 그룹 만들기를 클릭합니다.

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

  • 필드를 모듈에 통합할 준비가 되면 필드 스니펫을 복사하여 모듈의 HTML + HubL 편집기에 붙여넣습니다.
    • 필드 검사기를 사용하는 경우 필드의 HubL 변수 이름 오른쪽에 있는코드 조각 복사를 클릭합니다.
    • 모듈 검사기에서 필드를 마우스오버하고 작업 드롭다운을 클릭한 다음 코드 조각 복사를 선택합니다.
  • HTML + HubL 편집기에서 필드를 추가하려는 위치를 클릭한 다음 Ctrl+V또는 Cmd+V를 눌러 코드 조각을 붙여넣습니다.

모듈 구문 작성

모듈을 편집할 때 HTML + HubL, CSSJS 편집기 창에서 추가 모듈 구문을 작성할 수 있습니다. 모듈 코드 편집기모듈 구문 참조에 대한 자세한 내용은 HubSpot의 디자이너 문서에서 확인하세요.

모듈에 도움말 텍스트 추가

편집기 옵션 섹션에서 도움말 텍스트를 추가하여 모듈을 수정할 때 사용자에게 컨텍스트를 제공합니다. 도움말 텍스트는 300자를 넘지 않아야 합니다.

사용자가 콘텐츠 편집기에서 모듈을 편집하면 도움말 텍스트가 모듈 필드 위에 표시됩니다.

모듈 미리보기

모듈 편집기 오른쪽 상단의 미리 보기 버튼을 클릭하여 콘텐츠 편집기에서 모듈이 어떻게 표시되고 작동하는지 미리 볼 수 있습니다. 모듈 미리보기가 새 탭에서 열립니다. 이 미리 보기는 편집기와 동기화되며 작업할 때 자동으로 새로 고쳐집니다.

모듈 게시

필드 추가와 모듈 구문 작성을 마치면 모듈 게시를 진행할 수 있습니다. 오른쪽 상단에서 변경 사항 게시를 클릭합니다.

모듈을 템플릿에 사용할 수 있도록 설정

  • 편집기 오른쪽 상단의 템플릿에 사용 가능 토글을 켜서 이 모듈을 템플릿에 추가할 수 있도록 설정합니다.

  • 모듈의 기능을 변경하거나 테스트하려면 이 토글을 끄세요. 이 토글을 비활성화하면 팀에 이 모듈을 템플릿에 사용할 수 없다는 경고가 표시됩니다.

템플릿에 모듈 추가하기

모듈을 게시한 후에는 템플릿에 추가하여 페이지 전체에서 사용할 수 있습니다.

드래그 앤 드롭 템플릿에 모듈을 추가하려면 다음과 같이 하세요:

  • 템플릿 레이아웃 편집기에서 레이아웃 검사기 상단의 추가 탭을 클릭한 다음 모듈을 검색합니다. 생성한 사용자 정의 모듈은 사용자 정의 모듈 아이콘( customModules)으로 식별할 수 있습니다.
  • 모듈을 템플릿으로 끌어다 놓습니다.

코딩된 템플릿에 모듈을 추가하려면 모듈 스니펫을 복사하여 템플릿에 붙여넣을 수 있습니다:

  • 모듈 편집기에서 모듈 코드 조각을 복사하려면 오른쪽 사이드바 하단에서 코드 조각 복사를 클릭합니다.

  • 디자인 관리자의 왼쪽 사이드바에서 모듈 스니펫을 복사하려면 다음과 같이 하세요:
    • 왼쪽 사이드바에서 사용자 정의 모듈을 찾습니다.
    • 모듈을 마우스 오른쪽 버튼으로 클릭한 다음 코드 조각 복사를 선택합니다. 또는 모듈을 선택한 다음 왼쪽 상단의 작업을 클릭하고 코드 조각 복사를 선택할 수 있습니다.

  • 코딩된 템플릿에서 필요한 곳에 스니펫을 붙여넣습니다.

이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.