Jelly UI: 네이티브 HTML 폼 컨트롤을 위한 소프트 바디 물리 효과

Jelly UI는 네이티브 HTML 폼 컨트롤에 소프트 바디 물리 효과를 도입하여 버튼, 체크박스, 슬라이더와 같은 요소들이 변형되고 사용자 상호작용에 반응하도록 하는 디자인 시스템입니다. 이 라이브러리는 "젤리 같은" 재질의 물리적 특성을 시뮬레이션하여 웹 인터페이스에 더 유기적이고 촉각적인 느낌을 제공하는 것을 목표로 합니다.

기술적 구현 및 성능

Jelly UI는 물리 시뮬레이션을 처리하기 위해 RequestAnimationFrame (RAF) 애니메이션 루프를 사용합니다. 하지만 데모 사이트에 대한 기술적 분석 결과 상당한 성능 오버헤드가 발견되었습니다. 이 라이브러리는 페이지의 모든 컴포넌트에 대해 8ms마다 애니메이션 루프를 실행하며, 이는 매 프레임마다 전체 문서의 리페인트를 유발합니다.

한 비평가는 "JellyEngine"이 포인터 이벤트가 발생할 때만 애니메이션을 계산하는 대신, 상호작용 여부와 관계없이 페이지의 모든 활성 컴포넌트에 대해 물리 효과를 재계산한다고 지적했습니다. 이러한 방식은 특히 Opera를 사용하는 MacBook M3 Pro와 같은 특정 하드웨어 구성에서 체감되는 지연 현상을 초래합니다.

사용자 경험 및 접근성

이 라이브러리는 시각적 참신함을 제공하지만, 몇 가지 UX 및 접근성 문제를 야기합니다:

모션 및 접근성

Jelly UI는 전정 기관 장애가 있는 사용자를 위한 중요한 기능인 @media (prefers-reduced-motion: reduce) 미디어 쿼리를 준수합니다. 하지만 사용자들은 데모 사이트에서 시스템 설정 변경 없이 애니메이션을 수동으로 켜거나 끌 수 있는 기능을 제공해야 한다고 제안했습니다.

상호작용 모델

일부 사용자들은 상호작용 모델이 일관성 없다고 느꼈습니다. 예를 들어, 요소를 클릭하고 누른 상태에서 마우스를 떼기 전에 다른 곳으로 이동하면 버튼에서는 클릭으로 인식될 수 있지만 체크박스에서는 그렇지 않을 수 있습니다. 또한, 슬라이더 컨트롤은 핸들이 마우스 커서를 따라가지 못하고 뒤처지는 눈에 띄는 지연 현상이 나타나는데, 일부 사용자들은 이를 촉각적인 느낌보다는 방해 요소로 느꼈습니다.

보조 기술 활용 가능성

비판에도 불구하고, 이 라이브러리의 물리 기반 접근 방식은 미세 운동 제어 능력이 제한적인 사용자에게 도움을 될 수 있는 잠재력이 있습니다. 클릭 영역의 크기를 키우거나 타겟의 모양을 변경하여 조준 능력을 개선함으로써, 이 라이브러리를 작고 현대적인 UI 타겟을 다루기 어려워하는 사람들을 위한 접근성 도구로 수정할 수 있습니다.

데모 사이트 비판: 스크롤 잭킹과 네비게이션

많은 사용자들이 데모 사이트의 scroll-snap 사용에 대해 "스크롤 잭킹(scroll-jacking)"이라며 불만을 토로했습니다. 이 구현 방식은 일부 기기에서 속도 기반 스크롤 경험을 망가뜨리고, 동시 스크롤 이벤트를 차단하는 강제적인 타이밍 애니메이션을 유발합니다.

"제발 이 데모 페이지에서처럼 scroll-snap을 사용하지 마세요... 이는 대다수의 사용자에게 끔찍한 경험을 제공합니다."

커뮤니티 피드백 요약

Jelly UI에 대한 커뮤니티의 반응은 양극화되어 있습니다. 어떤 이들은 이를 웹에 대한 창의적이고 "귀여운" 추가 요소로 보며, 특히 게임 UI나 참신한 프로젝트에 적합하다고 생각합니다. 다른 이들은 효과가 산란만 시키고, 메스꺼움을 유발하거나, 온/오프 컨트롤에 대해 기분 나쁠 정도로 "본능적"인 반응을 일으킨다고 느낍니다.

개선 사항에 대한 일반적인 제안은 다음과 같습니다:

• 호버 기반의 젤리 효과를 더 약하게 구현할 것.
• 색맹 사용자를 돕기 위해 빨간색과 호박색 버튼의 색상 대비를 개선할 것.
• 클릭 시 영역을 벗어나는 "Chip" 요소를 수정할 것.
• 불필요한 문서 리페인트를 방지하기 위해 애니메이션 루프를 최적화할 것.