마커 외곽선(stroke)이 흐릿하네요..ㅠ

지도/로컬 API
#1

다음 지도의 모바일에서 Marker를 보면, 다음에서 사용하는 마커는 마커의 외곽선이 뚜렸한데,
제가 올린 커스텀 마커 이미지는 png로 올려서 그런지… 외곽선(stroke)이 흐릿합니다.
모바일에서 다음 마커는 어떻게 마커의 외곽선이 뚜렸하고 깔끔하게 나타는지 조언을 구해도 될까요? ㅠ

#2

모바일에서는 pixel ratio가 높아서 그렇습니다.
보통 CSS 픽셀과 디바이스의 물리적 픽셀이 1:1 매핑이 되는 환경에서는
이미지 픽셀 하나가 하나의 디바이스 화소 하나에만 그려지므로 정확하게 픽셀을 표현하게 되는데 반해
CSS 픽셀 하나를 여러개의 물리적 픽셀이 나눠그리게 될 경우 정확하게 픽셀이 맞지 않는 부분은 화소를 blur 처럼 처리하게 되는데 이 때문에 흐려진 이미지를 보게 되는 것입니다.

이 현상을 해결하려면 x2 크기의 이미지를 사용해야 합니다.
2배 이미지를 사용하여 그 이미지의 크기를 강제로 CSS로 줄이게 되면 이미지의 픽셀 밀도가 높아집니다.
렌더링 단계에서는 이 밀도 높은 이미지를 표현가능한 만큼 물리 픽셀에 나누어 표현하기 때문에 선명한 이미지를 볼 수 있습니다.

오른쪽 지도위의 마커를 위해서
왼쪽과 같이 실제 2배 이미지를 사용했으며 이것은 마커의 옵션으로 조절 가능합니다.

마커 옵션 중 'image’라는 값이 있는데,
사이즈를 반으로 지정한 MarkerImage를 만들어 지정하면 됩니다.

var placeMarker = new daum.maps.Marker({
    position : position,
    image : new daum.maps.MarkerImage('http://m1.daumcdn.net/localimg/localimages/07/2013/mobileweb/m640/ico_marker_130409.png',
    new daum.maps.Size(24, 32) // 위 이미지 URL은 실제 48 x 65 이미지이지만 사이즈를 반으로 줄여서 표현함
    )
});

위에서 daum.maps.Size을 사용한 부분을 보시면 되요.

window.devicePixelRatio 값은 디바이스마다 다릅니다.
그렇다고 pixel ratio가 3 또는 4 이상의 디바이스에서 3배, 4배 이미지를 준비할 필요는 없습니다.
사람이 이상하다고 인지할 수 있는 픽셀의 크기가 한정되어 있으므로
3이 넘는 디바이스라 할지라도 2배 이미지를 사용하면 꽤나 선명하게 보입니다.

#3

선생님 감사합니다.

1개의 좋아요
#4

ㅋㅋㅋ 의미 있는 질문은 언제나 환영입니다.