바이브 코딩! 주도권을 쥐고 디자인을 일정하게 하려면?

바이브 코딩으로 화면이 저마다 다르게 나올 때, 일정하게 맞추는 방법을 다루는 실전 가이드입니다. Cursor(Composer)와 Codex에 같은 프롬프트를 넣어 커뮤니티 사이트를 만들고, 나란히 본 뒤, shadcn/ui 같은 기성 디자인 부품을 지정했을 때 결과가 어떻게 맞춰지는지 비교합니다. 이어서 tweak.design, Hero UI로 테마를 고르고 코드를 복사해 에이전트에 넘기는 흐름까지 정리합니다. 마지막에는 “바이브 코딩”에서 에이전트가 갈 방향을 내가 어떻게 잡을지(하네스 엔지니어링과 연결)까지 짚습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189

[코드팩토리 라이브 영상][3.31.오후8시] : 링크 : https://www.youtube.com/watch?v=o3sUn06H4F4

타임라인
0:00 오늘의 주제: 일관된 디자인 만들기, Cursor vs Codex·Composer 비교 예고
0:46 디자인 전문가가 아닌 입문자 관점에서 설명한다는 전제
1:02 Cursor에서 터미널·채팅 열기, 에디터/에이전트별 화면 차이
1:38 커뮤니티 사이트 예시(국내·해외)와 실습 과제 소개
2:26 Git 워크트리로 “책상 두 개”에서 서로 다른 에이전트 작업 분리
3:32 워크트리를 가상의 작업 책상에 비유, 같은 폴더에서 전환하며 비교
5:30 Cursor 쪽 결과 확인 — “모닥불” 커뮤니티, 더미 데이터·디자인만
6:43 Codex 쪽 진행, 서버 실행·워크트리 전환으로 결과 보는 법
9:05 원샷 프롬프트만으로는 두 결과가 크게 다름 — “누가 더 잘한다”보다 통제 문제
9:52 shadcn/ui(샤드시엔): UI 부품 라이브러리로 화면을 맞추는 이유
11:01 워크트리 정리·채팅 클리어 후, “디자인은 반드시 shadcn으로” 조건 추가
14:24 shadcn 지정 후 — 구성품만으로 맞춰진 화면, 레이아웃은 달라도 톤은 통일
15:13 이케아 가구로 집 꾸미기에 비유 — 기성품 조립으로 일관성 유지
17:04 tweak.design: shadcn 기반 테마 선택·코드 복사로 스타일 적용
21:08 Hero UI: 오프닝 테마 빌더(색·폰트·라운딩 등), 코드 복사해 에이전트에 지시
24:00 테마를 미리 정해 두고 바이브 코딩하면 디자인 고민을 줄일 수 있음
25:04 하네스 엔지니어링과 연결 — 에이전트에게 선택권·제약을 주는 이야기
26:18 책으로 보충 학습 가능하다는 안내(강요 아님)
27:35 코드팩토리 채널 라이브 안내(3월 31일 8시 등)

오늘 다룬 내용
- 같은 프롬프트로 Cursor(Composer)와 Codex에 커뮤니티 사이트 UI만 생성시켜 비교
- Git 워크트리로 에이전트별 결과를 폴더 단위로 나눠 동시에 진행·실행
- 원샷만으로는 레이아웃·톤이 제각각 나올 수 있음을 실例로 확인
- shadcn/ui로 “기성 컴포넌트만 쓰라”고 지정해 디자인 언어 통일
- tweak.design, Hero UI로 테마·토큰을 고르고 코드를 복사해 프롬프트에 넣는 방식
- 반응형·다크 모드까지 라이브러리 기준으로 맞춰지는 점
- 궁극적으로 에이전트가 디자인을 마음대로 흔들지 않게 방향을 잡는 것과 연결

#바이브코딩 #VibeCoding #AI코딩 #Cursor #Codex #Composer #Git워크트리 #shadcn #shadcnui #UI라이브러리 #프론트엔드 #웹디자인 #일관된디자인 #디자인시스템 #커뮤니티사이트 #에이전트코딩 #프롬프트엔지니어링 #tweakdesign #HeroUI #초보개발 #코딩강의