버셀 UI SDK 베타, AI가 메뉴의 키보드 동작까지 만든다

버셀이 11월 12일 웹 화면 개발 도구 UI SDK를 베타로 공개했다. 코딩 에이전트는 메뉴나 검색창을 만들 때 키보드 이동, 항목 선택, 포커스 복귀처럼 반복되는 동작을 가져와 조합할 수 있다. 같은 동작 정의를 리액트, 뷰, 스벨트, 솔리드, 웹 컴포넌트에 연결할 수 있다. 코어 패키지의 공개 베타 버전은 0.1.0-beta.1이다.

검색창을 만들 때 화면의 모양과 키보드 동작을 나눠 다룰 수 있다. 버셀의 예제에는 검색어가 있을 때만 나타나는 지우기 버튼이 있다. 버튼을 누르면 검색어가 사라지고 키보드 입력 위치가 검색창으로 돌아간다. 개발팀은 프로젝트에 맞춰 버튼의 모양과 배치를 정하고, 입력 위치를 되돌리는 동작은 별도로 가져올 수 있다. 에이전트에 화면을 맡겼을 때도 요청에 포함된 상호작용을 코드에 반영할 수 있는 방식이다.

메뉴와 자동완성이 공유하는 동작

버셀이 소개한 선택 메뉴에는 목록을 열고 닫기, 항목 고르기, 글자를 입력해 목록에서 해당 항목 찾기라는 동작이 들어간다. 이 동작을 다른 방식으로 조합하면 검색어를 쓰면서 후보를 좁혀 가는 자동완성이나 콤보박스도 구성할 수 있다. 팀이 같은 팝업 닫기 규칙을 여러 화면에서 사용하려면 각 화면의 버튼과 목록에 그 동작을 연결하면 된다.

공식 문서의 아이콘 선택기 예시는 이런 조합이 화면에서 어떻게 보이는지 보여 준다. 팝업은 버튼 근처에 열리고, 방향키로 아이콘을 옮겨 가며 고른다. 검색 결과가 갱신되면 스크린 리더에 결과 수를 알리도록 했다. 문서는 완성된 구성요소에서 키 입력, 포커스, 접근성 속성을 점검하는 테스트 도구도 제공한다. 예시의 동작은 문서에서 확인했으며 특정 프로젝트에 연결한 결과는 프로젝트별로 달라질 수 있다.

별점 예시에서는 다섯 개의 별이 하나의 그룹을 이룬다. 탭 키로는 그룹에 한 번 들어가고, 안에서는 방향키로 별 사이를 움직인다. 별을 고를 때마다 값과 변경 이유가 앱에 전달된다. 부모 화면이 별점 값을 관리하는 경우에도 화면에 표시할 값은 같은 정의에 전달할 수 있다. 이 예시는 키보드 초점의 이동과 앱에 남기는 선택값을 각각 정의하는 방법을 보여 준다.

화면을 그리는 코드와 동작 정의를 분리

동작 정의에는 현재 선택한 값과 사용자가 실행할 수 있는 동작, 화면에 연결할 각 부분이 들어간다. 예를 들어 검색창에는 입력칸과 지우기 버튼이 있고, 입력값을 바꾸는 동작이 두 부분을 연결한다. 프로젝트는 이 정의를 리액트 같은 프레임워크의 요소로 연결한다. 버셀은 공식 저장소에서 같은 검색창 정의를 다섯 가지 방식으로 그리는 예시를 제공한다.

팀은 테두리, 색상, 간격 같은 스타일을 자체 디자인에 맞게 붙일 수 있다. 공식 문서는 동작의 상태에 따라 화면이 어떻게 보일지 정하는 방법도 설명한다. 설치한 패키지에는 해당 버전의 문서가 들어 있다. 버셀이 제공하는 에이전트용 스킬은 이 문서를 바탕으로 구성요소를 만들도록 안내한다. 리액트에서 쓰려면 버전 19 이상이 필요하다.

스타일 문서의 복사 버튼은 복사가 끝났는지 나타내는 속성을 버튼에 붙인다. 앱은 그 속성을 이용해 배경색을 바꿀 수 있다. 볼륨 막대의 너비처럼 숫자로 달라지는 값은 CSS 변수에 담는 예시도 있다. 화면에 적용할 스타일은 서버가 처음 보내는 HTML에도 들어가므로, 자바스크립트가 이어서 화면을 제어하기 전부터 표시할 수 있다.

앱이 에이전트에 공개할 동작을 정한다

UI SDK에는 앱에 연결한 에이전트가 구성요소의 상태와 동작을 읽을 수 있게 하는 기능도 있다. 프로젝트 이름을 입력하는 칸이라면 앱은 현재 값과 값을 바꾸는 동작을 제공할 수 있다. 앱의 코드는 요청을 허용하거나 거부하고, 값이 바뀔 때 에이전트에서 온 요청인지 확인할 수 있다. 화면을 만드는 데 쓰는 동작과 실행 중인 앱이 에이전트에 공개하는 동작은 각각 설정한다.

버셀은 프로젝트 설정 화면에서 이름과 구성원, 알림 설정을 바꾼 뒤 저장하는 작업을 두 방식으로 비교했다. 브라우저 도구와 SDK의 연결 기능을 각각 세 번 실행했을 때 소요 시간 중앙값은 41초와 16초였다. 회사 문서에 제시된 수치는 같은 작업과 모델을 사용한 자체 실험 결과다. SDK는 아파치 2.0 라이선스로 공개됐으며 베타 기간에는 API가 바뀔 수 있다.