이전 시즌 시리즈에서 뭔가를 만들었다. VSCode 켜고, AI한테 코드 달라고 하고, 오류 나면 오류 메시지 통째로 붙여넣고, 어떻게든 실행이 됐을 때 "됐다!"를 외쳐봤다. 메모 앱이었어도 괜찮다. 빈 폴더에서 시작해서 화면에 뭔가 뜨는 것까지 직접 했다는 게 중요하다.
근데 좀 지나서 그 프로젝트를 다시 열면 낯설다. 내가 만들었는데 어디서부터 봐야 할지 모른다. 파일이 왜 이렇게 많은지, 어디를 수정해야 하는지 감이 안 잡힌다.
비개발자 코딩 입문자들은 "만들었는데 내 것 같지 않은 느낌"이 들것이다. 나도 처음에 그랬다.
바이브 코딩 시즌 2는 그 지점에서 시작한다.
시즌 1와 시즌 2, 뭐가 달라지는가
시즌 1에서 AI는 전부 해줬다.
"메모를 저장하는 버튼 만들어줘" 하면 코드가 나왔고, 그걸 붙여넣으면 됐다. 왜 그렇게 생긴 코드인지, 파일이 왜 여러 개인지, 이 함수가 무슨 역할인지 — 몰라도 됐다. 일단 돌아가면 성공이었다.
시즌 2에서 달라지는 건 딱 하나다.
"왜 이렇게 생겼지?"라는 질문을 처음으로 던지기 시작하는 것.
전부 이해하겠다는 게 아니다. 코드를 줄줄 읽겠다는 것도 아니다. 그냥 내 프로젝트 폴더를 열었을 때 "이 파일이 아마 이런 역할이겠구나" 하는 감이 생기기 시작하는 것. 그 정도의 전환이 이번 시즌 목표다.
| 시즌 1 | 시즌 2 | |
|---|---|---|
| 코드 태도 | AI에게 전부 요청 | 방향을 잡고 요청 |
| 에러 대처 | 통째로 AI에게 전달 | 에러 종류 먼저 파악 후 전달 |
| 코드 수정 | AI가 전부 | 작은 부분은 직접 수정 |
| 구조 이해 | 파일 위치만 앎 | 각 파일의 역할을 앎 |
| 감정 목표 | "됐다!" | "이제 왜 이렇게 생겼는지 알겠다" |
"코드를 읽는다"는 게 무슨 뜻인가
처음 이 말을 들으면 거창하게 느껴진다. 개발자들이나 하는 거 아닌가 싶다.
시즌 2에서 말하는 "코드를 읽는다"는 그런 의미가 아니다. 예를 들어 이런 거다.
async function saveMemo(content) {
// ...
}
이 코드를 보고 "메모를 저장하는 함수겠구나"를 알아채는 것. 내부 로직이 뭔지 몰라도 된다. 함수 이름만 보고 뭘 하는 건지 감 잡는 것. 그게 시작이다.
page.tsx, route.ts, lib/ 같은 파일 이름들이 지금은 그냥 영어 단어처럼 보이겠지만, 시즌 2를 진행하면서 "이 파일에 이런 게 들어가는 거구나"가 느껴지기 시작한다. 전부 이해하는 것과 패턴을 인식하는 것은 다르다. 시즌 2는 후자를 목표로 한다.
처음엔 이 차이가 별것 아닌 것 같다. 써보면 다르다.
시즌 1 프로젝트를 지금 바로 열어보자
시즌 2를 시작하기 전에 시즌1에서 만든 앱을 한 번 다시 열어볼 것을 권한다.
그냥 열어보는 게 아니라, AI에게 이렇게 물어보는 것이다.
지금 내 프로젝트 폴더 구조를 보여줄게.
각 파일과 폴더가 어떤 역할을 하는지 초등학생도 이해할 수 있게 설명해줘.
그러면 AI가 폴더 지도를 그려준다. 시즌 1당시엔 그냥 붙여넣었던 파일들이 이번엔 다르게 보이기 시작한다. 그게 성장한 거다.
여기서 한 가지 주의할 게 있다. AI 설명을 읽다가 모르는 용어가 나와도 멈추지 않아도 된다. 지금은 전체 지도를 보는 단계다. 모르는 파일이 있으면 그냥 "이 파일은 뭐야?" 하고 바로 물어보면 된다.
그 감각이 시즌 2의 출발점이다.
시즌 2 전체 흐름 미리 보기
총 8편으로 구성된다. 0편인 지금 글을 포함해서.
1편에서는 Next.js 프로젝트 폴더 구조가 눈에 들어오기 시작하는 경험을 한다. page.tsx가 뭔지, route.ts가 뭔지, lib/에는 뭐가 들어가는지.
2편에서는 함수를 처음으로 알아보기 시작한다. 코드 덩어리 안에서 "이 함수는 이런 역할이겠구나"를 읽는 감각.
3편은 컴포넌트 개념 입문이다. React 강의가 아니라, 화면을 덩어리로 나누는 방식에 대한 감각.
4편에서는 처음으로 AI 코드를 직접 수정해본다. 텍스트, 숫자, 조건 — 작은 것부터.
5편은 에러 메시지 읽기다. 빨간 화면이 무서운 것에서 "이 에러는 대충 이런 뜻이겠구나"로 바뀌는 경험.
6편에서는 포트원으로 카카오페이 결제 버튼 하나를 붙이는 실습을 한다.
7편은 마무리다. 시즌 1부터 2까지 돌아보고, 지금 수준으로 실제로 뭘 만들 수 있는지 정리한다.
한 가지만 기억하고 시작하자
내가 경험한 바로는 처음부터 이해하려고 하지 말고, 패턴을 찾으려고 하는 것이 코드 읽기 능력을 기르는 가장 빠른 방법이다.
코드 한 줄 한 줄이 뭔지 이해하려 하면 3편쯤에서 지친다. 처음부터 전부 이해할 수 없다. 그게 당연하다. 대신 "이 파일에서 이 이름이 반복되네", "이런 구조가 여기서도 나오네" 하는 감각을 쌓는 것. 그게 훨씬 빠르다.
시즌 1에서 AI한테 전부 맡겼던 것처럼 AI는 계속 쓴다. 다만 이번엔 방향을 내가 먼저 잡고 요청하는 방식으로 달라진다. 그 차이가 생각보다 훨씬 크다.
시즌 2 1편이 바로 이어진다. 폴더 구조가 처음으로 눈에 들어오는 경험부터 시작한다. 시즌 1에서 만든 프로젝트 폴더를 열어둔 채로 따라오면 된다.
→ [1편: 폴더 구조가 눈에 들어오기 시작하는 순간](준비 중)
바이브 코딩 시리즈는 비개발자가 AI와 협업해 실제 서비스를 만들어가는 과정을 기록합니다.
댓글 쓰기