사용자 정의 코드가 포함된 템플릿 만들기

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

개발자 문서에서 사용자 지정 자산 디자인에 대해 자세히 알아보세요.

새로운 HTML + HubL 파일 생성

1. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
2. 파인더 상단의 [ 파일 ] 드롭다운 메뉴를 클릭하고 [ 새 파일]을 선택합니다.

3. 대화 상자에서 ‘오늘 무엇을 만들까요?’ 드롭다운 메뉴를 클릭하고 ‘HTML + HubL’을 선택합니다.

4. '무엇을 만들고 계신가요?' 필드에서 다음 옵션 중 하나를 선택하세요:
   • 템플릿: 웹사이트 페이지, 랜딩 페이지, 블로그 게시물 또는 이메일에 표시될 콘텐츠의 레이아웃과 구조를 정의합니다.
   • 템플릿 부분(Template Partial): 여러 다른 템플릿에 포함될 수 있는 재사용 가능한 코드 또는 코드 조각입니다.
5. '템플릿 유형' 드롭다운 메뉴를 클릭하고 사용자 정의 코딩 템플릿의 유형 (페이지, 블로그 게시물/목록, 이메일 또는 시스템 페이지)을 선택하십시오. 템플릿 유형에 대해 자세히 알아보세요.
6. '파일 이름' 필드에 파일 이름을 입력하세요.
7. 파일 위치를 업데이트하려면 파일 위치 섹션에서 변경을 클릭하고 폴더를 선택하십시오 .
8. 완료되면 ‘생성’을 클릭하십시오.

템플릿에 HTML + HubL 추가하기

새 파일을 구성하면 코드 편집기로 이동하여 사용자 지정 코드를 추가하고, 실제 페이지에 어떻게 표시될지 미리 볼 수 있습니다.

HTML + HubL 추가

1. 템플릿에 사용할 HTML을 입력하세요. 사용자 정의 코드가 포함된 템플릿에 CSS 및 JavaScript 파일을 추가하는 방법에 대해 자세히 알아보세요.
2. HTML + HubL이 어떻게 렌더링되는지 확인하려면 왼쪽 상단의 ‘출력 표시’ 스위치를 켜세요. 오른쪽에 렌더링된 미리보기가 포함된 패널이 열립니다.

필수 HTML + HubL 추가

사용자 정의 템플릿이 정상적으로 작동하려면 특정 HTML 또는 HubL 변수가 필요합니다. 이러한 필수 변수 중 하나라도 누락된 경우, 템플릿을 게시하려고 할 때 오류 메시지가 표시될 수 있습니다.

• 페이지 및 블로그 템플릿에는 다음 변수가 필요합니다:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• 이메일 템플릿은 CAN-SPAM 규정을 준수하기 위해 다음 변수가 필요합니다:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• 이메일 템플릿에서 특정 이메일 클라이언트에 미리보기 텍스트를 표시하려면 다음 코드가 필요합니다:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

템플릿을 HTML로 복제하기

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

1. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
2. 파인더에서 복제하려는 템플릿의 이름을 클릭합니다.
3. ‘작업’ 드롭다운 메뉴를 클릭하고 ‘HTML로 복제’를 선택하세요. HTML 파일은 원본 파일과 동일한 폴더에 생성됩니다.

템플릿을 미리 보고 게시하세요

템플릿을 생성한 후에는 실제 페이지에서 어떻게 표시될지 미리 확인한 다음 게시할 수 있습니다.

1. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
2. 파인더에서 미리 보거나 게시하려는 템플릿의 이름을 클릭합니다.
3. 오른쪽 상단의 ‘미리 보기’ 드롭다운 메뉴를 클릭하고 다음 옵션 중 하나를 선택하세요.
   • '표시 옵션 포함 실시간 미리 보기'를 선택하면 뷰포트 사전 설정을 선택하여 다른 기기에서 템플릿이 어떻게 표시되는지 미리 볼 수 있습니다.
   • '디스플레이 옵션 없이 미리 보기'를 선택하면 템플릿이 브라우저에서 어떻게 표시되는지만 미리 볼 수 있습니다.
4. 작업이 끝나면 ‘변경 사항 게시’를 클릭하십시오.
5. 코드 오류가 있는 경우 오류 메시지가 표시됩니다. 코드 편집기 하단의 오류 콘솔에서 해당 오류에 대한 자세한 정보를 확인하세요:

• • 페이지 상단의 오류 메시지에서 ‘오류 콘솔’을 클릭하면 코드 편집기 아래에 콘솔이 열립니다.
  • 또는 코드 편집기의 왼쪽 하단으로 이동하여 ‘세부 정보 표시’를 클릭하세요.