OG 이미지에 alt를 자동 생성한다는 발상 — alt와 이미지 텍스트 코드 리뷰

A11y 코드 리뷰 #008 · 오늘 도감에 등록할 태그 — <img>의 alt 속성 (그리고 <figure>/<figcaption>/<picture>)

이번 카드는 없으면 안 되는데 가장 자주 빠지는 한 속성에 관한 글입니다. alt 속성 한 줄이 검색엔진 이미지 인덱싱, AI Overviews의 이미지 인용, 스크린리더의 시각 정보 전달 모두를 결정합니다.

TL;DR

alt 속성은 옵션이 아닙니다 — 모든 <img>에 반드시 있어야 합니다. 장식 이미지는 alt=""로 명시적으로 빈 alt.
alt 누락 ≠ alt="". 둘은 의미가 다릅니다. 누락된 alt는 스크린리더가 파일명을 읽고, 빈 alt는 조용히 건너뜁니다.
AI Overviews와 Google Images 양쪽 모두 alt 텍스트를 이미지 이해의 1순위 신호로 봅니다. 자동 OG 이미지를 만든다면 alt 자동 생성 파이프라인까지 같이 만들어야 합니다.
<figure> + <figcaption>은 alt와 다릅니다 — caption은 시각 사용자도 보는 텍스트이고, alt는 시각 사용자가 못 보는 텍스트입니다. 둘은 보완 관계.
한국 사이트의 이미지 SEO 손실 1위는 — alt에 파일명이 박혀 있거나, alt가 비어 있거나, alt가 누락된 케이스입니다.

1. 어디서나 본 그 이미지

다음 네 패턴은 한국 사이트에서 매일 보는 이미지 안티패턴입니다.

alt 누락

<img src="/products/sku-12345.jpg" />

alt에 파일명

<img src="/banners/main-hero.jpg" alt="main-hero" />

alt에 "이미지"

<img src="/articles/seo-trends.png" alt="이미지" />

자동 생성 OG 이미지에 alt 누락

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  return {
    openGraph: {
      images: [
        {
          url: `/api/og?slug=${params.slug}`,
          // alt 속성 누락 — Next.js에서 자주 빠짐
        },
      ],
    },
  };
}

네 패턴 모두 시각 사용자에게는 이미지가 평소처럼 보입니다. 차이는 — 스크린리더 사용자가 이미지의 의미를 모르고, Google Images가 인덱싱을 못 하고, AI Overviews가 이미지 인용을 못 합니다.

2. 한 가지 질문

이 이미지가 없으면 페이지의 의미가 손실되는가요? 손실되면 alt가 필요합니다. 손실되지 않으면 alt=""로 조용히 숨깁니다.

이 질문 하나가 모든 alt 결정의 기준입니다.

3. alt — 점진적 해부

3.1 정보를 담은 이미지

<img src="/charts/q2-revenue.png" alt="2026년 Q2 매출 14.8억 원, 전년 대비 18% 증가" />

차트, 인포그래픽, 텍스트가 박힌 이미지는 그 이미지가 전달하는 정보를 alt에 담습니다. "매출 차트" 같은 메타 설명이 아니라 — 그 차트의 핵심 데이터를 한 줄로.

3.2 장식 이미지

<img src="/decorations/section-divider.svg" alt="" />

순전히 장식용 이미지(섹션 구분선, 배경 패턴 등)는 alt=""로 명시적으로 빈 alt. 스크린리더가 이 이미지를 조용히 건너뜁니다. alt 자체를 누락하면 안 됩니다 — 누락 시 스크린리더가 파일명을 읽거나 "이미지"라고 발화합니다.

3.3 링크 안의 이미지

<!-- 텍스트가 함께 있을 때 -->
<a href="/products/12345">
  <img src="/products/12345.jpg" alt="" />
  iPhone 17 Pro
</a>

<!-- 이미지만 있을 때 -->
<a href="/products/12345">
  <img src="/products/12345.jpg" alt="iPhone 17 Pro 상품 보기" />
</a>

링크가 텍스트와 이미지를 함께 가질 때 — 텍스트가 링크의 의미를 담고 있으면 이미지의 alt는 빈 alt. 이미지만 있을 때는 alt가 링크의 목적지를 설명.

3.4 figure와 figcaption

<figure>
  <img src="/charts/q2-revenue.png" alt="2026년 Q2 매출 14.8억 원" />
  <figcaption>그림 1. 분기별 매출 추이 — 가파른 성장세가 Q2에 뚜렷합니다.</figcaption>
</figure>

<figcaption>은 모든 사용자가 보는 캡션입니다. alt와 figcaption은 상호 보완입니다 — figcaption이 이미지의 컨텍스트를 설명한다면 alt는 이미지 자체의 시각 정보를 설명. 다만 둘이 중복되는 경우가 많으면 — alt를 비우고 figcaption만 둬도 됩니다 (브라우저가 figcaption을 이미지의 accessible name으로 자동 사용).

3.5 picture와 srcset — alt는 한 번

<picture>
  <source srcset="/heroes/main.avif" type="image/avif" />
  <source srcset="/heroes/main.webp" type="image/webp" />
  <img src="/heroes/main.jpg" alt="고객 만족도 1위 컨설팅 서비스를 받는 비즈니스 팀" />
</picture>

picture/srcset에서 alt는 내부 img에 한 번만 둡니다. source 요소에는 alt를 두지 않습니다.

3.6 SVG의 a11y

<!-- inline SVG에 라벨 주기 -->
<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">월별 사용자 증가 그래프</title>
  ...
</svg>

<!-- 장식용 inline SVG -->
<svg aria-hidden="true">...</svg>

<!-- img 태그로 SVG 로드 -->
<img src="/icons/checkmark.svg" alt="" />

inline SVG는 그 자체로 SVG 노드인 만큼 — img처럼 alt를 박을 수 없습니다. role="img" + <title>로 라벨, 또는 aria-hidden="true"로 숨김.

4. 왜 문제인가 — 3중 영향

4a. 스크린리더 사용자

<img src="hero.jpg" />                  → NVDA: "그래픽, hero" (파일명 발화)
<img src="hero.jpg" alt="" />           → NVDA: 조용히 건너뜀
<img src="hero.jpg" alt="회의실의 다섯 명이 모니터를 보며 토론" />
                                        → NVDA: "회의실의 다섯 명이 모니터를 보며 토론, 그래픽"

alt 누락은 최악의 결과입니다 — 파일명이 읽힙니다. 스크린리더 사용자에게 "hero", "banner-main", "img-2024-08-15"가 의미 없는 텍스트로 들립니다.

WebAIM Million Report에서 alt 누락은 label 누락 다음으로 자주 등장하는 a11y 결함입니다. 매년 상위 5개 안에 듭니다.

4b. 키보드 사용자

키보드 사용자에게 직접적인 alt의 이득은 적습니다. 다만 — 이미지 로딩 실패 시 alt 텍스트가 시각적으로 노출됩니다. 네트워크가 불안정한 환경(지하철·모바일)에서 이미지가 안 뜨면 alt 텍스트가 시각 사용자에게도 가치를 갖습니다.

4c. AI 에이전트와 검색엔진

여기가 이 시리즈의 핵심 단입니다.

Google Images의 이미지 인덱싱 — 구글이 이미지를 인덱싱할 때 가장 강한 신호가 alt 텍스트입니다. 그 다음이 주변 텍스트, 파일명, EXIF 메타. alt에 정확한 설명이 있는 이미지가 이미지 검색 결과 상위에 노출됩니다.

AI Overviews의 이미지 인용 — AI Overviews 답변에 이미지가 함께 표시되는 케이스가 늘고 있습니다. 그 이미지의 원본은 alt 텍스트가 좋은 페이지에서 끌어옵니다. alt가 없으면 — 같은 이미지라도 인용 후보에서 빠집니다.

AI 에이전트의 이미지 이해 — 에이전트가 페이지를 작업할 때, 이미지 위에서 액션을 해야 하는 경우(예: "제품 사진을 클릭해서 상세 페이지로 이동")가 있습니다. alt가 있으면 에이전트는 어떤 이미지가 어떤 제품인지를 한 번에 판단합니다. alt가 없으면 — 스크린샷을 OCR로 분석하거나 비전 모델로 추측합니다. 정확도가 떨어집니다.

SEO 측면 — 이미지 키워드 가중치 — 페이지의 키워드 적합도 평가에서 alt 텍스트의 키워드가 본문 텍스트와 비슷한 가중치로 계산됩니다. 적절한 키워드를 자연스럽게 alt에 담으면 SEO 신호로 직접 작용합니다.

5. SEO/GEO/AEO 영향

5.1 SEO — alt는 이미지 검색의 가장 강한 신호

Google Images의 ranking factor 중 1순위가 alt 텍스트입니다. 같은 이미지라도 alt 좋은 페이지가 상위 노출. 이미지 검색을 통한 트래픽이 일반 검색의 10~20% 규모인 사이트라면 — alt 최적화는 직접적인 트래픽 영향.

5.2 GEO — AI Overviews 이미지 카드

AI Overviews 답변이 이미지와 함께 표시되는 케이스가 점점 늘고 있습니다. "2026년 SEO 트렌드" 답변 옆에 차트 이미지가 함께 뜨고, 그 이미지의 출처가 alt 좋은 페이지입니다. alt가 그 이미지의 정보를 정확히 설명할수록 인용 가능성이 높습니다.

5.3 AEO — Featured Snippet의 이미지

Featured Snippet도 이미지를 함께 노출합니다. "방법을 단계별로 보여달라" 같은 질문에 각 단계의 이미지가 답변에 포함됩니다. alt가 그 단계의 행동을 정확히 설명하면 인용됩니다.

6. React에서 — Next.js와 OG 이미지 자동 파이프라인

6.1 Next.js Image 컴포넌트

import Image from "next/image";

<Image
  src="/heroes/main.jpg"
  alt="고객 만족도 1위 컨설팅 서비스를 받는 비즈니스 팀"
  width={1200}
  height={630}
  priority
/>

Next.js Image 컴포넌트는 alt를 필수 prop으로 강제합니다. TypeScript 환경에서 alt를 빼면 컴파일 에러입니다.

다만 — alt에 빈 문자열을 박는 건 가능합니다. 장식 이미지에 alt=""를 명시적으로 박아야 합니다.

<Image src="/decorations/divider.svg" alt="" width={400} height={4} />

6.2 OG 이미지 자동 생성 파이프라인 — 자체 site 사례

본 시리즈가 발행되는 soyoyu.cc/blog는 OG 이미지를 자동 생성합니다. 각 글의 제목·날짜·카테고리가 자동으로 OG 이미지에 박힙니다.

// app/api/og/route.tsx
import { ImageResponse } from "next/og";

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get("title");
  const category = searchParams.get("category");

  return new ImageResponse(
    <div style={{ /* 디자인 */ }}>
      <div>{category}</div>
      <h1>{title}</h1>
      <div>soyoyu.cc</div>
    </div>,
    { width: 1200, height: 630 }
  );
}

OG 이미지가 자동 생성되니 — alt도 자동 생성해야 합니다.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    openGraph: {
      images: [
        {
          url: `/api/og?title=${encodeURIComponent(post.title)}&category=${post.category}`,
          width: 1200,
          height: 630,
          alt: `${post.title} — ${post.category} 카테고리, 소요유 블로그`,
        },
      ],
    },
  };
}

이 한 줄(alt: ...)이 있어야 — 소셜 미디어 공유 시 OG 이미지가 alt 정보를 함께 가져갑니다. Twitter Card, LinkedIn 공유 카드, Slack 미리보기 모두가 alt를 활용합니다.

6.3 사용자 업로드 이미지의 alt 보강

블로그·커머스 사이트에서 사용자(또는 에디터)가 이미지를 업로드할 때 — alt 입력 필드가 반드시 있어야 합니다. 가능하면 비우면 발행 안 됨 검증까지.

function ImageUploadField({ onUpload }) {
  return (
    <div>
      <input type="file" onChange={handleFile} />
      <label htmlFor="alt">대체 텍스트 (스크린리더와 검색엔진이 읽음)</label>
      <input id="alt" name="alt" required />
      <p className="hint">
        이미지가 *없을 때* 어떤 정보가 손실되는지 한 줄로 적어주세요.
        장식용이면 비워두고 "장식용" 체크박스를 누르세요.
      </p>
    </div>
  );
}

에디터가 alt를 한 번에 입력하지 않으면 — 발행 후 누락된 채 운영됩니다. 입력 시점에 강제하는 게 가장 효과적입니다.

7. 한국 맥락 — 가볍게

KWCAG 관련 항목:

1.1.1 대체 텍스트 제공: 모든 이미지에 대체 텍스트가 제공돼야 합니다 — 정보 이미지든 장식 이미지든. 장식은 빈 alt로.

한국 사이트의 alt 손실 1위 — 상품 상세 페이지의 상세 이미지. 긴 세로 이미지 한 장에 상품 설명을 다 박아놓은 패턴. 이미지가 곧 텍스트인데 alt가 "상품 상세 이미지" 같이 무의미합니다. 이미지 안의 텍스트를 alt로 옮기면 — 그게 곧 SEO 본문 가중치가 됩니다.

8. "alt는 이미 충분히 챙기고 있어요"

자주 듣는 반론들:

"파일명을 의미 있게 지으면 alt 대신 되지 않나요?" — 파일명도 SEO 신호이지만 alt를 대체하지 못합니다. 둘 다 챙기는 게 정답.

"AI가 자동으로 alt를 생성하면 안 되나요?" — Vision LLM 기반 alt 자동 생성은 가능합니다. 다만 — 이미지의 컨텍스트를 모르는 AI가 생성한 alt는 "두 사람이 컴퓨터 앞에서 웃고 있다" 같은 일반적 설명이 됩니다. "고객 만족도 발표를 듣고 환호하는 팀" 같은 글의 컨텍스트가 담긴 alt는 사람이 써야 좋습니다. 자동 생성은 fallback으로만.

"alt가 너무 길면 안 되지 않나요?" — 정해진 길이 제한은 없습니다. 다만 — 너무 길면 스크린리더가 한 번에 듣기 힘듭니다. 일반적 권고는 125자 이내. 더 길어야 한다면 — figcaption 또는 본문으로 옮기는 게 좋습니다.

"링크 안 이미지의 alt를 비워도 되나요?" — 그 링크에 텍스트가 함께 있으면 OK입니다. 이미지만 있는 링크는 alt에 링크의 목적지를 명시해야 합니다.

"같은 이미지가 한 페이지에 여러 번 나오면?" — 첫 등장 때 정확한 alt, 이후 등장은 빈 alt로 두는 패턴이 일반적입니다 (반복 정보로 들리지 않게).

9. 체크리스트

모든 <img>에 alt 속성이 있는가 (TypeScript 강제 검증 가능)
장식 이미지에 alt=""로 명시적인 빈 alt가 있는가
정보 이미지의 alt가 이미지가 없을 때 손실되는 정보를 한 줄로 설명하는가
alt에 파일명·"이미지"·"사진" 같은 무의미한 텍스트가 없는가
링크 안 이미지의 alt가 (텍스트 동반 시) 비어 있고, (이미지만 있을 때) 링크 목적지를 설명하는가
OG 이미지 자동 생성 시 alt도 자동 생성되는가
사용자 업로드 이미지의 alt 입력이 강제돼 있는가
차트·인포그래픽이 시각 정보의 핵심을 alt에 담고 있는가

마무리

이 글이 16편 시리즈의 여덟 번째 도감 카드입니다. 다음 카드는 form 에러 메시지와 aria-describedby — Toast로만 띄운 에러가 누구에게 안 들리는지에 관한 글입니다.

alt의 단 한 줄 규칙 — 이미지가 사라져도 페이지의 의미가 유지되어야 합니다. alt가 그 의미의 다른 이름입니다.

이미지 SEO·OG 이미지 파이프라인·AEO 최적화 컨설팅이 필요하시면 문의하기로 연락 주세요.

codex:
  primary_tag: img
  secondary_tags: [alt, figure, figcaption, picture, source]
  aria_roles: [img]
  aria_attributes: [aria-label, aria-labelledby, aria-hidden]
  related_patterns: [decorative-image, informational-image, link-image, og-image, svg-accessibility]
  kwcag: ["1.1.1"]
  wcag: ["1.1.1"]
  ai_agent_impact: medium
  seo_geo_impact: high
  difficulty: beginner
  test_envs:
    - "NVDA 2024.x + Chrome 125"
    - "VoiceOver macOS 14 + Safari 17"
  references:
    - "WHATWG HTML Living Standard, Images and alternative text"
    - "WebAIM, Alternative Text Guidelines"
    - "Next.js Docs, Image component"
    - "Google Search Central, Image SEO best practices"