미남이의 이러쿵저러쿵 iPhone에서 보는 미남이의 이러쿵저러쿵

끈적이 노트(sticky notes)라 함은, 주로 웹에서 알림 글이나 주의를 요하는 글의 내용을 담아두는 배경으로 많이 사용되는데 (개인적론 웹사이트 대문에 twitter feed 표시용으로 사용하고 있다), 요넘을 사용할 경우엔 몇 가지 주의사항이 있다.

우선, 이 배경 그림을 쓸 때는 글 내용에 맞는 크기의 이미지를 미리 마련해 두어야 한다는 것이다. 나중에 글 내용이 길어지거나 줄어들기라도 하는 날엔 그 크기에 맞게 이미지 편집기에서 불러와 조물락 다듬어 주어야 할 경우도 생긴다. 그리고, 여기에 끈적이의 구석이 약간 말려 올라간 그림자 효과까지 줄라 치면, 투명 영역이 들어간 png 파일을 사용해야 하는데, 요넘을 그대로 사용하면 IE6에서 보기 흉한 흔적을 남겨서 이를 위한 불필요한 꼼수를 부려야 하는 골칫거리도 있다.

이런 상황에서 훌륭한 대안으로 사용될 수 있는 것이 바로 우리의 수퍼스타 CSS3이다.
CSS3를 쓰면서 얻을 수 있는 이점은 위에서 말한 부작용도 없거니와, CSS 선언 단 몇 줄로 이미지 사용을 배제하면서 더 빠르고 접근성 높은 사이트를 만들 수 있고, 물론 오래된 브라우저들에서도 "degrades well" 한 결과를 보여준다. 글 마저 읽기 »

꼬리표: CSS3, Imageless Sticky Notes

아래 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)
}

꼬리표: iPad, iPhone, iPod touch, Touch Events

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의 좋은 본보기가 되지 않을까? 이미 시작되었는지도.

꼬리표: CSS3, iPhone, SVG

Safari 5가 발표되면서 반가움이 컸는지 연달아 Safari 얘기만 적게 되는데, 이 번엔 새로 추가된 JavaScript event인 "beforeload" 이벤트에 관한 글을 올려 놓는다.

이 놈은 웹페이지에 포함된 모든 스크립트와 iframe, 이미지, 스타일쉬트 등 그 어떤 리소스도 읽어들이기 전에 발사되는데, Apple은 우연찮게 그 사용의 한 예시로 광고 차단에 활용할 수 있는 기술로 서술하고 있다.

자연스럽게, 위 기술은 광고 차단 목적의 AdBlock for Safari Extention에 그대로 사용되었고, 원하지 않는 광고는 그 내용을 읽어들이기도 전에 차단해버린다. 그래서 광고 도배 사이트의 경우 통신량이 줄어서 페이지 로딩 속도가 더 빨라지는 효과를 얻을 수 있다.

한편, 별로 관련이 없는 얘기일 수도 있지만, 문득 스치는 생각.
Apple은 현재 주도권을 쥐고 있는 모바일 플렛폼에서 iAd를 통해, 점점 그 파이가 커져가고 있는, 휴대장비의 광고 시장을 장악하려 한다는 것은 잘 알려진 사실. 반면, 데스크탑에선 Safari Reader를 위시한 여러 차단막 강화로 사용자들에게 "annoying ads"로부터의 해방을 도모하고 있으니 참 오묘한 형국이다.

물론, 이것은 무엇보다도 사용자 경험을 중시하려는 전략으로 생각할 수도 있는데, 과연 일반 사용자와 개발자 그리고 광고 생산자와 제공자 모두에게 지지를 얻을 수 있을지는 더 지켜볼 일이다.

결국, 광고 시장은 사용자를 향한 접근 방식의 끊임없는 변화를 모색하려 하겠지만, 이 흐름을 가지고 누가 주도권을 잡느냐에 따라 그 경쟁은 더욱 치열해질 것이란 점은 누구나 쉽게 예상할 수 있다.

아래는 Google로 찾아낸 재미난 사진.

꼬리표: beforeload, iAd, Safari, Safari Extensions

개인적으로, Safari(WebKit)를 주 웹 브라우저로 사용하면서 Safari 5가 Extensions 기능을 지원하기 시작한 후로 제일 먼저 기다렸던 놈이 있는데, 웹페이지의 (x)html 표준 검사 결과를 표시해주는 SafariTidy plugin이 Extension으로 나와주는 것이었다. 그런데, 오늘 드디어 요놈이 Safari Validator Extension 모습으로 공개되었다.

설치하면, 확장 막대(extension bar)에 Tidy와 W3C 검사 결과를 함께 보여준다.

Tidy 검사 결과를 누르면 현 웹페이지의 소스와 함께 오류 부분까지 꼭 집어서 보여주어서 무척 편리하다.

그리고 W3C 검사 결과를 누르면 W3C validator가 생성한 보고서를 띄워 준다. 참고로, 설치 후 페이지 로딩 속도가 느려진 것처럼 느껴진다면 평소에는 설정에서 W3C 검사 기능만 꺼주면 된다고 함.

이제 HTML5만 더 무르익으면, 요넘까지 지원되길 바래야지.

꼬리표: Safari Extensions