📺 추천 영상
바이브 코딩 입문에 도움이 되는 영상을 모았어요. 썸네일을 누르면 유튜브로 이동합니다.
이제 그 거인은 AI입니다. 혼자라면 몇 달이 걸릴 일도, AI라는 거인의 어깨 위에서 더 멀리 보고 더 멀리 갈 수 있어요.
이 가이드는 그 어깨에 단단히 올라타는 법을 차근차근 안내합니다.
AI에게 무작정 코드를 맡기기 전에 알아두면 좋은 기초와 5단계 흐름.
비유로 큰 그림을 잡고, (괄호) 안의 기술 용어로 또박또박 요청해 보세요.
AI 셰프와 함께 요리할 '주방(IDE)'을 차리고, 최신 웹 앱(React 등)을 돌릴 '전기 공사(Node.js)'와 '식자재 트럭(npm)'을 들이는 준비 단계
뼈대와 디자인 (HTML/CSS/JS)
홀과 주방의 분리 (Front/Back)
주머니와 금고 (Storage/DB)
안전한 세이브 (Git/GitHub)
클라우드 배포 (Local/Deploy)
요즘 웹 개발은 단순한 문서 작성이 아닙니다. 로컬(내 PC)에 공장을 세워야 합니다.
원래 브라우저(손님 테이블)에서만 놀던 자바스크립트를 내 컴퓨터 전체에서 쓸 수 있게 해줍니다. React, Vite 같은 최신 프레임워크를 돌리려면 이 기초 전기 공사가 반드시 선행되어야 합니다.
자세히 보기Node.js를 깔면 딸려옵니다. 전 세계 개발자들이 만들어둔 수백만 개의 코드 부품(달력, 버튼 등)을 내 프로젝트로 즉시 배달해 주는 패키지 매니저입니다.
자세히 보기전기(Node)를 깔았다면, 이제 셰프와 내가 함께 요리할 '주방(작업 공간)'이 필요합니다. 바로 IDE(코드 에디터)입니다.
문서 편집에 비유하면 쉬워요.
AI 답을 복사해 파일에 붙여넣고, 또 복사해서 묻고… 간접적이고 번거로워요. (PDF처럼 직접 고치기 불편)
AI가 실제 코드 파일을 그 자리에서 직접 열고 고쳐요. (Word 문서를 바로 편집하듯 자연스럽게)
전 세계 개발자가 표준으로 쓰는 무료 주방입니다. 코드 편집·터미널·확장(Extension)이 한곳에 모여 있어, 모든 AI 주방의 뼈대가 됩니다.
자세히 보기VS Code 주방 위에 'AI 셰프'를 상주시킨 도구들입니다. (Cursor)는 에디터 자체에, (Claude Code · Codex)는 터미널에서 AI가 직접 코드를 읽고 고칩니다.
자세히 보기앞서 배운 (npm) 명령은 모두 이 내장 터미널에 입력합니다. 주방의 주문 단말기처럼, 내 컴퓨터에 직접 명령을 내리는 창구죠. (Prettier 같은 포매터) 확장을 더하면 코드도 깔끔하게 자동 플레이팅됩니다.
자세히 보기과거엔 메뉴 하나가 바뀌면 식당 전체를 새로고침해야 했습니다. 지금은 상태(State)라는 스마트 메모장을 써서 데이터가 바뀌면 화면 깜빡임 없이 즉시 그 부분만 바뀝니다.
자세히 보기왼쪽 코드를 바꾸면 오른쪽 화면이 실시간으로 바뀝니다. HTML(뼈대)·CSS(꾸미기)·JS(동작)가 어떻게 합쳐져 화면이 되는지 직접 확인해 보세요.
💡 위 탭에서 HTML·CSS·JS를 바꿔보면, 같은 화면이 어떻게 달라지는지 바로 비교할 수 있어요.
프론트엔드가 백엔드에 마음대로 요구할 수 없습니다. 주방장이 정해둔 메뉴판 양식(API)에 맞춰 정확하게 요청해야 합니다.
간단한 음료는 홀에서 바로 내드릴 수 있듯, 많은 서비스는 프론트(홀)만으로도 충분히 만들 수 있어요. '불을 써야 하는 요리'가 생길 때 비로소 주방(백엔드)이 필요해집니다.
💡 그래서 처음엔 프론트부터 빠르게 만들어 보고, 위 오른쪽 같은 기능이 필요해지는 순간 백엔드를 붙이는 순서를 추천해요.
내 폰에만 저장됩니다. 인터넷 없이도 작동하지만, 브라우저 기록을 지우거나 다른 기기로 접속하면 데이터가 영원히 날아갑니다.
자세히 보기서버 깊숙한 곳에 보관됩니다. 데이터가 안전하게 보존되며, 로그인 시 어디서나 똑같은 데이터를 불러옵니다.
자세히 보기AI가 코드를 망쳐도 어제로 되돌려주는 세이브 포인트(버전 관리)입니다.
자세히 보기Git 기록을 인터넷에 백업하여 전 세계에 앱을 자동 배포(CI/CD)할 수 있게 해줍니다.
자세히 보기원본(main)은 그대로 두고 브랜치(가지)에서 실험 → 커밋으로 저장 → 완성되면 main에 머지(합치기). 아래 용어를 눌러 자세히 보세요.
내 컴퓨터(Localhost)에서만 접속하며 에러를 테스트하는 개발 환경입니다.
자세히 보기클라우드 서버에 코드를 올려 누구나 접속할 수 있는 실제 도메인 주소를 부여받습니다.
자세히 보기위에서 본 '배포'를 실제로 어디에 할지 고를 차례예요. 입문자 친화 플랫폼부터 전문가용 종합 클라우드까지 — 카드를 눌러 자세히 보세요.
GitHub만 연결하면 전 세계에 무료로 빠르게 배포(Pages). DB(D1)까지 손쉽게.
자세히 보기DB·로그인·저장소 등 백엔드 기능을 코드 조금으로. Firebase의 오픈소스 대안.
자세히 보기구글의 올인원 백엔드. 실시간 DB·로그인·호스팅을 앱에 빠르게 붙이기.
자세히 보기세계에서 가장 큰 클라우드. 수백 가지 서비스로 어떤 규모든 감당.
자세히 보기데이터 분석·AI/머신러닝과 구글 생태계 연동에 강한 클라우드.
자세히 보기기업용 시스템과 윈도우/오피스·.NET 환경에 강한 MS 클라우드.
자세히 보기AI는 마법 지팡이가 아니라 '새로 온 셰프(요리사)'입니다. 이 셰프가 진짜로 요리하게 해주는 「레시피북 + 조리도구 + 주방 출입증」 묶음이 바로 'AI 하네스'예요.
챗봇처럼 '말로만' 주문받는 것과, 내 주방에서 '직접 칼을 잡고 요리하는' 것의 결정적 차이가 바로 이 하네스에 있습니다.
우리 가게의 맛·플레이팅 규칙을 적어두면 매번 설명할 필요가 없습니다. 예: Claude Code의 (CLAUDE.md), Cursor의 (.cursorrules). 셰프에게 건네는 '하우스 레시피'죠.
자세히 보기AI가 직접 재료를 손질(파일 편집)하고, 식재료를 찾고(검색), (터미널 명령)이라는 불까지 다루는 능력. 단순 챗봇과의 결정적 차이를 만드는 '진짜 칼과 불'입니다.
자세히 보기GitHub·데이터베이스·디자인 도구 등 외부 시스템에 AI를 잇는 표준 납품 라인입니다. (MCP, Model Context Protocol) 덕분에 주방 밖 거래처와도 연결됩니다.
자세히 보기재료 폐기·메뉴 출시(배포)처럼 돌이키기 어려운 작업 전에 내 확인을 받게 하는 안전장치입니다. (승인/Approval)로 설익은 요리가 손님에게 나가는 걸 막죠.
자세히 보기특정 메뉴(작업)를 위한 절차·요령·도구를 하나로 묶은 '비법 레시피 키트'입니다. 필요할 때만 꺼내 써서 그 작업을 늘 일관되게 처리해요. (Claude Code의 Agent Skills)가 대표적이에요.
자세히 보기거인의 힘은 AI가 주지만, 방향(계획)과 확인(검증)은 사람의 몫이에요. AI를 마법 지팡이처럼 한 번에 휘두르지 마세요.
코드부터 짜지 말고 무엇을·어떤 로직으로 만들지 말로 먼저 정하세요. AI에게도 바로 시키지 말고 (계획)부터 세우게 하면 길을 덜 잃어요.
동작 확인 없이 넘어가지 마세요. 기대 결과를 먼저 정하고 그대로 되는지 확인하는 습관이 (TDD)의 출발이에요.
집계·결제·로그인 같은 중요 로직을 '아마 되겠지'로 남기지 마세요. 핵심은 (직접 검증)해야 진짜 완성입니다.
빨간 에러창이 뜨면 당황하지 말고 에러 로그를 그대로 복사해서 물어보세요.
🪄 "터미널에 이런 에러가 났어. 해결 방법과 수정된 코드 줘."
처음 보면 무섭지만, 사실 단골 손님 같은 에러들이에요. 뜻만 알면 AI에게 물어보기도 쉬워집니다.
blocked by CORS policy
뜻: 브라우저가 '다른 출처(도메인)'의 데이터를 함부로 못 가져오게 막는 보안 규칙에 걸린 거예요.
해결: 보통 서버(백엔드)에서 CORS 허용 설정을 추가해야 해요. 프론트 잘못이 아닌 경우가 많아요.
GET /page 404 (Not Found)
뜻: 찾는 주소(파일·API 경로)가 없어요.
해결: 경로 오타·대소문자·파일 위치를 확인하세요.
500 Internal Server Error
뜻: 서버 안에서 코드가 터졌어요(서버 쪽 오류).
해결: 서버 로그(터미널)를 열어 진짜 원인 메시지를 찾는 게 먼저예요.
Cannot read properties of undefined
뜻: 아직 없는(빈) 값을 사용하려다 난 거예요.
해결: 데이터가 도착한 뒤에 쓰는지 확인, 옵셔널 체이닝 ?. 활용.
npm ERR! code ENOENT
뜻: 패키지 설치 중 파일·버전 문제가 생겼어요.
해결: node_modules 삭제 후 재설치, Node 버전 확인.
EADDRINUSE: address already in use :::3000
뜻: 그 포트(예: 3000번)를 이미 다른 프로그램이 쓰고 있어요.
해결: 기존 실행을 종료하거나 다른 포트로 실행하세요.
🪄 어떤 에러든 빨간 메시지를 그대로 복사해서 "이 에러가 났어. 원인과 해결 방법, 수정된 코드 줘"라고 물어보면 가장 빠릅니다.
회사 보안 환경에선 일반 배포와 다른 점이 많아요. 미리 알아두면 삽질을 크게 줄일 수 있습니다.
파일을 반입할 때 HTML·CSS·JS를 매번 여러 개 올리긴 번거로워요. 개발은 파일을 나눠(모듈화) 하더라도, 배포용은 하나의 SPA(단일 HTML 파일)로 합쳐서 반입하면 훨씬 수월합니다.
보안 때문에 사내에선 npm·pip 같은 패키지 설치가 대개 안 됩니다. 그래서 내 PC(로컬)에서 개발·빌드를 끝내고, 완성된 결과물만 반입해야 해요.
📦 빌드(Build)란? 사람이 나눠 쓴 코드와 라이브러리를, 브라우저가 바로 읽을 수 있는 최종 파일로 묶고 압축하는 과정이에요. (자세히는 위 '빌드' 단어를 눌러보세요)
패키지 설치가 막혀도 CDN으로 라이브러리를 불러오는 방식은 대개 동작합니다. unpkg·jsDelivr 등을 쓰세요. 다만 환경에 따라 특정 CDN이 차단돼 있기도 하니, 자주 쓰는 CDN은 미리 동작하는지 확인하세요.
이 환경들에선 보안상 HTML 안의 <script>(자바스크립트)가 작동하지 않는 경우가 많아요. 대신 파일을 다운로드해서 열면 정상 동작합니다. 어디로 배포·공유할지를 미리 정하고 거기에 맞춰 만드세요.
사내 데이터 파일엔 문서보안(DRM) 솔루션이 걸려 있어요. 데이터를 보여주거나 가공하는 작업은 데이터를 CSV로 import해서 화면에서 처리하게 만드세요.
🚨 AI에게는 데이터의 '컬럼(항목) 구조'만 알려주고, 실제 데이터 내용은 절대 전달하지 마세요.
바이브 코딩 입문에 도움이 되는 영상을 모았어요. 썸네일을 누르면 유튜브로 이동합니다.
이제 AI라는 거인의 어깨에 올라탈 차례예요. 배운 내용으로 사내 HR 데이터를 대시보드로 만들어 보세요. VS Code와 로컬 Git만 있으면 됩니다.
거인의 어깨 위로 올라가기
