1인 개발자의 가성비 기술 스택 – Shadcn UI

나는 웹 프론트 개발이 필요하면 주로 React(Next.js) + Tailwind CSS + Shadcn UI 조합을 사용한다.

이 조합은 현재 날짜 기준 가장 큰 생태계를 이루고 있기에, 웬만한 컴포넌트들은 찾아서 가져다 사용할 수 있을 정도이다.

Shadcn UI는 기존 Bootstrap, Google MUI 등과 다른 접근 방식으로 높은 자유도를 제공한다.

기존 UI 라이브러리들은 NPM 모듈을 설치해, 해당 모듈에서 제공하는 컴포넌트 (e.g., Button 컴포넌트) 등을 사용하는 방식이다.

UI 라이브러리가 제공(노출)하는 옵션을 통해 약간의 디자인 변경이 가능하지만, 이는 제한적이다.

반면, Shadcn은 기존 UI 라이브러리처럼 NPM 모듈로 컴포넌트를 제공하지 않는다.

초기 설정을 마친 후, 사용할 컴포넌트 코드를 공식 문서에서 복사하고 본인 프로젝트에 붙여넣으면 끝이다.

코드를 복사·붙여넣기하는 방식으로 UI 개발이 진행되기에, 우리가 원하는 대로 커스터마이징이 가능하다.

덕분에 현재 UI 라이브러리 중 엄청난 속도로 성장하고 있으며, 공식 문서와 여러 커뮤니티에서 프로젝트에 바로 가져다 사용할 수 있을 정도의 컴포넌트들을 제공한다.

유용한 링크 모음

• 공식 문서
  • https://ui.shadcn.com/
• 커뮤니티 컴포넌트 모음
  • https://github.com/birobirobiro/awesome-shadcn-ui