콘텐츠로 건너뛰기
HubSpot 기술 자료
주의:: 이 문서는 사용자의 편의를 위해 제공됩니다. 이 문서는 번역 소프트웨어를 사용하여 자동으로 번역되었으며 교정을 거치지 않았을 수 있습니다. 이 문서의 영어 버전이 가장 최신의 정보를 확인할 수 있는 공식 버전으로 간주해야 합니다. 여기에서 액세스할 수 있습니다..

HubSpot 콘텐츠에 이미지 사용하기

마지막 업데이트 날짜: 2026년 10월 30일

명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.

HubSpot 콘텐츠의 리치 텍스트 모듈이나 이미지 모듈에 이미지를 추가하세요. 리치 텍스트 모듈은 다양한 유형의 콘텐츠(이미지, 텍스트, CTA 등)를 지원하지만, 각 이미지 모듈에는 하나의 이미지만 포함할 수 있습니다.

콘텐츠에 이미지 추가하기

권한 필요 새 이미지를 업로드하려면 파일 편집 권한이 필요합니다.

  • 이메일에 이미지를 추가하려면: 
    • 서식 있는 텍스트 모듈: 클래식 편집기를 사용하는 이메일의 경우, 서식 있는 텍스트도구 모음에서 삽입(insertImage) 아이콘을 클릭하세요.드래그 앤 드롭 이메일 편집기의텍스트 모듈 및 사용자 정의 서식 있는 텍스트 모듈에는 이미지를 포함할 수 없습니다. 
    • 이미지 모듈: 드래그 앤 드롭 이메일 편집기를 사용하는이메일의 경우, 이미지 모듈을 클릭한 다음, 자리 표시자 이미지 위의 사이드바 편집기에서 ‘바꾸기’를 클릭하세요.

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

  • 페이지, 게시물 또는 기사에 이미지를 추가하려면: 
    • 서식 있는 텍스트 모듈: 서식 있는 텍스트 모듈을 클릭한 다음, 서식 있는 텍스트 도구모음에서 '이미지 삽입'아이콘을클릭하세요.
    • 이미지 모듈:이미지 모듈을 클릭한 다음, 자리 표시자 이미지 위의 사이드바 편집기에서 '바꾸기'를클릭합니다. 
  • 이미지 선택: 
    • 기존 이미지를 삽입하려면 오른쪽 패널에서 이미지를 클릭하세요.
    • 컴퓨터에서 또는 파일 URL을 통해 새 이미지를 업로드하려면 오른쪽 패널에서 ‘이미지 추가’를 클릭하세요. Canva의 편집 도구를 사용하여 새 이미지를 만들려면 ‘Canva로 디자인’을 클릭하세요. 그런 다음 이미지를 클릭하여 삽입하세요 .
  • 이미지를 삽입하기 전에 로딩 시간이나 해상도에 맞게 이미지를 최적화할 수 있습니다. 오른쪽 패널에서 이미지에 마우스를 올린 후 '세부 정보'를 클릭하세요.
  • 그런 다음 ‘이미지 최적화’드롭다운 메뉴를 클릭하고최적화 옵션을 선택하세요: 
    • 높음: 이미지가 더 높은 해상도로 로드되지만, 로딩 시간이 늘어납니다.
    • 기본: 이미지가 해상도와 로딩 시간 모두에 최적화됩니다.
    • 낮음: 이미지가 낮은 해상도로 로드되지만, 로딩 시간은 단축됩니다. 로딩 시간을 고려한 페이지 최적화에 대한 자세한 내용은 개발자 문서에서 확인하세요. 
       
KB - Image Optimization

이미지 편집

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

리치 텍스트 모듈에서 이미지 편집하기 

  • 콘텐츠로 이동:

  • 콘텐츠 이름을 클릭하세요. 
  • 콘텐츠 편집기에서 이미지를 클릭하여 이미지 편집 도구 모음을 표시하세요.
  • 이미지 편집: 
    • 이미지 주위의 텍스트 배열 방식을 조정하려면 인라인 정렬 아이콘을 클릭하세요. 
    • 이미지 크기를 조정하려면 너비 및 높이 화살표를 클릭하거나 픽셀 값을 입력하세요. 
    • 이미지 주변의 여백을 조정하려면 '간격' 드롭다운 메뉴를 클릭한 다음, 이미지 아이콘의 가장자리 주변에 픽셀 값을 입력하세요.
  • 리치 텍스트 모듈에서 이미지를 제거하려면 이미지를 클릭한 다음,휴지통삭제 아이콘을 클릭하세요. 
  • 리치 텍스트 모듈에서 이미지를 교체하려면 이미지를 클릭한 다음,교체 아이콘을 클릭하고 새 이미지를 추가하세요.
edit-image-in-rich-text-module
  • 이미지에 링크를 추가하거나, 대체 텍스트를 입력하거나, 로딩 동작을 설정하려면 이미지를 클릭한 다음 연필 모양의 편집 아이콘을 클릭하세요:
    • 이미지에 링크를 추가하려면팝업 상자의 ‘링크 대상’드롭다운 메뉴를 클릭하고 링크 범주를 선택하세요. 아래 필드에 링크의대상 주소를 입력하세요. 다양한 링크 유형에 대해 자세히 알아보세요.
    • '대체 텍스트' 필드에 검색 엔진과 화면 낭독기에 이미지가 무엇인지 설명하는텍스트를 입력하세요 . 파일 도구에서 이미지에 대체 텍스트를 추가할 수도 있습니다.대체 텍스트를 추가하면 사이트의 접근성과 SEO가 향상됩니다. 개발자 문서에서 웹사이트 접근성에 대해 자세히 알아보세요. 

참고: 이미지에 대체 텍스트를추가한다고 해서 제목 텍스트가 추가되는 것은 아닙니다. 대체 텍스트는 검색 엔진 순위와 접근성에 영향을 미치는 반면, 제목 텍스트는 방문자가 이미지 위에 마우스를 올렸을 때 표시됩니다. 

  • 이미지 로딩 동작을 설정하고 검색 엔진을 위한 이미지 링크 유형을 사용자 지정하려면 [ 고급] 을 클릭하세요. 
    • 이미지 로딩 동작을 설정하려면 ‘이미지 로딩’드롭다운메뉴를 클릭하고 다음 옵션 중 하나를 선택하세요. 
      • 지연 로딩(Lazy):방문자가 페이지의 해당 부분에 도달했을 때만이미지가로드됩니다. 이렇게 하면 페이지 로딩 시간이 단축되고 SEO가 향상됩니다. 기본적으로 이미지는 이 설정으로 로드됩니다. 
      • 브라우저 기본값:이미지의 로딩방식은방문자의 브라우저 설정에 따라 결정됩니다. 
      • Eager:페이지가 로드되는 즉시이미지가로드됩니다. 
    • 이미지 링크 유형을 사용자 지정하려면 ‘링크 유형’ 섹션에서하나 이상의속성을 선택하십시오: 
      • 일반: 이링크는 스폰서 링크가 아닙니다. 
      • 노팔로우(No follow):이 링크는 귀하의 웹사이트와 관련이 없습니다.
      • Sponsored: 이링크는 스폰서 링크 또는 광고입니다.
      • 사용자 생성 콘텐츠: 이링크는 블로그 댓글이나 포럼 토론과 같은 사용자 생성 콘텐츠로 연결됩니다. 
  • '적용'을 클릭하여 변경 사항을 이미지에 적용하십시오.

add-link-and-alt-text-to-rich-text-image

  • 변경 사항을 적용하려면 오른쪽상단의‘게시’ 또는‘업데이트’를클릭한 다음, 대화상자에서 ‘게시’ 또는‘업데이트’를다시 클릭하세요. 

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

  • 콘텐츠로 이동하세요:

  • 콘텐츠 이름을 클릭하세요. 
  • 콘텐츠 편집기에서 이미지 모듈을 클릭하세요. 
  • 현재 이미지를 제거하려면 사이드바 편집기의 ‘이미지’ 섹션에서 ‘제거’를클릭하세요. 이렇게 하면 이미지 모듈에서 현재 이미지가 제거되지만, 페이지에서 모듈 자체가 제거되지는 않습니다. 
  • 현재 이미지를 교체하려면 사이드바 편집기의 ‘이미지’ 섹션에서‘교체’를 클릭한 다음 새 이미지를 추가하세요. 
  • '대체 텍스트' 필드에 검색 엔진과 화면 읽기 프로그램에 이미지가 무엇인지 설명하는텍스트를 입력하세요 . 파일 도구에서 이미지에 대체 텍스트를 추가할 수도 있습니다.대체 텍스트를 추가하면 사이트의 접근성과 SEO가 향상됩니다. 개발자 문서에서 웹사이트 접근성에 대해 자세히 알아보세요. 

참고: 이미지에 대체 텍스트를추가한다고 해서 제목 텍스트가 추가되는 것은 아닙니다. 대체 텍스트는 검색 엔진 순위와 접근성에 영향을 미치는 반면, 제목 텍스트는 방문자가 이미지 위에 마우스를 올렸을 때 표시됩니다. 

replace-image

 


  • 다양한 기기에서 이미지의 크기를 설정하려면 ‘크기’ 드롭다운 메뉴를 클릭하고옵션을 선택하세요:
    • 자동 조정:이미지가 표시되는 기기에 맞게 크기가 조정됩니다. 
    • 정확한 높이와 너비: 이미지는 모든 기기에서 동일한 크기로 표시됩니다.
  • 이미지 크기에 제한을 설정하려면 ‘최대 크기’ 드롭다운 메뉴를 클릭하고‘ ’ 옵션 중 하나를 선택하세요: 
    • 이미지의 원본 크기: 이미지는 원본 크기보다 크게 표시되지 않습니다. 
    • 사용자 지정: 이미지는너비 및높이 입력란에 설정된 특정 너비와 높이보다 크게 표시되지 않습니다. 
  • 이미지 로딩 동작을 설정하려면 ‘이미지 로딩’드롭다운메뉴를 클릭하고 옵션을 선택하십시오: 
    • 브라우저 기본값:이미지의 로딩방식은방문자의 브라우저 설정에 따라 결정됩니다. 
    • 지연 로딩:방문자가 페이지의 해당 부분에 도달했을 때만이미지가로드됩니다. 이렇게 하면 페이지 로딩 시간이 단축되고 SEO가 개선됩니다. 기본적으로 이미지는 이 설정으로 로드됩니다. 
    • 즉시 로딩: 이미지가 가능한 한 빨리 로드됩니다. 
  • 이미지에 링크를 추가하려면‘링크(선택 사항)’ 필드에 대상 URL을입력하세요. ‘새 탭에서 링크 열기’ 확인란을선택하면 방문자가 새 브라우저 탭에서 대상 URL로 이동합니다.
  • 변경 사항을 적용하려면 오른쪽상단의‘게시’ 또는‘업데이트’를클릭하세요.
     

set-image-size-and-loading-options

 
이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.
목차 메뉴

관련 콘텐츠

New call-to-action