HeroUI v3 등장 NextUI는 왜 새로 태어났나

HeroUI v3 리액트 컴포넌트 라이브러리

 

⚡ 한 줄 요약: NextUI가 HeroUI로 바뀌었다. → v3는 밑바닥부터 다시 썼다. → 이제 React와 React Native를 한 코드로, Tailwind CSS v4 위에서 돌린다.

 

 

📑 목차

• 무슨 일인지
• 배경·맥락 — 왜 다시 썼나
• 개발자에게 주는 의미
• 실무 적용 포인트

 

무슨 일인지

리액트 개발자라면 한 번쯤 써봤을 컴포넌트 라이브러리 NextUI가 이름을 HeroUI로 바꾼 데 이어, 이번엔 v3를 완전히 새로 작성(ground-up rewrite)해 내놨다.

핵심 변화는 세 가지다.
첫째, 웹(React)만이 아니라 React Native까지 같은 API로 지원하는 방향으로 재설계됐다.
둘째, 스타일 엔진을 Tailwind CSS v4 위에 다시 올렸다.
셋째, 기존 v2와 호환을 유지하며 조금씩 고치는 대신, 아예 처음부터 다시 짜는 길을 택했다.

"버전 하나 올라간 것"으로 넘기기 쉽지만, 메이저 라이브러리가 '점진적 개선'이 아니라 '전면 재작성'을 선언하는 건 그 자체로 신호다.
기존 구조로는 풀기 어려운 한계에 도달했다는 뜻이기 때문이다.

 

 

배경·맥락 — 왜 다시 썼나

NextUI → HeroUI 개명부터 짚자. 'NextUI'라는 이름은 Next.js 전용이라는 오해를 자주 샀다.
실제로는 Vite, Remix 등 어디서든 쓰는 범용 라이브러리인데 이름이 발목을 잡았다.
개명은 그 혼선을 끊는 결정이었다.

HeroUI의 뼈대는 두 가지다. 하나는 Adobe가 만든 접근성 라이브러리 React Aria로, 키보드 내비게이션·포커스 관리·ARIA 속성 같은 '눈에 안 보이지만 없으면 큰일 나는' 부분을 담당한다.
다른 하나는 스타일링을 맡는 Tailwind CSS다.

그런데 이 Tailwind가 v4에서 크게 바뀌었다.
v4는 Rust 기반 새 엔진으로 빌드가 빨라졌고, 무엇보다 설정 방식이 JS 파일(tailwind.config.js)에서 CSS 파일 중심으로 이동했다.
@theme, @property, color-mix(), oklch() 같은 최신 CSS 네이티브 기능을 전제로 깔았다.
컴포넌트 라이브러리 입장에선 토대가 통째로 바뀐 셈이라, 그 위에 얹힌 v2 구조를 억지로 이어 붙이는 것보다 다시 쓰는 편이 깔끔했던 것으로 보인다.

여기에 웹과 모바일을 한 코드베이스로 묶으려면 컴포넌트 추상화 계층부터 다시 설계해야 한다.
'재작성'이라는 선택의 배경이다.

 

 

개발자에게 주는 의미

정리하면, HeroUI v3가 던지는 메시지는 라이브러리 하나의 업데이트가 아니라 프런트엔드 UI 레이어의 전제 조건이 옮겨가고 있다는 것이다.

 

바뀐 축	예전	v3 이후 무엇을 준비하나
설정 위치	tailwind.config.js (JS)	CSS @theme 블록 — 디자인 토큰을 CSS로 관리
플랫폼	웹 중심	웹+RN 공유 — 컴포넌트 API를 한 벌로
스타일 값	hex/rgb	oklch 등 넓은 색공간 — 다크모드·대비 계산 유리
접근성	각자 구현	React Aria 위임 — 직접 만들지 말 것

 

당장 오늘 프로젝트를 갈아엎으라는 얘기가 아니다.
하지만 다음 신규 프로젝트에서 Tailwind v4를 기본값으로 깔지 결정할 시점은 이미 왔다.
팀이 여전히 v3(구 Tailwind)에 묶여 있다면, 라이브러리 생태계가 v4 전제로 이동하는 흐름과 언제 어긋나는지 체크해둬야 한다.

 

 

실무 적용 포인트

Tailwind v4의 CSS-first 설정은 이렇게 짧아진다.
HeroUI v3가 딛고 선 토대이기도 하다.

/* app.css — v4는 @import 한 줄로 시작한다 */
@import "tailwindcss";

/* 디자인 토큰을 CSS에서 직접 정의 (JS config 없이) */
@theme {
  --color-brand: oklch(0.65 0.2 250); /* 넓은 색공간, 계산 유리 */
  --radius-card: 0.75rem;
}

// 컴포넌트는 토큰을 그대로 유틸리티로 소비
export function CTA() {
  return (
    <button className="bg-brand rounded-[--radius-card] px-4 py-2 text-white">
      시작하기
    </button>
  );
}

⚠️ 단, HeroUI v3의 정확한 컴포넌트 API·설치 명령·마이그레이션 가이드는 반드시 [공식 문서]로 확인하라.
재작성 직후 버전은 API가 유동적이고, v2→v3 이전 경로도 별도로 안내된다.
프로덕션 도입 전엔 changelog와 breaking changes를 먼저 읽는 게 안전하다.

그래서 뭘 해보면 되나 — 체크포인트

• 신규 프로젝트라면: Tailwind CSS v4 + @theme CSS-first 설정을 스캐폴딩 기본값으로 실험해보라. tailwind.config.js가 사라진 구조에 팀이 적응하는 데 시간이 든다.
• 기존 NextUI/HeroUI v2 사용 중이라면: 지금 급히 올리지 말고, 공식 마이그레이션 가이드 공개 여부와 RN 지원 성숙도를 관찰 포인트로 잡아라. 재작성 버전은 초기 안정화 기간이 필요하다.
• 접근성이 걱정이라면: 커스텀 드롭다운·모달을 직접 만들지 말고 React Aria 기반 컴포넌트에 위임하는 쪽이 장기적으로 싸게 먹힌다.

다음 편에서는 'Tailwind CSS v4 마이그레이션에서 진짜 깨지는 것들'을 정리해볼 예정이다.

 

 

참고

• InfoQ — HeroUI v3 Lands as a Ground-Up Rewrite for React and React Native, Built on Tailwind CSS v4
• HeroUI 공식 사이트 (구 NextUI)
• Tailwind CSS v4 공식 문서

 

🔗 함께 보면 좋은 글

• ZAI·ZCode가 AI 코딩 도구 시장에 도전한 이야기