Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
본 글은 웹 접근성 측면에서 대체 텍스트(Alt text) 작성의 모범 사례와 원칙을 제시합니다. Alt text는 스크린 리더 사용자에게 정보를 제공하고 검색 엔진 최적화에도 도움을 주므로 매우 중요합니다. 이미지가 장식용인지, 핵심 정보가 담겨 있는지에 따라 alt 속성을 채우거나 비워야 합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기장식용 이미지는 빈 alt (alt="")를 사용하고, 절대 alt 속성을 누락하지 않습니다.
8~15단어, 한 문장으로 구성하며, "image of" 같은 표현은 사용하지 않습니다.
제품의 경우, 사물 자체와 구별되는 세부 사항을 하나 추가합니다.
차트의 경우, 축 레이블이 아닌 핵심 메시지를 전달합니다.
대체 텍스트(Alt text)는 두 배로 보상받는 접근성 작업입니다. 스크린 리더는 이미지를 볼 수 없는 사람에게 소리 내어 읽어주고, 검색 엔진은 페이지가 무엇에 관한 것인지 이해하기 위해 이를 사용합니다. 한 번만 제대로 작성해도 두 사용자 그룹 모두 이득을 봅니다.
제가 웹에서 보는 대체 텍스트의 대부분은 아예 누락되었거나 아무도 도움받지 못하는 키워드로 채워져 있습니다.
어떤 경우에 무엇을 작성해야 하고, 어떤 경우에 아예 아무것도 작성하지 말아야 하는지 제가 결정하는 방법을 알려드리겠습니다.
첫 번째 결정은 무엇을 쓸 것인지가 아닙니다. 무언가를 써야 할지 여부입니다.
이미지는 주변 텍스트에 없는 정보를 담고 있을 때 실제 대체 텍스트가 필요합니다. 제품 사진, 다이어그램, 결과 스크린샷, 숫자가 포함된 차트 등이 해당됩니다. 만약 이미지가 사라져서 페이지의 품질이 떨어진다면, 설명이 필요하다는 뜻입니다.
이미지는 장식용일 때 빈 대체 텍스트를 사용해야 합니다. 배경 질감, 구분선, 노트북에 관한 기사 옆에 배치된 스톡 사진 같은 경우입니다. 이러한 요소들은 스크린 리더 사용자에게 아무것도 추가적인 정보를 제공하지 않습니다. 이런 경우에는 alt=""을 작성하여 비어 있지만 존재하는 속성을 만듭니다.
이 빈 문자열(empty string)은 중요합니다.
alt=""과 아예 alt 속성이 없는 것은 실질적으로 차이가 있습니다. 빈 대체 텍스트는 스크린 리더에게 "의도적으로 건너뛰세요"라고 알려줍니다. 반면, 속성 자체가 누락되면 스크린 리더가 파일 이름을 소리 내어 읽도록 되돌아가게 되어, 사용자는 문장 중간에 "IMG underscore 4471 dot jpg"라는 것을 듣게 됩니다. 이것이 최악의 결과이며 끊임없이 발생합니다.
따라서 저의 규칙은 간단합니다. 모든 이미지는 항상 alt 속성을 갖습니다. 질문은 그것을 채울지, 아니면 비워둘지 뿐입니다.
머릿속으로 해보는 간단한 테스트: 만약 이 페이지를 친구에게 전화로 읽어준다면, 이 이미지를 묘사할 수 있을까요? 그렇다면 작성하세요. 하지만 내용이 이미 설명되었기 때문에 건너뛰어도 된다면 비워두세요.
아이콘은 까다로운 중간 케이스입니다. 텍스트 레이블 옆에 순수하게 시각적인 아이콘이 있는 경우, 레이블 자체가 "설정"이라고 말하고 있으므로 alt 속성(alt text)을 비워둡니다. 반면, 주변에 단어가 없는 돋보기와 같은 독립적인 버튼 역할을 하는 아이콘은 그것이 무엇을 하는지 설명하는 alt 텍스트("검색")가 필요합니다.
언급할 만한 또 다른 케이스가 있습니다. 이미지가 링크인 경우, alt 텍스트는 그림의 모양이 아니라 그 링크가 어디로 연결되는지를 설명해야 합니다. 홈으로 연결되는 로고라면 alt="RAXXO home"이라고 작성해야 하며, alt="주황색 로고"라고 해서는 안 됩니다.
저는 이와 같은 "의도적으로 비우기" 원칙을 제 도구의 다른 보이지 않는 상태에도 적용합니다. 의도적인 기본값(default)이라는 개념은 모든 RAXXO 도구가 갖추는 되돌리기 버튼에서도 나타납니다.
짧게. 생각보다 더 짧습니다.
제 목표는 8~15단어입니다. 한 문장으로, 마침표도 필요 없고, 채우기(padding)도 없습니다. 스크린 리더 사용자는 이 텍스트를 소리 내어 듣게 되며, 아무도 썸네일을 설명하는 단락을 듣고 싶어 하지 않습니다.
여기 함정이 있습니다. 사람들은 alt 텍스트를 이미지에 대해 아는 모든 것을 적는 공간으로 취급합니다. 이것은 10단어짜리 설명을 청취자가 쉽게 건너뛸 수 없는 60단어 분량의 에세이로 변질시킵니다. 만약 이미지가 복잡한 인포그래픽처럼 실제로 긴 설명이 필요한 경우, 올바른 방법은 짧은 alt 텍스트와 함께 보이는 페이지 텍스트나 캡션에 더 긴 설명을 추가하는 것입니다.
"이미지 of(image of)" 또는 "사진 of(photo of)"라는 구문은 건너뛰세요. 스크린 리더는 이미 당신의 텍스트를 읽기 전에 그것이 이미지임을 공지합니다. 따라서 "파란 머그잔 이미지(image of a blue mug)"라고 하면 "이미지, 파란 머그잔 이미지"로 두 번 발음됩니다. 그냥 "나무 책상 위의 파란 세라믹 머그잔(blue ceramic mug on a wooden desk)"이라고 쓰세요.
키워드 스터핑(keyword stuffing)에 주의하세요.
저는 'best coffee mug buy coffee mug cheap coffee mug online' 같은 대체 텍스트를 본 적이 있습니다. 검색 엔진은 그것을 스팸으로 취급하고, 청각 장애인 사용자(human listener)는 알아들을 수 없는 소리만 듣게 됩니다. 솔직한 설명 하나가 반복되는 키워드 다섯 개보다 항상 낫습니다.
구두점(Punctuation)이 리듬(rhythm)보다 중요하지 않습니다. 저는 대체 텍스트를 말하는 방식 그대로 작성합니다. '지난 30일 동안 1,200건의 주문을 보여주는 대시보드'는 소리 내어 읽어도 깔끔합니다. 반면, '대시보드; 주문; 30일 보기; 지표(metrics)'는 그렇지 않습니다.
제품 페이지를 위해 이미지를 생성하거나 업스케일링할 때, 저는 이미지의 원래 의도를 기억하는 동시에 대체 텍스트도 작성합니다. 만약 제품 렌더링을 정리하기 위해 Magnific 같은 것을 사용한다면, 이 변형(variant)이 무엇이었는지 잊어버린 몇 주 후에가 아니라 바로 그때 설명을 넣습니다.
좋은 길이 점검 방법: 대체 텍스트를 정상 속도로 소리 내어 읽어보세요. 중간에 숨이 차거나 흐름을 놓치면, 잘라내야 합니다.
제가 작성한 최고의 대체 텍스트 대부분은 약 10단어 정도이며, 단 하나의 내용을 명확하게 전달합니다.
또한 저는 네이밍 패턴(naming patterns)을 관리하는 것처럼 대체 텍스트 패턴 목록도 유지합니다. 일관성이 도움이 되기 때문에, 이 습관에 대해서는 The Command Naming Convention Every RAXXO Tool Follows에서 글을 썼습니다.
제품 이미지는 좋은 대체 텍스트가 빛을 발하는 곳입니다. 스크린 리더를 사용하는 쇼핑객은 구매 여부를 결정하고, 검색 엔진은 해당 상품을 적절한 검색어에 대해 순위화할지 결정합니다. 둘 다 동일한 핵심 사실이 필요합니다.
저의 공식: 제품 이름을 언급하고, 그 후 이 사진을 같은 제품의 다른 사진과 구별하는 한 가지 세부 사항을 추가합니다.
따라서 같은 재킷의 사진 5장이 있는 상품 목록이 있다면, 저는 '녹색 재킷'이라고 다섯 번 쓰지 않습니다. 대신 '녹색 워싱드 재킷, 전면 보기', 그리고 '녹색 워싱드 재킷, 내부 안감', 그다음은 '스웨터 위에 오픈하여 입은 녹색 워싱드 재킷'과 같이 작성합니다. 각 설명이 무언가를 추가해 줍니다. 시각 장애가 없는 쇼핑객은 사진을 넘겨보며 더 많은 것을 배우지만, 대체 텍스트(alt text)는 스크린 리더 사용자에게 같은 진행 과정을 제공해야 합니다.
색상, 소재, 그리고 각도나 맥락이 보통 가장 중요한 사실들입니다. 머그컵의 경우: '무광 검정 머그컵, 350ml, 한 손에 들고 크기 비교용.' 마지막 부분이 숫자만으로는 알 수 없는 크기를 훨씬 잘 알려줍니다.
감정이나 분위기는 설명하는 것을 피하세요. '아늑하고 매력적인 라이프스타일 사진'이라는 말은 구매를 결정하려는 청취자에게 아무 의미가 없습니다. 실제로 찍힌 것을 말하세요: '창가에 김이 나는 머그컵 옆에 펼쳐진 책.'
가격과 재고는 페이지 텍스트에 넣어야 하며, 대체 텍스트(alt text)에는 넣지 마세요. 그것들은 변하기 때문에, 대체 텍스트가 오래된 데이터를 담아서는 안 됩니다.
만약 Shopify로 스토어를 운영한다면, 대체 텍스트 필드는 각 이미지의 미디어 편집기 안에 위치하며, 테마가 보통 이를 올바르게 출력해 줍니다. 플랫폼이 기술적인 부분(plumbing)을 처리합니다. 단어는 여전히 당신의 일이며, 기본값은 거의 항상 비어 있습니다.
제가 주의 깊게 보는 한 가지는: 변형 이미지입니다.
만약 제품에 색상 변형(color variants)이 12가지가 있고 각각 고유한 사진이 있다면, '제품 이미지'와 같은 일반적인 대체 텍스트는 이 모든 것을 낭비합니다. 색상 이름은 추가할 수 있는 가장 유용한 단어이므로, '녹슨 오렌지색 변형, 평평하게 접힌 모습'이라고 작성하는 것이 검색과 옵션을 비교하는 청취자 모두에게 실질적인 도움이 됩니다.
제가 제품 사진을 짧은 소셜 게시물로 재활용할 때도 대체 텍스트는 함께 이동합니다. 저는 How I Turn One Long Article Into a Week of Short Posts에서 이 전체 파이프라인을 설명했으며, 대체 텍스트를 플랫폼 전반에 걸쳐 유지하는 것은 나중에 다시 작성할 필요가 없게 해줍니다.
차트는 '눈에 보이는 것을 설명하라'는 규칙을 깨뜨리며, 이것이 사람들이 가장 많이 실수하는 부분입니다.
시각 장애인 독자는 차트를 픽셀 단위로 읽지 않습니다. 그들은 흘깃 보고 핵심 내용을 파악합니다: 매출이 증가했고, 이 막대가 가장 높으며, 추세는 평탄하다. 따라서 대체 텍스트(alt text)는 축 레이블과 모든 데이터 포인트를 나열하는 것이 아니라, 바로 그 핵심 내용을 전달해야 합니다.
막대 차트에 대한 부적절한 alt: “x축이 월(January부터 June까지)로, y축이 판매량(0에서 500까지)으로 표시된 막대 차트.” 이것은 가구를 설명할 뿐, 이야기를 전하지 못합니다. 청취자는 여전히 이 차트가 무엇을 말하는지 알 수 없습니다.
좋은 alt: “1월에 120이었던 판매량이 6월에는 480까지 증가한 막대 차트.” 이제 그들은 한 문장으로 핵심 포인트를 파악합니다.
명확한 단일 메시지를 가진 차트의 경우, 메시지부터 시작하세요. “연초에 월별 매출이 거의 두 배로 증가했습니다.” 이것은 종종 어떤 숫자보다도 낫습니다. 왜냐하면 그것이 이 차트가 페이지에 존재하는 이유이기 때문입니다.
차트에 청취자가 필요로 할 만한 데이터가 실제로 포함되어 있는 경우, 저는 짧은 alt와 실제 대안을 제공합니다. 주요 수치가 담긴 캡션이나, 더 나아가 페이지의 실제 표에 있는 기본 숫자들입니다. 데이터 테이블은 스크린 리더가 셀 단위로 읽을 수 있으므로, 복잡한 데이터는 여기에 속하며 대체 텍스트에 쑤셔 넣으면 안 됩니다.
원형 차트(Pie charts): 가장 큰 조각과 그것이 대략 얼마나 지배적인지 이름을 언급합니다. “원형 차트로, 모바일 트래픽이 약 70%를 차지하고 데스크톱이 나머지를 차지합니다.” 아무도 여섯 개의 작은 조각을 모두 읽어 들을 필요가 없습니다.
꺾은선 그래프(Line charts): 방향과 모양입니다.
“4월경에 하락하는 등, 꾸준히 상승 추세인 꺾은선 그래프.” 이 하락은 언급할 가치가 있습니다. 왜냐하면 시각 장애인 독자가 즉시 알아차릴 것이기 때문입니다.
이러한 논리는 데이터 스크린샷에도 적용됩니다. 대시보드(dashboard)의 스크린샷을 게시하는 경우, alt 텍스트는
모든 이미지에 alt 속성을 작성한 다음, 채울지 비워둘지 결정하세요. 장식용 이미지는 alt=""를 사용합니다. 의미를 전달하는 모든 콘텐츠에는 사진이 실제로 말하고자 하는 바를 담은 짧은 문장(8~15단어)을 제공해야 합니다.
제품의 경우, 제품명과 이 사진이 추가하는 한 가지 세부 정보를 함께 언급하세요. 차트의 경우, 축 레이블 대신 핵심 결론을 제시하고 복잡한 데이터는 실제 표로 만드세요.
만약 이러한 과정을 전체 출판 환경에 반복적으로 적용하고 싶다면, Claude Blueprint부터 시작하세요. 이것이 제가 alt 텍스트 같은 작은 습관들이 빠르게 작업할 때 빠뜨리는 것을 방지하는 방법입니다.
가장 좋은 점은 이 모든 것이 반사적인 행동이 되면 추가적인 작업이 아니라는 것입니다. 이미지가 생생할 때 단어를 작성하면, 스크린 리더 사용자도 검색 엔진도 당신에게 감사하게 될 것입니다. 다음 업로드부터 시작하세요.
본 기사는 제휴 링크를 포함하고 있습니다. 이 링크를 통해 가입하시면, 추가 비용 없이 제가 소액의 커미션을 받을 수 있습니다. (광고)