멀티모달 준비성: 모델이 인용할 수 있는 이미지, 대체 텍스트 및 다이어그램

멀티모달 준비성: 모델이 인용할 수 있는 이미지, 대체 텍스트 및 다이어그램

작성자: 루카스 리히터, 선임 콘텐츠 자동화 전략가

다이어그램은 텍스트 한 페이지가 설명하는 데 몇 분이 걸릴 내용을 몇 초 만에 설명할 수 있습니다. 하지만 그 의미가 이미지 파일 안에만 존재한다면, 많은 독자(그리고 많은 검색 시스템)가 핵심을 놓칠 수 있습니다.

이것이 바로 멀티모달 준비성이 단순히 더 많은 그림을 추가하는 것이 아닌 이유입니다. 이는 각각의 유용한 시각 자료를 이미지 자체, 페이지 텍스트, 그리고 이 둘을 연결하는 코드에서 그 의미가 명확하도록 패키징하는 것을 의미합니다.

중요한 한 가지 제약이 있습니다. 좋은 대체 텍스트는 시스템이 이미지를 이해하는 데 도움을 줄 수 있지만, AI 어시스턴트가 해당 페이지를 인용할 것이라고 보장하지는 않습니다. 이미지를 이해하는 것과 웹 페이지를 소스로 선택하는 것은 서로 다른 단계입니다.

연구 결과가 보여주는 것과 보여주지 않는 것

캡션은 시각적 질문에 도움이 될 수 있습니다

일부 연구에 따르면 이미지와 함께 제공되는 텍스트가 모델이 이미지에 대한 질문에 답하는 데 도움이 될 수 있습니다. 2019년 연구에서는 이미지에 단락 형식의 캡션을 추가하면 시각적 질문 답변 작업의 성능이 향상되는 것으로 나타났습니다. 캡션은 이미지 기능만으로는 질문과 일치시키기 어려웠던 세부 정보를 제공했습니다. 그러나 이것은 라이브 웹 페이지에 대체 텍스트를 추가하는 것이 AI 인용을 증가시키는지 여부에 대한 테스트가 아니라 모델 실험이었습니다. ACL Anthology 논문 (aclanthology.org)

차트와 다이어그램 역시 모델이 정확하게 읽는 데 여전히 어려움이 있습니다. 한 차트 질문 벤치마크에서 연구원들은 값 사이의 관계를 찾는 것과 같은 작업에서 약점을 발견했습니다. 특별한 텍스트 프롬프트로 결과가 향상되었는데, 이는 명확한 언어의 가치를 보여주지만 특정 페이지 형식이 더 많은 인용을 얻을 것이라고 증명하지는 않습니다. ChartInsights 벤치마크 (arxiv.org)

더 큰 교훈은 실용적입니다. 시각 자료는 유용한 증거를 담을 수 있지만, 모델은 여전히 작은 레이블, 정확한 값 또는 단계 간의 경로를 놓칠 수 있습니다. 예를 들어, OpenAI의 비전 가이던스는 작은 텍스트, 차트, 색상으로 구분된 요소 및 정확한 공간 추론에 대해 경고합니다. OpenAI 비전 가이드 (developers.openai.com)

더 나은 대체 텍스트가 인용 스위치는 아닙니다

검색 시스템은 이미지 설명과 주변 텍스트를 사용하여 그림이 무엇을 보여주는지 이해할 수 있습니다. Google은 검색을 위한 이미지를 이해할 때 대체 텍스트, 컴퓨터 비전 및 페이지 콘텐츠를 함께 사용한다고 말합니다. 또한 이미지를 관련 텍스트 근처에 배치할 것을 권장합니다. 이는 유용한 대체 텍스트 작성을 지지하지만, 대체 텍스트 자체가 AI 어시스턴트가 페이지를 인용하게 만든다는 증거는 아닙니다. Google 이미지 SEO 가이드라인 (developers.google.com)

이 글을 위해 검토된 증거는 대체 텍스트 변경만으로 현재 AI 어시스턴트 전체에서 인용률이 높아진다는 것을 입증하지 못했습니다. 많은 시스템은 어떤 페이지 요소를 읽는지, 왜 다른 소스보다 특정 소스를 선택하는지 정확히 설명하지 않습니다. Google은 AI 검색 기능에 특별한 마크업 요구 사항이 없으며, 적합한 페이지가 표시될 것을 보장하지 않는다고 말합니다. Google의 AI 기능 가이드라인 (developers.google.com)

따라서 개선된 시각 자료 패키징을 약속이 아닌 합리적이고 검증 가능한 가설로 간주하세요. 이는 페이지를 사용하기 쉽고, 구문 분석하기 쉽고, 질문에 직접적으로 답하는 텍스트를 포함할 가능성을 높일 수 있습니다. 어시스턴트가 이를 인용하는지 여부는 별도로 측정해야 할 결과입니다.

중요한 각 시각 자료를 증거로 패키징하세요

강력한 시각 자료 패키지는 네 부분으로 구성됩니다. 이미지, 간결한 대체 텍스트, 캡션, 그리고 근처의 텍스트 설명입니다. 각 부분은 다른 역할을 합니다.

1. 짧은 대체 텍스트를 작성하세요

대체 텍스트는 이미지를 볼 수 없는 독자에게 페이지를 따라가는 데 필요한 정보를 제공해야 합니다. 간단한 다이어그램의 경우 한 문장으로 충분할 수 있습니다. 복잡한 차트나 플로우차트의 경우, 대체 텍스트는 모든 세부 사항을 하나의 긴 설명에 쑤셔 넣기보다는 시각 자료와 그 주요 목적을 식별해야 합니다.

예시:

alt="결제 실패 후 재시도 경로가 있는 결제 흐름."

장식용 이미지의 경우, 보조 도구가 건너뛸 수 있도록 비어 있는 대체 텍스트(alt="")를 사용하세요. 대체 텍스트를 누락시키거나 반복적인 검색어로 채우지 마십시오. W3C의 복잡한 이미지 가이드라인과 Google의 이미지 가이드라인은 짧은 텍스트 대안과 완전한 설명을 구분합니다. (w3.org)

2. 캡션을 사용하여 그림의 요점을 명시하세요

캡션은 독자가 이미지가 왜 중요한지 이해하는 데 도움을 주어야 합니다. “아키텍처 다이어그램”과 같은 레이블은 일반적으로 너무 모호합니다.

더 유용한 캡션은 다음과 같습니다.

그림 1. 결제 실패 시 고객은 결제 화면으로 돌아가지만 장바구니는 유지됩니다.

HTML <figure> 및 <figcaption> 요소를 사용하여 캡션을 이미지에 연결하세요. 명확한 그림 번호나 이름은 또한 기사 텍스트에서 동일한 시각 자료를 참조하기 쉽게 만듭니다. Google의 문서 스타일 가이드는 대체 텍스트, 캡션 및 긴 설명과 함께 사용된 그림의 예시를 제공합니다. (developers.google.com)

3. 전체 설명을 페이지에 담으세요

복잡한 다이어그램은 짧은 대체 설명보다 더 많은 것을 전달합니다. 중요한 의미를 일반 페이지 텍스트에도 포함하세요. 플로우차트의 경우 각 단계와 각 분기에서 발생하는 일을 설명하십시오. 차트의 경우 기간, 단위, 주요 값 및 추세를 포함하십시오. 기술 다이어그램의 경우 부품 이름을 지정하고 연결 방식을 설명하십시오.

W3C는 복잡한 이미지에 대해 짧은 설명과 함께 더 완전한 텍스트 설명을 권장합니다. 이 완전한 설명은 기사 자체에, 이미지 근처에, 그리고 모든 독자가 이용할 수 있도록 존재할 수 있습니다. 정확한 값이 중요할 때는 데이터 테이블이 도움이 될 수 있습니다. W3C WAI: 복잡한 이미지 (w3.org)

4. 이름과 레이블을 일관되게 유지하세요

다이어그램에서 어떤 것을 “활성화”라고 부른다면, 캡션과 기사에서도 동일한 단어를 사용하십시오. 그림이 중요한 결과를 보여준다면 근처 문장으로 명시하십시오. 예를 들어, “그림 2에서, 대부분의 가입은 첫 프로젝트가 생성되기 전에 이탈합니다.”

이것은 마법 같은 인용 트릭이 아닙니다. 페이지의 증거를 더 쉽게 따르고 인용할 수 있도록 하는 방법입니다. Google은 AI 개요나 AI 모드에 대한 특별한 스키마가 없으며, 중요한 콘텐츠를 텍스트로 유지하고 구조화된 데이터가 사람들이 볼 수 있는 것과 일치하도록 만드는 것이 유용한 작업이라고 말합니다. (developers.google.com)

다음은 플로우차트의 간단한 패턴입니다.

html

결제 흐름의 핵심은 결제 실패가 장바구니를 비우지 않는다는 것입니다.

그림 1 설명: 장바구니 → 배송 → 결제 → 확인. 결제 실패 시 고객은 결제 화면으로 돌아가고 장바구니는 유지됩니다.

짧은 대체 텍스트는 다이어그램을 식별합니다. 캡션은 주요 요점을 제공합니다. 마지막 문장은 경로를 일반 텍스트로 설명합니다. 정확한 값이 있는 차트의 경우 해당 값의 테이블이나 목록도 추가하세요.

크롤러가 이미지를 가져올 수 있는지 확인하세요

잘 설명된 이미지는 여전히 이용 가능해야 합니다. 실제 src URL이 있는 일반 HTML <img> 요소를 사용하십시오. Google은 <img> 요소의 src에서 이미지를 찾을 수 있지만, CSS 배경 이미지는 같은 방식으로 색인화하지 않는다고 말합니다. 또한 이미지 가이드라인은 이미지 사이트맵에서 CDN으로 호스팅되는 이미지를 지원합니다. Google 이미지 SEO 가이드라인 (developers.google.com)

CDN의 경우 다음 기본 사항을 확인하세요.

• 이미지 URL은 로그인이나 만료되는 접근 토큰 없이 작동합니다.
• 페이지의 크롤러 권한과 CDN의 보안 규칙 모두 접근을 허용합니다.
• 렌더링된 페이지의 이미지 URL이 안정적이며 올바른 파일을 반환합니다.
• 반응형 이미지는 대체 src를 포함합니다.
• 중요한 텍스트가 실제 페이지 텍스트가 될 수 있음에도 이미지 안에 숨겨져 있지 않습니다.
• 스크롤 없이 볼 수 없는(below-the-fold) 이미지는 보이는 시점에 로드되어야 하며, 크롤러가 재현할 수 없는 방식으로 사람이 클릭하거나 스크롤한 후에만 로드되어서는 안 됩니다.

Google의 지연 로딩 가이드라인에 따르면 이미지 URL은 렌더링된 HTML에 나타나야 하며 보이는 시점에 로드되어야 합니다. 또한 페이지가 열릴 때 이미 보이는 이미지를 지연 로딩하는 것은 권장하지 않습니다. Google의 지연 로딩 가이드라인 (developers.google.com)

플랫폼별 권한도 확인하세요. OpenAI는 OAI-SearchBot을 자체 검색 크롤러로 문서화하고 있으며, 이는 훈련 데이터와 관련된 GPTBot과는 별개라고 말합니다. 하나를 허용한다고 해서 다른 하나를 허용해야 하는 것은 아닙니다. 이는 검색 노출을 원하지만 훈련 데이터 사용에 대한 선호도가 다를 경우 중요합니다. OpenAI 크롤러 문서 (developers.openai.com)

페이지가 시각적 질문에 대해 인용되는지 테스트하세요

몇 가지 가벼운 챗봇 프롬프트에만 의존하지 마십시오. 모델 이해와 웹 인용은 동일한 것이 아니므로 두 가지 테스트를 실행하십시오.

테스트 1: 모델이 시각 자료를 이해합니까?

일련의 차트와 다이어그램을 선택하십시오. 다음과 같이 답변이 이들에 의존하는 질문을 작성하십시오.

• 결제 다음 단계는 무엇입니까?
• 결제 실패 시 어떻게 됩니까?
• 어느 달에 전환율이 가장 높았습니까?
• 다이어그램에서 사용자가 이탈하는 주된 이유는 무엇이라고 말합니까?

그런 다음 제어된 입력 조건에서 모델 답변을 비교하십시오.

1. 이미지만.
2. 이미지 및 대체 텍스트와 캡션.
3. 이미지 및 해당 주석과 페이지의 텍스트 요약 또는 데이터 테이블.

모델, 질문, 이미지를 동일하게 유지하십시오. 정확한 값과 관계를 포함하여 답변의 정확성을 채점하십시오. 이는 추가된 텍스트가 모델이 귀하의 질문에 답하는 데 도움이 되는지 여부를 보여줍니다. 웹 검색 어시스턴트가 페이지를 찾거나 인용할지 여부는 보여주지 않습니다.

테스트 2: 검색 어시스턴트가 페이지를 인용합니까?

소규모 파일럿을 위해 유사한 다이어그램 위주의 페이지들을 짝지으세요. 한 그룹에는 전체 시각 자료 패키지를 추가하고, 비교 그룹은 현재 접근 가능한 기준 상태로 두십시오. 대조군을 만들기 위해 필수 대체 텍스트를 제거하지 마십시오. 그림을 읽어야 하는 질문과 페이지 텍스트가 이미 답하는 일반적인 질문, 두 가지 질문 세트를 준비하십시오.

관심 있는 검색 어시스턴트에서 동일한 프롬프트를 실행하십시오. 날짜, 제품, 질문, 답변, 인용된 페이지를 기록하십시오. 결과는 변경될 수 있으므로 시간이 지남에 따라 확인을 반복하십시오. 크롤러 또는 검색 도구가 업데이트된 페이지가 다시 크롤링되었음을 표시할 때까지 기다리십시오. Google은 다시 크롤링하는 데 며칠 또는 그 이상이 걸릴 수 있다고 언급합니다. (developers.google.com)

네 가지 결과를 추적하십시오.

• 인용률: 답변이 해당 페이지를 얼마나 자주 인용합니까?
• 답변 정확도: 어시스턴트가 시각적 사실을 올바르게 파악했습니까?
• 인용 지원: 인용된 페이지가 실제로 답변을 뒷받침합니까?
• 사업 성과: 방문, 추천 또는 리드가 사업에 도움이 되었습니까?

시각적 질문 결과를 일반적인 질문 대조군과 비교하십시오. 단순한 전후 비교는 오해를 불러일으킬 수 있습니다. 어시스턴트, 검색 색인 및 더 넓은 웹이 모두 한꺼번에 변경될 수 있기 때문입니다. 일치하는 페이지와 반복적인 확인이 도움이 되지만, 소규모 테스트는 보편적인 규칙이 아닌 파일럿으로 보고되어야 합니다.

결과가 무엇을 의미하는지 정확하게 설명해야 합니다. 텍스트 요약을 추가한 후 페이지가 더 자주 인용된다면, 이는 전체 패키지가 도움이 되었다는 것을 보여주는 테스트입니다. 어시스턴트가 이미지를 직접 읽었다는 것을 증명하지는 않습니다. 인용 대시보드는 AI 답변에 어떤 URL이 나타나는지 보여줄 수 있지만, 반드시 페이지의 어떤 부분이 읽혔는지는 보여주지 않습니다. 예를 들어, Bing의 AI 성능 보고서는 인용된 페이지와 쿼리 정보를 보고합니다. Bing 웹마스터 도구: AI 성능 (blogs.bing.com)

작업을 콘텐츠 시스템에 통합하세요

창업자들은 기사를 발행할 때마다 다이어그램을 손으로 다시 작성할 필요가 없습니다. 그러나 자동화가 그림의 의미를 만들어내서는 안 됩니다.

간단한 워크플로우는 다음과 같습니다.

1. 제작자는 원본 데이터 또는 다이어그램과 독자가 얻어가기를 바라는 주요 요점을 제공합니다.
2. 콘텐츠 워크플로우는 해당 원본 자료를 바탕으로 대체 텍스트, 캡션 및 일반 텍스트 요약을 초안합니다.
3. 사람은 설명이 정확하고 레이블, 값, 경로가 시각 자료와 일치하는지 확인합니다.
4. 페이지는 이미지와 텍스트를 함께 게시합니다.
5. 반복 가능한 확인을 통해 독자와 크롤러 모두에 접근 가능한지 확인합니다.

제작자의 핵심 요점은 자동화해서는 안 되는 부분입니다. 예를 들어, 창업자는 단순히 가입률이 떨어진다는 것을 보여주는 것이 아니라, 팀이 트래픽을 더 구매하기 전에 첫 프로젝트 설정을 수정하기로 결정했다는 것을 보여주고 싶을 수 있습니다. 이것은 의견이자 제품 교훈이지, 캡션 작업이 아닙니다.

자동화된 콘텐츠 엔진에서 제작자, 잠재 고객, 취향 입력은 여러 기사에 걸쳐 그 요점을 보존할 수 있습니다. AutoPod는 이러한 입력을 사용하여 각 기사를 안내하며, 워크플로우는 캡션 초안 작성 및 페이지 구조 확인과 같은 반복 가능한 작업을 처리합니다. 모델은 통찰력을 패키징할 수 있습니다. 모델이 통찰력을 만들어내서는 안 됩니다.

결론

설명적인 대체 텍스트, 캡션, 그림 레이블 및 주변 요약에 대한 가장 강력한 주장은 약속된 SEO 상승이 아닙니다. 그것들은 시각 자료를 더 쉽게 이해하고, 더 쉽게 접근하며, 페이지의 논리와 더 쉽게 연결되도록 만든다는 것입니다.

이는 또한 어시스턴트가 시각적 질문에 답하고 페이지를 인용하는 데 도움이 될 수 있지만, 그 효과는 보장되지 않습니다. 다이어그램을 증거로 패키징하고, 이미지를 가져올 수 있도록 하며, 인용을 이해도와 별개로 측정하십시오. 이것은 독자를 위한 가치를 최우선으로 하며 AI 발견을 위한 검증 가능한 잠재적 이점을 가진 간단한 시스템입니다.