Tailwind CSS와 Shadcn UI 조합으로 Task Manager 앱의 UX를 크게 개선함

Context

Day 58에서 만든 Task Manager 앱이 기능적으로는 작동하지만 UI가 투박한 상태였음. Shadcn UI의 제한된 badge variant 문제를 커스터마이징으로 해결할 필요가 있었음.

Technical Solution

• Tailwind CSS: 레이아웃과 스페이싱 유틸리티로 전체적인 스타일링 기초 구축함
• Shadcn UI: button, card, badge, input, textarea, select, label 컴포넌트를 프로젝트에 직접 설치함
• status badge: Tailwind 클래스를 사용한 커스텀 helper 함수로 success와 warning 스타일 직접 구현함
• Button asChild prop: Link 안에 버튼 스타일 적용하여 wrapper div 없이 구현함
• 반응형 그리드: max-w-4xl centered container와 2-column 그리드로 데스크톱 최적화함

Impact

투박했던 앱 UI가 사용자 친화적인 디자인으로 개선됨. Shadcn의 소스 직접 소유 구조 덕분에 overrides나 !important 없이 자유로운 커스터마이징 가능해짐.

Key Takeaway

Shadcn UI는 전통적인 컴포넌트 라이브러리와 달리 프로젝트에 코드를 직접 소유하므로 완전한 제어권과 유연한 커스터마이징이 가능함.