시작하기 전에 한 가지 분명히 해두고 싶어요.
이거 저장하세요 :)
저는 개발자가 아닙니다. 한 번도 개발자였던 적이 없고, 컴퓨터 공학 학위도 없고, 코딩 부트캠프도 한 번도 수강하지 않았습니다. 대부분의 코드를 보고 이게 무슨 일을 하는지 말할 수도 없어요.
하지만 지난 주말, 저는 실제로 동작하는 웹 애플리케이션을 인터넷에 배포했습니다. 실제 사용자가 가입했고, 실제 데이터가 저장되었으며, 실제 기능이 작동했습니다.
전체를 Claude Code로 이틀 만에 만들었어요. 그리고 그 경험이 실제로 어땠는지 있는 그대로 말씀드리려고 합니다. 다듬어진 버전이 아니라, 지저분하고 좌절감이 넘치지만 획기적인 순간으로 가득했던 현실을요.
왜냐하면 온라인에 올라온 "AI로 앱 만들었다"는 이야기들은 모두 너무 쉬워 보이거든요. 결코 쉽지 않습니다. 하지만 충분히 가능한 일이에요.
토요일 아침: 아이디어
간단한 도구를 만들고 싶었습니다. 플랫폼 간에 게시물을 계획하고, 날짜 사이로 드래그하고, 게시됨으로 표시할 수 있는 콘텐츠 캘린더요. 혁신적인 건 아니지만, 제 작업 흐름에 실제로 필요한 것이었어요.
토요일 오전 9시, 터미널에서 Claude Code를 처음 열었습니다.
9시 15분이 되자 이미 첫 번째 실수를 저질렀더군요.
실수 #1: 계획 없이 시작하기
Claude Code에 처음 입력한 프롬프트는 이거였어요:
콘텐츠 캘린더 앱을 만들어 줘
Claude가 파일들을 잔뜩 생성했습니다. 화면에 뭔가가 나타났는데, 마치 캘린더를 한 번도 본 적 없는 사람이 디자인한 콘텐츠 캘린더처럼 보였어요.
여기서 90%의 사람들이 포기합니다. 모호한 프롬프트를 입력하고, 모호한 결과를 얻은 뒤, '바이브 코딩'은 통하지 않는다고 결론 내리죠.
문제는 Claude가 아니었습니다. 문제는 바로 저였어요. Claude에게 작업할 만한 정보를 전혀 주지 않았거든요.
제가 했어야 할 일:
Plan Mode로 시작했어야 했습니다. Claude Code에서 Shift + Tab을 눌러 Act Mode에서 Plan Mode로 전환하세요. Plan Mode에서 Claude는 만들기 전에 생각합니다. 질문을 하고, 아키텍처를 설계하고, 무엇을 만들지 보여줍니다.
다시 제대로 해봤습니다:
콘텐츠 캘린더 웹 앱을 만들고 싶어. 코드를 작성하기 전에 먼저 계획을 세우자.
앱에 필요한 것:
- 7개의 열(월요일부터 일요일까지)이 있는 주간 보기
- 제목, 플랫폼(Twitter, LinkedIn, Instagram), 상태(초안, 예약됨, 게시됨)로 게시물을 추가하는 기능
- 게시물을 날짜 사이로 드래그 앤 드롭하는 기능
- Tailwind CSS를 사용한 심플하고 깔끔한 디자인
- 세션 간에도 유지되도록 로컬 데이터베이스에 데이터 저장
어떤 기술 스택을 써야 할까? 폴더 구조는 어떻게 할까? 아무것도 만들기 전에 아키텍처를 설명해줘.
Claude가 상세한 계획을 제시했습니다. Next.js를 프레임워크로, SQLite를 데이터베이스로, Tailwind를 스타일링으로. 깔끔한 폴더 구조를 파일별로 정리해줬어요.
교훈: 항상 Plan Mode로 시작하라. 원하는 것을 항상 상세하게 설명하라. 5분 동안 계획을 세우면 2시간을 재구축하는 수고를 덜 수 있다.
실수 #2: 한 번에 모든 것을 만들려고 하기
계획을 세운 후, 저는 신나서 Claude에게 모든 것을 한 번에 만들라고 했습니다.
결과는 엉망이었어요. 일부 기능은 작동했지만, 다른 기능은 반쯤 구현되었습니다. 드래그 앤 드롭은 고장 났고, 데이터베이스가 제대로 저장되지 않았어요. 어디서부터 고쳐야 할지 전혀 감이 안 잡혔습니다.
제가 했어야 할 일:
한 번에 하나의 기능씩 만들기. 이것이 바이브 코딩의 황금률입니다.
처음부터 다시 시작해서 이 순서를 따랐습니다:
세션 1: 기본 페이지 레이아웃만. 7개의 열. 기능 없음.
세션 2: 게시물 생성 기능 추가 (간단한 폼만).
세션 3: 저장된 게시물을 올바른 요일 열에 표시.
세션 4: 드래그 앤 드롭 기능 추가.
세션 5: 상태 기능 추가 (초안/예약됨/게시됨).
세션 6: 디자인을 예쁘게 꾸미기.
각 기능마다 별도의 대화를 가졌습니다. 새로운 컨텍스트. 명확한 작업. 깔끔한 결과.
한 번에 하나씩 만들면 모든 기능이 완벽하게 작동했습니다. 한 번에 모든 것을 만들려고 하면 아무 것도 작동하지 않았어요.
교훈: 하나의 기능에 하나의 대화. 동일한 Claude Code 세션에서 여러 기능을 절대 섞지 마라.
실수 #3: CLAUDE.md 파일을 만들지 않은 것
토요일 오후, 기본 레이아웃이 작동해서 신나 있었지만 계속 같은 문제에 부딪혔습니다:
Claude가 불필요한 복잡성을 계속 추가했어요. 단순한 try-catch만 원했는데 정교한 오류 처리 시스템을 만들더군요. 깔끔한 전환만 원했는데 애니메이션 라이브러리를 추가했습니다. 사소한 변경 하나 부탁했는데 전체 폴더 시스템을 재구성하더라고요.
똑같은 것들을 계속해서 수정해야 했습니다.
그때 CLAUDE.md에 관한 글을 읽었던 게 기억났어요.
프로젝트 루트에 파일을 만들었습니다:
CLAUDE.md
프로젝트 규칙
- 이것은 간단한 콘텐츠 캘린더입니다. 모든 것을 최소한으로 유지하세요.
- Next.js 14와 App Router를 사용하세요.
- 모든 스타일링은 Tailwind CSS를 사용하세요. 다른 CSS 프레임워크는 사용하지 마세요.
- 데이터베이스는 SQLite와 Prisma ORM을 사용하세요.
- 간결하게 유지하세요. 불필요한 추상화나 디자인 패턴은 사용하지 마세요.
- "디자인을 예쁘게 해줘"라고 말할 때는 깔끔한 간격, 가독성 좋은 폰트, 미묘한 호버 효과, 둥근 모서리를 의미합니다.
- 내 허락 없이 새 의존성을 추가하지 마세요.
- 기존 코드를 리팩토링하기 전에 먼저 물어보세요.
코드 스타일
- 간단하고 읽기 쉬운 코드. 초보자도 이해할 수 있어야 합니다.
- 명확한 변수명. 약어는 사용하지 마세요.
- 명확하지 않은 로직에만 주석을 답니다.
이 파일을 만든 후 경험이 극적으로 달라졌습니다. Claude가 과도한 설계를 중단했어요. 임의의 라이브러리를 추가하지 않았고, 건드리지 말라고 한 부분을 재구성하지도 않았습니다.
Claude가 내가 원하지 않는 행동을 할 때마다 CLAUDE.md에 새 규칙을 추가했습니다. 일요일 밤이 되자 이 파일에는 30개 이상의 규칙이 있었고, Claude는 그 모든 것을 완벽히 따르고 있었어요.
교훈: 첫날에 CLAUDE.md를 만들고, 끊임없이 업데이트하라. 이것이 Claude Code에서 가장 강력한 도구다.
실수 #4: 스크린샷을 사용하지 않은 것
토요일 저녁. 앱은 기능적으로 작동했지만 디자인이 지저분했어요. 이렇게 입력했습니다:
디자인을 더 모던하고 프로페셔널하게 만들어 줘
Claude가 이것저것 바꿨어요. 달라지긴 했는데 더 나아지진 않았고, 그냥 달라졌을 뿐이었습니다.
시각적인 문제를 말로 설명하려고 했던 거예요. 엄청나게 비효율적이었죠.
대신, 제가 마음에 드는 웹사이트 디자인의 스크린샷을 찍기 시작했습니다. 그것들을 Claude Code에 직접 붙여넣었어요:
[깔끔한 캘린더 UI 스크린샷]
내 캘린더가 이렇게 보였으면 좋겠어. 특히:
- 배경의 이 정확한 회색 톤
- 각 게시물을 위한 이 둥근 카드
- 요소 간의 이 간격
- 활성화된 요일이 파란색으로 강조되는 방식
Claude가 거의 완벽하게 디자인을 따라 만들었습니다. 첫 번째 시도에요.
그리고 뭔가 어색해 보일 때는, 말로 설명하는 대신 스크린샷을 찍고 문제 영역에 동그라미를 친 다음, 붙여넣고 "이 간격이 잘못됐어" 또는 "이 폰트가 너무 작아"라고 말했어요.
교훈: 시각적 피드백에는 말보다 스크린샷이 10배 더 효과적이다. 항상 이미지를 붙여넣어서 보고 있는 것을 설명하라.
일요일: 모든 것이 합쳐지다
일요일 아침이 되자 깔끔한 디자인, 드래그 앤 드롭, 영구 데이터, 작동하는 데이터베이스를 갖춘 앱이 완성되었습니다. 코드의 대부분을 이해하지 못한 채로 모든 것을 만든 거예요.
하지만 내 노트북 안에만 존재했죠. 배포할 시간이었습니다.
실수 #5: 배포를 두려워한 것
배포는 끔찍하게 들렸어요. 서버, 도메인, DNS, 설정 파일.
거의 멈출 뻔했어요. "로컬에서만 돌아가도 충분해"라고 거의 결정할 뻔했죠.
하지만 이를 악물고 Claude에게 물었습니다:
이 앱을 실제로 인터넷에 배포하고 싶어. 가장 쉽다고 들은 Vercel을 사용하려고 해. 정확한 단계를 알려줘.
Claude가 7단계를 알려줬어요:
- 코드를 GitHub에 푸시 (Claude가 Git 설정을 도와줌)
- Vercel에 가입 (무료)
- Vercel을 내 GitHub 저장소에 연결
- 데이터베이스를 위한 환경 변수 설정
- 배포 클릭
- 90초 대기
- 내 라이브 URL 받기
단계를 따랐습니다. 3분 후 앱이 라이브로 전환됐어요. 다섯 명에게 URL을 보냈습니다. 그들이 열어봤고, 잘 작동했어요.
교훈: 배포는 무섭지 않다. 그냥 체크리스트일 뿐이다. Claude가 모든 단계를 안내해 줄 것이다.
시작하기 전에 알았더라면 좋았을 12가지 규칙
이틀 동안 배운 모든 것을 규칙으로 압축했습니다:
규칙 1: 매번 Plan Mode로 시작하라. Shift + Tab. 만들기 전에 생각하라.
규칙 2: 하나의 기능에 하나의 대화. 새로운 컨텍스트가 더 좋은 컨텍스트다.
규칙 3: 첫날에 CLAUDE.md를 만들어라. 모든 수정이 영구적인 규칙이 된다.
규칙 4: 모든 시각적 문제에 스크린샷을 사용하라. 문제에 동그라미 치고 직접 붙여넣어라.
규칙 5: 가장 단순한 버전을 먼저 만들어라. 단순한 버전이 작동한 후에만 복잡성을 추가하라.
규칙 6: 원하는 것을 상세히 설명하라. 프롬프트가 구체적일수록 결과가 좋다. "로그인 페이지 만들어 줘"는 쓰레기를 만든다. "이메일과 비밀번호 필드, 아래에 '비밀번호 찾기' 링크, 파란색 제출 버튼, 성공 시 /dashboard로 리디렉션되는 로그인 페이지를 만들어 줘"는 정확히 원하는 것을 얻는다.
규칙 7: 대화가 길어지면 /compact를 사용하라. 컨텍스트가 가득 차면 Claude의 품질이 떨어진다.
규칙 8: 각 기능이 작동할 때마다 Git에 커밋하라. Claude가 도와줄 수 있다. 문제가 생기면 되돌릴 수 있다.
규칙 9: 뭔가 고장 나면 에러 메시지를 복사해서 Claude에 붙여넣어라. "고치기 전에 근본 원인을 진단해 줘"라고 말하라. Claude는 거의 항상 문제를 즉시 찾아낸다.
규칙 10: 모든 코드 줄을 이해하려고 하지 마라. 각 파일이 무엇을 하는지, 어떻게 연결되는지만 이해하라. 그것만으로도 Claude를 효과적으로 지시할 수 있다.
규칙 11: Claude가 같은 문제를 고치느라 반복적으로 갇히면, 멈춰라. 새 대화를 시작하고 관련 파일과 문제에 대한 명확한 설명만 붙여넣어라.
규칙 12: 완벽해지기 전에 배포하라. 버전 1은 아름다울 필요가 없다. 작동하기만 하면 된다. 버전 2에서 항상 더 좋게 만들 수 있다.
그 주말 이후로 내가 만든 것들
그게 3주 전입니다. 그 이후로 저는 다음을 만들었습니다:
- 로그인과 파일 업로드 기능이 있는 클라이언트 온보딩 포털
- 내 콘텐츠 지표를 추적하는 내부 대시보드
- 폼에서 PDF 인보이스를 생성하는 간단한 청구서 생성기
- 링크를 주제별로 저장하고 정리하는 북마크 관리자
여전히 대부분의 코드를 읽을 수 없습니다. 파일 안에서 무슨 일이 일어나고 있는지 80%는 이해하지 못해요. 하지만 Claude가 만들 수 있도록 원하는 것을 명확히 설명할 수 있습니다. Claude에게 에러를 보여줌으로써 문제를 디버깅할 수 있습니다. 작동하는 제품을 인터넷에 배포할 수 있습니다.
그게 바로 '바이브 코딩'입니다. 당신은 프로그래머가 아닙니다. 당신은 제품 관리자입니다. Claude가 프로그래머예요. 당신의 일은 무엇을 만들지 알고 그것을 명확히 전달하는 것입니다.
대부분의 사람들은 계속해서 자신에게 말할 겁니다. 뭔가를 만들려면 먼저 코딩을 배워야 한다고.
이번 주말에 터미널을 여는 사람들은 월요일 아침까지 작동하는 앱을 갖게 될 겁니다. 제가 아는 이유는 그것이 바로 저에게 일어난 일이기 때문입니다.
팔로우 @eng_khairallah1 인공지능 강좌, 도구, 워크플로우 등 더 많은 내용을 확인하세요. 매주 새 콘텐츠가 업데이트됩니다.
도움이 되었길 바랍니다, Khairallah ❤️
