요금 안내 페이지 하단의 '자주 묻는 질문' 여섯 줄. 질문을 누르면 답이 펼쳐지는 그 흔한 아코디언을 만들기 위해 지금도 많은 사이트가 jQuery 플러그인이나 아코디언 라이브러리를 통째로 불러옵니다. 정작 펼쳐지는 답변은 두세 문장인데, 그걸 여닫는 코드가 수십 킬로바이트인 셈입니다.
HTML에 이미 들어 있던 아코디언
사실 브라우저에는 아코디언이 처음부터 내장돼 있었습니다. details와 summary 태그입니다. summary에 질문을, 그 아래에 답변을 넣으면 클릭으로 여닫는 동작이 자바스크립트 한 줄 없이 완성됩니다. 키보드 조작과 스크린리더 안내까지 브라우저가 알아서 처리하니 접근성도 따라옵니다.
name 속성 하나로 '하나만 열리는' 아코디언
FAQ에서 흔히 원하는 동작이 '하나를 열면 나머지는 닫히는' 방식입니다. 예전엔 이걸 위해 스크립트로 형제 요소를 찾아 닫아줘야 했지만, 이제 여러 details에 같은 name 속성만 붙이면 라디오 버튼처럼 한 번에 하나만 열립니다. 크롬, 엣지, 사파리, 파이어폭스 모두 지원합니다.
뚝 끊기던 열림을 부드럽게 — interpolate-size
details의 유일한 아쉬움은 열릴 때 '뚝' 하고 한 번에 펼쳐진다는 점이었습니다. 높이가 auto인 요소는 CSS 전환이 안 됐기 때문입니다. 이제 CSS에 interpolate-size: allow-keywords 한 줄을 선언하면 auto 높이로의 전환이 애니메이션됩니다. details의 ::details-content 가상 요소에 transition을 걸면 답변이 스르륵 펼쳐지는, 라이브러리로 만들던 그 느낌이 그대로 납니다. 아직 지원하지 않는 브라우저에서는 그냥 즉시 열릴 뿐이라 깨질 걱정도 없습니다.
검색엔진에게도 보이는 답변
스크립트로 숨겨놓은 콘텐츠와 달리 details 안의 답변은 처음부터 HTML에 존재합니다. 검색엔진이 질문과 답을 그대로 읽을 수 있어 FAQ 콘텐츠가 검색 노출 자산이 됩니다. 페이지 내 찾기(Ctrl+F)로 검색하면 닫혀 있던 답변이 자동으로 펼쳐지는 브라우저 동작도 덤입니다.
작은 사이트일수록 기본기가 무기다
방문자가 많지 않은 작은 회사 사이트일수록 첫 화면이 가볍고 빨라야 합니다. 아코디언 하나, 툴팁 하나에 라이브러리를 더하는 습관이 쌓이면 사이트는 조금씩 무거워집니다. CYAN은 이렇게 브라우저가 이미 제공하는 기능을 먼저 쓰고, 정말 필요한 곳에만 스크립트를 더하는 방식으로 빠르고 오래가는 웹사이트를 만듭니다. 우리 사이트의 FAQ가 아직도 플러그인 위에 서 있다면, 이제 HTML 두 줄로 돌아올 때입니다.