URL에 사용되는 특수문자 #!

요즘 몇몇 웹사이트들이 다음과 같은 URL패턴을 사용하기 시작했습니다.
http://twitter.com/#!/search/twitter

혹 모르고 지나가고 계신분들을 위해 이 URL에 있는 #!의 의미를 설명드릴까 합니다.

1) #
#은 브라우저가 리로딩 없이 자바스크립트를 불러오기위한 방법입니다. 동시에 URL을 브라우저 히스토리에 남깁니다. 예를들어, http://twitter.com/# 을 방문한다음 http://twitter.com/#!/search/twitter 링크를 클릭하면 이 URL은 (#이 있으므로) 서버로 요청이 전송되지 않습니다. 그러나 URL이 이렇게 change되면 url change에 따른 이벤트 핸들러 자바스크립트를 호출 할 수 있습니다. (예를들어 http://benalman.com/projects/jquery-hashchange-plugin/ 같은 플러그인 사용) 그리고 그 이벤트 핸들러가 AJAX로 요청을 처리하게 합니다.

이렇게 한번 돌아가는게 좋은점은 브라우저의 REFRESH가 없으면서도, URL이 각 동작마다 바뀌고, 그 URL이 브라우저 히스토리에 남는다는 겁니다. 그래서 손쉽게 브라우저의 앞으로, 뒤로를 클릭할 수 있도록 만들어주는 것이죠.

(아시는 분은 아시겠지만 브라우저 BACK/FORWARD가 먹히도록 히스토리에 URL을 남기는 AJAX를 만들어보자는 노력은 5년도 더 전부터 해왔던 것입니다..)

2) #!
문제는 # 은 본래 서버에 요청을 보내는 형태의 URL이 아니기때문에 크롤러가 그 URL을 아무리 서버로 보내봤자 정상적으로 데이터를 크롤할 수 없다는 것입니다. 그리고 이걸 해결하기위한 기법이 바로 #! 이죠.

http://code.google.com/web/ajaxcrawling/docs/getting-started.html를 보시면 알 수 있듯이, 앞서 예의 http://twitter.com/#!/search/twitter는 http://twitter.com/?/search/twitter와 같은 컨텐츠라는 것을 선언하는 의미입니다. 그리고 ? 가 들어간 URL은 아무 문제 없이 서버가 응답을 하게 되고, 따라서 크롤러는 아무 문제 없이 해당 URL을 크롤할 수 있게 되는것이죠.

정리하면,
1) AJAX에서 브라우저 BACK/FORWARD 버튼이 먹게하고,
2) 크롤러에 친절한 웹사이트를 만들기 위해서 만들어진 패턴입니다.

Similar Posts:

Comments 7

  1. iwongu wrote:

    오… 그렇군요. 새로 나온 스펙인거군요. 주요 검색 엔진 크롤러들은 다 적용하고 있나보죠?

    Posted 27 Oct 2010 at 3:54 am
  2. mkseo wrote:

    구글이 제안한것으로 압니다. 표준인지는 저도 잘 몰라요.

    Posted 27 Oct 2010 at 1:22 pm
  3. nzin4x wrote:

    좋은 글 잘 읽었습니다.
    트위터에서 profile 볼 때 쓰던건데 그런 의미가 있었군요

    Posted 31 Oct 2010 at 12:10 pm
  4. jungyeol wrote:

    좋은 글이네요! 짱

    Posted 25 Nov 2010 at 5:31 pm
  5. 곽영철 wrote:

    잘 보고갑니다! URL 링크 좀 포스팅하겠습니다^^~

    Posted 16 Aug 2011 at 11:44 am
  6. 김채린 wrote:

    좋은 정보군요!!
    검색불가로 URL과 요약 포스팅 해갑니다.
    원하지 않으시면 지우겠습니다. 감사합니다. ^^

    Posted 15 Dec 2016 at 3:47 pm
  7. kimstar wrote:

    좋은 정보 잘 보았습니다.
    제 블로그에서 해당 내용 포스팅하였으면 합니다.
    원치 않으시면 답변 부탁드립니다.
    감사합니다.

    Posted 06 Mar 2017 at 4:34 pm

Post a Comment

Your email is never published nor shared.