매일 바이브코딩

지금까지 만든 앱들은 데이터를 저장하고 불러오는 기록의 도구였다. 이번에는 한 단계 더 나아간다. 앱이 스스로 생각하고 글을 쓰게 만드는 것이다. 바로 OpenAI의 API를 연동해서 내 브랜드 전용 AI 카피라이터를 만드는 프로젝트다. 회사를 운영하다 보면 가장 귀찮은 게 인스타그램 캡션 쓰기나 상세페이지 문구 작성이다. 챗GPT한테 시켜도 되지만, 매번 "너는 감성적인 브랜드 마케터야. 톤앤매너는 차분하게"라고 프롬프트를 치는 것도 일이다. 오늘은 클릭 한 번으로 우리 브랜드 톤에 딱 맞는 마케팅 문구를 뽑아주는 나만의 앱을 만든다. 이 기술을 익히면 요즘 유행하는 AI 서비스(SaaS)를 직접 만들 수 있다.1. 챗GPT랑 뭐가 다를까그냥 챗GPT 쓰면 되지 않냐고 할 수 있겠지만 챗GPT는 범용적..

지금까지 만든 앱들은 모두 Firebase에 직접 데이터를 넣고 꺼내는 방식이었다. 이번에는 다른 걸 해본다. 인터넷에 이미 존재하는 데이터를 가져와서 보여주는 앱을 만든다. 이걸 외부 API를 사용한다고 표현한다. 회사를 운영하다 보면 환율을 확인할 일이 자주 있다. 해외 거래처가 있거나 해외에서 원자재를 수입하거나 해외 솔루션을 쓰고 있으면 달러 환율에 따라 비용이 달라진다. 매번 네이버에서 검색하는 것보다 내가 자주 보는 통화만 모아서 한눈에 보고 금액을 바로 계산할 수 있으면 편하다.1. API가 뭔데API는 쉽게 말해서 데이터를 주고받는 창구다. 은행 창구에 가서 오늘 달러 환율 알려주세요 라고 하면 직원이 알려주듯이 환율 API에 요청을 보내면 현재 환율 데이터를 돌려준다. 다만 사람이 아니라..

바이브 코딩을 하면서 가장 답답한 순간은 AI가 내 말을 듣긴 하는데 자꾸 엉뚱한 방향으로 가는 것이다. 한국어로 답변하라고 했는데 영어가 섞여 나온다거나 새 기능을 추가해달라고 했더니 기존 코드 구조를 바꿔버린다. 파일을 나눠달라고 했는데 하나의 파일에 다 때려 넣는다. 매번 같은 말을 반복하는 건 시간 낭비다. 커서에는 이 문제를 해결하는 기능이 있다. 바로 Rules 파일이다. AI에게 프로젝트의 규칙을 미리 알려주는 설명서 같은 것이다. 한 번 만들어 두면 매번 말하지 않아도 AI가 규칙을 따른다.1. Rules 파일이란Rules 파일은 프로젝트 폴더에 넣어두는 텍스트 파일이다. AI가 코드를 작성하거나 수정할 때 이 파일을 자동으로 참조한다. 마치 신입 직원에게 주는 업무 매뉴얼과 비슷하다. 우..

지난 편에서 로그인과 역할 분기까지 만들었다. 이번 편에서는 진짜 핵심인 출퇴근 기록 기능과 관리자 대시보드를 만들고 배포까지 마무리한다. 이번 편은 캡쳐 없이 빠르게 과정 설명으로만 진행하겠다. 1. 직원 화면 - 출퇴근 버튼 만들기직원이 로그인하면 보이는 메인 화면에 출근 버튼과 퇴근 버튼을 넣는다. 커서에 이렇게 요청한다. 직원 메인 페이지에 출퇴근 기능을 만들어줘. 화면 구성은 이렇게 해줘.상단에 오늘 날짜와 현재 시간을 실시간으로 표시큰 출근 버튼과 퇴근 버튼출근 버튼을 누르면 현재 시간이 Firebase에 저장되고 버튼이 비활성화돼퇴근 버튼은 출근을 찍은 후에만 활성화돼오늘 이미 출근했다면 출근 시간을 보여주고 출근 버튼은 비활성화해줘하단에 이번 주 내 출퇴근 기록을 테이블로 보여줘요청이 꽤 ..

메모 앱을 만들어 봤으니 이제 좀 더 실용적인 걸 만들어 보자. 이번에 만들 건 직원 출퇴근 관리 앱이다. 내가 바이브 코딩을 시작한 계기가 업무에 필요한 기능을 만들고 싶어서였는데 출퇴근 관리는 소규모 회사에서 항상 애매한 영역이다. 엑셀로 관리하자니 귀찮고 전문 솔루션을 쓰자니 비용이 부담스럽다. 이런 틈새를 바이브 코딩으로 채울 수 있다. 이 프로젝트는 메모 앱보다 복잡하기 때문에 두 편에 걸쳐 진행한다. 이번 편에서는 기획과 로그인 기능까지 만들고 다음 편에서 출퇴근 기록과 관리자 화면을 만든다.1. 만들기 전에 기획부터메모 앱 때는 바로 AI에게 만들어달라고 했지만 좀 더 복잡한 앱은 기획이 먼저다. 기획이라고 해서 거창한 게 아니다. 누가 쓰는지 어떤 기능이 필요한지 화면이 몇 개인지 정리하는..

바이브 코딩을 시작하면 바로 부딪히는 질문이 있다. 클로드를 쓸까 GPT를 쓸까 제미나이를 쓸까. 커서를 열면 모델 선택 드롭다운이 보이는데 거기에 클로드 소넷이니 GPT-4o니 제미나이 프로니 온갖 이름이 쭉 나열되어 있다. 처음에는 뭐가 다른지도 모르겠고 그냥 기본값으로 쓰게 되는데 모델 선택이 바이브 코딩의 결과물에 생각보다 큰 영향을 미친다. 직접 이것저것 써보고 느낀 차이를 정리해 본다.1. 핵심 차이 요약일단 2026년 초 기준으로 바이브 코딩에서 가장 많이 쓰이는 모델은 크게 셋이다. 앤트로픽의 클로드(Claude), OpenAI의 GPT, 구글의 제미나이(Gemini). 클로드는 지시를 잘 따른다. 이 파일은 건드리지 마 라고 하면 진짜 안 건드린다. 코드 구조를 깔끔하게 짜는 편이고 긴 ..

오늘도 커서(Cursor) 깎는 노인처럼 프롬프트 창만 바라보고 있는 여러분을 위해 깃허브를 뒤지다가 발견한 보물 같은 글 하나를 가져왔다. 바이브 코딩으로 앱 30개를 출시하고 실제 돈을 벌고 있는 고수의 노하우다. 이 사람은 콜롬비아 대학에서 ML(머신러닝)을 전공한 찐 개발자 출신인데도 처음 바이브 코딩을 할 때는 우리처럼 디버깅 지옥을 맛봤다고 한다. 코딩이 마법 같다가도 몇시간 동안 에러만 잡고 있는 그 허무함 모두 겪어봤을 것이다. 이 고수가 30번 넘게 앱을 찍어내면서 정립한 AI가 내 코드를 망치지 않게 관리하는 5가지 원칙을 풀어서 정리했다. 이건 진짜 꿀팁이니 꼭 적용해 보자.1. 직원 교육 매뉴얼을 실시간으로 업데이트하라 (Self-updating rules)우리가 직원을 채용하면 수..

Firebase와 Netlify 설정까지 끝냈다면 이제 진짜 앱을 만들 차례다. 환경은 다 깔았는데 정작 뭘 만들지 고민하는 사람이 많을 텐데 처음에는 욕심을 버리고 아주 단순한 것부터 시작하는 게 좋다. 그래서 오늘은 메모 앱을 만든다. 메모를 쓰고 저장하고 삭제하는 것. 이 세 가지면 끝이다. 왜 하필 메모 앱이냐면 이게 가장 기본적인 CRUD이기 때문이다. CRUD는 Create(만들기), Read(읽기), Update(수정하기), Delete(삭제하기)의 약자로 세상 거의 모든 앱이 이 네 가지 동작의 조합이다. 회사 관리 시스템도 쇼핑몰도 SNS도 결국 데이터를 만들고 보여주고 고치고 지우는 것이다. 메모 앱 하나를 제대로 만들면 이 구조가 손에 익고 다음 프로젝트가 훨씬 수월해진다.1. 커서에..

바이브 코딩을 하다 보면 API 키라는 걸 자주 만나게 된다. 요즘 스레드나 x에서도 바이브코딩 보안 관련된 글들이 심심치않게 보이는 관계로 관련글을 작성해본다. API 키는 Firebase 설정할 때도 나오고 Netlify 연결할 때도 나오고 외부 서비스를 붙일 때마다 등장한다. 오늘은 비개발자도 반드시 알아야 하는 API 키 관리법을 정리한다. 지루하게 느껴질 수 있지만 이거 모르면 진짜 사고다.1. API 키가 뭔데 왜 중요한가API 키는 내 서비스가 외부 서비스에 접속할 때 쓰는 비밀번호 같은 것이다. Firebase에 데이터를 읽고 쓸 때 내가 이 프로젝트의 주인이라고 증명하는 열쇠다. 이 열쇠가 다른 사람 손에 들어가면 어떻게 될까. 누군가 내 Firebase 프로젝트에 접속해서 데이터를 마음..

바이브 코딩 관련 글이나 영상을 보다 보면 요즘 MCP라는 단어가 자주 등장한다. 처음에는 그냥 또 하나의 IT 약자겠거니 하고 넘겼는데 커서 업데이트 노트에도 나오고 클로드 관련 뉴스에도 나오고 심지어 트위터에서 개발자들이 이거 안 쓰면 손해라는 말까지 하길래 제대로 알아봤다. 결론부터 말하면 MCP는 바이브 코딩의 다음 단계라고 부를 만한 것이었다.1. MCP가 뭔데MCP는 Model Context Protocol의 약자다. 직역하면 모델 맥락 프로토콜인데 이러면 무슨 소리인지 하나도 모르겠으니까 쉽게 풀어보자. 지금까지 AI에게 코딩을 시킬 때 우리가 하는 건 기본적으로 채팅이다. 텍스트로 요청하고 텍스트로 코드를 받는다. 그런데 AI가 내 프로젝트의 파일을 직접 읽거나 외부 서비스에 직접 접근할 ..