안녕하세요, 소플입니다.

2026년 새해 첫 매거진이네요ㅎㅎ

이 글을 보시는 분들 모두 새해 복 많이 받으시고, 올해도 더욱 더 성장하는 한 해가 되시길 바랍니다! 😀

매년 초에는 JavaScript Rising Stars가 발표되는데요,

이번 매거진에서는 작년에 이어 자바스크립트 생태계에서 작년 한 해 동안 가장 많은 GitHub Star를 받은 프로젝트들을 살펴보도록 하겠습니다.

전체 순위는 아래 원문 링크를 참고하시기 바라며, 이 글에서는 전체 1위~10위와 각 세부 분야에서 주목해볼만한 프로젝트들을 위주로 살펴보겠습니다.
(원문 링크: https://risingstars.js.org/2025/en)

참고로 2024년 순위는 작년 초에 발행된 아래 매거진에서 보실 수 있습니다.
(관련 매거진: 2024 JavaScript Rising Stars)

---

전체 프로젝트 부문 (1위 ~ 10위)

🥇 1위. n8n (https://github.com/n8n-io/n8n)

대망의 1위는 작년 한 해 동안 무려 112,400개의 Star를 받은 n8n입니다.

바로 뒤에 나올 2위인 shadcn/ui와는 4배가 넘는 차이로 1위를 차지했습니다.

Rising Stars를 시작한 이래로 단일 연도에 이처럼 많은 Star를 받은 프로젝트는 없었다고 합니다.

shadcn/ui는 작년에 1위를 차지했었는데, 그때 받은 Star 개수가 38,000개였습니다.

결론적으로, n8n이 2025년 한 해 동안 엄청난 관심을 받은 프로젝트라는 것을 알 수 있습니다.

n8n은 AI를 기반으로 별도의 코드 작성 없이 Visual Editor를 통해 자동화된 워크플로를 만들 수 있는 오픈소스 플랫폼입니다.

단순히 워크플로를 통해 여러가지 작업들을 자동으로 처리하는 것뿐만 아니라, AI 모델과 데이터를 통합하여 AI 에이전트를 구축할 수도 있습니다.

작년에 가장 화두였던 주제가 바로 AI 에이전트가 아닐까 싶은데요, 그래서 n8n이 더욱 더 주목받지 않았나 싶습니다.

작년에 저도 n8n을 조금 사용해봤는데, 사용하기 굉장히 쉽고 강력한 기능들이 내장되어 있어서,

'이걸 잘만 사용하면 정말 많은 것들을 할 수 있겠구나' 라는 생각이 들었습니다.

올해는 n8n을 조금 더 깊이 있게 사용해보고, 여러 가지 작업들을 자동화시켜봐야겠습니다ㅎㅎ

🥈 2위. shadcn/ui (https://github.com/shadcn-ui/ui)

2위는 바로 2024년에 1위를 차지했던 shadcn/ui입니다.

한 단계 내려오긴 했지만, 작년에도 무려 26,300개의 Star를 받았습니다.

shadcn/ui의 처음 시작은 Headless UI 라이브러리인 Radix UI Primitives에 Tailwind CSS로 스타일을 입힌 컴포넌트 라이브러리였습니다.

하지만 지금은 단순히 컴포넌트 라이브러리가 아니라, 디자인 시스템을 만들기 위한 종합적인 툴킷으로 발전했습니다.

작년에는 Registry Directory 기능이 추가되었는데요, 이 기능은 shadcn/ui를 사용해서 자신이 직접 만든 컴포넌트 모음집을 누구나 사용할 수 있도록 등록하는 기능입니다.

그리고 점점 유지보수가 더뎌지고 있는 Radix UI와의 의존성을 줄이기 위해, 작년부터는 Base UI도 지원하기 시작했습니다.
(관련 매거진: Base UI - Radix의 자리를 넘보는 Headless UI 라이브러리)

올해에는 shadcn/ui에 또 어떤 변화가 생길지 기대가 됩니다ㅎㅎ

🥉 3위. React Bits (https://github.com/DavidHDev/react-bits)

3위는 26,200개의 Star를 받은 React Bits입니다.

조금 아쉽게도 2위인 shadcn/ui와는 Star 100개 정도의 차이로 3위를 차지했습니다.

React Bits는 애니메이션이 적용된 다양한 리액트 컴포넌트 모음집입니다.

인터랙티브한 요소들이 많이 포함되어 있어서, 웹사이트에 적용했을 때 굉장히 역동적인 느낌을 줄 수 있습니다.

그리고 React Bits는 shadcn/ui와 함께 사용할 수 있는 형태로 설계되어 있고, Shadcn Registry에 등록되어 있기 때문에, Shadcn CLI를 사용하여 간편하게 설치할 수 있습니다.

만약 리액트 기반의 프로젝트에서 역동적인 애니메이션 효과를 주고 싶다면, React Bits를 한 번 사용해보시는 것을 추천드립니다!

💡 참고로 Vue.js를 위한 버전인 Vue Bits도 있습니다.

4위. Excalidraw (https://github.com/excalidraw/excalidraw)

4위는 작년 한 해 동안 25,100개의 Star를 받은 Excalidraw입니다.

Excalidraw는 2024년에 전체 2위를 했었는데, 2025년에는 4위를 하며 Top 5의 자리를 지켜냈습니다.

Excalidraw는 손글씨 느낌을 재현해주는 가상의 칠판이라고 보시면 됩니다.

간단한 다이어그램을 그리거나 아이디어 스케치, UI 와이어프레임 등을 그리는데 사용할 수 있으며,

데스크탑뿐만 아니라 태블릿에서도 편리하게 사용할 수 있습니다.

Excalidraw는 기본적으로 가입하지 않고 로컬에 파일을 저장하는 형태로 무료로 사용 가능합니다.

이처럼 로컬 환경을 먼저 고려하는 것을 Local-First라고 부르며, Excalidraw는 대표적인 Local-first software라고 할 수 있습니다.

그리고 추가로 다이어그램을 클라우드에 저장 및 관리할 수 있는 Excalidraw+라는 유료 구독 플랜을 별도로 제공하고 있습니다.

작년에는 Excalidraw에 협업·생산성·퍼포먼스를 중심으로 한 안정적인 고도화가 이뤄졌는데요,

올해에는 또 어떤 업데이트가 있을지 굉장히 기대됩니다ㅎㅎ

5위. Supabase (https://github.com/supabase/supabase)

5위는 작년 한 해 동안 19,900개의 Star를 받은 Supabase입니다.

Supabase는 2023년 전체 6위, 2024년 전체 8위를 했고, 2025년에는 5위를 차지하며 꾸준히 Top 10 안에 들고 있습니다.

아무래도 작년에는 바이브코딩 붐으로 인해 Supabase가 조금 더 많은 관심을 받은 것 같습니다ㅎㅎ

Supabase는 이름에서 알 수 있듯이 구글의 Firebase와 비슷한 제품입니다.

공식 GitHub 저장소에서는 아래와 같이 스스로를 오픈소스 Firebase 대체재라고 소개하고 있습니다.

"The open source Firebase alternative."

Supabase는 Firebase처럼 애플리케이션 개발에 필요한 데이터베이스, 인증, 스토리지 등의 모든 기능들을 제공합니다.

Firebase와 구별되는 한 가지 가장 큰 차이점을 꼽자면, 관계형 데이터베이스인 PostgreSQL을 제공한다는 점입니다.

기존에 Firebase를 사용하면서 Firestore 같은 NoSQL 데이터베이스에 불편함을 느꼈다면 Supabase를 한 번 사용해보면 좋지 않을까 싶습니다.

Supabase를 사용하면 그 안에서 애플리케이션 개발에 필요한 모든 기능을 제공하기 때문에,

1인 개발자나 혼자서 사이드 프로젝트를 하는 분들에게는 굉장히 편리하고 합리적인 선택이라고 생각합니다ㅎㅎ

6위. Onlook (https://github.com/onlook-dev/onlook)

6위는 작년 한 해 동안 19,400개의 Star를 받은 Onlook입니다.

Onlook은 스스로를 디자이너를 위한 Cursor라고 소개하고 있습니다.

즉, Onlook은 AI를 활용해서 Next.js + TailwindCSS 프로젝트를 시각적으로 편집할 수 있는 오픈소스 코드 에디터입니다.

Onlook을 사용하면 Figma처럼 드래그 앤 드롭으로 UI를 구성하고, AI 채팅을 통해 디자인을 수정할 수 있습니다.

그리고 실시간으로 코드 에디터와 연동되어 변경사항이 바로 반영되기 때문에, 디자이너와 개발자 모두에게 편리한 도구가 될 수 있습니다.

특히 브라우저에서 바로 요소를 선택하고 우클릭하여 코드의 정확한 위치로 이동할 수 있는 기능이 굉장히 유용해 보입니다.

아직은 Next.js와 TailwindCSS만 지원하지만, 앞으로 더 많은 프레임워크를 지원할 예정이라고 합니다.

디자인과 개발 사이의 경계를 허물고자 하는 Onlook의 행보가 기대됩니다ㅎㅎ

7위. Better Auth (https://github.com/better-auth/better-auth)

7위는 작년 한 해 동안 19,000개의 Star를 받은 Better Auth입니다.

Better Auth는 TypeScript를 위한 가장 포괄적인 인증(Authentication) 및 인가(Authorization) 라이브러리입니다.

Better Auth는 프레임워크에 구애받지 않으며, OAuth, 이메일/비밀번호 인증, 2단계 인증(2FA), 멀티 테넌트 등 다양한 인증 기능을 기본적으로 제공합니다.

그리고 플러그인 에코시스템을 통해 추가 기능들을 쉽게 확장할 수 있다는 점이 큰 장점입니다.

기존의 다른 오픈소스 인증 라이브러리들이 기본 인증 이상의 기능을 구현하려면 많은 추가 코드가 필요했던 반면,

Better Auth는 처음부터 다양한 기능들을 고려하여 설계되었기 때문에 훨씬 적은 코드로 복잡한 인증 시스템을 구축할 수 있습니다.

만약 프로젝트에 인증 시스템이 필요하다면 Better Auth를 한 번 사용해보시면 좋지 않을까 싶습니다.

8위. Dyad (https://github.com/dyad-sh/dyad)

8위는 작년 한 해 동안 18,900개의 Star를 받은 Dyad입니다.

Dyad는 로컬에서 실행되는 무료 오픈소스 AI 앱 빌더입니다.

공식 GitHub 저장소에서는 Bolt.new, Lovable, V0의 대체재라고 소개하고 있습니다.

Dyad의 가장 큰 특징은 모든 것이 로컬에서 실행된다는 점입니다.

빠르고, 프라이버시가 보장되며, 벤더 락인(Vendor Lock-in)이 없습니다.

그리고 자신의 AI API 키를 가져와서 사용할 수 있기 때문에, 특정 서비스에 종속되지 않습니다.

macOS와 Windows 모두에서 사용 가능하며, 가입 없이 바로 다운로드해서 사용할 수 있습니다.

AI 기반 앱 빌더를 사용하면서도 데이터 프라이버시와 완전한 통제권을 유지하고 싶다면 Dyad가 좋은 선택이 될 것 같습니다ㅎㅎ

9위. AFFiNE (https://github.com/toeverything/AFFiNE)

9위는 작년 한 해 동안 17,300개의 Star를 받은 AFFiNE입니다.

AFFiNE은 2024년에 전체 3위를 했었고, 2025년에는 9위를 차지하며 Top 10의 자리를 지켜냈습니다.

AFFiNE은 오픈소스 Notion & Miro 대체재입니다.

Notion은 우리가 익히 알듯이 메모를 저장하고 관리하기 위한 도구이고, Miro는 시각적으로 그림을 그리며 협업할 수 있도록 도와주는 도구입니다.

그리고 AFFiNE은 이런 기능들을 모두 하나로 합쳐서 내 지식들을 한 곳에서 관리할 수 있도록 만든 오픈소스 프로젝트입니다.

AFFiNE 역시 Excalidraw와 마찬가지로 Local-First 전략을 취하고 있는데요,

데이터를 로컬에 저장함으로써 외부 서버에 저장되지 않게 하여 프라이버시를 지킬 수 있습니다.

그리고 추가로 Pro 플랜을 구독하면 AI 기능을 함께 이용할 수 있습니다.

모든 지식을 한 곳에 모아서 관리하고 싶은 분들은 AFFiNE을 한 번 사용해보시면 좋을 것 같습니다!

10위. Stagehand (https://github.com/browserbase/stagehand)

10위는 작년 한 해 동안 17,100개의 Star를 받은 Stagehand입니다.

Stagehand는 AI를 활용한 브라우저 자동화 프레임워크입니다.

기존의 Selenium이나 Playwright 같은 브라우저 자동화 도구들은 낮은 수준의 코드를 작성해야 했고, 반면에 AI 에이전트들은 프로덕션 환경에서 예측 불가능했습니다.

Stagehand는 이 두 가지의 장점을 결합하여, 개발자가 자연어와 코드를 선택적으로 사용할 수 있게 해줍니다.

익숙하지 않은 페이지를 탐색할 때는 AI를 사용하고, 정확히 무엇을 해야 할지 알 때는 코드를 사용할 수 있습니다.

그리고 AI 액션을 실행하기 전에 미리보기를 제공하고, 반복 가능한 액션을 쉽게 캐싱할 수 있어 시간과 토큰을 절약할 수 있습니다.

브라우저 자동화 작업에 AI의 유연성과 코드의 정확성을 모두 필요로 한다면 Stagehand를 사용해보시는 것을 추천드립니다!

지금까지 자바스크립트 생태계에서 작년 한 해 동안 가장 많은 GitHub Star를 받은 프로젝트를 1위부터 10위까지 살펴보았습니다.

---

각 세부 분야에서 주목해볼만한 프로젝트들

지금부터는 각 세부 분야에서 주목해볼만한 프로젝트들을 하나씩 살펴보도록 하겠습니다.

프론트엔드 프레임워크 부문 2위. Ripple (https://github.com/Ripple-TS/ripple)

프론트엔드 프레임워크 부문 1위는 React가 차지했습니다.

그리고 2위는 작년 한 해 동안 6,500개의 Star를 받은 Ripple이 차지했습니다.

Ripple은 TypeScript UI 프레임워크입니다.

React, Solid, Svelte의 장점들을 결합하여 만들어졌으며, .ripple이라는 파일 확장자를 사용하는 독특한 구조를 갖고 있습니다.

Ripple은 세밀한 반응성(Fine-grained Reactivity), 뛰어난 성능, 완전한 TypeScript 지원 등을 특징으로 합니다.

특히 track과 @ 문법을 사용하는 독특한 반응성 시스템이 인상적입니다.

그리고 React, Solid, Svelte를 사용해본 개발자라면 Ripple의 문법이 굉장히 익숙하게 느껴질 것입니다.

Ripple은 Meta의 React 팀에서 일했던 개발자가 만든 프로젝트이기 때문에, 앞으로 어떻게 발전해 나갈지 기대가 됩니다ㅎㅎ

리액트 에코시스템 부문 5위. Vercel AI SDK (https://github.com/vercel/ai)

리액트 에코시스템 부문 1~4위는 각각 shadcn/ui, React Bits, Excalidraw, Onlook이 차지했습니다.

그리고 5위는 작년 한 해 동안 9,700개의 Star를 받은 Vercel AI SDK가 차지했습니다.

Vercel AI SDK는 TypeScript를 위한 AI 툴킷입니다.

OpenAI, Anthropic, Google 등 40개 이상의 AI 모델 제공자를 통합된 인터페이스로 사용할 수 있으며,

React, Next.js, Svelte, Vue, Angular 등 다양한 UI 프레임워크와 함께 사용할 수 있습니다.

특히 에이전트를 만들고, 워크플로우를 구성하고, UI와 통합하는 과정이 굉장히 직관적입니다.

그리고 Vercel에서 만든 툴킷인만큼 Next.js와의 통합이 매우 뛰어납니다.

AI 기능을 웹 애플리케이션에 빠르게 추가하고 싶다면 Vercel AI SDK를 사용해보시는 것을 추천드립니다!

Vue 에코시스템 부문 1위. Slidev (https://github.com/slidevjs/slidev)

Vue 에코시스템 부문 1위는 작년 한 해 동안 9,300개의 Star를 받은 Slidev가 차지했습니다.

Slidev는 개발자를 위한 프레젠테이션 슬라이드 도구입니다.

Markdown으로 슬라이드를 작성할 수 있고, Vue 컴포넌트를 임베딩할 수 있으며, 코드 하이라이팅, 실시간 코딩 등의 기능을 기본적으로 제공합니다.

Slidev를 사용하면 PowerPoint나 Keynote 없이도 개발자 친화적인 방식으로 프레젠테이션을 만들 수 있습니다.

Markdown으로 콘텐츠에 집중하면서도, 필요할 때는 Vue의 강력한 기능들을 활용할 수 있습니다.

그리고 테마를 npm 패키지로 공유하고 사용할 수 있으며, UnoCSS를 통해 스타일링도 쉽게 할 수 있습니다.

발표 모드, 그리기 기능, LaTeX 수식, Mermaid 다이어그램, 녹화 기능 등 개발자가 필요로 하는 다양한 기능들이 내장되어 있습니다.

개발자분들은 발표 자료를 만들 때 Slidev를 한 번 사용해보시면 좋지 않을까 싶습니다.

다만, Slidev는 직접 로컬에서 실행해야 하는 도구이기 때문에,

웹에서 바로 마크다운 기반의 슬라이드를 만들고 공유할 수 있는 도구를 원하신다면,

제가 만든 MarkSlides도 한 번 살펴보시기 바랍니다ㅎㅎ

백엔드/풀스택 부문 1위. Payload (https://github.com/payloadcms/payload)

백엔드/풀스택 부문 1위는 작년 한 해 동안 8,900개의 Star를 받은 Payload입니다.

Payload는 일반적으로 Payload CMS라는 이름으로 알려져있는 프로젝트입니다.

이러한 이름에서 알 수 있듯이 Payload는 CMS(Content Management System)를 만들기 위한 Next.js 기반의 풀스택 프레임워크입니다.

기존 Next.js 프로젝트에 바로 설치해서 사용할 수 있기 때문에, 별도의 백엔드나 관리자 화면을 따로 만들 필요가 없습니다.

그리고 Payload를 사용하면 단순한 블로그부터 쇼핑몰, SaaS 같은 복잡한 서비스까지도 만들 수 있습니다.

Payload는 작년 6월에 Figma에 인수가 되었고, 앞으로 디자인과 코드 사이의 간극을 줄이기 위한 작업에 집중한다고 합니다.
(관련 글: https://payloadcms.com/posts/blog/payload-is-joining-figma)

개인적으로는 작년에 Payload를 써보려다가 시간이 없어서 못 써봤는데요, 올해는 꼭 Payload를 한 번 사용해봐야겠다는 생각이 듭니다ㅎㅎ

툴링 부문 1위. Bun (https://github.com/oven-sh/bun)

툴링 부문 1위는 작년 한 해 동안 10,800개의 Star를 받은 Bun이 차지했습니다.

Bun은 2023년에 29,300개의 Star를 받으며 전체 순위 2위를 기록했던 프로젝트이기도 합니다.

Bun은 JavaScript 및 TypeScript 애플리케이션을 위한 굉장히 빠른 올인원 툴킷입니다.

Bun은 처음부터 Node.js를 쉽게 대체할 수 있도록 설계되었습니다.

그래서 fs, path, Buffer 등을 포함한 Node.js와 Web API들을 모두 네이티브 환경에서 구현했습니다.

작년에는 풀스택 기능이 대폭 강화되면서 풀스택 자바스크립트 개발을 위한 훌륭한 플랫폼으로 자리매김했습니다.

그리고 작년 12월에 Bun은 Claude를 만든 Anthropic에 인수되었습니다.
(관련 글: Anthropic acquires Bun as Claude Code reaches $1B milestone )

만약 빠른 성능이 중요한 분들이라면 Node.js 대신 Bun을 한 번 사용해보시는 것을 추천드립니다.

앞으로 Anthropic의 지원하에 Bun이 어떻게 발전해 나갈지 기대가 됩니다ㅎㅎ

AI 부문 4위. Mastra (https://github.com/mastra-ai/mastra)

AI 부문 1~3위는 각각 n8n, Dyad, Stagehand가 차지했습니다.

AI 부문은 1~3위가 모두 Top 10에 들었는데요, 그만큼 다른 부문에 비해 관심도 높고 경쟁이 치열했던 것 같습니다.

이어서 AI 부문 4위는 작년 한 해 동안 15,000개의 Star를 받은 Mastra가 차지했습니다.

Mastra는 TypeScript로 AI 애플리케이션과 에이전트를 구축하기 위한 프레임워크입니다.

Gatsby를 만든 팀에서 개발한 Mastra는 AI 기반 애플리케이션을 구축하기 위한 모든 기능들을 기본적으로 제공합니다.

OpenAI, Anthropic(Claude), Google(Gemini) 등 40개 이상의 AI 모델 제공자를 통합할 수 있으며, 에이전트를 만들고 워크플로우를 구성할 수 있습니다.

특히 Human-in-the-loop 기능을 통해 에이전트나 워크플로우를 일시 중단하고 사용자 입력을 기다린 후 다시 실행할 수 있습니다.

그리고 대화 기록, RAG, 작업 메모리 등의 컨텍스트 관리 기능도 내장되어 있습니다.

Next.js, React, Node.js 등 기존 스택에 쉽게 임베드하거나 독립 서버로 배포 가능하며, MCP 서버 제작도 지원합니다.

TypeScript로 AI 에이전트나 애플리케이션을 구축하려는 분들은 Mastra를 한 번 사용해보시면 좋지 않을까 싶습니다ㅎㅎ

모바일 부문 1위. Valdi (https://github.com/Snapchat/Valdi)

모바일 부문 1위는 작년 한 해 동안 15,900개의 Star를 받은 Valdi가 차지했습니다.

Valdi는 Snapchat에서 만든 크로스 플랫폼 UI 프레임워크입니다.

TypeScript로 한 번 작성하면 iOS, Android, macOS에서 모두 네이티브 성능으로 동작하도록 컴파일됩니다.

이 분야에서 잘 알려진 프레임워크로는 React Native, Flutter 등이 있습니다.

Valdi는 Snap의 프로덕션 앱에서 8년 동안 사용되어 온 프레임워크로, 그 안정성이 입증되었습니다.

웹뷰나 JavaScript 브릿지를 사용하지 않고 TypeScript 코드를 직접 플랫폼 네이티브 뷰로 컴파일하기 때문에 진정한 네이티브 성능을 갖추고 있습니다.

자동 뷰 재활용, 최적화된 레이아웃 엔진, 뛰어난 VSCode 디버깅 경험 등을 제공하며,

기존 네이티브 앱에 부분적으로 통합하거나 완전히 새로운 앱을 만드는 것 모두 가능합니다.

앞으로 크로스 플랫폼 모바일 앱 개발에 관심이 있다면 Valdi도 한 번 고려해보면 좋지 않을까 싶습니다!

상태 관리 부문 1위. Zustand (https://github.com/pmndrs/zustand)

상태 관리 부문 1위는 작년 한 해 동안 7,400개의 Star를 받은 Zustand입니다.

2023년, 2024년에 이어 Zustand가 3년 연속으로 상태 관리 부문 1위를 차지했습니다.

당분간은 상태 관리 라이브러리의 대표 자리를 계속 유지하지 않을까 싶습니다ㅎㅎ

Zustand는 굉장히 간단한 코드만으로도 쉽게 사용할 수 있는 리액트용 상태 관리 라이브러리입니다.

Zustand라는 단어는 독일어로 ‘상태’라는 뜻을 갖고 있으며, 그래서 발음도 정확히 하자면 ‘슈스탄트’가 됩니다.

Zustand는 상태 관리의 기본만을 추구하며, Flux 아키텍처를 따르지만 훨씬 간단하게 구현되어 있습니다.

이러한 단순함과 사용 편의성 덕분에, 많은 리액트 개발자들이 상태 관리 라이브러리로 Zustand를 선택하고 있습니다.

그리고 Zustand는 React뿐만 아니라 React Native에서도 사용할 수 있습니다.

저도 대부분의 프로젝트에서 상태 관리를 위해 Zustand를 사용하고 있는데, 당분간은 다른 라이브러리로 바꾸지 않을 것 같습니다ㅎㅎ

스타일링 부문 1위. Tailwind CSS (https://tailwindcss.com/)

스타일링 부문 1위는 작년 한 해 동안 7,600개의 Star를 받은 Tailwind CSS가 차지했습니다.

2023년, 2024년에 이어 Tailwind CSS가 3년 연속으로 스타일링 부문 1위를 차지했습니다.

Tailwind CSS도 당분간은 계속 스타일링 부문 1위를 유지하지 않을까 싶습니다ㅎㅎ

Tailwind CSS는 빠른 UI 개발을 도와주는 utility-first CSS 프레임워크입니다.

Tailwind CSS는 사전에 정의된 className들을 활용하여 빠르게 스타일링을 할 수 있는게 특징입니다.

이번에 전체 2위를 차지한 shadcn/ui에서도 사용하는 스타일링 라이브러리이며,

현재 스타일링 라이브러리 트렌드 관점에서도 굉장히 압도적인 위치에 있습니다.

Tailwind CSS는 약간 호불호가 갈리긴 하지만 사용했을 때 생산성이 올라간다는 점은 분명하기 때문에,

짧은 기간 내에 빠르게 개발해야 할 때 사용하면 굉장히 좋다고 생각합니다ㅎㅎ

컴포넌트 라이브러리 부문 2위. tweakcn (https://github.com/jnsahaj/tweakcn)

컴포넌트 라이브러리 부문 1위는 shadcn/ui가 차지했습니다.

그리고 2위는 작년 한 해 동안 8,700개의 Star를 받은 tweakcn이 차지했습니다.

tweakcn은 shadcn/ui 컴포넌트를 시각적으로 커스터마이징할 수 있는 비주얼 테마 에디터입니다.

shadcn/ui로 만든 웹사이트들이 비슷하게 보인다는 점에서 출발한 tweakcn은, 색상, 폰트, 반경 등을 쉽게 커스터마이징할 수 있게 해줍니다.

AI 기반 테마 생성 기능도 제공하며, 아름다운 프리셋 테마들도 함께 제공됩니다.

실시간 미리보기를 보면서 테마를 조정할 수 있고, CSS 변수를 해당 색상으로 변경하는 코드를 바로 복사할 수 있습니다.

그리고 Figma로 내보내기, V0에서 열기 등의 기능도 지원합니다.

shadcn/ui를 사용하면서 자신만의 독특한 디자인을 만들고 싶다면 tweakcn을 꼭 사용해보시기 바랍니다ㅎㅎ

테스팅 부문 3위. Midscene.js (https://github.com/web-infra-dev/midscene)

테스팅 부문 1~2위는 각각 Stagehand, Playwright가 차지했습니다.

그리고 3위는 작년 한 해 동안 4,800개의 Star를 받은 Midscene.js가 차지했습니다.

Midscene.js는 비전 모델을 활용하여 모든 플랫폼의 UI 자동화를 구동하는 프레임워크입니다.

기존의 Cypress나 Puppeteer와 비슷하지만, AI 모델을 활용하여 자연어로 UI 요소를 찾고 조작할 수 있다는 점이 특징입니다.

하나의 API로 Chromium, Firefox, WebKit 브라우저를 모두 테스트할 수 있으며, 웹뿐만 아니라 모바일 플랫폼(Android, iOS)도 지원합니다.

비전 기반의 요소 인식을 통해 UI가 변경되어도 테스트가 깨지지 않고, 자연어로 테스트를 작성할 수 있어 유지보수가 훨씬 쉽습니다.

AI 기반의 유연한 UI 테스트 자동화를 원한다면 Midscene.js를 사용해보시기 바랍니다!

데스크탑 부문 1위. Tauri (https://github.com/tauri-apps/tauri)

데스크탑 부문 1위는 작년 한 해 동안 12,800개의 Star를 받은 Tauri입니다.

Tauri는 웹 프론트엔드 기술을 사용해서 데스크탑과 모바일 애플리케이션을 개발할 수 있게 해주는 프레임워크입니다.

Tauri와 유사한 프레임워크로는 GitHub에서 만든 오픈소스 프레임워크인 Electron이 있습니다.

다만, Tauri가 Electron과 다른 점은 React, Vue, Angular 같은 웹 프론트엔드 기술을 사용할 수 있다는 점입니다.

Tauri는 Rust로 백엔드를 구현하고, 시스템의 네이티브 WebView를 활용하여 앱을 렌더링합니다.

이로 인해 별도의 브라우저 엔진을 번들링하지 않아 앱 크기가 매우 작아집니다.

만약 웹 기술을 사용해서 가벼운 데스크탑 애플리케이션을 만들고 싶다면 Tauri를 한 번 사용해보시기 바랍니다ㅎㅎ

정적 사이트 부문 2위. Fumadocs (https://github.com/fuma-nama/fumadocs)

정적 사이트 부문 1위는 Next.js가 차지했습니다.

그리고 2위는 작년 한 해 동안 8,000개의 Star를 받은 Fumadocs가 차지했습니다.

Fumadocs는 리액트를 위한 문서 웹사이트 프레임워크입니다.

잘 알려진 유사한 프로젝트로는 정적 사이트 부문 4위를 차지한 Docusaurus가 있습니다.

Next.js를 공식적으로 지원하며, Vite 기반의 Tanstack Start, Waku, React Router도 지원합니다.

아름다운 UI, MDX 지원, 검색 기능, 다크 모드, 코드 하이라이팅 등 문서 사이트에 필요한 모든 기능을 기본적으로 제공합니다.

그리고 TypeScript로 작성되어 있어 타입 안전성도 보장됩니다.

설치도 간편하고 커스터마이징도 쉽기 때문에, 빠르게 문서 사이트를 만들고 싶다면 Fumadocs를 사용해보시기 바랍니다!

GraphQL 부문 1위. Twenty (https://github.com/twentyhq/twenty)

GraphQL 부문 1위는 작년 한 해 동안 10,200개의 Star를 받은 Twenty가 차지했습니다.

Twenty는 오픈소스 CRM(Customer Relationship Management) 시스템입니다.

공식 GitHub 저장소에서는 스스로를 Salesforce의 현대적인 대안이라고 소개하고 있습니다.

Twenty는 기존의 비싼 CRM 시스템들이 데이터 종속성으로 가격을 올리는 문제를 해결하고자 만들어졌습니다.

Notion, Airtable, Linear 같은 현대적인 도구들에서 영감을 받아 훨씬 나은 사용자 경험을 제공합니다.

필터, 정렬, 그룹화, 칸반 뷰, 테이블 뷰 등으로 레이아웃을 커스터마이징할 수 있고,

객체와 필드를 자유롭게 커스터마이징할 수 있으며, 규칙 기반 권한 관리도 가능합니다.

그리고 트리거와 액션으로 워크플로우를 자동화할 수 있으며, 이메일, 캘린더, 파일 관리 등의 기능도 통합되어 있습니다.

TypeScript, NestJS, PostgreSQL, GraphQL, React 등으로 구축되어 있으며, 오픈소스이기 때문에 자신의 환경에 맞게 확장하여 사용할 수 있습니다.

오픈소스 CRM 시스템이 필요하다면 Twenty를 한 번 살펴보시기 바랍니다ㅎㅎ

---

지금까지 작년 한 해 동안 자바스크립트 생태계에서 가장 많은 주목을 받은 프로젝트들에 대해 알아보았습니다.

작년에는 특히 AI와 관련된 프로젝트들이 많은 관심을 받았던 것 같습니다.

올해에는 또 어떤 새로운 프로젝트들이 등장할지 기대가 됩니다ㅎㅎ

여러분들도 자바스크립트 생태계에 꾸준히 관심을 가지고 지켜보시면 좋을 것 같습니다.

저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀