대체 텍스트, 대체 왜 쓰는 걸까요?
구글이 대체 텍스트를 활용하는 이유와 방법
이미지를 볼 수 없는 상황이 생긴다면 어떻게 될까요대체 텍스트, 대체 왜 쓰는 걸까요?
이미지는 텍스트만큼이나 강력한 소통 수단입니다. 하지만 모든 사용자가 이미지를 볼 수 있는 것은 아닙니다. 시각 장애인이나 화면이 로드되지 않는 상황에서는, 이미지를 설명해 줄 또 다른 언어가 필요합니다. 바로 대체 텍스트(Alt text, Alternative text)입니다.
예를 들어, 쇼핑 앱에서 상품 이미지는 구매 결정에 핵심적인 역할을 하지만, 화면을 볼 수 없는 사용자에게는 대체 텍스트가 그 역할을 대신합니다. 이는 단순한 기술적 보완이 아니라, 모든 사용자가 동등하게 정보를 얻을 수 있도록 돕는 접근성 디자인의 기본 원칙입니다.
본 글에서는 구글 Material 3에서 정의하는 대체 텍스트의 작성 방법과 사례를 중점적으로 알아보겠습니다.
이미지를 볼 수 없을 때, 대체 텍스트를 읽어주는 스크린 리더대체 텍스트와 스크린 리더
대체 텍스트는 이미지나 아이콘과 같은 시각적 요소를 글로 설명해 주는 보조 수단입니다. 평소에는 화면에 드러나지 않지만, 이미지가 로드되지 않거나 시각적으로 볼 수 없는 사용자에게 의미를 전달하는 역할을 합니다.
단순히 그림을 묘사하는 것이 아니라, 이미지가 담고 있는 맥락과 목적을 짧고 명확하게 설명하는 것이 핵심입니다.
자동 생성된 파일 번호가 아닌, 사용자에게 맥락을 제공하기 위한 대체 텍스트를 작성합니다.이러한 대체 텍스트를 음성으로 읽어주는 것이 스크린 리더입니다. 스크린 리더는 작성된 대체 텍스트를 실제 사용자에게 전달하는 소프트웨어입니다. 화면 속 텍스트와 구조를 음성이나 점자로 변환하여 안내하기 때문에, 시각장애인이나 저시력 사용자는 화면을 보지 않고도 기기를 사용할 수 있습니다.
예를 들어, 애플 기기에는 VoiceOver, 안드로이드에는 TalkBack, 윈도우에는 NVDA와 JAWS 같은 스크린 리더가 활용되고 있습니다. 이들은 버튼 이름, 제목, 표 구조, 그리고 대체 텍스트까지 모두 읽어주며 사용자가 필요한 정보를 탐색할 수 있게 합니다.
대체 텍스트는 이미지가 로드되지 않을 때 대신 표시되며, 이미지를 볼 수 없는 사용자에게 필요한 정보를 전달합니다.
정보가 없는 이미지에는 대체 텍스트가 필요하지 않습니다.대체 텍스트를 사용하지 않는 경우도 있나요?
페이지에서 이미지를 제거해도 정보가 손실되지 않는다면, 그 이미지는 장식용이므로 대체 텍스트나 캡션이 필요하지 않습니다. HTML에서 [alt=""] 같은 빈 속성을 사용해 장식용 이미지로 표시할 수 있으며, 이렇게 하면 스크린 리더는 이미지를 건너뜁니다.
이미지의 의미에 도움이 되지 않는 자세한 설명은 피하고, 중요한 부분에 초점을 맞춥니다.이미지의 의미에 집중하기
세부 묘사보다는 맥락과 전체적인 의미를 설명하는 것이 중요합니다. 예를 들어, 쇼핑 앱에서는 주변 사물보다 판매되는 상품 자체를 강조해야 합니다.
대체 텍스트는 검색 최적화(SEO)에 도움이 되기도 하지만, 가장 중요한 목적은 모든 사용자가 사이트를 이용할 수 있게 만드는 것입니다.
대체 텍스트를 140자 이상 쓰지 않습니다.짧게 유지하기
대체 텍스트는 140자를 권장합니다. 너무 길면 일부 스크린 리더에서 잘려 사용자 경험이 나빠질 수 있습니다.
'이미지'라고 쓰지 않아도 스크린 리더가 이미지라고 알려줍니다. 형식보다는 이미지를 설명합니다.'이미지'로 시작하지 않기
스크린 리더는 이미지를 만나면 자동으로 '이미지'라고 알려줍니다. 대체 텍스트를 'image of'로 시작하면, 스크린 리더가 '이미지, image of …'라고 중복해서 읽습니다.
대체 텍스트는 항상 맥락과 관련이 있어야 하며, 이미지가 사용되는 곳에 따라 텍스트를 변경합니다.맥락을 파악하기
대체 텍스트를 작성할 때는 이미지 주변의 텍스트를 활용해 맥락과 단어 선택을 정하는 것이 좋습니다. 여기서 주변 텍스트란 본문, 캡션, 제목 등 이미지 가까이에 위치한 모든 글을 포함합니다.
캡션을 대체 텍스트에 그대로 반복해서는 안 됩니다. 사용자가 같은 내용을 두 번 듣게 되어 불필요한 경험이 되기 때문입니다. 또한 단어 선택은 일관되게 유지해야 합니다. 예를 들어, 캡션에는 “앤티크”라고 쓰고 대체 텍스트에는 “빈티지”라고 쓰는 식으로 표현을 다르게 하면 혼란을 줄 수 있습니다.
대체 텍스트는 인접한 텍스트와 일치해야 하므로, 캡션과 일관성 있게 만들어야 합니다. 주관적인 대체 텍스트
대체 텍스트는 또 하나의 창의적 표현이자, 맥락의 목표와 스타일을 지원해야 합니다. 같은 이미지라도 맥락에 따라 달라질 수 있으며, 앱이나 기사, 캡션에 담긴 정보를 활용해 어떤 부분을 강조할지 결정해야 합니다.
이미지 맥락과 관련 없는 세부정보는 지양합니다.이미지의 맥락과 관련이 없는 세부정보를 포함하지 않아야 합니다. 이미지의 의미에 집중하고, 캡션의 내용을 강화하는 용도로 대체 텍스트를 사용할 수 있습니다.
캡션을 대체 텍스트로 반복하기보다는, 단 몇 마디로 이미지의 의미를 전달할 수 있습니다. 캡션은 모든 사용자를 위해 존재합니다.
캡션은 이미지를 명확히 볼 수 있는 사용자뿐 아니라, 스크린 리더 사용자에게도 유용해야 합니다. 좋은 캡션은 이미지를 그대로 반복하기보다 이미지를 보완하는 역할을 하며, 잘 작성된 캡션은 대체 텍스트를 쓰는 데에도 도움이 됩니다.
이미지 유형을 설명하는 대체 텍스트를 사용할 때는 주의해야 합니다.이미지 유형별 고려사항
차트, 인포그래픽, 지도, 그래프, 스크린샷, 인물사진, 다이어그램처럼 특정 상황에서는 이미지 유형을 명시하는 것이 도움이 될 수 있습니다. 다만 불필요하게 유형을 강조하지 않도록 주의해야 합니다.
데이터의 주요 목적(축구 클럽에 대한 관심도)을 요약해 볼 수 있습니다. 차트와 그래프
대체 텍스트는 차트나 그래프와 같은 시각화 자료에서 특히 중요합니다. 시각화 자료는 특정 목적이나 핵심 결론을 강조하는 에디토리얼 용도일 수도 있고, 더 열린 해석을 위해 사용하는 데이터 분석용일 수도 있습니다.
따라서 차트나 그래프의 핵심 목적이 무엇인지, 사용자가 이를 활용하기 위해 어떤 정보를 알아야 하는지를 먼저 고려해야 합니다. 가능하다면 차트나 그래프를 생성한 데이터 출처 링크도 함께 제공하는 것이 좋습니다.
데이터 내용을 복사하는 것을 지양합니다. 주요 데이터와 함께 차트의 의미를 파악해야 합니다.가능한 경우, 모든 데이터 포인트를 나열하기보다 맥락 속에서 핵심 결론과 의미를 설명하는 것이 바람직합니다. 일반적인 차트 대체 텍스트 작성 공식은 [데이터 유형 요약] + [차트를 보여주는 이유]입니다.
편집에 초점을 둔 차트에서는 주요 내용과 지표를 강조합니다.에디토리얼 차트
에디토리얼 차트는 특정한 핵심 결론을 뒷받침하기 위해 사용됩니다. 따라서 대체 텍스트에서는 이 핵심 결론과 이를 입증하는 주요 데이터 포인트에 집중해야 합니다. 대체 텍스트를 작성할 때는 본문, 라벨, 그래프에 포함된 텍스트 등 이미 제공된 내용을 적극적으로 활용하는 것이 좋습니다.
예를 들어, 주간 요약 리포트에서 신체 활동 변화를 강조하는 차트가 있다면, “이번 주 평균 걸음 수가 지난주 대비 55% 증가했다”와 같은 요약 문장을 대체 텍스트로 사용할 수 있습니다.
분석된 차트를 요약하기 보다는, 차트의 구조를 명시하고 추가적인 탐색 기회를 제공할 수 있습니다.분석용 차트
분석용 차트는 전체적으로 검토되며, 분석할 수 있는 다양한 데이터 조각들을 제공합니다. 이러한 차트는 밀도가 높고, 다른 차트와 함께 제시되거나 여러 가지 결론을 이끌어낼 수 있습니다. 만약 하나나 두 개의 주요 인사이트가 있다면, 이를 대체 텍스트에 포함하는 것이 좋습니다.
그러나 다양한 해석이 가능한 차트에서는 특정 결론을 단정적으로 요약하는 대신, 데이터 출처 링크를 제공하거나 탐색 기회를 강조하는 것이 바람직합니다. 핵심 데이터 포인트를 언급하거나, 단일한 결론이 없음을 알려주는 것도 좋은 방법입니다.
복잡한 시각화를 위해 인터랙티브 차트를 사용할 수 있습니다.인터랙티브 차트
스크린 리더 사용 경험을 개선하기 위해서는, 특히 분석에 활용되는 복잡한 시각화 자료의 경우 정적인 이미지 대신 인터랙티브 차트를 사용하는 것이 좋습니다. 인터랙티브 차트에서는 툴팁을 통해 특정 데이터 포인트의 세부 정보를 제공할 수 있습니다.
영상이나 애니메이션에서 액션을 요약할 수 있습니다.동영상 및 모션 대체 텍스트
정지 이미지와 마찬가지로, 애니메이션에 담긴 정보가 화면의 다른 곳에 없다면 그것은 정보 제공 목적을 가진 것이므로 대체 텍스트가 필요합니다.
반면, 장편 영상 콘텐츠는 시각적 요소를 설명하는 영상 설명(Audio Description)을 사용하기 때문에 별도의 대체 텍스트가 필요하지 않습니다.
모션의 모든 측면에 대해 쓰기보다는, 모션 에셋을 요약하는 대체 텍스트를 작성하는 것이 좋습니다.정보 전달을 위한 GIF나 모션 그래픽에는 핵심 포인트를 중심으로 대체 텍스트를 작성해야 합니다. 마치 그 이미지에 붙일 수 있는 제목이나 헤딩을 생각하듯, 간단히 요약하는 표현이 가장 적절한 대체 텍스트가 됩니다.
접근성을 높이고, 다양한 오류 상황에 정보를 제공하는 대체 텍스트마치며
대체 텍스트는 보이지 않는 이미지를 설명함으로써 접근성을 높이고, 이미지 로드 실패 시에도 정보를 제공하는 장점이 있습니다. 또한 검색 최적화(SEO)에 긍정적인 효과를 줄 수 있어, 사용자 경험뿐 아니라 서비스 측면에서도 가치가 있습니다.
하지만 대체 텍스트는 언제나 필요하지는 않습니다. 단순한 장식용 이미지는 오히려 빈 속성으로 처리하는 것이 더 나은 접근성을 보장합니다. 또한 불필요하게 긴 설명이나, 캡션과 중복된 문장은 사용자에게 피로감을 줄 수 있으므로 주의해야 합니다.
마지막으로, 대체 텍스트는 ‘얼마나 많이 쓰는가’보다 ‘어떻게 쓰는가’가 더 중요합니다. 핵심만 간결하게 담고, 맥락에 맞는 정보를 제공해야 합니다. 그렇지 않으면 사용자 경험을 돕기보다 방해가 될 수 있습니다. 결국 좋은 대체 텍스트는 모든 사용자가 동등하게 서비스를 경험할 수 있도록 하는 기본이자, 중요하게 신경 써야 할 디테일입니다.
대체 텍스트에 대한 자세한 내용은 아래에서 글에서 확인하실 수 있습니다.
