Interest Invoker 및 Command 속성

Open UI 그룹은 두 가지 새로운 HTML 속성을 표준화하고 있습니다. 클릭으로 실행되는 동작에는 command를, 마우스를 올리거나 포커스를 맞췄을 때 발생하는 “관심”에는 interesttarget을 사용합니다. 관심 동작은 툴팁과 미리 보기의 기반이 됩니다. 두 속성 모두 기존에는 JavaScript가 필요했던 동작을 선언적으로 HTML에 추가합니다.

command="show-modal"과 commandfor="dialog-id"를 지정한 버튼은 JavaScript 없이 대화 상자를 표시하므로, 수동으로 dialog.showModal()을 호출할 필요가 없습니다. 그 밖의 명령으로는 command="close"와 command="toggle-popover", command="show-popover"이 있습니다.

초기 명령 집합은 일반적인 사용자 인터페이스 패턴을 대상으로 합니다. 기본 제공

기본 제공 명령 외에도 명세에서는 “--”로 시작하는 사용자 지정 명령 문자열을 허용합니다. 대상 요소는 JavaScript에서 처리할 수 있는 command 이벤트를 받습니다. 예를 들면 다음과 같습니다. el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

interesttarget 속성은 요소의 “관심” 대상을 지정하며, 일반적으로 마우스를 올리거나 포커스를 맞췄을 때 나타나는 툴팁을 가리킵니다. 브라우저가 타이밍(300ms의 호버 의도 지연), 위치 지정(앵커 위치 지정을 사용), 닫기를 자동으로 처리합니다.

힌트 팝오버 모드는 관심이 발생했을 때 나타나는 툴팁 형태의 팝오버를 위해 설계되었습니다. 이러한 팝오버는 모달이 아니며 포커스를 빼앗지 않고, 관심이 사라지면 닫힙니다. 관심 대상과 힌트 팝오버를 함께 사용하면 HTML 속성 두 개만으로 기본 제공 툴팁을 만들 수 있습니다.

기본 제공 대화 상자는 포커스를 가두는 기능을 처리하고, 기본 제공 팝오버는 쌓임 순서를 처리하며, 기본 제공 관심 호출자는 호버 의도 타이밍을 처리하고 화면 낭독기에 요소 간 관계를 알립니다. 사용자 지정 JavaScript 구현을 이러한 선언적 기본 구성 요소로 대체하면 접근성 품질이 안정적으로 향상됩니다.

이 기능들은 아직 표준화가 진행 중입니다. 정확한 속성 이름과 명령 집합은 바뀔 수 있습니다. 브라우저 구현은 먼저 크로미엄에서 등장하고 있습니다. 이름이 안정되고 최소 두 개의 브라우저에서 제공될 때까지, 즉 앞으로 1~2년 내로 예상되는 시점까지는 실제 서비스에 사용하지 않는 것이 좋습니다.

이 기능들은 수백만 번 작성되고 다시 작성된 JavaScript를 각각 대체합니다. 대화 상자 관리, 팝오버 호출, 툴팁 동작이 그 예입니다. 이러한 패턴을 HTML로 옮기면 페이지 용량이 줄고 일관성이 향상되며, 브라우저가 최적화를 적용할 수 있습니다.

Open UI 커뮤니티 그룹(open-ui.org)은 이 작업의 상당 부분을 이끌고 있습니다. 새로운 HTML 요소와 속성을 제안하고 시제품을 만들며 표준화 과정을 지원합니다. 최신 제안은 이들의 블로그에서 확인하십시오.

명령, 관심 대상, 팝오버, 대화 상자, 앵커 위치 지정, 뷰 전환, 사용자 지정 선택 목록은 모두 구성 요소 라이브러리의 패턴을 플랫폼에 도입하려는 하나의 일관된 흐름에 속합니다. 각각은 작지만, 함께 보면 수년 만에 HTML의 사용자 인터페이스 어휘가 가장 크게 확장되는 변화입니다.

제안(open-ui.org)을 추적하고, 플래그를 활성화한 크로미엄에서 실험하며, 기능이 안정화되는 대로 도입할 계획을 세우십시오. 기존 코드베이스를 점검해 보십시오. 대화 상자, 팝오버, 툴팁을 연결하는 데 JavaScript가 얼마나 사용되는지 세어 보십시오. 이러한 코드는 몇 번의 버전 출시 안에 대체될 대상으로 지정되어 있습니다.

버튼의 명령 속성은 어떤 용도로 사용되나요?

새롭게 등장한 두 가지 기능은 HTML의 선언적 사용자 인터페이스 어휘를 확장합니다. 클릭으로 실행되는 동작에는 명령 속성과 명령 대상 속성을 사용하고(모달 표시, 팝오버 전환), 마우스를 올리거나 포커스를 맞췄을 때 나타나는 툴팁에는 관심 대상과 힌트 팝오버를 사용합니다. 두 기능 모두 일반적인 JavaScript 패턴을 HTML 속성으로 대체해 접근성을 높이고 번들 크기를 줄입니다. 아직 발전 중이므로 Open UI를 추적해 안정화 과정을 확인하고, 브라우저 지원이 제공되면 출시하십시오.