웹 페이지에 이미지 넣기: <img> 태그의 alt 속성이 SEO와 접근성에 미치는 영향

 

웹사이트를 제작할 때 이미지는 정보를 전달하고 시각적 즐거움을 주는 핵심 요소입니다. 하지만 단순히 <img> 태그를 사용하여 이미지를 화면에 띄우는 것만으로는 부족합니다. 진정으로 '잘 만든' 웹 페이지라면 반드시 alt (Alternative Text, 대체 텍스트) 속성을 제대로 활용해야 합니다.

오늘은 alt 속성이 왜 중요한지, 그리고 어떻게 작성해야 SEO(검색 엔진 최적화)와 웹 접근성을 동시에 개선할 수 있는지 풍부한 예제와 함께 알아보겠습니다.

1. alt 속성이란 무엇인가요?

alt 속성은 이미지가 어떤 이유로든 사용자에게 표시되지 않을 때 대신 나타나는 텍스트를 정의합니다.

<img src="mountain.jpg" alt="눈 덮인 한라산 정상의 풍경">

이 짧은 문장은 다음과 같은 두 가지 핵심적인 역할을 합니다.

1. 웹 접근성 (Accessibility): 시각 장애가 있는 사용자가 스크린 리더(Screen Reader)를 통해 웹을 이용할 때, 이미지를 소리로 설명해 줍니다.
2. SEO (검색 엔진 최적화): 검색 엔진 로봇은 이미지를 직접 '볼' 수 없습니다. 대신 alt 텍스트를 읽어 해당 이미지가 어떤 맥락인지 파악하고 이미지 검색 결과에 반영합니다.

2. SEO에 미치는 영향: "구글은 글자로 이미지를 읽는다"

검색 엔진은 페이지의 맥락을 파악할 때 텍스트 데이터에 의존합니다. alt 속성이 비어 있다면 검색 엔진은 해당 이미지가 유용한 정보인지 스팸인지 알 방법이 없습니다.

❌ 나쁜 예 (SEO 점수 하락)

<img src="nike-shoes-01.jpg" alt="이미지1">
<!-- 또는 아예 속성이 없는 경우 -->
<img src="nike-shoes-01.jpg">

• 문제점: '이미지1'이라는 정보는 검색 엔진에게 아무런 힌트도 주지 않습니다. 사용자가 '나이키 운동화'를 검색했을 때 이 이미지는 노출될 기회를 잃게 됩니다.

✅ 좋은 예 (SEO 최적화)

<img src="nike-air-max.jpg" alt="나이키 에어맥스 97 올화이트 남성용 운동화">

• 효과: 구체적인 키워드가 포함되어 있어 '나이키 에어맥스', '화이트 운동화' 등의 검색어에 노출될 확률이 높아집니다.

3. 웹 접근성에 미치는 영향: "모두를 위한 웹"

스크린 리더는 이미지를 만나면 alt 값을 읽어줍니다. 만약 이 값이 적절하지 않다면 시각 장애 사용자는 페이지의 흐름을 놓치게 됩니다.

예제 1: 정보를 전달하는 이미지

정보성 이미지는 이미지의 핵심 내용을 간결하게 전달해야 합니다.

• 상황: 뉴스 기사에서 날씨 지도를 보여줄 때
• 나쁜 예: alt="날씨"
• 좋은 예: alt="오늘 전국 기온 분포도: 서울 25도, 부산 28도로 전국이 대체로 맑음"

예제 2: 버튼이나 링크 역할을 하는 이미지

이미지가 클릭 가능한 요소라면 '무엇인지'가 아니라 '어디로 가는지'를 설명해야 합니다.

• 상황: 화살표 모양의 다음 페이지 버튼
• 나쁜 예: alt="오른쪽 화살표"
• 좋은 예: alt="다음 포스트 읽기"

4. 장식용 이미지 처리법: 빈 alt 속성의 중요성

모든 이미지에 구구절절 설명이 필요한 것은 아닙니다. 디자인을 위해 들어간 배경 패턴이나 단순한 구분선 같은 장식용 이미지는 스크린 리더가 무시하도록 설정해야 합니다.

🛠️ 방법: alt="" (빈 값 설정)

<!-- 페이지 상단의 디자인용 도트 문양 -->
<img src="pattern.png" alt="">

• 주의: alt 속성 자체를 생략하면 스크린 리더가 파일명(pattern.png)을 그대로 읽어주는 경우가 발생하여 사용자에게 혼란을 줍니다. 반드시 alt=""라고 명시하여 "이 이미지는 의미가 없으니 건너뛰세요"라고 알려줘야 합니다.

5. 실전! 상황별 alt 텍스트 작성 예시

1) 로고 이미지

• 나쁜 예: alt="로고"
• 좋은 예: alt="애플 코리아 공식 홈페이지" (로고가 홈으로 가는 링크인 경우)

2) 인포그래픽/차트

• 나쁜 예: alt="차트 이미지"
• 좋은 예: alt="2023년 스마트폰 시장 점유율 차트: A사 40%, B사 30%, 기타 30%"

3) 감성적인 풍경 사진

• 나쁜 예: alt="바다"
• 좋은 예: alt="석양이 지는 제주도 협재 해변의 평화로운 풍경"

💡 요약 및 체크리스트

1. 구체적으로 작성하세요: 이미지를 보지 못하는 사람에게 설명한다고 생각하세요.
2. 키워드를 남발하지 마세요: SEO를 위해 '신발, 운동화, 추천, 신발장' 식의 나열은 오히려 스팸으로 분류될 수 있습니다.
3. "이미지입니다"라고 하지 마세요: 스크린 리더가 이미 "이미지"라고 알려주므로 중복 표현입니다.
4. 장식용은 비워두세요: alt=""를 잊지 마세요.

잘 작성된 alt 속성 하나가 여러분의 블로그를 더 많은 사람에게 노출시키고, 누구나 이용할 수 있는 따뜻한 웹 공간으로 만듭니다. 오늘 올린 포스팅의 이미지들을 다시 한번 점검해 보는 건 어떨까요?