바이브 코딩
코딩을 AI에게 맡겨 앱과 서비스를 만든 사례예요.
이 주제의 연재
- Claude Code 설치부터 첫 페이지까지 (2편)
- 바이브 코딩으로 서비스 만들고 운영하기 (1편)
- 한 번 만든 작업을 명령어와 스킬로 (3편)
- 비개발자 개발 환경 설정 (1편)
- AI 온보딩: 첫 배포와 업무 도구 (5편)
- AI Studio 앱 만들기 (3편)
- Codex 앱 첫 업무와 프로젝트 (1편)
- Cursor로 첫 크롬 확장 프로그램 (1편)
- Streamlit으로 첫 실용 웹앱 만들기 (2편)
- 바이브 코딩 게임 제작실 (1편)
- 앱스 스크립트로 데이터 웹앱 만들기 (1편)
- 주 1회 AI 프로젝트 빌드 (4편)
- 혼자 만드는 서비스: 기획부터 핵심 기능 (2편)
- AI 서비스 아이디어를 시제품으로 (2편)
- Claude Code 실전 프로젝트 (3편)
- Claude Code 업무 활용 (4편)
- Cursor 데이터 자동화 개발 (2편)
- Lovable로 핵심 기능 웹앱 만들기 (1편)
- Python 업무 자동화 코딩 (1편)
- 데이터 수집과 대시보드 (2편)
- ChatGPT 앱 개발과 출시 (1편)
- Claude Code 개발 체계 심화 (5편)
- Rails로 화면부터 서버까지 만들기 (2편)
최근 글
- 그림 못 그리는 개발자가 AI로 게임 아트 파이프라인을 끝까지 만든 이야기 — GPT Image → Meshy AI → Mixamo → Godot — 씩씩한 사서 ·
들어가며 — 코드는 되는데 아트에서 막힌다 Claude Code로 게임 로직은 얼마든지 만들 수 있는 시대다. 카드 시스템, 전투 엔진, 절차 생성 월드맵까지 — 혼자서도 코드가 막히는 일은 거의 없었다. 진짜 벽은 아트였다. 시작 시점의 게임은 이… - 카톡 정리 방법: AI로 3분 만에 엑셀로 정리하기 — 바다 ·
AI로 카톡 링크 3분 만에 엑셀로 정리하기 한줄 요약 평소 '나에게 카톡'으로 던져놓기만 하던 인스타 릴스, 세미나 안내, 업무 파일 링크들을 Claude와 함께 카테고리별 엑셀표로 정리하고, 이미 끝난 세미나 안내까지 걸러냈어요. 문제 상황 저는… - [AI 에이전트 2대 + Claude Code] 주식 대시보드, 코드보다 먼저 만든 건 '질문 목록'이었습니다 — 무료 API 6곳을 직접 호출해 본 이틀 — 녹차 ·
[AI 에이전트 2대 + Claude Code] 주식 대시보드, 코드보다 먼저 만든 건 '질문 목록'이었습니다 — 무료 API 6곳을 직접 호출해 본 이틀 1. 시작하자마자 "네가 나한테 질문해" 라고 못 박았습니다 보통은 AI한테 "주식 대시보드… - 엑셀 검사기를 만들다가, 엑셀을 버렸다 — 기성청구서 자동화 방향을 바꾼 이야기 — 보더 ·
소개 건설회사를 운영하고 있습니다. 저희 현장에서 매달 나가는 서류 중에 기성청구서가 있습니다. 항목이 많습니다 — 외주비, 자재비, 노무비, 장비비, 경비, 현장관리비. 그리고 금액이 틀리면 바로 문제가 됩니다. 그런데 매번 사람이 검산합니다. 시… - 드디어 첫글. 코딩 하나도 모르는데, 하루 만에 내 학습허브 사이트를 인터넷에 올렸다 — 보더 ·
소개 저는 건설회사를 운영하는 CEO입니다. 현장은 매일 반복되는 업무가 많은데, 특히 서류가 그렇습니다. 세금계산서·거래명세표 같은 정형 서류, 기성청구서 첨부서류, 카톡으로 올라오는 작업 내용 정리까지. 이걸 AI로 자동화하고 싶어서 이 스터디에… - 코딩 초보도 가능했다! 코덱스로 네이버 블로그 글쓰기 자동화에 도전한 후기 — 런타임 ·
가장 신기했던 점 이전에는 블로그 글 하나를 올리기 위해 제가 직접 내용을 정리하고 타이핑한 후, 사진까지 준비해야 했습니다. 글을 쓰는 것뿐만 아니라 네이버 블로그에 접속해서 내용을 옮기고 이미지를 배치하는 작업에도 시간이 필요했습니다. 그런데 코… - 데이터 수집 가이드: 서울 아파트 매매부터 API 활용까지 — 반짝이는 고양이 ·
데이터 수집 목표 데이터·투자·재테크 스터디 1주차 실습을 따라, 서울 아파트 매매/전월세 실거래가(국토교통부 API), KB통계(아파트 가격지수), 주식/지수 데이터(삼성전자 등 대표 종목 + KOSPI/KOSDAQ)를 각각 API로 수집해서 로컬… - 로드맵을 다시 짜고, 드디어 진짜 배포까지 한 날 — Nia ·
오늘 한 것 로드맵을 책 중심에서 B2B 잠재고객 발굴 에이전트로 완전히 새로 짰다. 콜드 이메일 초안 자동 작성 기능도 추가했다. 그 내용으로 랜딩페이지도 다시 채웠다. GitHub·Vercel 가입 방법을 안내받았다. 필요한 도구(Git·GitH… - 비개발자가 15분 만에 GitHub와 Vercel로 웹사이트를 인터넷에 올리기 — 물음표 ·
1단계: GitHub 가입 및 저장소 만들기 1️⃣ GitHub 가입 https://github.com 방문 → Sign up 클릭 이메일, 비밀번호, 사용자명 입력 이메일 인증 완료 2️⃣ 새 저장소(Repository) 만들기 GitHub 로그인… - 코딩 모르는 자동화 담당자가 이틀 만에 상담센터 행정 웹앱을 배포했어요 (바우처 웹앱 1편) — 중요한 건 코딩이 아니라 실무진의 일을 번역하는 것 — 마루 ·
상담센터 바우처 행정 웹앱 구축기 — 실무진과 실시간으로 핑퐁하면서, 가짜 데이터 프로토타입 5단계 → 진짜 DB 전환 → 배포까지 1️⃣ 첫날은 코딩 대신 규칙만 세웠어요 바로 "만들어줘" 하고 싶은 걸 참고, 첫날은 워크스페이스에 규칙 문서(CL… - [Claude Code] 챗봇처럼 쓰던 Claude Code, '한 팀처럼' 일하게 만든 후기 — 초보 작가 ·
📝 한줄 요약 AI 코딩 도구를 그냥 "챗봇"처럼 묻고 답하는 용도로만 쓰다가, PM 한 명 + 전문 에이전트 6명이 단계별로 협업하는 멀티에이전트 하네스로 바꿨더니 반복 수정 요청이 확 줄고 답변 품질이 눈에 띄게 좋아졌습니다. 바쁘시면 이것만… - [Claude Code] 스킬 22개, WS 8개 — 이제는 '지식 자산'으로 관리한다. — 프롬프터 ·
1단계: 앞서 공유받은 것과 새로 공유받은 레퍼런스, 다시 같이 해부하다 Clauders-cc-main(1주차 공유)과 workspace-standards v2(이번 주 추가 공유)를 나란히 놓고 함께 분석했습니다. 같이 보니 두 레퍼런스가 서로 다… - [Claude Code] GitHub 주소 하나 줬더니 카드뉴스가 뚝딱 — 환경 설정부터 PRD 작성까지 — 차분한 여행자 ·
1. 내가 일하는 방식을 Claude Code에게 알려주기 — 환경 세팅 처음 해야 할 일은 "Claude Code가 내 의도대로 일하게 만드는 장치"를 설계하는 것이었습니다. 스터디에서 이걸 하네스 엔지니어링이라고 불렀는데, 처음 들으면 낯선 말이… - 스터디장 워크스페이스 해부하다 — 하네스 엔지니어링으로 한 단계 올라간 이야기 — 프롬프터 ·
세 워크스페이스 시스템 구성 비교 본업 워크스페이스와 스터디장 워크스페이스가 어떻게 다른지 먼저 보여드리는 게 이 글의 핵심을 이해하는 데 훨씬 도움이 될 것 같아서, 두 시스템의 구성을 먼저 비교해봤습니다. 본업 워크스페이스 구성 제가 현재 운영… - 테스트로 만든 건 버리고, 진짜 돈 벌 서비스로 다시 만들기! PRD·디자인·시장조사·구현까지 — 복숭아 ·
효과적이었던 것 대충 던지지 말고 PRD부터 — 같은 AI, 같은 도메인이어도 PRD 유무로 결과물이 완전히 달라진다. 운빨연구소는 "사주 앱 만들어줘"로 시작했고, 운명연구소는 700줄 PRD로 시작했다. 클로드 채팅에서 PRD를 "같이 만들어가기… - Thinking Partner로 서비스 정의 뒤집은 과정, 아직 다음 단계를 못했지만 우선 쓰는 글 — 엉뚱한 사슴 ·
📝 한줄 요약 사업계획서를 다 써놨는데 마음에 안 들었다. Claude와 대화로 점검하면서 서비스 정의를 "관계 정리 도구"에서 "잘 맞는 사람을 찾아 친해지게 하는 앱"으로 바꾸고, 기획에서 빠진 핵심 모먼트를 찾아냈다. 바쁘시면 이것만 읽어도… - Claude Code를 활용하여 Slack·Google Calendar 기반 업무 보고 커스텀 스킬을 개발한 사례 — 화음 ·
1️⃣ 문제 인식 — 취합에만 30분이 사라진다 매주 주간업무 보고를 작성하면서 느낀 가장 큰 불편함은 내용이 여러 채널에 흩어져 있다는 점이었습니다. Slack 메시지, 캘린더 일정, DM 스레드를 일일이 열어 복사·붙여넣기 하는 과정이 반복되었고… - 도메인을 모르는 AI에게 도메인을 가르치는 도구를 만들었다 — 책갈피 ·
AI가 스스로 도메인을 조사하고, 자기가 따를 워크플로우 파이프라인을 설계하고, 그대로 실행해서 결과물까지 만들어내는 Claude Code 스킬 - meta-pipe를 만든 이야기입니다. 스킬 구조: 2-tier 지연 로딩 리서치 중 AWS AI-D… - 영상 번역, AI로 완전 자동화한 이야기 — 천혜향 ·
구글 문서 공유 한 번이면 자막 추출부터 번역, 문서 작성, 이메일 알림까지 완전 자동화 구현 완성된 프로그램 소개 페이지 🌱상황🌱 교회 번역팀에서 매주 YouTube Shorts 영상의 한국어 자막을 영어로 번역하는 일을 새롭게 담당했다. 문제… - 터미널이 낯선 초보자의 클로드 코드 설치 및 사이트 디버깅 도전기 — 필라테스 ·
소개 시도 배경 최근 코딩 지식이 부족해도 인공지능의 도움을 받아 서비스를 만드는 바이브 코딩에 관심이 생겼습니다. 그중에서도 터미널 환경에서 강력한 성능을 발휘한다는 클로드 코드를 직접 사용해보고 싶었습니다. 단순히 웹에서 대화하는 수준을 넘어 내… - 오프모임 후기 : AI는 기능이 아니라 운영 시스템이다 — 한밤의 화가 ·
소개 오프라인 모임에 가기 전, 저는 이미 하나의 문제를 계속 느끼고 있었습니다. AI가 편해질수록, 사람과 협업하는 일이 오히려 비용처럼 느껴졌습니다 커뮤니케이션이 늘어날수록 속도는 느려지고, 병목이 생겼습니다 결국 중요한 일은 제가 혼자 처리하게… - git이 뭔지 이해하기 — Mona ·
재엽님이 실습하신거에 내용을 추가하면서 제가 아는 것 까지 넣어서 길어졌습니다 이해가 안 되시면 여러번 읽고 실습도 해보세요 # Git 가이드 ## 1. Git이란? Git은 **분산 버전 관리 시스템(DVCS)**이다. 파일의 변경 이력을 추적하고… - 랜딩페이지 자동 생성기 만들기 ver1 — 엉뚱한 기록가 ·
1. "한 에이전트에게 다 시키면 되지 않을까?" 처음에는 하나의 프롬프트로 "리서치부터 코드까지 다 해줘"를 시도했습니다. 결과: 처참했습니다. 리서치는 피상적이고, 카피는 밋밋하고, 디자인은 일관성이 없고, 코드는 기본 템플릿 수준이었습니다. A… - Claude Code 프롬프트 실험 (4/4) — 세 결과 비교, 그리고 결론 — 차분한 메이커 ·
투입 조건 항목 1편 2편 3편 자기검증 꺼둠 켜둠 켜둠 사용자 피드백 없음 계획 단계 1회 없음 스킬 에이전트 없음 없음 커스텀 2개 제작 총 소요시간 ~17분 ~50분 ~2시간 20분 사용자 프롬프트 수 3개 7개+ 11개 기술적 결과 항목 1편… - (구글 AI 스튜디오 활용) 국어 비문학 공부 사이트 만들어보기, 구구단 연습 사이트 만들어보기 — 산뜻한 여우 ·
소개 (구글 AI 스튜디오 활용) 국어 비문학 공부 사이트 만들어보기, 구구단 연습 사이트 만들어보기 진행 방법 구글 AI 스튜디오 PRD 생성 사이트를 활용하여 제작했습니다. 단톡방 놀러오시면 PRD 생성 링크를 받으실 수 있어요 Tip: 첫 시작… - 구글AI스튜디오 로 시험 암기를 돕는 앱, Memory Mate 만들기 — 킥보드 ·
기대 이상이었던 점 😮 단순히 요약만 해줄 줄 알았는데, "이렇게 외우면 더 잘 외워질 수 있겠다" 싶은 다양한 아이디어를 AI로부터 얻을 수 있었습니다. 암기 문장을 소리로 들으니 눈으로 볼 때보다 기억에 오래 남는 느낌이 들었어요. 아쉬웠던 점… - 비개발자의 첫 Claude Code 프로젝트: 호흡법 웹페이지 제작기 — 상냥한 산책가 ·
1단계: Gemini로 첫 시도 처음에는 Gemini(제미나이)를 통해 박스 브리딩 웹앱의 기초 코드를 만들어 보았습니다. 코드는 생성되었지만, 이를 실제로 웹에 게시하고 완성도를 높이는 작업이 막막했습니다. 2단계: Claude Code로 프로젝트… - 개발 시작 전 30분 투자로 프로젝트 막막함을 없앤 방법 — 컴파일 ·
PRD를 Claude에게 건네다 PRD 문서를 작성해둔 상태였습니다. Next.js 기반 웹 서비스로, 사용자가 원하는 주제를 입력하면 AI가 자동으로 리서치해서 맞춤형 뉴스레터를 생성하는 서비스였습니다. 하지만 PRD가 너무 길어서 "어디서부터 시… - Google AI Studio – Build 연동 가능 DB (초보자용) 🍀🧸 — 소심한 펭귄 ·
💡 결과 : DB 비교표 난이도(Lv) 서비스 명칭 한 줄 요약 연결 구조 (어떻게 작동해?) 초기 설정 (어떻게 준비해?) 사용 시 장점 & 리스크 Lv1 Google Sheets 가장 빠른 검증용 표 DB 앱 ↔ Apps Script(웹앱/AP… - 깃허브 저장소로 클로드코드 커맨드 관리하기 — 조용한 작가 ·
나는 그저 여러 컴퓨터에서 같은 커맨드를 쓰고 싶었다 Claude Code를 쓰다 보면 자주 쓰는 작업을 커맨드로 만들게 된다. /cleanup-ui처럼 UI 코드 정리하는 커맨드, /commit 같은 git 워크플로우 커맨드 등이 그렇다. 이런 커…