웹사이트에서 버튼이 하는 일은 대부분 뻔합니다. 창을 열고, 닫고, 팝업을 토글합니다. 그런데 지금까지는 이 뻔한 일조차 버튼마다 자바스크립트를 붙여야 했습니다. 버튼에 아이디를 달고, 스크립트에서 그 아이디를 찾아 이벤트 리스너를 걸고, 열릴 대상을 또 찾아 메서드를 호출하는 세 단계 배선입니다. 버튼이 열 개면 배선도 열 벌입니다.
버튼과 대상을 HTML이 직접 잇는다
Invoker Commands는 이 배선을 HTML 속성 두 개로 줄입니다. 버튼에 commandfor로 대상 요소의 아이디를 적고, command로 할 일을 적으면 끝입니다. 예를 들어 command 값에 show-modal을 적은 버튼은 지정한 dialog를 모달로 열고, close를 적은 버튼은 닫습니다. popover 요소라면 toggle-popover, show-popover, hide-popover로 띄우고 감춥니다. 스크립트는 한 줄도 필요 없습니다.
단순히 코드가 줄어드는 것이 아니다
이 방식의 진짜 가치는 버튼의 의도가 마크업에 드러난다는 점입니다.
- HTML만 읽어도 이 버튼이 어떤 요소에 무슨 일을 하는지 보입니다. 스크립트 파일을 뒤질 필요가 없어 유지보수가 쉬워집니다.
- 자바스크립트가 로드되기 전에도 버튼이 동작합니다. 느린 회선에서 손님이 버튼을 눌렀는데 아무 일도 일어나지 않는 '죽은 버튼' 구간이 사라집니다.
- 브라우저가 관계를 알고 있으니 접근성 연결도 함께 챙겨집니다. 보조기기 사용자에게 버튼과 대상의 관계가 자연스럽게 전달됩니다.
맞춤 동작도 같은 문법으로
기본 제공되는 명령 외에 --로 시작하는 맞춤 명령을 정의할 수도 있습니다. 대상 요소에서 command 이벤트 하나만 받으면 어떤 버튼이 어떤 명령을 보냈는지 알 수 있으니, 이벤트 리스너를 버튼 숫자만큼 늘리던 구조가 대상 요소 하나로 모입니다. 갤러리 이미지 전환, 탭 전환처럼 반복되는 인터랙션일수록 효과가 큽니다.
지금 써도 될까
Invoker Commands는 크롬과 엣지에 먼저 실렸고 다른 브라우저도 뒤따르고 있습니다. 다행히 도입 부담이 거의 없습니다. 지원하지 않는 브라우저를 위한 공식 폴리필이 가볍게 제공되고, dialog와 popover라는 이미 표준화된 요소 위에서 동작하기 때문입니다. 새로 만드는 사이트라면 모달과 팝업의 열고 닫기부터 이 방식으로 시작하고, 기존 사이트는 자바스크립트 배선을 걷어낼 때 하나씩 바꾸면 됩니다.
기본기가 곧 속도다
모달 라이브러리를 걷어내고 dialog로, 팝업 코드를 걷어내고 popover로, 이제 버튼 배선까지 commandfor로 옮기면 사이트는 눈에 띄게 가벼워집니다. CYAN은 이렇게 브라우저가 표준으로 품은 기능을 먼저 활용해, 작은 회사의 웹사이트도 무거운 라이브러리 없이 빠르고 오래가는 구조로 만드는 것을 원칙으로 삼고 있습니다.
