W3C의 모바일 웹 테스트 수트 작업 그룹의 공동 의장인 Dominique Hazaël-Massieux씨는 ACID 테스트의 취지에 맞는 테스트를 발표했습니다: 모바일 브라우저를 위한 웹 호환성 테스트(Web Compatibility Test for Mobile Browsers)가 그것입니다:

테스트는 ACID 테스트와 같은 취지 아래, HTTP와 PNG 같이 널리 퍼진(하지만 모바일 장치에서의 구현은 미비한) 기술부터 한 두해 내에 중요하게 될만한 것까지(SVG 애니메이션이나 CSS 미디어 쿼리 같은 기술) 총 12가지 웹 기술의 테스트를 한 페이지 안에 조합했습니다.

테스트는 사각형으로 시각화했으며, 어려운 순서대로 정렬되었습니다(첫번째 줄은 널리 퍼진 기술, 두번째 줄은 점점 널리 사용되는 기술, 세번째 줄은 미래의 기술). 브라우저가 테스트를 통과하려면 모든 사각형이 같은 톤의 녹색이 되어야 합니다. 제가 아는 한 아직까지는 (모바일 장치 등에서) 통과한 브라우저가 없습니다.

테스트 영역입니다:

1. CSS2 min-width
화면 너비의 퍼센트 비율로 정의되는 유동적인 페이지 너비는 종종 작은 화면에서 읽을 수 없게 되는 것을 피하기 위해 min-widthmax-width 속성을 사용합니다. 앞의 속성을 여기서 테스트 합니다.
2. 투명 PNG
비트맵 이미지 형식인 PNG는 멋진 시각 효과를 만드는데 유용한 투명과 알파 채널을 지원합니다.
3. GZIP 지원
HTTP 프로토콜은 클라이언트가 압축을 풀 수 있다고 알려오면(Accept-Encoding 헤더를 통해서), 데이터를 gzip 방식으로 압축해서 보낼 수 있고, 그 결과로 트래픽을 절약할 수 있습니다.
4. HTTPS
HTTPS 프로토콜은 웹 상에서 보안과 암호화된 접속을 생성하기 위해 사용합니다.
5. XML로 제공되는 XHTML을 포함하는 iframe
브라우저가 application/xhtml+xml 타입으로 XHTML 문서를 로드함으로써 XML 컨텐트 타입을 지원하는지 여부를 테스트.
6. 정적 SVG
SVG는 손실없이 확대 축소가 가능해 자유로워 모바일 기기의 필요성에 알맞는 벡터 기반 그래픽을 정의할 수 있습니다.
7. XMLHTTPRequest
XMLHTTPRequest는 새로 전체 콘텐트를 전송하지 않고도 HTML 페이지의 부분만 업데이트 할 수 있는 AJAX 기술의 핵심입니다.
8. CSS 미디어 쿼리
CSS 미디어 쿼리는 제작자가 CSS 규칙을 특정 문맥 내에 제한적으로 적용할 수 있게 합니다. 예컨데, 주어진 최대 너비를 화면에만 적용할 수 있습니다. 여기서는 min-width 기능을 테스트 합니다.
9. 동적 SVG
SVG는 애니메이션도 지원하는데, 이는 상당히 멋진 인터페이스를 작성하는데 사용될 수도 있습니다.
10. canvas 엘리먼트
canvas 엘리먼트는 HTML5에 정의되어있으며, JavaScript 그래픽 API를 제공합니다.
11. contenteditable
contenteditable 속성은 엘리먼트의 리치 텍스트 편집(주: 흔히 웹 에디터라 부르는 기능)을 가능하게 합니다. 이 속성을 테스트할 수 있습니다.
12. CSS3 셀렉터
CSS3 에서 미세한 스타일링과 보다 나은 레이아웃을 설정하게 하는 몇가지의 새로운 셀렉터가 소개되었습니다. 여기서는 nth-child() 셀렉터를 테스트합니다.

아래가 실제로 테스트를 실행한 화면입니다:

사용자 삽입 이미지

from Now your mobile phones get to take some Acid on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요