요약

  • details와 summary는 독자의 요청에 따라 브라우저가 펼치고 접는 기본 공개 장치를 만든다.
  • 같은 name을 쓰는 문들은 한쪽을 열면 다른 쪽이 닫히는 배타적 묶음이 될 수 있다.

긴 웹페이지는 서랍을 책상 위에 쏟아 놓은 모습이 되기 쉽다. 설명과 선택 사항과 세부 정보가 한꺼번에 눈에 들어온다. 개발자는 스크립트로 접히는 칸을 만들 수 있었다. HTML은 더 작은 도구를 보탰다. <details> 앞부분에 <summary>를 두면 브라우저가 경첩을 맡는다. 독자는 문패를 보고 열지 결정한다. 엄청난 묘기는 아니지만, 매일 쓰는 서랍에는 이런 손잡이가 가장 고맙다.

W3C가 2010년 3월 공개한 첫 HTML 마크업 초안은 details와 summary를 새 요소로 표시했다. details를 요청할 때 추가 정보를 얻는 장치로 설명하고, 불리언 속성 open을 제시했다. 문서에 적힌 설계의 핵심은 접힌 내용도 문서에 남겨 두면서 펼치는 행위를 HTML의 정식 어휘로 적을 수 있게 한 데 있다.

2011년 W3C 마크업 참고 문서도 같은 짜임새를 이어 갔다. 먼저 summary라는 문패가 오고, open은 안쪽을 보여 줄지 정한다. 어떤 칸인지 설명하는 관계가 다른 파일의 클릭 프로그램에만 묶이지 않는다. 다만 안에 무엇을 넣고 문패를 어떻게 쓸지는 여전히 작성자 몫이다. “더 보기”는 짧다. 독자가 무엇을 더 보게 될지 알아맞혀야 한다는 점까지 짧아지지는 않는다.

현재 HTML 표준은 움직임을 자세히 규정한다. 첫 번째 summary 자식 요소가 설명 표지가 되며, 없으면 브라우저가 표지를 제공해야 한다. open이 없을 때는 표지만 보이고, 있으면 내용도 보인다. 사용자가 열거나 닫으라고 하면 브라우저가 그 속성을 붙이거나 뗀다. toggle 이벤트는 상태 변화를 알린다. 문서의 구조, 화면의 상태, 사람의 동작이 짧은 규칙으로 이어진다.

문패 옆의 작은 삼각형에도 표시 규칙이 있다. 닫혔을 때와 열렸을 때 모양이 달라진다. 눈부신 장식은 아니지만 어디를 누르고 지금 어떤 상태인지 알려 준다. 진행 상황의 세부 사항이나 가끔 쓰는 설정, 긴 참고 문서가 이 익숙한 신호를 활용할 수 있다. 좋은 전등 스위치는 사용 설명서보다 손이 먼저 찾아간다.

이제 문끼리의 질서도 정할 수 있다. 여러 details가 같은 name을 가지면 하나를 열 때 열려 있던 다른 문이 닫힌다. 브라우저가 배타적인 아코디언을 기본 동작으로 만든다. 표준 문서도 여러 칸을 함께 봐야 하는 사람에게 이 방식이 답답할 수 있다고 경고한다. 화면은 정돈되지만 독자는 복도를 오가며 다시 문을 열어야 한다. 깔끔함의 비용은 사람의 시간이다.

이 작은 장치는 역할을 선명하게 나눈다. 작성자는 방의 배치와 문패, 이웃 문을 닫을 규칙까지 정한다. 브라우저는 경첩을 움직인다. 독자는 첫 손짓을 결정한다. 좋은 문패는 안에 든 것을 정확히 알려 주고, 좋은 설계는 필요한 두 칸을 나란히 볼 수 있게 한다. HTML이 경첩을 주었다고 집의 동선까지 대신 설계해 주지는 않는다.