자바스크립트 링크를 직접주소 링크로 수정!
네트워크는 수많은 링크들로 연결되어 있죠. 검색 엔진의 로봇들도 홈페이지들을 탐색하면서 페이지에 링크된 주소들을 타고 다니게 됩니다. 이 때 링크가 자바스크립트(javascritpt)로 되어 있다면, 검색 로봇은 링크로 인식하지 못하고 지나치게 되죠. 자바스크립트 링크의 또다른 단점은 사이트의 링크 구조를 직관적으로 알기 어렵다는 것입니다. 자바스크립트 링크는 새창이나 새탭에서 링크를 열지 못하는 단점도 있습니다.
자바스크립트 링크의 예
위 그림은 레프트21의 전체보기 화면의 하단입니다. 1부터 10까지의 페이지가 링크로 나열되어 있죠. 1번은 보고 있는 화면이니까 1번을 제외한 9개의 링크가 걸려있습니다. 2번 링크에 커서를 올려 놓았더니, 웹브라우져 하단에 링크의 주소가 표시됩니다. 앗! 보시다시피 주소가 javascript:goPage('2') 라고 표시되어 있네요. 즉, 2번 페이지 링크를 클릭하면 '자바스크립트 함수인 goPage라는 함수를 실행시켜라'라는 의미입니다. 레프트21의 모든 페이지 링크는 이런식으로 되어있었습니다.
지금까지는 검색로봇이 레프트21 홈페이지의 전체보기 페이지로 도착했을때, 최근의 글 20개가 나와있는 페이지만 보게 되고, 나머지 링크들은 인식하지 못하였습니다. 이를 개선하여, 자바스크립트 함수 대신 직접 주소를 링크하는 방식으로 바꾸었습니다. 따라서 아래와 같이 되었죠.
주소직접 링크로 개선했습니다.
자바스크립트 링크와 웹접근성
자바스크립트로 링크를 거는 이유중의 하나는 보안성을 강화시킨다는 이유입니다. 하지만 모든 링크가 보안과 관련되어 있지 않습니다. 따라서 페이지 이동시 함께 따라가는 정보가 보여지지 않아야 하는 경우에만 그렇게 하면 됩니다. 예를 들면, 로그인을 한 다음 완료를 클릭하면 개인의 로그인 정보가 주소창이나 브라우져 하단에 보여지면 안되겠죠.
위와 같은 개선으로 웹접근성이 향상되었습니다. 첫째, 검색봇이 레프트 홈페이지에 접근했을 때 더 많은 페이지들이 추적될 수 있게 되었습니다. 두번째, 사용자나 개발자의 입장에서도 링크의 제목이 좀더 직관적이게 되었습니다. 바뀐 링크주소를 한번 볼까요?
http://www.left21.com/1_news_all.php?pageNo=2
1_news_all.php는 모든 기사를 출력하는 페이지의 이름입니다. 그런데 뒤에 ?와 함께 'pageNo=2'라는 문자열이 붙여져 있죠? 종합해보면, 모든 기사를 출력하는 페이지의 두번째 페이지라는 뜻이 됩니다. 내부적으로는 pageNo라는 변수에 '2'라는 상수값을 넣어 다음 페이지에 넘겨주는 겁니다. 서버에서는 이 변수를 활용하여 두번째 페이지에 나올 글들을 뽑아서 웹브라우져에 뿌려주는 것이죠.
'javascript:goPage(2)'가 링크되었을 때보다 좀 더 직관적입니다. 이는 개발자가 유지보수 하는데에도 영향을 줍니다. 알기 힘든 링크구조는 검색로봇 뿐만아니라 개발자에게도 어려움을 준다는 것이죠.
읽기 힘드셨나요? 레프트21에 방문하시는 분들이 반드시 알아야 할 내용은 아닙니다. 다만, 웹접근성을 위해 웹마스터들이 노력하고 있다능! ㅎㅎ 참고로 다음 링크를 보시면 웹접근성을 떨어뜨리는 다른 예들을 보실 수가 있습니다.
'초보들의 웹 개발' 카테고리의 다른 글
| 검색 후 2페이지 가면 에러가 났었다(한글URL 문제) (4) | 2009/06/22 |
|---|---|
| 레프트21 맞춤보기 개선 (2) | 2009/06/01 |
| 자바스크립트 링크 개선, 웹접근성 강화 (7) | 2009/05/17 |
| 지난 호 보기 개선, 그리고 효율적(?) 사회 진보 (4) | 2009/05/13 |
| 홈페이지 오류신고, 개선사항 제안 페이지 (61) | 2009/04/14 |
| 우편번호 DB 업데이트 미션 컴플리트! (6) | 2009/03/26 |
댓글을 달아 주세요
녹풍 2009/05/18 00:18 댓글주소 수정/삭제 댓글쓰기
이거 저의 숙원과제 중 하나였는데 기린님이 멋지게 해결해주셔서 묵은 똥이(!) 내려간 기분입니다 ㅋㅋ 레프트21이 검색에 더 잘 노출될 수 있는 환경이 마련된 듯하네요!
죠기 위에 검정색 박스로된 “!!!댓글!!!” 이거보고 쓰러집니다ㅋ
이거 보고도 댓글 망설이시는 분들, 양심에 털나고 있단걸 아셔야 해요ㅎ
기린 2009/05/18 03:01 댓글주소 수정/삭제 댓글쓰기
제가 님의 똥을...ㅎㅎ그런것이었군요. 아무튼 도움이 되었다니..기분 좋습니다. 저도 왠지 밀린 과제를 한 기분이라능ㅋ
연두 2009/05/19 13:28 댓글주소 수정/삭제 댓글쓰기
앙큼한 기린님
그동안 실력이 많이 늘었네요ㅋ (제가 이런말 할 처지는 아니지만)
앞으로 기대됩니다.
감사^^ 진짜 늘었는지는 모르겠지만요.ㅋ 연두님이야말루 실력이 늘고 있다능.
방금 섹션 페이지를 수정하는걸 빠뜨렸다는 사실을 알았어요.ㅡㅜ 바로 수정했습니다.
antonio1926 2010/09/17 16:11 댓글주소 수정/삭제 댓글쓰기
오... 구글 검색하다가 이 글이 첫머리에 올라와서 봤습니다. 레프트21 구독잔데...ㅋㅋㅋ
좋은 내용입니다.
한때 보안을 위해 공공기관 사이트를 자바스크립트를 이용해 링크를 걸라고 무식하게 권고한 적이 있었습니다만...
이건 철저히 개발자 관점이고 사용자 관점에서는 오히려 보안상 더 취약하기도 합니다. 파이어폭스와 익스플로러9 버전의 경우, 피싱사이트들의 데이터베이스를 제공해 피싱사이트로부터 사용자를 방어하도록 하는데 요놈의 자바스크립트 링크는 그걸 원천 봉쇄하니.. 사용자는 피싱사이트인지도 모르고 그냥 당할 수밖에요.....
그런 것 같습니다. 웹 창시자들의 기본 설계를 그대로 존중하면서 웹사이트를 만드는 게 항상 기본이 되는 것 같습니다. 링크는 a 태그로 걸어야지 자바스크립트로 거는 게 아니라는 단순한 원리가 기본인데 말입니다.
이런 칭찬을 들으니 기분이 좋네요. ^^