카드 목록은 미리보기예요. 각 카드 본문은 무료 키트 또는 로그인 후 열립니다.
전체 카드 열기"바이브코딩"이라는 말의 시작
"코드를 직접 타자 치지 않고, AI와 대화로 만드는 방식"이다.
🔒 카드 열기 →웹 앱은 세 조각으로 나뉜다
앱은 화면(프론트엔드) · 두뇌(백엔드) · 기억(데이터베이스) 세 덩어리가 대화하며 돌아간다.
🔒 카드 열기 →HTTP와 API: 프로그램끼리 대화하는 법
HTTP는 인터넷 위에서 통하는 말이고, API는 "이렇게 부르면 이렇게 답할게"라는 메뉴판이다.
🔒 카드 열기 →데이터베이스: 앱의 기억장치
DB는 껐다 켜도 남아야 하는 것(회원·글·주문)을 저장하는 곳이다.
🔒 카드 열기 →도구 지형도: 내가 쓸 것 고르기
"코드를 얼마나 볼 것인가"를 기준으로 도구를 3갈래로 나누고, 한 개만 고른다.
🔒 카드 열기 →"내 컴퓨터에서만 돼요" 문제
`localhost`는 내 컴퓨터를 가리키는 주소. 남이 접속하려면 배포(deploy)가 필요하다.
🔒 카드 열기 →Git 3분 정리: commit / push / branch
Git은 "되돌리기"가 가능한 버전 관리 시스템이다. AI가 파일을 잘못 덮어썼을 때 복구 수단이 없으면 처음부터 다시 해야 한다.
🔒 카드 열기 →.env와 환경변수: API 키는 신용카드다
API 키나 DB 비밀번호 같은 민감한 값은 `.env` 파일에 따로 보관하고, 코드 파일 안에 직접 적지 않는다.
🔒 카드 열기 →.gitignore: 올라가면 안 될 파일 목록
`.gitignore`에 적힌 파일은 Git이 추적하지 않는다. `.env` 파일은 반드시 이 목록에 있어야 한다.
🔒 카드 열기 →AI에게 일을 "쪼개서" 시키기
한 번에 큰 덩어리를 시키면 AI가 방향을 잃는다. 하나의 기능, 하나의 파일, 하나의 단계를 한 번에 하나씩 시키고 결과를 확인한 뒤 다음으로 넘어간다.
🔒 카드 열기 →PRD 1페이지: AI에게 주는 설계도
PRD(Product Requirements Document)는 "무엇을, 누구를 위해, 어떤 화면과 데이터로, 무엇은 하지 않을지"를 1페이지로 정리한 문서다. 프롬프트마다 AI의 가정이 달라지는 것을 막는다.
🔒 카드 열기 →/cost와 /clear: 토큰 관리 시작
Claude Code는 쓴 만큼 비용이 발생한다. `/cost`로 현황을 확인하고, 주제가 바뀌면 `/clear`로 컨텍스트를 초기화하는 습관이 시작점이다.
🔒 카드 열기 →Plan mode와 /rewind: 사고 조기 차단
AI가 잘못된 방향으로 가기 시작하면 Escape로 즉시 멈추고, `/rewind`로 이전 체크포인트로 대화와 코드를 함께 되돌린다.
🔒 카드 열기 →인증을 직접 만들지 마라
로그인·비밀번호·소셜 인증은 이미 잘 만들어진 서비스에 맡기는 것이 훨씬 안전하고 빠릅니다.
🔒 카드 열기 →SQL vs NoSQL: 첫 DB 선택 기준
"관계 있는 데이터"는 SQL, "유연한 문서·캐시"는 NoSQL이 유리합니다. 초보는 PostgreSQL(Supabase)에서 시작하면 무난합니다.
🔒 카드 열기 →Vercel 5분 배포: Preview vs Production
GitHub 저장소를 Vercel에 연결하면, `main` 브랜치는 Production, 다른 브랜치는 Preview URL로 자동 배포됩니다.
🔒 카드 열기 →모델 선택: Sonnet · Opus · Haiku
Anthropic 공식 권장: 대부분의 코딩 작업은 Sonnet으로 충분하고, 복잡한 아키텍처 결정에만 Opus, 단순 반복 작업에는 Haiku입니다.
🔒 카드 열기 →엣지케이스 5개 점검 리스트
런칭 전, 다음 다섯 가지 상황을 직접 눌러봅니다: 빈 입력·대량 입력·오프라인·권한 없음·잘못된 타입.
🔒 카드 열기 →CORS와 HTTPS: 초보가 처음 만나는 벽
CORS는 브라우저가 다른 출처 간 요청을 제한하는 보안 규칙이고, HTTPS는 데이터를 암호화하는 HTTP입니다.
🔒 카드 열기 →브라우저 DevTools F12: 에러 읽는 법
F12(macOS: ⌘⌥I)를 누르면 열리는 개발자 도구는 내 앱이 실제로 무엇을 하는지 보여주는 창입니다.
🔒 카드 열기 →브랜치 전략과 PR 리뷰
`main`은 항상 배포 가능한 상태로 유지하고, 모든 새 작업은 feature 브랜치에서 시작해 PR(Pull Request)로 병합합니다.
🔒 카드 열기 →GitHub Actions로 자동 배포
GitHub Actions는 `push`·`pull_request` 이벤트에 따라 테스트·빌드·배포를 자동으로 실행하는 파이프라인입니다.
🔒 카드 열기 →OWASP Top 10: 놓치기 쉬운 상위 위험
OWASP Top 10은 웹 애플리케이션에서 가장 자주 악용되는 보안 위험 10가지를 분류한 목록으로, 바이브코딩으로 만든 앱이 특히 놓치기 쉬운 항목들이 포함되어 있습니다.
🔒 카드 열기 →Rate Limiting과 의존성 관리
Rate Limit은 "같은 사람이 너무 많이 요청하면 차단"하는 장치이고, 의존성 관리는 사용 중인 라이브러리를 안전하고 최신 상태로 유지하는 습관입니다.
🔒 카드 열기 →로그와 모니터링: 문제를 "사후"에 찾는 힘
앱이 배포된 뒤 발생하는 버그와 성능 문제는 로그·에러 추적·성능 지표 없이는 보이지 않습니다.
🔒 카드 열기 →CLAUDE.md · Skills · Hooks로 컨텍스트 최적화
레벨 4의 비용·품질 차이는 "무엇을 컨텍스트에 넣을지"의 설계에서 갈립니다. CLAUDE.md·Skills·Hooks 세 도구로 토큰을 수천~수만 단위로 줄일 수 있습니다.
🔒 카드 열기 →에이전트 팀의 비용 함정
에이전트 팀(Agent Teams)은 plan 모드에서 표준 세션의 약 7배 토큰을 소비합니다. 기본 비활성화 상태이며, 켜기 전에 비용 구조를 이해해야 합니다.
🔒 카드 열기 →