[무료 강의] 178~205쪽 디자인 도구 shadcn, tweakcn 알아보고 로컬 데이터베이스로 학생 상담 프로그램 만들기

바이브 코딩 6장, 디자인이 내 마음대로 안 나온다는 고민을 해결하는 방법을 다룹니다. 디자인보다 중요한 건 문제 해결이라는 관점에서 시작해, Tailwind CSS·shadcn/ui·Tweaks 같은 디자인 도구를 활용하는 법을 배우고, 실제로 학생 관리 시스템을 Next.js + Prisma + SQLite로 만들어보며 데이터베이스까지 연결하는 과정을 실습합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 디자인 고민과 바이브 코딩의 본질 (구글은 예쁜가?)
2:17 라이브러리와 프레임워크 개념 정리
3:31 프레임워크는 프랜차이즈다 — 주도권의 차이
5:11 Tailwind CSS가 바이브 코딩 시대에 사랑받는 이유
6:12 Bootstrap, shadcn/ui 소개
7:28 Tweaks로 테마 한 방에 바꾸기
10:32 네오 브루탈리즘 테마 적용 실습
12:32 마음에 안 드는 디자인 부분 수정하는 법
15:03 v0 서비스 — 디자인 특화 에이전트 소개
18:52 학생 관리 시스템 만들기 실습 시작
20:37 Prisma 통역사와 SQLite 데이터베이스 구조
25:28 리치 텍스트 에디터(Tiptap)로 상담 기록 기능 추가
27:29 완성된 시스템 테스트 및 더미 데이터 입력
32:42 마무리 — 6장 전체 정리

오늘 다룬 내용
- 디자인보다 문제 해결이 먼저라는 관점 (구글 사이트는 예쁘지 않아도 사람들이 찾는다)
- 라이브러리(도서관에서 책 빌리기)와 프레임워크(프랜차이즈 룰 따르기)의 차이
- Tailwind CSS, Bootstrap, shadcn/ui, Tweaks 등 디자인 도구 비교와 활용법
- v0 서비스로 디자인 퀄리티를 높이되 비용을 아끼는 전략
- Next.js + Prisma + SQLite 조합으로 로컬 데이터베이스 기반 학생 관리 시스템 구축
- 리치 텍스트 에디터(Tiptap)를 활용한 상담 기록 기능 구현
- 에이전트에게 더미 데이터 입력까지 시키는 실전 팁

#바이브코딩 #VibeCoding #프론트엔드 #TailwindCSS #shadcn #Tweaks #v0 #NextJS #Prisma #SQLite #커서 #Cursor #디자인도구 #웹개발 #코딩입문 #프레임워크 #라이브러리 #학생관리시스템 #데이터베이스 #AI코딩 #바이브코딩크래프트비어