“오빠~ 눈내린다~!”
“응? 뭔 소리임?”

와이프가 가리키는 손가락 끝을 보니 모니터였다.
모니터에 펼쳐진 화면은 네이버 지도.

가까이서 보니 정말 눈이 내리고 있었다~
이야.. 네이버 지도의 깨알같은 크리스마스 이벤트인가 보다.

네이버 지도에 들어가 5초동안 가만히 있으면 눈내림ㅋ
네이버 지도에 들어가 5초동안 가만히 있으면 눈내림ㅋ

처음에는 실제로 밖에 눈이 내리고 있을 때 네이버 지도에서도 눈이 내리는가 싶었는데 밖을 보니 그건 아닌 듯ㅋ
그런데 생각해보니 접속하는 IP기준으로 지역을 판단해서 해당 지역에 눈이 내리고 있을 때 눈효과를 주면 참 좋겠다는 생각이 들었다.
밖에 비가 오면 네이버 지도에도 비가 내리고 말이다ㅋ

그런데 이 글을 보고 있는 사용자 중에는 네이버 지도의 눈내림 효과를 보지 못하는 경우도 있을 것이다.

이유는 쓰고 있는 브라우저의 차이.
네이버 지도의 소스를 열어보면 위의 눈내림 효과는 canvas와 javascript를 사용했음을 알 수 있다.

 

네이버 지도의 눈내림 효과 부분의 소스 - html5를 지원하는 브라우저에서 작동하는 canvas 객체가 쓰였다.
네이버 지도의 눈내림 효과 부분의 소스 – html5를 지원하는 브라우저에서 작동하는 canvas 객체가 쓰였다.

따라서 이 기능들을 제대로 지원하지 않는 인터넷익스플로어 버전을 사용중(확인해보니 IE9 이하에서는 작동 안됨)이거나 지원하는 브라우저라도 호환성보기를 이용중이라면 이 눈내림 효과는 나타나지 않는다.

크롬이나 파이어폭스는 canvas를 잘 지원하니 문제없이 보여질 터. 그런데 만약 쓰고 있는 브라우저가 IE10임에도 불구하고 눈이 내리지 않는다면 아래의 화면에서 보이는 호환성 보기를 체크해제하고 새로고침 해보시라.

IE10 이상의 브라우저인데 눈이 내리지 않으면 [도구]>[호환성보기 설정]에서 아래의 체크박스를 풀고 새로고침!
IE10 이상의 브라우저인데 눈이 내리지 않으면 [도구

추가로 소스상의 URL을 따라가니 네이버 지도에 적용된 눈내림 효과의 소스를 확인할 수 있었다.

네이버 지도에 적용된 눈내림 효과의 원본소스
네이버 지도에 적용된 눈내림 효과의 원본소스

데모페이지를 살펴봤는데..
이야..
WebGL 라이브러리인 three.js를 활용해 역동적인 3D로 눈이 내리는 효과였다.
데모페이지에서 마우스를 움직여보시라.

데모페이지의 눈내림 효과는 보다 더 역동적이다.
데모페이지의 눈내림 효과는 보다 더 역동적이다.

생각해보면 네이버 프론트단 개발자분들도 그들의 서비스에 얼마나 웹 최신기술을 쓰고 싶었을까 싶다.
이번 네이버 지도에 적용된 눈내림 효과도 크리스마트 이벤트 겸, 이스터에그로 넣은 부가기능으로 모든 사람이 볼 수 없지만 언젠간 울나라에서도 webgl이 보편화되는 시점이 오겠지.

같은 업계 사람으로서 제발 그날이 어서 빨리오길 바랄 뿐이다ㅋ

 

이 글의 관련글

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *