생성형 엔진 최적화 표 구현 방식, AI 답변 근거는 HTML 표
HTML 표의 수치는 페이지 텍스트라서 AI 답변 문장의 근거로 쓰일 수 있습니다. 이미지 표는 답변 옆에 시각 자료로 붙을 수는 있습니다. 하지만 그림 속 수치가 답변 문장에 정확히 옮겨진다고 기대하기는 어렵습니다. 생성형 엔진 최적화(GEO, AI 검색 답변에 쓰이도록 콘텐츠를 다듬는 일)의 표 구현 방식은 이렇게 정리됩니다. 수치는 HTML 표에 넣고, 이미지는 보조 자료로 씁니다.
이미지 표와 HTML 표는 정확히 무엇이 다른가요?
표 구현 방식은 같은 비교 정보를 페이지에 싣는 기술 형태를 말합니다. 이미지 표는 표를 PNG·JPG 같은 그림 파일로 만들어 넣은 것입니다. HTML 표는 table 요소로 행과 열을 구성한 것입니다.
화면에서는 두 표가 비슷하게 보입니다. 그러나 검색엔진과 보조 기술이 받는 정보는 다릅니다. 아래 표에서 대체 텍스트(alt 속성)는 이미지 내용을 설명하는 글을 말합니다. 스크린 리더 행은 W3C 웹 접근성 이니셔티브(WAI)의 표 지침과 복잡한 이미지 지침을 따릅니다.
| 구분 | 이미지 표 | HTML 표 |
|---|---|---|
| 수치가 존재하는 형태 | 그림 속 픽셀 | 페이지의 텍스트 |
| Google이 내용을 파악하는 경로 | 대체 텍스트, 이미지 인식, 주변 문장 | 셀에 적힌 텍스트 |
| 스크린 리더가 읽는 내용 | 주로 대체 텍스트를 읽음(긴 설명이 연결되면 함께 읽음) | 머리글이 th로 표시되면 셀 값을 머리글과 함께 읽을 수 있음 |
| 수치를 고치는 방법 | 이미지를 다시 만들어 교체 | 셀 텍스트만 수정 |
| 폰 화면에서 보이는 방식 | 축소되면 글자도 함께 작아짐 | 스타일 설정으로 줄바꿈·가로 이동 조정 |
Google 공식 문서는 AI 답변과 표 형식에 대해 무엇을 말하나요?
Google의 AI 기능 문서는 페이지가 AI 개요와 AI 모드에 나오기 위한 조건을 두 가지로 설명합니다. 페이지가 색인되어 있어야 하고, 스니펫과 함께 검색결과에 표시될 수 있어야 합니다. 그 밖의 추가 기술 요건은 없다고 밝힙니다.
같은 문서는 권장 사항으로 중요한 콘텐츠를 텍스트로 제공하라고 적습니다. 이미지와 동영상은 해당될 때 텍스트를 보조하는 용도로 쓰라고 안내합니다. 구조화 데이터는 페이지에 보이는 텍스트와 일치해야 한다는 설명도 있습니다.
2026년 7월에 갱신된 Google 생성형 AI 최적화 가이드도 같은 방향입니다. 텍스트 콘텐츠를 고품질의 관련 이미지와 동영상으로 뒷받침하라고 권합니다. 문단, 섹션, 제목으로 구조를 분명히 한 페이지를 사람들이 선호한다고도 적습니다.
이 가이드는 독자에게 고유하고 유용한 콘텐츠를 만드는 일이 사이트 노출에 영향을 줄 가능성이 높다고 설명합니다. 실무에서는 자사가 직접 정리한 비교 수치를 이런 고유한 정보로 봅니다. 그 수치를 그림 안에만 두면 텍스트로 쓰일 기회를 스스로 줄이는 셈입니다.
두 문서에는 표 형식만 따로 다루는 규칙이 없습니다. 표 구현 방식은 「중요한 내용은 텍스트로」라는 원칙을 비교표에 적용해 판단합니다.
이미지 표의 수치는 AI 답변에서 어떻게 다뤄지나요?
검색엔진이 이미지 표를 전혀 보지 못하는 것은 아닙니다. Google 이미지 문서는 대체 텍스트, 컴퓨터 비전 알고리즘, 페이지 내용을 함께 써서 이미지의 주제를 파악한다고 설명합니다. 캡션과 이미지 제목도 정보원으로 언급합니다.
다만 문서가 설명하는 것은 이미지 주제를 파악하는 일입니다. 표의 셀 값을 하나하나 텍스트로 옮긴다는 설명은 없습니다. 실무에서는 이미지 안의 수치가 답변 문장의 근거로 정확히 쓰일 것이라고 보지 않는 편이 안전합니다.
생성형 AI 최적화 가이드는 생성형 AI 검색 기능이 관련 이미지와 동영상을 가져와 보여 줄 수 있다고 적습니다. 그래서 실무에서는 이미지 표를 답변 옆에 붙는 시각 자료로, HTML 표를 답변 문장에 쓰일 수 있는 텍스트로 구분해 보는 편이 안전합니다.
대표 이미지 지정에도 주의가 필요합니다. Google 이미지 문서는 schema.org 마크업이나 og:image(공유 시 보이는 대표 이미지)에 글자가 들어간 이미지를 쓰지 말라고 안내합니다. 비교표 이미지는 글자가 많으므로 대표 이미지로 지정하지 않습니다.
표 구현 방식에 관한 흔한 오해는 무엇인가요?
| 흔한 오해 | 공식 문서의 설명 | 실무 판단 |
|---|---|---|
| AI는 이미지 속 내용을 전혀 읽지 못한다 | Google은 대체 텍스트, 컴퓨터 비전, 페이지 내용으로 이미지 주제를 파악한다고 설명합니다 | 이미지 주제를 파악하는 일과 수치를 옮기는 일은 따로 봅니다 |
| HTML 표만 쓰면 AI 답변에 인용된다 | 색인과 스니펫 표시 자격이 조건이며, 조건을 갖춰도 노출이 보장되지는 않습니다 | HTML 표는 텍스트로 쓰일 수 있는 형식을 갖출 뿐입니다 |
| AI용 특별 마크업이 있어야 표를 이해한다 | 생성형 AI 검색에 구조화 데이터는 필수가 아니며, 추가할 특별한 schema.org 마크업도 없다고 밝힙니다 | 표준 표 마크업을 정확히 쓰는 데 집중합니다 |
| 구조화 데이터에만 수치를 넣으면 이미지 표여도 된다 | 구조화 데이터는 페이지에 보이는 텍스트와 일치해야 한다고 안내합니다 | 수치는 화면 본문에도 텍스트로 둡니다 |
| 대체 텍스트에 표 전체를 적으면 HTML 표와 같다 | Google SEO 기본 가이드는 대체 텍스트를 짧지만 설명적인 글로 안내하고, W3C는 복잡한 이미지에 짧은 설명과 긴 설명을 함께 두라고 안내합니다 | 수치는 대체 텍스트가 아니라 본문 표에 옮깁니다 |
| AI를 위해 표를 잘게 쪼개야 한다 | AI가 잘 이해하도록 콘텐츠를 작은 조각으로 나눌 필요가 없고, 생성형 AI 검색만을 위해 특별한 방식으로 쓸 필요도 없다고 설명합니다 | 독자가 한눈에 비교할 수 있는 단위로 만듭니다 |
AI 답변에 쓰이기 좋은 HTML 비교표는 어떻게 만드나요?
W3C 표 지침은 머리글 셀을 th로, 데이터 셀을 td로 표시하라고 설명합니다. 스크린 리더는 셀을 하나씩 읽으면서 연결된 머리글을 함께 알려 준다고 적습니다. 머리글 방향이 분명하지 않으면 scope 속성에 col 또는 row를 지정하라고 안내합니다.
표 전체의 주제는 caption 요소로 밝히라고 권합니다. 화면에 보이는 모양만으로는 접근 가능한 표가 되지 않는다는 설명도 있습니다. 페이지 배치용으로 표를 쓰지 말고 CSS로 꾸미라는 원칙도 함께 둡니다.
- 표 바로 위에 비교 결론을 한 문장으로 씁니다. 표만 따로 읽혀도 무엇을 비교하는지 알 수 있습니다.
- 첫 행에는 비교 대상, 첫 열에는 비교 항목을 두고 머리글은 th로 표시합니다.
- 셀에는 단위와 조건을 함께 씁니다. 「3」 대신 「월 3만 원(부가세 별도)」처럼 적습니다.
- 병합 셀은 줄입니다. W3C는 여러 행·열에 걸친 머리글이 있는 표에 추가 마크업이 필요하다고 설명하므로, 단순한 격자 구조가 관리하기 쉽습니다.
- 표 아래에는 기준일과 출처를 문장으로 적습니다.
예를 들어 가상의 ○○ 기업이 요금제 두 가지를 비교한다면 표 위에 이렇게 씁니다. 「베이직과 프로는 사용자 수와 보관 기간이 다르며, 월 요금은 프로가 2만 원 더 높습니다.」 그다음 아래와 같은 표를 넣습니다.
| 비교 항목 | 베이직 | 프로 |
|---|---|---|
| 월 요금(부가세 별도) | 3만 원 | 5만 원 |
| 사용자 수 | 최대 5명 | 최대 20명 |
| 자료 보관 기간 | 90일 | 1년 |
표 아래에는 「2026년 10월 요금 안내 기준」처럼 기준일을 적습니다. 요금이 바뀌면 셀 텍스트만 고치면 됩니다.
이미 이미지로 올린 비교표는 어떻게 바꾸나요?
디자인 이미지는 그대로 두고, 같은 수치를 HTML 표로 함께 싣는 방식을 권합니다. W3C 복잡한 이미지 지침은 차트와 도표에 짧은 설명과 긴 설명을 함께 제공하라고 설명합니다. 짧은 설명은 이미지가 무엇인지 알리고, 긴 설명은 핵심 정보를 텍스트로 옮긴 것입니다.
W3C는 긴 설명을 모든 이용자가 볼 수 있게 두라고 권합니다. 지침의 예시에는 이미지와 긴 설명을 figure로 묶고, 제목·문장·표로 된 긴 설명을 figcaption에 두는 방법이 있습니다. Google SEO 기본 가이드도 이미지를 관련 텍스트 가까이에 두라고 안내합니다.
aria-describedby 속성으로 설명을 연결하는 방법도 있습니다. 다만 W3C는 이 방식에서 스크린 리더가 설명을 표나 제목 없이 한 문단으로 읽는다고 설명합니다. 긴 설명이 표라면 화면에 보이는 HTML 표로 두는 편이 맞습니다.
- 사이트에서 비교표, 요금표, 사양표를 이미지로 넣은 페이지를 목록으로 만듭니다.
- 이미지 속 수치를 그대로 옮겨 HTML 표를 만들고, 이미지 바로 아래에 배치합니다.
- 대체 텍스트를 짧게 바꿉니다. 문안 예: 「베이직·프로 요금제 비교표, 자세한 수치는 아래 표에 있습니다」
- 페이지 소스에서 표의 수치 하나를 찾아 텍스트로 들어 있는지 확인합니다. 스크립트로 표를 그리는 페이지는 화면이 다 그려진 뒤의 결과로 확인합니다.
- 페이지에 nosnippet·max-snippet 설정이 있거나, 표를 감싼 요소에 data-nosnippet 속성이 붙어 있지 않은지 확인합니다. AI 기능 문서는 이 설정들을 AI 기능에 표시되는 정보를 제한하는 수단으로 안내합니다.
전환한 결과는 아래 양식에 페이지별로 기록합니다.
| 기록 항목 | 작성 예 |
|---|---|
| 페이지 | 요금 안내 페이지 |
| 이미지 표 수 | 2개 |
| HTML 표 전환 여부 | 2개 모두 전환, 이미지는 유지 |
| 대체 텍스트 문안 | 베이직·프로 요금제 비교표, 자세한 수치는 아래 표에 있습니다 |
| 전환일 | 2026년 10월 22일 |
| 확인용 질문 | ○○ 베이직 요금제의 월 요금은 얼마인가요? |
확인용 질문은 표의 수치로만 답할 수 있게 만듭니다. 「○○ 프로 요금제는 몇 명까지 쓸 수 있나요?」 같은 질문이 그런 예입니다.
전환 전과 후에 같은 질문으로 AI 답변을 기록하면 변화를 비교할 수 있습니다. 답변은 시점과 검색어에 따라 달라지므로 여러 번 기록한 결과로 판단합니다.
정리
- 사이트에서 비교표를 이미지로 넣은 페이지를 목록으로 만듭니다.
- 수치를 HTML 표로 옮기고 이미지 바로 아래에 둡니다. 머리글은 th로 표시하고 셀에는 단위를 함께 씁니다.
- 표 위에는 결론 한 문장을, 표 아래에는 기준일과 출처를 적습니다.
- 대체 텍스트를 짧은 설명으로 바꾸고, 페이지 소스와 스니펫 제한 설정을 확인합니다.
- 확인용 질문 목록을 만들고 전환 전후의 AI 답변을 같은 양식에 기록합니다.
참고 자료
- AI features and your website (Google Search Central, 확인일 2026-10-22)
- Google's Guide to Optimizing for Generative AI Features on Google Search (Google Search Central, 확인일 2026-10-22)
- Image SEO best practices (Google Search Central, 확인일 2026-10-22)
- SEO Starter Guide (Google Search Central, 확인일 2026-10-22)
- Tables Tutorial (W3C Web Accessibility Initiative, 확인일 2026-10-22)
- Complex Images (W3C Web Accessibility Initiative, 확인일 2026-10-22)