바이브코딩 라이브 | 인터렉티브 웹 클론코딩 #1

인터랙티브 웹 개발을 모르는 채로 애니메이션이 화려한 쇼핑몰 첫 화면을 클론코딩했어요. 코드는 한 줄도 직접 쓰지 않았어요. 제가 한 일은 AI가 낸 계획을 비전문가 입장에서 따져 묻고, 빠진 문서를 채우는 것뿐이었어요.

이 노트를 읽고 나면 할 수 있는 것

1. 레퍼런스 저장 → 기술 스택 → 코드 구조 → 구현 계획 → 구현 순서로, 모르는 분야의 프로젝트를 AI와 함께 설계할 수 있어요.
2. "설계 → 억지로라도 비판 → 냉정하게 재평가 → 최종본" 네 단계 프롬프트 묶음을 그대로 가져다 쓸 수 있어요.
3. 구현이 의도와 다르게 나왔을 때 코드를 고치는 대신, 스펙 문서와 구현 프롬프트 중 어느 쪽이 문제인지 가려 보강할 수 있어요.

다시보기: https://youtu.be/b1yURKEWG4E — 3시간 11분. 앞 20분은 생각 공유와 방법론, 그 뒤는 라이브 코딩이에요.

보충: 방송에서 만든 코드와 프롬프트는 공개 저장소 greatSumini/context-engineering-sample에 있고, 이 노트의 프롬프트 원문은 방송 중 마지막 커밋(dda2bc6, 2025-10-17 22:39) 기준이에요.

목차

• 바이브코딩을 대하는 생각이 바뀐 과정 ▶ 0:05:45
• 모르는 분야는 대통령처럼 피드백해요 ▶ 0:12:04
• 레퍼런스부터 파일로 모아 둬요 ▶ 0:22:47
• 기술 스택: 설계 → 억지 비판 → 냉정한 재평가 → 최종본 ▶ 0:30:35
• 코드 구조와 구현 계획도 같은 틀로 돌려요 ▶ 0:45:02
• 첫 구현이 빗나가자 코드 대신 문서를 더했어요 ▶ 1:30:56
• 무엇이 빠졌는지도 AI에게 물어요 ▶ 1:54:57
• 스펙이 새로운 코드예요 ▶ 2:35:27
• 마지막 다듬기와 결과 ▶ 2:51:58
• Q&A ▶ 1:24:04
• 오늘 해볼 것 ▶ 3:09:14

바이브코딩을 대하는 생각이 바뀐 과정 ▶ 0:05:45

바이브코딩을 대하는 제 생각은 세 번 바뀌었어요. 처음엔 프롬프트를 넣어 신기한 걸 찍어 내는 데 집중했고, 결과는 대부분 토이 프로젝트 수준이었어요. ▶ 0:06:23

그다음은 정확한 지시였어요. 긴 설계를 처음부터 넣어 실수할 여지를 없애면 결과는 쓸 만해요. 그런데 생산성은 다섯 배, 열 배가 아니라 두세 배였어요. ▶ 0:08:06

그래서 요즘은 최대한 AI에게 전부 시키는 파이프라인을 연구하고 있어요. 초안을 뽑고, 스스로 개선하게 하고, 여러 관점에서 피드백하게 한 뒤 종합해 최종 결과를 내게 하면 훨씬 좋아진다는 연구를 업무에 적용하는 중이에요. ▶ 0:08:50

제가 개발자로서 그냥 원래 잘 하던 분야를 잘 하는 건 당연한 거고 내가 모르던 것도 이 전문가인 AI한테 잘 시킬 수 있어요. 인테리어 업자를 부를 때도 우리는 잘 검사하고 잘 물어볼 뿐이잖아요. ▶ 0:09:53

미래의 개발자는 AI 에이전트 파이프라인을 회사에 맞게 만들어 두고 유지보수하는 일을 할 거라고 봐요. 시니어는 공정 관리자, 주니어는 생산직, 개별 작업은 공장 기계처럼 AI가 맡아요. ▶ 0:11:12