핵심 요약
Invoker Commands API는 자바스크립트 코드 작성 없이 HTML 속성만으로 특정 요소의 상태를 조작할 수 있는 최신 브라우저 기능입니다. 버튼과 대상 요소를 직접 연결하여 다이얼로그나 메뉴의 열고 닫기를 간결하게 구현할 수 있습니다.
Invoker Commands API의 기본 개념
기존 웹 개발 방식에서는 버튼 클릭 시 요소를 토글하려면 addEventListener를 등록하고 대상의 상태를 직접 확인해야 했습니다. 하지만 인보커 커맨드 표준을 사용하면 button 요소에 commandfor 속성과 command 속성을 부여하는 것만으로 복잡한 상호작용을 처리할 수 있습니다.
주요 속성 비교
| 속성 이름 | 적용 대상 | 설명 |
|---|---|---|
| commandfor | button 요소 | 제어할 대상 요소의 ID를 지정합니다. |
| command | button 요소 | 실행할 동작을 지정합니다(예: show-modal, close, toggle). |
실행 코드 예제 구현 방법
브라우저에서 직접 테스트할 수 있는 HTML, CSS, JavaScript 구조입니다. 다이얼로그 컴포넌트를 자바스크립트 로직 없이 오직 HTML 속성 제어로만 동작하도록 구성했습니다.
index.htmlHTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Invoker Commands 예제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<h1>Invoker API 데모</h1>
<button commandfor="my-dialog" command="show-modal">모달 열기</button>
<dialog id="my-dialog">
<h2>대화상자 제목</h2>
<p>이 다이얼로그는 인보커 커맨드로 제어됩니다.</p>
<button commandfor="my-dialog" command="close">닫기</button>
</dialog>
</main>
<script src="app.js"></script>
</body>
</html>스타일 시트 구성
화면 중앙에 요소를 배치하고 시각적으로 구분하기 위한 최소한의 스타일 정의입니다.
style.cssCSS
body {
font-family: sans-serif;
background-color: #f4f4f9;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
}
dialog {
border: none;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}동작 확인 및 주의사항
이 API는 최신 웹 표준 사양이므로 사용하려는 브라우저의 지원 여부를 먼저 확인해야 합니다. 실험적 기능일 경우 플래그 활성화가 필요할 수 있습니다.
TIP
지원하지 않는 구형 브라우저를 위해 폴리필이나 대체 자바스크립트 코드를 함께 고려하는 것이 안전합니다.
대상 요소를 연결할 때 어떤 값을 넣어야 하나요?
commandfor 속성에 대상 요소의 고유 ID 값을 정확히 입력하면 됩니다.
기존 방식과 비교했을 때 가장 큰 장점은 무엇인가요?
자바스크립트 이벤트 핸들러 작성 없이 HTML 마크업만으로 UI 상태를 제어하여 코드 양을 크게 줄여줍니다.
완성 코드 예제
마무리
Invoker Commands API는 프론트엔드 개발에서 반복적으로 작성하던 이벤트 바인딩 코드를 획기적으로 줄여주는 유용한 표준입니다.
간단한 속성 설정만으로 UI 컴포넌트를 효율적으로 제어해 보시기 바랍니다.