Guide

바이브 코딩 가이드

AI에게 일을 맡기고 결과물을 검토해 실제 서비스에 반영하는 실무형 작업 방식을 모았습니다.

바이브 코딩 입문 로드맵 8강. 바이브 코딩에서 가장 중요한 것은 '개발'보다 '검수'다

신고하기

AI작당지기

신고 사유를 선택해 주세요. 검토 후 적절한 조치를 취하겠습니다.

신고 사유
2026. 07. 14.조회 0댓글 0좋아요 0

1. 왜 검수가 개발보다 중요한가

개발은 AI가 빠르게 밀어붙일 수 있지만, 검수는 사람이 서비스 목적과 사용자의 상황을 기준으로 판정해야 하는 단계입니다. ChatGPT, Claude Code, Cursor, Codex가 코드를 만들어도 “이 기능이 정말 의도대로 동작하는가”, “사용자가 헷갈리지 않는가”, “잘못된 입력에도 안전한가”는 자동으로 보장되지 않습니다.

바이브 코딩에서 흔히 생기는 문제는 기능이 아예 없는 것이 아니라, “대충 되는 것처럼 보이는 상태”에서 멈추는 것입니다. 버튼은 눌립니다. 화면도 뜹니다. 로그인도 되는 것처럼 보입니다. 그런데 모바일에서 깨지거나, 빈 값을 넣으면 에러가 나거나, 다른 사용자의 데이터가 보이거나, 배포 후 특정 환경에서만 동작하지 않는 일이 생깁니다.

그래서 검수는 개발이 끝난 뒤의 부가 작업이 아니라, 완성도를 결정하는 핵심 작업입니다. 특히 비개발자 입장에서는 코드를 한 줄씩 완벽히 이해하기 어렵기 때문에, 사용 흐름과 결과를 기준으로 꼼꼼하게 확인하는 습관이 더 중요합니다.

AI에게 “완성해줘”라고 맡기는 것보다 “이 기준으로 검수하고 문제를 찾아줘”라고 요청하는 편이 훨씬 안전합니다. 예를 들면 다음처럼 요청할 수 있습니다.

현재 구현된 회원가입 기능을 검수해 주세요.
다음 기준으로 확인해 주세요.

1. 정상 입력 시 가입 성공 여부
2. 이메일 형식이 잘못된 경우 처리
3. 비밀번호가 비어 있는 경우 처리
4. 이미 가입된 이메일 처리
5. 사용자에게 표시되는 오류 메시지
6. 서버 로그에 민감한 정보가 노출되는지 여부

문제가 있으면 파일명, 원인, 수정 방향을 나눠서 설명해 주세요.

이런 방식은 “고쳐줘”보다 훨씬 명확합니다. AI가 임의로 큰 구조를 바꾸는 것을 줄이고, 사람이 확인해야 할 지점도 선명해집니다.

2. 화면 검수: 레이아웃·반응형·깨짐 확인

화면 검수는 가장 먼저 해야 하는 검수입니다. 사용자는 코드 품질을 먼저 보지 않습니다. 첫 화면이 깨져 있거나 버튼이 겹치거나 글자가 잘리면 서비스 전체가 불안정해 보입니다.

PC 화면에서만 확인하면 놓치는 문제가 많습니다. 최소한 데스크톱, 태블릿 크기, 모바일 크기를 나눠서 확인해야 합니다. 브라우저 개발자 도구의 반응형 모드를 사용하면 화면 너비를 바꿔가며 확인할 수 있습니다.

화면 검수에서 자주 봐야 할 항목은 다음과 같습니다.

- 상단 메뉴가 작은 화면에서 깨지지 않는가

- 버튼과 입력창이 서로 겹치지 않는가

- 긴 제목, 긴 닉네임, 긴 이메일이 들어가도 레이아웃이 유지되는가

- 목록 데이터가 많을 때 스크롤이 자연스러운가

- 빈 데이터일 때 “표시할 내용 없음” 같은 안내가 있는가

- 로딩 중 화면이 멈춘 것처럼 보이지 않는가

- 오류 메시지가 너무 작거나 화면 밖으로 밀리지 않는가

- 다크 모드나 브라우저 기본 폰트 차이로 글자가 안 보이지 않는가

특히 AI가 만든 화면은 “예시 데이터 기준”으로는 깔끔한데 실제 데이터가 들어가면 쉽게 무너질 수 있습니다. 카드 제목이 두 줄 이상이 되거나, 이미지 비율이 다르거나, 사용자가 입력한 문장이 예상보다 길어지는 경우가 대표적입니다.

화면 검수 요청은 이렇게 구체적으로 하는 편이 좋습니다.

현재 페이지의 반응형 화면을 검수해 주세요.
모바일 360px, 태블릿 768px, 데스크톱 1280px 기준으로
레이아웃 깨짐, 버튼 겹침, 텍스트 잘림, 스크롤 문제를 찾아 주세요.
수정이 필요한 CSS 또는 컴포넌트 파일을 함께 알려 주세요.

“예쁘게 고쳐줘”가 아니라 “어떤 기준에서 깨지는지 찾아달라”고 요청해야 결과가 안정적입니다.

3. 기능 검수: 실제 동작·예외 케이스

기능 검수는 정상 동작만 확인하면 부족합니다. 서비스에서 더 자주 문제가 생기는 지점은 예외 케이스입니다. 사용자는 항상 올바른 순서로, 올바른 값만 입력하지 않습니다.

예를 들어 게시글 작성 기능이 있다면 “제목과 내용을 넣고 등록된다”만 확인해서는 안 됩니다. 제목이 비어 있을 때, 내용이 너무 길 때, 로그아웃 상태에서 접근했을 때, 등록 버튼을 여러 번 빠르게 눌렀을 때도 확인해야 합니다.

기능별로 검수 관점을 나누면 실수가 줄어듭니다.

회원가입·로그인 기능이라면 다음을 확인합니다.

- 올바른 이메일과 비밀번호로 가입 또는 로그인되는가

- 잘못된 이메일 형식을 막는가

- 비밀번호가 비어 있을 때 진행되지 않는가

- 로그인 실패 시 이유를 적절히 보여주는가

- 로그인 후 새로고침해도 상태가 유지되는가

- 로그아웃 후 보호된 페이지에 접근할 수 없는가

게시판·입력 기능이라면 이런 항목이 필요합니다.

- 작성, 수정, 삭제가 실제 데이터에 반영되는가

- 빈 제목이나 빈 내용이 저장되지 않는가

- 작성자 본인만 수정·삭제할 수 있는가

- 삭제 전 확인 절차가 있는가

- 저장 중 버튼을 여러 번 눌러 중복 생성되지 않는가

- 목록으로 돌아왔을 때 최신 데이터가 보이는가

검색·필터 기능도 놓치기 쉽습니다.

- 검색어가 없을 때 전체 목록 또는 빈 상태가 의도대로 나오는가

- 존재하지 않는 검색어를 입력했을 때 안내가 있는가

- 필터를 여러 개 적용해도 결과가 일관적인가

- 페이지 이동 후 검색 조건이 유지되는가

- 대소문자, 공백, 특수문자 입력에서 이상이 없는가

AI에게 기능 검수를 맡길 때는 “정상 케이스와 실패 케이스를 표로 만들어 달라”고 요청하면 좋습니다.

예약 생성 기능의 검수 케이스를 작성해 주세요.
정상 케이스, 실패 케이스, 경계 케이스로 나누고
각 케이스마다 입력값, 예상 결과, 확인 방법을 표로 정리해 주세요.

이 표를 기준으로 직접 클릭해 보면, 코드만 볼 때는 놓쳤던 문제가 빠르게 드러납니다.

4. 오류 검수: 에러·로그 확인

화면에서 문제가 안 보여도 내부에서는 오류가 발생할 수 있습니다. 바이브 코딩에서는 특히 “작동은 하는데 콘솔에 에러가 쌓이는 상태”를 방치하기 쉽습니다. 이런 상태는 기능 추가가 반복될수록 더 큰 문제로 이어집니다.

브라우저에서는 개발자 도구의 Console과 Network 탭을 확인합니다. Console에는 프론트엔드 오류가 표시되고, Network에서는 API 요청이 성공했는지, 실패했는지, 응답 시간이 너무 길지는 않은지 볼 수 있습니다.

확인해야 할 대표 항목은 다음과 같습니다.

- 빨간색 에러가 반복적으로 나오지 않는가

- 같은 경고가 계속 쌓이지 않는가

- API 요청이 400, 401, 403, 404, 500 등으로 실패하지 않는가

- 실패했을 때 사용자에게 적절한 메시지가 보이는가

- 로딩 상태가 끝나지 않고 계속 유지되지 않는가

- 새로고침했을 때 동일한 오류가 재현되는가

프로젝트에 테스트나 빌드 스크립트가 있다면 실행 결과도 확인해야 합니다. 예를 들어 `package.json`에 해당 스크립트가 정의되어 있는 경우 아래 명령을 사용할 수 있습니다.

npm test

npm run build

단, 모든 프로젝트에 같은 스크립트가 있는 것은 아닙니다. 먼저 `package.json`의 `scripts` 항목을 확인하고, 실제로 정의된 명령만 실행해야 합니다.

AI 도구에 오류를 전달할 때는 에러 메시지를 요약하지 말고 원문에 가깝게 전달하는 것이 좋습니다. “안 돼요”보다 아래처럼 전달해야 수정 정확도가 올라갑니다.

다음 오류가 발생했습니다.

상황:
- 로그인 후 대시보드로 이동할 때 발생
- 새로고침하면 다시 재현됨
- 브라우저 Console에 아래 오류가 표시됨

오류 메시지:
[여기에 실제 오류 메시지 붙여넣기]

요청:
1. 가능한 원인을 3가지 이내로 좁혀 주세요.
2. 먼저 확인해야 할 파일을 알려 주세요.
3. 최소 수정으로 해결하는 방법을 제안해 주세요.

오류 검수의 핵심은 재현 조건입니다. 언제, 어떤 계정으로, 어떤 버튼을 눌렀을 때, 어떤 메시지가 나왔는지 남겨야 AI도 정확히 추적할 수 있습니다.

5. 보안 검수: 권한·입력·정보 노출 점검

보안 검수는 초보자가 가장 놓치기 쉬운 부분입니다. 화면이 정상이고 기능이 잘 동작해도, 권한 검사가 느슨하면 실제 서비스로 쓰기 어렵습니다.

가장 먼저 볼 것은 권한입니다. 로그인하지 않은 사용자가 보호된 페이지에 접근할 수 있는지, 일반 사용자가 관리자 페이지에 들어갈 수 있는지, 다른 사용자의 데이터를 수정하거나 삭제할 수 있는지 확인해야 합니다. 단순히 버튼을 숨기는 것만으로는 부족합니다. 화면에서 버튼이 안 보여도 API를 직접 호출하면 동작할 수 있기 때문입니다.

권한 검수 체크리스트는 다음과 같습니다.

- 로그아웃 상태에서 마이페이지, 작성 페이지, 관리자 페이지 접근이 막히는가

- 일반 사용자가 관리자 기능을 실행할 수 없는가

- A 사용자가 B 사용자의 게시글, 주문, 예약을 수정하거나 삭제할 수 없는가

- URL의 id 값을 바꿨을 때 다른 사람의 데이터가 보이지 않는가

- 프론트엔드뿐 아니라 서버 또는 데이터베이스 규칙에서도 권한을 확인하는가

입력값 검수도 중요합니다. 사용자가 입력하는 모든 값은 신뢰하면 안 됩니다. 이름, 제목, 내용, 검색어, 파일명, URL, 숫자 입력값 모두 예상 밖의 값이 들어올 수 있습니다.

확인할 항목은 다음과 같습니다.

- 빈 값, 매우 긴 값, 특수문자 입력을 처리하는가

- 숫자 입력에 음수나 비정상 값이 들어와도 막는가

- HTML이나 스크립트처럼 보이는 문자열을 입력했을 때 화면이 깨지지 않는가

- 파일 업로드가 있다면 허용 확장자와 크기 제한이 있는가

- 서버에서도 입력값을 다시 검증하는가

정보 노출도 반드시 확인해야 합니다. API 키, 비밀번호, 토큰, 관리자 이메일, 내부 에러 메시지가 화면이나 브라우저 콘솔, 네트워크 응답에 그대로 보이면 위험합니다.

특히 환경 변수 파일은 저장소에 올라가지 않도록 주의해야 합니다. 일반적으로 아래와 같은 파일에는 민감한 값이 들어갈 수 있습니다.

.env
.env.local
.env.production

이런 파일을 사용할 때는 Git에 포함되지 않도록 설정되어 있는지 확인해야 합니다. 보통 `.gitignore`에 환경 변수 파일을 제외하는 규칙을 둡니다.

.env
.env.local
.env.production

보안 검수 요청은 넓게 던지기보다 범위를 나눠야 합니다.

현재 프로젝트의 게시글 수정 기능을 보안 관점에서 검수해 주세요.
특히 다음 항목을 확인해 주세요.

1. 로그인하지 않은 사용자의 접근 차단
2. 작성자 본인만 수정 가능 여부
3. URL의 게시글 id를 바꿨을 때 권한 우회 가능성
4. 입력값 검증 누락 여부
5. 민감한 정보가 응답이나 로그에 노출되는지 여부

수정이 필요하면 위험도 높은 순서로 알려 주세요.

바이브 코딩에서 검수는 속도를 늦추는 과정이 아니라, 나중에 크게 무너질 부분을 미리 줄이는 과정입니다. AI가 만든 결과물을 화면, 기능, 오류, 보안 기준으로 나눠 확인하면 “일단 돌아가는 서비스”에서 “믿고 사용할 수 있는 서비스”에 가까워집니다.

신고하기

신고 사유를 선택해 주세요. 검토 후 적절한 조치를 취하겠습니다.

신고 사유

댓글 0

0 / 1000