Jelly UI, 촉각적 웹 컴포넌트의 실험

작은 UI 라이브러리가 던진 질문

Jelly UI는 "soft-body physics"를 네이티브 HTML 폼 컨트롤에 얹은 웹 컴포넌트 라이브러리다. 소개 페이지는 0개 의존성, 40개 커스텀 요소, 스크립트 1개, WCAG AA 색상 토큰, 다크 모드, RTL 지원을 내세운다. 겉보기에는 재미있는 버튼과 세그먼트 컨트롤이지만, AI 앱이 빠르게 늘어나는 지금 더 중요한 질문을 건드린다. 생성형 기능이 복잡해질수록 사용자는 더 안정적인 폼, 토글, 메뉴, 상태 표시를 원한다.

MDN의 Web Components 문서는 캡슐화된 커스텀 요소가 프레임워크 밖에서도 재사용될 수 있음을 설명한다. MDN의 HTML 폼 안내는 폼이 웹 상호작용의 기본 단위라는 점을 다시 상기시킨다. Jelly UI가 흥미로운 지점은 이 기본 단위를 버리지 않고 촉각적 표현을 더한다는 점이다.

AI 앱에서 폼이 다시 중요해진다

AI 제품은 채팅창 하나로 시작했지만 이제 워크플로 앱이 되고 있다. 모델 선택, 도구 권한, 파일 범위, 실행 모드, 비용 한도, 데이터 보존 기간 같은 설정이 늘어난다. 이때 UI가 장식에 치우치면 사용자는 어떤 상태가 활성화됐는지 놓친다. Brainless Agent UI에서 본 것처럼 에이전트 앱에는 이미 익숙한 컴포넌트 규칙이 필요하다.

Jelly UI의 "실제 폼 컨트롤" 접근은 이 문제에 맞다. 커스텀 div 버튼처럼 보이지만 키보드와 스크린리더가 어색한 컨트롤은 엔터프라이즈 도입에서 바로 문제가 된다. W3C WCAG 2.2는 인지 가능성, 운용 가능성, 이해 가능성, 견고성을 접근성 원칙으로 둔다. AI 기능이 강해질수록 이 원칙은 선택 사항이 아니라 품질 기준이 된다.

한국 개발자에게 필요한 적용 방식

한국 SaaS와 사내 도구는 대개 빠른 기능 추가에 집중한다. 하지만 AI 기능은 실수 비용이 크다. "자동 실행", "외부 전송", "전체 저장소 접근" 같은 옵션은 사용자가 눈으로 명확히 구분해야 한다. Jelly UI 같은 촉각적 컴포넌트는 이런 상태를 더 잘 느끼게 만들 수 있지만, 모션을 기능 설명의 대체물로 쓰면 안 된다.

실무에서는 세 가지를 먼저 확인해야 한다. 첫째, 키보드만으로 모든 조작이 가능한가. 둘째, 스크린리더에서 컨트롤 이름과 선택 상태가 읽히는가. 셋째, 폼 제출 시 실제 값이 예측 가능하게 전달되는가. Tailwind 구조와 AI 코딩 유지보수에서 다룬 것처럼 스타일보다 구조가 오래 간다.

디자인 시스템의 다음 기준

Jelly UI는 거대한 디자인 시스템이 아니다. 오히려 작아서 의미가 있다. AI 앱 개발자는 매주 새 기능을 붙이면서도 권한, 모드, 실행 상태를 명확히 표현해야 한다. Web Components는 React, Vue, Svelte, 정적 HTML 사이에서 공통 컴포넌트를 공유할 수 있는 선택지가 된다. MDN의 ARIA 문서는 네이티브 의미를 유지할 수 없을 때 보조 역할을 설명하지만, 가능하면 처음부터 의미 있는 요소를 쓰는 편이 낫다.

결국 Jelly UI가 보여준 신호는 "재미있는 UI"보다 "기본 컨트롤을 더 풍부하게 만들 수 있다"는 점이다. AI 제품의 차별화가 모델 성능만으로 어려워질수록, 사용자가 실수하지 않게 돕는 작은 인터페이스 품질이 경쟁력이 된다. GPT-Live 음성 에이전트 인터페이스처럼 입력 방식이 늘어날수록 시각적 폼과 접근성의 역할도 더 커진다.

자주 묻는 질문

Q1: Jelly UI는 AI 전용 라이브러리인가요?

A: 아니다. 일반 웹 컴포넌트 라이브러리지만 AI 앱의 설정, 권한, 실행 상태 UI에 잘 맞는 질문을 던진다.

Q2: 웹 컴포넌트가 React 컴포넌트보다 낫나요?

A: 항상 그렇지는 않다. 프레임워크 독립성이 필요하거나 여러 스택에서 공유해야 할 때 장점이 커진다.

Q3: 모션이 접근성을 해치지 않나요?

A: 가능성이 있다. 사용자는 모션 감소 설정, 명확한 포커스, 충분한 대비를 기대한다.

Q4: 한국 서비스가 바로 도입해도 되나요?

A: 파일럿은 가능하다. 다만 브라우저 지원, SSR, 폼 제출, 키보드 내비게이션을 먼저 테스트해야 한다.

Q5: AI 앱 UI의 핵심은 무엇인가요?

A: 모델 기능보다 사용자의 선택 상태와 실행 범위를 분명하게 보여주는 것이다.