마지막 업데이트 날짜: 2026년 1월 15일
명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.
디자인 관리자 설정으로 개발자 환경을 사용자 지정하세요. 디자인 관리자 설정에는 기본 디자인 관리자 시작 동작, 사용자 지정 코딩 파일의 코드 설정 및 JavaScript 린팅이 포함됩니다.
디자인 관리자 설정을 사용자 지정하려면 디자인 도구 권한이 필요합니다.
일반 설정 사용자 지정
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 오른쪽 하단에서 설정을 클릭한 다음 설정 열기를 선택합니다.
- 디자인 매니저에 액세스할 때 파인더를 열려면 시작 시 파인더 열기 스위치를 켭니다.
- 파일 간에 전환할 때 미리 보기를 자동으로 업데이트하려면 시작 시 켜짐 섹션에서 파일 전환 시 미리 보기 업데이트 켜짐을 토글합니다.
- 사전 렌더링 경고를 켜려면 허브 보푸라기 섹션에서 사전 렌더링 경고 활성화 스위치를 켭니다.
코드 설정 사용자 지정
코드 설정을 사용자 지정하여 코드 편집기에서 코드가 표시 및 편집되는 방식을 제어할 수 있습니다. 이러한 설정은 가독성, 일관성 및 코드 작성 또는 업데이트 시 서식이 작동하는 방식에 영향을 줍니다.
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 오른쪽 하단에서 설정을 클릭한 다음 설정 열기를 선택합니다.
- 설정 일반 드롭다운 메뉴를 클릭하고 코드를 선택합니다.
- 모양 및 소스 섹션을 계속 사용자 지정합니다.
모양
- 테마: 코드 편집기에서 사용하는 색 구성표입니다.
- 글꼴: 코드 편집기에서 사용하는 기본 글꼴 및 글꼴 크기입니다.
소스
- 탭 크기: 코드 편집기에서 탭 키를 누를 때 탭 문자의 너비입니다.
- 들여쓰기단위: 스마트 들여쓰기로 코드 블록을 들여쓰기할 공백의 수입니다.
- 소프트 탭: 켜져 있으면 탭 키가 탭 문자 대신 탭 크기와 동일한 공백 문자를 삽입합니다.
- 스마트 들여쓰기: 켜면 새 줄은 이전 줄에서 설정한 들여쓰기를 따릅니다.
- 서식 입력 시 들여쓰기: 켜면 상황에 맞는 입력에서 같은 줄을 들여쓰기합니다. 예를 들어
case x:문이나 닫는}문이 삽입될 때 올바르게 들여쓰기됩니다. - 탭으로 들여쓰기: 켜면 스마트 들여쓰기 또는 서식 지정 입력으로 인한 자동 들여쓰기가 탭을 사용합니다.
- 줄 바꿈: 켜면 가로로 스크롤할 필요 없이 줄을 바꿉니다.
- 대괄호 자동 닫기: 켜면 코드 편집기에서 다음과 같은 대괄호 및 따옴표 문자가 자동으로 닫힙니다:
() [] {} ’’ ”” - 태그 자동 닫기: 이 옵션을 켜면 코드 편집기에서 XML 태그가 자동으로 닫힙니다.
- 대괄호일치: 이 옵션을 켜면 대괄호 문자 옆에 커서를 놓으면 해당 여는 대괄호 또는 닫는 대괄호가 강조 표시됩니다.
- 태그 일치: 켜져 있는 경우 커서를 태그 옆에 놓으면 해당 여는 태그 또는 닫는 태그가 강조 표시됩니다.
- 블록 주석 계속: 이 옵션을 켜면 코드 편집기에서 새 줄을 만들 때 자동으로 블록 주석을 계속합니다.
자바스크립트 린팅 설정
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 오른쪽 하단에서 설정을 클릭한 다음 설정 열기를 선택합니다.
- 설정 일반 드롭다운 메뉴를 클릭하고 JS 린터를 선택합니다.
- 클릭하여 ESLint 사용 스위치를 켜거나 끕니다. 이 스위치를 켜면 코딩된 파일의 출력을 볼 때 ESLint가 자바스크립트 위에 실행됩니다.
- 왼쪽 패널에서 ESLint 설정을 구성합니다. ESLint 구성에 대해 자세히 알아보세요.
- 오른쪽 패널에서 JavaScript 데모가 왼쪽에서 변경한 내용을 보여줍니다.
- 기본 eslintrc 복원을 클릭하여 기본 구성을 복원합니다.
