GPT는 당신의 머릿속을 모르기 때문에,
설명이 애매하면 결과도 엉망이다.

심지어 사람에게 맡겨도

대충 말해서 마음에 드는 경우가 있었을까?!

Exact Instructions Challenge PB&J Classroom Friendly | Josh Darnit

"알잘딱깔센은 환상이다!!"

바이브 코딩, 오해와 진실

AI는 인터넷에 널리 퍼진 코드로 학습하기 때문에

널리 사용되는 UI, 기능을 평균 수준으로 잘 만드는 편

“그럴싸함” ≠ “내가 원하는 것”

만드는 이가 '구체적인 기준이나 의도'가 없다면

그럴싸해 보일 수 있지만,

복잡해지거나 독창적일수록 점점 더 구체적인 지시가 필요

바이브 코딩, 오해와 진실

기존 개발처럼 ‘직접 코딩’하지는 않지만,
‘개발적 사고’는 필요하고, 만들고 싶은 서비스를
디테일하게 기획할 수 있을만큼의 지식이 필요하다.

물론, 만들고 싶은 서비스의 IT난이도에 따라 다르다!

바이브 코딩, 오해와 진실

🪜 퀄리티에 따라 달라지는 개발 이해도의 필요성

✅ 1단계: 아이디어 실험용

- 예: 블로그, 투두앱, 폼 만들기

- 필요한 역량:  기획력, UI 구성 감각

간단한 기술 용어 이해 (ex. 버튼, 입력창, 목록 등)
→ GPT가 알아서 그럴싸하게 만들어줌

바이브 코딩, 오해와 진실

 2단계: 기능이 늘어나기 시작하면

예: 로그인, DB 연결, 상태 관리, 조건 분기
필요한 역량:

• 인증 방식 이해 (JWT, OAuth 등)

• 데이터 흐름 (입력 → 처리 → 출력)

• 코드 수정 및 디버깅 감각
  → “어떻게 동작하는지”를 알아야, AI와 대화가 가능함

바이브 코딩, 오해와 진실

🔥 3단계: 완성도 높은 제품화 수준

예: 커머스, 다단계 페이지, 사용자 상태에 따른 UI 변화 등

 

필요한 역량:

- 설계 능력 (라우팅, 전역 상태, API 연동)

- 비동기 흐름 이해

- 에러 처리, 예외 상황 정의
→ 사실상 개발자 수준의 구조적 사고력 필요

바이브 코딩, 오해와 진실

바이브코딩은 코드를 짜는 게 아니라,
아이디어를 글로 설명해 AI가 대신 구현하게 하는 방식이다.
그래서 중요한 건 개발 실력보다
정확한 문제 정의, 구조화된 설명, 프롬프트 작성 능력이다.

결국 잘 만든 프롬프트가 좋은 코드보다 더 중요해진 시대다.

https://cucus.notion.site/20-1fcc58a40f1c80979e3feb21cf8c9d1c?pvs=4

바이브코딩 역량 자가진단 체크리스트 (총 20문항)

💬 많은 사람이 이렇게 시도

"일단 대충 말해보고, 조금씩 수정하면 되겠지?"

⚠️ 그런데 현실은?

웹빌더 AI는 대화가 반복될수록 더 혼란스러함.

- 설정이 꼬이고 맥락을 놓침

- UI가 점점 어색해짐

처음으로 되돌리기 어려움

바이브 코딩, 팁

💡 그래서 꿀팁!

✅ GPT와 먼저 '기획'을 완성하자
✅ 모든 화면, 기능, 스타일을 글로 정리하자
✅ 그리고 한 번에 웹 빌더 AI에 요청하자

https://cucus.notion.site/1fcc58a40f1c802eb888c7d63038ac03?pvs=4

바이브 코딩, 팁

1. 디자인 필수 요소는 '브랜드 컬러, 폰트'

2. 이렇게 생긴 애를 뭐라고 개발자들이 뭐라고 부르는지 알면 된다.

바이브 코딩, 팁

스크린샷을 찍어서 올린 다음에, 비슷하게 만들어줘라고 할수 있다!

바이브 코딩, 팁

기획 역량이 중요하다.

내가 PM이 되어서 어떤 것을 만들고 싶

바이브 코딩, 팁

기능을 만들기 위해서는 “뭔가를 넣으면, 뭔가가 나온다.”라고
설명해줄 수 수 있으면 된다.

• 🔘 버튼을 누른다 → 👉 화면이 바뀐다
  → 버튼 누르기 = 입력(Input)
  → 화면 바뀜 = 출력(Output)

• 🔍 검색창에 “파스타 맛집”을 적는다 → 👉 맛집 리스트가 뜬다
  → 내가 적은 검색어 = 입력
  → 뜬 결과 리스트 = 출력

바이브 코딩, 팁

"사용자가 검색창에 텍스트를 입력하고 엔터를 누르면,
그 키워드에 해당하는 항목들을 리스트로 화면에 보여주는 기능을 만들어줘.
결과 리스트는 아래쪽에 카드 형태로 출력되면 좋겠어."