[바이브코딩] Bolt.new 초보를 위한 팁
내 디자인이 임의로 바뀌지 않도록, 일관성을 유지하려면?
안녕하세요! 저는 Bolt.new로 서비스를 개발하고 있는 AI코딩하는 기획자입니다.
이 글은 기획자/디자이너들이 바이브코딩으로 개발하면서 겪을 수 있는 문제들을 어떻게 해결하거나 이해할 수 있을지 작성한 글입니다. 문제해결 상황과 해결 경험을 담은 시리즈입니다.
Bolt.new(볼트뉴)
"자연어(말)로 설명하면 웹사이트 코딩을 해주는 AI코딩 툴"입니다.
(Bolt.new 가입 : https://bolt.new/?rid=lp5dkv)
내 디자인을 바꾸고 싶어요.
문제 : 자꾸 임의로 UXUI 디자인이 바뀌어요!
제발 이전 버전 디자인으로 돌아가줘!!!! 종종 바이브코딩으로 개발하다보면, 프롬프트를 넣지 않았는데도 디자인이 제멋대로 바뀔 때가 있습니다. 마음대로 바뀐 디자인이 마음에 들면 좋겠지만, 이전 버전이 좋을때도 있어요. 계속 바뀌게 되면 어느 순간 제어할 수가 없게 되죠.
방법 : 개발과 디자인을 분리해보기
아래 프롬프트를 사용해보세요.
"현재의 UXUI와 디자인 시스템을 최신 버전으로 저장해두고 임의로 폰트, 컬러, 레이아웃, 그리드는 내가 확인하지 않으면 임의로 변경하지 말아줘."
아니야. 너는 이해하지 못했어. 제발 마음대로 디자인을 바꾸지 말아줘..이 프롬프트를 던지면 아래와 같은 답변을 받을 수 있습니다.
"네! 완전히 이해했습니다! 현재의 디자인 시스템을 보존하고 임의 변경을 방지하겠습니다."
해석 : Bolt.new의 답변을 읽어보며
문제는 해결되었지만, 여기서 얻어갈 부분이 있습니다.
자, 저는 대화 과정에서 Bolt.new(볼트뉴)가 답변한 내용을 살펴보고 뜯어봅니다.
동일한 문제가 앞으로 나오지 않게 하려면 어떤 것을 요청하고 어떤 것을 금지해야하는지 알 수 있습니다.
디자인 변경 방지 규칙
앞으로는 다음 요소들을 사용자 확인 없이 절대 변경하지 않겠습니다:
❌ 변경 금지 항목
폰트: Pretendard, JetBrains Mono
컬러 팔레트: CSS 변수로 정의된 모든 색상
레이아웃: 그리드 구조, 컨테이너 크기
반응형 브레이크포인트: 768px, 1024px
애니메이션: transition, transform 효과
그림자: shadow-soft, shadow-hover
border-radius: 16px (카드), 8px (버튼/입력)
✅ 변경 가능한 항목 (사용자 요청 시에만)
텍스트 내용
데이터 구조
기능 로직
API 연동
앞으로의 작업 방식
기능 수정: 디자인 영향 없이 로직만 변경
데이터 업데이트: 스타일 유지하며 내용만 변경
디자인 변경 필요 시: 반드시 사용자에게 확인 요청
새 기능 추가: 기존 디자인 시스템 준수
현재의 모던하고 일관성 있는 디자인 시스템을 완벽히 보존하겠습니다! ✨
이번 문제와 대화 과정은 정말 흥미로웠습니다.
간단한 사례이지만, 여러분들은 기획자를 넘어 디자이너처럼 사고하게 되고, 또 이 과정을 통해서 개발적인 공부도 하게 된 것이죠. 아래와 같은 질문에 대해서 답변 해보시며 사고를 확장해보시길 바랍니다. :)
추가 질문
1.디자이너가 개발자에게 어떻게 요청을 하거나 소통하면 좋을까요?
2.디자인시스템에 대한 기본적인 구성은 어떻게 될까요?
3.Bolt.new 에 이 프롬프트가 모든 문제를 해결하나요?
감사합니다.
AI코딩하는 기획자 김로린 드림.
