이미지에 담긴 정보는 AI가 못 읽나?

크롤러가 사이트에 들어오는 데 성공했다고 칩시다. 그다음 질문은 들어와서 읽을 것이 있는가입니다.

앞 글에서 다룬 AI봇 접근이 문을 여는 문제였다면, 이번 콘텐츠 판독성은 문 안에 실제로 무엇이 있느냐의 문제입니다.

이미지 속 글자는 정말 안 읽히나?

크롤러가 가져가는 것은 HTML 텍스트입니다. 이미지 파일 안에 그려진 글자는 그 텍스트에 포함되지 않습니다.

한국 중소기업 홈페이지에서 유독 자주 보이는 형태가 있습니다.

• 회사 소개 페이지 전체가 디자인된 이미지 한 장
• 제품 사양표가 표가 아니라 캡처 이미지
• 오시는 길과 전화번호가 지도 이미지에 박혀 있음
• 인증서·수상 이력이 스캔 이미지로만 존재

사람 눈에는 정보가 가득한 페이지입니다. 크롤러 입장에서는 글자가 거의 없는 페이지입니다.

alt 속성이 그나마의 통로지만, 한 문단 분량의 회사 소개를 alt에 넣을 수는 없습니다. alt는 이미지가 무엇인지 알리는 용도지 본문을 대신하는 자리가 아닙니다.

JavaScript로 그린 내용은 읽히나?

경우에 따라 다르고, 그래서 위험합니다.

구글은 렌더링을 합니다. 공식 문서에 처리 단계가 명시돼 있습니다.

Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing — JavaScript SEO Basics

다만 그 렌더링이 즉시 일어나지는 않습니다.

Once Google's resources allow, a headless Chromium renders the page and executes the JavaScript — 같은 문서. 큐에서 대기하는 시간은 "a few seconds"일 수도, 그보다 길 수도 있다고 덧붙입니다.

문제는 다른 AI 크롤러입니다. OpenAI·Anthropic·Perplexity는 자사 크롤러가 JavaScript를 실행하는지를 공개 문서에 명시하지 않습니다. 한다고도, 안 한다고도 적혀 있지 않습니다.

확실한 것은 하나뿐입니다.

정적 HTML에 들어 있는 텍스트는 모든 크롤러가 읽는다.

그래서 판단 기준은 단순해집니다. 핵심 정보가 JS 실행 이후에만 나타난다면, 그건 읽힐 수도 있고 안 읽힐 수도 있는 상태입니다. 브랜드 소개나 제품 사양처럼 반드시 전달돼야 하는 내용을 그런 상태로 두는 건 도박에 가깝습니다.

우리 사이트는 어떤 상태인가요?

무료 진단의 콘텐츠 판독성 지표가 네 가지를 봅니다.

세 번째가 이 글의 핵심입니다. 우리는 정적 HTML만 받았을 때의 본문 길이와 브라우저가 다 그린 뒤의 본문 길이를 비교합니다. 정적 쪽이 지나치게 짧으면 JS 렌더 의존으로 판정합니다.

네 번째도 의외로 자주 걸립니다. 전화번호를 이미지로 넣은 사이트가 많은데, 스팸 수집을 피하려는 의도인 경우가 대부분입니다. 의도는 이해되지만 대가가 큽니다 — AI가 "이 회사 연락처"를 답할 수 없게 됩니다.

어떻게 확인하나?

브라우저가 아니라 크롤러가 보는 것을 봐야 합니다. 브라우저는 JS를 실행하므로 눈으로 확인하면 항상 멀쩡해 보입니다.

# 정적 HTML만 받아서 태그를 걷어낸 뒤 글자 수를 셉니다
curl -s https://example.co.kr \
  | sed -e 's/<script[^>]*>.*<\/script>//g' -e 's/<[^>]*>/ /g' \
  | tr -s ' \n' ' ' | wc -c

이 숫자가 몇백 자 수준이라면, 화면에 아무리 많은 내용이 보여도 크롤러가 받는 건 그만큼입니다.

# 전화번호가 텍스트로 존재하는지
curl -s https://example.co.kr | grep -oE '0[0-9]{1,2}-[0-9]{3,4}-[0-9]{4}'

# 이미지 alt가 비어 있지 않은지 (빈 alt 개수)
curl -s https://example.co.kr | grep -o 'alt=""' | wc -l

어떻게 고치나?

전면 리뉴얼이 필요한 일은 대부분 아닙니다. 정보를 텍스트로 옮기는 작업입니다.

1. 회사 소개·제품 설명을 실제 텍스트로. 디자인 이미지는 그대로 두고, 그 아래나 옆에 같은 내용을 텍스트로 둡니다. 1,500자 이상이면 충분히 재료가 됩니다.
2. 연락처는 반드시 텍스트로. 스팸이 걱정되면 이미지 대신 tel: 링크나 폼을 함께 두는 쪽이 낫습니다.
3. 사양·가격은 표로. 캡처 이미지 대신 <table>로 만들면 발췌도 쉬워집니다.
4. 핵심 콘텐츠는 서버 렌더로. 전체를 바꿀 필요는 없고, 회사·제품 소개처럼 반드시 읽혀야 하는 부분부터 정적 HTML에 포함시킵니다.
5. alt는 채우되 본문 대용으로 쓰지 않습니다.

자주 틀리는 것

마지막으로 하나. 이 지표는 콘텐츠의 품질을 보지 않습니다. 글이 좋은지 나쁜지는 판정하지 않고, 오직 읽을 수 있는 형태로 존재하는가만 봅니다. 좋은 내용을 이미 갖고 있는데 형식 때문에 전달되지 않는 회사가 생각보다 많습니다.

출처

• Google — JavaScript SEO Basics (최종 확인 2026-09-11)

⚠️ OpenAI·Anthropic·Perplexity는 자사 크롤러의 JavaScript 실행 여부를 공개 문서에 명시하지 않습니다. 이 글은 "명시가 없다"는 사실에 근거해 정적 HTML을 권장하는 것이지, 실행하지 않는다고 단정하지 않습니다.

---

다음 단계 — 읽을 텍스트가 생겼다면, 그다음은 그 내용이 무엇에 대한 것인지 기계가 아는가입니다.

• AI가 읽을 수 있는 회사 소개는 어떻게 다른가? — 더 깊이: 무엇을 어떤 순서로 쓰나
• AI 가독성이란 무엇인가 — 8개 지표 전체 보기
• AI봇이 우리 사이트에 들어올 수 있나? — 앞 글
• 무료 진단 받기 — 우리 사이트의 콘텐츠 판독성 확인