ONONC UI — 모션 우선 React 컴포넌트 라이브러리
ONONC은 “살아 있는 것처럼 반응하는” 화면을 목표로 처음부터 직접 설계한 모션 우선(motion-first) React 컴포넌트 라이브러리입니다. 애니메이션 배경, 텍스트 효과, 인터랙티브 컴포넌트, 그리고 페이지에 바로 얹는 섹션 블록까지 — 300개가 넘는 오리지널 컴포넌트를 Next.js 16과 React 19 위에서 하나의 디자인 언어로 묶었습니다.
왜 만들었나
대부분의 UI 키트는 잘 만들어져 있지만, 어딘가 서로 닮아 있고 대체로 정적입니다. 버튼은 눌리기만 하고 배경은 가만히 멈춰 있죠. 우리는 “움직임”이 예외가 아니라 기본값인 컴포넌트가 필요했습니다. 커서를 따라 반응하고, 스크롤에 맞춰 드러나며, 손끝의 입력에 자연스럽게 응답하는 화면 말입니다.
그래서 남의 디자인을 가져다 쓰는 대신, 고유한 브랜드 색과 모션 언어를 가진 컴포넌트 세트를 처음부터 새로 그렸습니다. ONONC은 그 결과물이자, 우리가 실제 프로젝트에서 매일 꺼내 쓰는 “살아 있는 부품 상자”입니다.
무엇을 담았나
ONONC은 크게 네 갈래로 구성됩니다. 각 컴포넌트는 서로 얽히지 않고 독립적으로 복사해 쓸 수 있도록 설계했습니다.
- 애니메이션 배경 — 콘텐츠 뒤에 은은하게 깔리는 GPU 친화적 캔버스. 화면 밖으로 나가거나 탭이 가려지면 스스로 멈춰 배터리를 아낍니다.
- 텍스트 애니메이션 — 그라디언트·타이핑·디코딩 등 다양한 효과. 시맨틱 마크업과 ARIA를 지켜 스크린리더에서도 안전합니다.
- 인터랙티브 컴포넌트 — 버튼·카드·오버레이·폼 등. 포인터 반응은 물론 키보드 조작과 리듀스드 모션까지 고려했습니다.
- 섹션 블록 — 히어로·프라이싱·타임라인·푸터처럼 페이지에 바로 얹어 완성하는 조립형 섹션.
어떻게 만들었나
다크 퍼스트 디자인 토큰
모든 색은 CSS 변수로 정의한 디자인 토큰에서 나옵니다. 어두운 화면을 기본으로 삼되 라이트 모드까지 대응하도록 설계해, 컴포넌트 하나하나가 같은 색 언어를 공유합니다.
성능을 전제로 한 애니메이션
캔버스 애니메이션은 requestAnimationFrame으로 그리고, 화면 밖이면 IntersectionObserver로 일시 정지하며, 고해상도 디스플레이에서도 부담이 없도록 픽셀 비율을 제한합니다. “화려하지만 무겁지 않게”가 원칙입니다.
접근성은 옵션이 아니다
모든 모션은 prefers-reduced-motion 설정을 존중해 부드럽게 꺼지고, 상호작용 컴포넌트는 키보드만으로도 완전히 조작됩니다. 애니메이션이 정보 전달을 방해하지 않도록 했습니다.
복사해서 바로 쓰는 소스
각 컴포넌트의 실제 소스 코드를 사이트의 Code 탭에 그대로 담았습니다. 무거운 패키지에 묶이지 않고, 필요한 파일만 프로젝트로 복사해 원하는 대로 고쳐 쓰는 방식입니다.
직접 만져보는 플레이그라운드
컴포넌트마다 상세 페이지에서 미리보기와 코드 탭, 데스크톱·태블릿·모바일 뷰포트 프리셋, 그리고 값을 실시간으로 바꿔보는 Customize 패널과 Props 표를 제공합니다. 바꾼 설정은 URL로 공유할 수 있어, 원하는 상태 그대로 팀과 나눌 수 있습니다.
완성된 쇼케이스는 정적 사이트로 빌드해 배포했기 때문에 어디서 열어도 빠르게 뜹니다. 아래 링크에서 직접 만져볼 수 있습니다.