Vinyl UI

Ark UI 헤드리스 + Panda CSS 기반으로 구축된 디자인 시스템

Vinyl UI 는 디자인 토큰만 교체해 여러 프로젝트가 동일한 컴포넌트를 공유하는 디자인 시스템입니다.

소수의 개발자·디자이너 인력으로 여러 프로젝트를 감당하려면 생산성이 관건입니다. Vinyl UI는 이 문제를 AI를 적극 활용하는 워크플로로 해결 합니다.

컴포넌트의 구조·동작·접근성은 한 번 잘 만들어 고정하고, 각 프로젝트는 디자인 토큰(색·타이포)만 preset으로 교체합니다. 구조가 정해져 있으니 AI가 그 위에서 화면을 빠르게 조립할 수 있고, 사용자는 브랜드와 판단이 필요한 부분에 집중합니다. 결과적으로 적은 인력으로도 여러 브랜드의 제품을 일관된 품질로 빠르게 디자인하고 개발할 수 있습니다.

Why Vinyl UI

Vinyl UI는 특히 Next.js App Router·서버 컴포넌트를 이미 쓰고 있거나 도입하려는, 그리고 기존에 styled-components로 개발해 온 팀을 위해 만들어졌습니다. 익숙한 컨벤션은 거의 그대로 두고 새 환경으로 넘어가면서, 동시에 개발과 디자인의 생산성을 함께 끌어올리는 디자인 시스템을 갖추는 것을 목표로 합니다.

이 목표를 두 가지 기준으로 구체화했습니다.

• 익숙한 컨벤션 유지 — 기존처럼 styled 팩토리로 컴포넌트를 작성합니다.
• 개발·디자인 생산성 — 코드와 디자인(토큰)을 분리해 양쪽 모두 빠르게 작업합니다.

이 두 기준을 모두 만족시키는 선택이 Panda CSS였습니다. Panda의 styled API는 styled-components와 거의 같은 문법을 제공하면서도, 빌드 시 정적 CSS로 추출되어 Next.js App Router의 서버 컴포넌트에서 문제없이 동작합니다.

Features

• AI 친화적 구조 — 정해진 토큰·컴포넌트 규칙 위에서 AI가 반복 작업을 대신하고, 사용자는 방향을 정합니다.
• 디자인 토큰만 교체 — 컴포넌트 코드는 그대로, 토큰 값만 교체합니다.
• 제로 런타임 스타일 — Panda CSS가 빌드 시 정적으로 CSS를 추출해, 런타임 CSS-in-JS 비용이 없습니다.
• RSC(React Server Components) 호환 — 서버 컴포넌트에서 따로 'use client'를 붙이지 않아도 바로 import해 사용할 수 있습니다.

Creator

빅모빌리티(Big Mobility) 와 홍영주 디자이너가 콜라보하여 제작하였습니다.