모바일 브라우저 감지 스크립트 | Detect Mobile Browsers While이 에 작성. 4,581번 읽힘.
홈페이지에서 아이폰 모바일, 안드로이드 브라우저, 돌핀 브라우저 등에서 접근하는 모바일 사용자들을 위해 모바일 전용 홈페이지를 만들었다고 가정하자. 이들을 어떻게 그 페이지로 안내할 것인가? 직접 모바일 페이지 주소를 대문에 떡하니 걸어놀 것인가, 혹은 자동으로 이동시켜 줄 것인가? 대부분은 후자를 선택할 것이고 그게 더 사용자 입장에서 좋을 것이다.
예전에는 간단하게 iPhone 과 Android 만 유저 에이전트에서 감지하여 이동시켜주곤 했다. 하지만 지금은 수없이 많은 모바일 브라우저가 있다. 그 모두 일일이 내가 찾아서 추가해 줄 수는 없는 노릇이다. Detect Mobile Browsers – Open source mobile phone detection은 현존하는 거의 모든 모바일 브라우저를 감지할 수 있는 함수를 제공해준다. 이 함수는 계속적으로 업데이트 해주며 Apache(rewrite), ASP, ASP.NET, ColdFusion, C#, IIS, JSP, JavaScript, jQuery, nginx, node.js, PHP, Perl, Python, Rails 까지 상당히 많은 웹언어를 지원해주고 있다.
사용 방법
Detect Mobile Browsers – Open source mobile phone detection에 접속하여 원하는 언어를 클릭하여 스크립트를 다운받는다. 그리고 파일을 열어보면 http://detectmobilebrowser.com/mobile가 있는데 이 부분을 자신만의 모바일 페이지 주소로 변경한다.
마우스 포인트 커뮤니케이터 – mmunicater While이 에 작성. 1,509번 읽힘.
신기한 웹에 대한 자료를 많이 올려주시는 firejune님의 마우스 포인트 커뮤니케이터 – Smails를 보고 나도 jQuery와 Socket.io로 제작을 해보았다. 최대한 브라우저 자원을 효율적이게 사용하기 위해서 가로세로 10픽셀 이하의 작은 사각형으로 유저를 표현한다. 색상은 socket id 로 구분 짓는다. 한사람에 대해서 고유한 색상이 정해지지는 않는 방식이기에 이부분은 조금 아쉬운 부분이 있다.
예전에 socket.io 로 채팅방이라는 첫작품을 만든 적이 있는데, 사용자수가 수십명을 넘어가니 상당한 서버 성능 저하가 있었다. 그땐 아마 내가 코딩을 잘못 했기 때문에 그랬던 것 같고, 이번에는 정말로 제대로된 nodejs 의 성능을 테스트 해보기 위해 만들었다. 현재 운영중인 다양한 사이트에 적용한 상태이다. 이 블로그에도 현재 이 게시물에 대해서만 적용이 되어 있다.
반응하는 이벤트
현재 마우스 이동, 마우스Down, 마우스Up 에 대해서 자료를 받고 전송시켜준다.
성능 이슈
마우스 이동시에 바로 emit 해주지 않고 일정 시간마다 내 마우스 좌표를 emit 해준다. 처음에는 마우스 이동시마다 emit 했기 때문에 사람이 늘어날수록 자료 교환량이 엄청나게 증가했다. mousemove 이벤트가 1초에 수십번 발생할 수 있었기 때문이다. 물론 다른 포인터들의 업데이트도 역시 받는건 실시간으로 받지만 업데이트는 최대한 자바스크립트 계산을 줄이기 위해 일정 간격마다 업데이트를 해준다.
호환 목록
- Google Chrome
- Apple Safari
- Internet Explorer 7, 8 (9는 미테스트)
데모
현재 이 페이지나 http://mmunicater.sock.io/에서 볼 수 있다.