728x90
AI 코딩 도구(Codex, Claude Code, Cursor, GPT-5)를 활용한 개발에서는 라이브러리 선택이 생산성을 크게 좌우한다.
좋은 조합을 선택하면:
- 프롬프트 길이 감소
- 토큰 사용량 절감
- 유지보수 향상
- AI 결과물 품질 향상
반대로 라이브러리가 난립하면 AI도 혼란을 겪고 결과 품질이 떨어진다.
핵심 원칙
프로젝트마다 아래 영역별로 1개씩만 선택하는 것이 좋다.
영역역할권장 개수
| UI Framework | 버튼, 모달, 폼, 레이아웃 | 1개 |
| Grid | 목록, CRUD, 데이터 편집 | 1개 |
| Data | API 조회, 캐시, 상태관리 | 1개 |
| Utility | 날짜, 검증, 차트 등 | 필요 시 추가 |
프로젝트 유형별 추천 조합
프로젝트 유형추천 조합추천도
| 기존 ASP.NET MVC | AdminLTE + AG Grid + jQuery Ajax | ⭐⭐⭐⭐⭐ |
| ERP / MES | AdminLTE + AG Grid | ⭐⭐⭐⭐⭐ |
| 일반 React 관리자 | Ant Design + TanStack Query | ⭐⭐⭐⭐⭐ |
| 고급 업무 시스템 | Ant Design + TanStack Query + AG Grid | ⭐⭐⭐⭐⭐ |
| 스타트업 MVP | Tailwind + shadcn/ui + TanStack Query | ⭐⭐⭐⭐⭐ |
| SaaS 서비스 | Tailwind + shadcn/ui + TanStack Query | ⭐⭐⭐⭐ |
| 데이터 분석 시스템 | Ant Design + AG Grid + TanStack Query | ⭐⭐⭐⭐⭐ |
언제 AG Grid가 필요할까?
많은 개발자가 습관적으로 AG Grid를 추가한다.
하지만 대부분은 필요 없다.
기능Ant Design TableAG Grid
| 게시판 | ✅ | ❌ |
| 회원관리 | ✅ | ❌ |
| 공지사항 | ✅ | ❌ |
| 일반 CRUD | ✅ | ❌ |
| 대량 데이터 | ⚠️ | ✅ |
| 엑셀 스타일 편집 | ❌ | ✅ |
| 셀 복사/붙여넣기 | ❌ | ✅ |
| 그룹핑 | ❌ | ✅ |
| Pivot | ❌ | ✅ |
결론
일반 관리자
Ant Design + TanStack Query
ERP/MES
Ant Design + TanStack Query + AG Grid
AI 생산성을 높이는 공통 Utility Library
아래 라이브러리는 프로젝트 종류와 무관하게 추천한다.
기능추천 라이브러리이유
| 날짜 처리 | dayjs | 날짜 계산 표준화 |
| API 호출 | axios | fetch 코드 감소 |
| 데이터 캐싱 | TanStack Query | 서버 상태 관리 |
| 검증 | zod | Validation 단순화 |
| 폼 | React Hook Form | Form 상태 관리 |
| 아이콘 | lucide-react | 일관된 아이콘 |
| 차트 | ECharts | 대시보드 표준 |
| 파일 업로드 | react-dropzone | Drag & Drop |
| 알림 | react-hot-toast | UX 향상 |
| 클래스 관리 | clsx | 조건부 class 정리 |
AI 토큰 절감 효과 체감도
실제로 AI 개발 시 체감이 큰 순서.
라이브러리절감 효과
| AG Grid | ⭐⭐⭐⭐⭐ |
| TanStack Query | ⭐⭐⭐⭐⭐ |
| zod | ⭐⭐⭐⭐ |
| React Hook Form | ⭐⭐⭐⭐ |
| dayjs | ⭐⭐⭐⭐ |
| ECharts | ⭐⭐⭐⭐ |
| axios | ⭐⭐⭐ |
| react-dropzone | ⭐⭐⭐ |
| lucide-react | ⭐⭐ |
| clsx | ⭐⭐ |
같이 쓰면 안 되는 조합
나쁜 조합이유
| Ant Design + MUI + Mantine | UI 충돌 |
| AG Grid + TanStack Table | 역할 중복 |
| Bootstrap + Tailwind 무분별 혼용 | CSS 충돌 |
| jQuery + React 혼용 | 유지보수 악화 |
AI가 가장 좋아하는 구조
기존 기업 시스템
영역선택
| UI | AdminLTE |
| Grid | AG Grid |
| API | jQuery Ajax |
| Date | dayjs |
일반 React 관리자
영역선택
| UI | Ant Design |
| Grid | Ant Design Table |
| Data | TanStack Query |
| Validation | zod |
| Date | dayjs |
고급 업무 시스템
영역선택
| UI | Ant Design |
| Grid | AG Grid |
| Data | TanStack Query |
| Validation | zod |
| Date | dayjs |
스타트업 MVP
영역선택
| UI | shadcn/ui |
| Styling | Tailwind CSS |
| Data | TanStack Query |
| Validation | zod |
| Date | dayjs |
마무리
AI 시대의 생산성은 AI 모델보다 프로젝트 표준화에 더 큰 영향을 받는다.
가장 중요한 원칙은 단 하나다.
UI 1개 + Grid 1개 + Data 1개
그리고 필요한 Utility만 추가하자.
라이브러리를 많이 아는 것보다, 라이브러리를 적절하게 조합하는 것이 바이브 코딩의 핵심 경쟁력이다.
반응형