웹에 접속하는 장비의 다양한 화면 크기와 점점 높아지는 pixel density에 맞춰서 상황에 따라 적당한 이미지를 전달해 주는 일은 어렵지만 당장 해결해야 할 시급한 문제였다.
이 문제를 적절히 대처하고자 여러 개발자들이 responsive images의 문제에 대응하는 많은 방법을 제시하고 있지만, 각각의 장단점을 고려하기 이전에 어차피 과도기적인 꼼수에 지나지 않는다는 문제를 공통으로 안고 있다.
그래서 이 문제를 해결할 장기적인 표준안을 도출해 내려고 Responsive Images Community Group에 모여서 지금까지 제시된 다양한 방법에 대한 서로의 의견을 교환하고 가장 이상적인 방법을 도출하고자 머리를 맞대고 있는 사이, 이 문제를 해결해 줄 또 하나의 방법으로 며칠 전 Apple에서 WHATWG list에 제시했던 img의 srcset attributes이, 외부에서 보면 갑작스러울 수도 있게, WHATWG 표준 draft에 바로 추가되는 일이 발생하였다. 그래서 그동안 머리를 맞대고 고민했던 많은 개발자들을 발끈하게 만들었고, 다수의 지지를 받으며 새로 도출해낸 <picture> element가 그냥 무시되었다는 점에서도 큰 허탈감을 표시하고 있다.
이런 사태는 개발자와 WHATWG 간의 원만한 소통 창구의 혼돈에서 비롯되었다는 얘기가 나오는데, 지금까지의 진행 상황은 Jeremy Keith씨가 올린 글에 자세히 나와 있다.
과연 이제 막 HTML draft에 추가된 srcset attribute이 앞으로도 그 자리를 지킬 수 있을지 모르는 일이고 또 몇 번의 수정안으로 대체되겠지만, 그 사용법을 보면 다음과 같다.
srcset attributes에는 쉼표(,)로 구분해서 화면 크기 혹은 화면의 pixel density에 따라 하나 이상의 대체 이미지를 지정해 줄 수 있으며, 이렇게 하면 해당 user agent는 상황에 맞게 가장 적절한 이미지를 선택해서 보여주게 된다. 위의 예에선 기기의 화면 pixel density가 2.0이면 banner-HD.jpeg을 보여주며, viewport 최대 너비가 100 pixels 이하이면 banner-phone.jpeg 그리고 동시에 pixel density가 2.0이면 banner-phone-HD.jpeg 이미지를 표시해 주는데, 만약에 viewport의 가로/세로 길이 혹은 pixel density가 생략되었다면 각각 “Infinity(무한대)”, 그리고 1의 값을 가진다.
화면의 크기와 pixels density에 따라 적당한 이미지를 전달해 줄 수는 있겠지만, 접속 장비의 네트워크 속도에 대한 고려는 전혀 없다. 그래서 웹 리소스를 최대한 경량화하려는 추세에 맞춰 느린 무선으로 접속한 장비에 무조건 고해상도 이미지를 전송하는 것도 적절치 않다는 고민은 남아있다. 나중에 Network Information API를 지원하게 되면 접속 속도에 따라 선택적으로 이미지를 전송하거나, 혹은 user agent에 지정된 사용자 설정에 따라 자동으로 적절한 이미지를 읽어들일 수 있게 되면 더 좋지 않을까 기대해본다.
어쨌든 이제 막 responsive images 요구에 대응하는 표준 안이 형태를 갖추기 시작한 상황에서 앞으로의 개선 방향도 많은 주목을 받게 될 것이 분명하며, 앞으로 한 달도 안 남은 Apple의 WWDC 2012에서 공개될 iOS 6를 통한 Apple의 대응도 흥미롭게 지켜볼 것이다.
추가 참고 글: 이번 표준안 채택과 관련해서 고려된 내용과 그 이유를 WHATWG HTML spec editor인 Ian Hickson씨가 public mailing list에서 설명했던 글.
“Responsive images를 위한 img element의 srcset attributes”에 달린 한 개의 댓글
😛 😛 😛 😛 😛 😛 😛 😛 😛 😛 😛 😛 감사합니다.