← Wiki

바이브코딩 운전교본

자동차 운전에 비유해 바이브코딩을 처음부터 배울 수 있습니다.

AI 생성 콘텐츠
콘텐츠 진행률27 / 27편
1부도로에 나가기 전에5편
  1. 1-0코딩을 모르는 내가, 이걸 만들었다이 시리즈는 프로그래밍 경험이 전혀 없는 완벽한 초보자가 AI와 협업하여 실제 결과물을 만들어내는 여정을 담고 있습니다.2분
  2. 1-1운전이 뭔지 알기 — 바이브코딩이란 무엇인가바이브코딩이 무엇인지 이해하고, 왜 코딩을 모르는 사람도 할 수 있는지를 알아봅니다.3분
  3. 1-2차량 구매 — 도구 설치하기바이브코딩을 시작하기 위해 필요한 기본 도구를 내 컴퓨터에 갖추는 과정입니다.3분
  4. 1-3주유하기 — 계정 설정과 첫 세팅설치된 도구에 AI 연료를 채우는 과정입니다. 구글 계정 연결과 기본 정책 동의가 필요합니다.2분
  5. 1-4시동 걸기 — 첫 번째 Hello World주차장에서 가볍게 시동을 걸어봅니다. AI에게 첫 명령을 내리고 실제 웹페이지가 만들어지는 순간을 경험합니다.2분
2부도로 위에서10편
  1. 2-1첫 번째 드라이브 — 자기소개 페이지 만들기본격적인 실전 프로젝트입니다. AI에게 나의 정보를 전달하여 첫 번째 웹페이지를 완성해 봅니다.2분
  2. 2-2목적지 변경 — 수정하고 또 수정하기AI에게 요청할 때 '모호한 지시'와 '구체적인 지시'가 어떤 결과 차이를 만드는지 직접 체험해 봅니다.2분
  3. 2-3경유지 추가 — 페이지와 기능 늘리기단일 페이지를 넘어 여러 페이지로 구성된 '진짜 웹사이트'를 만듭니다. 페이지 간 연결(Navigation)을 배웁니다.2분
  4. 2-4고속도로 진입 — 인터랙션 추가하기정적인 페이지에 버튼 클릭, 스크롤 반응, 애니메이션 등 사용자의 행동에 반응하는 '동적 요소'를 추가합니다.2분
  5. 2-5우회 — 에러를 만났을 때갑작스러운 도로 통제(에러)를 만나도 당황하지 마세요. 정비사(AI)와 함께 우회로를 찾는 법을 배웁니다.2분
  6. 2-6계기판 읽기 — 터미널과 친해지기터미널은 차량의 '계기판'입니다. 지금 차의 상태가 어떤지, 속도는 얼마인지 실시간으로 알려주는 정보를 읽어봅니다.1분
  7. 2-7야간 운전 — 복잡한 요청 다루기안개 낀 밤길에서는 천천히 한 블록씩 나가는 것이 가장 빠릅니다. AI에게도 복잡한 요청은 단계별로 나누어 전달해야 합니다.1분
  8. 2-8같은 길인데 다른 풍경 — 일관성 문제"어제는 잘 됐는데 왜 오늘은 스타일이 다르지?" AI의 무작위성과 맥락의 한계를 이해하고 일관성을 유지하는 법을 배웁니다.1분
  9. 2-9주차 — 배포하기내 컴퓨터를 벗어나 세상 모든 사람이 볼 수 있는 '진짜 주소(URL)'를 만듭니다. 드라이브의 마지막 완성은 깔끔한 주차입니다.1분
  10. 2-10운전 일지 — 지금까지 배운 것 정리2부 실전 드라이브를 마치며, 내가 어떤 부분에서 잘 달렸고 어디서 헤맸는지 블랙박스 기록을 정리해 봅니다.2분
3부더 잘 달리기 위해10편
  1. 3-1시트 포지션 저장 — 룰의 개념매번 "한글로 해줘", "둥글게 해줘"라고 반복할 필요가 없습니다. AI가 항시 기억해야 할 규칙을 새기는 법을 배웁니다.2분
  2. 3-2에코모드 설정 — 나만의 룰 만들기언어 설정부터 디자인 가이드까지, 프로젝트 전체를 관통하는 나만의 '운전 스타일'을 룰에 담아봅니다.2분
  3. 3-3하이패스 장착 — MCP의 개념톨게이트에서 멈추지 않고 통과하는 하이패스처럼, AI가 내 컴퓨터의 파일이나 외부 데이터에 직접 접근하게 해주는 'MCP'를 장착합니다.2분
  4. 3-4블루투스 연결 — MCP 실전 활용차에 스마트폰을 연결하듯, AI에 데이터베이스(Supabase)와 외부 API를 연결하여 사이트에 '기억'과 '정보'를 채웁니다.2분
  5. 3-5야간 운전 교습 — 스킬의 개념AI에게 특정 상황에 대처하는 '전문 기술'을 교육합니다. 한 번 배우면 어떤 도로에서도 꺼내 쓸 수 있는 고급 기술입니다.2분
  6. 3-6빗길 운전 요령 — 스킬 실전 활용배운 이론을 포트폴리오 프로젝트에 직접 적용해 봅니다. 반복되는 작업을 '스킬'로 만들어 일관성과 효율성을 동시에 잡습니다.2분
  7. 3-7블랙박스 장착 — Git 기초코드가 망가져도 "어제 상태로" 정확히 되돌릴 수 있는 안전장치, 'Git'을 장착합니다.2분
  8. 3-8풀옵션으로 달리기 — 종합 적용룰, MCP, 스킬, Git. 각 옵션이 연결되어 시너지를 낼 때, 개발 경험은 완전히 달라집니다.2분
  9. 3-9차고에서 나만의 튜닝 — 커스터마이징이제 남의 설정을 따라 하는 단계를 넘어, 나의 목적과 습관에 맞는 독자적인 시스템을 구축할 차례입니다.2분
  10. 3-10도착 그리고 다음 여행 — 마무리목적지에 안전하게 도착했습니다. 이제 차에서 내려 지나온 길을 돌아보고, 새로운 여행지를 꿈꿀 차례입니다.2분
4부부록2편
  1. 4-27트러블슈팅 가이드바이브코딩 중 만나는 각종 에러(경고등)를 해결하기 위한 응급 처치 매뉴얼입니다.2분
  2. 4-28프롬프트 치트시트AI에게 목적지를 말하는 핵심 요령을 한 장의 카드로 정리했습니다.2분