강의 운영
강의 자료 이미지 대체텍스트 — 사진·버튼·도표를 다르게 설명하세요
이미지마다 같은 설명을 붙이지 마세요. 강의 웹 자료의 정보·장식·기능 이미지를 구분하고, 복잡한 도표는 짧은 대안과 본문 설명으로 연결하는 점검표입니다.
강의 자료의 이미지 대체텍스트는 사진에 보이는 모든 것을 나열하기보다 그 자리에서 전달할 정보나 기능을 설명해야 합니다. 정보 사진, 장식, 클릭하는 아이콘, 복잡한 도표는 목적이 다릅니다. 이 글은 강의 웹페이지에 넣는 이미지를 다루며 영상 자막이나 PDF 접근성 전체를 평가하는 안내는 아닙니다.
텍스트 대안은 이미지를 보지 않아도 필요한 의미나 기능을 파악하도록 제공하는 설명입니다. 복잡한 도표라면 짧은 설명만으로 끝내지 않고 읽을 수 있는 상세 설명과 연결해야 합니다.
같은 사진도 문맥에 따라 설명이 달라집니다
W3C 이미지 튜토리얼은 이미지가 놓인 문맥과 목적에 맞춰 텍스트 대안을 정하도록 안내합니다. 강의에서 기구의 부품을 식별하려고 넣은 사진과 분위기를 더하기 위한 사진은 같은 방식으로 설명할 필요가 없습니다. 원문 확인일은 2026년 10월 18일입니다.
먼저 ‘이 이미지가 없으면 수강생이 놓칠 정보는 무엇인가’를 적어 보세요. 단순히 파일 이름을 읽어 주거나 모든 사진에 ‘강의 이미지’라고 쓰면 정작 필요한 정보가 빠질 수 있습니다. 반대로 장식만을 위한 이미지는 빈 대체텍스트로 처리하는 방식을 검토합니다. HTML에서 빈 값과 속성 누락은 다르므로 편집 도구의 실제 출력도 확인해야 합니다.
아래는 실제 제품 화면의 설명이 아닌 편집팀의 작성 예시입니다.
| 이미지의 역할 | 작성 방향 | 확인할 질문 |
|---|---|---|
| 부품 위치를 알려주는 사진 | 구별에 필요한 위치와 부품 관계 설명 | 강의에서 찾으라는 대상을 알 수 있는가 |
| 장식용 배경 | 의미를 중복해서 읽지 않도록 빈 대안 검토 | 학습 정보나 조작 기능이 정말 없는가 |
| 자료를 여는 이미지 버튼 | 외형보다 실제 동작·목적지 설명 | ‘폴더 그림’ 대신 어떤 자료를 여는지 알 수 있는가 |
| 비교 그래프 | 핵심을 짧게 식별하고 상세 설명 연결 | 축·단위·관계를 본문에서 확인할 수 있는가 |
링크로 동작하는 그림은 겉모습만 설명하지 말고 이용자가 무엇을 할 수 있는지 확인하세요. 자료의 이름과 대상 파일을 맞추는 작업은 강의 자료 다운로드 안내와 연결할 수 있습니다.
복잡한 도표는 긴 설명을 읽을 경로까지 준비하세요
W3C의 복잡한 이미지 안내는 이미지를 식별하는 짧은 설명과 중요한 정보를 담은 긴 설명을 나누어 제공하는 방법을 제시합니다. 긴 설명에는 필요한 축·척도·값·관계·추세가 포함될 수 있습니다. 본문에 설명을 두거나 가까운 링크로 연결하는 방식을 자료 구조에 맞춰 선택하세요.
예를 들어 과정의 순서를 보여주는 흐름도라면 상자의 색만 나열하는 것보다 시작 조건, 분기 기준, 다음 단계가 중요합니다. 데이터 그래프라면 제목만 읽어서는 비교 결과를 알기 어렵습니다. 수치가 있는 설명은 원자료와 대조하고, 그래프에서 확인할 수 없는 원인까지 추측해 붙이지 마세요.
긴 설명을 이미지 옆 본문에 제공하면 시각적으로 도표를 읽기 어려운 수강생도 함께 이용할 수 있습니다. 같은 자료를 표로 제공한다면 제목·단위·항목의 대응이 유지되는지 확인하세요. ‘자세한 설명은 아래’라고 썼다면 실제로 그 설명을 찾을 수 있어야 합니다.
이 작업은 슬라이드의 글자·색·도표 가독성 점검과 별도입니다. 영상에서 글자가 잘 보이게 하는 것과 웹 자료의 의미를 텍스트로 제공하는 것을 각각 확인하는 편이 좋습니다.
편집본보다 실제 공개본에서 다시 확인하기
편집 화면에 설명을 입력했더라도 게시 과정에서 빠지거나 다른 이미지에 연결될 수 있습니다. 운영자가 사용할 점검 기록에는 자료명, 이미지 위치, 목적, 작성한 대안, 공개 후 확인 결과를 적어 보세요. 원본 사진을 바꿨을 때 이전 설명이 남아 있지 않은지도 살펴야 합니다.
화면낭독기로 읽는 순서와 긴 설명으로 이동하는 경로를 확인하고, 이미지 버튼이 있다면 플레이어와 메뉴의 키보드 점검처럼 실제 이용 경로를 따라가 보세요. 이미지 출력 확인만으로 전체 접근성 준수를 선언하지 않습니다.
- 이미지가 전달할 정보나 기능을 정했는가
- 주변 문맥과 대체텍스트가 맞는가
- 장식과 정보 이미지를 구분했는가
- 복잡한 도표의 상세 설명을 찾을 수 있는가
- 공개본에서 설명과 실제 이미지가 일치하는가
강의 자료의 설명은 영상 밖의 학습 경험에도 영향을 줍니다. 온라인 강의 운영 환경을 검토하고 있다면 배로에서 서비스 안내를 살펴보고, 자신의 자료 구성과 편집 도구에서 필요한 설명을 실제로 제공할 수 있는지 확인해 보세요.
자주 묻는 질문
대체텍스트에 검색 키워드를 많이 넣어도 되나요?
이미지의 정보나 기능을 전달하는 목적에 맞춰 작성하세요. 강의 내용과 관계없는 검색어를 나열하면 필요한 설명을 찾기 어려워집니다.
AI가 만든 설명을 그대로 써도 되나요?
운영자가 이미지와 주변 문맥을 대조해야 합니다. 보이지 않는 수치나 관계를 만들어내지 않았는지, 버튼의 실제 기능과 맞는지 확인하세요.
이 점검만 통과하면 전체 접근성이 보장되나요?
아닙니다. 여기서는 강의 웹 자료의 이미지 대안을 다룹니다. 키보드 조작·제목 구조·자막 등 다른 항목과 실제 이용 환경의 확인도 필요합니다.