Jelly UI - 네이티브 HTML 폼 컨트롤에 소프트 바디 물리 효과 적용

10 hours ago 4

Jelly UI v1.1은 실제 폼 컨트롤과 말랑한 소프트 바디 물리 효과를 결합한 의존성 없는 웹 컴포넌트 라이브러리로, 40개 커스텀 엘리먼트를 제공함
하나의 모듈 스크립트로 설치하며 다크 모드, 운영체제 테마 자동 추적, 강조색 변경, 오른쪽에서 왼쪽으로 쓰는 RTL 배치를 지원함
버튼은 네이티브 <button>, 슬라이더는 숨겨진 range 입력을 이용해 키보드 조작·스크린 리더·폼 참여를 위한 네이티브 의미 구조를 유지함
체크박스와 입력창부터 토스트·탭·다이얼로그까지 다양한 요소에 눌림·늘어남·물결·튕김 같은 촉각적 애니메이션을 적용함
WCAG AA 색상 토큰과 ARIA 패턴을 내장해 부드러운 시각 효과를 살리면서도 접근 가능한 제품 인터페이스를 구성할 수 있음

설치와 테마

Jelly UI는 의존성 없이, 40개 커스텀 엘리먼트와 하나의 <script type="module"> 태그만으로 사용할 수 있음 <script type="module" src="https://jelly-ui.com/package.js"></script>; <jelly-theme mode="auto"> <jelly-button variant="mint">Publish</jelly-button> </jelly-theme>
<jelly-theme>는 하위 트리에 디자인 토큰을 한정 적용하는 테마 공급자임
- mode는 auto, light, dark를 지원해 운영체제 설정을 따르거나 특정 테마를 강제할 수 있음
- accent로 강조색을 다시 지정할 수 있음
공통 색상 변형은 azure, rose, amber, mint, graphite, platinum, white이며, 크기는 주로 small, medium, large로 구성됨

버튼과 동작 요소

<jelly-button>은 내부에 실제 네이티브 <button>을 넣어 키보드와 스크린 리더를 지원하는 캡슐형 버튼임
- 색상·크기와 pill·square 형태, 비활성화 및 블록 배치를 설정할 수 있음
<jelly-icon-button>은 아이콘 하나에 맞춘 사각형 또는 원형 버튼임
- label 속성으로 스크린 리더가 인식할 이름을 지정함

폼 입력 컨트롤

<jelly-checkbox>는 폼에 참여하며 checked와 불확정 상태(indeterminate)를 지원하고, 상태가 바뀔 때 젤리 사각형이 튀어 오름
<jelly-input>은 text, email, password용 한 줄 입력 필드임
- 포커스를 받으면 표면이 들리고 테두리가 나타나며, 입력할 때마다 캐럿 위치에서 물결이 번짐
- disabled와 readonly를 지원함
<jelly-label>은 for로 컨트롤과 연결됨
- 클릭하면 대상에 포커스하고 라벨 텍스트가 접근 가능한 이름이 되며, 필수 여부와 크기를 지정할 수 있음
<jelly-otp>는 숫자마다 상자 하나를 제공하는 일회용 코드 입력기임
- 입력, 백스페이스, 화살표 키, 붙여넣기를 처리하며 길이·색상·크기·비활성화를 설정할 수 있음
<jelly-radio>는 같은 루트에서 동일한 name을 공유하는 항목끼리 그룹을 형성함
- 이동식 tabindex와 문서 방향을 고려한 화살표 키 탐색을 지원함
<jelly-radio-group>은 jelly-radio를 위한 라벨 있는 radiogroup 컨테이너임
- 범례, 가로·세로 흐름 배치, 자식 요소로의 크기 전달을 제공함
<jelly-range>는 최솟값과 최댓값 구간을 고르는 이중 핸들 슬라이더임
- 두 손잡이에 role="slider", 포커스, ARIA를 적용하며 드래그할 때 젤리 손잡이가 눌림
<jelly-segmented>는 상호 배타적인 선택지를 담은 캡슐형 트랙임
- 선택 표시는 구간 사이를 이동하면서 기울고 늘어나는 젤리 알약 형태로 동작함
<jelly-select>는 ARIA combobox·listbox 패턴을 사용하는 폼 연동 드롭다운임
- 트리거와 옵션 패널 모두 소프트 바디 표면으로 구성됨
- 패널은 필드에서 펼쳐지며 아래 공간이 부족하면 위쪽으로 전환됨
<jelly-slider>는 단일 값을 선택하는 슬라이더임
- 숨겨진 네이티브 range 입력이 의미 구조와 폼 참여를 담당하고, 화면에는 눌리는 젤리 손잡이가 표시됨
<jelly-switch>는 드래그 가능한 스위치로, 손잡이가 액체 방울처럼 늘어나고 꺼짐·켜짐 색상이 교차 전환됨
<jelly-textarea>는 여러 줄 입력에 따라 최소·최대 높이 사이에서 자동으로 커짐
- 표면도 높이에 맞춰 늘어나며 입력 시 캐럿 위치에서 물결이 발생하고, disabled와 readonly를 지원함

상태와 피드백

<jelly-alert>는 info, success, warning, danger 네 가지 톤과 선택적인 닫기 버튼을 제공하는 배너임
<jelly-badge>는 배지·태그·상태 표시에 쓰는 작은 요소로, 텍스트가 바뀔 때 튀어 오름
- 채움·외곽선, 알약·사각형 형태와 live, instant 동작을 설정할 수 있음
<jelly-progress>는 진행에 따라 채움의 앞부분이 흔들리는 진행 표시줄임
- 불확정 모드에서는 덩어리가 양쪽 벽 사이를 튕김
<jelly-skeleton>은 반짝임 대신 부드럽게 호흡하듯 흔들리는 로딩 자리표시자임
- line, rect, circle 형태를 지원함
<jelly-spinner>는 세 점 사이를 이동하는 점액 덩어리형 dots와 형태를 바꾸며 회전하는 blob 표시기를 제공함
<jelly-toaster>는 인라인 끝 방향에서 나타났다가 사라지는 토스트 알림을 관리함
- 일반적으로 jellyToast('Saved!', { tone: 'success' }) 헬퍼로 호출함
- 배치된 요소에 position="bottom"을 주면 알림 스택이 위로 자라남

콘텐츠 표면

<jelly-accordion>은 여러 <jelly-collapsible> 항목을 묶음
- single 모드에서는 하나가 열릴 때 나머지가 튕기듯 닫힘
<jelly-card>는 콘텐츠 아래에 놓이는 젤리 표면 컨테이너임
- squish를 추가하면 부드러운 쿠션처럼 눌리면서 버튼 역할을 함
<jelly-chip>은 정적 라벨, 전환 가능한 필터 또는 제거 가능한 태그로 사용할 수 있음
- 선택 가능·선택 상태·제거 가능·비활성화 여부를 설정함
<jelly-collapsible>은 헤더 버튼으로 패널을 튕기듯 열고 닫는 펼침·접기 영역임
- 텍스트가 아니라 표면이 움직이도록 구성됨
<jelly-divider>는 가로·세로 또는 라벨이 있는 가는 구분선임
<jelly-kbd>는 눌러 볼 수 있는 젤리 키캡임
- key로 실제 키와 연결하면 페이지 어디서든 해당 키를 누르는 동안 키캡도 내려감

탐색과 레이아웃

<jelly-resizable>은 젤리 구분선을 드래그하거나 키보드로 크기를 조절하는 패널 그리드임
- row, vertical, both 방향을 지원함
<jelly-tabs>는 실제 tablist 의미 구조를 사용하는 탭 보기임
- 젤리 알약 형태의 선택 표시가 이동하고 탭 패널이 튕기며 나타남

오버레이

<jelly-dialog>는 젤리처럼 튀며 나타나는 모달 대화상자임
- 페이지를 잠그고 닫힌 뒤 이전 위치로 포커스를 반환함
- Escape 키, 닫기 버튼 또는 배경 클릭으로 닫을 수 있음
<jelly-drawer>는 끝에서 약간 넘어갔다 돌아오는 스프링 효과로 나타나는 플로팅 시트임
- 인라인 시작·끝 또는 아래쪽에서 열 수 있음
<jelly-popover>는 클릭으로 여는 비모달 패널임
- 트리거에 고정되며 Escape 키나 외부 클릭으로 닫힘
- top, bottom, start, end 배치를 지원함
<jelly-tooltip>은 마우스를 올리거나 키보드 포커스를 받을 때 트리거 위에 테마가 적용된 말풍선을 표시함
- 네 방향 배치와 세 가지 크기를 지원함