요약

  • W3C가 2013년 2월 14일 공개한 HTML Templates 첫 초안은 DOM의 일부를 비활성 상태로 저장해 두었다가 나중에 새 인스턴스로 만드는 방식을 제안했다.
  • 2014년 HTML 문서들은 <template>을 언어 안에 넣었다. template.content가 돌려주는 DocumentFragment를 복제하고 내용을 채운 뒤 실제 문서에 넣을 수 있다.

뉴스 사이트에는 같은 모양의 카드가 끝없이 나온다. 사진, 제목, 짧은 소개, 기사 링크. 한 장이라면 손으로 만들어도 된다. 스무 장째에는 HTML 문자열에서 따옴표 하나를 놓치는 순간 일이 커진다. 예전 동적 페이지는 빈 카드를 화면의 숨은 구석에 두거나 문자열을 이어 붙였다. 브라우저는 이미 HTML을 잘 읽었지만, 읽어 둔 구조를 잠시 맡아 둘 공식 보관함이 없었다.

2013년 2월 14일 W3C의 첫 공개 초안은 보관함을 제안했다. 작성자가 <template> 안에 마크업을 적으면 브라우저가 DOM 노드로 파싱한다. 그 구조는 아직 움직이지 않는 상태로 머문다. 스크립트가 필요할 때 새 인스턴스를 만들 수 있다. 편집부는 카드 틀을 먼저 준비하고, 오늘의 기사들이 들어올 때마다 한 장씩 채운다.

보관함의 주소가 직관적이지는 않다. 2014년 2월 HTML 5.1 작업 초안에 따르면 내용은 요소의 일반 자식이 아니라 template.content의 DocumentFragment에 들어간다. 이 조각은 브라우징 맥락이 없는 별도 문서에 속한다. 보관 중인 스크립트는 실행되지 않고, 입력 칸은 살아 있는 폼에 끼어들지 않는다. 템플릿 자체도 화면에 그려지지 않는다. 문을 열기 전까지 카드들은 창고에서 정렬만 마친다.

그 초안의 예제에는 고양이가 나온다. 표의 빈 한 줄을 템플릿에 넣고, 고양이 한 마리마다 줄을 복제해 정보를 채운 다음 표에 추가한다. 뉴스 카드도 같다. 복사본에 제목과 사진을 넣어 페이지에 올리고, 다음 기사에는 새 복사본을 쓴다. 원본을 그대로 남겨야 스물아홉 번째 기사에 스물여덟 번째 제목이 따라오지 않는다.

2014년 10월 28일 HTML5 권고안은 이 요소를 HTML 본문에 담았다. W3C 발행 이력에는 2013년 독립 초안과 2014년 작업반 노트가 나란히 남아 있다. 아이디어는 별도 서류철에서 HTML의 기본 서랍으로 자리를 옮겼다.

현재 HTML 표준도 template을 스크립트가 복제하고 문서에 삽입할 수 있는 HTML 조각으로 설명한다. 내용의 보관 방식과 복제 절차를 정하고, 요소 자체는 렌더링 결과에서 아무것도 나타내지 않는다고 밝힌다. 브라우저는 구조를 맡고, 편집자는 각 복사본의 기사와 게시 시점을 맡는다.

그렇게 화면에 아무것도 보이지 않는 요소가 바쁜 뉴스룸에서 꽤 많은 일을 한다. 브라우저는 카드를 읽고 만들고 기다린다. 독자는 완성된 기사 카드만 만난다. 창고 담당자가 유명해질 필요는 없다. 마감 전에 카드가 제자리에 있으면 된다.