부드러운 물리 효과 UI, Jelly UI 등장!

Jelly UI는 네이티브 HTML 폼 컨트롤에 부드러운 물리 효과(Soft-body Physics)를 적용하는 라이브러리임

RAF 애니메이션 루프를 사용하여 모든 컴포넌트에 동시 적용, 전체 문서 리페인팅(Document Repainting) 유발 가능성 제기됨

UX 모범 사례(UX Best Practices)와의 불일치 및 성능 저하(Performance Degradation)에 대한 우려가 커뮤니티에서 제기됨

Reduced Motion 지원은 긍정적이나, 시스템 설정 없이 사용자 제어 기능 부재는 아쉬움으로 남음

RAF 애니메이션 루프의 성능 병목 현상

커뮤니티에서는 Jelly UI가 RAF(RequestAnimationFrame) 애니메이션 루프를 8ms 간격으로 실행하며, 이는 페이지 내 모든 활성 컴포넌트의 전체 문서 리페인팅(Document Repainting)을 유발한다고 지적합니다. 특히 'JellyEngine'이 포인터 이벤트 발생 시에만 계산하는 대신, 모든 컴포넌트에 대해 프레임마다 재계산하는 방식은 비효율적인 리소스 사용(Inefficient Resource Usage)으로 이어져 전반적인 창 반응성을 저하시킨다는 비판이 제기되었습니다. 이는 성능 최적화(Performance Optimization) 관점에서 근본적인 재고가 필요한 부분입니다.

UX 모범 사례와의 충돌 및 일관성 문제

사용자 경험 측면에서 Jelly UI는 표준 UX 모범 사례와 충돌하는 지점이 있다는 의견이 있습니다. 예를 들어, 클릭 후 마우스를 벗어나 릴리스해도 클릭으로 등록되는 현상은 예상치 못한 사용자 경험(Unpredictable User Experience)을 제공합니다. 특히 버튼은 클릭으로 인식되지만 체크박스는 그렇지 않은 경우처럼, 컨트롤별 일관성 부족(Inconsistent Behavior Across Controls)은 사용자 혼란을 야기할 수 있어 개선이 필요하다는 지적입니다.

접근성 및 사용자 제어 옵션 부재

애니메이션이 `@media (prefers-reduced-motion: reduce)` 설정을 존중하여 점진적 성능 저하(Graceful Degradation)를 제공하는 점은 긍정적으로 평가됩니다. 하지만 시스템 설정을 변경하지 않고도 사용자가 직접 애니메이션 효과를 비활성화하거나 조정할 수 있는 옵션이 부재하다는 점은 아쉬움으로 남습니다. 이는 사용자 제어권(User Control)을 강화하고 더 넓은 사용자층을 포용하기 위한 개선 과제로 언급됩니다.

효과 적용 범위 및 성능 이슈

일부 사용자는 프로그레스 바, 토스트 메시지 등 특정 컨트롤에서 Jelly UI 효과가 적용되지 않는 점을 지적했습니다. 또한 데모 페이지의 전반적인 성능이 만족스럽지 못하며, 스크롤 시 의도치 않은 스크롤 가로채기(Unintended Scroll Hijacking) 현상이 발생한다는 피드백도 있었습니다. 이러한 부분들은 Jelly UI가 게임 UI 등 특정 환경에는 적합할 수 있으나, 일반적인 웹 환경 적용 시 광범위한 최적화(Comprehensive Optimization)가 필요함을 시사합니다.