Supernova.io 사용해보기

서비스 개요

Supernova.io는 디자인 시스템을 통합 관리할 수 있는 플랫폼으로, Figma와 Storybook 연동을 통해 디자인 토큰, 컴포넌트, 에셋, 문서를 중앙화된 환경에서 관리할 수 있다.

로그인 시 표시되는 대시보드에서는 현재 워크스페이스의 토큰, 컴포넌트, 에셋, 문서 페이지 개수를 한눈에 확인할 수 있다. 하단에는 Figma 및 Storybook과의 데이터 소스 연결 현황이 표시된다.

Supernova는 세 가지 주요 데이터 소스 연동 방식을 지원한다:

Figma 라이브러리의 URL을 통해 컴포넌트와 스타일 정보를 연동할 수 있다. 이 방식은 Figma 파일의 전체적인 라이브러리 구조와 컴포넌트 정보를 가져오는 데 적합하다.

Figma 플러그인을 사용하여 Figma Variables를 직접 동기화할 수 있다. 이 방식은 디자인 토큰(컬러, 타이포그래피, 스페이싱 등)을 정밀하게 관리하고 실시간으로 업데이트하는 데 유용하다.

Storybook이 배포된 URL을 통해 실제 개발 환경의 컴포넌트 정보를 Supernova에 연동할 수 있다.

KRDS(Korean Design System)의 Variables를 플러그인으로, 라이브러리 정보를 URL 연동 방식으로 Supernova 워크스페이스에 연결하였다.

연결된 라이브러리와 Variables는 Data Sources 대시보드에서 통합 관리된다.

Supernova는 디자인 토큰과 컴포넌트를 실제 코드로 자동 변환하는 Code Automation 기능을 제공한다.

Code Automation은 다양한 플랫폼과 프레임워크를 지원한다:

디자인 토큰(컬러, 타이포그래피, 스페이싱 등)과 컴포넌트를 선택한 포맷으로 Export할 수 있으며, GitHub, GitLab 등과의 연동을 통해 자동으로 코드 저장소에 반영할 수 있다.

위 압축파일은 Code automation 기능으로 추출한 토큰 css 파일이다.

Figma 라이브러리의 변경사항은 1시간 간격으로 자동 업데이트가 가능하다. 단, 자동 업데이트 기능은 유료 요금제에서만 제공되며, 무료 버전에서는 수동 업데이트만 지원된다.

Figma에서 컬러 등의 속성을 변경한 후 플러그인을 통해 수동으로 업데이트할 수 있다. 자동 업데이트가 활성화된 경우 컴포넌트 컬러는 별도 작업 없이 자동으로 반영된다.

Supernova는 'Portal'이라는 이름의 AI 서비스를 제공한다. Portal은 디자인 시스템을 기반으로 프로토타이핑, 검색 및 분석 기능을 지원한다.

Portal을 통해 다음과 같은 작업이 가능하다:

Document 기능을 통해 디자인 시스템을 체계적으로 문서화할 수 있다. UI는 Notion과 유사하여 Notion 사용 경험이 있는 경우 빠른 적응이 가능하다.

작성된 문서는 웹 형태로 배포되어 팀원들과 공유할 수 있다.

위 URL은 Supernova를 이용해 디자인 시스템을 구축한 Compound의 사례이다.

Supernova.io는 디자인 시스템 관리를 위한 종합 플랫폼으로, Figma 연동, 자동/수동 동기화, AI 기반 검색 및 분석, 문서화 기능을 제공한다. 특히 Portal AI와 문서화 기능은 팀 협업과 디자인 시스템 유지보수에 유용한 도구로 평가된다.