AI, 기죽지 맙시다 4편 : 일단 만들어보기

일단 동작하는 프로덕트를 경험해보고 도파민을 터트려봅시다.

3편에서 AI랑 친해지는 법을 이야기했다. 물어보고, 배우고, 대화하고. 그렇게 AI가 삶에 녹아들었다.

이제 만들어볼 차례다.

이번 편은 따라하는 가이드다. 우리는 무지성으로 일단 동작하는 걸 경험할 거다. 어떻게 동작하는지 모를 거고, 설계 아무것도 안 할 거다. 내가 생각하는 걸 실제로 눈앞에 띄워보고 움직이는 걸 경험하는 것. 그게 첫 번째 바이브 코딩의 목표가 되어야만 한다.

무식하면 용감하다

AI 해커톤을 갔다.

개발자도 아닌데 1인 개발자로 신청했다. 무식하면 용감하다는 마음으로 무식하게 개발자 세션에 참가했다.

간단한 교육을 해준다. 터미널 띄우는 법, 클로드 코드 불러오는 법, 배포하는 법. 근데 왜 이렇게 동작하는지, 왜 이렇게 해야 하는지 이유는 안 알려준다. 그냥 순서를 20분 만에 후다닥 알려준다.

그래서 무지성으로 따라했다.

그랬더니 뭔가 배포가 됐다. UI가 생겼다. 움직이기 시작했다.

여기서 도파민이 터진다. 이걸 한 번 경험해야 된다.

이제부터 그 경험을 같이 해보자. 이 글을 보고 그대로 따라하면 된다.

STEP 1. 터미널을 켠다

터미널이 뭔지 몰라도 된다. 그냥 까만 화면이다.

Spotlight(cmd + 스페이스바)에서 “터미널” 검색해서 열면 된다.

까만 화면에 커서가 깜빡이고 있으면 성공이다.

STEP 2. 폴더를 만들고 이동한다

내 프로젝트가 살 집을 먼저 만들어주는 거다.

바탕화면이든 문서 폴더든, 아무 데나 폴더를 하나 만들어라. 이름은 아무거나. my-first-app 같은 거면 된다.

그리고 터미널에서 그 폴더로 이동한다. cd 하고 폴더 경로를 쓰면 된다.

STEP 3. 클로드 코드를 설치한다

터미널에 이거 한 줄 치면 된다.

npm install -g @anthropic-ai/claude-code

에러가 나면? 그냥 클로드 새로운 대화창(웹도 가능) 에러 메시지 복붙하고 “이거 어떻게 해?” 물어봐라. 해결해준다.

STEP 4. 클로드 코드를 실행한다

터미널에 이렇게 치면 된다.

이게 끝이다. 클로드 코드가 실행된다.

처음 실행하면 로그인하라고 할 수 있다. 시키는 대로 로그인하면 된다.

모델 설정하는 것도 머리아프면 그냥 Opus 써라. 제일 비싼 모델 쓰면 된다.

STEP 5. 계획을 세운다 (/plan 모드)

이제 클로드 코드한테 말할 수 있다. 먼저 /plan 모드로 시작한다.

이렇게 치면 계획 모드로 바뀐다. 여기서 내가 만들고 싶은 걸 막 말하면 된다.

그러면 클로드가 어떻게 만들 건지 계획을 짜서 보여준다.

읽어본다. 이해 안 되는 부분이 있으면 “이게 뭐야?” 물어보면 된다. 잘 모르겠으면 “잘 모르겠는데 일단 진행해”라고 하면 된다.

ex) 나는 개인 메모장 웹앱을 만들고 싶어. 메모를 쓰고, 저장하고, 삭제할 수 있으면 돼. 나는 비개발자야. 노코드로 개발할 거고, Next.js + Vercel + Supabase를 활용할 거야.

STEP 6. 개발을 시작한다

계획이 괜찮으면 이렇게 말하면 된다.

“이제 개발 시작해줘”

여기서부터 클로드가 실제로 코드를 짜기 시작한다.

클로드가 코드를 짜고, 파일을 만들고, 이것저것 하겠다고 승인을 요청할 거다. 읽어보고 y 누르면 된다. 솔직히 뭔 말인지 100% 이해 안 되는 게 정상이다. 일단 승인한다. 문제 생기면 그때 고치면 된다.

STEP 7. 회원가입들

중간에 클로드가 이런 말을 할 거다.

“Vercel 회원가입하고 로그인해주세요.”

“Supabase 회원가입하고 프로젝트 만들어주세요.”

그냥 하면 된다. 웹사이트 들어가서 회원가입하고 로그인만 하면 된다.

Vercel: vercel.com 가서 GitHub 계정으로 가입하면 된다. GitHub 계정 없으면 그것도 만들면 된다.

Supabase: supabase.com 가서 가입하고 New Project 누르면 된다. 내 앱의 데이터를 저장해주는 곳이라고만 알면 충분하다.

중간에 뭔가 모르는 화면이 뜨거나 막히면. 그 화면을 캡처해서 클로드(claude.ai)든 ChatGPT든 아무 AI한테 물어보면 된다. "이게 떠있는데 어떻게 해야 돼?" 이러면 된다. 그게 제일 빠르다.

STEP 8. 서버를 띄운다

클로드가 "서버를 띄워보세요" 라고 할 거다.

터미널을 하나 더 열고 (기존 터미널은 그대로 두고), 프로젝트 폴더로 이동해서 이렇게 치면 된다.

그러면 뭔가 주소가 뜬다. localhost:3000 같은 거. 그 주소를 브라우저에 넣으면 내가 만든 게 보인다.

화면이 뜨면. 그게 내가 만든 거다.

드디어 도파민의 순간이 찾아온다.

내가 생각한 프로덕트가 동작한다. 이게 바이브코딩 비개발자들의 도파민이 터지는 순간이다.

이 과정에서 나도 모르게 한 것들이 있다. API도 연결해봤고, 프론트도 띄워봤고, 서버도 돌려봤다. 뭔지 몰랐지만 했다. 그러면 이제 AI한테 어떻게 명령을 내리면 되는지 감이 왔을 거다. 대충 구조가 보이기 시작한다.

이번 목표는 선택지를 없애는 거였다. 고민하지 말고 빨리 뭔가를 해서 아웃풋을 경험해보는 거였다. 2시간 안에 딸깍. 그것을 직접 해본 거다.

실제로 딸깍 이면에는 많은 게 있다. 근데 그걸 다 알 필요 없다. 그걸 다 알려고 하면 어렵고 포기하게 될 확률이 높아진다. 나중에 하다보면 보인다 딸깍의 이면이. 그때가 찾아오기를 즐기며 기다리면 된다.