shadcn.io: shadcn/ui의 새로운 block을 찾기에 가장 좋은 곳
컴포넌트는 출발점일 뿐, 페이지 전체를 빠르게 완성해 주는 것은 block입니다. 새롭고 프로덕션에 바로 쓸 수 있는 shadcn/ui block을 찾을 때 shadcn.io가 우리의 최애가 된 이유를 소개합니다.
Dov Azencot
@DovAzencotshadcn/ui로 개발한다면, 그 마법은 이미 알고 계실 겁니다. 코드가 여러분의 것이 됩니다. 씨름해야 할 블랙박스 의존성은 없습니다. 컴포넌트를 복사해 넣으면, 그때부터는 마음대로 빚어낼 수 있습니다.
하지만 컴포넌트는 작은 조각입니다. 버튼 하나, 입력란 하나, 카드 하나. 정말로 시간을 잡아먹는 것은 그 조각들을 조립해 block으로 만드는 일입니다. 요금 섹션, 대시보드 뼈대, 인증 화면, 기능 그리드. 작업의 대부분(그리고 예전 프로젝트에서 복사·붙여넣기 하는 일의 대부분)이 실제로 벌어지는 곳이 바로 거기입니다.
그 틈을 메워 주는 것이 shadcn.io이며, 우리가 이곳을 단골로 삼은 이유입니다.
shadcn.io란?
shadcn.io는 shadcn/ui 위에 구축된 block의, 대규모이면서 지금도 활발히 성장하고 있는 레지스트리입니다. 프리미티브가 아니라, 페이지에 그대로 얹어 출시할 수 있는, 조립이 끝난 완성된 섹션입니다. 직접 엮으면 한나절은 걸릴 레이아웃이 여기 있습니다.
모든 block은 shadcn/ui 그 자체와 같은 철학을 따릅니다. 여러분이 소유하는 평범한 코드이고, Tailwind로 스타일링되며, 런타임 락인이 없습니다. 설치하면 그것은 여러분 코드베이스의 일부가 됩니다.
새로운 block을 찾기에 가장 좋은 이유
이곳이 두드러지는 지점은 몇 가지입니다:
- 폭넓음. 마케팅 섹션, 대시보드, 테이블, 인증 플로우, 요금표, 고객 후기. 한 줌의 데모가 아니라, 실제 제품이 정말로 필요로 하는 페이지를 카탈로그가 아우릅니다.
- 신선함. 새로운 block이 정기적으로 올라오므로, 1년 전에 마지막으로 손댄 것이 아니라 지금의 패턴으로 개발할 수 있습니다.
- 기도하며 설치하는 게 아니라, 복사·붙여넣기. block은 shadcn/ui 프리미티브로 조립되어 있어서, 마치 여러분이 직접 쓴 것처럼 읽힙니다. 커스터마이즈도, 테마 적용도 쉽습니다.
- 레지스트리와 잘 어우러짐. block은 여러분이 이미 쓰고 있는 shadcn 워크플로에 그대로 들어맞으므로, 새로 배울 것이 전혀 없습니다.
우리의 사용법
우리 방식은 단순합니다. 80% 정도 완성되어 있는 shadcn.io block으로 페이지를 시작한 다음, 남은 20%를 브랜드에 맞게 다듬습니다. 코드가 여러분의 것이므로, 그 마지막 20%는 식은 죽 먹기입니다. 토큰을 바꾸고, 여백을 조정하면, 끝입니다. "요금 페이지를 디자인한다"는 작업이 하루짜리에서 한 시간짜리로 바뀝니다.
Neobrutalism ♥ shadcn.io
우리는 shadcn.io와 파트너라는 사실을 자랑스럽게 여깁니다. Neobrutalism가 shadcn/ui에 더한 네오브루탈리즘 해석이 마음에 든다면, 그들의 block 라이브러리에서도 분명 편안함을 느낄 것입니다. 소유 모델도, Tailwind 토대도 같으면서, 아우르는 범위는 훨씬 넓으니까요.
**shadcn.io**에서 컬렉션을 둘러보고, block이 이미 준비되어 있을 때 페이지가 얼마나 빠르게 형태를 갖추는지 직접 느껴 보세요.