노란색은 경고, 빨간색은 오류: 바이브코딩 초보자의 신호등

바이브코딩을 하다 보면 화면에 노란색이나 빨간색 글씨가 나타날 때가 있습니다.

영어 문장이 길게 이어지고, 처음 보는 파일 이름과 숫자까지 섞여 있어요. 무엇을 뜻하는지 모르니 창을 닫거나, 화면이 대충 작동하면 그냥 넘어가기 쉽습니다.

하지만 이 메시지는 코딩을 방해하려고 나타난 것이 아닙니다. 지금 만든 앱에서 무슨 일이 일어나고 있는지 알려주는 신호예요.

먼저 가장 간단하게 구분해볼게요.

노란색 Warning
→ 지금은 작동하더라도 확인이 필요한 경고

빨간색 Error
→ 무언가 제대로 작동하지 않았다는 오류

개발 도구와 색상 테마에 따라 실제 색은 다르게 보일 수 있습니다. 노란색과 빨간색뿐 아니라 메시지에 적힌 Warning, Error, Failed 같은 단어도 함께 확인하세요.

노란색 Warning은 “한번 확인해주세요”라는 뜻이에요

Warning은 보통 앱이 당장 멈췄다는 뜻은 아닙니다.

코드에 사용하지 않는 부분이 남았거나, 지금 사용한 방식이 나중에 문제를 일으킬 수 있거나, 개발 도구가 권장하지 않는 방식이 발견됐을 때 나타나요.

Warning이 나타남
→ 기능은 작동할 수 있음
→ 그래도 확인할 부분이 있음
→ 계속 쌓이면 중요한 경고를 놓치기 쉬움

노란색 메시지 하나가 나타날 때마다 모든 작업을 멈출 필요는 없습니다. 그렇다고 “작동하니까 괜찮겠지”라고 계속 무시해서도 안 돼요.

경고가 여러 개 쌓이면 새로 생긴 중요한 경고가 그사이에 묻힙니다. 지금은 작동하지만 다음에 코드를 수정하거나 프로그램을 업데이트했을 때 실제 오류가 될 수도 있어요.

Warning은 이렇게 이해하면 쉽습니다.

지금 당장 사고가 난 것은 아니지만
한번 확인해보는 것이 좋겠어요.

빨간색 Error는 그냥 지나치지 마세요

Error는 무언가 제대로 작동하지 않았다는 뜻입니다.

버튼을 눌렀는데 아무 반응이 없거나, 데이터를 저장하지 못하거나, 로그인과 결제에 실패했을 때 빨간색 오류가 함께 나타날 수 있어요.

바이브코딩 초보자가 가장 먼저 익혀야 할 습관은 간단합니다.

빨간색 메시지가 나타나면 그냥 창을 닫지 말고 반드시 내용을 확인하세요.

메시지를 누르거나 펼쳐보면 다음과 같은 단서가 나올 수 있습니다.

• 어떤 작업이 실패했는지
• 어느 파일에서 문제가 생겼는지
• 코드의 몇 번째 줄과 관련 있는지
• 앱이 예상한 값과 실제로 받은 값이 어떻게 다른지
• 서버가 어떤 오류를 돌려줬는지

처음에는 내용을 직접 이해하지 못해도 괜찮습니다. 사람에게는 낯선 영어 문장이어도 AI에게는 문제의 원인을 찾는 중요한 단서가 됩니다.

오류가 주로 나타나는 검은 창 자체가 낯설다면 터미널이 무엇이고 어디에 쓰이는지부터 살펴봐도 좋습니다.

AI에게 “안 돼요”라고만 말하지 마세요

기능이 작동하지 않을 때 AI에게 이렇게 말하기 쉽습니다.

버튼을 눌렀는데 안 돼. 고쳐줘.

하지만 이 설명만으로는 AI도 정확한 원인을 알기 어렵습니다.

버튼에 문제가 있는지, 서버 요청이 실패했는지, 로그인 정보가 없는지, 데이터 형식이 잘못됐는지 판단할 단서가 부족하기 때문이에요. 그러면 AI는 여러 가능성을 추측하며 불필요한 코드까지 바꿀 수 있습니다.

오류가 발생했다면 다음 세 가지를 함께 알려주세요.

1. 무엇을 하다가 문제가 발생했는지
2. 원래 어떤 결과를 기대했는지
3. 어떤 오류 메시지가 나타났는지

예를 들어 회원가입 버튼을 눌렀을 때 빨간색 오류가 나타났다면 이렇게 요청할 수 있습니다.

회원가입 버튼을 눌렀을 때 오류가 발생했어.

원래는 가입이 완료된 뒤 로그인 화면으로 이동해야 하는데,
현재는 아무 반응이 없고 아래 오류가 나타나.

[빨간색 오류 메시지 붙여넣기]

오류가 생긴 원인을 먼저 쉽게 설명해줘.
오류를 숨기거나 무시하지 말고 원인을 고쳐줘.
수정한 뒤 내가 다시 확인할 항목도 알려줘.

AI가 터미널이나 브라우저를 직접 확인할 수 있는 환경이라면 오류가 나타난 위치를 알려주고 확인을 요청해도 됩니다.

방금 저장 버튼을 눌렀더니
브라우저 개발자 도구의 Console에 빨간 오류가 나타났어.

오류 내용을 확인해서 원인을 설명하고 고쳐줘.

중요한 것은 단순히 “안 된다”고 말하는 데서 멈추지 않고, AI가 확인할 수 있는 위치와 오류 메시지를 함께 알려주는 것입니다.

오류가 없더라도 AI에게 다음 작업을 어떻게 설명할지 막막하다면 현재 상태와 원하는 상태를 전달하는 방법을 함께 읽어보세요.

오류 메시지는 가능한 한 처음부터 보여주세요

빨간색 메시지가 여러 줄이면 마지막 한 줄만 복사해 보내고 싶을 수 있습니다.

하지만 실제 원인이 앞부분에 적혀 있을 수도 있어요. 하나의 문제 때문에 여러 오류가 연달아 나타나는 경우에는 가장 먼저 발생한 오류가 중요한 단서가 되기도 합니다.

가능하면 다음 정보를 함께 전달하세요.

• 오류 메시지 전체
• 오류가 처음 나타난 시점
• 오류 직전에 누른 버튼이나 입력한 내용
• 같은 행동을 다시 했을 때도 발생하는지
• 내 컴퓨터와 배포한 사이트 중 어디에서 발생했는지

특히 내 컴퓨터에서는 정상인데 배포한 사이트에서만 오류가 난다면 로컬 코드부터 배포 환경까지 확인하는 순서로 원인을 좁혀보세요.

화면을 캡처해서 보여줄 수도 있지만, 오류 문장을 복사할 수 있다면 텍스트로 전달하는 편이 좋습니다. AI가 파일명과 줄 번호를 정확히 읽고 검색하기 쉬워져요.

단, 오류 메시지에 비밀번호, API 키, 전화번호, 이메일이나 결제 정보가 포함됐다면 그대로 붙여 넣으면 안 됩니다. 민감한 부분은 지우거나 ***처럼 가린 뒤 전달하세요.

내가 같은 오류를 다시 만들기 어려운 운영 중 문제라면 화면의 메시지만으로 부족할 수 있습니다. 이때는 앱에서 생긴 일을 기록하는 로그가 왜 필요한지 확인해보세요.

AI가 빨간색을 없앴다고 끝난 것은 아니에요

AI가 코드를 수정한 뒤 빨간색 메시지가 사라지면 문제가 해결된 것처럼 보입니다.

하지만 오류를 제대로 해결하지 않고 메시지만 보이지 않게 만들 수도 있어요. 오류가 발생해도 무시하도록 바꾸거나, 문제가 있는 기능을 실행하지 않게 만들면 빨간색은 사라지지만 기능은 여전히 고장 난 상태입니다.

따라서 수정이 끝나면 오류가 발생했던 행동을 직접 다시 해봐야 합니다.

오류가 발생했던 행동을 다시 실행
→ 원래 기대한 결과가 나오는지 확인
→ 새로운 Warning이나 Error가 없는지 확인
→ 새로고침한 뒤에도 다시 확인

회원가입에서 오류가 났다면 실제로 다시 가입해보세요. 저장 버튼에서 오류가 났다면 데이터를 입력하고 저장한 뒤, 화면을 새로고침해도 저장한 내용이 남아 있는지 확인하세요.

결제처럼 실제 돈이나 개인정보가 관련된 기능은 운영 환경에서 무작정 다시 시도하지 말고 테스트 환경과 테스트 결제 수단을 사용해야 합니다.

중요한 것은 빨간색이 사라졌는가가 아니라 기능이 원래 의도대로 작동하는가입니다.

빨간 오류가 없다고 모든 기능이 정상인 것은 아니에요

반대의 경우도 있습니다.

화면에 빨간색 오류가 하나도 없지만 버튼이 잘못된 페이지로 이동하거나, 금액이 다르게 계산되거나, 저장해야 할 정보가 빠질 수도 있어요.

Error
→ 프로그램이 감지한 실패

버그
→ 프로그램은 실행되지만 원하는 결과와 다른 문제

개발 도구가 모든 실수를 알아서 발견해주는 것은 아닙니다. 그래서 오류 메시지를 확인하는 것과 실제 기능을 사용해보는 검증이 모두 필요해요.

오류 메시지는 실패가 아니라 문제를 푸는 단서예요

빨간색 글씨를 보면 내가 코딩을 잘못하고 있다는 생각이 들 수 있습니다.

하지만 오류는 코딩을 못한다는 증거가 아닙니다. 코드를 작성하고 새로운 기능을 연결하면 오류는 자연스럽게 생깁니다. 숙련된 개발자도 매일 오류를 만나요.

차이는 오류가 전혀 발생하지 않는 데 있지 않습니다. 나타난 신호를 그냥 지나치지 않고, 무엇을 하다가 발생했는지 확인하고, 해결한 뒤 다시 검증하는 데 있습니다.

노란색이 나타나면
→ 어떤 경고인지 확인하기

빨간색이 나타나면
→ 반드시 내용을 펼쳐보기

AI에게 도움을 요청할 때
→ 행동, 기대한 결과, 오류 메시지를 함께 알려주기

AI가 수정한 뒤
→ 같은 행동을 다시 해보기

바이브코딩을 시작하면서 모든 코드를 이해할 필요는 없습니다.

먼저 화면이 보내는 신호를 발견하세요. 그리고 AI가 문제를 찾을 수 있도록 충분한 단서를 건네주세요. 노란색과 빨간색을 그냥 지나치지 않는 작은 습관이 앱을 훨씬 안정적으로 만들어줍니다.

오프라인 바이브코딩 강의의 장점은 오류의 정답만 듣는 데 있지 않습니다. 뚝딱의 강남 수업에서는 무엇을 하다가 오류가 났는지 강사와 함께 재현하고, 메시지와 로그를 읽은 뒤 같은 기능을 다시 검증하는 과정을 연습합니다.