10강: 수직 슬라이싱
한 번에 전부 만들지 말고, 기능 하나씩 완성하고 커밋하는 수직 슬라이싱 기법을 배웁니다. 10분 안에 확인 못 하면 너무 큰 겁니다.
한 번에 전부 만들지 말고, 기능 하나씩 완성하고 커밋하는 수직 슬라이싱 기법을 배웁니다. 10분 안에 확인 못 하면 너무 큰 겁니다.
HTML+CSS에서 한 단계 올라가, Next.js 프레임워크로 진짜 서비스의 화면을 만들어봅니다. 컴포넌트는 레고 블록, Tailwind CSS는 색칠 스티커예요.
새로고침해도 안 사라지는 데이터를 만들려면 데이터베이스가 필요해요. Supabase로 테이블을 만들고 CRUD(만들기/읽기/수정/삭제)를 실습합니다.
혼자 다 만들 필요 없어요. 날씨, 지도, AI 같은 남의 서비스를 내 앱에 가져다 쓰는 방법을 배웁니다. API라는 주문 창구를 통해서요.
누가 쓰는지 알아야 '내 데이터'를 보여줄 수 있어요. Supabase Auth로 이메일 로그인과 소셜 로그인을 만들고, RLS로 내 데이터를 보호하는 법을 배웁니다.
에러 메시지를 읽을 줄 몰라도 괜찮아요. 복사해서 AI에게 붙여넣기만 하면 됩니다. 바이브 코딩에서 에러를 대하는 완벽한 자세와 디버깅 방법을 알아봅니다.
Vercel을 이용해 내 프로젝트를 인터넷에 공개하는 전 과정을 안내합니다. 환경 변수 설정, 자동 배포, 커스텀 도메인 연결까지 클릭 몇 번이면 충분해요.
배포 후 사용자 피드백을 수집하고 지속적으로 앱을 개선하는 사이클을 배웁니다.
스타일 이름을 알면 AI에게 정확한 주문이 가능해요. /frontend-design 스킬로 프로 수준의 UI를 만드는 법을 알아봐요.
매일 반복하는 작업이 있다면 한 번만 만들어두면 끝이에요. 크론과 웹훅의 개념부터 GitHub Actions 실전까지 안내합니다.
AI에게 방향만 알려주면 코드가 완성되는 새로운 개발 방식, 바이브 코딩의 세계에 오신 걸 환영합니다.
웹사이트인데 앱처럼 쓸 수 있어요. PWA로 홈 화면 설치, 오프라인 동작까지 가능한 모바일 앱을 만드는 법을 알아봐요.
프롬프트, 토큰, 프론트엔드, 백엔드, API, 데이터베이스... AI에게 올바른 지시를 하려면 알아야 할 핵심 용어를 생활 속 비유로 풀어드려요.
GitHub 가입부터 Claude Code 설치, 에디터 선택, 터미널 기초까지. 이 30분이 수백 시간을 좌우해요.
바이브 코딩의 관제탑, VS Code를 내 손에 맞게 세팅해서 작업 속도를 2배로 올려보세요.
바이브 코더를 위한 Git과 GitHub의 기초 개념을 게임 세이브 비유로 쉽고 재미있게 배웁니다.
아이디어를 찾는 4가지 방법과, Claude에게 PRD를 작성시키는 실전 기획법을 배웁니다.
같은 AI인데 결과가 10배 달라지는 비밀. 프롬프트 3요소와 나쁜/좋은 프롬프트 비교 5쌍, 레퍼런스 활용법까지 실전으로 배웁니다.
7강에서 배운 프롬프트 기술을 총동원해서, HTML+CSS로 개인 웹페이지를 만들고 GitHub Pages로 무료 배포합니다. 오늘 끝나면 내 이름이 적힌 URL이 생겨요.
CLAUDE.md에 프로젝트 규칙을 한 번 적어두면, AI가 매번 알아서 따릅니다. context7 설치, settings.json 설정, 메모리 시스템까지 한 번에 세팅하세요.