디자인 매니저에 대한 간단한 둘러보기

HubSpot의 디자인 매니저는 디자이너가 최첨단 웹사이트를 구축하는 데 필요한 모든 도구를 결합하는 동시에 마케팅 담당자가 콘텐츠를 제작할 때 원하는 유연성을 제공합니다.

이 글에서는 디자인 매니저의 모든 기능을 살펴봅니다. 구체적인 코드 예제 및 참조 문서를 찾고 있다면 HubSpot의 개발자 문서를확인하세요 .

디자인 매니저에 포함된 도구

디자인 매니저는 여러 가지 중요한 도구를 하나의 강력한 앱으로 통합합니다:

• Finder - 파일, 템플릿, 모듈 및 폴더를 만들고 정리하는 공간입니다.
• 레이아웃 편집기 - 페이지, 블로그, 이메일 및 시스템 템플릿을 구성하기 위한 드래그 앤 드롭 편집기입니다.
• 인스펙터 - 레이아웃, 모듈 또는 그룹의 속성을 편집할 수 있는 곳입니다.
• 코드 편집기 - 모든 프런트엔드 코드(CSS, 자바스크립트 또는 자체 HTML 템플릿)를 위한 통합 개발 환경(IDE)입니다.
• 모듈 편집기 - 재사용 가능한 사용자 정의 모듈을 설정하여 사이트에 고급 기능을 추가할 수 있으며, 기술 전문가가 아닌 사용자도 관리할 수 있습니다.
• 파일 관리자 - 사이트의 모든 자산을 위한 파일 호스팅 시스템입니다.

디자인 매니저로 이동하여 이러한 도구를 살펴보세요. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.

Finder

파인더는 모든 폴더, 템플릿, 모듈, 코딩된 파일을 관리할 수 있는 공간입니다. 파인더의 드래그 앤 드롭 인터페이스를 사용하여 파일과 폴더를 원하는 대로 정리할 수 있습니다. 파일을 클릭하면 포함된 파일을 확장하거나 축소할 수 있습니다.

모든 마케팅 허브 프로페셔널 및 엔터프라이즈와 콘텐츠 허브 프로페셔널 및 엔터프라이즈 계정에는 기본적으로 디자인 매니저에 @hubspot 폴더가 있습니다. 이 폴더에는 드래그 앤 드롭 이메일 모듈을 비롯한 모든 테마와 기본 모듈이 포함되어 있습니다. 이러한 테마와 모듈은 읽기 전용이지만 사용자 지정하려는 경우 복제할 수 있습니다. 테마 및 기본 모듈 사용자 지정에 대해 자세히 알아보세요.

파일을 클릭하여 새 파일 또는 폴더를 만들거나 현재 파인더에서 선택한 자산에 대해 삭제, 복제 또는 이름 바꾸기 등의 작업을 수행합니다. 보기 아래의 옵션을 사용하여 파일 및 폴더의 배열을 관리할 수 있습니다. 모든 폴더를 빠르게 축소하거나 최근에 편집하거나 삭제한 자산을 불러올 수 있습니다.

참고: 파인더는 상황에 따라 작동하므로 항상 선택한 폴더 및 파일과 관련된 작업을 수행하게 됩니다. 특정 폴더 안에 새 파일 또는 폴더를 만들려면 파인더에서 해당 폴더를 클릭합니다. 기존의 모든 폴더 외부에 새 파일 또는 폴더를 만들려면 보기를 클릭한 다음 모두 선택 취소를 선택합니다.

작업 메뉴는 파일 또는 폴더가 현재 선택되어 있는 경우에만 활성화되며 해당 유형 자산에 대한 상황에 맞는 옵션을 제공합니다. 자산을 마우스 오른쪽 버튼으로 직접 클릭하여 다음 중 하나를 수행할 수도 있습니다:

• 복제: 파일, 폴더 또는 템플릿의 사본을 만듭니다.
• 이동: 자산의 새 폴더를 선택합니다.
• 이름 바꾸기: 에셋에 새 이름을 지정합니다.
• HTML로복제: HTML로 완전히 코딩된 에셋의 사본을 만듭니다.
• 포털로 복사 : 자산의 사본을 만들어 액세스 권한이 있는 다른 HubSpot 계정으로 전송합니다.
• 페이지/이메일 만들기: 이 템플릿을 사용하여 새 콘텐츠를 만듭니다.
• 종속 항목 표시: 파일을 사용하는 모든 HubSpot 콘텐츠 목록을 확인합니다.
• 수정 버전 기록표시: 저장된 버전의 기록을 검토합니다.
• 코드 조각복사: 사용자 정의 코딩된 모듈의 코드 조각을 클립보드에 빠르게 복사하려면 이 옵션을 사용합니다. 이 옵션은 모듈을 마우스 오른쪽 버튼으로 클릭할 때만 표시됩니다.
• 폴더 잠금: 사용자가 디자인 관리자에서 폴더의 콘텐츠를 편집할 수 없도록 폴더를 잠급니다. 잠긴 폴더의 콘텐츠는 로컬 개발 환경 내에서만 편집할 수 있습니다.
• 삭제 - 이 파일, 폴더, 템플릿 또는 모듈을 삭제합니다.

탭

템플릿, 모듈 또는 코딩된 파일의 이름을 클릭하면 편집기의 탭에서 선택 항목이 열립니다. 탭을 사용하면 다양한 템플릿과 코딩된 파일 간에 쉽게 전환하고 멀티태스킹할 수 있습니다. 탭을 마우스 오른쪽 버튼으로 클릭하면 편집기에서 탭을 관리할 수 있는 옵션이 표시됩니다. 오른쪽의 아래쪽 화살표를 클릭하면 열려 있는 탭의 전체 목록을 검토할 수 있습니다.

레이아웃 편집기에서 작업할 공간을 더 확보하려면 접기 아이콘 (first )을 클릭하여 파인더를 접을 수 있습니다. 폴더 아이콘 folder 을 클릭하여 파인더를 다시 펼칠 수 있습니다.

새 템플릿 및 파일 만들기

새 템플릿, 모듈 또는 코딩된 파일을 만들려면 파인더의 왼쪽 상단 모서리에서 파일 > 새 파일을 클릭합니다. 다음 유형의 에셋을 만들 수 있는 옵션이 있습니다:

• 드래그 앤 드롭: 직관적인 드래그 앤 드롭 인터페이스에 모듈을 추가하여 구축한 템플릿입니다.
• HTML & HUBL: HTML, CSS, 자바스크립트를 사용하여 코드 편집기에서 만든 사용자 지정 코딩 템플릿입니다.
• 스타일시트: 모듈과 파일의 스타일을 지정하는 데 사용할 수 있는 코딩된 CSS 파일입니다.
• JavaScript: 모듈과 파일에 적용할 수 있는 자바스크립트 코딩 파일입니다.
• 모듈: 템플릿에 추가할 수 있는 사용자 지정 코딩된 모듈입니다.

레이아웃 편집기

레이아웃 편집기는 페이지와 이메일의 구조와 기본 콘텐츠를 위한 드래그 앤 드롭 인터페이스입니다. 모듈 및 그룹의 이름과 각 컴포넌트에 적용된 본문 클래스가 표시됩니다. 각 모듈 또는 그룹을 클릭하여 오른쪽의 인스펙터에서 편집하거나 구성 요소를 마우스 오른쪽 버튼으로 클릭하여 인스펙터의 기능에 액세스하여 각 모듈 또는 그룹을 수정할 수 있습니다.

레이아웃 편집기에서 컴포넌트를 끌어서 놓아 템플릿에서 배치와 크기를 조정할 수 있습니다. 왼쪽 상단에는 실행 취소 및 다시 실행 버튼이 있어 변경 사항을 빠르게 되돌릴 수 있습니다. 모듈을 마우스 오른쪽 버튼으로 클릭하여 모듈 유형을 빠르게 그룹화, 복제 또는 변경하거나 키보드 단축키를 사용하여 동일한 작업을 수행할 수도 있습니다.오른쪽 상단의 미리보기 버튼을 클릭하여 작업을 미리 보고 다양한 화면 크기에서 레이아웃을 테스트할 수 있습니다.

모든 HubSpot 템플릿 레이아웃은 반응형이므로 다양한 화면 크기에 맞게 자동으로 조정됩니다. 이 편집기는 드래그 앤 드롭 모듈을 깔끔한 HTML 마크업으로 컴파일하여 일부 기본 제공 CSS에 의해 반응형으로 만들어 줍니다.

템플릿을 만들고 편집하고 템플릿에 스타일을 추가하는 방법에 대해 자세히 알아보세요.

인스펙터

인스펙터를 사용하면 템플릿 또는 모듈에 컴포넌트를 추가하고 편집할 수 있습니다. 이 기능은 수행 중인 작업과 파일 유형에 따라 상황에 따라 달라집니다. 예를 들어

• 드래그 앤 드롭 편집기에서 컴포넌트를 선택하면 인스펙터에 해당 컴포넌트의 모든 기능과 옵션이 표시됩니다.
• 드래그 앤 드롭 편집기에서 선택한 컴포넌트가 없는 경우 인스펙터에 템플릿 자체에 대한 옵션이 표시됩니다.
• 모듈을 편집할 때 인스펙터를 사용하면 필드를 편집하고 추가할 수 있습니다.

템플릿에서 선택한 모듈 유형에 따라 인스펙터에서 사용할 수 있는 옵션이 다를 수 있습니다.

드래그 앤 드롭 템플릿의 경우 + 추가 탭을 사용하여 레이아웃에 새 컴포넌트를 추가할 수 있습니다. 인스펙터의 편집 탭은 사용자 정의 CSS 클래스를 할당하거나 기본 콘텐츠를 편집하거나 코딩된 파일을 첨부하는 데 사용할 수 있습니다.

인스펙터 상단에 이동 경로 탐색 기능이 있어 현재 작업 중인 에셋, 모듈, 그룹 및 템플릿 사이를 빠르게 이동할 수 있습니다.

사용자 정의 코딩된 HTML 및 HUBL 템플릿과 모듈의 경우 인스펙터를 사용하여 새 필드를 추가하거나 코딩된 파일에 링크할 수 있습니다. 또한 필터 태그를 추가하여 코딩된 템플릿과 모듈의 콘텐츠 유형과 기능을 표시하여 파인더에서 더 쉽게 검색할 수 있도록 할 수도 있습니다. 템플릿에서 이러한 사용자 지정 코딩 에셋을 사용하는 방법에 대한 스니펫과 자세한 내용도 확인할 수 있습니다.

코드 편집기

HubSpot의 코드 편집기는 CSS 파일, 자바스크립트 파일, HTML 템플릿까지 코딩할 수 있는 강력한 IDE입니다. 스타일시트를 코딩하거나 편집할 때 다양한 화면 크기에서 변경 사항의 효과를 실시간으로 미리 볼 수 있습니다. 코드 편집기는 색상으로 구분된 클래스, 오류 검사, 구문 강조 표시, 자동 저장, 자동 닫기 태그, 자동 들여쓰기 등 다른 많은 유용한 IDE 기능도 활용할 수 있습니다.

코드 편집기 사용 방법에 대해 자세히 알아보세요.

참고: 기본적으로 HubSpot은 디자인 매니저에 포함된 JavaScript 및 CSS를 자동으로 축소하여 불필요한 공백, 줄 바꿈 및 주석을 제거합니다. 이는 CLI를 통해 디자인 매니저에 업로드된 JavaScript 및 CSS에도 적용됩니다. 즉, 이미 축소된 코드를 디자인 매니저에 직접 추가해서는 안 됩니다.

JavaScript 및 CSS 축소에 대해 자세히 알아보세요.

모듈 편집기

HubSpot의 드래그 앤 드롭 템플릿에는 선택할 수 있는 여러 표준 모듈이 제공되지만 디자이너는 때때로 보다 맞춤화된 디자인 솔루션이 필요할 수 있습니다. 모듈은 HTML 및 HubL 필드, CSS 및 Javascript로 구성된 재사용 가능한 사용자 정의 코딩 구성 요소입니다. 이러한 모듈은 템플릿에 추가하고 페이지 편집기에서 코드 없이 사용자 정의할 수 있습니다.

인스펙터를 사용하여 필드를 추가하고, 코딩된 파일을 첨부하거나, 태그를 추가하여 에셋을 정리할 수 있습니다. 코드 편집기에서와 마찬가지로 다양한 화면 크기에서 작업을 진행하면서 실시간으로 미리 볼 수 있습니다. 모듈 필드의 기본 콘텐츠를 지정하거나, 기본 콘텐츠를 잠그거나, 특정 모듈 필드를 필수로 설정할 수도 있습니다.

파일 관리자

HubSpot의 파일 관리자는 콘텐츠를 만드는 데 사용하는 모든 자산을 저장합니다. 이 도구를 사용하면 PDF, 이미지, 동영상, 오디오 파일, 글꼴 등을 업로드할 수 있습니다. 앱을 종료하지 않고도 크리에이티브 자산에 액세스하거나 새 파일을 빠르게 업로드할 수 있습니다.