메뉴판을 사진으로만 올리면 AI가 읽을까 — 이미지 속 글자, 대체 텍스트(alt), 본문 표

메뉴판 사진 한 장으로 끝내면 생기는 일

동네 가게 홈페이지나 블로그에서 흔히 보는 장면이 있습니다. 메뉴판을 휴대폰으로 찍어 한 장 올리고, 영업시간은 디자인한 포스터로, 이번 달 이벤트는 배너 이미지로 올리는 것입니다. 사람 눈에는 다 보이니 충분해 보입니다.

그런데 검색엔진과 AI 답변에게 가장 확실한 재료는 페이지의 HTML 글자입니다. 이미지도 분석하지만, 사진 속 ‘모듬구이 40,000원’은 글자가 아니라 점(픽셀)으로 그린 그림이라 한 단계를 더 거쳐야 읽히고, 그 단계에서 틀릴 수 있습니다. 손님이 “상무지구 곱창집 2인분 얼마야?”라고 물었을 때, 그 숫자가 본문 글자로 있는 가게와 사진 속에만 있는 가게는 출발선이 다릅니다.

이 글은 그 차이 하나만 다룹니다. 네이버 플레이스·구글 비즈니스 프로필·홈페이지의 정보를 같은 값으로 맞추는 일은 동네 가게의 AI 상위노출에, 자바스크립트가 나중에 그리는 글자를 크롤러가 받는지는 자바스크립트로 그리는 페이지를 AI 크롤러가 읽는가에 따로 정리했습니다.

공식 문서가 말하는 것

구글 — “중요한 내용은 텍스트로”

구글 검색 센터의 ‘AI 기능과 웹사이트’ 문서(최종 업데이트 2025-12-10)는 AI 개요·AI 모드에 특별한 최적화는 필요 없지만 기존 SEO 기본은 계속 유효하다며 예를 목록으로 들었습니다. 그중 두 줄이 이 글의 주제입니다.

“Making sure that important content is available in textual form”

“Supporting your textual content with high-quality images and videos, when applicable”

중요한 내용은 텍스트로 두고, 이미지와 동영상은 그 텍스트를 받쳐 주는 용도로 쓰라는 순서입니다. 생성형 AI 최적화 가이드(최종 업데이트 2026-07-10)도 같은 방향으로 “look for ways to support your textual content with high-quality, relevant images and videos on your pages”라고 적었고, 2025년 5월 21일 구글 검색 센터 블로그 글도 멀티모달 검색에 대비하려면 “support your textual content with high-quality images and videos on your pages”하라고 했습니다. 세 문서 모두 이미지를 텍스트의 대신이 아니라 보조로 놓는 표현입니다. 같은 ‘AI 기능’ 문서는 요건과 권장 사항을 다 지켜도 “doesn’t mean that Google will crawl, index, or serve its content”, 즉 크롤·색인·노출이 보장되지 않는다고도 적었습니다.

색인 단계에 대한 설명도 같은 이야기입니다. 구글 검색 작동 방식 문서(최종 업데이트 2025-12-18)는 색인을 이렇게 설명합니다.

“This stage is called indexing and it includes processing and analyzing the textual content and key content tags and attributes, such as

페이지의 텍스트 내용과 <title>·alt 같은 주요 태그·속성, 이미지·동영상을 처리한다는 뜻입니다. 이미지도 분석 대상이지만, 텍스트와 alt가 별도 재료로 따로 적혀 있습니다.

마이크로소프트 — “이미지에만 두면 정확도가 떨어진다”

이미지 속 글자를 AI가 읽을 수 있느냐는 질문에 가장 직접 답한 공식 글은 마이크로소프트 광고 블로그의 2025년 10월 8일 글 ‘AI 검색 답변에 포함되도록 콘텐츠 최적화하기’입니다. ‘AI 검색 노출을 해치는 흔한 실수(Common Mistakes That Hurt AI Search Visibility)’ 항목에 이렇게 적었습니다.

“Avoid putting key information only in images: While AI systems can sometimes extract or interpret text from images, it adds extra complexity and often reduces accuracy. Always provide alt text or present critical details in HTML to ensure they’re reliably understood.”

AI가 이미지에서 글자를 읽어 낼 수는 있지만 일이 복잡해지고 정확도가 떨어지는 경우가 많으니, 핵심 정보는 이미지에만 두지 말고 alt를 달거나 HTML로 두라는 권고입니다. 같은 목록에는 PDF에 대한 항목도 있습니다. 검색엔진이 텍스트 PDF를 색인할 수는 있지만 HTML이 주는 제목·메타데이터 같은 구조 신호가 부족한 경우가 많으니, 중요한 내용은 HTML로 쓰라고 했습니다. 가격표를 PDF로만 올려 둔 가게라면 같은 이야기입니다.

얀덱스 — 이미지 속 글자를 읽지 못한다고 적은 도움말

모든 검색엔진이 같은 수준으로 이미지를 다루지도 않습니다. 러시아 검색엔진 얀덱스의 웹마스터 도움말은 이렇게 적었습니다.

“The Yandex robot can’t yet recognize text in images, and the text of the ALT attribute doesn’t get into the main index.”

“So you shouldn’t use images to replace text.”

얀덱스 로봇은 이미지 속 글자를 아직 인식하지 못하고, alt 글자도 본 색인에 들어가지 않으니 이미지로 텍스트를 대신하지 말라는 것입니다. 이 도움말에는 날짜가 없고 Flash 사이트 이야기가 함께 나오는 오래된 문서라, 지금도 그대로인지는 확인할 수 없습니다. 한국 가게가 얀덱스를 신경 쓸 일도 드뭅니다. 다만 어떤 크롤러가 이미지를 얼마나 읽는지는 엔진마다 다르고 가게가 고를 수 없다는 점은 보여 줍니다. 텍스트로 쓰면 이 차이를 덜 신경 써도 됩니다.

네이버 서치어드바이저에서는 이미지 속 글자나 alt에 대한 전용 안내를 이 글을 쓰며 찾지 못해 넣지 않았습니다.

대체 텍스트(alt)는 무엇이고, 무엇이 아닌가

이미지에 글자를 달 수 있는 공식 자리가 alt 속성(대체 텍스트)입니다. 그래서 “alt에 메뉴판 내용을 다 적으면 되지 않나”라는 질문이 자주 나옵니다.

구글의 이미지 SEO 문서(최종 업데이트 2026-03-02)는 alt를 이렇게 정의합니다.

“The most important attribute when it comes to providing more metadata for an image is the alt text (text that describes an image)”

alt는 이미지를 설명하는 글입니다. 같은 문서는 구글이 “alt text along with computer vision algorithms and the contents of the page”, 즉 alt와 컴퓨터 비전, 페이지 내용을 함께 써서 이미지의 주제를 이해한다고 적었고, alt에 키워드를 채워 넣으면 사용자 경험을 해치고 스팸으로 보일 수 있다고 경고했습니다. 예시로는 alt가 없는 것과 키워드를 나열한 것을 ‘나쁨’, “Dalmatian puppy playing fetch”처럼 장면을 짧게 묘사한 것을 ‘가장 좋음’으로 들었습니다. SEO 기본 가이드(최종 업데이트 2025-12-10)도 alt를 “a short, but descriptive piece of text”, 짧지만 설명적인 글로 소개합니다.

웹 접근성 표준을 만드는 W3C의 안내는 더 구체적입니다. alt 결정 트리(Decision Tree)는 글자가 들어간 이미지와 정보가 많은 이미지를 이렇게 나눕니다.

메뉴판은 글자가 든 이미지이니, 결정 트리만 기계적으로 따르면 ‘글자가 다른 곳에 없으면 alt에 넣는다’ 칸에 먼저 닿습니다. 하지만 메뉴 스무 줄은 alt 한 칸에 담기에 너무 길어 마지막 줄의 ‘정보가 많은 이미지’에 더 가깝고, 아래 WCAG 기준도 텍스트를 쓰라고 합니다. 메뉴와 가격을 본문에 두고 나면, 메뉴판 사진은 ‘같은 글자가 옆에 있는’ 첫 줄에 해당해 빈 alt나 짧은 설명이면 됩니다.

W3C의 접근성 기준(WCAG 2.1 성공 기준 1.4.5 ‘텍스트 이미지’)은 사용하는 기술로 같은 모양을 낼 수 있다면 정보를 전달할 때 텍스트 이미지 대신 텍스트를 쓰라고 정합니다. 예외는 사용자가 모양을 바꿀 수 있는 경우와, 특정 모양이 꼭 필요한 경우이며, 로고처럼 브랜드 이름이 들어간 글자는 꼭 필요한 경우로 봅니다. 간판 로고는 이미지여도 되지만, 메뉴 가격은 텍스트가 맞다는 뜻입니다. 이 기준은 원래 글자 크기나 색을 바꿔 봐야 하는 사람을 위한 것이지만, 지키고 나면 검색엔진도 그 글자를 본문 텍스트로 받게 됩니다.

정리하면 alt의 역할은 이렇습니다.

• 하는 일: 이 사진이 무엇을 보여 주는지 한두 문장으로 설명한다. 화면 낭독기 사용자와 검색엔진이 사진의 주제를 알게 된다.
• 하지 않는 일: 메뉴판·가격표·시간표 같은 긴 정보를 대신 담는 것. 그 정보는 본문 텍스트(표)가 맡는다.

가게가 흔히 하는 실수

메뉴·가격에 기준일을 붙이고 갱신일을 관리하는 일은 AI 답변의 최신성에 정리했습니다. 이미지 속 숫자는 본문 숫자보다 고치기 번거로워서, 옛 값이 남는 일이 더 잘 생깁니다.

이 사이트는 캡처를 어떻게 싣나

이 사이트도 이미지에 글자가 가득한 자료를 싣습니다. ChatGPT 답변 화면 캡처입니다. 캡처는 증거라서 자르기만 하고 고치거나 다시 그리지 않습니다. 그래서 사례 페이지에 캡처를 실을 때는 이미지 하나에 글자 세 겹을 붙입니다. 칸세이스시 상무본점 사례를 예로 들면 이렇습니다.

노블365의원, 1965원조제일돌곱창 상무점, 트이다학원 남악점 사례도 같은 세 겹입니다(캡션에 ‘운영자 캡처’가 붙은 사례도 있고 날짜·엔진만 적은 사례도 있습니다). 노블365의원의 alt는 “ChatGPT에 ‘흥덕 일요일병원 알려줘’를 물은 답변 — 노블365의원이 첫 항목으로 나오고 출처로 노블365의원 진료시간 페이지가 인용됨”처럼 질문·결과·출처만 담고, 답변에 나온 진료시간(일요일 09:00~16:00)은 본문 ‘결과’ 항목에 글자로 적었습니다. 캡처를 눌러 크게 보는 창에도 같은 alt와 캡션이 붙고, 창 아래에는 “실제 화면 캡처입니다. 화면 속 글자는 고치지 않았습니다.”라는 문장이 있습니다.

캡처 대신 답변을 표로 옮긴 글도 있습니다. ChatGPT가 ‘AI 상위노출 전문가’로 세 사람을 소개한 답변은 캡처 이미지를 싣지 않고, 답변의 소개 줄·근거·추천 대상·출처를 사람마다 한 줄씩 표로 옮겼습니다(실명은 옮기지 않았습니다).

반대로 alt를 일부러 비운 곳도 있습니다. 사이트 맨 위 메뉴 막대의 로고 그림은 alt=""입니다. 이 로고는 글자가 없는 마크이고, 홈으로 가는 링크 안에서 바로 옆 ‘유환호’ 글자와 링크에 붙인 이름(‘유환호 홈’)이 뜻을 전하므로, 그림에 따로 설명을 달 필요가 없는 꾸밈 이미지로 처리했습니다.

이 방식에도 한계가 있습니다. 캡처 속 답변 전문을 모두 옮기지는 않았습니다. 본문에 옮기지 않은 문장은 캡처에만 있으므로, 검색엔진이나 AI가 그 문장을 쓸 수 있다고 기대하지 않습니다. 그래서 이 사이트는 주장에 쓰는 숫자와 문장을 본문 글자로 한 번 더 적는 것을 원칙으로 삼습니다. 가게의 메뉴판에도 똑같이 적용됩니다.

가게 홈페이지 3곳의 HTML 확인 (2026-10-19)

2026년 10월 19일, 가게 홈페이지 세 곳의 첫 화면을 curl로 받아 HTML 원문에 메뉴·가격·시간이 글자로 있는지, 이미지에만 있는지 확인했습니다. 브라우저에서 스크립트가 돌기 전의 원문을 본 것이고, 이미지 몇 장은 내려받아 눈으로 확인했습니다. 세 곳 모두 유환호가 만든 홈페이지이고, 첫 화면 한 장만 본 기록입니다. 같은 날 같은 사이트의 이름·주소·구조화 데이터 유무는 자바스크립트 글의 표에 있어, 여기서는 이미지와 글자만 봅니다.

세 곳 모두 메뉴·가격·시간 같은 핵심 정보는 이미지가 아니라 본문 글자에 있었습니다. 눈여겨볼 장면은 둘입니다.

첫째, 노블365의원의 안내 카드처럼 이미지에 글자를 넣는 것 자체는 문제가 아닙니다. 같은 문구가 본문 글자로 함께 있으면 이미지에만 있는 정보가 없습니다. 남는 비용은 관리입니다. 사진 위에 ‘20:00까지’라고 박아 두면, 진료시간이 바뀌는 날 본문과 함께 이미지도 다시 만들어야 합니다. 덧붙이면, 이 카드는 같은 링크 안에 같은 문구가 글자로 있어 W3C 결정 트리의 ‘같은 글자가 옆에 있으면 빈 alt’에 해당합니다. 지금처럼 alt에도 같은 문구를 넣으면 화면 낭독기에서는 링크 이름이 두 번 이어 읽힐 수 있습니다.

둘째, 트이다학원의 숫자 칸은 이미지 문제는 아니지만 같은 질문을 던집니다. HTML 원문에 그 글자가 있는가. 화면에서는 숫자가 올라가는 효과로 ‘5.0’이 보이지만, 스크립트가 돌기 전 원문의 글자는 ‘0.0’이고 실제 값은 태그 속성에만 있습니다. 스크립트를 돌리지 않는 크롤러가 무엇을 받는지는 자바스크립트 글에 정리했습니다. 이 칸의 값 가운데 평점 5.0, 3개월, 주 5회, 단골 21명, 153m는 같은 페이지의 다른 문장에도 글자로 있어 정보가 사라지지는 않습니다.

체크리스트 — 가게가 오늘 할 일

메뉴·가격·시간을 글자로

• 메뉴판 사진에 있는 메뉴·용량·가격을 홈페이지 본문 표로 옮긴다
• 표 위나 아래에 ‘2026년 10월 기준’처럼 확인한 날을 적는다
• 요일별 영업시간·브레이크타임·정기 휴무를 글자로 적는다(요일마다 한 줄)
• 가격표·수강료·비급여 항목이 PDF로만 있다면 핵심 항목을 HTML 표로 옮기고, PDF는 내려받기용으로 남긴다
• 이벤트·임시 휴무는 공지 글로 기간·대상·내용을 적은 뒤 포스터를 붙인다

본문 표는 이 정도면 충분합니다.

2026년 9월 기준 · 제일돌곱창 상무점 홈페이지 차림표를 예로 옮긴 것

alt는 짧게, 보이는 것만

그 밖에

• 파일 이름을 IMG_1234.jpg 대신 menu-board-2026-09.jpg, jeongol-1inbun.jpg처럼 짧고 설명적으로 바꾼다
• 사진은 관련된 글 바로 옆에 둔다(구글 SEO 기본 가이드: “place them near text that’s relevant to the image”)
• 이미지에 숫자(가격·시간)를 넣었다면, 그 숫자가 바뀔 때 고칠 목록에 이미지도 적어 둔다
• PC 크롬에서 ‘페이지 소스 보기’(Ctrl+U)를 열고 메뉴 이름·가격·영업시간 숫자를 Ctrl+F로 찾아본다. 화면에는 보이는데 찾아지지 않으면 그 글자는 이미지 속에 있거나 스크립트가 나중에 그린 것이다(자세한 방법은 자바스크립트 글에). 휴대폰에서 글자를 길게 눌러 복사해 보는 방법은 요즘 휴대폰이 사진 속 글자도 골라 주는 경우가 있어 확인용으로 맞지 않는다

바꾼 뒤에는 손님이 실제로 물을 질문으로 다시 확인합니다. 방법은 AI 답변에 우리 가게가 나오는지 확인하는 법에, 질문에 첫 문단에서 답하는 페이지 구성은 답을 먼저 쓰는 페이지에 있습니다.

정리

메뉴판·가격표·영업시간·이벤트 안내를 이미지로만 올리면, 사람에게는 보여도 검색엔진과 AI 답변에는 정확하게 쓰기 어려운 재료가 됩니다. 구글은 중요한 내용을 텍스트로 두고 이미지는 보조로 쓰라고 했고, 마이크로소프트는 AI가 이미지 속 글자를 읽을 수는 있어도 정확도가 떨어지는 경우가 많다고 적었습니다. alt는 사진을 설명하는 짧은 글이고, 메뉴판 전체는 본문 표가 맡습니다. 이 사이트도 ChatGPT 캡처를 실을 때 주장에 쓰는 숫자와 문장은 본문에 글자로 한 번 더 적습니다. 글자로 옮겨도 노출이 보장되지는 않지만, 적어도 가게가 적은 값이 그림 속에 갇혀 있지는 않게 됩니다.

이 글을 쓴 사람

AI 상위노출 일을 하는 유환호가 썼습니다. 이 글에서 HTML을 확인한 세 곳의 홈페이지는 그가 만들었으므로 이 주제에 이해관계가 있습니다. 확인한 날짜와 범위(첫 화면 HTML 원문)를 함께 적었고, 사례 페이지의 캡처는 고치지 않은 채 한계와 함께 공개합니다. 작업 순서는 작업 과정에 있습니다.