YepBuddy - (2) 이게 바로 개발자식 UI다! shadcn으로 디자인하기
2025-09-23
문제 상황
혼자 진행하는 개인 프로젝트였다. 디자이너가 없으니 결국 내가 모든 UI를 직접 만들어야 했다.
그래서 버튼, 폼, 모달 같은 기본 컴포넌트를 전에 만든 프로젝트 코드에서 복붙해 쓰기 시작했다. 그런데 어느 순간 깨달았다.
"이건 새로운 프로젝트가 아니라, 그냥 도메인만 바꾼 클론 아닌가?"
UI가 똑같으니 아무리 기능을 바꿔도 새로움이 느껴지지 않았다. 그래서 이번엔 제대로 된 디자인 시스템을 써보기로 했다. 그게 바로 shadcn/ui다.
shadcn이란?
npm 패키지를 설치하는 게 아니라, 내 코드로 복사해 오는 컴포넌트 배포 방식이다. CLI 명령어로 원하는 컴포넌트를 추가하면, 그 코드가 내 프로젝트 내부(components/ui)로 직접 들어온다.
즉, 외부 패키지처럼 블랙박스가 아니라 내가 소유하는 코드가 된다.
- Tailwind 기반이라 커스터마이징이 직관적이다.
- 디자인 기본값이 좋아서 "있어 보이는 UI"를 빠르게 확보할 수 있다.
- 필요한 컴포넌트만 가져오니 번들 낭비도 없다.
과정
shadcn 사이트 접속 후 Components 탭 클릭
Components 중 Button을 한 번 만들어 보자.
Installation의 명령어를 실행하면 Button 컴포넌트가 ui 폴더 내부에 생성된다.
Usage에서 필요한 Button 컴포넌트의 스타일에 따라 사용하면 정상적으로 보인다.
global.css에서 버튼 토큰을 설정해 색상도 수정할 수 있다. 나는 초록색을 메인 색상으로 잡아 적용했다.
결과
- 기본 스타일이 탄탄해 "있어 보이는" 레이아웃을 빠르게 확보했다.
- 디자인 퀄리티와 개발 속도를 동시에 챙길 수 있었다.
- 외부 패키지의 블랙박스가 아니라 내 코드이기 때문에 완전한 제어가 가능하다.
- 프로젝트의 톤앤매너를 잃지 않으면서 UI 통일성을 유지할 수 있었다.