iPhone 응용프로그램들은 많은 주의와 이해를 필요로 합니다. 수많은 iPhone 응용프로그램 개발자들에게 이러한 작은 응용프로그램들은 iPhone 플랫폼에서의 개발을 값을 매길 수 없는 어마어마한 캐시 카우가 될 수 있습니다. 하지만 iPhone이 Safari를 구동시킨다는 것을 생각해보면, Safari에서 사용할 수 있게된 새로운 WebKit 기능의 사용에 더 많이 열광하지 않는다는 것이 놀랍습니다.

jQuery UI팀의 수석개발자(lead developer)인 Paul Bakaus씨는 Safari가 웹 개발자들에게 제공할 수 있는 가능성에 대해 찾기 시작했습니다:
저는 제가 Safari에서 시도했던 것들에 만족할 수 없어서, 최근 iPhone SDK 문서와 실제 CSS 변환 스펙을 깊이 연구하기 시작했습니다.

WebKit iPhone에서 동작하는 멋진 기능들에 대해 처음 읽었을 때는 조금 회의적이었습니다. 문서가 거의 없어서 다른 어떤 개발자에 의해 구현된 적도 없고, 데모도, 테스트도 없었습니다. 시간많은 학생 몇 명이 바로 뛰어들어야 하는 것 아냐? 라고 생각했었습니다.
iPhone 기능에 대한 정보를 찾는 Paul씨의 방법은 조금 부족했었던 것 같습니다. 그래서 Paul씨는 iPhone 시뮬레이터를 이용해  내장된 Webkit 기능들 특히 2D CSS 변환을 해킹하기 시작했습니다.
멋진 녀석이 있습니다: perspective 기능은 다른 기본 기능들이 어떻게 동작하는지 정의하는 것 같습니다:

실제 예제를 볼까요: 다음 세 함수들을 보세요:
  • rotateX - 엘리먼트를 X축 상에서 회전
  • rotateY - 엘리먼트를 Y축 상에서 회전
  • rotateZ - 엘리먼트를 Z축 상에서 회전(기본값, "rotate"와 같음)
이 함수들을 사용해보세요 - 세가지 모두 여러분에게 평면, 2D 애니메이션을 제공해줍니다. 사실은 이들이 3D 매트릭스를 사용한 함수들이이지만 말이죠.  하지만, -webkit-perspective 속성을 200으로 변경하고 실행해보세요. 지금은 가상 깊이가 만들어지고 이 세가지 함수들은 여러분에게 믿을 수 없는 결과를 안겨줄 것입니다.
Paul씨는 끝으로 iPhone 브라우저에서 다룰 수 있는 전형적인 iPhone 응용프로그램과 유사한 아주 멋진 뒤집기(flip) 효과를 만들었습니다. 작은 데모일 뿐이지만, 이것은 iPhone에서 웹 브라우저 기반 응용프로그램이 상호반응할 수 있는 방법과 모바일 웹 사용자들에게 보여줄 수 있는 것에 대한 가능성을 열어주었습니다.

데모를 보시려면, iPhone이나 iPhone 시뮬레이터가 필요합니다.

from 3D CSS Transforms on the iPhone
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요