주의:: 이 문서는 사용자의 편의를 위해 제공됩니다. .

사용자 지정 코딩 템플릿 구축

마지막 업데이트 날짜: 3월 7, 2025

개발자는 HTML + HubL을 사용하여 블로그, 웹사이트 페이지, 랜딩 페이지 및 이메일 템플릿을 처음부터 만들 수 있습니다. 드래그 앤 드롭 템플릿 레이아웃을 HTML로 복제한 다음 코딩된 템플릿으로 사용자 지정할 수도 있습니다.

개발자 문서에서 커스텀 에셋 디자인에 대해 자세히 알아보세요.

시작하기 전에

이 기능으로 작업을 시작하기 전에 미리 어떤 단계를 거쳐야 하는지, 이 기능의 제한 사항과 사용 시 발생할 수 있는 결과를 완전히 이해해야 합니다.

이메일 템플릿을 작성하려면 마케팅 허브 프로페셔널 또는 엔터프라이즈 구독이 필요합니다. Content Hub 계정은 드래그 앤 드롭 이메일 편집기를 사용하여 이메일을 만들 수 있습니다.
사용자 지정 코딩 템플릿은 미리 정의된 많은 변수를 사용할 수 있습니다. 이러한 변수 중 일부는 이메일 및 페이지를 만드는 데 필수이며, 다른 변수는 선택 사항입니다. 필수 이메일, 웹사이트 및 랜딩 페이지 HubL 변수를 추가하는 방법에 대해 자세히 알아보세요.

새 파일 대화 상자에서 오늘 무엇을 빌드하시겠습니까? 드롭다운 메뉴를 클릭하고 HTML + HubL을 선택한 후 다음을 클릭합니다.

새 파일을 구성한 후에는 코드 편집기로 이동하여 사용자 정의 코드를 추가하고 라이브 페이지에 어떻게 표시되는지 미리 볼 수 있습니다.

사용자 정의 코딩된 템플릿이 작동하려면 특정 HubL 변수가 필요합니다. 이러한 필수 변수 중 하나라도 누락된 경우 템플릿을 게시하려고 할 때 오류 메시지가 표시됩니다.

페이지 및 블로그 템플릿에는 다음 변수가 필요합니다:
- {{standard_footer_includes}}
- {{standard_header_includes}}
이메일 템플릿은 CAN-SPAM 규정을 준수하기 위해 다음 변수가 필요합니다.
- {{unsubscribe_link}} 또는 {{unsubscribe_link_all}} (하나 이상 포함)
- {{unsubscribe_anchor}}
- {{site_settings.company_name}}
- {{site_settings.company_street_address_1}}
- {{site_settings.company_city}}{{site_settings.company_state}}
- {{site_settings.company_zip}}

템플릿을 처음부터 새로 만드는 것 외에도 블로그, 웹사이트 페이지 및 랜딩 페이지용 드래그 앤 드롭 템플릿을 HTML로 복제할 수도 있습니다.

- 왼쪽 사이드바에서 복제하려는 템플릿을 엽니다.
- 작업 드롭다운 메뉴를 클릭하고 HTML로 복제를 선택합니다. HTML 파일이 원본 파일과 같은 폴더에 생성됩니다.

템플릿을 만든 후에는 라이브 페이지에 어떻게 표시될지 미리 본 다음 게시할 수 있습니다.

오른쪽 상단에서 미리 보기를 클릭합니다.
표시 옵션이 있는 실시간 미리 보기를 선택하면 뷰포트 사전 설정을 선택하여 템플릿이 다른 장치에 표시되는 모습을 미리 볼 수 있습니다.
표시 옵션 없이 미리 보기를 선택하면 템플릿이 브라우저에 표시되는 방식만 미리 볼 수 있습니다.
편집을 마치면 오른쪽 상단에서 변경 사항 게시를 클릭합니다.

코드 오류가 있는 경우 오류 메시지가 표시됩니다. 코드 편집기 아래의 오류 콘솔에서 이러한 오류에 대한 자세한 정보를 검토하세요:
- 페이지 상단의 오류 메시지에서 오류 콘솔을 클릭하여 코드 편집기 아래의 콘솔을 엽니다.
- 또는 코드 편집기 하단으로 이동하여 세부 정보 표시를 클릭합니다.

이 문서가 도움이 되었나요? 예 아니요

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