비엔지니어를 위한 바이브 코딩

Vibe Coding for Non-Engineers

바이브 코딩은 비엔지니어가 코딩의 세계에 쉽게 접근할 수 있도록 설계된 새로운 접근 방식입니다. 전통적인 프로그래밍 교육과 달리, 바이브 코딩은 직관을 중시하고 AI의 도움을 적극 활용하여 빠르게 결과물을 만들어내는 데 중점을 둡니다.

이 과정을 통해 코딩에 대한 두려움을 없애고, 자신의 아이디어를 웹에서 실현하는 기쁨을 경험하게 될 것입니다. 바이브 코딩의 핵심 원칙과 철학에 대해 자세히 알아보세요.

커리큘럼 모듈

소개

바이브 코딩이란?

Introduction - What is Vibe Coding?

  • 바이브 코딩 철학
  • 전통적인 소프트웨어 엔지니어링과의 비교
  • 핵심 원칙: 직관 중심, 빠른 개발, AI 파트너십, 결과 중심
  • 바이브 코딩의 유래와 역사
시작하기
1

창작 공간 설정하기

Setting Up Your Creative Space

  • 코드 에디터: Visual Studio Code (VSCode) 설치 및 구성
  • 클라우드 백엔드 & 배포: Firebase 계정 설정
  • 버전 관리 & 협업: GitHub 계정 설정
  • AI 코딩 파트너: GitHub Copilot, Claude 3.7 Sonnet 설정
  • AI 워크플로우: 설정 확인하기
시작하기
2

HTML 구조 만들기

Building the Bones: HTML Structure

  • HTML 설명: 콘텐츠에 태그 달기
  • 기본 페이지 구조
  • 필수 HTML 태그: 제목, 단락, 링크, 이미지, 목록, 컨테이너, 버튼
  • AI 워크플로우: Copilot/Claude로 HTML 생성 및 이해하기
  • 실습: 첫 번째 '자기소개' 페이지 만들기
준비 중
3

CSS로 스타일 추가하기

Adding Style: CSS Fundamentals

  • CSS 설명: HTML 스타일링하기
  • HTML에 CSS 연결하기
  • 핵심 개념: 선택자와 속성
  • 기본 레이아웃
  • AI 워크플로우: 스타일 제안 받기 및 CSS 이해하기
  • 실습: '자기소개' 페이지 스타일링하기
준비 중
4

JavaScript로 생동감 더하기

Adding Life: JavaScript with AI Guidance

  • JavaScript 설명: 페이지에 상호작용 추가하기
  • 핵심 개념: 변수, 함수, 간단한 이벤트(클릭)
  • 변경 사항 적용하기: 기본 DOM 조작
  • AI 워크플로우: JS 작성, 디버깅 및 이해하기
  • 실습: 상호작용 요소 추가하기
준비 중
5

클라우드 연결하기: 간편한 Firebase

Connecting to the Cloud: Firebase Made Simple

  • Firebase 설명: 쉬운 백엔드
  • Firebase 프로젝트 설정하기
  • 간단하게 데이터 저장 및 검색하기 (Firestore 중심)
  • 선택 사항: 빠른 호스팅
  • AI 워크플로우: Firebase 설정 및 코드 탐색하기
  • 실습: Firebase를 사용하여 메모 저장하고 표시하기
준비 중
6

캡스톤 프로젝트: 바이브 앱 만들기

Capstone Project: Build Your Vibe App

  • 프로젝트 선택하기 (개인 대시보드, 인터랙티브 포트폴리오, 아이디어 수집기, 간단한 무드 트래커)
  • AI 워크플로우 (계획): Claude를 사용한 프로젝트 분석 및 전략
  • AI 워크플로우 (구축): Copilot Agent Mode를 사용한 단계별 개발
  • AI 지원을 통한 테스트 및 개선
  • 프로젝트 기능 및 AI 사용 요약
준비 중
결론

바이브 코딩 유지하기

Keep the Vibe Alive

  • 요약: 바이브 코딩 여정
  • 바이브 코딩 마인드셋: 지속적인 창작과 학습
  • 다음 단계: 더 깊은 CSS, 더 많은 JavaScript, Firebase 탐색, JavaScript 프레임워크/라이브러리, 커뮤니티 참여
준비 중