Scribble Maps Blog
모바일 및 API 지원, 역대 최대 규모의 릴리스.
마침내 Scribble Maps의 새로운 버전을 출시하게 되어 매우 기쁩니다(그리고 한편으로는 안도감이 듭니다). 이야기할 내용이 정말 많습니다. 새로운 기본 에디터와 함께 풀 API를 출시했습니다.
2> Flash에서 HTML5/Javascript로 많은 사용자들이 기술의 변화를 이해하지 못할 수도 있지만, 이것이 갖는 의미는 매우 큽니다. Flash에서 HTML5/Javascript로 전환하는 것은 결코 쉬운 일이 아니었습니다. 특히 기존 Scribble Maps를 대중적으로 만들었던 경험을 최대한 유사하게 유지하고 싶었기 때문입니다.
우리는 새로운 버전의 사용 경험을 충분히 일관되게 만들어 사람들이 우리가 기본적으로 모든 것을 처음부터 다시 만들었다는 사실조차 모르게 하고 싶었습니다. 커스텀 커서처럼 간단한 것조차 크로스 브라우저 호환성을 유지하고 싶었기 때문에 도전 과제였습니다. 그래서 새 버전은 IE7까지 완벽하게 지원합니다.
Google이 자사 지도 API의 Flash 버전 지원을 중단하겠다고 발표한 후, 우리는 완전히 새로 구축해야 하는 상황에서 우리가 원하는 몇 가지 핵심적인 목표를 결정했습니다.
2> 모바일에서의 Scribble Maps
우리가 받은 가장 큰 요청 중 하나는 모바일 환경, 특히 태블릿에서 Scribble Maps를 사용할 수 있게 해달라는 것이었습니다. Javascript를 활용했기 때문에 이제 애플리케이션이 태블릿 기기에서도 실행됩니다.
하지만 지도 애플리케이션이 실행되는 것과 실제로 사용하기 편리한 것은 다릅니다. 예를 들어 데스크톱 버전의 Scribble Maps에는 마우스 오버(롤오버) 기능이 있지만, 태블릿에는 마우스 오버 기능이 없습니다.
2>
Scribble Maps API
Scribble Maps에서의 그리기 작업은 캔버스처럼 작동하므로 스타일을 미리 지정하고 해당 스타일을 모두 적용받는 여러 선을 그릴 수 있습니다. 이는 도형뿐만 아니라 마커(Marker) 같은 요소에도 적용됩니다. 따라서 다음과 같은 작업들이 가능해집니다.
사용자가 지도와 맺는 관계는 도구를 통해 정의되며, 도구를 변경함으로써 사용자가 지도와 상호작용하는 방식을 바꿀 수 있습니다.
2> 동적 이미지 API Scribble Maps가 주로 사용되는 목적 중 하나는 이미지를 생성하는 것입니다. 이는 Flash에서 벗어나면서 우리에게 큰 문제이자 동시에 새로운 기회가 되었습니다. 다른 지도 API의 경우 "정적 이미지"를 생성하는 기능이 있습니다. 이러한 정적 이미지 API의 문제는 렌더링된 이미지에 포함될 수 있는 데이터의 양에 거의 항상 제한이 있다는 점입니다.
반면 Scribble Maps에는 제한이 없습니다. 지도가 저장되면 데이터 양에 관계없이 해당 지도의 이미지를 요청할 수 있습니다. 또한 지도가 저장되면 기존 이미지는 무효화되고 다음 요청 시 다시 렌더링됩니다. 이를 통해 지도를 변경할 때마다 업데이트되는 이미지 링크를 효과적으로 생성할 수 있습니다.
아래는 그러한 이미지의 한 예시입니다.
2> 새로운 위젯 또한 2.0 버전과 함께 더 많은 UI 컨트롤을 제공하는 위젯을 도입했습니다. 이것은 첫 번째 버전이며 향후 몇 주 동안 계속해서 개선해 나갈 예정입니다.
링크
Scribble Maps API
Scribble Maps API 그룹
2> Flash에서 HTML5/Javascript로 많은 사용자들이 기술의 변화를 이해하지 못할 수도 있지만, 이것이 갖는 의미는 매우 큽니다. Flash에서 HTML5/Javascript로 전환하는 것은 결코 쉬운 일이 아니었습니다. 특히 기존 Scribble Maps를 대중적으로 만들었던 경험을 최대한 유사하게 유지하고 싶었기 때문입니다.
우리는 새로운 버전의 사용 경험을 충분히 일관되게 만들어 사람들이 우리가 기본적으로 모든 것을 처음부터 다시 만들었다는 사실조차 모르게 하고 싶었습니다. 커스텀 커서처럼 간단한 것조차 크로스 브라우저 호환성을 유지하고 싶었기 때문에 도전 과제였습니다. 그래서 새 버전은 IE7까지 완벽하게 지원합니다.
Google이 자사 지도 API의 Flash 버전 지원을 중단하겠다고 발표한 후, 우리는 완전히 새로 구축해야 하는 상황에서 우리가 원하는 몇 가지 핵심적인 목표를 결정했습니다.
-
<_li>웹 애플리케이션이 데스크톱과 모바일 환경 모두에서 작동하기를 원했습니다.
<_li>필요한 경우 다른 API 제공업체로 전환할 수 있도록 자체 렌더링 엔진을 구축하고 싶었습니다.
<_li>어떤 지도 API 제공업체의 서비스 약관도 위반하고 싶지 않았습니다.
<_li>개발자들이 자신의 애플리케이션에서 우리의 지도 작성 도구를 활용할 수 있도록 재구축 작업이 API 중심으로 이루어지기를 원했습니다.
2> 모바일에서의 Scribble Maps
우리가 받은 가장 큰 요청 중 하나는 모바일 환경, 특히 태블릿에서 Scribble Maps를 사용할 수 있게 해달라는 것이었습니다. Javascript를 활용했기 때문에 이제 애플리케이션이 태블릿 기기에서도 실행됩니다.하지만 지도 애플리케이션이 실행되는 것과 실제로 사용하기 편리한 것은 다릅니다. 예를 들어 데스크톱 버전의 Scribble Maps에는 마우스 오버(롤오버) 기능이 있지만, 태블릿에는 마우스 오버 기능이 없습니다.
이로 인해 터치 기기 사용 여부에 따라 사용자 경험을 수정하게 되었습니다. 이 작업은 어떤 코드도 수정할 필요 없이 자동으로 이루어집니다.
현재 대중적인 지도 API가 대여섯 개 정도 존재하므로, 우리는 구체적으로 편집 및 상호작용 기능에 집중하고 다른 시각화 및 타일 렌더링은 다른 API에 맡기고자 했습니다. API 구조를 어떻게 설계할지 결정할 때, 우리는 Javascript 프로그래밍을 위한 가장 훌륭한 스타일 중 하나가 JQuery라고 판단했습니다. 그래서 한 줄의 코드로 오버레이와 상호작용을 생성할 수 있습니다.
ScribbleMap.draw.line([[lat, lng], [lat2, lng2]], { lineColor: "#0000FF" }).click(function() { alert("클릭되었습니다") });
Scribble Maps에서의 그리기 작업은 캔버스처럼 작동하므로 스타일을 미리 지정하고 해당 스타일을 모두 적용받는 여러 선을 그릴 수 있습니다. 이는 도형뿐만 아니라 마커(Marker) 같은 요소에도 적용됩니다. 따라서 다음과 같은 작업들이 가능해집니다.
사용자가 지도와 맺는 관계는 도구를 통해 정의되며, 도구를 변경함으로써 사용자가 지도와 상호작용하는 방식을 바꿀 수 있습니다.
2> 동적 이미지 API Scribble Maps가 주로 사용되는 목적 중 하나는 이미지를 생성하는 것입니다. 이는 Flash에서 벗어나면서 우리에게 큰 문제이자 동시에 새로운 기회가 되었습니다. 다른 지도 API의 경우 "정적 이미지"를 생성하는 기능이 있습니다. 이러한 정적 이미지 API의 문제는 렌더링된 이미지에 포함될 수 있는 데이터의 양에 거의 항상 제한이 있다는 점입니다.
반면 Scribble Maps에는 제한이 없습니다. 지도가 저장되면 데이터 양에 관계없이 해당 지도의 이미지를 요청할 수 있습니다. 또한 지도가 저장되면 기존 이미지는 무효화되고 다음 요청 시 다시 렌더링됩니다. 이를 통해 지도를 변경할 때마다 업데이트되는 이미지 링크를 효과적으로 생성할 수 있습니다.
2> 새로운 위젯 또한 2.0 버전과 함께 더 많은 UI 컨트롤을 제공하는 위젯을 도입했습니다. 이것은 첫 번째 버전이며 향후 몇 주 동안 계속해서 개선해 나갈 예정입니다.
링크
Scribble Maps API
Scribble Maps API 그룹