HTML만으로 되는 동적 기능들 — 그리고 아직 남은 한계

자바스크립트의 영역으로 여겨지던 상호작용 기능들이 최근 몇 년 사이 브라우저의 HTML과 CSS 명세로 빠르게 흡수되고 있다. 웹 개발자 크리스 버넬(Chris Burnell)은 'HTML Day 2026' 행사를 계기로 만든 'HTML Can Do That' 페이지에서, 이제 스크립트 없이 순수 HTML만으로 구현할 수 있는 동적 기능들을 한데 모아 정리했다. 흥미로운 점은 이 페이지가 단순한 기능 자랑에 그치지 않는다는 것이다. 그는 2026년 8월 20일 업데이트를 통해, 브라우저 구현이 여전히 부실하거나 접근성 요구를 충족하지 못하는 지점을 오히려 더 분명히 드러내도록 내용을 손봤다고 밝혔다. 새 기능을 써보되, 가능한 한 접근성을 챙기라는 것이 그의 일관된 당부다.

스크립트 없이 만드는 팝오버와 다이얼로그

가장 눈에 띄는 사례는 팝오버(popover)다. HTML의 popover, popovertarget, popovertargetaction 속성만으로 바깥 영역 클릭(light dismiss)이나 Esc 키로 닫기가 동작하고, z-index를 신경 써서 최상단 레이어로 끌어올리는 관리도 필요 없다. 브라우저가 이른바 top layer를 알아서 처리해 준다. 모달 대화상자는 별도의 dialog 요소가 담당하는데, 원리는 팝오버와 비슷하다. 버넬은 이 페이지의 취지에는 다소 어긋난다면서도, 참고용으로 dialog를 자바스크립트에서 다루는 방법도 짧게 소개한다. .showModal()로 열고 .close()로 닫는 방식이다.

여기서 더 나아간 것이 command 및 commandFor 속성을 활용하는 인보커(invoker) 기능이다. 스크립트 없이 버튼이 dialog를 열고 닫도록 만들 수 있으며, 향후 다른 비(非)자바스크립트 기능의 토대가 될 것으로 기대된다. 다만 버넬은 현재 브라우저에 안정적으로 안착한 명령은 show-modal, close, request-close, toggle-popover, show-popover, hide-popover 정도라고 못 박는다. 값을 증감하거나 미디어 요소를 제어하고 텍스트를 복사하는 등의 인보커는 아직 미래의 이야기다.

아코디언, 지연 로딩, 숨은 콘텐츠 찾기

여러 개의 details 요소에 같은 name 속성을 부여하면, 하나를 열 때 나머지가 자동으로 닫히는 배타적 아코디언이 완성된다. 별도 스크립트가 필요 없다. 이미지의 loading 속성을 통한 지연 로딩도 마찬가지로, IntersectionObserver를 직접 쓰지 않고도 뷰포트에 가까워질 때 이미지를 불러온다. hidden="until-found" 역시 흥미로운데, 프래그먼트 링크로 해당 위치를 탐색하면 브라우저가 숨겨진 섹션의 hidden 속성을 자동으로 제거해 드러낸다. 다만 버넬은 이 기능이 아직 새롭고, 브라우저 기본 검색과는 잘 맞지만 스크린 리더의 검색 구현과는 잘 어울리지 않는다는 한계를 함께 짚는다. 지금 당장 쓰기보다는 훗날을 위해 눈여겨 둘 기능이라는 평가다.

폼 요소, 기대와 경고 사이

색상·범위·날짜 선택기는 이제 브라우저에 기본 내장되어 별도 라이브러리 없이 쓸 수 있다. 그러나 버넬의 어조는 여기서 확연히 조심스러워진다. 일부 폼 요소는 아직 미완성처럼 느껴지며, 기본 스타일이 브라우저마다 크게 다르고 접근성 경험이 매우 열악할 수 있다고 경고한다. datalist를 통한 네이티브 자동완성 역시 입력 유형별 지원이 들쭉날쭉하고 구현상 문제가 여럿 남아 있다고 지적하며, 에이드리언 로셀리(Adrian Roselli)의 글을 근거로 지금은 사용을 건너뛰고 향후 개선 여부를 지켜보라고 권한다.

실무자 관점에서 이 목록의 가치는 '이제 자바스크립트를 버려도 된다'는 결론이 아니라, 기능별로 성숙도가 크게 갈린다는 사실을 구분해 준다는 데 있다. 팝오버와 details 아코디언처럼 안정적으로 안착한 기능은 코드를 줄이고 유지보수 부담을 낮추는 실질적 선택지가 된다. 반면 커스텀 폼 컨트롤이나 hidden=until-found처럼 접근성과 브라우저 편차가 남은 기능은, 도입 전에 스크린 리더를 포함한 실제 사용 환경에서의 검증이 반드시 필요하다. 버넬 스스로도 자신을 전문가가 아니라고 밝히며 이 페이지를 상사나 자기 자신을 설득하는 근거로 삼지 말라고, 그리고 모두가 나와 같은 방식으로 웹을 이용하지는 않는다는 점을 잊지 말라고 덧붙인다. 새로운 HTML 기능을 즐기되 그 경계를 정확히 아는 태도야말로, 이 목록이 전하려는 진짜 메시지에 가깝다.