이미지 대체는 키워드를 넣는 곳이 아닙니다: 번역할 때 목적을 유지하는 방법

웹 페이지의 이미지 대체 텍스트(alt)는 키워드를 보충하는 장소로 자주 사용되거나 일률적으로 "누락"으로 표시된 후 완성됩니다. 이러한 두 가지 방법 모두 접근성 경험을 악화시킬 수 있습니다. 이 문서는 웹페이지 번역 및 현지화를 담당하는 팀을 위해 작성되었습니다. 정보 그래픽과 장식 그래픽, 기능성 그래픽을 구분하는 방법, 사전 검증을 위해 뷰티플수프를 활용하는 방법, 어떤 상황을 매뉴얼 리뷰로 넘겨야 하는지 설명한다.

이 기사를 읽은 후에는 실행 가능한 분류 규칙 세트를 구축하고 어떤 대체 항목을 비워 두어야 하는지, 어떤 대체 항목은 완전히 번역되어야 하는지, 어떤 대체 항목은 사람의 확인이 필요한지 알 수 있습니다.

웹 이미지의 대체 이미지를 어떻게 번역하나요? 한 문장 결론

먼저 목적에 따라 이미지를 분류한 다음 번역 방법을 결정합니다. 인포그래픽은 데이터를 완전히 전달하고 장식 그래픽은 비어 있는 상태로 유지되며 기능적 그래픽은 모양보다는 동작을 설명합니다.

당신의 상황	권장 사례	이유
이미지는 텍스트에서 반복되지 않는 데이터나 프로세스를 전달합니다(인포그래픽).	필요한 경우 문화적 배경 메모를 추가하여 대체 번역을 완료합니다.	독자는 Alt에서 이 시각적 정보를 얻어야 합니다.
구분선, 배경 질감, 텍스트가 없는 일러스트레이션 등 순수한 장식	`alt=""`를 유지하고 번역 중에 바로 건너뛰기	빈 대체는 적합하며 스크린 리더에게 이미지를 건너뛰도록 지시합니다.
돋보기, 봉투 등의 아이콘 컨트롤	alt는 "검색" 및 "이메일 보내기"와 같은 작업 또는 목표 상태를 설명합니다.	외관을 설명하면 작업 목적이 불분명해집니다.
대체 누락 또는 불분명한 목적	경고를 기록하고 수동으로 검토하며 추측 내용을 자동으로 입력하지 않습니다.	잘못된 기능 설명은 기능 누락보다 더 위험합니다
alt에는 브랜드 이름이나 고유 명사가 포함되어 있습니다.	일관된 번역을 위해 용어집을 확인하세요.	페이지에서 동일한 용어를 여러 번 번역하지 마세요.

왜 빈 Alt가 누락된 것으로 간주될 수 없나요?

번역 팀이 <img alt="">를 "대체 텍스트 누락"으로 일률적으로 표시하고 완성을 요구하면 웹 페이지의 접근성 환경이 파괴될 수 있습니다. 빈 alt 속성은 HTML 사양에 적합하며 화면 판독기에 이미지를 건너뛰도록 명시적으로 지시합니다.

진짜 문제는 대체가 비어 있다는 것이 아니라, 번역자가 이미지가 핵심 데이터를 담고 있는 차트인지, 순수한 대기 장식인지, 클릭할 때 작업을 실행하는 버튼 아이콘인지 구별할 수 없다는 것입니다. 모든 이미지 대체 항목을 긴 설명 문장으로 번역하는 것은 중복되며 시각 장애가 있는 사용자가 탐색할 때 유효하지 않은 정보를 많이 듣게 됩니다. 이 문제를 해결하는 열쇠는 번역가의 주관적인 판단에 의존하기보다 실행 가능한 분류 및 검증 메커니즘을 구축하는 것입니다.

세 가지 유형의 그림의 의미적 경계와 번역 전략

이미지 대체 텍스트를 다룰 때는 먼저 분류한 다음 번역을 고려해야 합니다.

인포그래픽

인포그래픽에는 본문에서 반복되지 않는 핵심 데이터나 프로세스가 포함되어 있습니다. 대체 텍스트는 이러한 시각적 정보를 완전히 전달해야 하며 번역 시 독립형 단락으로 현지화되어야 하며 필요한 경우 문화적 배경 설명을 추가해야 합니다.

장식 이미지

장식 이미지는 텍스트가 없는 구분선, 배경 질감, 일러스트 등 레이아웃 미화나 감성 렌더링에만 사용됩니다. 해당 이미지의 대체는 빈 문자열 ""로 유지되어야 하며 설명을 추가하지 않고 번역 작업을 건너뜁니다.

기능 다이어그램

기능 다이어그램은 검색용 돋보기 아이콘, 연락처용 봉투 아이콘과 같은 대화형 컨트롤로 존재합니다. 대체 항목은 모양(예: '파란색 돋보기', '흰색 봉투')보다는 작업이나 목표 상태(예: '검색', '이메일 보내기')를 설명해야 합니다.

이 세 가지 유형의 이미지를 혼동하면 번역에 정보가 과부하되거나 주요 작업을 찾을 수 없게 됩니다. 엔지니어링 실무에서 이 분류는 수동 기억에만 의존할 수 없으며 식별을 위해 스크립트의 도움을 받을 수 있는 규칙으로 변환되어야 합니다.

합성 예: 올바른 출력과 경계 입력

아래 구성 예시에는 데이터 차트, 장식 패턴, 제출 버튼 아이콘 등 세 가지 이미지가 포함되어 있습니다. 예상되는 결과는 다음과 같습니다. 데이터 차트는 자세한 중국어 설명을 유지하고 장식 패턴의 alt=""는 변경되지 않고 그대로 유지되며 제출 버튼 아이콘의 Alt는 "제출 양식"으로 변환됩니다.

두 가지 일반적인 경우에 특별한 주의가 필요합니다.

장식 그림이 설명 텍스트로 잘못 표시됨: 예를 들어 장식 패턴이 alt="decorative flower"로 기록됩니다. "장식용 꽃"으로 번역하는 대신 스크립트는 의미적 역할을 인식하고 이를 null 값으로 수정해야 합니다.
함수 다이어그램 누락 대체: 이 시점에서 경고가 기록되어야 하지만, 잘못된 기능 설명이 누락된 것보다 더 위험하므로 추측적인 설명이 자동으로 채워져서는 안 됩니다.

이러한 판단은 상황에 따른 사람의 검토에 의존하며 코드는 의심스러운 항목을 표시하는 데만 도움을 줄 수 있습니다. 이 예제는 전적으로 메모리에 구성되어 있으며 외부 파일 읽기나 네트워크 요청을 포함하지 않으므로 교육 환경에서 쉽게 안전하게 재현할 수 있습니다.

Beautiful Soup을 사용하여 대체 속성의 유효성을 검사하세요.

다음 Python 예제에서는 img 태그의 alt 속성을 추출하고 초기에 분류하는 방법을 보여주기 위해 Beautiful Soup 4.12.x(beautifulsoup4를 직접 설치해야 함)를 사용하여 메모리에 샘플을 구성합니다.

from bs4 import BeautifulSoup

# 合成示例HTML，包含三类图片及一个边界案例
# 注意：此为教学演示数据，无需准备外部文件
html_snippet = """
<div>
  <img src="chart.png" alt="Q3 revenue increased by 15% compared to Q2">
  <img src="divider.svg" alt="">
  <img src="submit-icon.png" alt="Submit">
  <img src="flower-bg.jpg" alt="decorative flower">
</div>
"""

# 使用html.parser解析器，避免XML模式对多值属性的特殊处理
soup = BeautifulSoup(html_snippet, 'html.parser')
imgs = soup.find_all('img')

results = []
for img in imgs:
    # 使用.get()安全获取属性，避免KeyError
    alt = img.get('alt')
    src = img.get('src', '')

    # 简单启发式分类（非标准，仅作演示）
    # 实际项目中应结合ARIA角色、CSS类名等更多上下文
    if alt is None:
        category = 'missing'
    elif alt == '':
        category = 'decorative'
    elif any(kw in src.lower() for kw in ['icon', 'btn', 'button']):
        category = 'functional'
    else:
        category = 'informative'

    results.append({'src': src, 'alt': alt, 'category': category})

# 断言校验脚本自身逻辑是否正确执行
assert len(results) == 4
assert results[0]['category'] == 'informative'
assert results[1]['category'] == 'decorative'
assert results[2]['category'] == 'functional'
# 边界案例：误标的装饰图被归为informative待审，而非自动修正
assert results[3]['category'] == 'informative'

세 가지 점을 설명해야 합니다.

스크립트는 완전한 번역 의사결정 엔진이 아닌 주변 검증 도구일 뿐입니다. 실제 적용에서는 여전히 수동 검토가 필요합니다.
예제에서는 외부 파일을 읽지 않으며 모든 HTML 콘텐츠가 코드에 정의되어 있습니다. 어설션은 번역 품질을 확인하는 것이 아니라 스크립트 자체의 구문 분석 논리가 미리 설정된 규칙을 준수하는지 확인합니다.
공식 문서에 따르면 Beautiful Soup은 HTML 문서를 Tag 및 NavigableString과 같은 객체 트리로 변환합니다. .get('alt')를 통해 속성에 액세스하는 코드는 KeyError 예외를 방지할 수 있습니다.

수락 목록 및 수동 검토 트리거 조건

현상 관찰	처리 결정	직접 검토가 필요한지 여부
alt는 비어 있고 src에는 장식, bg, 패턴 등과 같은 키워드가 포함되어 있습니다.	번역을 건너뛰려면 Alt를 비워 두세요.	아니요
alt가 비어 있고, src에 장식 단서가 없으며, 주변 텍스트에 이미지 내용이 언급되어 있지 않습니다.	'실종 의심'으로 표시됨, 아직 번역되지 않음	예
alt는 비어 있지 않으며 src에는 아이콘, btn, 버튼이 포함되어 있습니다.	alt가 모양이 아닌 동작을 설명하는지 확인하세요.	예
alt는 비어 있지 않은 설명 텍스트이지만 본문에는 이미 동일한 정보가 있습니다.	중복성을 평가하고 빈 대체로 변경될 수 있습니다.	예
alt에는 브랜드 이름이나 고유 명사가 포함되어 있습니다.	용어집 일관성 확인	예

이 표에서는 일반적인 패턴만 다룹니다. SVG 인라인 텍스트, 캔버스 그림 또는 동적으로 생성된 이미지가 발생하는 경우 프런트 엔드 구현에 익숙한 사람이 검토해야 합니다. 스크립트는 분류 라벨만 출력하며, 페이지 렌더링과 접근성 테스트 도구를 결합하여 엔드투엔드 효과를 검증해야 합니다.

스크립트의 휴리스틱 규칙은 파일 이름 키워드를 기반으로 하며 CSS 배경 이미지, 데이터 URI 또는 ARIA 역할과 같은 복잡한 시나리오를 고려하지 않으므로 자동 번역의 유일한 기반으로 사용할 수 없습니다.

📊 핵심 비교: 세 가지 유형의 이미지 처리 차이점

유형	전형적인 예	Alt에는 무엇을 써야 하나요?	번역 처리	부적절한 취급으로 인한 결과
인포그래픽	데이터 또는 프로세스를 전달하는 다이어그램	완전한 시각적 메시지	독립형 단락으로 현지화하여 필요한 경우 배경 메모를 보완합니다.	정보가 누락되어 독자가 차트 콘텐츠에 액세스할 수 없습니다.
장식적인 그림	구분선, 배경 질감, 텍스트가 없는 그림	빈 문자열 `""`	건너뛰기, 설명 추가 안 함	잘못된 정보는 읽기 부담을 증가시킵니다
기능 다이어그램	돋보기, 봉투 및 기타 대화형 아이콘	행동 또는 목표 상태	"검색", "이메일 보내기" 등의 동작어로 번역됨	외관을 설명하면 중요한 작업에 접근하기 어렵습니다.

🎯 어떤 방법이 당신에게 적합합니까?

이미지가 많은 웹페이지 번역을 담당하신다면

먼저 세 가지 범주의 이미지를 표시한 다음 유지, 번역 또는 대체 추가 여부를 결정합니다.

자동인증 프로세스를 유지하고 있는 경우

발견적 규칙을 신고 도구로 사용하고 의심스러운 항목을 기반으로 직접 번역을 수정하는 대신 사람의 검토를 위해 제출하세요.

페이지에 SVG, 캔버스 또는 동영상이 포함된 경우

직접 검토로 전환하고 스크립트 결과에 의존하지 마세요.

❓ 자주 묻는 질문(FAQ)

1. Alt가 비어 있으면 이미지에 대체 텍스트가 없다는 의미인가요?

아니요. HTML 사양에 따르면 빈 Alt는 유효하며 화면 판독기에 이미지를 건너뛰도록 지시합니다. 장식용 이미지는 대체적으로 비어 있어야 합니다.

2. 기능도의 Alt로 외형을 쓸 수 있나요?

권장되지 않습니다. 기능 다이어그램의 대체는 "파란색 돋보기" "흰색 봉투"보다는 "검색" "이메일 보내기"와 같은 작업 또는 목표 상태를 설명해야 합니다.

3. 이미지에 Alt가 없으면 스크립트가 자동으로 완성할 수 있나요?

자동 완성이 없어야 합니다. 잘못된 기능 설명은 기능 누락보다 더 위험하므로 사람이 검토할 수 있도록 경고를 기록하고 제출해야 합니다.

4. 스크립트가 SVG와 Canvas를 다룰 수 있나요?

할 수 없습니다. 이러한 시나리오는 스크립트 범위를 벗어나므로 프런트 엔드 구현에 익숙한 사람이 검토해야 합니다.

5. 스크립트 실행만으로 번역 품질을 확인할 수 있나요?

할 수 없습니다. 스크립트는 분류 라벨만 출력합니다. 예제의 어설션은 구문 분석 논리를 확인하며 번역 품질을 나타내지 않습니다.

📝 요약

이미지 대체의 본질은 SEO 키워드 컨테이너가 아닌 의미 전달자입니다. 번역의 목적은 이미지의 원래 목적을 복원하는 것이지 다른 설명을 만드는 것이 아닙니다.

지금 사용해 보세요: 원본 레이아웃을 유지하면서 번역을 시작하려면 문서를 업로드하세요.

다음 단계 및 참조 자료

현재 프로젝트에서 이미지가 포함된 HTML 페이지 5~10개를 선택하고 위 카테고리에 따라 수동으로 한 번 표시한 후 확인 스크립트를 실행하여 결과를 비교합니다. 특정 범주의 이미지에 편차가 집중된 경우 스크립트 임계값을 조정하기보다는 해당 범주에 대한 번역 지침을 수정하는 데 우선순위를 두십시오.

참고: Beautiful Soup 공식 문서 - 속성: https://www.crummy.com/software/BeautifulSoup/bs4/doc/#attributes

문서 번역에 이 체크리스트를 사용하세요

웹 문서의 텍스트, 링크, 코드 및 구조는 별도로 처리되어야 합니다. 보호된 부분을 승인 목록에 추가한 후 번역 후 가독성 및 페이지 표현 효과를 평가합니다.

OmniDoc(제품 포털)는 다양한 형식의 문서 번역 포털을 제공하며 공식 웹사이트에서는 OCR, 용어집 및 이중 언어 비교 기능을 소개합니다. 파일에서 직접 작업하려는 팀의 경우 이는 실제 샘플을 사용하여 평가할 가치가 있는 경로입니다. 업로드 권한이 있는 둔감화된 파일을 사용하시고, 이 글의 확인 항목을 사용하여 결과를 검토하시기 바랍니다. 이 문서는 OmniDoc이 문서에 설명된 오픈 소스 라이브러리나 내부 알고리즘을 사용한다고 주장하지 않으며 예제는 제품 성능 테스트를 대체하지 않습니다.