HubSpot 콘텐츠에 이미지 사용

HubSpot 콘텐츠의 서식 있는 텍스트 모듈 또는 이미지 모듈에 이미지를 추가할 수 있습니다. 서식 있는 텍스트 모듈은 여러 유형의 콘텐츠(이미지, 텍스트, CTA 등)를 지원하지만 각 이미지 모듈에는 하나의 이미지만 포함할 수 있습니다.

참고: 드래그 앤 드롭 이메일 편집기의 텍스트 모듈 및 사용자 지정 서식 있는 텍스트 모듈에는 이미지를 포함할 수 없습니다.

이미지 추가하기

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 지식 베이스: HubSpot 계정에서 서비스 > 기술 자료로 이동합니다.
  • 이메일HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
• 콘텐츠의 이름을 클릭합니다.

참고: 마케팅 이메일에는.png, .ico, .bmp, .jpg 및 .gif 이미지파일만 추가할 수 있습니다.

• 이미지를 삽입합니다:
  • 서식 있는 텍스트 모듈에 이미지를 추가하려면 서식 있는 텍스트 모듈을 클릭한 다음 서식 있는 텍스트 도구 모음에서 insertImage ici이미지 아이콘을 클릭합니다.
  • 이미지 모듈에 이미지를 추가하려면 이미지 모듈을 클릭한 다음 플레이스홀더 이미지 위의 사이드바 편집기에서 바꾸기를 클릭합니다.
• 이미지를 선택합니다:
  • 기존 이미지를 삽입하려면 오른쪽 패널에서 이미지를 클릭합니다.

• • 컴퓨터에서 또는 파일 URL을 통해 새 이미지를 업로드하려면 오른쪽 패널에서 이미지 추가를 클릭합니다. Canva의 편집 도구를 사용하여 새 이미지를 만들려면 Canva로 디자인을 클릭합니다. 그런 다음 이미지를 클릭하여 삽입합니다.
• 이미지를 삽입하기 전에 로딩 시간이나 해상도에 맞게 이미지를 최적화할 수 있습니다. 오른쪽 패널에서 이미지 위로 마우스를 가져간 다음 세부 정보를 클릭합니다.
• 그런 다음 이미지 최적화 드롭다운 메뉴를 클릭하고 최적화 옵션을 선택합니다:
  • 높음: 이미지가 더 높은 해상도로 로드되지만 로드 시간이 늘어납니다.
  • 기본: 이미지가 해상도와 로드 시간 모두에 맞게 최적화됩니다.
  • 낮음: 이미지가 더 낮은 해상도로 로드되지만 로드 시간이 단축됩니다. 로딩 시간에 맞춰 페이지를 최적화하는 방법에 대한 자세한 내용은 개발자 문서를 참조하세요.
    

이미지 편집

콘텐츠에 이미지를 추가한 후에는 크기를 편집하고, 대체 텍스트를 추가하고, 링크를 추가하거나, 로딩 동작을 설정할 수 있습니다.

서식 있는 텍스트 모듈에서 이미지 편집

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 지식 베이스: HubSpot 계정에서 서비스 > 기술 자료로 이동합니다.
  • 이메일HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
• 콘텐츠의 이름을 클릭합니다.
• 콘텐츠 편집기에서 이미지를 클릭하여 이미지 편집 툴바를 표시합니다.
• 이미지를 편집합니다:
  • 텍스트가 이미지를 둘러싸는 방식을 조정하려면 inline 맞춤 아이콘을 클릭합니다.

• • 이미지의 크기를 조정하려면 너비 및 높이 화살표를 클릭하거나 픽셀 값을 입력합니다.
  • 이미지 주변의 여백을 조정하려면 간격 드롭다운 메뉴를 클릭한 다음 이미지 아이콘의 가장자리 주변에 픽셀 값을 입력합니다.
• 서식 있는 텍스트 모듈에서 이미지를 제거하려면 이미지를 클릭한 다음 delete 휴지통 아이콘을 클릭합니다.

• 서식 있는 텍스트 모듈에서 이미지를 바꾸려면 이미지를 클릭한 다음 replace repl바꾸기 아이콘을 클릭하고 새 이미지를 추가합니다.

• 이미지를 링크하거나 대체 텍스트를 추가하거나 로딩 동작을 설정하려면 이미지를 클릭한 다음 연필 아이콘 (edit: )을 클릭합니다.
  • 이미지에 링크를 추가하려면팝업 상자에서 링크 대상 드롭다운 메뉴를 클릭하고 링크 카테고리를 선택합니다. 아래 필드에 링크의 대상을 입력합니다. 다양한 유형의 링크에 대해 자세히 알아보세요.

• • 대체 텍스트 필드에 검색 엔진 및 화면 리더에 이미지가 무엇인지 설명할 텍스트를 입력합니다. 파일 도구에서 이미지에 대체 텍스트를 추가할 수도 있습니다. 대체 텍스트를 추가하면 사이트의 접근성과 SEO가 향상됩니다. 개발자 문서에서 웹사이트 접근성에 대해 자세히 알아보세요.

참고: 이미지에 대체 텍스트를 추가해도 제목 텍스트는 추가되지 않습니다. 대체 텍스트는 검색 엔진 순위와 접근성에 영향을 주지만 제목 텍스트는 방문자가 이미지 위로 마우스를 가져가면 표시됩니다.

• 이미지 로딩 동작을 설정하고 검색 엔진용 이미지 링크 유형을 사용자 지정하려면 고급을 클릭합니다.
  • 이미지 로딩 동작을 설정하려면 이미지 로딩 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
    • 지연: 방문자가 페이지의 해당 부분에 도달할 때만 이미지가 로드됩니다. 이렇게 하면 페이지가 로드되는 데 걸리는 시간이 단축되고 SEO가 향상됩니다. 기본적으로 이미지는 이 설정으로 로드됩니다.

• • • 브라우저 기본값: 이미지 로드 동작은 방문자의 브라우저 설정에 따라 결정됩니다.
    • 기다림: 페이지가 로드되는 즉시 이미지가 로드됩니다.

• • 이미지 링크 유형을 사용자 지정하려면 링크 유형 섹션에서 하나 이상의 속성을 선택합니다:
    
    • 일반: 이 링크는 스폰서 링크가 아닙니다.
    • 팔로우 안 함: 이 링크는 내 웹사이트와 연결되지 않습니다.
    • 스폰서: 이 링크는 스폰서 링크 또는 광고입니다.
    • 사용자 생성 콘텐츠: 이 링크는 블로그 댓글이나 포럼 토론과 같은 사용자 생성 콘텐츠로 연결됩니다.
• 적용을 클릭하여 이미지에 변경 사항을 적용합니다.

• 변경 내용을 적용하려면 오른쪽 상단의 게시 또는 업데이트를 클릭한 다음 대화 상자에서 게시 또는 업데이트를 클릭합니다.

이미지 모듈에서 이미지 편집하기

• 콘텐츠로 이동합니다:

  • 웹사이트 페이지로 이동합니다: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
  • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
  • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 이메일HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
• 콘텐츠의 이름을 클릭합니다.
• 콘텐츠 편집기에서 이미지 모듈을 클릭합니다.
• 현재 이미지를 제거하려면 사이드바 편집기의 이미지 섹션에서 제거를 클릭합니다. 이렇게 하면 이미지 모듈에서 현재 이미지가 제거되지만 페이지에서 모듈이 제거되지는 않습니다.

• 현재 이미지를 바꾸려면 사이드바 편집기의 이미지 섹션에서 바꾸기를 클릭한 다음 새 이미지를 추가합니다.
• 대체 텍스트 필드에 검색 엔진 및 화면 리더에 이미지가 무엇인지 설명하는 텍스트를 입력합니다. 파일 도구에서 이미지에 대체 텍스트를 추가할 수도 있습니다. 대체 텍스트를 추가하면 사이트의 접근성과 SEO가 향상됩니다. 웹사이트 접근성에 대한 자세한 내용은 개발자 문서에서 확인하세요.

참고: 이미지에 대체 텍스트를 추가해도 제목 텍스트는 추가되지 않습니다. 대체 텍스트는 검색 엔진 순위와 접근성에 영향을 주지만 제목 텍스트는 방문자가 이미지 위로 마우스를 가져가면 표시됩니다.

• 여러 디바이스에서 이미지의 크기를 설정하려면 크기 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
  
  • 자동 조정: 이미지가 보는 디바이스에 맞게 크기가 조정됩니다.
  • 정확한 높이와 너비: 이미지가 모든 디바이스에서 동일한 크기로 표시됩니다.
• 이미지 크기에 제한을 설정하려면 최대 크기 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
  • 이미지의 원래 크기: 이미지가 원래 크기보다 크게 표시되지 않습니다.
  • 사용자 지정: 이미지가 너비 및 높이 필드에 설정된 특정 너비와 높이보다 크게 표시되지 않습니다.
• 이미지 로딩 동작을 설정하려면 이미지 로딩 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
  • 브라우저 기본값: 이미지 로딩 동작은 방문자의 브라우저 설정에 따라 결정됩니다.

• • 지연: 방문자가 페이지의 해당 부분에 도달할 때만 이미지가 로드됩니다. 이렇게 하면 페이지가 로드되는 데 걸리는 시간이 단축되고 SEO가 향상됩니다. 기본적으로 이미지는 이 설정으로 로드됩니다.

• • 열망: 이미지가 가능한 한 빨리 로드됩니다.
• 이미지에 링크를 추가하려면 링크(선택 사항) 필드에 대상 URL을 입력합니다. 새 탭에서 링크 열기 확인란을 선택하여 방문자가 새 브라우저 탭에서 대상 URL로 이동하도록 합니다.
• 변경 사항을 적용하려면 오른쪽 상단의 게시 또는 업데이트를 클릭합니다.