바이브코딩, 처음에는 무엇을 만들고 확인할까?

AI 입문 연재 · 3 / 5편 공개 1. 프롬프트 예문 · 2. 기본 지침 설정 · 3. 바이브코딩 첫 요청서 · 4. 클로드 아티팩트 실습 · 5. 클로드 코드 첫 파일

바이브코딩은 만들고 싶은 동작을 말로 설명하고, AI가 만든 결과를 확인하며 고치는 방식이다. 처음에는 로그인이나 결제 없는 작은 도구를 골라 ‘어떻게 되면 성공인지’부터 적는 편이 좋다. 화면이 예쁘게 나오는 것과 기능이 맞게 동작하는 것은 별개다.

AI 입문 연재 3편의 결과물은 ‘준비물 체크 도구’의 첫 요청서와 확인표다. 앱 설치나 공개 배포까지 한꺼번에 배우지 않는다. 아래 사례는 학습용 가상 예제이며 특정 서비스에서 생성·실행에 성공했다는 체험담이 아니다.

연재 1편의 바꿔 쓰는 요청문을 읽었다면, 이번에는 답변의 형식 대신 버튼을 눌렀을 때의 결과를 설명해 본다.

바이브코딩은 질문하는 것과 무엇이 다른가?

일반적인 질문은 설명이나 문장을 받는 데서 끝날 수 있다. 바이브코딩에서는 누르는 곳, 바뀌는 값, 잘못된 경우까지 확인해야 한다. AI의 ‘완성했다’는 말보다 내가 정한 조건을 만족하는지가 기준이다.

코드를 직접 쓰는 양이 줄어도 결과를 판단할 역할은 남는다. 낯선 명령이나 권한 허용을 요청받았다면 뜻을 먼저 확인한다. 화면 하나가 필요할 뿐인데 다른 서비스 연결이나 유료 결제가 추가되면 첫 과제의 범위부터 다시 줄인다.

첫 과제는 ‘물병·우산·충전기’ 세 항목이면 충분하다

사용자는 혼자 연습하는 사람, 기능은 체크와 해제, 보여 줄 결과는 체크한 개수로 제한한다. 세 항목의 이름은 가상 준비물이다. 실제 가족 정보나 회사 자료를 넣을 필요가 없다.

이번에 넣을 기능은 다음과 같다.

• 물병·우산·충전기를 각각 체크하고 해제한다.
• 화면에 ‘준비 완료 0/3’처럼 개수를 보여 준다.
• 전부 해제하는 초기화 버튼을 둔다.
• 저장 기능은 넣지 않고, 새로고침하면 처음 상태로 돌아간다고 표시한다.

반대로 로그인, 가족별 계정, 알림 발송, 다른 기기와 동기화는 나중 과제다. 저장 기능이 없으므로 화면을 닫아도 기록이 남는다고 기대하지 않는다. 이 조건을 먼저 합의해야 새로고침 후 값이 사라지는 일이 버그인지 설계인지 구분할 수 있다.

바이브코딩 첫 요청문을 이렇게 바꿔 쓴다

첫 요청문에는 대상·동작·표시·제외 조건을 함께 적는다. 아래 예문에서 준비물 이름만 바꿀 수 있지만, 개수를 바꿨다면 전체 개수 조건도 같이 고친다.

혼자 연습할 준비물 체크 도구를 만들고 싶다.
아직 만들지 말고 아래 조건이 모순되는지 먼저 확인해 줘.

항목: 물병, 우산, 충전기 3개.
각 항목은 체크와 해제가 가능해야 한다.
체크한 개수를 '준비 완료 0/3' 형식으로 보여 준다.
초기화 버튼을 누르면 모든 체크가 해제되어야 한다.
처음 열거나 새로고침하면 모두 해제 상태로 시작한다.
'새로고침하면 기록이 사라진다'는 안내를 보여 준다.
로그인, 서버 저장, 외부 서비스 연결, 결제는 넣지 않는다.
조건이 분명해지면 대화 옆에서 확인할 수 있는
상호작용 화면으로 만들어 달라고 요청할 예정이다.
모르는 조건이 있으면 추측하지 말고 먼저 물어봐 줘.

AI가 조건을 다시 정리하면 항목 수와 저장 범위부터 대조한다. 틀린 부분을 고친 뒤 “이 조건대로 만들어 달라”고 요청한다. 처음부터 만든 화면이 있다면 기존 대화에서 어떤 조건을 빼거나 바꿀지 설명한다.

Claude Academy의 공식 안내는 원하는 작업을 설명하고, 필요한 질문을 주고받은 다음 아티팩트로 만들 것을 요청하는 흐름을 소개한다. 아티팩트는 대화와 나란히 열리는 결과물이며, 이 예제에서는 눌러 볼 수 있는 작은 화면을 뜻한다.

도구에 따라 결과 확인 위치와 이용 조건은 다르다. Claude 공식 도움말은 일반 아티팩트와 저장·앱 연결 같은 추가 기능의 조건을 구분한다. 이 글의 첫 과제에는 저장·연결 기능이 필요하지 않다. 조직 계정은 관리자 설정과 허용 범위를 확인하고, 메뉴가 없다는 이유로 설정을 임의로 바꾸지 않는다.

결과가 나오면 0 → 1 → 2 → 1 → 0을 확인한다

가상 예제의 예상 결과는 아래와 같다. 실제 결과는 독자가 만든 화면에서 별도로 기록한다. 체크 표시만 보고 숫자도 맞을 것이라고 넘기지 않는다.

마지막에는 충전기를 체크한 뒤 새로고침한다. 이번 설계에서는 0/3으로 돌아오는 것이 예상 결과다. 저장을 원한다면 후속 과제로 따로 정하고, 어디에 무엇을 얼마나 보관할지부터 확인한다.

작은 화면에서도 항목과 초기화 버튼이 가려지지 않는지 본다. 버튼이 화면 안에 있다는 사실만으로 충분하지 않다. 물병의 체크 표시와 글자가 같은 항목에 연결돼 있는지도 확인한다.

틀리면 ‘다시 만들어’보다 관찰한 순서를 전달한다

수정 요청은 한 가지 증상과 재현 순서로 적는다. 예를 들어 ‘물병 체크 → 우산 체크 → 물병 해제’ 뒤 2/3이 남았다면, 기대한 1/3과 실제 2/3을 나란히 알려 준다.

물병을 체크하고 우산을 체크한 다음 물병을 해제했다.
체크된 항목은 우산 하나인데 화면에는 2/3이 남아 있다.
예상은 1/3이다. 체크 해제에 따른 개수 갱신만 고쳐 줘.
항목 이름과 초기화 동작은 유지해 줘.
고친 뒤 앞의 확인표를 어떤 순서로 다시 볼지도 알려 줘.

수정 후에는 문제 단계만 재검사하지 않는다. 처음 열기부터 초기화까지 다시 따라가야 다른 기능이 깨졌는지 알 수 있다. 문제가 커졌다면 무리하게 수정을 쌓기보다 직전 결과로 돌아갈 수 있는지 도구의 버전 기능을 확인한다.

바이브코딩 첫 공부의 완료 기준은 거창한 앱이 아니다. 원하는 동작을 짧게 적고, 예상과 실제를 비교해 다음 수정 한 가지를 말할 수 있는가다. 이 요청서와 확인표를 남겨 두면 다음 실습에서 도구가 바뀌어도 같은 기준으로 결과를 판단할 수 있다.

AI 입문 연재 이어 읽기

• 이전 편: 2편 · 한 번의 요청과 기본 지침 구분
• 다음 편: 4편 · 클로드로 첫 체크 도구 만들기
• 처음부터: 1편 · 프롬프트 예문 바꿔 쓰기

출처

1. Claude 도움말 — 아티팩트의 종류와 이용 조건
2. Claude Academy — 대화로 맞춤 아티팩트 만들기