네이버 지도에서 눈이 내린다~ 크리스마스 시즌 이벤트인 듯ㅋ

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

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

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

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

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


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

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

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

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

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


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

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


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

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


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


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

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


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

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

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


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

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








최근 한달간 인기글

이 글의 관련글

REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/1409
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/1409
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/1409
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/1409
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *46  *47  *48  *49  *50  *51  *52  *53  *54  ... *1133 
  • 블로그 주인장 : Nes
  • 이메일 : [email protected]
  • 이 블로그는?
  • 방명록
  • 레퍼런스 사이트 : http://nemesys.co.kr
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 10777718 T1272 Y1849

2344

1997

google chart api graph

-30 days

today : 1272

전체 (1133)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (145)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...