시리즈: 비개발자의 바이브코딩 도전기 (3/10)
Claude Code CLI를 설치했으니 이제 진짜 뭔가를 만들 차례입니다. 저는 "마케팅 자동화 툴"을 만들고 싶었습니다. 정확히는 이런 거였습니다.
어디서부터 시작해야 할지 막막했는데, 일단 Claude한테 물어보기로 했습니다.
먼저 프로젝트를 담을 폴더가 필요합니다. 터미널에서 이렇게 쳤습니다.
mkdir threads-manager cd threads-manager
mkdir은 make directory의 줄임말입니다. 폴더를 만드는 명령어입니다. cd는 change directory, 폴더로 이동하는 명령어입니다.
이제 이 폴더 안에서 Claude를 실행합니다.
claude
Claude가 켜지면 이렇게 말했습니다.
"마케팅 자동화 툴을 만들고 싶어. 사용자가 주제를 등록하면, AI가 그 주제에 맞는 글을 자동으로 생성해서 Threads에 발행해주는 서비스야. 어떻게 시작해야 할까?"
그랬더니 Claude가 엄청 긴 답변을 줬습니다. 요약하면 이런 내용이었습니다.
솔직히 이 중에서 이해한 건 절반도 안 됐습니다. Next.js가 뭔지, Supabase가 뭔지 하나도 몰랐습니다.
그래서 물어봤습니다.
"Next.js가 뭐야? 비개발자도 이해할 수 있게 설명해줘."
Claude가 설명해줬습니다. Next.js는 웹사이트를 만들 때 쓰는 도구인데, React라는 것을 기반으로 한다고 했습니다. React는 또 뭐냐고 물어봤더니, 화면을 만들 때 쓰는 도구라고 했습니다.
이런 식으로 모르는 게 나올 때마다 계속 물어봤습니다. 귀찮을 수 있지만, 이게 바이브코딩의 핵심입니다. 모르는 건 그때그때 물어보면 됩니다. 부끄러워할 필요 없습니다. 상대가 AI니까요.
어느 정도 이해가 됐다 싶어서, 본격적으로 시작해달라고 했습니다.
"그럼 이제 프로젝트를 시작해줘. Next.js로 기본 구조를 만들어줘."
Claude가 터미널에서 명령어를 실행했습니다.
npx create-next-app@latest . --typescript --tailwind --eslint
이게 뭐냐면:
몇 초 후에 폴더 안에 파일들이 주르륵 생겼습니다. 이게 프로젝트의 뼈대입니다.
폴더를 열어보니 처음 보는 파일들이 잔뜩 있었습니다.
이것들이 뭔지 하나하나 다 이해할 필요는 없었습니다. Claude가 알아서 건드려주니까요. 저는 그냥 "이런 게 있구나" 정도만 알면 됐습니다.
Claude한테 "한번 실행해봐"라고 했습니다.
npm run dev
이 명령어를 치면 개발용 서버가 켜집니다. 서버란 웹사이트를 띄워주는 프로그램입니다. 브라우저에서 localhost:3000에 접속하면 웹사이트가 보입니다.
localhost는 "내 컴퓨터"를 뜻합니다. 인터넷에 공개된 게 아니라, 내 컴퓨터에서만 접속할 수 있는 주소입니다. :3000은 포트 번호인데, 쉽게 말해 "3000번 문으로 들어와라"라는 뜻입니다.
브라우저를 열고 주소창에 localhost:3000을 치니까 Next.js 기본 페이지가 떴습니다. 아직 아무 기능도 없는 빈 페이지였지만, "오 진짜 되네"라는 생각이 들었습니다.
솔직히 이때까지는 반신반의였습니다. "이게 진짜 될까?" 싶었습니다. 하지만 일단 뭔가가 화면에 떴다는 게 신기했습니다. 코드를 한 줄도 직접 안 쳤는데 웹사이트가 만들어졌습니다.
다음 편에서는 이 빈 페이지에 실제 기능을 붙여봅니다. 하루 만에 v1.0이 완성되는 과정입니다.
다음 편: 퇴근하고 4시간, 진짜 돌아가는 서비스가 만들어졌다
댓글을 작성하려면 로그인이 필요합니다.
시리즈: 비개발자의 바이브코딩 도전기 (3/10)
Claude Code CLI를 설치했으니 이제 진짜 뭔가를 만들 차례입니다. 저는 "마케팅 자동화 툴"을 만들고 싶었습니다. 정확히는 이런 거였습니다.
어디서부터 시작해야 할지 막막했는데, 일단 Claude한테 물어보기로 했습니다.
먼저 프로젝트를 담을 폴더가 필요합니다. 터미널에서 이렇게 쳤습니다.
mkdir threads-manager cd threads-manager
mkdir은 make directory의 줄임말입니다. 폴더를 만드는 명령어입니다. cd는 change directory, 폴더로 이동하는 명령어입니다.
이제 이 폴더 안에서 Claude를 실행합니다.
claude
Claude가 켜지면 이렇게 말했습니다.
"마케팅 자동화 툴을 만들고 싶어. 사용자가 주제를 등록하면, AI가 그 주제에 맞는 글을 자동으로 생성해서 Threads에 발행해주는 서비스야. 어떻게 시작해야 할까?"
그랬더니 Claude가 엄청 긴 답변을 줬습니다. 요약하면 이런 내용이었습니다.
솔직히 이 중에서 이해한 건 절반도 안 됐습니다. Next.js가 뭔지, Supabase가 뭔지 하나도 몰랐습니다.
그래서 물어봤습니다.
"Next.js가 뭐야? 비개발자도 이해할 수 있게 설명해줘."
Claude가 설명해줬습니다. Next.js는 웹사이트를 만들 때 쓰는 도구인데, React라는 것을 기반으로 한다고 했습니다. React는 또 뭐냐고 물어봤더니, 화면을 만들 때 쓰는 도구라고 했습니다.
이런 식으로 모르는 게 나올 때마다 계속 물어봤습니다. 귀찮을 수 있지만, 이게 바이브코딩의 핵심입니다. 모르는 건 그때그때 물어보면 됩니다. 부끄러워할 필요 없습니다. 상대가 AI니까요.
어느 정도 이해가 됐다 싶어서, 본격적으로 시작해달라고 했습니다.
"그럼 이제 프로젝트를 시작해줘. Next.js로 기본 구조를 만들어줘."
Claude가 터미널에서 명령어를 실행했습니다.
npx create-next-app@latest . --typescript --tailwind --eslint
이게 뭐냐면:
몇 초 후에 폴더 안에 파일들이 주르륵 생겼습니다. 이게 프로젝트의 뼈대입니다.
폴더를 열어보니 처음 보는 파일들이 잔뜩 있었습니다.
이것들이 뭔지 하나하나 다 이해할 필요는 없었습니다. Claude가 알아서 건드려주니까요. 저는 그냥 "이런 게 있구나" 정도만 알면 됐습니다.
Claude한테 "한번 실행해봐"라고 했습니다.
npm run dev
이 명령어를 치면 개발용 서버가 켜집니다. 서버란 웹사이트를 띄워주는 프로그램입니다. 브라우저에서 localhost:3000에 접속하면 웹사이트가 보입니다.
localhost는 "내 컴퓨터"를 뜻합니다. 인터넷에 공개된 게 아니라, 내 컴퓨터에서만 접속할 수 있는 주소입니다. :3000은 포트 번호인데, 쉽게 말해 "3000번 문으로 들어와라"라는 뜻입니다.
브라우저를 열고 주소창에 localhost:3000을 치니까 Next.js 기본 페이지가 떴습니다. 아직 아무 기능도 없는 빈 페이지였지만, "오 진짜 되네"라는 생각이 들었습니다.
솔직히 이때까지는 반신반의였습니다. "이게 진짜 될까?" 싶었습니다. 하지만 일단 뭔가가 화면에 떴다는 게 신기했습니다. 코드를 한 줄도 직접 안 쳤는데 웹사이트가 만들어졌습니다.
다음 편에서는 이 빈 페이지에 실제 기능을 붙여봅니다. 하루 만에 v1.0이 완성되는 과정입니다.
다음 편: 퇴근하고 4시간, 진짜 돌아가는 서비스가 만들어졌다
댓글을 작성하려면 로그인이 필요합니다.