웹에서 체크박스를 클릭했는데 젤리처럼 물컹하고 눌렸다가 탱글탱글 출렁이면서 돌아온다면 어떨까요? Jelly UI라는 라이브러리가 정확히 이걸 해냈어요. 체크박스, 라디오 버튼, 토글, 슬라이더 같은 HTML 폼 컨트롤에 소프트바디 물리 시뮬레이션을 입힌 프로젝트인데요. 데모 페이지를 열어보면 저도 모르게 몇 분 동안 버튼만 눌러보게 되는, 그런 종류의 물건이에요.
소프트바디 물리가 뭐냐면요
게임 물리엔진 이야기에서 나오는 개념인데요. 보통 게임 속 물체는 '강체(rigid body)'로 처리해요. 돌멩이처럼 아무리 부딪혀도 모양이 안 변하는 물체죠. 반면 소프트바디는 젤리나 슬라임처럼 힘을 받으면 찌그러지고, 놓으면 출렁이면서 원래 모양으로 돌아오는 물체예요. 내부적으로는 물체를 여러 개의 점으로 쪼개고, 점들 사이를 가상의 스프링으로 연결해서 시뮬레이션하는 방식(스프링-질량 모델)을 많이 써요. 누르면 스프링이 눌리고, 놓으면 스프링이 반동으로 진동하면서 그 특유의 '탱글' 느낌이 나오는 거죠. 게임에서나 보던 이 기법을 웹 폼 요소에 가져온 거예요.
진짜 중요한 포인트는 '네이티브'라는 거예요
화려한 UI 라이브러리는 많잖아요. 그런데 Jelly UI에서 눈여겨볼 지점은 물리 효과보다 '네이티브 HTML 폼 컨트롤'을 그대로 쓴다는 부분이에요. 이게 왜 중요하냐면요. 보통 디자인이 예쁜 커스텀 체크박스를 만들 때는 진짜 input 태그를 숨기고 div로 가짜 체크박스를 그리는 방식을 많이 써요. 이러면 겉보기엔 예쁜데, 키보드로 조작이 안 되거나, 스크린 리더(시각장애인용 화면 낭독기)가 인식을 못 하거나, 폼 제출이 꼬이는 문제가 생기기 쉽거든요. 접근성이 와르르 무너지는 거죠. Jelly UI는 실제 네이티브 컨트롤을 그대로 두고 그 위에 시각 효과만 입히는 접근이라, 브라우저가 원래 제공하는 키보드 내비게이션, 폼 동작, 접근성 정보를 해치지 않아요. '기본 기능은 웹 표준대로 두고, 꾸미기는 그 위에 얹는다'는 점진적 향상(progressive enhancement) 철학의 좋은 예시인 셈이에요.
요즘 웹 디자인 흐름과도 맞닿아 있어요
몇 년 동안 웹은 플랫 디자인 일색이었잖아요. 깔끔하지만 어느 사이트를 가도 비슷비슷하다는 피로감도 쌓였고요. 그래서인지 최근에는 반대 방향의 흐름이 눈에 띄어요. 애플이 유리의 물성을 표현한 Liquid Glass 디자인을 밀고 있고, 웹에서도 Framer Motion 같은 라이브러리로 물리 기반 스프링 애니메이션을 쓰는 게 보편화됐죠. 화면 속 요소가 실제 물건처럼 무게와 탄성을 갖게 만들어서 만지는 재미를 주는 방향이에요. Jelly UI는 그 흐름을 한껏 밀어붙인 유쾌한 실험이라고 볼 수 있어요.
실무에 쓸 수 있을까요?
솔직히 말하면, 은행 앱 전체에 이걸 깔자고 하면 말릴 거예요. 모든 요소가 출렁이면 정신없고, 물리 시뮬레이션이 계속 도니까 저사양 기기에서는 성능 부담도 있을 수 있거든요. 과한 움직임은 멀미를 유발할 수 있어서, 운영체제의 움직임 최소화 설정(prefers-reduced-motion)을 존중하는지도 꼭 확인해야 하고요. 하지만 브랜드 사이트, 이벤트 페이지, 포트폴리오, 사이드 프로젝트처럼 '기억에 남는 경험'이 중요한 곳에서는 포인트로 쓰기 딱 좋아요. 그리고 쓰지 않더라도 소스를 읽어볼 가치가 커요. 스프링 물리를 UI에 적용하는 방법, 네이티브 컨트롤을 해치지 않으면서 꾸미는 방법은 어디서든 써먹을 수 있는 기술이니까요.
정리하면요
'예쁘게 만들면서도 접근성을 지킬 수 있다'는 걸 보여주는 기분 좋은 프로젝트예요. 여러분은 어떻게 생각하세요? 이런 재미 요소가 있는 UI, 실서비스에 어디까지 허용될 수 있을까요? 내 서비스에 넣는다면 어디에 넣어보고 싶으세요?
🔗 출처: Hacker News