바이브 코딩 vs 직접 코딩: 비개발자는 무엇부터 배워야 할까?

바이브 코딩으로 첫 앱을 만드는 데 코딩 경험은 꼭 필요하지 않습니다. 하지만 AI가 만든 앱을 원하는 대로 고치고, 오류가 났을 때 멈추지 않고, 다른 사람에게 공개하려면 코드를 읽고 실행 결과를 의심하는 습관은 필요합니다.

비개발자에게 파이썬 문법 30일치보다 먼저 필요한 것은, AI가 만든 할 일 앱에서 빈 문자열 버그 하나를 직접 잡아 보는 경험입니다.

바이브 코딩과 직접 코딩의 역할은 다릅니다

바이브 코딩은 자연어로 원하는 결과를 설명하고 AI가 초안을 만들게 하는 방식입니다. 직접 코딩은 그 초안을 이해하고 수정하는 데 필요한 언어입니다. 둘 중 하나를 포기할 이유는 없습니다.

처음에는 AI에게 할 일 목록 앱을 만들어 달라고 요청해도 됩니다. 다만 앱이 나오자마자 다음 프로젝트로 넘어가면 남는 것이 거의 없습니다. 버튼 문구 하나, 빈 입력을 막는 조건 하나, 완료 표시 하나를 직접 바꿔 봐야 결과와 코드가 연결됩니다.

AI는 첫 초안을 빨리 만들고, 사람은 그 초안이 자기 목적에 맞는지 책임집니다. 바이브 코딩을 쓰더라도 마지막 역할은 사라지지 않습니다.

첫 앱은 작게 만들고, 한 번에 하나만 고치세요

할 일 목록 앱을 예로 들어 보겠습니다. 첫날에는 AI에게 추가, 완료, 삭제만 있는 앱을 요청합니다. 여기까지는 어렵지 않습니다. 문제는 둘째 날부터입니다.

추가 버튼을 눌렀을 때 빈 항목도 들어가는지, 같은 할 일이 두 번 들어가는지, 완료한 항목을 지웠을 때 다른 항목이 사라지지 않는지를 직접 눌러 봐야 합니다. 이 과정에서 이상한 동작을 하나 발견하면, 코드 전체를 뜯어고치지 말고 그 동작 하나만 고치세요.

예를 들어 입력값 검사 코드가 아래처럼 생겼다면, 먼저 각 줄이 무엇을 하는지만 읽으면 충분합니다.

function addTodo() {
  const input = document.querySelector('#todoInput')
  const text = input.value.trim()

  if (!text) {
    alert('할 일을 입력하세요.')
    return
  }

  createTodoItem(text)
}

trim()을 지우면 공백만 입력해도 항목이 들어갑니다. return을 지우면 경고가 떠도 다음 코드가 계속 실행됩니다. 이 정도의 작은 실험이 쌓이면 AI가 준 코드를 받기만 하던 상태에서 벗어납니다.

삭제 기능을 붙일 때도 작은 실패를 일부러 만나 보는 편이 낫습니다. AI가 목록의 모든 삭제 버튼에 같은 이벤트를 연결해 마지막 항목만 지우는 경우가 있습니다. CodeFriends에서 삭제 버튼을 세 개 눌러 보고, 출력이나 콘솔에 남은 오류를 확인한 뒤, 어떤 항목의 ID가 함수로 전달되는지 AI에게 물어보세요. 이때부터 "앱을 만들었다"가 아니라 "앱을 고치고 있다"가 됩니다.

CodeFriends에서는 실행 결과부터 확인하세요

바이브 코딩 초보가 가장 자주 빠지는 함정은 코드를 길게 읽다가 시작도 못 하는 것입니다. CodeFriends에서는 먼저 실행하고, 화면과 출력 영역을 본 뒤, 필요한 부분만 찾아가면 됩니다. 설치나 환경 설정에 시간을 쓰기보다 코드와 결과의 관계를 보는 데 집중할 수 있습니다.

처음 5분에는 아래 여섯 가지만 해 보세요.

1. 원하는 기능을 한 문장으로 요청합니다. 예를 들어 "완료한 할 일에 취소선을 넣어 줘"처럼요.
2. 생성된 코드를 바로 실행합니다.
3. 기대한 화면과 실제 화면이 다른 지점을 하나 찾습니다.
4. 관련된 HTML, CSS, JavaScript 중 한 부분만 바꿉니다.
5. 다시 실행해 바뀐 결과를 봅니다.
6. 오류가 나면 에러 메시지와 내가 바꾼 내용을 함께 AI에게 보여 줍니다.

여기서 욕심내면 거의 항상 망합니다. 색상, 버튼, 함수 이름, 데이터 구조를 한 번에 바꾸지 마세요. 한 번의 실행에서 원인을 하나씩 좁히는 편이 훨씬 빠릅니다. AI에게 질문할 때도 "이거 고쳐줘"보다 "빈 문자열은 막히지만 공백 문자열은 들어가요. trim()을 어디에 적용해야 하나요?"가 훨씬 쓸모 있는 답을 만듭니다.

무엇을 배우면 AI가 만든 앱을 다룰 수 있을까

입문자가 처음부터 알고리즘이나 프레임워크를 깊게 배울 필요는 없습니다. 대신 아래 개념은 빨리 친해지는 편이 좋습니다. 모두 AI가 만든 앱을 수정하고 검증하는 데 바로 쓰입니다.

이 기초가 있으면 AI에게 더 정확히 요청할 수 있고, 답변이 맞는지도 스스로 판단할 수 있습니다. ChatGPT로 코딩을 배우는 실력 있는 사용법과 함께 보면, 답을 받는 속도보다 검증하는 습관이 왜 중요한지 더 분명해집니다.

바이브 코딩 7일차에는 앱 하나를 끝까지 검증하세요

새 앱을 매일 하나씩 만드는 것보다, 같은 앱을 일주일 동안 조금씩 고치는 편이 더 많이 배웁니다. 아래처럼 할 일 목록 앱 하나를 중심에 두면 됩니다.

처음 2주는 바이브 코딩 비중이 높아도 괜찮습니다. 대신 매번 "내가 직접 바꾼 한 줄"을 남기세요. 제목을 고쳤든, 조건을 추가했든, 오류를 고쳤든 상관없습니다. 그 기록이 쌓이면 나중에는 AI에게 더 구체적인 요청을 할 수 있고, 낯선 코드 앞에서도 덜 당황합니다.

공개 전에는 작동 여부보다 먼저 확인할 것이 있습니다

화면이 예쁘게 나오는 것과 안전하게 공개할 수 있는 것은 다릅니다. AI가 만든 코드에는 작동하는 척하는 버튼, 검증하지 않은 입력값, 실수로 남은 테스트 문구가 섞일 수 있습니다. 특히 API 키나 비밀번호를 코드에 적은 채 프로젝트를 공개하면 안 됩니다.

• 새로고침한 뒤에도 기본 화면이 정상적으로 보인다
• 빈 입력, 긴 입력, 특수문자를 직접 넣어 봤다
• 버튼을 여러 번 눌러도 중복 동작하지 않는다
• 콘솔에 반복되는 오류가 없다
• 코드와 브라우저에 API 키, 비밀번호, 개인정보가 없다
• 휴대폰 너비에서도 핵심 화면이 깨지지 않는다
• 내가 바꾼 코드와 아직 모르는 코드를 구분해 설명할 수 있다

AI 시대에 코딩을 배울지 고민하고 있다면, AI 시대에도 코딩을 배워야 하는 이유도 이어서 읽어 보세요. AI가 만든 결과를 더 잘 쓰려면, 결과를 검증하고 수정하는 사람이 되어야 합니다.

FAQ

바이브 코딩 초보도 코딩을 전혀 몰라도 앱을 만들 수 있나요?

가능합니다. 간단한 앱의 첫 초안은 자연어 요청만으로 만들 수 있습니다. 다만 원하는 대로 수정하고 오류를 좁히려면 HTML 구조, CSS 선택자, 함수와 이벤트 정도는 읽을 수 있어야 합니다.

직접 코딩을 먼저 배운 뒤 바이브 코딩을 해야 하나요?

아니요. 작은 앱을 먼저 만들고, 실행 결과를 보며 필요한 문법을 거꾸로 익히는 방식이 입문자에게 더 자연스러울 수 있습니다. 중요한 것은 매번 한 부분을 직접 수정하고 다시 실행해 보는 것입니다.

AI가 만든 앱을 공개해도 되는지 어떻게 확인하나요?

세 가지를 먼저 확인하세요. 여러 입력값으로 기능을 시험하고, 콘솔 오류와 모바일 화면을 확인합니다. API 키나 개인정보가 코드에 없는지도 반드시 점검해야 합니다. 기능이 한 번 작동했다는 것만으로 공개 준비가 끝난 것은 아닙니다.