Alt Text(대체 텍스트)의 중요성을 인지했다면, 이제 실제로 웹사이트에 어떻게 삽입해야 하는지 알아야 합니다. Alt Text는 단순히 텍스트를 입력하는 것을 넘어, 웹사이트의 접근성(Accessibility)을 높이고 검색엔진 최적화(SEO)를 달성하기 위한 필수적인 기술 요소입니다.
Alt Text를 삽입하는 방법은 웹사이트가 어떤 방식으로 구축되었는지(HTML 직접 코딩, 워드프레스, 카페24, 아임웹 등 CMS 사용 여부)에 따라 달라집니다. 실무자가 가장 자주 접하는 환경을 중심으로 구체적인 삽입 방법을 안내해 드립니다.
1. HTML을 직접 편집할 경우 (개발자 또는 직접 코딩)
웹페이지를 HTML로 직접 구성한다면, <img> 태그 내에 alt 속성을 추가하여 대체 텍스트를 삽입할 수 있습니다.
기본 HTML 코드:
<img src="이미지경로.jpg" alt="여기에 전략적인 대체 텍스트를 입력합니다.">
예시:
<img src="crm-dashboard-screenshot.png" alt="중소기업 영업팀 실적을 실시간 분석하는 CRM 대시보드">
2. 주요 CMS(Contents Management System)를 사용할 경우
대부분의 웹사이트 구축 솔루션이나 CMS는 Alt Text를 쉽게 입력할 수 있는 기능을 이미지 업로드 과정에 포함하고 있습니다.
① 워드프레스 (WordPress)
워드프레스에서는 이미지를 업로드할 때 미디어 라이브러리에서 Alt Text를 입력할 수 있습니다.
미디어 라이브러리: 이미지를 업로드하거나 기존 이미지를 선택합니다.
첨부 파일 세부 정보: 우측 사이드바에 나타나는 "대체 텍스트(Alt Text)" 입력란에 전략적으로 작성된 문구를 입력합니다.
구텐베르크 편집기: 블록 편집기에서 이미지를 추가한 후, 이미지 블록 설정창에서도 대체 텍스트를 편집할 수 있습니다.
② 쇼핑몰 솔루션 (카페24, 아임웹 등)
국내 쇼핑몰 솔루션은 '상품 상세 페이지'나 '게시판'에 이미지를 삽입할 때 Alt Text를 지정하는 기능을 제공합니다.
상품 관리 페이지: 상품 등록/수정 시, '상품 이미지' 업로드 항목을 확인합니다.
Alt Text 입력 칸: 이미지를 업로드한 후, 해당 이미지 옆이나 하단에 있는 '대체 텍스트' 또는 'SEO 대체 문구' 입력란에 작성합니다.
아임웹 에디터: 이미지를 삽입한 후, 이미지 설정 메뉴에서 "이미지 대체 텍스트 (Alt Text)" 항목에 입력합니다.
③ 블로그 플랫폼 (네이버 블로그, 브런치 등)
콘텐츠 마케팅을 위해 블로그를 운영할 경우에도 Alt Text 삽입은 필수입니다.
이미지 첨부 후: 이미지를 본문에 삽입합니다.
이미지 설정/편집: 삽입된 이미지를 클릭하거나 마우스 오른쪽 버튼을 눌러 '이미지 속성' 또는 '설정' 메뉴를 찾습니다.
대체 텍스트 입력: 해당 메뉴 내에 Alt Text를 입력하는 공간이 있습니다. (네이버 블로그의 경우, 이미지 편집 모드에서 '대체 텍스트'를 지원합니다.)
💡 실무자를 위한 즉시 적용 체크리스트
| 항목 | 실무 적용 팁 |
| 길이 제한 | 50자 이내(공백 포함)를 목표로 작성합니다. |
| 키워드 배치 | 핵심 키워드(예: 'CRM', '실시간 분석')는 문구의 앞쪽에 배치합니다. |
| 맥락 부여 | 단순 묘사 대신 타겟 고객, 문제 해결 가치, 성과를 포함합니다. |
| 모든 이미지 | 제품 이미지, 스크린샷, 인포그래픽 등 모든 의미 있는 이미지에 Alt Text를 삽입합니다. |
| AI 활용 | AI 프롬프트를 사용하여 1차 초안을 만든 후, 자연스러운지 소리 내어 확인하며 수정합니다. |
남학현 기자 info@dowaseum.org
[저작권자 ⓒ디지털트렌드코리아 무단 전재-재배포 금지]
Alt Text(대체 텍스트)의 중요성을 인지했다면, 이제 실제로 웹사이트에 어떻게 삽입해야 하는지 알아야 합니다. Alt Text는 단순히 텍스트를 입력하는 것을 넘어, 웹사이트의 접근성(Accessibility)을 높이고 검색엔진 최적화(SEO)를 달성하기 위한 필수적인 기술 요소입니다.
Alt Text를 삽입하는 방법은 웹사이트가 어떤 방식으로 구축되었는지(HTML 직접 코딩, 워드프레스, 카페24, 아임웹 등 CMS 사용 여부)에 따라 달라집니다. 실무자가 가장 자주 접하는 환경을 중심으로 구체적인 삽입 방법을 안내해 드립니다.
1. HTML을 직접 편집할 경우 (개발자 또는 직접 코딩)
웹페이지를 HTML로 직접 구성한다면, <img> 태그 내에 alt 속성을 추가하여 대체 텍스트를 삽입할 수 있습니다.
기본 HTML 코드:
<img src="이미지경로.jpg" alt="여기에 전략적인 대체 텍스트를 입력합니다.">예시:
<img src="crm-dashboard-screenshot.png" alt="중소기업 영업팀 실적을 실시간 분석하는 CRM 대시보드">주의사항: alt=""처럼 Alt Text를 비워두지 않도록 주의해야 합니다. 의미 없는 장식용 이미지라면 비워두어도 되지만, 제품이나 서비스 가치를 담는 중요한 이미지라면 반드시 채워야 합니다.
2. 주요 CMS(Contents Management System)를 사용할 경우
대부분의 웹사이트 구축 솔루션이나 CMS는 Alt Text를 쉽게 입력할 수 있는 기능을 이미지 업로드 과정에 포함하고 있습니다.
① 워드프레스 (WordPress)
워드프레스에서는 이미지를 업로드할 때 미디어 라이브러리에서 Alt Text를 입력할 수 있습니다.
미디어 라이브러리: 이미지를 업로드하거나 기존 이미지를 선택합니다.
첨부 파일 세부 정보: 우측 사이드바에 나타나는 "대체 텍스트(Alt Text)" 입력란에 전략적으로 작성된 문구를 입력합니다.
구텐베르크 편집기: 블록 편집기에서 이미지를 추가한 후, 이미지 블록 설정창에서도 대체 텍스트를 편집할 수 있습니다.
② 쇼핑몰 솔루션 (카페24, 아임웹 등)
국내 쇼핑몰 솔루션은 '상품 상세 페이지'나 '게시판'에 이미지를 삽입할 때 Alt Text를 지정하는 기능을 제공합니다.
상품 관리 페이지: 상품 등록/수정 시, '상품 이미지' 업로드 항목을 확인합니다.
Alt Text 입력 칸: 이미지를 업로드한 후, 해당 이미지 옆이나 하단에 있는 '대체 텍스트' 또는 'SEO 대체 문구' 입력란에 작성합니다.
아임웹 에디터: 이미지를 삽입한 후, 이미지 설정 메뉴에서 "이미지 대체 텍스트 (Alt Text)" 항목에 입력합니다.
③ 블로그 플랫폼 (네이버 블로그, 브런치 등)
콘텐츠 마케팅을 위해 블로그를 운영할 경우에도 Alt Text 삽입은 필수입니다.
이미지 첨부 후: 이미지를 본문에 삽입합니다.
이미지 설정/편집: 삽입된 이미지를 클릭하거나 마우스 오른쪽 버튼을 눌러 '이미지 속성' 또는 '설정' 메뉴를 찾습니다.
대체 텍스트 입력: 해당 메뉴 내에 Alt Text를 입력하는 공간이 있습니다. (네이버 블로그의 경우, 이미지 편집 모드에서 '대체 텍스트'를 지원합니다.)
💡 실무자를 위한 즉시 적용 체크리스트
남학현 기자 info@dowaseum.org
[저작권자 ⓒ디지털트렌드코리아 무단 전재-재배포 금지]