하드웨어 영감을 받은 UI 컴포넌트 라이브러리를 순수 바닐라 JS로 만들었습니다—방법 공개

Source: Dev.to

대부분의 UI 컴포넌트는 UI 컴포넌트처럼 느껴진다.
토글을 클릭하면 움직인다. 괜찮다. 작동한다. 하지만 뭔가 느낌이 없다.
나는 그걸 바꾸고 싶었다.

나는 언제나 물리적인 인터페이스에 끌려왔다 — 기계식 스위치의 만족스러운 클릭, 하드웨어 노브의 무게감, 버튼을 누를 때 눌리는 느낌 등.
웹 UI는 거의 그런 느낌을 잡아내지 못한다. 모든 것이 평평하고, 즉각적이며, 무게가 없다.

그래서 나는 실제 세계에 존재하는 듯한 컴포넌트를 만들기 시작했다. 옛 iOS 6 스타일의 스큐어모픽은 아니지만—촉각적이고, 깊이감이 있으며, 그림자와 저항감이 있다.
그것이 Aetheric UI가 되었다.

React도, Tailwind도, 빌드 단계도 없다.
프레임워크가 나쁘다는 것이 아니라—그들은 자신이 하는 일에 훌륭하다. 하지만 토글 컴포넌트가 package.json을 요구해서는 안 된다. 파일 하나만 넣으면 바로 동작해야 한다.

Aetheric UI의 모든 컴포넌트는 단일 파일이다. 복사해서 넣으면 바로 실행된다. 그게 전부다.

첫 번째 릴리즈는 다섯 개의 컴포넌트다:

• Depression Toggle — 표면에 눌린 채로 자리 잡는 원형 스위치. 켜져 있으면 중앙에 작은 호박색 점이 빛난다. 전체가 파묻힌 느낌이다.
• Half-Pill Toggle — 두 개의 절반으로 나뉜 알약 모양 스위치. 한쪽은 항상 움푹 들어가고, 다른 쪽은 올라와 있다. 물리적인 록커 스위치의 느낌을 흉내낸다.
• Sliding Toggle — 세 개 중 가장 극적이다. 활성화되면 왼쪽에서 주변에 호박색 빛이 퍼진다. 노브 자체가 강한 그림자를 만든다.
• Toggle Pack — 위 세 가지를 모두 묶은 패키지.
• Hardware Button — 오른쪽에 누를 수 있는 버튼이 있는 알약 모양 컨테이너. 눌러서 동작을 실행한다. 라벨은 완전히 커스터마이즈 가능—데모에서는 눌렀을 때 텍스트가 바뀌지만, 실제 동작은 전적으로 사용자가 정한다.

깊이감은 모두 CSS로 구현한다—레이어드 박스 그림자, 정밀하게 조정된 inset 값, 미묘한 그라디언트. 이미지, SVG, 캔버스는 사용하지 않는다.

상호작용은 순수 JS 상태이다. 켜기·끄기. 애니메이션은 클래스 교체에 의해 트리거되는 CSS 트랜지션이다.

모든 컴포넌트는 10 KB 이하이다. 대부분은 4 KB에 가깝다.

다음은 네비게이션 바다. 그 다음은 입력 필드, 그 다음은 카드다.
각 파동은 금요일마다 공개된다.

함께 따라하고 싶다면, 나는 X와 LinkedIn에서 Aetheric Labs라는 이름으로 공개적으로 작업하고 있다.

그리고 컴포넌트 자체가 필요하다면—지금 aethericlabs.lemonsqueezy.com에서 이용 가능하다.

의존성 없이 제작. 실제 같은 느낌을 위해 설계했다.