요약

  • W3C는 2013년 2월 Responsive Images Community Group과 함께 picture 요소의 첫 공개 초안과 반응형 이미지 사용 사례 초안을 발표했다.
  • 현재 HTML은 srcset과 sizes로 같은 구도의 파일을 고르고, picture의 source media로 화면에 맞는 다른 구도를 제공한다.

사진 편집자가 받은 해안 사진에는 하늘이 넓고 파도가 세다. 먼 곳에 붉은 등대가 하나 서 있다. 큰 화면에서 등대의 작음은 분위기를 만든다. 휴대폰에서 그 작음은 실종 신고가 된다. 브라우저는 사진을 성실하게 축소했다. 다만 어느 부분을 보여 주어야 하는지는 사진을 고른 사람이 말해 줘야 했다.

웹페이지는 이미 화면 폭에 따라 단과 여백을 바꾸는 법을 배웠다. 그러나 평범한 img src에는 주소 하나만 있다. 넓은 지면에서 쓰던 사진이 좁은 지면에도 그대로 들어갔다. 스크립트로 나중에 주소를 갈아 끼울 수도 있었지만, 브라우저는 HTML을 읽는 즉시 이미지를 일찍 가져오려 한다. 대안을 문서 안에 미리 써 두면 이 서두름을 방해하지 않고 활용할 수 있다.

W3C는 2013년 2월 26일 두 개의 첫 공개 작업 초안을 알렸다. 하나는 picture 요소, 다른 하나는 반응형 이미지의 사용 사례와 요구 사항이었다. 두 문서는 Responsive Images Community Group과 협력해 만들어졌다. 태그의 문법보다 먼저 묻고 있던 것은 간단하다. 화면이 달라졌을 때 사진의 무엇을 바꾸어야 하는가.

당시 picture 초안은 CSS 미디어 질의로 이미지 출처를 정하는 용기를 제안했다. 후보 사진과 조건을 HTML에 적어 브라우저가 문서를 읽을 때 볼 수 있게 했다. 첫 초안이므로 세부 문법은 계속 다듬어질 여지가 있었다. 중요한 분업은 이미 제시됐다. 발행자가 선택지를 준비하고, 브라우저가 현재 환경에 맞추어 그중 하나를 고른다.

2013년 11월 W3C가 낸 사용 사례 문서는 흔히 한데 묶이는 두 작업을 갈라 놓는다. 첫째는 해상도다. 같은 사진 구도를 유지하면서 화면 밀도나 지면 너비에 맞는 크기의 파일을 제공한다. 둘째는 아트 디렉션, 곧 구도다. 단체 사진의 주인공이 작은 화면에서 알아보기 어려우면 더 가까운 장면을 준비한다. 넓은 해안 사진의 등대가 작아지면 바다를 덜 보여 주는 사진을 준비한다. 원래 사진의 픽셀만 늘리면 아주 선명한 빨간 점을 얻게 된다.

WHATWG의 현재 HTML 이미지 장은 두 작업에 다른 도구를 준다. srcset에는 화면 밀도별 후보 파일을 적을 수 있다. 이미지가 차지할 너비가 화면에 따라 바뀌면 너비 설명자와 sizes가 예정된 공간을 알려 준다. 브라우저는 화면 밀도와 확대 비율 등 조건을 참고해 준비된 파일 중에서 고른다. 사진부가 메뉴를 작성하고 브라우저가 테이블 크기를 안다는 식이다.

구도를 바꿀 때는 picture 안에 source를 둔다. 각 source는 media 조건과 후보 파일을 가질 수 있다. 브라우저는 순서대로 조건을 살펴 처음 맞는 출처를 사용한 뒤 그 안에서 파일을 고른다. 안쪽의 img는 표시되는 이미지 요소이자 대체 경로로 남는다. 넓은 화면에는 해안 전체, 좁은 화면에는 등대 가까이 잡은 사진을 줄 수 있다. 그 사진들은 사람이 미리 보고 잘라 둔 결과물이다.

두 선택은 함께 움직일 수 있다. 휴대폰용 근접 사진에도 여러 해상도가 있고 데스크톱용 원경에도 여러 해상도가 있을 수 있다. 먼저 어떤 장면을 보여 줄지, 다음에 그 장면의 어느 파일을 보낼지 정한다. 순서를 뒤집으면 등대가 작게 보이는 사진 네 장을 크기별로 성실하게 만들고 나서야 문제를 알아챌 수 있다.

img의 대체 텍스트도 편집의 일부다. 사진을 보지 않고 설명을 읽는 사람에게 이미지가 기사에서 맡은 역할을 전해야 한다. 여러 자르기 버전이 있어도 기사의 대상이 등대라면 의미의 중심은 유지된다. 화면마다 사진을 바꿀 수 있을수록 설명의 중심은 더 중요해진다.

2013년 논의가 남긴 장면은 새 태그 하나보다 크다. 웹페이지는 접히고 펼쳐질 수 있었지만 사진 속 주인공은 그 과정에서 사라지곤 했다. HTML은 편집자의 판단을 후보로 담고 브라우저가 일상적인 선택을 맡도록 했다. 휴대폰의 등대가 다시 건물로 보이게 된 것이다.