lynx-ui가 정식 출시되었습니다. 네이티브 기반, 조합 가능한 프리미티브, 프로그래머블 인터랙션, Motion 통합을 통해 Lynx에서 웹의 개발 속도와 네이티브 사용자 경험을 함께 제공합니다.
지난해 12월 React Advanced London에서 초기 프리뷰를 공개한 이후, lynx-ui는 조용히 오픈 소스로 공개되어 있었습니다. 컴포넌트를 다듬고, 문서 사이트를 구축하고, 예제를 추가하는 데 수개월을 보낸 끝에, 오늘 저희는 이것이 정식으로 일반 사용 가능해졌음을 기쁘게 발표합니다.
lynx-ui 컴포넌트 한눈에 보기
내장 엘리먼트와 XElement는 Lynx에 중요한 저수준 기능을 제공합니다. 빠른 스크롤링, 정밀한 제스처, 그리고 네이티브 렌더링입니다. 하지만 제품은 원자만으로 만들어지지 않습니다. 바로 이 지점에 컴포넌트가 필요합니다. Lynx에서는 네이티브가 기반을 제공하고, 웹에서 영감을 받은 프런트엔드 스택이 조합, 상태, 스타일링, 그리고 제품별 동작을 위한 확장 계층을 제공합니다.
lynx-ui는 이러한 계층화 원칙을 구현합니다. 네이티브 사용자 경험은 유지하고, 웹의 속도는 제공합니다.
캡슐화는 함정이 될 수 있습니다. lynx-ui는 컴포넌트를 끝없이 prop 표면만 늘어나는 블랙박스로 다루지 않습니다. 대신 각 컴포넌트가 동작과 상태를 처리하지만 시각적 디자인은 포함하지 않는 프리미티브인 스타일이 없는 컴포넌트 라이브러리입니다. 프리미티브는 각각 독립적으로 렌더링하고 스타일링할 수 있는 파트로 구성됩니다.
Popover는 이 개념을 잘 보여줍니다. 이것은 불투명한 단일 컴포넌트가 아니라, 책임이 분리된 파트들의 조합입니다. PopoverRoot는 상태를 소유하고, PopoverTrigger는 의도를 정의하며, PopoverPositioner는 배치를 처리하고, PopoverContent는 구조적으로 독립성을 유지합니다.
조합이면 충분합니다.
프리미티브는 스타일이 없기 때문에, 동일한 조합 모델이 디자인 시스템의 기반도 만들어 줍니다. styling and theming 시스템을 통해 자신만의 테마를 정의할 수도 있고, shadcn/ui 패턴을 따라 프리미티브 위에 테마가 적용된 래퍼를 조합할 수도 있습니다.
LUNA는 저희가 그 기반 위에 구축한 레퍼런스 디자인 언어입니다.
이것은 Lynx의 시그니처 그라디언트에서 출발해, 브랜드 표현을 UI를 위한 더 부드러운 팔레트로 확장합니다. 따뜻한 분홍과 로즈 톤이 라벤더와 아쿠아로 이어집니다. LUNA에서 그라디언트는 형태와 움직임을 표현하는 일급 시각 재료로 작동하며, 컴포넌트에 변화하는 매질 같은 감각을 부여합니다. 이러한 섬세함은 토큰 이름에도 이어집니다. LUNA는 표면이 어디에 놓이는지가 아니라, 어떻게 느껴지는지를 설명합니다. ambient는 배경으로 스며들고, faint는 지각의 문턱 가까이에 머물며, veil과 film은 부드러운 반투명 레이어를 만듭니다.
L.U.N.A Studio
연속적인 입력을 중심으로 구축된 컴포넌트에는 두 가지가 동시에 필요합니다. 높은 수준의 사용자 지정 가능 동작과 낮은 지연 시간의 반응성입니다. 스와이프, 드래그, 스냅은 프레임마다 평가됩니다. 시각적 반응이 제스처보다 뒤처지면, 컴포넌트는 여전히 동작할 수는 있어도 더 이상 네이티브처럼 느껴지지 않습니다.
Lynx의 듀얼 스레드 모델은 기본적으로 JavaScript를 백그라운드 스레드에서 실행해 메인 스레드를 렌더링을 위해 비워 둡니다. 하지만 Main-Thread Script는 중요한 경우 인터랙션 로직을 메인 스레드로 옮길 수 있게 해 주며, 그 결과 스레드 경계를 넘지 않고도 프레임 단위 동작을 완전히 프로그래밍할 수 있습니다. Swiper는 이 아이디어를 직접 보여줍니다. 드래그 입력이 프레임마다 transform 업데이트로 이어지기 때문에, 카드가 나중에 따라잡는 대신 제스처를 그대로 따라갑니다.
main-thread:customAnimation에 전달된 'main thread' 함수는 메인 스레드에서 프레임별 로직을 실행합니다.
네이티브 기반과 프로그래머블 인터랙션이 갖춰지면, 모션은 단순한 장식이 아니라 실용적인 요소가 됩니다.
Motion은 웹 커뮤니티에서 가장 인기 있는 애니메이션 라이브러리 중 하나로, 스프링 기반 전환과 베지어 기반 전환을 모두 지원합니다. Main-Thread Script가 제공하는 프로그래머블한 특성 덕분에, 저희는 Motion을 Lynx용 @lynx-js/motion으로 적용했습니다. 이는 Motion의 소스를 직접 재사용하는 얇은 레이어이며, lynx-ui와 함께 실험적 버전으로 제공됩니다. 웹에서 Motion을 사용해 보았다면, Lynx에서 사용하는 방법도 이미 알고 있는 셈입니다.
Sheet는 왜 이것이 중요한지 보여줍니다. 드래그, 저항, 손을 놓는 순간, 그리고 정착까지는 하나의 연속된 동작으로 읽혀야 합니다. Main-Thread Script가 인터랙션을 렌더링 가까이에 유지하고 Motion이 표면의 움직임 방식을 정의하기 때문에, 이 시트는 단순히 재생되는 것이 아니라 손에 붙들려 있는 것처럼 느껴집니다.
Sheet는 내부적으로 스프링 기반 드래그 및 정착 전환을 위해 @lynx-js/motion을 사용합니다.
lynx-ui는 오늘부터 iOS, Android, HarmonyOS에서 사용할 수 있으며, 부분적인 Web 및 Desktop 지원도 예정되어 있습니다. 먼저 소개를 읽고 전체 구성을 파악하거나, 바로 빠른 시작으로 이동해 @lynx-js/lynx-ui-*를 설치해 보세요.
컴포넌트가 실제로 동작하는 모습을 보려면 Lynx Explorer를 설치하고, 컴포넌트 데모의 QR 코드를 스캔해 즉시 실행해 보세요. 또는 여러분의 Lynx 앱에 직접 가져와 실제 제품 흐름에서 시험해 볼 수도 있습니다.
저희는 lynx-ui가 실제 앱이 만들어지는 방식 속에서 성장하길 바랍니다. 훌륭하게 느껴지든, 작업을 방해하든, 혹은 무언가 빠져 있다고 느껴지든, lynx-family/lynx-ui 저장소에서 알려 주세요. 다음에 올 것을 함께 만들어 주세요.
