명확하고 간결한 이미지 설명을 작성해 SEO를 개선하고 콘텐츠 접근성을 향상하세요.

대체 텍스트는 방문자들이 이미지에 더 쉽게 접근할 수 있도록 이미지에 추가하는 텍스트를 말합니다. 검색 엔진도 대체 텍스트를 사용해 이미지의 내용을 식별합니다. 따라서 대체 텍스트를 사용하면 사이트의 SEO를 향상할 수 있습니다. 일부 위치에서는 대체 텍스트를 수동으로 추가하지 않으면 이미지 파일 이름을 대체 텍스트로 사용합니다. 이미지 블록과 자동 레이아웃에서는 대체 텍스트를 수동으로 추가해야 합니다. 

대체 텍스트는 스크린 리더나 이미지가 비활성화된 브라우저에서도 유용합니다. 브라우저에 이미지를 표시할 수 없는 경우 대체 텍스트가 이미지 대신 표시될 수 있습니다. 대체 텍스트는 일반 텍스트처럼 페이지에 표시되지 않아도 스크린 리더가 읽을 수 있습니다. 대체 텍스트를 추가할 때는 이미지를 설명하는 짧고 읽기 쉬운 용어를 사용하세요. Squarespace가 정리한 다양한 팁을 참고해 이미지 접근성을 높일 수 있습니다.

이 가이드에서는 사이트 이미지에 대체 텍스트를 추가하는 방법과 대체 텍스트가 자동으로 포함된 이미지에 대해 살펴보겠습니다.

비디오 시청하기

대체 텍스트 모범 사례

대체 텍스트를 작성할 때는 스크린 리더를 사용하는 사람이나 브라우저에서 이미지를 비활성화한 사람들을 위해 텍스트를 작성하고 있다는 것을 명심해야 합니다. 대체 텍스트 작성 시 다음 사항을 참고하세요.

• 자세히 설명하고 유용한 정보를 포함하세요. 이미지를 볼 수 없는 사람에게 이미지를 어떻게 설명할 건가요?
• 텍스트는 짧게 작성하세요. 일반적으로 150~200자가 적당합니다.
• 검색 엔진 최적화를 위해 키워드를 텍스트에 적절히 포함하되 키워드를 과도하게 많이 사용하지는 마세요.
• 단어 사이에 하이픈을 사용하지 말고 실제 문장으로 작성하세요.
• '사진', '이미지' 등의 단어는 생략해도 됩니다. 예를 들어, 녹색 꽃병 사진 대신 녹색 꽃병으로 작성하세요.
• SEO 보고서 도구를 사용해 사이트에서 대체 텍스트가 누락된 이미지를 검사하세요. 

Squarespace AI로 대체 텍스트 만들기

Squarespace AI를 사용해 대체 텍스트를 생성하는 것은 버전 7.1에서만 가능합니다.

SEO 보고서 도구로 사이트를 스캔해 대체 텍스트가 없는 이미지를 찾고, 해당 이미지에 대한 제안을 검토하거나 편집할 수 있습니다.

이 도구는 일반 페이지와 컬렉션 페이지에 추가된 모든 이미지 블록, 갤러리 섹션, 자동 레이아웃 섹션에서 누락된 대체 텍스트를 스캔합니다. 컬렉션 아이템에 추가된 이미지는 스캔에 포함되지 않습니다. 

SEO 보고서 도구를 사용해 대체 텍스트를 생성하는 방법은 다음과 같습니다.

1. SEO/AI 최적화 패널을 엽니다.
2. SEO 완성도 점수 섹션에서 AI로 개선을 클릭합니다.
3. 그러면 SEO 보고서 도구가 사이트를 스캔해 대체 텍스트가 없는 영역을 표시합니다. 편집 또는 재생성을 클릭해 제안된 텍스트를 편집하거나, 저장 및 계속을 클릭해 제안된 텍스트를 저장하고 적용합니다.

이미지 파일 이름

이미지 블록과 자동 레이아웃을 제외하고는 다른 대체 텍스트가 추가되지 않았을 때 이미지의 파일 이름이 대체 텍스트로 사용됩니다. 이미지 파일 이름을 만들 때는 대체 텍스트 모범 사례를 적용하는 것을 권장합니다.

파일 이름을 변경하려면 애셋 라이브러리에서 이름을 업데이트하세요.

팁: 파일 이름에는 문자, 숫자, 밑줄, 하이픈만 사용하세요.

사이트 로고

사이트 로고의 대체 텍스트로는 사이트 제목이 사용됩니다.

이미지 블록

모든 이미지 블록 레이아웃에 최대 250자의 대체 텍스트를 추가할 수 있습니다. 이미지 블록에 대체 텍스트를 추가하지 않으면 스크린 리더 등의 보조 기술이 이미지를 읽을 수 없습니다. 이미지 블록에 대체 텍스트를 추가하는 방법은 사이트가 사용 중인 Squarespace 버전에 따라 다릅니다.

자동 레이아웃과 갤러리 섹션 이미지

자동 레이아웃과 갤러리 섹션은 버전 7.1에서만 지원됩니다.

자동 레이아웃과 갤러리 섹션에도 대체 텍스트를 추가할 수 있지만, 대체 텍스트를 추가하는 방법은 각각 다릅니다.

자동 레이아웃

요소 탭에 이미지 대체 텍스트 필드가 표시되지 않으면 이미지 표시 토글을 켜세요. 자동 레이아웃 섹션의 이미지에 대체 텍스트를 추가하는 방법은 다음과 같습니다.

1. 페이지 편집 도중 자동 레이아웃 섹션에 커서를 올리고 콘텐츠 편집을 클릭합니다.
2. 콘텐츠 탭을 클릭합니다.
3. 대체 텍스트를 추가하려는 이미지를 클릭합니다.
4. 이미지 대체 텍스트로 스크롤해 필드에 대체 텍스트를 입력합니다.
5. 뒤로를 클릭한 후 저장을 클릭합니다.

자동 레이아웃에 대체 텍스트를 추가하지 않으면 대체 텍스트가 표시되지 않습니다.

갤러리 섹션

갤러리 섹션은 주로 이미지를 보여줍니다. 갤러리 섹션 이미지에 설명을 추가하면 이것이 자동으로 대체 텍스트와 이미지의 캡션이 됩니다.

갤러리 블록 이미지

버전 7.1에서는 블로그 게시물, 제품 아이템, 개별 이벤트에만 갤러리 블록을 추가할 수 있습니다.

갤러리 블록의 이미지에 대체 텍스트를 추가하는 방법은 다음과 같습니다.

1. 갤러리 블록을 더블 클릭하거나 편집을 클릭합니다.
2. 편집하려는 이미지를 찾아 커서를 올리고 를 클릭합니다.
3. 이미지 제목 입력 필드에 대체 텍스트를 추가합니다. 이미지 제목을 추가하지 않으면 설명 필드에 입력된 텍스트가 대체 텍스트로 사용됩니다.
4. 저장을 클릭합니다.

블로그 게시물과 이벤트 대표 이미지

블로그 게시물과 이벤트의 제목은 게시물과 이벤트의 대체 텍스트로 사용됩니다. 이 설정은 이벤트 페이지의 목록 레이아웃과 캘린더 레이아웃에서 모두 동일하게 적용됩니다.

페이지 대표 이미지

페이지 대표 이미지의 경우 파일 이름이 대체 텍스트로 사용됩니다. 대표 이미지를 업로드하기 전에 원하는 대로 이름을 지정하도록 하세요.

비디오 블록 섬네일 이미지

URL을 사용해 페이지에 비디오 블록을 추가하면 블록이 자동으로 섬네일 이미지를 생성하고 오버레이로 표시합니다. 맞춤형 섬네일을 추가하면 파일 이름이 정적 URL에 표시되지만 대체 텍스트로는 표시되지 않습니다. 비디오 블록 섬네일 이미지에는 대체 텍스트를 추가할 수 없습니다.

제품 이미지

모든 제품 이미지에 최대 200자의 대체 텍스트를 추가할 수 있습니다. 대체 텍스트를 추가하지 않으면 제품 이름이 대체 텍스트로 사용됩니다. 대체 텍스트를 추가하는 방법은 다음과 같습니다.

1. 스토어 페이지에서 제품에 커서를 올리고 더블 클릭합니다.
2. 제품 이미지에 커서를 올리고 점 세 개를 클릭한 후 메타데이터 편집을 클릭합니다.
3. 대체 텍스트 필드에 텍스트를 추가합니다.
4. 적용을 클릭합니다.

커버 페이지 이미지(버전 7.0)

커버 페이지 이미지에 대체 텍스트를 추가하는 방법은 다음과 같습니다.

1. 커버 페이지 메뉴에서 미디어 패널을 클릭합니다.
2. 이미지에 커서를 올린 후 를 클릭합니다.
3. 대체 텍스트 입력 필드에 대체 텍스트를 입력합니다.
4. 저장을 클릭합니다.

갤러리 페이지 이미지(버전 7.0)

갤러리 페이지 내 이미지에 대체 텍스트를 추가하는 방법은 다음과 같습니다.

1. 페이지 패널에서 갤러리 페이지를 클릭합니다.
2. 편집하려는 이미지를 찾아 커서를 올리고 를 클릭합니다.
3. 대체 텍스트 필드에 대체 텍스트를 입력합니다. 이미지 제목을 추가하지 않으면 설명 필드에 입력된 텍스트가 대체 텍스트로 사용됩니다.
4. 저장을 클릭합니다.

이메일 캠페인 이미지, 블로그, 제품 섹션

Squarespace 이메일 캠페인에서 캠페인에 추가한 이미지, 블로그 게시물, 제품에 대체 텍스트를 추가할 수 있습니다.

1. 캠페인 초안에서 이미지 섹션이나 블로그 섹션, 제품 섹션을 클릭합니다.
2. 오른쪽 패널에서 대체 텍스트를 추가하려는 이미지나 블로그 게시물, 제품을 클릭합니다.
3. 이미지 대체 텍스트에 대체 텍스트를 입력합니다. 대체 텍스트는 자동으로 저장됩니다.

이러한 섹션의 경우, 대체 텍스트를 추가하지 않으면 대체 텍스트가 표시되지 않습니다. 캠페인 머리말에 삽입한 이미지와 로고에는 대체 텍스트를 추가할 수 없습니다.

섹션 배경 이미지

배경 이미지에 대체 텍스트를 추가할 수 없습니다. 추상적인 배경 이미지나 콘텐츠를 구분하는 그래픽처럼 순수하게 장식적 목적으로 사용하는 이미지에는 설명이 필요하지 않습니다. 더 자세한 내용은 웹 콘텐츠 접근성 가이드라인에서 확인할 수 있습니다.

그래도 여전히 배경 이미지에 대체 텍스트를 추가하고 싶다면 차선책으로 이미지 블록을 섹션 배경으로 사용하고, 블록을 채운 후 해당 블록에 대체 텍스트를 추가하는 방법을 사용할 수 있습니다.

사용자 지정 코드를 추가해 배경 이미지에 대체 텍스트를 추가하는 것도 가능합니다. 자세한 내용은 Squarespace Forum의 이 게시물을 참고하세요. 사용자 지정 코드 수정은 Squarespace 지원 범위에 포함되지 않습니다. 이에 따라 코드 기반 솔루션 설정이나 문제 해결은 Squarespace에서 도와드릴 수 없습니다.

다음 단계

• 검색 엔진에서 사이트 가시성 높이기에서 SEO에 관한 더 다양한 팁을 살펴보세요.
• Squarespace 사이트의 접근성 높이기에서 사이트의 접근성을 높이는 방법을 확인하세요.

팁: TinyIMG 확장 프로그램을 연결해 이미지 크기, 파일 이름, 대체 텍스트가 검색 엔진과 방문자에게 최적화되도록 하세요. TinyIMG는 이미지 검색 엔진 최적화에 영향을 미치는 문제를 식별하는 SEO 감사를 지원합니다. Squarespace는 Squarespace Extensions가 원활하게 작동하도록 하기 위해 서드파티(타사) 서비스와 협력하고 있지만, 확장 프로그램은 지원 범위에 포함되지 않습니다. 확장 프로그램 연결 또는 연결 해제와 관련된 지원은 Squarespace에 요청할 수 있습니다. 이외의 모든 질문은 확장 프로그램 제공업체에 직접 문의하세요.