이미지 SEO와 대체 텍스트: 전체 작업 흐름 최적화

설명용 예시: 커피 머신 페이지가 큰 이미지를 CSS 배경으로 사용하며 파일명이 불명확하고 주변에 모델 설명이 없다고 가정합니다. 이미지 전송, 접근 가능한 대체 정보와 문맥을 검토하세요. robots.txt만으로 이러한 문제를 진단할 수 없습니다.

이미지 SEO는 게시 후 alt 입력란에 키워드를 넣는 작업이 아닙니다. 선택, 이름 지정, 내보내기 크기, 주변 문구, HTML 삽입, CDN 제공, 메타데이터, 사이트맵으로 이어지는 결정입니다. 올바른 과정은 페이지 속도와 접근성을 지키면서 이미지 발견 가능성을 높입니다.

Google은 여러 신호로 이미지를 이해합니다

대체 텍스트는 중요하지만 단독으로 작동하지 않습니다. 검색엔진은 다음을 활용할 수 있습니다.

• 이미지가 포함된 페이지의 콘텐츠와 헤딩.
• 이미지 근처의 문단, 캡션, 제목.
• 파일명과 이미지 URL.
• alt 속성.
• 구조화된 데이터와 Open Graph.
• 이미지 또는 포함 페이지를 가리키는 링크.
• 파일 자체의 시각적 분석.

따라서 “바 카운터 위에 놓인 X200 커피 머신” 이미지는 실제로 X200을 다루는 페이지에서 디자인이나 사용법 설명 근처에 있어야 합니다. 맥락 없는 공용 갤러리에 넣고 긴 대체 텍스트를 작성해도 같은 수준의 명확함을 얻을 수는 없습니다.

크롤러가 찾을 수 있는 HTML 요소 사용하기

Google Search Central은 src 속성에 URL이 있는 <img> 요소를 권장합니다. CSS 배경은 장식에 사용하지만 Google 이미지에서 발견되기를 원하는 콘텐츠 이미지를 삽입하는 방식으로는 적합하지 않습니다.

기본 예시는 다음과 같습니다.

<img
  src="/images/x200-black-coffee-machine.webp"
  alt="Black X200 coffee machine beside a burr grinder"
  width="1200"
  height="800"
>

반응형 이미지에는 srcset, sizes, <picture>를 사용할 수 있지만 유효한 img src를 기본 요소로 유지해야 합니다. 원본과 렌더링된 HTML을 확인해 실행될 가능성이 낮은 상호작용 후에만 URL이 나타나는 것은 아닌지 점검하세요.

순수 장식용 이미지는 CSS에 넣을 수 있습니다. 이미지 파일이라는 이유만으로 모든 패턴, 배경 아이콘, 구분선을 이미지 사이트맵에 넣지 마세요.

이미지 목적에 맞는 대체 텍스트 작성법

대체 텍스트는 이미지를 볼 수 없는 사람이 이미지가 제공하는 정보나 기능을 이해하도록 돕습니다. 하나의 공식이 모든 유형에 맞지는 않습니다.

정보를 전달하는 이미지

콘텐츠를 이해하는 데 필요한 내용을 설명하세요. 예시는 다음과 같습니다.

alt="Chart showing organic clicks rising from 1,200 to 1,850 in three months"

바로 뒤 문단에 모든 수치가 이미 설명되어 있다면 화면 읽기 프로그램 사용자가 반복해서 듣지 않도록 대체 텍스트를 더 짧게 할 수 있습니다.

상품 이미지

상품과 유용한 촬영 각도 또는 변형을 밝히세요.

alt="Side view of blue AirFlow running shoe with white rubber sole"

모든 사진에서 “저렴한 정품 러닝화 구매”를 반복하지 마세요. 앞면, 뒷면, 밑창, 소재 상세 사진은 서로 다른 정보를 제공하므로 다른 설명이 필요합니다.

기능을 수행하는 이미지

이미지가 버튼이나 링크라면 동작이나 목적지를 설명하세요.

<a href="/cart">
  <img src="/icons/cart.svg" alt="Open shopping cart">
</a>

장식용 이미지

화면 읽기 프로그램이 건너뛰도록 alt=""를 사용하세요.

<img src="/decor/divider.png" alt="">

접근성 측면에서 alt 속성이 없는 것과 빈 alt는 완전히 같지 않습니다. 빈 alt는 이미지가 정보를 전달하지 않는다는 명시적인 결정입니다.

글자가 포함된 이미지

가능하다면 중요한 글자는 실제 HTML로 제공하세요. 이미지 안의 글자는 크기 조정, 번역, 접근, 갱신이 어렵습니다. 로고는 흔한 예외입니다. 대체 텍스트는 보통 조직명이나 홈페이지로 연결되는 로고의 기능을 나타냅니다.

최적화처럼 보이지만 해로운 대체 텍스트

흔한 실수는 다음과 같습니다.

• 이미지에 없는 키워드와 지명을 나열함.
• 모든 상품 이미지에 같은 대체 텍스트를 사용함.
• 맥락이 명확한데도 모두 “이미지:”로 시작함.
• 캡션과 본문 대신 200단어의 문단을 작성함.
• 정리하지 않은 파일명을 자동 대체 텍스트로 사용함.
• AI가 물체만 설명하고 글 안에서의 목적은 놓치게 함.

모델은 “화이트보드 옆의 사람”을 인식할 수 있지만 진단 절차를 설명하는지 학회 발표자를 소개하는지 아는 것은 편집자입니다. 유용한 대체 텍스트는 눈에 보이는 정보와 맥락 속 목적을 결합합니다.

파일명과 URL 구조

x200-black-coffee-machine.webp는 DSC00991.webp보다 약간의 단서를 제공하고 관리하기도 쉽습니다. 실무 원칙은 다음과 같습니다.

1. 짧지만 구별할 수 있게 작성합니다.
2. 키워드 목록을 채우지 말고 실제 설명 단어를 사용합니다.
3. 읽기 쉽도록 하이픈을 사용합니다.
4. 형식에 맞는 확장자를 유지합니다.
5. 이미지 내용이 같다면 배포할 때마다 이미지 URL을 바꾸지 않습니다.

이미지가 수천 개라면 상품 코드, 변형, 촬영 각도로 이름을 만드세요. 예를 들어 x200-black-front.webp, x200-black-side.webp입니다. 일관된 규칙은 DAM, CDN, 콘텐츠팀이 파일 중복을 피하는 데 도움이 됩니다.

다국어 웹사이트에서 글자나 시장별 콘텐츠가 포함된 이미지를 사용한다면 파일명을 현지화할 수 있습니다. 언어 콘텐츠가 없는 같은 이미지를 여러 언어에서 사용한다면 안정적인 URL 하나를 유지하는 편이 캐시에 좋습니다. 대체 텍스트와 캡션은 페이지별로 계속 번역합니다.

형식과 압축 수준 선택하기

모든 상황에서 우월한 형식은 없습니다.

• JPEG: 폭넓게 지원되고 사진에 효과적이지만 유용한 알파 투명도는 제공하지 않습니다.
• PNG: 투명도와 선명한 세부에 적합하지만 사진에서는 용량이 큰 경우가 많습니다.
• WebP: 여러 이미지 유형에 효율적이며 최신 브라우저에서 폭넓게 지원됩니다.
• AVIF: 비슷한 시각적 품질에서 더 작은 파일을 만들 수 있지만 인코딩 시간과 대체 형식 절차를 고려해야 합니다.
• SVG: 로고, 아이콘, 벡터 그래픽에 이상적입니다. 사용자 업로드를 받는다면 안전하게 정제하세요.

실제 표시 크기에 가깝게 내보내세요. 600픽셀 영역에 5,000픽셀 원본은 불필요합니다. 다만 선명한 화면을 위한 고밀도 버전도 제공하세요. 브라우저가 원본을 내려받아 축소하게 하지 말고 미디어 파이프라인에서 여러 크기를 생성하세요.

압축 때문에 글자, 상품 윤곽, 중요한 세부가 뭉개져서는 안 됩니다. 절감 비율만 보지 말고 여러 화면에서 눈으로 확인하세요.

반응형 이미지는 용량 절감만을 위한 것이 아닙니다

srcset을 사용하면 브라우저가 뷰포트 크기와 픽셀 밀도에 따라 파일을 선택할 수 있습니다.

<img
  src="/images/audit-dashboard-800.webp"
  srcset="/images/audit-dashboard-480.webp 480w,
          /images/audit-dashboard-800.webp 800w,
          /images/audit-dashboard-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Dashboard listing SEO issues by priority"
  width="1280"
  height="800"
>

sizes가 잘못되면 브라우저가 불필요하게 큰 파일을 선택할 수 있습니다. HTML에 srcset이 있는지만 보지 말고 모바일과 데스크톱의 네트워크 패널에서 실제 내려받은 리소스를 측정하세요.

동일한 콘텐츠 변형에는 동일한 URL을 유지하세요. 버전 쿼리를 계속 바꾸면 캐시 효율이 낮아지고 로그에 이미지 주소가 여러 개 생길 수 있습니다.

너비, 높이와 CLS

width와 height 속성은 이미지가 로드되기 전에 브라우저가 비율을 계산하도록 돕습니다. CSS로 반응형 동작을 유지할 수 있습니다.

img {
  max-width: 100%;
  height: auto;
}

공간을 미리 확보하지 않으면 이미지가 나타날 때 아래 콘텐츠가 밀려 Cumulative Layout Shift가 증가합니다. 잘라내는 컨테이너에는 명확한 aspect-ratio와 적절한 object-fit을 사용하세요.

Core Web Vitals 최적화 가이드는 히어로 이미지가 LCP에 미치는 영향과 불안정한 크기가 CLS에 미치는 영향을 설명합니다.

적절한 위치에 지연 로딩 적용하기

브라우저 기본 지연 로딩은 뷰포트 아래쪽 이미지 로딩을 미룰 수 있습니다.

<img src="/images/step-8.webp" alt="..." loading="lazy">

하지만 첫 화면의 히어로 이미지나 LCP 이미지를 임의로 지연해서는 안 됩니다. 중요한 리소스는 브라우저가 일찍 발견하게 하고 상황에 따라 fetchpriority="high"를 사용할 수 있으며 JavaScript 뒤에 URL을 숨기지 마세요.

원칙은 다음과 같습니다.

• LCP가 될 가능성이 높은 주요 이미지는 즉시 로드합니다.
• 갤러리와 아래쪽 이미지는 지연 로딩합니다.
• 무거운 스크립트 하나로 모든 것을 지연 로딩하지 않습니다.
• 자리 표시자의 비율을 정확히 유지합니다.
• 느린 네트워크와 실제 기기에서 검사합니다.

미디어 파이프라인을 바꾼 뒤 페이지 속도 검사기로 LCP, CLS, 전송된 이미지 바이트를 측정하세요.

캡션과 주변 콘텐츠

모든 이미지에 캡션이 필요한 것은 아닙니다. 출처, 결과, 시점, 인물, 독자가 주목할 점을 설명할 때 유용합니다. 차트 캡션에는 데이터 범위를, 전후 비교 사진에는 비교 조건을 적을 수 있습니다.

이미지는 관련 문단 근처에 배치하세요. “6단계 절차” 인포그래픽이 해당 헤딩에서 세 화면이나 떨어져 있으면 맥락이 약해지고 독자가 따라가기 어렵습니다.

이미지에 중요한 데이터가 있다면 HTML 콘텐츠에서 결론을 요약해야 합니다. 접근성과 SEO 모두 픽셀에만 의존해서는 안 됩니다.

대표 이미지, Open Graph, 구조화된 데이터

검색결과나 공유 화면의 썸네일 이미지는 여러 신호에 따라 자동 선택됩니다. 웹사이트는 다음을 통해 선호 이미지를 지정할 수 있습니다.

• og:image.
• Article, Product 또는 적절한 스키마 유형의 image 속성.
• primaryImageOfPage.
• 콘텐츠에서 눈에 띄는 이미지.

주제에 맞고 해상도가 높으며 비율이 지나치게 극단적이지 않은 이미지를 선택하세요. 모든 글에 공통 로고를 쓰거나 썸네일에서 작은 글자가 사라지는 글자 위주의 이미지를 피하세요. 소셜 미리보기 검사기로 소셜 공유 화면을 점검하세요.

구조화된 데이터의 모든 이미지 URL에 접근할 수 있어야 합니다. CDN이 봇을 차단하거나 쿠키를 요구하거나 만료되는 URL을 사용하면 마크업 문법이 맞아도 시스템이 이미지를 내려받는 데 도움이 되지 않습니다.

이미지 사이트맵은 언제 사용하나요?

일반 HTML에서 이미지를 발견하기 어렵거나 복잡한 애플리케이션이 로드하거나 중요한 이미지 저장소가 있는 사이트에서 이미지 사이트맵이 유용합니다. 완전히 별도 시스템을 만들기보다 기존 페이지 사이트맵에 이미지 태그를 추가할 수 있습니다.

이미지 사이트맵은 다음을 해결하지 못합니다.

• 차단된 이미지.
• 오류를 반환하는 URL.
• 페이지와 무관한 이미지.
• 지나치게 작거나 품질이 낮은 파일.
• noindex가 적용된 이미지 포함 페이지.

이미지가 다른 CDN 도메인에 있다면 Search Console에서 도메인을 확인해 크롤링 문제를 보고받으세요. 프로토콜이 올바른 안정적인 절대 URL을 사용하세요.

CDN, 캐시, 접근 권한

CDN은 지연 시간을 줄이지만 다음 경우 SEO 오류를 만들 수 있습니다.

• 핫링크 보호가 Googlebot이나 빈 리퍼러를 차단함.
• 서명 URL이 몇 분 후 만료됨.
• 크기를 바꿀 때마다 불안정한 URL이 생성됨.
• 헤더가 잘못된 MIME 유형을 반환함.
• 원본에 파일이 생긴 뒤에도 캐시가 404를 반환함.
• CDN의 robots.txt가 이미지 디렉터리를 차단함.

가능하다면 쿠키 없는 요청, 여러 사용자 에이전트, 여러 지역에서 검사하세요. CDN 로그로 봇이 200, 올바른 크기와 콘텐츠 유형을 받는지 확인하세요.

영향을 고려하지 않은 채 JPEG에서 WebP로 옮기기 위해 이미지 라이브러리 전체의 이름을 바꾸지 마세요. 콘텐츠 협상이나 리디렉션·사이트맵 변경을 수반하는 통제된 갱신이 가능하지만 캐시, 이미지 외부 링크, 재크롤링을 고려해야 합니다.

템플릿별 이미지 진단

홈페이지, 블로그 글, 카테고리, 상품, 랜딩 페이지, 다국어 페이지에서 표본을 추출하세요. 각 템플릿에서 다음을 확인합니다.

1. 콘텐츠 이미지가 img src인가요, CSS 배경인가요?
2. 대체 텍스트가 존재하고 목적에 맞으며 서로 다른가요?
3. 파일명이 설명적이고 URL이 안정적인가요?
4. 너비와 높이가 공간을 확보하나요?
5. 어떤 이미지가 LCP이며 지연 로딩되나요?
6. 모바일에서 실제 내려받은 파일의 크기는 얼마인가요?
7. 캡션과 주변 콘텐츠가 충분한 맥락을 제공하나요?
8. 이미지 URL이 200과 올바른 MIME 유형을 반환하나요?
9. 대표 이미지가 OG와 스키마에 있나요?
10. 사이트맵에 전략적 이미지가 나열되어 있나요?

이후 규모별로 우선순위를 정하세요. 상품 20,000개의 카드 컴포넌트에서 대체 텍스트가 빠졌다면 템플릿을 수정해야 합니다. 이름이 좋지 않은 블로그 이미지 열 개는 개별 편집할 수 있습니다.

SEO 검사기는 페이지의 기본 속성을 검토하며 무료 SEO 진단은 공통 컴포넌트를 변경하기 전에 반복 결함을 찾도록 돕습니다.

팀 사이의 이미지 전달 절차

지속 가능한 이미지 SEO에는 명확한 책임 분담이 필요합니다.

• 사진·디자인: 정돈된 원본, 적절한 자르기, 사용 권한을 제공합니다.
• 콘텐츠: 이미지를 선택하고 맥락에 맞는 대체 텍스트와 캡션을 작성합니다.
• 프런트엔드: HTML 이미지, 반응형 소스, 크기, 로딩을 구현합니다.
• 백엔드·DAM: 파일명, 변형 생성, 메타데이터 보관, 안정적인 URL을 담당합니다.
• DevOps·CDN: 캐시, MIME 유형, 크롤링 접근, 오류 모니터링을 관리합니다.
• SEO: 전략적 랜딩 페이지, 사이트맵 규칙, 검사, 측정을 정의합니다.

이미지의 사용 위치를 모르는 사람이 마지막에 대체 텍스트만 추가하면 품질을 일정하게 유지하기 어렵습니다. 같은 이미지도 다른 맥락에서는 다른 설명이 필요하므로 CMS는 사용 위치별로 대체 텍스트를 입력할 수 있어야 합니다.

결과 측정하기

페이지 그룹별로 변경 전후를 추적하세요.

• Search Console의 이미지 검색 유형 클릭과 노출.
• Google 이미지에서 랜딩 페이지로 들어온 방문.
• LCP, CLS, 이미지 총 전송 크기.
• 대체 텍스트가 없거나 오류를 반환하는 이미지 비율.
• 전략적 이미지의 크롤링 범위.
• 이미지 검색으로 시작한 세션의 전환.

오늘 대체 텍스트를 바꿨다고 내일 트래픽이 늘 것으로 기대하지 마세요. 이미지는 다시 크롤링하고 처리해야 합니다. 결과는 검색어의 시각적 수요에도 달려 있습니다. 완벽하게 구현해도 법률 글의 이미지 트래픽은 요리법보다 적을 수 있습니다.

결론

좋은 이미지 SEO는 유용한 이미지를 맥락에 맞는 페이지에 배치하고 크롤링 가능한 HTML로 제공하는 데서 시작합니다. 대체 텍스트는 이미지의 역할을 설명하고 파일명, 캡션, 스키마, 사이트맵은 신호를 보완합니다. 반응형 크기, 압축, 로딩은 빠르고 안정적인 경험을 유지합니다.

대체 텍스트를 키워드 저장소로 만들지 말고 작은 화면에 거대한 원본을 보내지 말며 주요 이미지를 CSS 배경으로만 존재하게 두지 마세요. 콘텐츠팀, 프런트엔드, CDN이 같은 절차를 사용하면 접근성이나 Core Web Vitals를 희생하지 않고도 이미지가 발견될 기회를 얻습니다.

참고 자료: 이미지 SEO에 관한 Google Search Central 문서, web.dev의 반응형 이미지, W3C 대체 텍스트 안내.