RetroUI 2.0 출시 - 더 크게, 더 대담하게, 더 좋게

지난 몇 달 동안, 우리는 어둠 속에서 개발을 이어 왔습니다. 오늘, 마침내 불을 밝힙니다.

RetroUI 2.0이 출시되었습니다. 지금까지 내놓은 것 중 가장 큰 업데이트입니다. 단순한 버전 인상이 아닙니다. RetroUI가 할 수 있는 일도, 그것을 다루는 방식도 통째로 진화했습니다.

RetroUI를 처음 선보였을 때, 목표는 단순했습니다. "다른 모든 것과 달라 보이는 UI 라이브러리를 개발자에게 제공한다"는 것이었습니다. 대담한 디자인, 네오브루탈리즘 미학, 그리고 프로젝트를 두드러지게 만드는 컴포넌트. 그 비전은 변하지 않았습니다. 다만 그것을 어떻게 전달하는가는 크게 달라졌습니다.

새로워진 점을 살펴봅시다.

🎨 Base UI 지원 - 여러분이 기다려 온 토대

첫날부터 가장 많이 요청받은 기능 중 하나가 Base UI 지원이었습니다. 그것이 마침내 실현되었습니다.

Base UI란?

Base UI는 MUI 팀이 만든, 스타일이 없는 접근성 좋은 React 컴포넌트 라이브러리입니다. Material UI의 헤드리스하고 프레임워크에 구애받지 않는 대안이라고 생각하면 됩니다. 스타일에 대한 어떤 주장도 없이, 동작과 접근성 로직만을 통째로 손에 넣을 수 있습니다.

RetroUI에 왜 중요한가

지금까지 RetroUI 컴포넌트는 Radix UI 프리미티브 위에 구축되어 있었습니다(Radix가 뛰어나다는 데는 오해가 없길 바랍니다). 하지만 Base UI는 새로운 가능성을 열어 줍니다:

• 프레임워크 유연성: Base UI는 React, Next.js, 그리고 그 밖의 모던 프레임워크에서 매끄럽게 동작합니다
• 더 나은 트리 셰이킹: 최적화가 개선되어 번들 크기가 더 작아집니다
• 강화된 접근성: Base UI의 접근성 프리미티브는 실전에서 검증되었으며, 기본적으로 WCAG를 준수합니다
• 미래를 대비한 아키텍처: React Server Components와 모던 React 생태계를 위해 설계되었습니다

이것이 여러분에게 무엇을 의미할까요? RetroUI 컴포넌트는 이제 그 어느 때보다 성능이 좋고, 접근성이 뛰어나며, 유연해졌습니다. 그러면서도 여러분이 좋아하는 대담하고 개성 있는 디자인 언어는 그대로 유지합니다.

복사// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 하나의 사이트, 하나의 비전 - OS와 Pro의 통합

줄곧 마음에 걸리던 것이 있었습니다. RetroUI OS(무료)와 RetroUI Pro로 사이트가 나뉘어 있는 것이, 어딘가... 파편화된 느낌이었습니다. 커뮤니티를 하나로 모으기는커녕 갈라놓고 있는 것 같았습니다.

이제는 아닙니다.

완전히 새로워진 사이트

RetroUI 사이트를 처음부터 다시 만들어, OS와 Pro를 하나의 일관된 경험으로 통합했습니다. 새로워진 점은 다음과 같습니다.

통합된 컴포넌트 라이브러리

무료 버전도 Pro 버전도, 모든 컴포넌트를 한곳에서 둘러볼 수 있습니다. 무엇이 있는지 확인하려고 사이트를 오갈 필요가 더는 없습니다. 어느 것이 무료이고 어느 것이 프리미엄인지 명확하게 표시되어 있습니다.

깔끔해진 내비게이션

필요한 것을 찾기가 더 빠르고 직관적이 되었습니다. 컴포넌트, block, template, 문서. 모든 것이 논리적인 제자리를 갖추고 있습니다.

더 정교해진 디자인

우리는 우리가 말하는 바를 실천합니다. 새 사이트는 더 대담하고, 더 빠르며, 더 다듬어졌습니다. 미학에 제대로 몰입했을 때 RetroUI가 무엇을 할 수 있는지 보여 주는 쇼케이스입니다.

더 나은 모바일 경험

이전 사이트도 모바일에서 동작은 했습니다. 새 사이트는 모바일에서 빛납니다. 네이티브처럼 느껴지는 터치 조작을 갖춘, 제대로 만들어진 반응형 디자인입니다.

가장 좋은 점은요? 그 모든 것이 RetroUI 컴포넌트로 구동된다는 것입니다. 우리는 우리 라이브러리를 도그푸딩하고 있습니다. 즉, 사이트에서 보는 모든 컴포넌트는 여러분의 프로젝트에서도 그대로 쓸 수 있다는 뜻입니다.

📚 정말로 도움이 되는 문서

솔직해집시다. 문서는 흔히 뒷전으로 밀리기 마련입니다. 하지만 이번에는 다릅니다.

여러분의 작업이 한결 수월해지도록, RetroUI 문서를 기능별로 전면 재정비했습니다.

Markdown으로 복사

자신의 프로젝트 문서를 작성하고 계신가요? 아니면 RetroUI에 관한 블로그 글인가요? 이제 클릭 한 번으로 컴포넌트 코드를 Markdown으로 복사할 수 있습니다.

다음과 같은 상황에 안성맞춤입니다.

• 자신의 컴포넌트 문서를 만들 때
• 튜토리얼과 가이드를 작성할 때
• Markdown 기반 도구(Notion, GitHub 등)에서 코드 예시를 공유할 때

AI를 활용한 문서

문서에 AI 어시스턴트를 직접 통합했습니다. 컴포넌트 커스터마이즈 방법으로 막히셨나요? API를 이해하고 싶으신가요? 여러 페이지의 문서를 파헤치는 것보다 빠르게, AI가 답을 찾도록 도와줍니다.

예를 들어, 이런 것을 물어볼 수 있습니다.

• "Button 컴포넌트에서 커스텀 색상을 쓰려면?"
• "Card 컴포넌트는 어떤 props를 받을 수 있어?"
• "Modal을 폼과 함께 쓰는 예시를 보여 줘"

24시간 365일, RetroUI 전문가가 곁에 대기하고 있는 셈입니다.

개선된 코드 예시

모든 컴포넌트에 다음이 갖춰졌습니다.

• 직접 조작할 수 있는 라이브 프리뷰
• 다양한 유스 케이스를 보여 주는 여러 개의 배리언트
• 올바른 import를 담은 복사·붙여넣기로 바로 쓰는 코드
• 타입 안전성을 높여 주는 TypeScript 예시
• 각 컴포넌트가 a11y를 어떻게 다루는지 설명하는 접근성 관련 노트

더 이상 어림짐작은 필요 없습니다. 소스 코드를 파헤칠 필요도 없습니다. 오직 여러분의 개발을 가속해 주는, 명확하고 유용한 예시만 있을 뿐입니다.

🧱 100개가 넘는 새로운 UI block - 그 어느 때보다 빠르게

컴포넌트는 훌륭합니다. 하지만 때로는 버튼이나 카드만이 아니라 섹션 전체가 필요합니다.

바로 그때 등장하는 것이 block입니다.

block이란?

block이란, 프로젝트에 그대로 넣을 수 있는, 미리 만들어진 섹션을 말합니다. 히어로 섹션, 요금표, 기능 그리드, 고객 후기, CTA 등. 모두 완전히 반응형이고, 접근성이 좋으며, 그대로 커스터마이즈할 수 있는 상태입니다.

2.0에서 무엇이 새로운가?

떠올릴 수 있는 모든 카테고리에 걸쳐, 100개가 넘는 새로운 block을 추가했습니다.

히어로 섹션

• 미니멀한 것부터 풀블리드까지, 15가지가 넘는 새로운 히어로 배리에이션
• 애니메이션 배경, 스플릿 스크린 레이아웃, 동영상 히어로 포함

기능과 이점

• 아이콘 기반 기능 그리드
• 스크린샷 쇼케이스
• 단계별 가이드
• 비교 테이블

요금표

• 단순한 2컬럼부터 복잡한 4단계 요금제까지
• 결제 전환(월간/연간)
• 기능 비교 매트릭스

고객 후기

• 그리드 레이아웃, 캐러셀, 메이슨리 디자인
• 동영상 고객 후기
• 사회적 증거를 위한 로고 월

CTA와 전환

• 뉴스레터 등록
• 대기자 명단 폼
• 앱 다운로드 섹션
• 개성 있는 문의 폼

헤더와 내비게이션

• 메가 메뉴
• 모바일 퍼스트 내비게이션 패턴
• 스크롤 효과가 있는 고정 헤더

푸터

• 여러 컬럼의 푸터
• 미니멀한 1행 푸터
• 뉴스레터를 통합한 푸터

모든 block은 동일한 대담한 RetroUI 미학으로 만들어졌습니다. 두꺼운 테두리, 또렷한 그림자, 선명한 색, 그리고 비대칭 레이아웃. 주변에 녹아들기보다 두드러지도록 설계되었습니다.

복사// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
 
<HeroBold
  title="Your Product Name"
  subtitle="Ship faster with bold design"
  cta="Get Started"
/>

🌙 새로운 template: 다크 모드 개발자 도구 대시보드

template은 모든 것이 하나로 결실을 맺는 곳입니다. 컴포넌트, block, 그리고 디자인 철학이 하나의 완성된 애플리케이션으로 통합됩니다.

최신 template, 다크 모드 개발자 도구 대시보드를 소개합니다.

이것은 무엇인가?

개발자 도구, SaaS 플랫폼, 관리 화면을 위해 만들어진, 다크 모드를 우선으로 고려한 풀 기능 대시보드입니다. RetroUI의 대담한 미학으로 프로덕션에 견디는 애플리케이션을 구축하는 데 필요한 모든 것이 갖춰져 있습니다.

무엇이 포함되어 있는가?

완성된 대시보드 레이아웃

• 접을 수 있는 메뉴를 갖춘 사이드바 내비게이션
• 검색과 사용자 프로필을 갖춘 상단 헤더
• 모바일, 태블릿, 데스크톱에서 동작하는 반응형 디자인

미리 준비된 페이지

• 지표와 차트를 갖춘 대시보드 개요
• 사용자 관리(목록, 상세, 편집)
• 폼 예시를 포함한 설정 페이지
• API 문서 페이지
• 결제와 구독 관리

제대로 만들어진 다크 모드

• 단순히 색을 반전한 것이 아니라, 어두운 배경을 위해 의도적으로 설계
• 가독성을 위한 높은 콘트라스트
• 어두운 배경에서 도드라지는 선명한 액센트 색

프로덕션에 대응하는 기능

• 인증 화면(로그인, 회원가입, 비밀번호 재설정)
• 오류 상태와 빈 상태
• 로딩 스켈레톤
• 토스트 알림
• 모달 다이얼로그와 확인 화면

개발자 친화적

• TypeScript로 구축
• 문서화된 컴포넌트 구조
• 커스터마이즈와 확장이 용이
• Next.js App Router 규약을 준수

이것은 장난감 template이 아닙니다. 실제 제품을 위해, 그 위에 쌓아 올릴 수 있는 토대입니다. 새로운 SaaS를 론칭하든, 사내 도구를 만들든, 개발자 플랫폼을 만들어 내든, 이 template은 여러분에게 한 발 앞선 출발을 안겨 줍니다.

그리고 이것은 세상에 넘쳐나는 다른 대시보드 template과는 전혀 다르게 보입니다. 바로 그것이 노림수입니다.

왜 중요한가

RetroUI 2.0은 단순히 기능을 늘리는 것이 목표가 아닙니다. RetroUI를 실제 프로젝트에 더 강력하고, 더 유연하며, 더 유용한 것으로 만드는 것이 노림수입니다.

Base UI 지원은 더 나은 성능과 접근성을 뜻합니다.

통합된 사이트는 찾기 쉬움과, 누구에게나 더 나은 경험을 뜻합니다.

개선된 문서는 찾는 시간을 줄이고 만드는 시간을 늘리는 것을 뜻합니다.

100개가 넘는 새로운 block은 완성된 페이지를 며칠이 아니라 몇 분 만에 출시할 수 있음을 뜻합니다.

다크 모드 template은 다음 프로젝트를 위한 견고한 토대를 뜻합니다.

이 업데이트들을 합치면, RetroUI 2.0은 지루한 인터페이스를 단호히 거부하는 개발자를 위한, 가장 완성도 높고 프로덕션에 견디는 UI 라이브러리가 됩니다.

다음은 무엇인가?

이것은 큰 릴리스이지만, 여기서 멈출 생각은 없습니다. 로드맵에 있는 것은 다음과 같습니다.

• 더 많은 template(라이트 모드 배리언트, 랜딩 페이지, 이커머스)
• 디자인에서 개발로 이어지는 흐름을 빠르게 하는 Figma to Code 연동
• 라이브러리 확장에 맞춘 더 많은 Base UI 컴포넌트
• RetroUI로 만든 프로젝트를 소개하는 커뮤니티 쇼케이스
• 자주 쓰이는 패턴과 유스 케이스를 다루는 동영상 튜토리얼

우리는 귀를 기울이고 있습니다. 필요한 컴포넌트, 원하는 기능, 마주한 문제가 있다면 꼭 알려 주세요. RetroUI는 개발자에 의한, 개발자를 위한 것입니다. 여러분의 피드백이 다음에 만들 것을 빚어냅니다.

오늘부터 RetroUI 2.0을 써 보세요

바로 시작해 보시겠어요? 도입 방법은 다음과 같습니다.

처음 오신 분께

복사# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

컴포넌트를 둘러보고, block을 살펴보고, 새로운 template을 손에 넣으세요. 모두 Next.js, React, Vite 프로젝트에서 바로 쓸 수 있는 상태입니다.

이미 쓰고 계신 분께

이미 RetroUI를 쓰고 계신다면, 2.0으로의 업그레이드는 아주 간단합니다.

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
복사

파괴적 변경에 관해서는 changelog를 확인해 주세요(아주 적으며, 그 모두에 대한 우회 방법을 문서로 준비해 두었습니다).

감사합니다

RetroUI가 존재하는 것은, 여러분 같은 개발자가 흔해빠진 디자인에 질려 있기 때문입니다. 두드러지는 것, 개성 있는 것, 남다르게 느껴지는 것을 만들고 싶다. 그렇게 생각하기 때문입니다.

우리는 그것을 더 쉽게 만들기 위해 여기 있습니다.

버전 2.0은 수개월의 개발, 수백 건의 커밋, 헤아릴 수 없는 디자인의 시행착오, 그리고 멋진 커뮤니티의 피드백이 맺은 결실입니다. 이 여정의 일원이 되어 주셔서 감사합니다.

자, 대담한 무언가를 만들러 가 봅시다. 🚀

RetroUI 2.0 살펴보기:

• 컴포넌트 둘러보기
• block 확인하기
• template 손에 넣기
• 문서 읽기
• 커뮤니티 참여하기

질문이 있으신가요? 피드백은요? 버그를 발견하셨나요? GitHub에서 issue를 열거나 Twitter/X로 말을 걸어 주세요.