해시뱅(HashBang, #!) 탐구 | Message

안녕하세요 Message입니다.

오늘의 포스팅 주제는, 예전에 마주쳤을때 당황했었던 해시뱅(HashBang, #!)에 대해 다루고자 합니다.

해시뱅에 대해 개념부터 장단점, 개인의 의견이 잘 포스팅되어 있는 블로그가 있습니다.

https://blog.outsider.ne.kr/698  : 해시뱅(#!)에 대해서... 

 

하지만 저는 개발자가 아니므로.. 해시뱅을 다뤄본 경험이 없기 때문에

초보 분석가가 해시뱅을 바라보는 시각에서 포스팅을 진행했습니다.

 

 

------------------------------------------------------------------------------------------------------------------------------------------

1. 해시뱅(HashBang, #!) 이란?

------------------------------------------------------------------------------------------------------------------------------------------

 

처음 해시뱅을 맞딱뜨렸을때는 무엇으로 검색해야 할지 몰라서 헤메었습니다.

정확한 URL을 알고싶은데, URL을 모르게 하기 위해서 보안처리가 잘되있는건가? 싶기도 했었고

고민하다보니 시간이 흘러가고..결국 그것이 무엇인지도 모른채 바쁜 맘에 그냥 지나쳤습니다.

 

금강산도 식후경이라고 일단 해시뱅이 어떻게 생겼나 보고 넘어갑시다.

해시뱅은 URL에서 발견할 수 있는 특수문자 "#!" 입니다. 말그대로 해시(#) + 뱅(!) 이지요.

검색해보니 국내 유명 웹사이트 중에서 해시뱅을 사용하는 곳은 트위터, 밴드 정도가 있지만,

트위터의 경우 논란이 많아 2012년 이후로는 더이상 해시뱅을 쓰지 않는것으로 보입니다.

 

 

------------------------------------------------------------------------------------------------------------------------------------------

2. 어디에 쓰는 물건(?)인고

------------------------------------------------------------------------------------------------------------------------------------------

 

해시뱅을 쓰는 이유는 웹어플리케이션을 제작할때 싱글 페이지 어플리케이션(SPA) 스타일로 구성하기 위함입니다.

메인 화면이 로딩된 이후에는, 페이지의 갱신 없이 URL을 변경하기 위해서 사용됩니다.

자바스립트를 이용하여 화면을 빠르게 변경해줌으로서 리소스를 줄이는것이 목적이죠.

 

저는 이러한 부분이 처음에 잘 이해가 되지 않았습니다.

하지만 안드로이드 앱을 개발하면서 프래그먼트를 사용한적이 있었는데,

해시뱅에서 "#" 뒤에 나오는 "!" 이후의 부분을 Fragment Identifier 라고 부르는것을 보고 조금은 이해가 되었습니다.

안드로이드의 프래그먼트는 비교적 리소스가 큰 액티비티로 모든 화면을 구성하지 않고,

하나의 액티비티 안에서 여러개의 Fragment로 화면을 구성하여 UI에 소요되는 작업량을 감소시키는 역할이니까요.

아래 예제는 소스코드를 확인할순 없지만, 하나의 Activity안에 여러 Fragment가 슬라이딩 되는 구조일겁니다.

 

 

------------------------------------------------------------------------------------------------------------------------------------------

3. 해시뱅의 문법..?

-----------------------------------------------------------------------------------------------------------------------------------------

 

해시뱅의 왜 쓰이는지 알아봤습니다.

그렇다면 이제는 어떤 방식으로 동작하는지 알아봅니다.

 

1. 네임앵커를 이용한 화면 이동

해시뱅은 HTML의 네임앵커 라는 기능을 이용한다고 합니다.

어떤 특정 위치에 책갈피를 지정하고, 그 지정된 곳으로 이동하는 것을 네임앵커라고 합니다.

 

예를들면,

<label name="anchor"> 여기로 이동 </label> 으로 단순 텍스트에 name 태그를 "anchor"로 지정해주고,

<a href="#anchor"> 클릭하면 </a> 으로 링크를 지정해놓으면, 클릭했을 때 name 값이 "anchor"인 곳으로 이동합니다.

아래 사이트에서 네임 앵커를 심플하게 체험할 수 있게 페이지를 구성해놓으셨더군요.

URL : http://mytory.net/archives/229#there

 

해시뱅은 위의 네임앵커 기능을 이용하여 "#" 뒤에 오는 Fragment를 마치 URL스럽게 구성을 합니다.

예를 들면 이렇게 말이죠 → <label name="!/tistory/url">

일반적으로 해시뱅을 구성할때 "#!" 이라고 쓰기 때문에 해시뱅이라고 불린다고 하네요.

 

 

2. 구글과 해시뱅, 모르면 찜찜

해시뱅이 적용된 HTML을 살펴보면, 공통점이 있습니다.

바로 exec, IndexOf, hasOwnProperty 함수등을 이용하여

URL 안에 "_escaped_fragment_=" 문자열과 일치하는 부분이 있는지 검색하는 부분입니다.

아마 해시뱅의 배경에 대해서 미리 알고 있지 않으면 이게 무슨 소린가 할만한 내용입니다.

 

이유는 구글때문입니다.

구글의 크롤러는 SPA를 검색할때 느낌표(!)가 있는지 체크합니다.

이후에 해시뱅 부분을 "_escaped_fragment_=" 문자열로 대체합니다.

대체된 새로운 URL을 이용하여 다시 서버로 요청합니다.

따라서 구글의 검색엔진에 잘 노출되기 위해서는 이와 같은 구글 크롤러의 요청에 대응을 해야합니다.

따라서 위의 소스코드들에서 공통적인 로직이 존재하게 되는것이죠.

 

해당내용에 대해 더 자세하게 보실분은 아래 블로그를 참고하세요.

싱글 페이지 어플리케이션에서의 검색 엔진 최적화 (SEO) : http://funnygangstar.tistory.com/183

 

 

------------------------------------------------------------------------------------------------------------------------------------------

4. 마무리

-----------------------------------------------------------------------------------------------------------------------------------------

 

해시뱅이 국내에서 많이 사용되지 않다보니 마주칠 일이 별로 없을지도 모르겠습니다만...

덕분에 SPA나 HTML에 대해서 살펴볼 좋은 기회였습니다.

 

해시뱅의 문제점이나 장/단점에 대해서는 다루지 않았습니다.

개발보다는 웹페이지 분석 + 취약점 진단 측면에서 알고 있으면 좋은 배경지식만 간략하게 살펴보았습니다.

잘못된 점이나 문제가 될만한 부분은 댓글 남겨주시면 수정/조치 하겠습니다.

감사합니다.

 

 

posted By Message.

Commit your way to the LORD, trust in him and he will do this. [PSALms 37:5]