접근성을 위해 AJAX를 사용한 사이트 설계

많은 웹사이트 소유자가 AJAX를 사용하여 사이트의 사용자 환경을 개선할 수 있는 이점을 발견하고서 강력한 웹 애플리케이션으로 기능하는 동적 페이지를 만들고 있습니다. 그러나 AJAX는 Flash와 마찬가지로 기술을 제대로 구현하지 않으면 검색엔진이 색인을 생성하는 데 지장을 줄 수 있습니다. AJAX와 관련하여 주의해야 할 점은 두 가지입니다. 하나는 검색엔진 봇이 사용자의 콘텐츠를 볼 수 있도록 해야 한다는 것이고 다른 하나는 검색엔진 봇이 사용자의 탐색을 확인 및 추적할 수 있어야 한다는 것입니다.

Googlebot은 HTML 링크 구조를 이해하는 데에는 탁월한 반면 탐색에 자바스크립트를 사용하는 사이트에 대해서는 다소 어려움을 겪고 있습니다. Google은 자바스크립트를 이해하는 데 문제가 없도록 최선을 다하고 있지만 Google 및 다른 검색엔진에서 크롤링하기 쉬운 사이트를 만들려면 콘텐츠로 연결되는 HTML 링크를 제공하는 것이 가장 좋습니다.

누구나 액세스할 수 있는 사이트 만들기

웹사이트 소유자는 검색엔진뿐 아니라 사용자를 고려한 페이지를 만드는 것이 좋습니다. AJAX 사이트를 설계할 때는 스크린 리더나 휴대기기 사용자와 같이 자바스크립트가 지원되지 않는 브라우저 사용자를 포함하여 모든 사용자의 요구사항을 고려해야 합니다. 사이트의 액세스 가능성을 테스트하는 가장 쉬운 방법은 브라우저에서 자바스크립트 기능을 해제하고 사이트를 미리보기하거나 Lynx와 같은 텍스트 전용 브라우저를 사용하는 것입니다. 또한 사이트를 텍스트 전용으로 보면 이미지 또는 Flash에 삽입된 텍스트처럼 Googlebot이 보기 힘든 여타 콘텐츠도 찾을 수 있습니다.

콘텐츠에 별도로 연결되는 링크인 iFrame 방지

iFrame을 통해 표시되는 콘텐츠는 색인이 생성되지 않으며 Google 검색결과에 나타나지 않을 수 있습니다. 따라서 Google에서는 콘텐츠를 표시할 때 iFrame을 사용하지 않을 것을 권장합니다. iFrame을 포함하는 경우 콘텐츠로 연결되는 텍스트 기반 링크를 추가로 제공하여 Googlebot이 이 콘텐츠를 크롤링하고 색인을 생성할 수 있도록 합니다.

점진적으로 개선해 나가며 개발하기

사이트를 처음부터 만들기 시작하는 경우 HTML만 사용하여 사이트 구조 및 탐색을 만드는 것도 좋은 방법입니다. 사이트의 페이지, 링크 및 콘텐츠 구조가 잡히면 AJAX를 이용하여 사이트의 디자인과 인터페이스를 보다 재미있게 변경할 수 있습니다. 그러면 Googlebot이 HTML로 사이트를 볼 수 있는 동시에 최신 브라우저 사용자는 AJAX 콘텐츠를 즐길 수 있습니다.

물론 AJAX 기능을 사용하려면 자바스크립트가 필요한 링크가 있어야 할 것입니다. 웹 개발자 Jeremy Keith는 이러한 기법을 Hijax라고 명명하였으며, 이는 AJAX와 정적 링크를 함께 사용할 수 있는 기법입니다.

링크를 만들 때에는 정적 링크를 제공하면서도 자바스크립트 기능을 호출할 수 있도록 설정해야 합니다. 그러면 자바스크립트를 사용하지 않는 사람들은 스크립트를 무시하고 링크를 따라갈 수 있으며 자바스크립트 사용자에게는 AJAX 기능을 제공할 수 있습니다. 예:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

정적 링크의 URL에는 조각(#foo=32) 대신 AJAX 코드에 사용되는 매개변수(?foo=32)가 있습니다. 이것이 중요한 까닭은 검색엔진에서 URL 매개변수는 이해하지만 종종 조각은 무시하기 때문입니다. 이제 정적 링크도 제공할 수 있으므로 사용자와 검색엔진 모두 공유하거나 참조하고자 하는 정확한 콘텐츠로 연결될 수 있습니다.

Google은 크롤링 성능을 개선하기 위해 지속적으로 노력하고 있으므로 당분간은 HTML 링크를 사용하여 Google이 사용자의 사이트를 보다 잘 파악할 수 있도록 도와주시기 바랍니다. 이는 Google만이 아닌 다른 검색엔진이나 휴대기기 및 사용자에게도 해당되는 사항입니다.

가이드라인 따르기

여기에 설명된 도움말 외에도 Google 웹마스터 가이드라인을 확인하여 Google 및 사용자에게 편리한 사이트를 만드는 방법에 관해 자세히 알아보세요. 가이드라인에는 부적절한 자바스크립트 리디렉션과 같은 피해야 할 사례도 나와 있습니다. 사용자의 사용 환경에 따라 다른 경험을 제공하면서도 콘텐츠는 동일하게 유지해야 한다는 점은 보편적으로 따라야 할 규칙입니다. 예를 들어 Wysz's Hamster Farm에 대한 페이지를 만들었다고 가정합니다. 페이지 상단에는 ‘Wysz's Hamster Farm’이라는 제목이 있고 그 아래에는 AJAX를 사용하여 작성한 최근에 들어온 햄스터의 슬라이드쇼가 나타납니다. 이때, 해당 페이지에서 자바스크립트를 해제해도 보충 텍스트로 사용자에게 동일한 콘텐츠를 제공할 수 있어야 합니다.

Wysz's Hamster Farm – 햄스터, 최고의 햄스터, 저렴한 햄스터, 무료 햄스터, 애완동물, 농장, 햄스터 농장, 춤추는 햄스터, 설치 동물, 최고의 햄스터 상점, 애완동물 장난감, 댄스 레슨, 귀여움, 햄스터 묘기, 사료, 햄스터 서식지, 햄스터 호텔, 햄스터 생일선물 아이디어 및 기타

더 좋은 방법은 자바스크립트의 사용 여부에 관계없이 동일한 텍스트를 표시하는 것이고 가장 좋은 방법은 자바스크립트를 사용하지 않는 방문자도 볼 수 있도록 HTML 버전의 슬라이드쇼를 제공하는 것입니다. 숨겨진 텍스트에 관해 자세히 알아보기