Part 1.1 - AI한테 코드 요청할 때 가장 많이 하는 실수들

지난 글에서 바이브코딩의 현실에 대해 솔직하게 얘기했습니다

제가 비개발자분들 가르치면서 가장 많이 본 실수들이 있어요. 신기한 게, 거의 다들 똑같은 실수를 하시더라고요. 그래서 이 글 하나만 제대로 읽으셔도 시행착오를 엄청 줄일 수 있을 거에요

실수 1: "쇼핑몰 사이트 만들어줘" 같은 막연한 요청

가장 흔한 실수입니다

AI한테 이렇게 부탁하시는 분들이 정말 많았습니다:

"쇼핑몰 만들어줘"
"인스타그램 같은 거 만들어줘"
"회원가입 기능 넣어줘"

AI는 여러분의 생각을 모릅니다. 이렇게 막연하게 말하면 AI가 알아서 추측해서 만들어요. 근데 그게 여러분이 원하는 거랑 다를 확률이 99%예요.

실제 사례를 하나 들어볼게요.

어떤 분이 "로그인 기능 만들어줘"라고 했어요. AI가 만들긴 만들었는데, 이메일 인증은 없고, 비밀번호 재설정도 없고, 소셜 로그인도 없었어요. 당연하죠. 구체적으로 말 안 했으니까요.

이렇게 바꿔봅시다:

❌ "회원가입 기능 만들어줘"

✅ "이메일과 비밀번호로 회원가입하는 기능 만들어줘. 비밀번호는 최소 8자 이상이어야 하고, 이메일 중복은 안 되게 해줘. 가입 완료되면 환영 이메일 보내주고."

차이가 느껴지시죠? 구체적으로 말할수록 여러분이 원하는 결과가 나옵니다. 그냥 완전 유치원생한테 내 생각을 100% 전달하겠다는 마음으로 프롬프트를 입력하세요.

팁: 요청할 때 이런 것들을 포함하세요:

어떤 데이터를 받을 건지 (이메일? 전화번호? 닉네임?)
어떤 제약이 있는지 (최소 길이? 중복 체크?)
성공하면 뭘 보여줄 건지 (메시지? 다른 페이지로 이동?)
실패하면 어떻게 할 건지 (에러 메시지? 경고창?)

처음엔 이렇게 구체적으로 생각하는 게 어려워요. 근데 몇 번 하다 보면 금방 익숙해져요. 또, 자신이 만드려는 기능을 레퍼런스로 삼는 곳을 찾아서, 그 기능 분석을 한 후, 그 결과를 프롬프트에 넣어도 좋습니다.

실수 2: 에러 나면 그냥 "안 돼요" 하고 끝

이거 진짜 제일 많이 보는 실수입니다.

화면에 빨간 글씨가 막 뜨죠. 뭔가 안 되는 거예요. 그럼 대부분 이렇게 하더라구요:

"이거 안 되는데요?"
"에러 났어요"
"작동을 안 해요"

이렇게 말하면 AI도 답을 못 줘요. 의사한테 가서 "아파요" 하고 끝나는 거랑 똑같아요.

제가 실제로 본 케이스예요.

어떤 분이 "로그인이 안 돼요"라고만 하셨어요. 30분 동안 이것저것 물어보고 확인해봤는데, 알고 보니 서버가 아예 안 켜져 있었어요. 에러 메시지만 봤으면 1분 만에 해결됐을 일이었죠.

올바른 대응법:

1단계: 개발자 도구 열기 브라우저에서 F12 누르세요. (맥은 Cmd+Option+I) 콘솔(Console) 탭 찾으세요. 거기 빨간 글씨 전부 있어요.

2단계: 에러 메시지 복사하기 빨간 글씨를 드래그해서 전부 복사하세요. 이상한 영어 단어들이 잔뜩 있을 거예요. 그냥 다 복사하세요.

3단계: AI한테 제대로 물어보기

❌ "이거 안 되는데요?"

✅ "이 코드 실행했는데 이런 에러가 나요:

Uncaught TypeError: Cannot read property 'map' of undefined
    at App.js:15

이게 무슨 뜻인가요? 어떻게 고치면 되나요?"

4단계: 스크린샷도 찍어서 보내기 가끔 에러 메시지만으론 부족할 때가 있어요. 화면 캡처해서 "이렇게 나와요" 하고 보여주면 AI가 더 정확하게 파악해요.

실제 예시:

제가 봤던 어떤 분은 "버튼 클릭이 안 돼요"라고만 하셨어요. 근데 콘솔 보니까:

404 Not Found: /api/login

이런 에러가 있더라고요. 백엔드 서버가 안 켜져 있었던 거예요.

에러 메시지 보여줬으면 바로 해결됐을 텐데, 30분을 헤맸죠.

핵심은 이겁니다: 에러 메시지는 무서운 게 아니라 힌트예요. 개발자들도 하루종일 에러 보면서 일해요. 에러 메시지 읽는 법만 알면 절반은 해결한 거나 마찬가지예요.

실수 3: 코드를 전혀 안 읽고 무조건 복붙

AI가 코드를 주면 그냥 복사해서 붙여넣기만 하시는 분들이 많아요.

당장은 편해요. 근데 나중에 수정하려고 하면 막막해져요. 뭐가 뭔지 하나도 모르니까요.

실제로 이런 일이 생겨요:

AI가 로그인 코드를 만들어줬어요. 복붙했어요. Accept했어요. 잘 돌아가요. 굳.

근데 다음 날 "비밀번호 찾기" 기능을 추가하고 싶네요. 그런데 어디를 어떻게 고쳐야 할지 감이 안 옵니다. 로그인 코드가 어떻게 돌아가는지 모르니까요.

결국 AI한테 처음부터 다시 만들어달라고 해요. 근데 이번엔 이상하게 작동해요. 왜냐면 기존 코드랑 새 코드가 충돌하거든요. 악순환이 시작되죠.

이렇게 해보세요:

AI가 코드를 주면:

주석부터 읽으세요 (// 이거나 /* 이거로 시작하는 부분)
대충이라도 뭐하는 코드인지 파악하세요
모르는 부분은 AI한테 물어보세요

예를 들어볼게요.

AI가 이런 코드를 줬다고 쳐요:

// 사용자 로그인 함수
async function loginUser(email, password) {
  // 이메일과 비밀번호를 서버로 보냄
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ email, password })
  });
  
  // 로그인 성공하면 토큰 저장
  if (response.ok) {
    const data = await response.json();
    localStorage.setItem('token', data.token);
  }
}

주석 읽으면 대충 알겠죠?

로그인하는 함수구나
이메일이랑 비밀번호를 서버로 보내는구나
성공하면 토큰이라는 걸 저장하는구나

완벽하게 이해 못 해도 괜찮습니다. 이 정도만 알아도 나중에 수정할 때 "아, 여기 이메일 부분 건드리면 되겠네" 하고 감을 잡을 수 있습니다.

한 단계 더 나아가기:

모르는 게 있으면 AI한테 물어보세요.

"이 코드에서 localStorage.setItem이 뭐하는 건가요?" "fetch가 정확히 뭔가요?" "왜 async랑 await를 쓰나요?"

이렇게 하나씩 물어보면서 배우는 겁니다. 귀찮아 보이지만, 이게 장기적으로는 시간을 엄청 아껴줄 겁니다

실수 4: 한 방에 완벽한 걸 만들려고 함

"로그인, 게시판, 댓글, 좋아요, 알림, 프로필 편집 다 되는 SNS 만들어줘"

이런 식으로 한 번에 다 요청하시는 분들이 있어요. AI도 헷갈려요.

결과는? 대충대충 만들어져서 하나도 제대로 작동 안 해요. 그럼 어디서부터 고쳐야 할지 막막하죠.

성공하는 사람들은 이렇게 해요:

1단계: 로그인만 "이메일과 비밀번호로 로그인하는 기능만 만들어줘" 테스트해봐요. 잘 돌아가요? 좋아요.

2단계: 게시글 쓰기 "로그인한 사용자가 게시글을 쓸 수 있게 해줘" 테스트해봐요. 잘 돌아가요? 좋아요.

3단계: 댓글 "게시글에 댓글을 달 수 있게 해줘" 또 테스트하고.

이런 식으로 하나씩 쌓아가는 거예요.

왜 이게 중요하냐면:

에러가 나면 어디서 문제인지 바로 알 수 있어요. 방금 추가한 기능만 의심하면 되니까요.

한 번에 다 만들면? 50군데 중 어디가 문제인지 찾느라 하루를 날려요.

팁:

하루에 기능 하나씩만 추가하세요
잘 작동하면 Git으로 저장하세요. 제발 Git쓰세요. 교육하면서 가장 애 먹었던 부분이 Git, 버전관리가 없어서 굉장히 애먹었습니다 (곧 다룹니다)
욕심내지 마세요

조급한 마음은 이해해요. 빨리 완성하고 싶죠. 근데 천천히 가는 게 결국 더 빠릅니다

실수 5: "최신 버전으로 해줘"만 말하고 환경은 안 알려줌

"Next.js 최신 버전으로 만들어줘"

AI는 우리 컴퓨터에 뭐가 깔려 있는지 모릅니다. 어떤 버전 쓰고 있는지도 모르고요.

그래서 AI가 최신 버전 기준으로 코드를 만들어줘요. 근데 우리 컴퓨터에는 예전 버전이 깔려 있어요. 당연히 안 돌아갑니다.

이렇게 해보세요:

프로젝트 폴더에 package.json이라는 파일이 있습니다. 거기 보면 이런 게 있어요:

{
  "dependencies": {
    "next": "14.0.3",
    "react": "18.2.0"
  }
}

이걸 보고 AI한테 이렇게 말하세요:

❌ "Next.js 최신 버전으로 해줘"

✅ "내 package.json 보면 Next.js 14.0.3 쓰고 있어. 이 버전 기준으로 코드 짜줘"

이러면 AI가 로컬 환경에 맞춰서 코드를 만들어줍니다.

더 좋은 방법:

프로젝트 시작할 때 AI한테 이렇게 말하세요:

"React 18 버전으로 Todo 앱 만들 건데, TypeScript 쓸 거야. Tailwind CSS로 스타일링할 거고. 이 환경 기준으로 프로젝트 세팅부터 해줘."

이렇게 처음부터 명확하게 정해두면 나중에 문제가 훨씬 적습니다.

보너스 팁: AI한테 "왜"를 물어보세요

마지막으로 제일 중요한 팁 하나 드릴게요.

AI가 뭔가 만들어주면 이렇게 물어보세요:

"왜 이렇게 만들었어?" "다른 방법도 있어?" "이 코드의 장단점이 뭐야?"

예를 들어볼게요.

AI가 useState를 써서 코드를 만들어줬어요. 그럼 물어보세요:

"useState 말고 useReducer를 쓸 수도 있지 않아? 왜 useState를 선택했어?"

AI가 설명해줄 거예요. 그 과정에서 배우는 거죠.

이렇게 물어보면 좋아요:

"이 코드에서 보안 문제는 없어?"
"더 간단하게 만들 수 있어?"
"성능 면에서는 어때?"
"유지보수하기 쉬운 구조야?"

AI는 설명을 잘해요. 근데 대부분 교육생들이 안 물어보더라구요. 그냥 Accept만 하는거죠. 비개발자의 바이브코딩은 코딩 공부와 함께 해야 합니다. 언제까지나 딸깍 할 수 없습니다.

정리하면

이 다섯 가지 실수만 피해도 우리의 바이브코딩 여정이 훨씬 수월해질 거예요.

구체적으로 요청하기: "쇼핑몰 만들어줘" ❌ → 세부 요구사항 다 말하기 ✅
에러 메시지 복사해서 보여주기: "안 돼요" ❌ → 빨간 글씨 다 복사하기 ✅
코드 최소한 읽어보기: 무조건 복붙 ❌ → 주석이라도 읽기 ✅
하나씩 만들기: 한 번에 다 ❌ → 기능 하나씩 추가 ✅
환경 알려주기: "최신 버전" ❌ → 내 버전 정확히 말하기 ✅

그리고 항상 "왜?"를 물어보세요. 그게 가장 빠른 학습법입니다.

다음 글에서는 AI한테 요청하기 전에 꼭 해야 할 것, 바로 "문제 정의"에 대해 얘기해볼게요. 이게 제대로 안 되어 있으면 아무리 AI가 좋아도 쓸모없는 걸 만들게 되거든요.