[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 8회 - 일부러 망가뜨리고 고치기 + 초급 졸업 과제: 고장 난 앱 재현 실험, 3단계 문제 전달 공식(기대·실제·재현 방법), 대화가 꼬였을 때 새 대화 리셋 기술, 나만의 생활 도구 졸업 프로젝트

[바이브코딩 특집] 비전공자를 위한 Claude 바이브 코딩 8회 - 일부러 망가뜨리고 고치기 + 초급 졸업 과제: 고장 난 앱 재현 실험, 3단계 문제 전달 공식(기대·실제·재현 방법), 대화가 꼬였을 때 새 대화 리셋 기술, 나만의 생활 도구 졸업 프로젝트

 

드디어 컴퓨터에 프로그램 하나 설치하지 않고 브라우저 채팅창만으로 달리는 [초급편(1~8회)]의 마지막 시간에 도착했습니다! 지난 일곱 번의 실습을 거치며 여러분은 이미 자기소개 페이지(1~2회), 반응형 모바일 초대장(3회), 더치페이 계산기(4회), 가계부 차트 대시보드(5회), 영구 저장 할 일 앱(6회), 그리고 효과음이 울리는 반응속도 미니 게임(7회)까지 내 손으로 직접 만들어냈습니다.

그런데 이제 매뉴얼을 덮고 혼자서 나만의 앱을 만들려 할 때, 비전공자의 발목을 잡는 가장 큰 두려움이 하나 남아 있습니다. 바로 "열심히 만들다가 갑자기 버튼이 안 눌리거나 고장이 나면 어떡하지?", "클로드한테 고쳐달라고 할수록 원래 잘 되던 것까지 엉망으로 꼬이면 어떡하지?"라는 막연한 공포입니다.

자전거를 배울 때도 넘어지는 법과 일어나는 법을 먼저 배워야 두려움이 사라지듯, 코딩에서도 일부러 앱을 고장 내보고 내 힘으로 깔끔하게 수리해 본 경험이 한 번만 있으면 그 어떤 에러 앞에서도 당황하지 않게 됩니다.

오늘 8회: 일부러 망가뜨리고 고치기 + 초급 졸업 과제에서는 고장 난 앱 재현 실험으로 에러에 대한 면역력을 키우고, 클로드가 단 한 번에 버그를 잡게 만드는 3단계 문제 전달 공식(기대·실제·재현 방법)과 수정 지옥에서 탈출하는 대화가 꼬였을 때 새 대화 리셋 기술을 익힙니다. 그리고 마지막으로 1~7회의 모든 무기를 총동원해 세상에 하나뿐인 나만의 생활 도구 졸업 프로젝트를 60분 만에 완성해 보겠습니다!

 

1. 일부러 망가뜨리고 고치기 + 초급 졸업 과제: 초급편 마지막 관문과 60분 실습 준비

오늘 60분 실습은 전반부 25분 동안 '고장 수리 훈련'을 마친 뒤, 후반부 35분 동안 여러분이 직접 기획한 나만의 실생활 도구를 완성하는 두 파트로 진행됩니다.

(1) 오늘의 실습 요약표

항목	상세 내용
오늘 만들 결과물	① 버그 2개가 숨겨진 집중 타이머를 완벽히 수리한 경험 + ② 내 일상의 불편함을 해결하는 나만의 생활 밀착형 웹 도구 1종
소요 시간	약 60분 (디버깅 훈련 25분 + 졸업 과제 제작 35분)
이번 회차 세팅	추가 설치 및 가입 없음 (Claude(claude.ai) 브라우저 채팅창만 사용)
핵심 실습 3단계	① 일부러 고장 난 앱을 띄워 버그 겪어보기 → ② '기대한 동작 / 실제 동작 / 재현 방법' 3단계 공식으로 수리하기 → ③ 대화가 꼬일 때 새 대화로 깔끔히 이사하기 + 졸업 과제 완성
오늘 깨우칠 핵심 원리	"문제를 감정적으로('안 돼요') 말하지 않고, 관찰한 현상 그대로 정확히 말하면 대부분의 버그는 단 한 번에 풀린다."

(2) 현업 개발자들도 하루의 절반은 '고치는 일(디버깅)'을 합니다

비전공자분들은 흔히 *"내가 코딩을 몰라서 자꾸 버그가 나나 봐"*라고 자책하곤 합니다. 하지만 10년 차 프로 개발자도, 인공지능 클로드도 처음부터 100% 완벽한 코드를 짜는 경우는 드뭅니다.

프로그램에서 오작동(버그)을 찾아 고치는 과정을 '디버깅(Debugging)'이라고 부릅니다. 바이브 코딩에서는 내가 직접 영어 코드 수백 줄을 뒤져서 오타를 찾을 필요가 없습니다. 나는 '어디가 어떻게 이상한지 정확히 증상을 설명하는 환자' 역할만 잘하면, 수술과 처방은 의사인 클로드가 알아서 해줍니다.

2. 고장 난 앱 재현 실험: 멀쩡해 보이는 앱의 숨은 고장 2가지를 직접 겪어보기

병원에 가서 의사에게 증상을 잘 설명하는 연습을 하려면, 먼저 똑같은 증상을 겪어보는 것이 가장 빠릅니다. Claude(claude.ai)에서 [+ 새 채팅(New Chat)]을 열고, 연습용으로 '겉보기엔 예쁘지만 치명적인 고장 2개가 숨어 있는 1분 집중 타이머'를 일부러 만들어 보겠습니다.

Step 1. 일부러 고장 난 연습용 타이머 불러오기

아래 프롬프트를 복사해 클로드 새 대화창에 그대로 붙여 넣고 엔터를 누르세요.

[복사해서 붙여 넣을 프롬프트 1 - 디버깅 훈련용 고장 난 타이머 생성]

내가 버그 찾기(디버깅) 연습을 하려고 해. 겉보기에는 아주 예쁘고 깔끔한 '60초 집중 타이머' 웹 앱을 단일 HTML 파일로 만들어 오른쪽 미리보기에 띄워줘. 화면에는 60초 숫자 표시판과 [▶ 시작], [⏸ 일시정지], [🔄 처음으로 리셋] 버튼 3개가 있으면 돼.

단, 내 수리 연습을 위해 코드 안에 아래 두 가지 고장(버그)을 일부러 심어 놓아줘. (화면에 버그 힌트는 적지 마!)

1. 사용자가 [▶ 시작] 버튼을 연속으로 여러 번 누르면, 이전 타이머가 멈추지 않고 겹쳐서 초 숫자가 2배, 3배속으로 미친 듯이 빨리 줄어드는 고장.
2. 숫자가 0초가 되어 끝났는데도 멈추지 않고 -1, -2, -3처럼 마이너스 숫자로 끝없이 내려가는 고장.

Step 2. 내 손으로 직접 클릭해서 앱 망가뜨려 보기!

오른쪽 아티팩트(Artifacts) 미리보기 창에 멀쩡해 보이는 60초 타이머가 나타났나요? 이제 직접 마우스로 눌러서 두 가지 고장을 눈으로 확인해 보세요!

1. 고장 1 체험 (광클 가속 버그): [▶ 시작] 버튼을 마우스로 빠르게 5번 연속 따다다닥 클릭해 보세요! 원래는 1초에 1씩 줄어들어야 할 숫자가 마치 고장 난 시계처럼 1초에 5씩 순식간에 줄어드는 황당한 광경이 펼쳐집니다. (실제 바이브 코딩에서 타이머나 게임을 만들 때 정말 자주 만나는 단골 버그입니다!)
2. 고장 2 체험 (지하실 뚫고 내려가는 마이너스 버그): 그렇게 숫자가 빠르게 줄어들어 0초에 도달했을 때 어떻게 되는지 지켜보세요. "시간 종료!" 하고 멈추는 대신, -1, -2, -3, -15... 끝도 없이 마이너스 숫자로 떨어집니다!

어떠신가요? 막상 눈으로 고장 난 모습을 직접 보니 컴퓨터가 폭발하는 것도 아니고, "아하, 이런 걸 버그라고 부르는구나!" 하고 마음이 훨씬 편해지셨을 겁니다. 이제 이 고장 난 시계를 전문가처럼 단 한 번의 지시로 고쳐보겠습니다.

3. 3단계 문제 전달 공식(기대·실제·재현 방법): "안 돼요" 대신 한 번에 고쳐주는 마법의 질문법

앱이 고장 났을 때 초보자와 고수의 차이는 클로드에게 보내는 단 세 줄의 메시지에서 갈립니다.

(1) 클로드를 헤매게 만드는 최악의 요청 vs 단번에 고치는 3단계 공식

초보자들은 마음이 급해서 "타이머가 이상해요! 고쳐주세요" 또는 "시작 버튼이 제대로 작동 안 해요"라고 말합니다. 이렇게 말하면 클로드는 '버튼 색깔이 이상하다는 건가? 아예 안 눌린다는 건가?' 하고 엉뚱한 곳을 추측해 멀쩡한 디자인까지 뜯어고치게 됩니다.

반면 아래 3단계 문제 전달 공식에 맞춰 적어주면 백발백중 단 한 번에 정확한 원인을 찾아 고칩니다.

순서	항목 이름	적어줄 내용 (질문 공식)	나쁜 예시 vs 좋은 예시 비교
1단계	기대한 동작 (원래 바랐던 모습)	원래 정상이라면 어떻게 움직여야 하는가?	❌ "시간이 이상하게 가요." ⭕ "원래는 1초에 숫자가 1씩 일정하게 줄어들고, 0초가 되면 딱 멈춰야 해."
2단계	실제 동작 (지금 나타나는 증상)	그런데 지금 내 눈앞에는 어떤 이상한 현상이 보이는가?	❌ "고장 났어요." ⭕ "그런데 실제로는 초 숫자가 3~4배속으로 엄청나게 빨리 줄어들고, 0초 아래로 -1, -2처럼 계속 내려가."
3단계	재현 방법 (고장이 나는 내 행동 순서)	내가 어떤 버튼을 어떤 순서로 눌렀을 때 그 현상이 나타나는가?	❌ "그냥 쓰다 보니 그래요." ⭕ "내가 [▶ 시작] 버튼을 연속으로 3~4번 클릭한 뒤 끝날 때까지 지켜봤을 때 이 현상이 항상 나타나."

Step 1. 3단계 공식으로 고장 난 타이머 한 방에 수리하기

방금 고장 난 타이머가 떠 있는 그 대화창에 아래 수리 요청 프롬프트를 복사해 붙여 넣고 결과를 확인해 보세요.

[복사해서 붙여 넣을 프롬프트 2 - 3단계 공식으로 버그 수리 요청]

지금 만든 타이머의 화면 디자인은 그대로 유지하고, 아래 두 가지 문제만 정확히 수정해 줘.

[문제 1: 시작 버튼 중복 클릭 시 속도 빨라짐]

• 기대한 동작: 타이머가 이미 돌아가는 중에는 [▶ 시작] 버튼을 여러 번 눌러도 1초에 1씩 일정한 속도로만 줄어들어야 해. (실행 중에는 시작 버튼이 비활성화되거나 중복 실행이 무시되어야 함)
• 실제 동작: 숫자가 2배, 3배속으로 너무 빠르게 줄어들어.
• 재현 방법: [▶ 시작] 버튼을 연속으로 3번 이상 클릭했을 때 발생해.

[문제 2: 0초 이후 마이너스 시간 진입]

• 기대한 동작: 숫자가 정확히 0초가 되면 타이머가 즉시 멈추고 "🎉 집중 완료!" 안내 문구가 떠야 해.
• 실제 동작: 0초에서 멈추지 않고 -1, -2, -3으로 계속 숫자가 내려가.
• 재현 방법: 타이머를 실행한 뒤 0초가 지날 때까지 기다렸을 때 발생해.

Step 2. 수리 결과 재검증하기

수리가 완료된 미리보기 창에서 아까와 똑같은 방법으로 괴롭혀 보세요!

1. [▶ 시작] 버튼을 아무리 마구 연타해도 시계가 꿋꿋하게 1초에 1씩만 정직하게 줄어드는지 확인합니다.
2. 0초에 도달하는 순간 마이너스로 내려가지 않고 딱 멈추며 완료 메시지가 뜨는지 확인합니다.

[보너스 꿀팁: 화면이 아예 새하얗게 먹통이 되었을 때는?] 만약 내 컴퓨터에서 .html 파일을 열었는데 버튼이 아예 안 눌리거나 백지 화면만 뜬다면, 브라우저에서 키보드 F12(또는 마우스 우클릭 → 검사 → 상단 Console 탭)를 눌러보세요. 빨간색 글씨로 적힌 영어 에러 줄(예: Uncaught SyntaxError...)이 보인다면, 그 빨간 줄을 그대로 복사해 3단계 공식의 '실제 동작' 칸에 붙여 넣어 주면 아무리 심각한 먹통 에러도 10초 만에 부활합니다!

4. 대화가 꼬였을 때 새 대화 리셋 기술: 수정할수록 더 망가지는 무한 루프 탈출하기

바이브 코딩을 하다 보면 한 대화방 안에서 수정을 15번, 20번 이상 길게 이어갈 때가 있습니다. 그러다 보면 어느 순간부터 A를 고쳐달라고 하면 B가 망가지고, 다시 B를 고쳐달라고 하면 아까 고친 A가 도로 고장 나는 '무한 도돌이표 지옥'에 빠지곤 합니다.

(1) 왜 대화가 길어지면 클로드가 횡설수설하기 시작할까요?

한 대화방 안에 *"처음에 이렇게 했다가 → 아니 저렇게 바꿨다가 → 방금 그건 취소하고..."*라는 실패 기록과 고장 난 코드 조각들이 수십 페이지씩 쌓이면, AI가 과거의 틀린 코드와 현재 코드를 헷갈리는 맥락 오염(Context Pollution)이 일어나기 때문입니다.

이때 같은 대화방에서 *"왜 자꾸 시킨 대로 못 해!"*라고 화를 내며 계속 메시지를 보내면 상황은 더 나빠집니다. 가장 현명하고 빠른 해결책은 과감하게 그 대화방을 버리고 '깨끗한 새 대화'로 이사하는 것입니다!

(2) 꼬인 대화를 1분 만에 구출하는 '새 대화 리셋' 3단계 공식

대화가 꼬였다는 느낌이 들면 지체 없이 아래 순서대로 행동하세요.

1. 가장 멀쩡했던 마지막 버전 건져내기:
   • 오른쪽 아티팩트 창 상단(또는 하단)의 버전 선택기(v1, v2, v3...)를 눌러보며, 꼬이기 직전에 가장 잘 작동했던 버전을 찾아 [다운로드](또는 코드 복사)를 누릅니다.
2. 깨끗한 [+ 새 채팅] 열기:
   • 미련 없이 왼쪽 상단의 [+ 새 채팅(New Chat)] 버튼을 눌러 머리가 맑은 새 클로드를 부릅니다.
3. 파일 첨부 + 남은 목표 딱 하나만 전달하기:
   • 방금 건져낸 .html 파일을 새 채팅창에 첨부하고 아래 템플릿처럼 깔끔하게 정리해 첫 요청을 보냅니다.

[대화가 꼬였을 때 쓰는 '새 대화 이사' 프롬프트 템플릿]

첨부한 HTML 파일은 지금까지 내가 만든 (앱 이름)이고, 현재 들어있는 기능들은 모두 정상 작동하는 상태야. 기존 기능과 디자인은 절대 건드리지 말고 그대로 유지한 채, 딱 한 가지만 새로 추가(또는 수정)해 줘:

• (원하는 수정 사항 한 가지를 구체적으로 작성)

이 '새 대화 리셋' 기술 하나만 알고 계셔도, 앞으로 어떤 복잡한 프로젝트를 만들든 막다른 골목에 갇혀 포기하는 일이 영원히 사라집니다!

5. 나만의 생활 도구 초급 졸업 과제: 1~7회 무기를 총동원해 세상에 하나뿐인 내 앱 완성하기

자, 이제 초급편의 대미를 장식할 졸업 과제 시간입니다! 지금까지는 매뉴얼에 적힌 프롬프트를 그대로 복사해 따라 했지만, 졸업 과제는 여러분 자신이 일상이나 업무에서 겪는 작은 불편함을 해결하는 '나만의 도구'를 스스로 기획해 완성하는 미션입니다.

(1) 우리가 1~7회에서 모은 5가지 무기 복습

졸업 과제에는 아래 무기들 중 최소 3가지 이상이 자연스럽게 녹아들면 최고입니다.

• 반응형 모바일 카드 화면 (1~3회): 스마트폰에서도 한 손으로 누르기 편한 깔끔한 화면
• 입력 → 처리 → 출력 계산 규칙 (4~5회): 숫자나 글을 넣으면 정해진 규칙으로 결과를 정리·시각화
• localStorage 영구 저장 (6회): 새로고침하거나 내일 다시 열어도 내 기록이 그대로 보존
• 상태 전환 & Web Audio 효과음 (7회): 타이머·완료 시 경쾌한 자체 알림음과 상태 표시
• 3단계 공식 검증 & 수리 (8회): 완성 후 직접 눌러보며 예외 상황 점검 및 다듬기

(2) 주제가 고민되는 분들을 위한 추천 졸업 작품 아이디어 3선

평소 만들고 싶었던 도구가 있다면 그것을 만드시고, 당장 떠오르지 않는다면 아래 3가지 중 가장 마음에 드는 하나를 골라 도전해 보세요!

1. 아이디어 A: 하루 물 & 커피(카페인) 밸런스 기록기
   • 버튼 한 번으로 오늘 마신 물(200ml)과 커피(샷 수)를 기록하고, 커피를 마실 때마다 *"물을 한 잔 더 마셔야 밸런스가 맞아요!"*라고 알려주며 일주일 달성률을 차트와 로컬 저장소로 보여주는 건강 도구.
2. 아이디어 B: 우리 집 냉장고 유통기한 신호등 관리기
   • 식재료 이름과 유통기한 날짜를 등록하면 남은 일수에 따라 🟢안전(4일 이상) / 🟡주의(3일 이내) / 🔴위험(오늘 마감·기한 지남) 신호등 색상으로 자동 정렬해 주고 새로고침해도 유지되는 살림 도구.
3. 아이디어 C: 운동 세트 & 휴식 인터벌 코치 타이머
   • 스쿼트·플랭크 등 운동 시간(40초)과 휴식 시간(20초), 목표 세트 수(5세트)를 입력하면 상태(운동 중/휴식 중/완료)에 따라 배경색과 비프음 효과음이 자동으로 바뀌고 오늘 운동 완료 도장을 달력에 찍어주는 홈트 도구.

(3) 빈칸만 채워 쓰는 [초급 졸업 과제 만능 기획 프롬프트]

Claude(claude.ai)에서 [+ 새 채팅]을 열고, 아래 괄호 ( ) 안을 여러분의 아이디어로 채워 나만의 졸업 작품을 탄생시켜 보세요!

[초급 졸업 과제 만능 프롬프트 템플릿]

내 일상에서 매일 실제로 쓸 '(나만의 도구 이름, 예: 냉장고 유통기한 신호등)' 웹 앱을 단일 HTML 파일로 만들어 오른쪽 미리보기에 띄워줘.

[1. 화면 기준 및 분위기]

• 스마트폰 세로 화면(최대 폭 440px)에서도 엄지손가락으로 쓰기 편한 반응형 카드 레이아웃으로 만들어줘.
• 전체 색상은 (원하는 색상 2가지, 예: 깨끗한 화이트 배경에 오렌지·민트 포인트)로 깔끔하게 디자인해 줘.

[2. 핵심 동작 규칙 (입력 → 처리 → 출력)]

• 사용자가 입력할 것: (예: 식재료 이름, 보관 위치[냉장/냉동], 소비기한 날짜)
• 처리할 계산/상태 규칙: (예: 오늘 날짜와 비교해 D-Day를 계산하고, 3일 이하로 남으면 노란색 주의 배지, 기한이 지나면 빨간색 경고 배지를 붙여 임박한 순서대로 위쪽에 정렬해 줘.)
• 화면에 보여줄 결과: (예: 상단에 '임박 식재료 N개' 요약 카드를 보여주고, 아래에 삭제·소비 완료 버튼이 달린 목록을 보여줘.)

[3. 저장 및 편의 기능]

• 브라우저의 localStorage에 데이터를 자동 저장해서, 새로고침하거나 내일 다시 열어도 내가 입력한 목록이 그대로 남아있게 해줘.
• (선택 사항: 버튼을 누르거나 완료할 때 외부 파일 없는 Web Audio API로 가벼운 완료 효과음을 넣어줘.)

(4) 초급편 졸업 합격 기준 4가지 (스스로 채점해 보세요!)

만들어진 앱을 .html 파일로 다운로드해 내 컴퓨터와 스마트폰에서 직접 열어보고 아래 4가지를 모두 통과하면 초급편 명예 졸업입니다!

• [ ] 기준 1 (정상 동작): 내가 의도한 입력·계산·버튼 동작이 에러 없이 정확히 작동하는가?
• [ ] 기준 2 (기억력 유지): 항목을 2개 이상 넣은 뒤 브라우저를 새로고침(F5)해도 데이터가 날아가지 않고 남아있는가?
• [ ] 기준 3 (예외 방어): 빈칸인 채로 추가 버튼을 누르거나 0을 넣었을 때 앱이 고장 나지 않고 친절한 안내 문구가 뜨는가?
• [ ] 기준 4 (1회 이상 수리·개선 완료): 첫 결과물에 만족하지 않고, 2회 때 배운 부분 고정 공식이나 오늘 배운 3단계 문제 전달 공식으로 내가 원하는 디테일을 최소 1번 이상 직접 고쳐서 완성했는가?

6. 8회 핵심 원리 정리 및 중급 준비편 예고: 문제를 정확히 말하면 대부분 풀린다

진심으로 축하합니다! 코딩의 '코' 자도 모르던 상태에서 출발해 8회차까지 완주하신 여러분은 이제 머릿속 아이디어를 웹 앱으로 뚝딱 만들어내고 고장까지 수리할 줄 아는 당당한 초급 바이브 코더로 거듭나셨습니다.

(1) 오늘 배운 것 3줄 요약

1. 에러는 고장이 아니라 힌트다: 프로그램이 오작동할 때 당황하지 않고 증상을 차분히 관찰하면, 내가 코드를 직접 고치지 않아도 AI가 몇 초 만에 수리해 줍니다.
2. 3단계 문제 전달 공식: "안 돼요" 대신 ① 기대한 동작(원래 바랐던 모습), ② 실제 동작(지금 보이는 증상), ③ 재현 방법(내가 누른 순서) 세 줄로 말하면 백발백중 해결됩니다.
3. 새 대화 리셋의 지혜: 수정이 길어져 고칠수록 다른 곳이 망가진다면, 가장 멀쩡했던 이전 버전을 챙겨 새 채팅창에서 깨끗하게 다시 출발하는 것이 가장 빠른 지름길입니다.

(2) 다음 회차 예고: [중급 준비편] 작업 환경 한 번에 만들기

1회부터 오늘 8회까지 우리는 오직 클로드 웹사이트 채팅창 안에서 '파일 하나짜리(.html) 개인용 앱'을 만들었습니다. 설치가 없어서 편했지만 아쉬운 점도 분명히 느끼셨을 겁니다. "내가 만든 멋진 앱을 친구나 고객들이 https://내사이트주소.com을 쳐서 언제든 들어오게 할 순 없을까?", "파일 하나에 다 구겨 넣지 않고 진짜 서비스처럼 여러 페이지로 된 큰 웹사이트를 내 컴퓨터 폴더에서 AI가 직접 뚝딱거리며 만들어 주면 얼마나 편할까?"

다음 시간인 [중급 준비편: 작업 환경 한 번에 만들기]부터는 드디어 채팅창 밖으로 걸어 나와, AI 에이전트(Claude Code)가 내 컴퓨터 폴더 안에서 직접 파일을 만들고 수정하는 진짜 에이전트 코딩의 세계로 진입합니다!

중급편 본편(9~16회) 실습 도중에는 지루한 설치 이야기가 단 한 번도 나오지 않도록, 다음 [중급 준비편] 딱 한 회차에 필수 프로그램 설치(Git, Claude Code 등)와 무료 클라우드·배포 계정(GitHub, Vercel) 연결을 한꺼번에 깔끔하게 끝내드리겠습니다. 심지어 복잡한 연결 설정조차 AI에게 시켜서 끝내는 신기한 경험을 기대해 주세요!