바이브코딩 기초
바이브코딩을 시작하면 코드를 직접 안 짜더라도 낯선 용어부터 마주칩니다. 터미널, 배포, 깃허브, 데이터베이스처럼 흐름을 이해하는 데 꼭 필요한 개념을 입문자 눈높이로 풀어낸 글을 모았습니다.
API 키는 Git에 넣으면 안 되는데 Vercel에는 왜 넣어도 될까요?
비밀 API 키를 Git에 넣으면 프로젝트 기록과 함께 복제되지만, Vercel 환경변수에 넣으면 프로젝트 파일과 분리해 암호화하여 보관할 수 있어요. 바이브코딩 입문자도 이해할 수 있게 두 방식의 차이를 설명합니다.
클로드코드 명령어 정리: 처음에 익힐 슬래시 커맨드
클로드코드 슬래시 명령어를 상황별로 정리합니다. /clear·/compact·/plan·/rewind·/code-review처럼 처음 익힐 명령과 쓰는 순간을 설명합니다.
AI 챗봇을 만들려면 프롬프트 엔지니어링을 알아야 합니다
바이브코딩으로 챗봇 화면과 AI 연결은 금방 만들 수 있습니다. 하지만 원하는 답변을 만들려면 시스템 프롬프트를 찾아 역할, 규칙과 좋은 답변 예시를 직접 다듬어야 해요.
클로드코드 사용량이 빨리 찬다면 오래된 대화를 이어가고 있진 않은지 확인하세요
클로드코드에서 오래 쉬었던 긴 대화를 재개하면 만료된 프롬프트 캐시를 다시 만들기 위해 첫 요청에서 전체 기록을 처리할 수 있어요. 새 작업은 새 대화로 시작하고, 같은 작업을 이어갈 때는 요약으로 재개하면 이후 사용량을 줄일 수 있습니다.
RLS 뜻: 데이터베이스의 ‘행 단위 보안’을 쉽게 설명하면
RLS는 Row Level Security의 약자로, 같은 데이터베이스 테이블에서도 사용자마다 조회·추가·수정·삭제할 수 있는 행을 다르게 만드는 보안 기능이에요. 로그인은 사용자가 누구인지 확인하고 RLS는 그 사용자가 접근할 데이터를 정합니다.
클로드코드 5시간 한도, 컨텍스트 윈도우와 뭐가 다른가
5시간 한도는 계정이 일정 시간 동안 쓸 수 있는 사용량 예산이고, 컨텍스트 윈도우는 지금 대화가 참고하는 정보의 범위예요. /clear로 대화를 비워도 사용량은 돌아오지 않고, 한도가 초기화돼도 대화 내용은 그대로 남습니다.
원데이 클래스도 있는데, 바이브코딩을 4주나 배워야 하나요?
바이브코딩을 빠르게 체험하려면 원데이 클래스로 충분할 수 있습니다. 자기 프로젝트를 완성하고 오류 확인과 배포까지 반복해 수료 후에도 혼자 만들고 싶다면 4주 과정이 더 맞습니다.
바이브코딩 프로젝트가 중간에 꼬이는 이유: 처음부터 너무 많이 만들고 있습니다
바이브코딩 프로젝트가 중간에 꼬이는 가장 흔한 이유는 AI가 만들 수 있는 기능을 첫 버전에 모두 넣기 때문이에요. 사용자의 핵심 행동 하나가 처음부터 끝까지 작동하도록 범위를 줄이고 나머지는 나중 목록으로 옮기되 개인정보와 필수 보안은 빼지 마세요.
클로드코드 /clear와 /compact, 언제 무엇을 쓰나
클로드코드(Claude Code)의 /clear는 이전 대화를 현재 컨텍스트에서 비우고 새 작업을 시작하는 명령이고, /compact는 앞선 내용을 요약해 같은 긴 작업을 이어가는 명령입니다. 기능이 끝나 다른 작업으로 넘어가면 /clear, 앞선 결정이 계속 필요하면 /compact를 사용하세요.
CLAUDE.md란? 클로드코드가 프로젝트 규칙을 기억하는 방법
CLAUDE.md는 클로드코드가 새 세션마다 읽는 프로젝트 업무 설명서예요. 코드에서 찾기 어려운 구조·검증 명령·작업 규칙과 반복되는 실수를 짧고 구체적으로 적으면 같은 설명을 매번 입력하지 않아도 됩니다.
클로드코드 사용법: CLI, VS Code Extension, 데스크톱 앱은 뭐가 다른가요?
CLI, VS Code Extension과 데스크톱 앱의 Code 탭은 같은 클로드코드(Claude Code)를 여는 서로 다른 화면입니다. 처음이라면 데스크톱 앱, VS Code가 익숙하면 Extension, 터미널 기능과 자동화가 필요하면 CLI가 잘 맞습니다.
클로드코드로 무엇을 만들 수 있나요? 실제 수강생 프로젝트 6가지
첫 바이브코딩 프로젝트는 세상에 없던 아이디어보다 내가 이미 반복하고 결과를 판단할 수 있는 업무에서 찾는 편이 좋아요. 검색·가격 조사·사내 문서 질문·고객 관리·리포트처럼 입력과 결과가 분명한 흐름 하나를 작은 첫 버전으로 만드세요.
노코드와 바이브코딩의 차이, 자유도보다 책임의 범위가 다릅니다
노코드는 준비된 기능을 조합하고 운영 책임의 상당 부분을 플랫폼에 맡기는 방식입니다. 바이브코딩은 AI가 실제 코드를 작성하지만 구조·보안·배포를 만드는 사람이 더 많이 확인하므로, 빠른 검증은 노코드가, 고유한 업무 규칙 구현은 바이브코딩이 잘 맞습니다.
AI로 앱 만들기, 화면보다 먼저 끝까지 작동하는 흐름을 만드세요
AI로 앱을 만들 때는 화면 여러 개보다 사용자의 핵심 행동 하나가 화면·서버·데이터베이스·배포까지 이어지는 흐름을 먼저 완성하세요. 웹앱과 모바일 앱 중 배포 방식에 맞는 형태를 고르고 완료 조건과 증거로 실제 작동을 확인해야 합니다.
클로드코드 요금제, 처음이라면 Pro를 월간 구독하세요
클로드코드(Claude Code)를 처음 시작한다면 Pro 월간 구독을 권합니다. 실제 작업에서 사용량 한도에 반복해서 막힐 때만 Max를 검토하고, API 종량제는 비용을 직접 계산하고 제한할 수 있을 때 선택하는 편이 안전합니다.
바이브코딩 강의·강사 추천: 고르기 전에 볼 10가지
추천 목록을 훑기 전에 먼저 볼 것은 수료 후 혼자 무엇을 할 수 있게 되는지입니다. 공통 예제에서 내 프로젝트로 이어지는지, 강사가 막힌 화면과 오류를 함께 보는지, 배포 뒤 운영까지 다루는지 — 고르기 전에 확인할 열 가지를 정리했습니다.
바이브코딩 강의, 예제를 따라 만드는 수업과 내 프로젝트를 만드는 수업은 무엇이 다를까요?
예제를 따라 만드는 바이브코딩 수업은 도구와 전체 과정을 빠르게 경험하기 좋지만, 내 프로젝트를 만드는 수업은 범위·데이터·에러가 모두 다른 상황에서 판단하는 법을 익혀요. 수료 뒤 혼자 만들고 싶다면 완성 화면보다 문제를 나누고 검증하는 과정을 연습하는지 보세요.
바이브코딩에서 개발을 배운다는 건 논리 흐름을 이해하는 일입니다
바이브코딩에서 개발을 배운다는 것은 문법을 외우기보다 사용자의 행동이 화면·서버·데이터베이스·배포 환경을 거치는 논리 흐름을 이해하는 일이에요. 정상 순서를 적고 증거로 처음 끊긴 경계를 찾은 뒤 한 가지씩 고쳐 같은 행동으로 검증하세요.
오프라인 바이브코딩 강의는 무엇이 다른가요? 입문자가 막히는 순간을 함께 넘는 수업
오프라인 바이브코딩 강의의 차이는 같은 공간에 모이는 것보다 막힌 순간 화면과 로그를 함께 보며 해결하는 데 있습니다. 혼자 첫 오류에서 멈추기 쉽거나 자기 프로젝트에 맞춘 피드백이 필요하다면 오프라인 수업이 더 잘 맞습니다.
로그인 기능을 만들려면 무엇이 필요할까요? 회원가입·세션·권한 이해하기
로그인 기능은 버튼 하나가 아니라 계정 생성, 본인 확인, 세션 유지와 서버의 권한 검사가 함께 작동하는 흐름이에요. 소셜 로그인을 붙여도 사용자가 볼 수 있는 데이터와 할 수 있는 일은 서비스가 별도로 제한해야 합니다.
파일과 이미지는 데이터베이스에 저장하면 안 되나요?
이미지·영상·PDF 같은 파일 자체는 보통 파일 스토리지에 두고, 데이터베이스에는 파일 경로·소유자·형식·공개 여부를 저장해요. 공개 파일과 비공개 파일의 읽기·업로드·삭제 권한을 따로 설계하고 두 저장소가 어긋나는 실패도 처리해야 합니다.
바이브코딩으로 만든 앱, 한 달 운영비는 얼마나 들까요?
작은 웹 애플리케이션은 무료 구간에서 실험할 수 있지만, 첫 상용 서비스는 Vercel Pro와 Supabase Pro만으로도 2026년 7월 기준 약 $45의 월 고정비가 생길 수 있습니다. 여기에 도메인·결제 수수료·AI와 초과 사용량을 따로 계산해야 합니다.
바이브코딩으로 만든 웹앱, 공개하기 전에 무엇을 테스트해야 할까요?
웹앱 공개 전에는 성공 화면 한 번이 아니라 사용자의 시작부터 데이터 저장과 운영 확인까지 전체 흐름을 테스트해야 해요. 정상·잘못된 입력·중복 요청·실패·권한·새로고침·모바일을 실제 배포 환경에서 확인하고 출시 뒤 문제를 찾을 로그도 준비하세요.
관리자 페이지는 왜 필요할까요? 처음 만들 때 넣어야 할 기능
관리자 페이지는 운영자가 고객·주문·문의와 콘텐츠를 서비스 규칙 안에서 안전하게 처리하는 업무 화면이에요. 처음에는 매일 반복하는 목록·검색·상세·상태 변경부터 만들고 관리자 권한, 변경 이력과 위험 작업의 복구 수단을 함께 준비하세요.
서비스를 출시한 다음에는 무엇을 확인해야 할까요?
서비스 출시 뒤에는 방문자 수보다 사용자가 약속한 결과를 얻는 성공 행동을 먼저 정하세요. 유입부터 활성화·전환·유지까지 흐름을 보고 오류·최종 DB 결과·고객 피드백을 연결하면 다음에 고칠 한 지점을 선택할 수 있습니다.
AI가 버그를 계속 못 고친다면? 로그를 찍어보세요
AI가 같은 버그를 추측으로 계속 수정한다면 실행 흐름의 경계마다 로그를 남겨 처음 끊긴 지점을 찾으세요. 브라우저 Console, 로컬 서버 터미널과 배포 서비스 로그를 구분해 실제 기록을 AI에게 전달하면 원인 범위를 줄일 수 있습니다.
노란색은 경고, 빨간색은 오류: 바이브코딩 초보자의 신호등
노란색 Warning은 지금 작동하더라도 확인할 문제이고 빨간색 Error는 동작이 실패했다는 신호예요. 색만 없애달라고 하지 말고 문제가 난 행동·기대한 결과·처음 나온 전체 메시지를 AI에게 전달한 뒤 같은 행동으로 수정 결과를 검증하세요.
AI에게 다음에 뭘 시켜야 할지 모르겠다면?
바이브코딩에서 다음 기술 용어를 몰라도 프로젝트를 이어갈 수 있어요. 만든 기능을 직접 사용해 현재 상태, 원한 결과와 실제 결과의 차이를 설명하면 그 차이가 AI에게 맡길 다음 작업이 됩니다.
AI에게 똑같이 시켰는데 왜 결과가 다른가요?
AI는 같은 요청에도 항상 같은 답을 내지 않아요. 생성 과정의 비결정성뿐 아니라 앞선 대화, 읽은 파일, 설치된 패키지와 현재 코드 상태가 입력에 함께 영향을 주므로 결과가 달라집니다.
AI가 코드를 써주는데 프로그래밍을 왜 배워야 하나요?
AI가 코드를 대신 작성해도 화면·서버·데이터베이스와 실행 흐름 같은 프로그래밍 기초는 필요해요. 문법을 외우기 위해서가 아니라 AI가 고친 위치와 결과를 확인하고, 오류가 난 지점과 보안 위험을 스스로 좁히기 위해 배우는 거예요.
HTML 파일은 열면 되는데 웹앱은 왜 실행해야 하나요?
HTML 파일은 브라우저가 그대로 읽을 수 있지만 Next.js 같은 웹앱은 여러 파일과 패키지를 처리하고 서버 기능을 실행해야 해서 개발 서버가 필요해요. npm run dev는 코드를 브라우저가 사용할 형태로 만들고 localhost 주소에서 변경 결과를 보여줍니다.
GitHub 인증은 왜 필요한가요? 첫 push 전에 알아둘 것
GitHub 인증은 지금 사용하는 컴퓨터가 내 계정의 저장소에 접근해 push하거나 pull해도 되는지 확인하는 과정이에요. 브라우저 로그인·PAT·SSH 중 현재 도구가 지원하는 방식을 고르고 토큰과 개인 키는 비밀로 관리해야 합니다.
Git 시작하기: 이름과 이메일을 설정하는 이유
Git에서 처음 설정하는 이름과 이메일은 로그인 정보가 아니라 각 commit에 남는 작성자 정보예요. 처음 한 번 설정한 뒤 기록에 원하는 이름과 이메일이 들어가는지 확인하며, GitHub 접근 권한은 별도의 인증으로 처리합니다.
컨텍스트 윈도우란? AI의 작업대 이해하기
컨텍스트 윈도우는 AI가 한 번의 답변을 만들 때 참고할 수 있는 질문, 앞선 대화, 파일과 지침의 범위예요. 대화가 길어져 작업대가 복잡해지면 중요한 조건을 놓칠 수 있으므로 관련 정보만 남기고 작업이 바뀌면 새 대화를 시작하는 편이 좋아요.
Vercel 배포 주소를 내 도메인으로 바꾸는 방법 — DNS 연결 가이드
Vercel 배포 주소를 자체 도메인으로 바꾸려면 프로젝트에 도메인을 추가한 뒤 실제 DNS 관리 화면에 Vercel이 안내한 A·CNAME 레코드를 입력하면 됩니다. 프로젝트를 다시 만들거나 도메인을 Vercel로 이전할 필요는 없으며, DNS 전파와 HTTPS 발급이 끝나면 연결됩니다.
홈페이지 도메인은 꼭 사야 할까요? Vercel 주소와 자체 도메인의 차이
홈페이지를 배포하는 데 자체 도메인이 반드시 필요하지는 않아요. 프로토타입과 내부 도구는 Vercel 주소로 충분하지만, 고객에게 공개하고 오래 운영할 사업이라면 플랫폼이 바뀌어도 유지할 수 있는 짧은 자체 도메인을 일찍 정하는 편이 좋습니다.
메시지 매칭이란? 광고와 랜딩페이지를 연결하는 방법
메시지 매칭은 광고에서 부른 고객과 약속한 문제·해결책을 랜딩페이지의 첫 문장·근거·CTA까지 일관되게 이어주는 일이에요. 광고 문구를 그대로 복사하는 것이 아니라 방문자가 다시 해석하지 않아도 같은 제안임을 알아보게 만드는 것이 목적입니다.
로그가 뭐예요? 왜 필요한가요?
로그는 앱에서 일어난 일을 시간순으로 남긴 기록이고 로깅은 그 기록을 남기는 일이에요. 서버 오류는 Vercel 같은 배포 로그에서, 사용자 행동은 PostHog 같은 분석 도구에서 확인해 화면만으로 보이지 않는 문제의 조건과 원인을 찾을 수 있습니다.
코딩을 하나도 몰라도 바이브코딩을 할 수 있나요?
코딩 경험이 없어도 바이브코딩을 시작할 수 있습니다. 문법을 먼저 외울 필요는 없지만 화면·서버·데이터베이스가 이어지는 흐름과 AI가 만든 결과를 확인하는 방법은 만들면서 배워야 합니다.
CLI와 MCP는 뭐가 다른가요
CLI는 명령어로 프로그램을 다루는 방식이고, MCP는 AI가 외부 도구를 발견하고 호출하도록 연결하는 표준이에요. 현재 프로젝트에서 공식 명령을 실행하면 CLI가 간단하고, AI가 대화에 따라 여러 외부 기능을 반복해서 골라 써야 하면 MCP가 잘 맞습니다.
AI와 기능을 하나씩 만들라는데, 어디까지가 하나인가요?
바이브코딩에서 기능 하나는 화면 하나나 코드 한 줄이 아니라 사용자가 한 행동을 하고 결과를 확인할 수 있는 크기예요. 누가 무엇을 하고 어떤 결과를 보면 끝인지 적은 뒤 한 기능만 구현·검증하고 다음으로 넘어가세요.
PRD를 작성한 다음에는 무엇을 해야 하나요? 개발 계획으로 바꾸기
PRD를 작성한 뒤 전체 앱을 한꺼번에 구현하지 말고 핵심 사용자 흐름을 화면 상태·데이터·외부 서비스·작은 작업으로 나누세요. 선행 조건과 순서를 정하고 각 작업의 완료 기준을 사용자의 행동과 확인 방법으로 적은 문서가 개발 계획입니다.
바이브코딩을 시작하기 전에 클로드 스킬로 해결할 수 있는지 확인하세요
자료를 받아 정해진 순서로 처리해 결과물을 만드는 개인 반복 업무라면 웹앱보다 클로드 스킬(Claude Skill)이 더 빠를 수 있어요. 여러 사용자가 같은 데이터를 저장·조회하거나 항상 열리는 화면과 권한이 필요하면 애플리케이션이 맞습니다.
바이브코딩 프로젝트를 시작할 때 가장 먼저 할 일: AI와 PRD 작성하기
바이브코딩 프로젝트는 코드를 만들기 전에 AI와 PRD부터 작성하는 편이 좋아요. 사용자와 문제, 핵심 흐름, 첫 버전 범위와 완료 조건을 먼저 정하면 AI의 추측과 뒤늦은 화면·데이터 구조 수정을 줄일 수 있어요.
모바일 앱도 바이브코딩으로 만들 수 있나요?
바이브코딩으로 모바일 앱을 만들 수 있습니다. 휴대폰 브라우저에서 쓰는 서비스라면 반응형 웹이나 PWA로 먼저 검증하고, 앱스토어 배포와 기기 기능이 꼭 필요할 때 React Native·Expo 같은 앱 기술을 선택하는 편이 좋습니다.
기술 스택이란? 바이브코딩을 시작할 때 먼저 정하는 기술 조합
기술 스택은 애플리케이션을 만드는 데 사용하는 기술 조합입니다. 언어·프레임워크·데이터베이스·배포가 각각 어떤 역할을 맡는지, 좋은 조합은 어떻게 고르는지 입문자 눈높이로 설명합니다.
내 웹 애플리케이션에 온라인 결제를 붙이려면 무엇이 필요할까요?
웹 애플리케이션에서 실제 결제를 받으려면 상품과 금액을 정하고 주문을 먼저 기록한 뒤 PG사의 결제 결과를 서버에서 승인해야 해요. 테스트 연동만으로 끝나지 않으며 계약·심사, 취소·환불과 실패 처리까지 준비해야 합니다.
commit은 언제 해요? 작업을 안전하게 나누는 기준
commit은 일정 시간마다 하는 것이 아니라 한 가지 의미 있는 작업을 끝내고 작동을 확인했을 때 하면 돼요. 작은 기능이나 버그 수정을 검증한 뒤, 큰 변경이나 다른 작업을 시작하기 전에 안전한 기록을 남기세요.
commit, push, pull이 뭐예요? 내 코드가 GitHub를 오가는 방법
파일 저장은 현재 내용을 디스크에 남기고, commit은 의미 있는 변경 기록을 내 컴퓨터의 Git에 만들며, push는 그 기록을 GitHub에 올리는 일이에요. pull은 반대로 GitHub의 최신 기록을 내 컴퓨터에 받아 반영합니다.
바이브코딩에서 자꾸 나오는 Next.js는 도대체 뭔가요?
Next.js는 React를 바탕으로 화면과 서버 기능을 한 프로젝트에서 만들 수 있게 해주는 풀스택 웹 프레임워크예요. 예약·로그인·결제 같은 웹서비스에 유용하지만 데이터베이스와 인증, 배포까지 Next.js 하나가 모두 제공하는 것은 아니에요.
HTML, CSS, JavaScript는 각각 무슨 일을 하나요?
HTML은 화면에 무엇이 있는지, CSS는 어떻게 보이는지, JavaScript는 클릭과 입력 뒤 무엇이 일어나는지를 정해요. Next.js처럼 파일 모양이 달라도 브라우저가 받는 기본 재료는 같으므로 내용·모양·동작 중 무엇을 바꿀지 먼저 구분하면 됩니다.
웹 애플리케이션의 기본 구조: 화면·서버·데이터베이스 이해하기
웹 애플리케이션은 보통 사용자 입력을 받는 프론트엔드, 요청과 규칙을 처리하는 애플리케이션 서버, 계속 남을 정보를 보관하는 데이터베이스로 나뉘어요. 버튼 한 번도 이 세 부분이 요청과 응답을 주고받아야 완성됩니다.
데이터베이스 vs 구글 스프레드시트, 내 앱에는 무엇이 맞을까요?
소수의 담당자가 표를 직접 편집하는 단순 업무라면 구글 스프레드시트로 충분할 수 있어요. 여러 사용자가 로그인하고 데이터 관계·권한·동시 수정·결제 같은 정확성이 필요하면 애플리케이션용 데이터베이스가 더 적합합니다.
RLS가 무슨 뜻인가요? Supabase가 설정하라는 규칙
RLS는 로그인한 사용자가 테이블의 어떤 행을 읽고 추가·수정·삭제할 수 있는지 데이터베이스에서 검사하는 규칙이에요. 켜기만 하면 기본적으로 전부 막히므로 각 동작에 필요한 정책을 따로 만들어야 합니다.
Supabase를 연결하는 방법: 서버 접근을 추천하는 이유
결제·예약·관리자 기능처럼 권한과 업무 규칙이 복잡한 앱은 브라우저가 Supabase Data API를 직접 호출하기보다 서버가 요청을 확인하고 DB 작업을 실행하는 구조가 관리하기 쉬워요. 단순 앱은 SDK와 RLS로 빠르게 시작할 수 있지만 두 방식 모두 권한 검사가 필요합니다.
데이터베이스를 연결했더니 AI가 Prisma나 Drizzle을 설치했어요. 이게 뭔가요?
Prisma와 Drizzle 같은 ORM은 데이터베이스가 아니라 서버 코드가 DB를 일관된 방식으로 조회·저장하고 스키마 변경을 관리하도록 돕는 도구예요. 패키지 설치만으로 연결이 끝나지 않으므로 DB 주소·스키마·마이그레이션과 서버 전용 실행 여부를 확인해야 합니다.
데이터 타입이란? 바이브코딩에서 타입이 중요한 이유
데이터 타입은 어떤 값을 허용하고 그 값으로 어떤 계산·정렬·검사를 할 수 있는지 정하는 규칙이에요. 값의 겉모양보다 의미와 용도를 기준으로 문자열·숫자·날짜·불리언 등을 고르고 화면부터 데이터베이스까지 변환 지점을 맞춰야 합니다.
관계형 데이터베이스와 NoSQL, 내 앱에는 무엇이 맞을까요?
예약·주문·회원처럼 여러 데이터가 서로 연결되고 조회 조건이 다양한 앱이라면 관계형 데이터베이스부터 시작하는 편이 안전해요. 문서형 NoSQL은 함께 읽고 쓰는 데이터 모양이 분명하고 관계가 단순할 때 잘 맞으며, 어느 쪽이 항상 더 빠른 것은 아니에요.
스키마와 마이그레이션이란? 바이브코딩하다 만나는 데이터베이스 용어
데이터베이스 스키마는 테이블·컬럼·관계 같은 현재 구조이고, 마이그레이션은 그 구조를 바꾸는 실행 절차와 기록이에요. 마이그레이션 파일을 만들었다고 실제 DB가 바뀐 것은 아니므로 적용 대상과 기존 데이터 영향을 확인한 뒤 실행해야 해요.
바이브코딩으로 만든 앱, 데이터는 어디에 저장할까요?
화면에 입력한 내용이 보인다고 저장된 것은 아니에요. 한 기기에서만 쓰는 간단한 도구는 localStorage로 충분할 수 있지만, 여러 기기·사용자가 같은 데이터를 오래 보관하려면 데이터베이스가 필요해요.
API 키와 .env
API 키는 외부 서비스가 어떤 계정의 요청인지 확인하는 값이고, 비밀 키는 코드나 GitHub에 넣으면 안 돼요. 로컬에서는 .env에, 배포 환경에서는 Vercel 같은 서비스의 환경변수 설정에 따로 저장하며 노출되면 즉시 폐기·재발급해야 해요.
localhost가 무슨 뜻인가요? 내 컴퓨터에서만 열리는 주소
localhost는 지금 쓰는 컴퓨터 자신을 가리켜서, localhost:3000 주소를 남에게 보내도 그 사람 화면에서는 내 웹앱이 열리지 않아요. 배포는 코드를 인터넷 서버에 올려 누구나 접속할 공개 주소를 만드는 과정입니다.
Git과 GitHub를 꼭 써야 하는 이유
Git은 내 컴퓨터에서 코드 변경 기록과 되돌릴 지점을 만드는 도구이고, GitHub는 그 기록을 인터넷에 올려 백업·공유하는 서비스예요. 바이브코딩에서도 AI가 바꾼 내용을 확인하고 안전하게 되돌리려면 둘을 함께 쓰는 편이 좋아요.
터미널이 뭐예요? 검은 창의 정체와 첫 사용법
터미널은 마우스로 메뉴를 고르는 대신 글자로 명령을 입력해 컴퓨터를 다루는 창이에요. 클로드코드는 터미널을 통해 프로젝트 파일을 읽고 명령을 실행하지만, 입문자가 모든 명령어를 외울 필요는 없어요.
바이브코딩이 뭐예요? AI와 말로 하는 코딩
바이브코딩은 코드를 직접 입력하는 대신 AI에게 원하는 기능을 말로 설명하고, AI가 작성한 코드를 사람이 확인하며 소프트웨어를 만드는 방식이에요. 코딩 경험 없이 시작할 수 있지만 결과 검증과 오류 해결까지 자동으로 끝나는 것은 아니에요.
MCP가 뭐예요? AI를 내 도구와 연결하는 표준 콘센트
MCP(Model Context Protocol)는 AI가 노션·캘린더·데이터베이스 같은 외부 도구와 데이터를 일관된 방식으로 발견하고 사용하게 하는 표준이에요. 사용하는 AI와 도구가 MCP를 지원하고 필요한 계정 권한을 허용해야 실제로 연결할 수 있어요.
