처음 개발을 결심하고 꽤 오랜 시간이 흘러버렸지만, 이제야 구상했던 기본 틀이 잡히면서 마무리가 되어가는 것 같다.

내용 갱신 – App Store 등록 완료됨(2012.12.5): 바깥 날씨 아이폰 앱

Johan Brook 씨가 blog에 올린 글에 의하면 다음 버전의 iOS에선 새로운 CSS property를 써서 완벽한 기본 iOS의 관성 스크롤링 동작을 구현할 수 있게 되었다고 한다. 그것도 손가락 하나만으로 스크롤링이 가능해졌다.

div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

그동안 Web Apps를 개발할 때 native iOS apps에서 보여주는 관성 스크롤링 동작을 구현하기 위해 몇몇 JavaScript 라이브러리를 사용해야 했는데, 아무래도 부족한 면이 없지 않았다.

이미 이전 iOS 5 Beta에선 position:fixed와 overflow:scroll 등 아쉬웠던 여러 웹 기술을 지원하기 시작했으며, 여기에다 관성 스크롤링까지 지원하면서 native Apps 못지않은 Web Apps를 구현하는데 부딪히게 되는 장벽이 훨씬 낮아진 느낌이다.

아래 snippet은 Touch Events를 지원하는 iPhone/iPad에서 기존 mousedown/mouseup events를 대신하는 touchstart/touchend event 탐지 목적에 쓰일 수 있다.

if ('createTouch' in document) {
  // Touch events are supported. 
  // So we can use touch events like 'touchstart' or 'touchend' instead of mousedown/mouseup. 
}

iPad에서의 click event handling은 약간 지체되는 느낌이 있으므로, 되도록이면 대응하는 touch events를 써주는 것이 좋을 것이다.

그리고 참고로, Android에선 Touch Events를 지원하지만 위의 방법을 사용할 수 없다고 하니, 어쩔 수 없이 navigator.userAgent도 살펴봐야 한다.

function supportsTouch() {
  var android = navigator.userAgent.indexOf('Android') != -1;
  return android || !!('createTouch' in document);
}

iPhone 4의 Retina display는 잘 알려진 바와같이 326dpi의 높은 해상도를 지니고 있다.
물론, 이것은 장점 중에 하나로 일려져 있지만, 이 고해상도 화면을 가지고 일반 웹 사이트에 표시되는 그림들을 보면 결국 2배로 확대된 픽셀 형태로 보여지는 결과를 낳게 된다.

그래서, 앞으로 점점 늘어날 이런 고해상도 display를 염두해 둔 이미지를 준비해놓지 않는다면 정교한 화면의 장점을 충분히 활용하지 못할 것이라는 얘기다.

이런 고해상도 display에 대한 준비 요령은 이미 제시되어 있는데, 해결책은 결국 CSS3(background-size, ::marker pseudo-element, boarder-image)와 SVG에서 찾을 수 있다는 소리.

자, 이렇게 해서 준비된 고해상도 이미지를 진정 고해상도 display를 가진 iPhone 4에만 보여주고 싶다면 아래의 CSS3 media query 안에서 적용해 주면 된다.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* iPhone 4-specific styles go here */
}

지금 당장이야 그 필요성이 적겠지만, 앞으로 이런 고성능/고해상도 휴대 장비의 사용이 늘어나면 또 하나 progressive enhancement의 좋은 본보기가 되지 않을까? 이미 시작되었는지도.

We become what we behold.
We shape our tools and then our tools shape us.

Marshall Mcluhan, 1964

개발자와 사용자가 서로 만족해 하는 동시에, 두 집단 사이의 흥미로운 교감이 넘쳐나는 곳.
이것이야말로 어느 개발자든 참여하고 싶게 만드는 꿈의 소통 공간이 아니겠는가.

당장 필요한 것은 종이와 연필 뿐. 그래 시작이 반이다!