Category Archives: StudyNote

Mapbox와 Big Data를 활용한 interactive map 작업들

https://www.mapbox.com/labs/twitter-gnip/brands/#7/36.963/131.973

트위터를 올린 디바이스의 종류를 지도에 표시하는 방법으로 어떤 디바이스를 주로 사용하는지 제한적으로 볼 수 있다. 한국은 역시 안드로이드 천국. 삼성 때문이겠지만, 유난하다.

 

https://www.mapbox.com/labs/twitter-gnip/locals/#13/37.5598/126.9893

트위터를 올린 사람의 언어에 따라 지역마다 로컬과 외국인(관광객)을 구분해서 표시하는 지도. 어디 언어만 갖고 그렇게 구분하겠냐만은, 적어도 관광객은 자기 언어로 트윗을 할 테니까 관광객이라고 한 듯하다.

이 작업들은 Mapbox를 기반으로 한 것들인데, Mapbox는 구글 지도를 바탕으로 다양한 customization이 가능한 서비스. Javascript나 iOS 등의 모바일용 소스를 제공하기 때문에 다양한 플랫폼에서 적용이 가능하다. 라이센스는 무료도 있으나, 본격적으로 쓰려면 유료 라이센스를 구매하는게 필요할 것 같다.

> Mapbox

FileSquare – Creative Web App for Collaboration and Prototyping

> FileSquare

이 서비스는 Web App으로 다양한 플랫폼에서 사용할 수 있다는 것이 장점이다. 또한 무료 버전에도 20MB의 용량과 2개 프로젝트를 생성할 수 있기 때문에 작은 규모의 프로젝트나 개인들은 충분히 사용할 수 있을 것 같다.

프로젝트를 생성한 다음 디자인 이미지들을 올리고, 그 이미지들에 노트를 달거나 touch 영역을 설정해서 버튼을 만들 수 있다. 그리고 iPad나 iPhone에서 프로젝트를 호출해서 interactive하게 prototype을 테스트할 수 있다. 프로젝트 관계자, 클라이언트에게 보여주거나 UT에도 충분히 잘 사용할 수 있을 것 같다.

 

FileSquare에서는 모바일, 타블렛, TV 등 다양한 디바이스들의 Mockup 이미지를 제공하는 서비스도 하고 있다.

http://mockuphone.com/

역시 가끔 필요할 때 사용하면 검색하는 시간을 줄일 수 있을 것이다.

HTML5 Canvas에서 1px Line 그리기

HTML5의 Canvas에 대해서 대략적인 소개가 잘 되어 있는 사이트가 있다.

>Dive into HTML5 – Let’s Call It a Draw(ing Surface)

그 중에서 아래 내용은 canvas에서 1px의 라인을 그릴 때에 대한 tip이다. 좌표를 지정하고 라인을 그리는데, 예를 들어 (1,0)에서 (1, 10)으로 1px 두께의 라인을 그린다면, 좌표 1을 기준으로 0.5px씩 잡아서 라인을 그린다는 것인데, 실제로 스크린의 물리적인 픽셀 사이에 걸쳐지기 때문에 제대로 1px의 라인이 그려지지 않는다는 것이 요점이다.

따라서 1px의 라인을 정확하게 그리려면 기준점을 0.5 단위로 잡아야 하고, 예를 들어 (1.5, 0)에서 (1.5, 10)와 같이 잡아줘야 한다는 것이다.

————————————————————————–

Q: Why did you start x and y at 0.5? Why not 0?
A: Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2…) are the edges of the squares. If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line’s direction.

For example, if you try to draw a line from (1, 0) to (1, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1. The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:

A line from (1,0) to (1,3) is drawn 2 pixels wide

But, if you try to draw a line from (1.5, 0) to (1.5, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1.5, which results in a true 1-pixel-wide line:

A line from (1.5,0) to (1.5,3) is draw 1 pixel wide

Thanks to Jason Johnson for providing these diagrams.

모든 스크린의 크기에 대해서 – Screen Siz.es

유용한 사이트인데 가끔 필요할 때 기억이 안나서 찾아다니게 된다. 기억이 못 미더우니 이렇게 저장해놔야겠지.

모바일, 타블렛, PC까지 수 많은 스크린들의 physical한 크기부터 resolution까지 정리가 되어 있는 사이트이다.

사용하기 편리하게 되어 있어서 단순한 목적을 위해 쉽고 간단하게 잘 만들어졌다.

 

http://screensiz.es

logo

 

그런데 이 사이트의 density 분류 기준이 생소한데, XHDPI, HDPI와 같은 것들이다. 사이트의 설명에 의하면 이 단위들은 Teehan+Lax에서 정리한 >기준에 따른 것이고, 그에 대한 내용은 다음과 같다.

Teehan+Lax

즉, iPhone 3GS를 기준으로 정리한 것이다.

하나의 GUI 디자인을 가지고 여러 버전을 만들 때 크기별로 변환하는 작업을 위해 기준을 다음과 같이 잡았다.

고맙게도 일일이 계산하지 말라고 계산기까지 Teehan+Lax에서 만들어주었다.

>Teehan+Lax Density Converter

FLEXFIRELEDs – LED Strip Lights Solution을 구할 수 있는 곳

언젠가 이런 것이 필요할 것 같아서 기억 저장을 위해 정리해놓는다.

>FLEXFIRELEDs

flexible LED Strip light와 관련 용품들, 커넥터와 어댑터 등등을 판매하는 곳. 납땜이 필요 없으며 다양한 용도의 부품들을 판매하며, 가격대도 별로 비싸지는 않다.
미국이라서 배송비가 더해지지만, 국내에서 판매하는 것보다는 훨씬 편한 것 같다. LED Strip은 foot단위로 판매하며, 대용량의 경우 reel로 판매하기도 한다. UltraBright LED와 다양한 color의 LED Strip이 있으며, 모두 Dimmable하다.

더불어 이 사이트에서는 LED에 대한 기본적인 지식이나 사용법 등에 대해서도 동영상을 포함해서 간단히 소개가 되어 있기 때문에, 초보자도 쉽게 다가갈 수 있도록 해놓은 편이다.

IKEA에서도 조명을 위한 다양한 형태의 LED Bar light와 부품들을 판매하던데, 국내에 매장이 생기면 그런 것들도 다 판매했으면 좋겠다.

DIY가 일상적인 해외에서는 다양한 창고형 매장들이 있어서 좋던데, 아직 우리나라는 그런 건 별로 없고 전문 상가들을 돌아다녀야 하니 정보가 별로 없으면 찾아다니기가 어려운 것 같다.