Web Component UI Kit를 만들었습니다.

Source: Dev.to

배경

나는 어느 날 갑자기 UI 키트를 만들기로 결심한 것이 아니다. 내가 만든 대부분의 것들처럼, 이것도 누군가가 요구한 프로젝트가 아니라 내가 겪고 있던 문제에 대한 해결책으로 시작되었다. 나는 여가 시간에 여러 사이드 프로젝트를 만들곤 하는데—작은 것들로 즐거움을 얻고, 도전을 받고, 평소엔 읽기만 하던 기술을 직접 다뤄보는 기회를 얻는다.

1년 전쯤 나는 SF 브라우저 게임에 푹 빠져 있었다. 최신 버전들을 체험해 보기 위해 여러 프레임워크로 여러 프로젝트를 만들었고, 게임의 미학에 맞는 UI가 필요했지만 어느 프레임워크에도 얽매이지 않고 비용도 들지 않아야 했다. 결국 이것은 “놀아보는” 프로젝트였다.

케플러 UI

그 실험이 Kepler UI가 되었다. 약 20개의 컴포넌트, 테마 스위처, 그리고 웹 컴포넌트 기반 SPA 라우터까지 갖춘, 강력한 SF‑영감의 제로‑디펜던시 웹‑컴포넌트 툴킷이다. 나는 완성하지 못한 게임을 위해 과도하게 설계했지만, 작동 방식이 마음에 들었다.

문제는 기술 자체가 아니라, 케플러의 독특한 SF 스킨 때문에 실제 프로젝트에 적용하기 어려웠다는 점이다.

Yumekit으로 전환

그래서 케플러를 정리하고, 제대로 된 디자인 시스템을 바탕으로 보다 실용적인 것을 만들었다: Yumekit.

• 웹사이트: yumekit.com
• 약 30개의 컴포넌트
• 제로 디펜던시
• 전체 스타일링과 기능을 제공하는 단일 JavaScript 파일 임포트

Yumekit은 React, Vue, Svelte 프로젝트에 바로 끼워 넣을 수 있고, 프레임워크 없이도 사용할 수 있다—프레임워크에 구애받지 않는다. 이것이 바로 목표였다.

기능

테마링

테마링은 전용 컴포넌트를 통해 동적으로 테마를 전환하고 커스터마이징할 수 있게 해준다. 스타일시트를 건드릴 필요가 없으며, 다른 컴포넌트 라이브러리에서 CSS 특이성 문제에 씨름하던 경험을 생각하면 필수적인 기능이다.

AI 통합

현재 AI 도구를 활용해 무언가를 만들고 있는 사람들을 위해, Yumekit은 내장된 에이전트 스킬과 LLM 명령 세트를 제공한다. Cursor나 Claude 같은 도구는 처음부터 올바르게 사용할 수 있는 컨텍스트를 이미 가지고 있다. AI와 함께 “바이브 코딩”을 하면서 별다른 프롬프트 조작 없이 바로 작동하는 UI 레이어가 필요하다면, Yumekit은 그 흐름에 자연스럽게 녹아든다.

커뮤니티 및 기여

Yumekit은 아직 초기 단계이며 오픈 소스, 계속해서 발전하고 있다. 사용해 보면서 깨진 부분, 혼란스러운 부분, 명백히 빠진 부분이 있다면, 6개월 뒤에 나쁜 패턴이 굳어버리기 전에 지금 알려주길 바란다. 이슈와 풀 리퀘스트는 언제든 열려 있으며, 토론을 적극 권장한다.

피드백

이런 도구가 여러분에게 실제로 유용하려면 어떤 점이 필요할까요?