Rev. 2.73

attachment
소개 화면

iRoute는 아이폰/아이팟 터치에서 회원가입 없이 누구나 무료로 사용할 수 있는 웹기반 카 네비게이션 시스템입니다. 이 서비스는 약 2주간 밤잠을 설쳐가며 구축한 개인 프로젝트로써 오픈 API를 적극 활용하고 HTML5와 CSS3의 막강함을 체험/학습하기 위한 목적으로 만들어 졌습니다.

iRoute는 모바일 환경에 최적화 되었습니다. 3G망을 이용한 유료 데이터 수신 요금 부담을 줄이기 위해 대부분의 레이아웃 및 UI를 CSS3로 디자인하여 리소스 호출을 최소화 했으며, 그 어떠한 사용자 정보도 서버에 기록하지 않도록 하여 불필요한 서버간 송/수신을 줄였습니다. 보존해야 하는 사용자 정보는 브라우저의 자체 저장 공간인 localStorage를 사용하고 있습니다. 환경 설정 정보, 책갈피 지점, 복원용 주행 상황 등을 보관합니다.

지도 및 지형 데이터는 한국 뿐만아니라 전 세계를 대상으로 서비스할 수 있는 구글맵 API를 기본으로 사용하고 있습니다. 아쉽게도 구글맵 API는 한국 지역의 주행 경로 검색 서비스가 지원되고 있지 않기 때문에 D모사의 주행 경로 검색 결과를 반영하였습니다. GPS가 장착된 아이폰의 geolocation으로 위치를 분석하고 이를 기반으로 현재위치, 주행속도, 가속도, 남은거리 및 시간 등을 산출합니다.

아직 미구현 된 기능도 많습니다. 그럼에도 이 프로젝트를 공개하는 이유는 혼자서 개발하기에 어려운 점이 많기 때문입니다. 최근에는 주행 경로에서 벗어난 경우 재탐색하는 기능을 추가했습니다. 이 것으로 최소한의 카 네비게이션 시스템은 마련된 샘이라고 생각했습니다. 이 핵심 기능을 테스트하려면 실제로 차량을 운행해야 하는데 출/퇴근 시간만을 할애할 수 밖에 없다 보니 개발이 너무 더디게 진행되고 있습니다. 여러분의 도움이 절실히 필요한 상황입니다. 이 프로젝트를 완성할 수 있도록 도와주세요. 피드백할 수 있는 공간으로 @iRouter 트위터 계정을 개설하였습니다. 참여 의사가 있으신 분은 이 계정을 팔로하시고 의견을 멘션해 주세요. 어떠한 내용이든 수렴하도록 노력하겠습니다.

Comments



Web Designer Wall의 Nick La씨는 CSS3를 이용하여 위와 같은 아름다운 드롭다운 네비게이션을 구현했습니다. 더불어 CSS3를 지원하지 않는 브라우저에서도 최소한의 모습을 유지하고 정상적으로 동작하도록 만들었습니다. :hover 액션을 적절히 사용하여 자바스크립트를 사용하지 않고도 서브메뉴 출력과 포커스 효과를 훌륭하게 구현으며, CSS3를 지원하는 브라우저인 경우 border-radius, box-shadow, text-shadow 속성이 활성화 되어 마치 그래픽 디자인한 듯한 느낌을 받게 됩니다. 놀랍게도 가로 1px짜리 반투명 png 이미지를 하나만 사용하여 여러 요소의 background 속성에 범용으로 사용하는 모습은 매우 인상적입니다.

Comments

analogseconds.png analogminutes.png analoghours.png
digitalhours.gif digitalminutes.gif digitalseconds.gif
 
 

Jon Combe씨는 HTML과 자바스크립트 그리고 CSS3의 회전 속성을 이용하여 위 두가지 모양의 시계는 만들었습니다. <canvas>또는 <svg>요소를 이용한 표현 수단으로만 가능했던 많은 것들이 일반 요소(<img>, <div>)들에 회전 속성을 정의하여 손쉽게 처리할 수 있게된 것입니다. 단, 최신 버전의 브라우저에서만 지원하는 점과 구현 과정에 놓여있는 명세이기 때문에 브라우저마다 별도의 처리를 필요로하는 번거로움이 따릅니다만, 미리 숙지해서 나쁠 건 없겠죠?

Comments