무슨 일이 있었나요
네오브루탈리즘(Neobrutalism) 디자인의 리액트 컴포넌트를 모아둔 오픈소스 프로젝트 neobrutalism.dev가 업데이트됐어요. 이번 업데이트의 핵심은 두 가지인데요, Base UI 지원이 추가됐고, 새로운 컬러 테마가 들어왔어요. 언뜻 들으면 '디자인 라이브러리 하나 업데이트됐네' 정도로 보일 수 있는데, 이 안에 지금 리액트 UI 생태계에서 벌어지고 있는 큰 변화가 담겨 있어서 짚어볼 만해요.
네오브루탈리즘이 뭐냐면
브루탈리즘은 원래 건축 용어예요. 1950~70년대에 콘크리트를 그대로 드러낸 투박하고 거친 건물 양식을 말하거든요. 웹에서는 여기에 '네오'를 붙여서, 두꺼운 검정 테두리, 흐리지 않고 딱 떨어지게 넣은 하드 섀도우, 쨍한 원색, 일부러 살짝 비뚤어진 요소 같은 특징을 가진 스타일을 부르는 말이 됐어요. 요즘 흔한 유리 같은 반투명 효과나 부드러운 그라데이션과 정반대 방향이죠. 검로드(Gumroad)나 피그마의 마케팅 페이지에서 보셨을 법한 그 느낌이에요.
이 스타일이 인기를 끄는 이유는, 모든 사이트가 비슷비슷하게 깔끔해지면서 오히려 '개성 있는 투박함'이 눈에 띄기 때문이에요. 특히 개발자 개인 프로젝트나 인디 제품 랜딩 페이지에 잘 어울려요.
shadcn/ui 위에 얹는 구조
neobrutalism.dev는 처음부터 shadcn/ui를 기반으로 만들어졌어요. shadcn/ui가 뭐냐면, 보통의 UI 라이브러리처럼 npm으로 설치해서 import하는 방식이 아니라, 컴포넌트 소스 코드를 내 프로젝트 폴더에 직접 복사해 넣는 방식이에요. 그래서 스타일이나 동작을 마음대로 고칠 수 있죠. 완제품 가구를 사는 게 아니라, 설계도와 부품을 받아서 내 집에 맞게 조립하는 느낌이에요.
그런데 shadcn/ui 컴포넌트는 겉모습과 속 동작이 분리돼 있어요. 겉모습은 테일윈드 CSS 클래스로 입히고, 속 동작(키보드 접근성, 포커스 관리, 드롭다운 열고 닫기 같은 것)은 '헤드리스(headless) UI 라이브러리'가 담당해요. 헤드리스라는 건 '머리가 없다', 즉 디자인 없이 기능만 제공한다는 뜻이에요. 지금까지 이 역할은 Radix UI가 맡아왔어요.
neobrutalism.dev는 바로 이 겉모습 부분만 네오브루탈리즘 스타일로 갈아끼운 거예요. 버튼, 카드, 다이얼로그, 셀렉트 같은 컴포넌트가 두꺼운 테두리와 하드 섀도우를 입고 나오는 거죠. 사용법도 shadcn과 똑같아서, CLI로 컴포넌트를 추가하면 내 프로젝트에 소스가 들어와요.
이번 업데이트의 진짜 의미: Base UI
여기서 Base UI가 등장해요. Base UI는 MUI(Material UI) 팀이 만든 헤드리스 컴포넌트 라이브러리예요. 그리고 흥미롭게도, 원래 Radix UI를 만들었던 핵심 개발자들이 이 프로젝트에 합류했어요. Radix가 최근 몇 년간 유지보수 속도가 눈에 띄게 느려지면서 커뮤니티에 불안감이 있었거든요. 이슈가 쌓이고, 새 리액트 버전 대응이 늦어지는 식으로요.
그래서 shadcn/ui가 2026년 초에 Base UI를 공식 지원하기 시작했어요. 이제 shadcn 프로젝트를 만들 때 Radix와 Base UI 중 하나를 고를 수 있게 된 거예요. neobrutalism.dev가 이번에 Base UI를 지원한다는 건, 이 흐름을 그대로 따라간다는 뜻이에요. Base UI를 고른 프로젝트에서도 네오브루탈리즘 컴포넌트를 그대로 쓸 수 있게 된 거죠.
Base UI와 Radix의 차이를 조금 더 말씀드리면, Base UI는 컴포넌트 API를 좀 더 일관되게 다듬었고, render prop 방식으로 원하는 요소로 렌더링을 바꾸는 패턴을 제공해요. Radix의 asChild와 비슷한 목적이지만 접근 방식이 달라요. 완전히 호환되는 건 아니라서, 기존 Radix 기반 프로젝트를 옮기려면 컴포넌트 단위로 손을 봐야 해요.
새 컬러 테마는 말 그대로 팔레트 옵션이 늘어난 거예요. 네오브루탈리즘은 색이 곧 개성이라서, 기본 제공 팔레트가 다양할수록 '다 똑같아 보이는' 문제를 피하기 쉬워져요.
업계 흐름에서 보면
리액트 UI 생태계는 지금 '헤드리스 + 스타일은 내가' 구조로 완전히 넘어왔어요. 예전에는 Material UI, Ant Design처럼 디자인이 통째로 딸려오는 라이브러리를 썼다면, 지금은 Radix, Base UI, React Aria(어도비) 같은 헤드리스 라이브러리 위에 테일윈드로 스타일을 입히는 게 표준이 됐죠. shadcn/ui는 이 구조를 가장 쉽게 쓰게 만든 프로젝트고, 그 위에 neobrutalism.dev 같은 '테마 레이어'가 또 얹히는 거예요.
즉 층이 세 개예요. 맨 아래 헤드리스(동작), 중간에 shadcn(기본 조립), 맨 위에 테마(개성). 이 구조 덕분에 맨 아래 층이 Radix에서 Base UI로 바뀌어도 위 층들이 따라갈 수 있는 거고요.
한국 개발자에게 주는 시사점
사이드 프로젝트나 포트폴리오 사이트를 만드는 분이라면 바로 써볼 만해요. shadcn을 이미 쓰고 있다면 몇 개 컴포넌트만 바꿔 끼워도 분위기가 확 달라지거든요. 다만 네오브루탈리즘은 호불호가 강한 스타일이라, B2B 관리자 화면이나 금융 서비스처럼 신뢰감이 중요한 곳에는 잘 안 맞을 수 있어요.
더 중요한 건 Base UI 전환을 지켜봐야 한다는 점이에요. 지금 shadcn 기반으로 새 프로젝트를 시작한다면 Radix로 갈지 Base UI로 갈지 한 번쯤 고민해보세요. Radix는 검증됐지만 유지보수가 느리고, Base UI는 새롭지만 활발히 개발되고 있어요. 장기 프로젝트라면 Base UI 쪽이 안전한 선택이 될 가능성이 커요.
정리하면
neobrutalism.dev의 이번 업데이트는 단순한 테마 추가가 아니라, 리액트 UI 생태계가 Radix에서 Base UI로 무게중심을 옮기고 있다는 걸 보여주는 작은 신호예요.
여러분은 새 프로젝트를 시작한다면 Radix와 Base UI 중 어느 쪽을 고르시겠어요? 그리고 네오브루탈리즘 같은 개성 강한 스타일, 실제 서비스에 적용해본 경험이 있으신가요?
🔗 출처: Hacker News