티스토리 뷰
목차
블로그를 운영하다 보면 이미지 업로드 시 대체텍스트, 제목텍스트, 전환설명 등의 여러 입력창이 나와 헷갈릴 때가 많습니다.
특히 요즘 많이 사용하는 블로그스팟과 워드프레스에서는 입력창이 기본으로 제공되어 당황스러울 수 있죠.
이 세 가지 각각의 의미와 작성법을 정확히 알아야 SEO와 접근성 모두에서 효과를 볼 수 있습니다.
오늘은 이 이미지 텍스트들의 차이점과 최적 작성법을 쉽고 간단하게 설명해 드리겠습니다! 💡
블로그스팟으로 블로그를 운영하고 싶다면 아래 버튼에 접속하셔서 진행하시면 됩니다.
대체텍스트 (Alt Text)
대체텍스트란?
대체텍스트는 이미지를 글로 대신 보여주는 설명으로, 이미지를 볼 수 없을 때 해당 이미지에 대한 정보를 쉽게 알 수 있도록 도와줍니다.
시각 장애인의 경우 이미지를 직접 볼 수 없기 때문에, 스크린리더가 이 대체 텍스트를 읽어 이미지에 대한 정보를 쉽게 전달합니다.
또한 인터넷 연결이 불안정하거나 이미지가 로드되지 않는 상황에서도 대체텍스트가 중요한 정보를 텍스트로 전달하는 역할을 합니다. (인터넷이 느리거나 이미지가 깨져서 나오지 않을 때, 해당 자리에 대체텍스트가 대신 나타납니다.)
대체텍스트 최적화 방법
- 이미지에 무엇이, 어떤 모습으로 있는지 핵심을 짧고 정확하게 적습니다.
- 이미지의 내용을 객관적이고 구체적으로 명확하게 묘사
- 불필요한 단어는 배제하기
- '사진', '그림', '이미지' 등의 단어는 스크린리더가 자동으로 인식하므로 넣지 않습니다.
- 감정이나 주관적 해석은 피하고 사실 중심으로 작성
- SEO에 중요한 핵심 키워드를 자연스럽게 포함하되, 키워드 남용은 금물
- 페이지 주제와 연관된 키워드를 부자연스럽지 않게 잘 포함하면 SEO(검색엔진최적화)에도 도움이 됩니다.
단 키워드 남발은 피합니다.
- 페이지 주제와 연관된 키워드를 부자연스럽지 않게 잘 포함하면 SEO(검색엔진최적화)에도 도움이 됩니다.
- 약 50~100자 내외로 간결하게 작성하는 것이 좋음
대체텍스트 작성 예시
1. 왼쪽 이미지 대체텍스트: '빨간 장미꽃 클로즈업'
2. 가운데 이미지 대체텍스트: '흰 컵에 담긴 진한 커피와 프림, 커피콩이 흩어져 있고, 티스푼에 올려진 각설탕이 커피 위에 놓여 있는 모습'
3. 오른쪽 이미지 대체텍스트: '나무 벤치 위에 앉아 있는 흰색 털의 작은 강아지'
제목텍스트 (Title Text)
제목텍스트란?
제목텍스트는 이미지에 마우스를 올렸을 때 나타나는 짧은 설명 또는 추가 정보를 제공하는 텍스트입니다.
시각적으로는 화면에 표시되지 않지만, 사용자가 이미지를 마우스오버하면 작은 말풍선 형태로 보입니다.
제목텍스트(title 속성)는 반드시 이미지 자체의 내용 설명을 위한 것만은 아닙니다. 이미지에 대한 보조 설명, 본문 내용의 요약, 저작권 정보, 출처, 기능 안내 등 부가 정보를 제공하는 용도로 작성해도 무방합니다.
실제로 웹 접근성이나 UI 가이드에서는 제목텍스트를 이미지 보조 설명뿐 아니라 출처, 사용 방법, 주의문구 등 추가 정보 안내에도 활용할 수 있다고 안내합니다.
단, 중요한 정보나 이미지 자체의 본질적인 설명은 alt(대체텍스트) 속성에 반드시 포함되어야 하며, title 속성은 반드시 읽히는 정보가 아니기 때문에 핵심 정보 용도보다는 부가적 안내에 적합합니다.
시각장애인이나 스크린리더 사용자는 보통 제목텍스트보다 대체텍스트를 우선적으로 듣지만, 일부 스크린리더나 브라우저 환경에서는 제목텍스트도 함께 제공될 수 있습니다.
또한, 일반 사용자가 이미지를 마우스로 가리킬 때 즉각적으로 추가 정보를 얻는 데 유용합니다.
제목텍스트 최적화 방법
- 이미지를 보완하는 간결하고 이해하기 쉬운 설명 작성 또는 본문 내용과 관련된 추가 정보나 맥락을 제공
- 중복된 정보를 피하고, 새로운 맥락이나 안내 사항 위주로 작성
- 저작권, 사진 출처, 기능 안내 등 필요한 추가 정보를 깔끔하게 노출 너무 길지 않게 짧고 명확하게 작성 (일반적으로 30~60자 내외가 적당)
- SEO 목적의 불필요한 키워드 삽입 지양
제목텍스트 작성 예시
1. 왼쪽 그래프 이미지 제목 텍스트: '2024년 상반기 월별 매출 증가 추이'
※ 대체 텍스트: '2024년 1~6월까지 월별 매출 현황을 보여주는 막대그래프'
2. 가운데 인물 이미지 제목 텍스트: '촬영: 2025년 8월 홍길동'
※ 대체 텍스트: '정장 차림으로 앉아있는 인물 초상 사진'
3. 오른쪽 제품 사진 제목 텍스트: '실제 상품은 촬영 환경에 따라 색상 차이가 있을 수 있습니다.'
※ 대체 텍스트: 검은색 휴대폰 뒷면과 흰색 무선 이어폰'
전환설명 (Caption)
전환설명이란?
전환설명(Caption)은 이미지, 표, 그래프 등 시각 자료 아래에 위치하여, 그림이 담고 있는 의미나 맥락을 보완적으로 전달해 주는 짧은 설명문입니다.
전환설명은 모든 사용자에게 직접적으로 표시되며, 이미지의 내용에 대한 해설, 출처 안내, 인물·장소 정보, 데이터 해석 등 중요한 배경 또는 핵심 메시지를 효과적으로 전달합니다.
전환설명 최적화 방법
- 이미지를 본문 흐름에 맞춰 요약하거나, 핵심 메시지·보충 설명·출처·해설 등을 포함해 1~2 문장 내외로 간결하게 작성합니다.
- 대체텍스트(alt)와 중복되지 않도록, 이미지만으로는 알기 어려운 맥락, 사실관계, 데이터 해석 등 추가 정보를 명확히 담아야 합니다.
- 인물, 장소, 시기, 데이터 변화 등 콘텐츠의 본질적 의미를 강조해 설명하면 좋습니다.
- 표나 그래프의 경우, 주요 수치·경향 등 결과 해설을 캡션에 포함하면 정보 전달력도 높아집니다.
- SEO에도 도움이 되는 본문 텍스트로 인식되므로 키워드 포함을 권장합니다.
- 촬영장소, 출처 등의 정보도 포함 가능합니다.
전환설명 작성예시
전환설명과 대체텍스트는 비슷하게 보일 수 있지만 실제로는 역할과 목적이 다릅니다.
둘 다 이미지를 설명하지만, 대체텍스트는 화면상에는 보이지 않는 짧은 설명, 전환설명은 화면에 표시되어 부연해설과 맥락 제공이 주목적입니다.
1. 왼쪽 이미지 전환설명: '상큼한 블루베리 소스가 듬뿍 올라간 부드러운 치즈케이크, 디저트로 인기 많은 메뉴'
※ 대체텍스트: '흰색 접시에 담겨 있는 블루베리와 블루베리 소스를 얹은 치즈케이크 한 조각'
2. 가운데 이미지 전환설명: '조용한 밤, 가로등 불빛이 나무 사이로 산책길을 아늑하게 비추고 있는 공원의 풍경'
※ 대체텍스트: '가로등 불빛이 비추는 밤 산책로와 나무, 벤치'
3. 오른쪽 이미지 전환설명: '맑은 날씨와 파란 하늘이 펼쳐진 파리, 우뚝 솟은 에펠탑과 아름다운 도시 풍경'
※ 대체텍스트: '파란 하늘 아래 우뚝 솟은 에펠탑과 주변 도시 풍경'
모두 적용 예) 제주도 해변 사진 예시
- 대체텍스트: '푸른 바다와 하얀 모래사장, 야자수가 있는 제주도 해변 풍경'
- 제목텍스트: '제주도 숨은 명소 해변에서 찍은 인생샷'
- 전환설명: '제주 여행 필수 코스, SNS에서 화제가 된 그 해변 🌊📸'
[한눈에 보는 비교표]
| 구분 | 대체텍스트 (Alt Text) | 제목텍스트 (Title Text) | 전환설명 (Caption) |
| 목적 | 이미지 내용을 대신 설명 | 이미지에 마우스 오버 시 정보 제공 | 이미지 아래에 설명글로 항상 표시 |
| 대상 | 시각장애인, 검색엔진 | 데스크톱 사용자 | 모든 독자 |
| 노출 위치 | 이미지 대체, 스크린리더 | 마우스 오버 툴팁 | 이미지 바로 아래 |
| 작성법 | 객관적, 구체적, 키워드 포함 | 본문 연관, 호기심 유발 | 친근, 맥락설명, SEO 키워드 |
이상으로 블로그스팟 등 이미지 업로드 시 작성하는 대체텍스트, 제목텍스트, 전환설명에 대해 차이점과 작성방법을 자세히 알아보았습니다.
이미지 텍스트는 각각의 목적과 역할이 다르기에, 혼용하지 않고 구분해서 작성하는 것이 중요합니다. 꼼꼼히 작성하면 SEO 향상과 독자 접근성 모두에 긍정적인 효과가 있습니다.
처음엔 번거로울 수 있지만, 꾸준한 습관으로 블로그 품질을 한 단계 성장하실 수 있기를 바랍니다.