자바스크립트 파일 생성 및 HubSpot에 추가하기
마지막 업데이트 날짜: 2026년 2월 24일
명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.
디자인 관리자에서 JavaScript 파일을 만들고 추가하여 HubSpot 호스팅 콘텐츠의 기능을 사용자 정의하세요. JavaScript 파일을 만들어 템플릿에 첨부하거나 전체 도메인 또는 개별 페이지에 추가할 수 있습니다.
예를 들어 JavaScript 파일을 사용하여 대화형 요소를 추가하거나 타사 스크립트를 통합하거나 표준 모듈을 넘어서는 페이지 동작을 사용자 정의할 수 있습니다.
시작하기 전에
JavaScript 파일로 작업하기 전에 다음 요구 사항과 고려 사항을 검토하세요.
다음 권한이 필요합니다:
-
디자인 관리자에서 JavaScript 파일을 만들고 편집하려면디자인 도구 권한이 필요합니다.
- 도메인에 JavaScript 파일을 추가하려면웹사이트 설정 권한이 필요합니다.
- 개별 페이지에 JavaScript 파일을 추가하려면편집 및 게시 권한이 필요합니다.
제한 사항 및 고려 사항 이해
- 변경 사항을 게시하면 관련 템플릿 또는 페이지에 업데이트가 즉시 적용됩니다.
- 도메인 수준에서 JavaScript를 추가하면 해당 도메인의 모든 HubSpot 호스팅 페이지에 스크립트가 적용됩니다.
JavaScript 파일 만들기
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 파인더에서 파일 드롭다운 메뉴를 클릭하고 새 파일을 선택합니다.
- 대화 상자에서 오늘 무엇을 빌드하시겠습니까? 드롭다운 메뉴를 클릭하고 JavaScript를 선택합니다. 다음을 클릭합니다.
- 파일 이름 필드에 JavaScript 파일의 이름을 입력합니다.
- 파일 위치를 업데이트하려면 파일 위치 섹션에서 변경을 클릭하고 파일을 추가할 폴더를 선택합니다.
- 만들기를 클릭합니다.
- 코드 편집기에 JavaScript를 입력합니다.
- ESLint를 활성화한 경우 출력 표시 스위치를 켜서 JavaScript 경고 또는 오류를 확인합니다.

-
완료했으면 오른쪽 상단의 변경사항 게시를 클릭합니다.
드래그 앤 드롭 템플릿에 JavaScript 파일 첨부하기
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 파인더에서 업데이트하려는 템플릿을 클릭합니다.
- 오른쪽의 인스펙터에서 편집 탭을 클릭합니다.
- 연결된 자바스크립트 파일 섹션에서 추가 드롭다운 메뉴를 클릭하고 자바스크립트 파일을 선택합니다.
- 완료했으면 오른쪽 상단의 변경사항 게시를 클릭합니다.
코딩된 템플릿에 JavaScript 파일 첨부하기
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 파인더에서 업데이트하려는 템플릿을 클릭합니다.
- 코드 편집기에서 require_js HubL 함수를 입력합니다. require_js HubL 함수 사용에 대해 자세히 알아보세요.
HubSpot 페이지에 JavaScript 파일 추가
공개 URL을 사용하여 HubSpot 호스팅 도메인의 모든 페이지 또는 개별 페이지에 JavaScript 파일을 추가할 수 있습니다.
JavaScript 파일의 공개 URL에 액세스하기
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 파인더에서 JavaScript 파일의 이름을 클릭합니다. 그런 다음 작업 드롭다운 메뉴를 클릭하고 공개 URL 복사를 선택합니다.
도메인의 모든 페이지에 JavaScript 파일 추가하기
- HubSpot 계정의 상단 탐색 모음에서 settings 설정 아이콘을 클릭합니다.
- 왼쪽 사이드바 메뉴에서 콘텐츠 > 페이지로 이동합니다.
- 설정을 편집할 도메인 선택 드롭다운 메뉴를 클릭하고 자바스크립트 파일을 추가할 도메인을 선택합니다. 연결된 모든 도메인에 JavaScript 파일을 적용하려면 모든 도메인에 기본 설정을 선택합니다.
- 사이트 바닥글 HTML 섹션에서 공개 URL을 스크립트 태그의 소스 값으로 붙여넣습니다:
<!-- start example.js Do Not Remove --><script src='insert your file's public URL here'></script><!---End example.js-->
- 완료했으면 왼쪽 하단의 저장을 클릭합니다.
개별 페이지에 JavaScript 파일 추가
참고: 스타터 템플릿에서는 고급 설정을 사용할 수 없습니다.
- 콘텐츠로 이동합니다:
- 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
- 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
- 페이지 이름을 클릭합니다.
- 콘텐츠 편집기에서 설정 메뉴를 클릭하고 고급을 선택합니다.
- 대화 상자의 바닥글 HTML 섹션에 공개 URL을 스크립트 태그의 소스 값으로 붙여넣습니다:
<!-- start example.js Do Not Remove --><script src='insert your file's public URL here'></script><!---End example.js-->
- 완료했으면 오른쪽 상단의 게시 또는 업데이트를 클릭합니다.
