33분 만에 알아보는 바이브 코딩 기초

채널 아이콘
Tina Huang 구독자 835,000명

요약

이 영상은 바이브 코딩(vibe coding)의 개념을 정의하고, 효과적인 개발을 위해 반드시 알아야 할 다섯 가지 기본 원칙(사고, 프레임워크, 체크포인트, 디버깅, 컨텍스트)을 소개합니다. 실제로 Replet과 Windsurf 같은 AI 코딩 도구를 활용해 SEO 태그 검사 앱을 구현하며 PRD 작성법, 버전 관리, 디버깅 기법 등 실무 팁을 시연합니다. 또한 최소 기능 제품(MVP) 사고방식과 고급 규칙 파일 설정 방법까지 다루며, 전반적인 생산성과 안전성을 높이는 전략을 제시합니다.

주요 키워드

vibe coding PRD MVP LLM 버전 관리 디버깅 프레임워크 체크포인트 컨텍스트 AI 코딩 에디터

하이라이트

  • 🔑 바이브 코딩 정의: 코드보다 AI 모델의 잠재력, 즉 'vibes'에 집중해 개발 방식을 혁신합니다.
  • ⚡️ 핵심 스킬 5가지: 사고(thinking), 프레임워크(frameworks), 체크포인트(checkpoints), 디버깅(debugging), 컨텍스트(context)를 모두 갖추는 것이 중요합니다.
  • 🌟 PRD 작성법: 논리적·분석적·계산적·절차적 사고 네 단계를 활용해 명확한 제품 요구사항 문서(Product Requirements Document)를 만듭니다.
  • 📌 프레임워크 활용: 이미 존재하는 라이브러리나 패키지를 지정해 AI가 최적 솔루션을 생성하도록 유도하면 효율이 대폭 상승합니다.
  • 🚀 버전 관리 필수: Git과 GitHub를 이용해 중간 저장 지점을 설정하고, 데이터 손실을 방지하기 위한 체크포인트를 항상 적용해야 합니다.
  • 🔍 디버깅 전략: 오류 메시지나 스크린샷, 파일 경로 등 풍부한 맥락을 제공해 AI가 신속하고 정확하게 문제를 해결하도록 합니다.
  • 🎯 컨텍스트 제공: 목업, 샘플 데이터, 실행 환경 정보 등을 프롬프트에 포함해 AI의 출력 품질을 극대화합니다.
  • 🔧 실전 예시 – Replet: SEO 태그 검사 앱을 PRD 작성부터 배포까지 단계별로 시연하며 도구 사용법을 익힙니다.
  • 🧠 MVP 사고방식: 최소 기능 제품으로 시작해 안정적으로 작동시킨 뒤 점진적으로 기능을 확장하는 올바른 개발 접근법을 강조합니다.
  • 📏 규칙 파일 활용: 시스템 프롬프트에 보안·성능 규칙을 정의해 AI 에이전트의 코딩 방식을 통제하고 안전성을 높입니다.

용어 설명

vibe coding

코드 자체보다 AI 모델과의 상호작용에 집중해 개발하는 방식

PRD

제품 요구사항 문서(Product Requirements Document)로, 프로젝트 목표와 기능을 정리한 문서

MVP

최소 기능 제품(Minimal Viable Product). 핵심 기능만 갖춘 초기 버전

LLM

대형 언어 모델(Large Language Model). AI 코딩에서 핵심으로 활용되는 언어 처리 모델

버전 관리

Git과 GitHub를 활용해 코드 변경 이력을 기록·관리하는 방법

디버깅

코드나 애플리케이션의 오류를 찾아 수정하는 과정

프레임워크

AI가 코드 생성 시 참고할 라이브러리나 구조를 지정하는 도구

체크포인트

중간 저장 지점을 설정해 문제가 생겼을 때 이전 상태로 복원하는 전략

컨텍스트

AI에게 더 나은 결과를 제공하기 위해 프롬프트에 포함하는 추가 정보

AI 코딩 에디터

Replet, Windsurf, Cursor 등 AI를 활용해 코드 작성과 배포를 지원하는 도구

[00:00:00] 인트로 및 영상 개요

이 영상의 목표와 학습 로드맵을 소개합니다. 바이브 코딩으로 수천 시간의 학습과 시행착오 없이 생산성을 높이는 방법을 다룰 예정입니다.

[00:00] 바이브 코딩은 코드 개발 방식을 근본적으로 변화시키는 게임 체인저입니다. 수백, 수천 시간의 학습과 시행착오를 통해 얻은 지식을 요약해서 공유하겠습니다.
[00:22] 이 영상에서는 바이브 코딩의 기본 원칙, 프레임워크를 소개하고, 다양한 도구에서 이러한 원칙을 적용하는 방법을 알려드리겠습니다. 중간중간 평가 질문도 있으니 끝까지 주의 깊게 봐주세요.
[00:44] 영상 구성은 바이브 코딩의 정의, 원칙, Replet Windsurf를 활용한 실제 예시, 그리고 실용적인 팁과 실패 사례를 피하는 방법 순으로 진행됩니다.
[01:12] 바이브 코딩은 OpenAI 창립 멤버인 안드레 카파시가 2025년에 만든 용어로, '분위기에 몸을 맡기고, 기하급수적 성장을 받아들이며, 코드 존재를 잊는 방식'을 의미합니다.
[00:01:14] 바이브 코딩 정의

OpenAI 공동 창립자 Andrej Karpathy가 제안한 개념을 설명합니다. ‘코드를 잊고 AI의 vibe에 집중한다’는 철학이 어떻게 개발 방식을 변화시키는지 살펴봅니다.

[01:34] 언어 모델(Cursor Composer, Sonnet 등)의 발전으로 원하는 기능을 말로 설명하기만 해도 코드를 자동으로 생성해주는 수준에 도달했습니다. 하지만 모든 상황에서 완벽하게 작동하는 마법은 아닙니다.
[02:20] 바이브 코딩에는 원칙과 질서가 존재하며, 이를 제대로 이해하기 위해 Replit의 '바이브 코딩 101' 강좌를 소개합니다. 이 강좌는 생각하기, 프레임워크, 체크포인트, 디버깅, 맥락이라는 다섯 가지 기본 기술을 설명합니다.
[00:02:29] 기본 원칙 개요

효과적 바이브 코딩을 위한 다섯 가지 필수 스킬(사고, 프레임워크, 체크포인트, 디버깅, 컨텍스트)을 개괄적으로 정리합니다.

[02:45] 체스 프로그램 개발을 예로 들어 바이브 코딩의 네 가지 사고 수준을 설명합니다. 논리적 사고(게임이 무엇인지), 분석적 사고(게임 플레이 방법), 계산적 사고(게임 논리를 어떻게 구현할지), 절차적 사고(게임에서 어떻게 뛰어나게 될 수 있는지)를 단계별로 거쳐야 합니다.
[03:15] 바이브 코더들이 가장 많이 개선해야 할 부분은 자연어로 설명하는 과정에서 실제로 무엇을 만들고 싶은지 정확히 생각하지 않는 것입니다. 자신도 명확히 정의하지 못한 것을 AI에게 만들어달라고 요청하는 것은 불공평합니다.
[00:03:50] 사고의 네 단계

논리적·분석적·계산적·절차적 사고 네 가지 레벨을 통해 PRD(Product Requirements Document)를 작성하고 AI에 명확하게 요구사항을 전달하는 방법을 설명합니다.

[04:14] 모든 사고 수준을 거치고 AI에게 명확하게 요구사항을 전달하는 가장 좋은 방법은 PRD(제품 요구사항 문서)를 만드는 것입니다. 이것은 클라이언트와 함께 정의한 실제 AI 기반 맞춤형 영양 계획의 예시입니다.
[04:30] 실제 고객과 정의한 AI 기반 당뇨병 환자용 맞춤형 영양 계획 PRD를 소개합니다. 프로젝트의 목표는 의료 분석, 체중, 식습관, 칼로리 소비 등 다양한 건강 관련 요소를 고려하는 시스템을 개발하는 것입니다.
[04:57] 분석적 사고를 기술 섹션에서 설명합니다. 프로젝트에 필요한 기술로는 Python, 헬스케어 데이터 처리, OpenAI API, 이미지 처리 및 UI 개발이 포함됩니다. 시작하기에 이 정도 정보면 충분합니다.
[05:26] 계산적 사고는 주요 기능 섹션에서 표현되며, 마일스톤 1과 2로 나뉩니다. 첫 번째는 개인 건강 지표와 사회경제적 요소를 포함한 맞춤형 영양 계획 엔진이고, 두 번째는 문해력과 교육 수준을 고려한 맥락적 맞춤화입니다.
[05:58] 절차적 사고는 가장 높은 수준의 사고로, PRD 전체에 세부 사항을 추가해 구현됩니다. 개인 건강 지표, 사회경제적 요소, 맥락적 맞춤화 등을 자세히 정의하고, 타겟 사용자와 그들의 경험을 고려할수록 더 명확한 비전과 좋은 결과를 얻을 수 있습니다.
[06:40] 이러한 PRD를 혼자 작성할 필요는 없으며, 도움이 되는 프롬프트를 화면에 제공할 예정입니다.
[06:51] 효과적인 앱 개발을 위해 PRD(제품 요구사항 정의서)를 작성하는 데 시간을 투자해야 합니다. 명확한 비전을 처음부터 갖는 것이 중간에 수정하는 것보다 훨씬 효율적입니다.
[07:08] 바이브 코딩의 중요한 원칙은 프레임워크를 알고 활용하는 것입니다. 대부분의 경우 누군가 이미 유사한 솔루션을 만들었으며, AI는 이를 학습했기 때문에 적절한 프레임워크를 지정하면 더 나은 결과를 얻을 수 있습니다.
[00:07:09] 프레임워크 활용법

이미 존재하는 라이브러리나 패키지를 명시해 AI가 최적의 솔루션을 생성하도록 유도하는 전략을 안내합니다. 예: React, Tailwind, Three.js 등.

[07:37] 웹 앱 개발 시 React, CSS, HTML, JavaScript, Tailwind CSS와 같은 특정 프레임워크를 명시하거나, 애니메이션을 위한 3.js와 같은 패키지를 지정하는 것이 좋습니다.
[07:57] 최적의 프레임워크를 모를 경우 AI에게 추천을 요청할 수 있습니다. 예를 들어 드래그 앤 드롭 UI 구현을 위한 React 프레임워크를 추천해달라고 요청하는 식입니다.
[00:08:04] 체크포인트·버전 관리

Git과 GitHub를 통한 버전 관리 흐름을 소개합니다. 중간 저장 지점을 설정해 데이터 손실을 방지하고 급작스러운 오류를 빨리 복구하는 방법을 제시합니다.

[08:15] 바이브 코딩에서는 모든 구현 방법을 알 필요는 없지만, 프론트엔드와 백엔드의 기본 개념과 통신 방식, 주요 프레임워크에 대한 이해가 필수적입니다. AI와 함께 구축하며 배우는 과정이 더 나은 개발자가 되는 길입니다.
[08:42] 바이브 코딩의 다음 원칙은 체크포인트와 버전 관리를 항상 유지하는 것입니다. 개발 과정에서 문제는 필연적으로 발생하기 때문에 적절한 관리가 필요합니다.
[09:06] 버전 관리의 중요성과 버전 관리 부재로 인한 작업물 손실 사례를 소개합니다. 한 개발자가 2주간 작업한 SaaS 프로젝트가 손상되어 모든 것을 다시 시작해야 했던 안타까운 경험을 공유합니다.
[09:34] 버전 관리의 필요성을 강조하며, 일부 소프트웨어는 내장 버전 관리 기능이 있지만 Git과 GitHub 사용법을 배우는 것이 가장 좋은 방법이라고 설명합니다.
[09:50] Git과 GitHub의 기본 개념을 설명합니다. Git은 버전 관리 소프트웨어이고, GitHub은 코드를 클라우드에 저장하고 공유하는 웹사이트입니다. Git 설치 방법을 간단히 안내합니다.
[00:10:17] 디버깅 전략

오류 메시지, 스크린샷, 파일 경로 등 풍부한 맥락을 AI에 제공해 문제를 식별하고 해결하는 반복적·방법론적 디버깅 과정을 강조합니다.

[10:19] Git의 기본 명령어를 소개합니다. 'git init'으로 시작해 'git status'로 파일 상태를 확인하고, 'git add'로 파일을 추적하며, 'git commit'으로 변경 사항을 저장하는 기본 워크플로우를 설명합니다.
[10:55] Git commit 명령어의 사용법을 자세히 설명합니다. 변경 내용을 명시적으로 저장하고 변경 내용을 설명하는 메시지를 함께 저장하는 방법을 알려줍니다.
[11:18] Git을 사용한 버전 관리의 기본 작업 흐름: 변경사항을 커밋하고, git log로 변경 기록을 확인하며, git reset으로 커밋을 되돌릴 수 있습니다.
[11:28] GitHub에 코드 공유하기: github.com에서 저장소 생성 후, 로컬 저장소와 연결하고, 브랜치 이름을 main으로 설정한 다음, 모든 내용을 GitHub에 푸시합니다.
[12:08] AI 코드 에디터 활용: 정확한 git 명령어를 알 필요 없이 구조만 이해하고 자연어로 AI에게 요청할 수 있습니다. 바이브 코딩의 핵심은 고수준 구조와 흐름을 이해하는 것입니다.
[12:33] 디버깅의 중요성: 바이브 코딩의 또 다른 중요한 기술로, 문제가 어디에 있고 무엇인지 파악한 후 해결책을 적용하는 체계적이고 철저한 접근이 필요합니다.
[00:13:01] 컨텍스트 제공의 중요성

목업, 실행 환경, 버전 정보, 샘플 데이터 등 가능한 모든 정보를 프롬프트에 포함해 AI 출력의 정확도와 완성도를 극대화하는 팁을 다룹니다.

[13:14] 디버깅 과정: 문제의 위치와 성격을 파악한 후 다양한 해결책을 적용해야 합니다. 바이브 코딩에서는 AI에게 문제를 지적하고 해결책을 제시하도록 하는 방법이 효과적입니다.
[13:34] AI에게 문제점을 지적하고 스스로 해결책을 찾도록 하는 것이 가장 효과적입니다. 오류 메시지를 복사해서 AI에게 보내면, AI가 다양한 해결책을 제시합니다.
[13:55] 문제 해결 과정에서는 인내심을 갖고 AI가 제안하는 변경 사항을 수락하며, 여러 번의 시도가 필요할 수도 있습니다. 대부분의 경우 이 방식으로 문제가 해결됩니다.
[14:09] 개발하는 시스템에 대한 기본적인 이해가 있으면 문제 해결이 더 쉬워집니다. 파일 구조를 이해하면 문제가 있는 파일이나 섹션을 정확히 지적할 수 있습니다.
[14:26] UI 컴포넌트가 겹치는 문제 해결 사례: 정적 치수가 아닌 동적 처리가 필요하다고 구체적으로 지적해서 AI가 문제를 해결할 수 있었습니다.
[14:43] 바이브 코딩의 마지막 원칙은 맥락(컨텍스트) 제공입니다. AI에게 더 많은 정보와 세부 사항을 제공할수록 더 좋은 결과를 얻을 수 있습니다.
[15:05] 맥락 제공 방법으로는 상세한 프롬프트, 목업, 예시, 추가 데이터, 환경 정보, 그리고 오류 발생 시 전체 오류 메시지와 스크린샷을 제공하는 것이 포함됩니다.
[15:40] 바이브 코딩의 원칙을 기억하는 기억법: 'The friendly cat dances constantly thinking frameworks' - 프레임워크, 체크포인트, 디버깅, 컨텍스트를 기억하는 데 도움이 됩니다.
[15:49] 바이브 코딩에서는 체크포인트, 디버깅, 컨텍스트의 중요성을 강조하며, 학습자 평가를 위한 질문이 제공됩니다. 화면에 표시된 질문에 댓글로 답변하여 이해도를 확인하게 됩니다.
[16:05] 바이브 코딩 예시로 Replet 플랫폼이 소개되었습니다. Replet은 AI를 활용해 애플리케이션을 빠르게 개발하고 배포할 수 있는 초보자 친화적 클라우드 플랫폼입니다.
[00:16:06] 실전 예시 – Replet

Replet 플랫폼에서 SEO 태그 검사 앱을 PRD 작성부터 배포까지 단계별로 구현합니다. 도구별 인터페이스와 버전 관리 기능을 비교합니다.

[16:19] SEO 메타태그를 표시하는 간단한 앱 개발을 위해 ChatGPT를 활용하여 PRD(제품 요구사항 문서)를 생성하는 과정을 보여줍니다. 구체적인 프롬프트로 앱의 기능과 목적을 정의합니다.
[16:56] 앱의 핵심 기능으로는 URL 입력, HTML 가져오기 및 파싱, SEO 태그 추출, 시각적 피드백 미리보기가 있으며, 100점 만점의 총점 표시 기능을 추가하기로 결정했습니다.
[17:30] 강사는 핵심 기능에 집중하기 위해 '좋으면 좋겠다' 항목들을 제거하고, 생성된 PRD를 Replet에서 사용할 수 있는 프롬프트로 변환해 달라고 요청했습니다.
[18:01] 마지막으로 앱의 UI/UX를 위한 이미지 목업과 인스피레이션을 생성해달라고 요청하고, 이를 다운로드하여 Replet에 프롬프트로 붙여넣기 할 준비를 합니다.
[18:28] ChatGPT 프롬프트와 영감이 된 디자인 이미지를 복사해 'SEO 태그 스카우트'라는 프로젝트를 시작합니다. 추가 기능은 나중에 넣을 수 있어서 현재는 거절하고 진행합니다.
[18:49] Replit이 자동으로 디자인과 파일을 생성하는 과정을 보여줍니다. Replit은 기본적인 버전 관리가 가능하지만, 결국에는 Git 사용을 권장합니다.
[19:07] 프로젝트를 더 깊이 이해하기 위해 어시스턴트 기능을 활용하여 파일 구조를 질문하는 방법을 추천합니다. 이를 통해 바이브 코더로서 실력을 크게 향상시킬 수 있습니다.
[19:33] 클라이언트 측의 리액트 코드와 서버 측의 주요 진입점 위치를 소개합니다. 코드 이해를 위해 '어시스턴트로 설명' 기능을 활용할 수 있습니다.
[20:13] 완성된 앱을 lonelyoctopus.com으로 테스트합니다. 처음에는 작동하지 않았지만 다시 시도하자 제목, 메타 설명, 구글/소셜 미디어 미리보기 등을 보여줍니다.
[00:20:22] 실전 예시 – Windsurf

Windsurf(로컬 AI 코드 에디터)에서 동일한 앱을 구축하며 환경 설정, 패키지 설치, 배포 과정을 시연하고 Replet과의 차이점을 분석합니다.

[20:49] 다른 웹사이트(theuselesswebsite.com)를 테스트하여 웹사이트에 따라 분석 결과가 달라지는지 확인합니다.
[21:04] 웹사이트 표시 내용이 변경되는 것을 확인하고, 디자인이 시각적으로 매력적이지 않아 컬러풀하게 변경해 달라고 요청합니다.
[21:26] AI에게 변경 요청을 할 때는 한 번에 하나씩 요청하는 것이 혼란을 줄이는 좋은 방법이라고 설명합니다.
[21:44] Replit에서는 개발 URL과 QR 코드를 통해 다른 기기에서도 웹사이트가 어떻게 보이는지 확인할 수 있는 기능을 보여줍니다.
[22:03] 더 복잡하고 확장 가능한 프로젝트를 위해서는 Windsor나 Cursor 같은 AI 코드 에디터로 전환하는 것이 좋다고 설명합니다.
[22:44] 어떤 도구를 사용하든 바이브 코딩의 기본 원칙과 스킬셋은 동일하며, 도구 선택은 프로젝트 요구사항과 개발자의 경험 수준에 따라 달라집니다.
[23:00] Replit은 클라우드 기반으로 빠르고 사용하기 쉽지만, Cursor와 Windsor는 더 많은 기능과 확장성을 제공하면서도 학습 곡선이 더 높다는 트레이드오프가 있습니다.
[23:24] 코딩 환경 설정의 어려움과 중요성에 대해 설명합니다. 환경 설정과 디버깅, 배포, 모니터링 방법을 배우는 것이 필요하며, 많은 문제가 환경 설정 실수로 발생합니다.
[23:35] 윈드서프(Windsurf)와 캐스케이드(Cascade) 개발 환경을 소개하며, 클라우드 3.7 소넷 모델을 사용해 로컬 개발 환경을 설정하는 과정을 보여줍니다.
[23:58] 로컬 환경에서 터미널 명령어를 실행할 때 보안 문제를 고려해 자동 실행 대신 각 명령어를 수동으로 확인하고 수락하는 과정을 설명합니다.
[24:28] 개발 환경 설정이 완료되고 브라우저 미리보기를 통해 결과물을 확인합니다. Replit보다 더 나은 결과물을 보여주며 제공한 디자인 영감과 유사하게 구현되었습니다.
[25:08] 다양한 웹사이트에서 SEO 태그 분석을 시도해보고, Replit과 Windfs 간의 결과 차이를 발견합니다. UI 개선을 위해 URL 입력 방식과 복사-붙여넣기 기능에 대한 수정을 요청합니다.
[26:18] 웹사이트 디버깅 - lonelyoctopus.com 사이트 작업 중 오류가 발생했으나, 다시 시도하여 해결했습니다. 아직 중앙 정렬과 색상 등 수정할 부분이 남아있지만 기본 기능은 작동합니다.
[26:42] Git과 GitHub 활용 - 프로젝트에 버전 관리를 위해 Git을 초기화하고, 모든 파일을 추가한 후 커밋하는 방법을 시연했습니다. 이를 통해 GitHub에서 코드를 관리할 수 있습니다.
[27:18] 바이브 코딩 마인드셋 소개 - 작게 시작해서 확장해 나가는 접근법의 중요성을 강조합니다. 최소 실행 가능한 제품(MVP)부터 시작하여 기능이 작동하는 것을 확인한 후 반복적으로 개선해 나가는 방식이 바람직합니다.
[00:27:29] 개발 마인드셋과 팁

MVP(최소 기능 제품) 사고방식을 통해 점진적으로 기능을 확장하는 법과, 개발 모드(구현 vs 디버깅)별로 집중해야 할 전략을 제시합니다.

[28:00] 지나치게 복잡한 초기 구상의 위험성 - 너무 많은 기능과 세부 사항을 한꺼번에 구현하려고 할 경우 발생할 수 있는 오류와 문제점들을 경고하며, 작동하는 기본 제품을 먼저 만드는 것의 중요성을 재차 강조합니다.
[28:20] 바이브 코딩의 두 가지 모드 소개 - 바이브 코딩 101 과정에서 배운 프레임워크를 언급하며, 개발에는 두 가지 핵심 모드만 있다는 개념을 소개하기 시작합니다.
[28:27] 바이브 코딩에는 새 기능 구현과 오류 디버깅 두 가지 모드만 있습니다. 새 기능 구현 시에는 관련 컨텍스트 제공, 프레임워크 언급, 상세 문서화, 점진적 변경 및 버전 관리가 중요합니다.
[28:48] 오류 디버깅 모드에서는 먼저 프로젝트 구조를 이해하고, 문제의 원인을 파악한 후 언어 모델에 충분한 컨텍스트(스크린샷, 오류 메시지, 관련 파일)를 제공하여 해결책을 얻는 것이 중요합니다.
[00:29:00] 고급 전략 – 규칙 파일

시스템 프롬프트에 보안·성능 규칙을 정의해 AI 에이전트의 코드 변경을 통제하는 방법을 설명합니다. API 호출 제한, 인증 적용 등 보안 가이드도 포함합니다.

[29:30] 더 고급 팁으로는 코딩 에이전트를 위한 작성 규칙이나 문서화가 있습니다. 코드 변경 최소화, API 엔드포인트 비율 제한 설정, 보안을 위한 캡챠 활성화 등의 규칙을 명시할 수 있습니다.
[30:10] 온라인에서 특정 앱이나 언어에 맞는 규칙을 찾아 규칙 파일에 추가할 수 있으며, 이를 replit, cursor 등에 제공하면 특히 개발 배경이 없는 사람들에게 매우 유용합니다.
[30:34] 개발 배경이 없는 사람들도 앱의 안전과 보안을 위한 규칙들을 배워야 하며, 특히 API 키 노출 방지 같은 보안 관행에 대해 알아두고 AI 규칙 파일에도 이를 추가해야 해킹을 방지할 수 있다.
[30:57] 스타일링 문서 참조, 코드 리팩토링, MCP 서버 사용, AI 에이전트에 도구와 기능 부여하는 방법 등 더 많은 내용을 후속 영상에서 다룰 수 있으며, 특히 윈드서프나 커서 같은 AI 코드 에디터에 대한 고급 예제도 제공할 수 있다.
[00:31:03] 마무리 및 스폰서 소개

Brilliant STEM 학습 플랫폼을 소개하며 영상에서 다룬 바이브 코딩 기초를 복습합니다. 앞으로의 학습 방향과 후속 영상 예고로 영상을 마무리합니다.

[31:32] 이 바이브 코딩 기초 영상이 모범 사례를 염두에 두고 올바르게 시작하는 데 도움이 되었기를 바라며, 영상 이해도를 확인하기 위한 평가 질문에 댓글로 답변해 달라고 요청한다.
[31:50] 바이브 코딩에 관심 있는 시청자들은 STEM 과목에도 관심이 있을 것이라 생각하며, 영상 스폰서인 Brilliant을 소개한다. Brilliant은 수학, 과학, 프로그래밍, 데이터 분석, AI에 관한 인터랙티브 강의를 제공하는 STEM 학습 플랫폼이다.
[32:09] Brilliant은 단순 암기가 아닌 비판적 사고력과 깊은 이해를 기르는데 중점을 두며, 퀴즈와 비유를 통해 학습 동기를 유지한다. 모바일 앱으로 짧은 시간에도 효과적인 학습이 가능하며, 특히 프로그래밍 코스는 AI 시대에도 중요한 엔지니어적 사고력을 기르는데 도움이 된다.
[00:00] 제가 여러분을 위해 바이브 코딩을 배웠습니다. 자, 여기
[00:02] 요약본이 있습니다. 이걸로 여러분이 수백, 아마도
[00:03] 이 시점에서는 수천 시간을 절약할 수 있을 겁니다.
[00:06] 이 시간들은 제가 유튜브 튜토리얼을 보고,
[00:08] 강의를 듣는 데 썼지만, 솔직히 대부분은
[00:10] 바이브 코딩으로 제 애플리케이션을 개발하면서
[00:13] 시행착오를 겪은 시간이었습니다. 바이브
[00:15] 코딩은 정말 게임 체인저이며 제가
[00:17] 코딩하고 앱을 개발하는 방식을 근본적으로 바꿔놓았습니다.
[00:20] 그래서 이 영상에서는
[00:22] 바이브 코딩의 기본, 프레임워크 및
[00:24] 좋은 바이브 코딩의 원칙에 초점을 맞출 것입니다.
[00:25] 그런 다음 어떤 도구에서든 이러한
[00:27] 바이브 코딩의 원칙을 적용하는 방법도 알려드리겠습니다.
[00:30] 항상 그렇듯, 제 이야기만 듣는 것으로는
[00:31] 충분하지 않습니다. 그래서 이 영상 전체에 걸쳐서
[00:33] 약간의 평가가 있을 것입니다. 이 질문들에
[00:35] 답할 수 있다면,
[00:36] 축하합니다. 당신은
[00:37] 바이브 코딩의 기초에 대해 교육받은 것입니다.
[00:39] 자, 더 이상 지체하지 말고
[00:40] 시작하겠습니다. 이 영상의 일부는
[00:42] Brilliant의 스폰서를 받았습니다. 좋아요, 오늘 영상의
[00:44] 개요입니다. 먼저, 바이브 코딩을
[00:46] 정의하겠습니다. 그런 다음
[00:48] 좋은 바이브 코딩의 원칙에 대해 이야기할 것입니다.
[00:50] 그다음에는 Replet Windsurf를 사용한
[00:52] 바이브 코딩의 실제 예를 보여드리겠습니다.
[00:53] 마지막으로, 바이브 코딩 여정에서
[00:55] 도움이 될 매우 실용적인 팁과
[00:56] X와 Reddit에서 볼 수 있는 실패한 사례에
[00:58] 빠지지 않도록 하는 방법으로 마무리하겠습니다.
[01:01] 여러분이 그런 상황에 처하지 않기를 바랍니다.
[01:02] 그러니 끝까지 주의 깊게 보시기 바랍니다.
[01:04] 이제 바이브 코딩을 정의해 보겠습니다.
[01:06] 분명 많은 분들이 바이브 코딩이란 용어를
[01:08] 이미 여러 번 들어보셨을 겁니다. 이 용어는
[01:10] 안드레 카파시가 만든 용어인데, 그는
[01:12] 많은 업적 중에서도 OpenAI의
[01:14] 창립 멤버 중 한 명입니다.
[01:15] 2025년 2월 3일, 그는 X에
[01:17] 다음과 같은 글을 올렸습니다.
[01:18] "내가 바이브 코딩이라고 부르는 새로운 종류의 코딩이 있다.
[01:20] 이는 완전히 분위기에 몸을 맡기고,
[01:24] 기하급수적 성장을 받아들이며, 코드가 존재한다는 것조차 잊는 방식이다."
[01:28] 이것이 가능한 이유는 언어 모델들, 예를 들어
[01:30] Cursor Composer와 Sonnet가
[01:32] 너무나도 좋아지고 있기 때문입니다. 기본적으로 언어 모델에게
[01:34] 무엇을 만들고 싶은지 말하기만 하면 모델이
[01:36] 알아서 만들어줍니다. 어떤 사람들은 말 그대로
[01:38] 대화하듯 말하기만 합니다. 저도 방금
[01:40] 슈퍼 위스퍼로 Composer와 대화했습니다. 키보드에
[01:42] 거의 손도 대지 않았죠. 예를 들어,
[01:43] 다음과 같이 프롬프트를 줄 수 있습니다.
[01:45] "Daily Vibes라는 간단한 React 웹
[01:46] 앱을 만들어줘. 사용자가 이모지 목록에서
[01:48] 기분을 선택할 수 있게 해줘.
[01:50] 선택적으로 짧은 메모를 작성하고
[01:51] 제출할 수 있게 해줘. 아래에는
[01:52] 날짜와 메모가 포함된 과거 기분 입력 목록을
[01:54] 보여줘." 네, 그게 다입니다. 언어 모델에게
[01:56] 주면 코드를 생성해 줍니다.
[01:58] 짜잔, 이렇게 됩니다. 매우
[02:00] 간단해 보이죠? 정말 대단하지 않나요? 이것이
[02:02] 코딩하고 앱을 만드는 방식을 근본적으로
[02:04] 바꾸는 것을 볼 수 있습니다. 하지만
[02:05] 그렇다고 해서 이것이
[02:07] 마법처럼 작동하는 것은 아닙니다. 바이브 코딩이
[02:09] 모든 것에 마법처럼 작동하는 것은 아닙니다.
[02:13] 하지만 그렇다고 해도, 이것은
[02:16] 블랙 매직이 아니며 바이브 코딩이
[02:17] 모든 것에 마법처럼 작동하는 것은 아닙니다.
[02:19] 이 혼돈 속에서도 원칙과 질서가 있습니다.
[02:20] 이런 혼돈 속에서도 여전히 원칙과 질서가 존재합니다.
[02:22] 특히 AI에게 무언가를 만들도록 요청하는 방식에는 말이죠.
[02:25] 그럼 이제 더 이상 지체하지 말고 이러한 원칙들을 살펴보겠습니다.
[02:27] 제가 발견한 바이브 코딩의 원칙과 기초를 가장 잘 다루는 강좌는
[02:29] Replit과 함께하는 '바이브 코딩 101'이라는 강좌입니다.
[02:31] 이것은 Replit에서 만든 무료 강좌로,
[02:33] Replit은 딥러닝 AI와 협업하여 바이브 코딩 앱을 만드는 플랫폼입니다.
[02:35] 이 강좌에서는 바이브 코딩의 다섯 가지 기본 기술을 설명합니다.
[02:38] 바로 생각하기, 프레임워크, 체크포인트, 디버깅, 그리고 맥락입니다.
[02:39] 여러분은 무엇을 만들고 싶은지 철저히 생각한 다음
[02:41] AI와 그것을 소통해야 합니다.
[02:43] 여기서 '철저히 생각한다'는 것은 실제로 네 가지 다른 수준의 사고를 의미합니다.
[02:45] 예를 들어, 경쟁적인 체스를 할 수 있는 컴퓨터 프로그램을 만들고 싶다고 해봅시다.
[02:46] 처음 두 단계의 사고는 아마 매우 명확하고 직관적일 것입니다.
[02:48] 논리적 사고는 '게임이 무엇인가?'라는 질문이고, 이 경우에는 체스입니다.
[02:50] 다음 단계인 분석적 사고는 '이 게임을 어떻게 플레이하는가?'
[02:51] '이 게임의 주요 목표는 무엇인가?'라는 질문을 던지는 것입니다.
[02:53] 세 번째 단계는 계산적 사고입니다.
[02:55] 이 게임의 논리를 체스판의 복잡한 문제와 구성에 어떻게 맞출 것인지 알아내야 합니다.
[02:57] 또한 이러한 규칙을 어떻게 강제할 것인지도 생각해야 합니다.
[02:58] 마지막으로 가장 높은 수준의 사고는 절차적 사고입니다.
[03:00] 이것은 '이 게임에서 어떻게 뛰어나게 될 수 있는가?'라는 질문을 던질 때입니다.
[03:02] 단순히 게임을 하는 것뿐만 아니라 잘하고 싶은 것이죠.
[03:03] 따라서 어떤 전략을 사용할 수 있는지 생각해야 합니다.
[03:05] 어떤 경계를 밀어붙여서 컴퓨터가 게임을 잘 할 수 있도록
[03:06] 프로그래밍할 수 있는지 고려해야 합니다.
[03:08] 그리고 물론, 이렇게 자연어로 설명한 내용을
[03:10] AI에게 전달하여 구축하도록 해야 합니다.
[03:12] 게임이든, 웹 앱이든, 무엇을 구축하려고 하든
[03:13] 정확히 무엇을 만들고 싶은지 제대로 정의하기 위해
[03:15] 이 네 가지 수준의 사고를 거쳐야 합니다.
[03:17] 솔직히 이 부분이 대부분의 바이브 코더들이
[03:18] 가장 개선할 여지가 많은 부분입니다.
[03:20] 왜냐하면 종종 자연어만으로 원하는 것을 설명하다 보니
[03:22] 실제로 무엇을 만들고 싶은지, 최종 제품이 어떤 모습이길 원하는지
[03:24] 제대로 생각하지 않는 경우가 많습니다.
[03:25] 그리고 사실 이건 불공평합니다. 왜냐하면 당신이 원하는 것이
[03:28] 정확히 무엇인지 스스로도 생각하지 않았다면,
[03:30] 어떻게 AI가 당신이 원하는 것을 알아내길 기대할 수 있을까요?
[03:31] 실제로 이 모든 사고 수준을 거치고
[03:33] 그것을 AI에게 명확하게 전달하는 가장 좋은 방법은
[03:35] PRD라는 것을 만드는 것입니다.
[03:36] PRD는 제품 요구사항 문서(Product Requirements Document)입니다.
[03:38] 이것은 단순히 게임을 하는 것이 아니라
[03:40] 잘 하고 싶은 것입니다. 따라서 어떤 전략을
[03:41] 사용할 수 있는지 생각해야 합니다. 어떤 경계를
[03:43] 밀어붙여 컴퓨터가 게임을 잘 할 수 있도록
[03:45] 프로그래밍할 수 있는지 생각해야 합니다.
[03:46] 물론, 이렇게 자연어로 설명한 내용을
[03:48] AI에게 전달하여 구축하도록 해야 합니다.
[03:50] 이제, 게임이든 웹 앱이든 무엇을 구축하든
[03:51] 정확히 무엇을 만들고 싶은지 제대로 정의하기 위해
[03:53] 이 네 가지 수준의 사고를 거쳐야 합니다.
[03:54] 솔직히 이 부분이 대부분의 바이브 코더들이
[03:56] 가장 개선할 여지가 많은 부분입니다.
[03:58] 왜냐하면 종종 자연어만으로 원하는 것을 설명하다 보니
[03:59] 실제로 무엇을 만들고 싶은지, 최종 제품이 어떤 모습이길 원하는지
[04:01] 제대로 생각하지 않는 경우가 많습니다.
[04:03] 그리고 사실 이건 불공평합니다. 자연어만 사용하다 보니
[04:05] 당신이 원하는 것이 정확히 무엇인지 스스로도 생각하지 않았다면,
[04:07] 어떻게 AI가 당신이 원하는 것을 알아내길 기대할 수 있을까요?
[04:08] 실제로 이 모든 사고 수준을 거치고
[04:10] 그것을 AI에게 명확하게 전달하는 가장 좋은 방법은
[04:11] PRD라고 하는 것을 만드는 것입니다.
[04:13] PRD는 제품 요구사항 문서(Product Requirements Document)입니다.
[04:14] 이것이 바로 우리가 고객 중 한 명과 함께
[04:16] 정의한 실제 PRD입니다. 이것은 AI 기반의
[04:18] 맞춤형 영양 계획을 위한 것입니다.
[04:19] 그리고 실제로 각 사고 수준을 거치고
[04:21] AI에게 명확하게 전달하는 가장 좋은 방법은
[04:23] PRD라고 하는 것을 만드는 것입니다.
[04:25] 이것은 제품 요구사항 문서입니다. 이것은
[04:27] 우리가 고객 중 한 명과 함께 정의한
[04:29] 실제 PRD입니다. 이것은 AI 기반의
[04:30] 고객 중 한 명과 함께 정의한 실제 PRD입니다.
[04:32] 이것은 AI 기반의
[04:34] 당뇨병 환자를 위한 맞춤형 영양 계획입니다.
[04:36] 첫 번째 단계의 사고는 논리적 사고로
[04:38] 우리가 무엇을 구축하고자 하는지 정의하는 것입니다.
[04:39] 이것은 프로젝트 개요의 일부입니다.
[04:41] 우리는 이 프로젝트의 목표가
[04:43] 당뇨병 환자를 위한 맞춤형 영양 계획을
[04:44] 제공하는 AI 기반 시스템을 개발하는 것이라고 작성했습니다.
[04:46] 이 시스템은 개인별 맞춤 영양 계획을 만들어줍니다.
[04:48] 이 시스템은 다양한 건강 관련 요소를
[04:49] 고려할 것입니다. 예를 들어 의료 분석,
[04:51] 체중, 식습관,
[04:52] 칼로리 소비 등과 같은 요소들을 고려합니다.
[04:54] 다음 단계의 사고인
[04:56] 분석적 사고는
[04:57] 기술 섹션에 포함되어 있습니다.
[05:00] 여기서 원하는 것을 구축하기 위해
[05:02] 필요한 것들을 나열합니다.
[05:04] 이 경우에 우리는 Python,
[05:05] 헬스케어 데이터 처리, OpenAI
[05:07] API, 시각적 계획을 위한 이미지 처리,
[05:08] 그리고 UI 개발이라고 작성했습니다.
[05:11] 필요하다면 더 자세하게 설명할 수도 있습니다.
[05:13] 만약 특정 패키지에 대해
[05:14] 더 구체적으로 알고 있거나
[05:16] 어떤 프론트엔드와 백엔드를 사용할지
[05:18] 더 구체적으로 알고 있다면 상세하게 작성할 수 있지만,
[05:19] 시작하기에는 이 정도면 충분합니다.
[05:21] 계산적 사고에 대해서는,
[05:22] PRD에 주요 기능 섹션을 포함시켜
[05:24] 표현하는 것을 선호합니다.
[05:26] 여기서 우리는 애플리케이션에 나타나길 원하는 것을
[05:30] 명확하게 정의하고 계획할 수 있습니다.
[05:32] 여기서는 마일스톤 1과 마일스톤 2로
[05:34] 나누어 설명했습니다.
[05:36] 첫 번째는 일반화된
[05:38] 맞춤형 영양 계획 엔진으로,
[05:40] 개인 건강 지표와
[05:41] 사회경제적 요소와 같은
[05:42] 특정 지표를 포함합니다.
[05:44] 레벨 2는 더 많은 맥락적
[05:46] 맞춤화를 제공하고자 하는 단계로,
[05:47] 특히 사람들의 문해력과 교육 수준을
[05:50] 고려하고 애플리케이션을 적응형으로 만들어
[05:52] 다양한 유형의 사용자들에게 더 접근성을 높이는 것입니다.
[05:55] 예를 들어 문해력이 낮은 사람들을 위한 것도 포함합니다.
[05:56] 이제 절차적 사고에 대해 살펴보겠습니다.
[05:58] 이는 가장 높은 수준의 사고로,
[06:00] 이 애플리케이션을 어떻게 하면
[06:02] 최상의 상태로 만들 수 있을지 생각하는 것입니다.
[06:05] 이것은 PRD 전체에 걸쳐
[06:06] 가능한 한 많은 세부 사항을 추가함으로써 구현됩니다.
[06:09] 예를 들어, 개인 건강 지표와 같은 요소들을
[06:11] 정확히 정의하는 것입니다. 의료 분석이나 식이 섭취 데이터,
[06:14] 그리고 소득, 위치,
[06:16] 지역 식품 가용성과 같은 사회경제적 요소들,
[06:18] 그리고 어떤 유형의 맥락적 맞춤화가 필요한지를
[06:20] 자세히 정의합니다.
[06:23] 하지만 가장 좋은 방법은
[06:24] 더 많은 세부 사항을 생각해 보는 것입니다.
[06:26] 타겟 사용자층에 대해 생각하고,
[06:28] 애플리케이션을 사용할 사람들과
[06:30] 그들이 경험해야 할 것들,
[06:31] 그리고 최상의 경험을 만들기 위해 필요한
[06:33] 모든 요소들을 고려할수록,
[06:35] 당신의 비전이 더 명확해지고
[06:37] PRD가 더 명확해지며
[06:38] AI로부터 더 좋은 결과를 얻을 수 있습니다.
[06:40] 참고로, 이 PRD를 혼자서
[06:42] 모두 작성할 필요는 없습니다.
[06:43] 지금 화면에 프롬프트를
[06:45] 띄우려고 합니다. 원하시면
[06:47] 스크린샷을 찍어두세요. 이
[06:49] 프롬프트는 여러분과 함께 작업하면서
[06:51] 이 프롬프트는 여러분과 함께 작동하며
[06:52] 앱을 만들기 위한 잘 정의된 PRD를
[06:54] 작성할 수 있도록 올바른 질문을 던질 것입니다.
[06:57] 이 섹션에 상당한 시간을 투자하는 것을
[06:58] 강력히 권장합니다.
[07:00] 항상 명확한 비전을 갖는 것이
[07:02] 훨씬 쉽습니다.
[07:03] 무언가를 만들고 나서 그것이 원하는 것이 아니라는 것을 깨닫고
[07:05] 중간에 수정하려고 하는 것보다요.
[07:07] 바이브 코딩의 다음 원칙은
[07:08] 프레임워크를 아는 것입니다.
[07:09] 여러분이 무엇을 만들고 싶든
[07:12] 누군가가 이미 그와 비슷한 것을
[07:13] 만들었을 가능성이 높습니다.
[07:15] 여러분이 이루려는 것과 매우 유사한
[07:17] 무언가가 이미 존재합니다.
[07:18] 그리고 AI는 이미 사용 가능한
[07:20] 기존 솔루션들로 학습되었기 때문에
[07:21] 만약 여러분이 원하는 것을 구축하기 위한
[07:23] 올바른 프레임워크로 AI를 안내할 수 있다면
[07:26] 처음부터 무언가를 만들어달라고 요청하는 것보다
[07:27] 훨씬 더 좋은 결과를 얻을 수 있습니다.
[07:29] 바이브 코딩에서 이를 가장 쉽게 하는 방법은
[07:31] AI가 사용하기를 원하는 프레임워크나
[07:33] 패키지를 나열하는 것입니다.
[07:34] 일종의 올바른 방향을 제시하는 것이죠.
[07:37] 예를 들어, 웹 앱을 위해
[07:39] React 백엔드와 CSS 및 HTML JavaScript 프론트엔드를
[07:41] 사용하고 싶다고 명시할 수 있습니다.
[07:42] 그리고 특별히 스타일링을 위해
[07:44] Tailwind CSS를 사용하고 싶다고 할 수도 있습니다.
[07:45] 또는 애니메이션을 만들고 싶다면
[07:47] 애니메이션 제작에 인기 있는 패키지인
[07:50] 3.js를 사용해달라고 구체적으로 말할 수 있습니다.
[07:52] 지금 여러분은 '티나, 하지만 이걸 구현하는 최선의 방법을
[07:54] 모른다면 어떡하나요?'라고 생각할 수 있습니다.
[07:56] 문제 없습니다.
[07:57] AI에게 그것을 먼저 알아내는데 도움을 요청할 수 있습니다.
[07:59] 예를 들어, 드래그 앤 드롭 UI를 구현하고 싶다면
[08:02] (매우 흔한 기능이죠)
[08:05] '이 앱에 드래그 앤 드롭을 구현할 수 있는
[08:06] React 프레임워크를 추천해주고 구현해줄 수 있나요?'
[08:08] 라고 물어볼 수 있습니다.
[08:10] 여기서 핵심은 다양한 프레임워크와
[08:12] 모든 구성 요소들이 어떻게 함께 작동하는지
[08:14] 배우는 것에 열린 마음을 갖는 것입니다.
[08:15] 바이브 코딩에서는 각각의 것들을 정확히
[08:17] 어떻게 구현하는지 알 필요는 없지만
[08:19] 여전히 구축하려는 것의
[08:20] 구조를 이해하는 것은 매우 중요합니다.
[08:22] 웹 애플리케이션을 만든다면
[08:23] 최소한 프론트엔드가 무엇인지
[08:25] 백엔드가 무엇인지, 프론트엔드와 백엔드가
[08:28] 어떻게 서로 통신하는지, 그리고
[08:30] 프론트엔드와 백엔드에서 일반적으로 사용되는
[08:31] 인기 있는 프레임워크가 무엇인지 알아야 합니다.
[08:33] AI와 함께 구축하고 개발하고
[08:34] 동시에 배우는 것이라고 생각하세요.
[08:37] 이것이 장기적으로 여러분을 훨씬 더 나은
[08:38] 바이브 코더로 만들어 줄 것입니다.
[08:41] 바이브 코딩의 다음 원칙은
[08:42] 항상 체크포인트와 버전 관리를
[08:44] 가지는 것입니다.
[08:46] 문제는 발생하기 마련입니다.
[08:48] 프론트엔드와 백엔드가
[08:49] 어떻게 서로 통신하는지,
[08:51] 그리고 프론트엔드와 백엔드에
[08:52] 많이 사용되는 인기 있는 프레임워크가 무엇인지 알아야 합니다.
[08:54] AI와 함께 구축하고, 개발하고
[08:56] 동시에 배우는 것이라고 생각하세요.
[08:58] 이것이 장기적으로 여러분을 훨씬 더 나은
[08:59] 바이브 코더로 만들어 줄 것입니다.
[09:02] 바이브 코딩의 다음 원칙은 항상
[09:04] 체크포인트와 버전 관리를 가지는 것입니다.
[09:06] 버전 관리를 하세요. 문제는 반드시 발생합니다.
[09:08] 이 사람처럼 되고 싶지 않으실 겁니다.
[09:10] 버전 관리를 몰라서 모든 작업물을 잃어버린
[09:12] 이 사람의 경우를 보세요.
[09:13] 이건 경각심을 주는 사례입니다.
[09:15] 그는 X에 이렇게 올렸습니다. "오늘은 최악의 날이었어요.
[09:17] 지난 2주 동안 작업해온 프로젝트가
[09:19] 손상되어 모든 것이 사라졌어요.
[09:21] 그냥 그렇게 제 SaaS가 없어졌어요.
[09:23] 2주간의 힘든 작업이 완전히 망가져버렸어요.
[09:25] 하지만 그래도 긍정적으로 생각하려고 노력하고 있네요.
[09:27] 처음부터 다시 시작했다고 합니다. 뭐 어쩌고저쩌고.
[09:29] 모든 것을 처음부터 다시 만들 거라고 하네요.
[09:30] 긍정적인 태도는 유지하고 있어요.
[09:32] 하지만 중요한 점은
[09:33] 항상 버전 관리를 하셔야 한다는 겁니다.
[09:34] Replit 같은 일부 소프트웨어는
[09:36] 상당히 괜찮은 버전 관리 기능이
[09:38] 이미 내장되어 있습니다.
[09:39] 하지만 대부분의 소프트웨어에서는
[09:41] 그리고 일반적으로 가장 좋은 방법은
[09:43] Git과 GitHub 사용법을 배우는 것입니다.
[09:44] 지금 바로 간단한 강의를 해드리겠습니다.
[09:46] Git과 GitHub 사용법을 이미 알고 계시다면
[09:48] 간단한 복습이라고 생각하세요.
[09:50] 우선, Git은 버전 관리 소프트웨어 자체이고
[09:51] GitHub은 코드와 저장소를
[09:53] 클라우드에 저장할 수 있게 해주는 웹사이트입니다.
[09:55] 이를 통해 다른 곳에 코드를 저장하고
[09:57] 다른 사람들과 공유할 수 있죠.
[09:58] 먼저 Git을 설치해야 합니다.
[10:00] 웹사이트에서 다운로드하거나
[10:02] 터미널/명령줄을 통해 할 수 있습니다.
[10:04] 또는 AI 코드 에디터 소프트웨어에
[10:05] Git을 설치해달라고 요청할 수도 있어요.
[10:06] Replit이든 뭐든 간에요.
[10:08] 처음부터 새 프로젝트를 시작하고
[10:09] 해당 폴더에 있다고 가정하면
[10:11] 사용할 명령어는 'git init'입니다.
[10:14] 이것은 Git을 초기화하는 명령어죠.
[10:16] 자, 이제
[10:16] 무언가를 추가하기 시작했다고 가정해보죠.
[10:19] README 파일을 추가하고 코딩을 시작해서
[10:21] 여러 파일이 생겼습니다.
[10:22] 'git status' 명령어를 사용하면
[10:24] 추적되지 않은 파일이 많다는 것을 보여줍니다.
[10:25] 이런 파일들을 추적하기 위해서는 'git add' 명령어를 사용합니다.
[10:28] 'git add readme.md'처럼 추적하고 싶은 파일을 지정하거나
[10:30] 아니면 'git add .'를 사용할 수 있습니다.
[10:31] 점(.)은 모든 것을 추적하라는 의미입니다.
[10:32] 하지만 파일을 추가하고 추적하는 것만으로는 충분하지 않습니다.
[10:34] 특정 버전을 저장하고 싶을 때는
[10:35] 'git commit' 명령어를 사용합니다.
[10:37] 이것은 파일에 변경한 내용을 명시적으로
[10:39] 커밋(저장)하는 부분입니다.
[10:41] 코드베이스 또는 저장소에서 변경한 내용을
[10:44] 설명하는 메시지도 입력할 수 있습니다.
[10:46] 예를 들어, 첫 번째 커밋은
[10:48] 'git commit -m "initial commit"'과 같이
[10:50] 코멘트로 "initial commit"을 남길 수 있습니다.
[10:52] 이렇게만 해도 변경 사항을 추적하고
[10:53] 저장할 수 있습니다.
[10:55] 특정 버전을 저장하고 싶을 때
[10:56] 'git commit' 명령어를 사용합니다.
[10:58] 여기서 파일에 변경한 내용을
[11:00] 명시적으로 커밋할 수 있습니다.
[11:02] 또한 코드베이스나 저장소에서
[11:03] 변경한 내용을 설명하는 메시지를 남길 수 있습니다.
[11:05] 예를 들어, 첫 번째 커밋은
[11:07] 'git commit -m'으로 시작해
[11:09] "initial commit"이라는 코멘트를 달 수 있습니다.
[11:11] 그리고 그게 다입니다. 이렇게만 해도
[11:13] 변경 사항을 추적하고
[11:14] 변경 사항을 저장할 수 있습니다.
[11:16] 커밋하면서요.
[11:18] 커밋하는 것입니다. 그저 계속
[11:19] 이 작업을 반복하면 되죠. 만약 변경 사항을
[11:20] 확인하고 싶다면, git log 명령어를
[11:22] 사용할 수 있습니다. 커밋을 되돌리고 싶다면
[11:24] git reset을 사용하면 됩니다. 자, 여러 변경사항을
[11:25] 만들고 작업을 완료한 후에
[11:27] 코드를 GitHub에 공유하고 싶을 수 있죠.
[11:28] github.com에 가서
[11:30] 새 저장소를 만들고 초기화하면 됩니다.
[11:32] 원격 URL을 복사한 다음,
[11:34] git remote add origin과 URL 명령어를 사용하세요.
[11:36] 이렇게 하면 컴퓨터에 저장된 로컬 저장소가
[11:38] GitHub에 연결됩니다. 그런 다음 현재 작업 중인
[11:40] 브랜치 이름을 변경하고 싶을 수 있습니다.
[11:42] 이것은 현재 작업 중인
[11:44] 저장소 버전을 의미하는데,
[11:46] main으로 부를 수 있습니다. git branch -m main
[11:47] 명령어를 사용하면 됩니다. 마지막으로,
[11:50] git push -u origin main 명령어로
[11:53] 로컬 저장소의 모든 것을
[11:54] GitHub에 푸시할 수 있습니다.
[11:56] 물론 다른 세부적인 명령어들과
[11:59] 뉘앙스, 특성들이 있지만,
[12:01] 제가 설명한 전체 워크플로우만 알아도
[12:02] 버전 관리가 어떻게 작동해야 하는지에 대한
[12:04] 좋은 이해를 갖게 될 것입니다.
[12:07] 흐름이 어떻게 되어야 하는지도 알 수 있고요.
[12:08] 비록 제가 입력해야 할 정확한 명령어를
[12:10] 다뤘지만, AI 코드 에디터를 사용한다면
[12:12] 실제로 이 정확한 명령어들을 알 필요는 없습니다.
[12:13] 구조만 알고 있다면,
[12:14] 자연어로 AI에게 직접 요청할 수 있습니다.
[12:16] 예를 들어 "git을 사용해서 이 변경사항을 커밋하고,
[12:18] 이 브랜치에 GitHub에 푸시하고, 이전 버전으로 되돌리고,
[12:19] 모든 것을 병합해줘"라고 말할 수 있습니다.
[12:21] 이해가 되셨길 바랍니다.
[12:23] 전반적으로, 바이브 코딩의 핵심은
[12:24] 이런 고수준 구조와 구성 요소, 그리고 흐름을
[12:27] 이해하는 것이라는 점을 알 수 있을 것입니다.
[12:29] 이를 통해 AI에게 구현 방향을 제시할 수 있게 됩니다.
[12:31] 구현은 AI가 뛰어난 부분입니다.
[12:33] 바이브 코딩의 다음 중요한 기술은
[12:35] 디버깅입니다. 무엇을 만들든 간에
[12:36] 문제가 발생할 것입니다. 단지 언제, 어떻게
[12:39] 문제가 발생할지의 문제일 뿐이죠.
[12:41] 그렇기 때문에 디버깅과 문제 해결이
[12:43] 실제 구축 과정만큼이나
[12:45] 중요한 것입니다. 이는 엔지니어들이
[12:47] 수년간의 훈련을 통해 익히는 기술입니다.
[12:50] 하지만, 많은 바이브 코더들, 특히 엔지니어링이나
[12:52] 코딩 배경이 없는 사람들에게
[12:54] 디버깅은 많은 경험이 없는
[12:55] 영역일 수 있습니다. 그래서 이 기술을
[12:57] 배우는 것이 매우 중요합니다.
[12:58] 최고의 디버깅은 매우 체계적이고 철저합니다.
[13:00] 먼저, 문제가 어디에 있고 무엇인지
[13:02] 파악해야 합니다. 이는 수년간의 훈련을 통해
[13:04] 엔지니어들에게 주입되는 기술입니다.
[13:06] 하지만 많은 바이브 코더들, 특히
[13:08] 엔지니어링이나 코딩 배경이 없는 사람들에게
[13:09] 디버깅은 경험이 많지 않은
[13:11] 영역일 수 있습니다. 그래서 이 기술을
[13:13] 배우는 것이 매우 중요합니다.
[13:14] 최고의 디버깅은 매우 체계적이고 철저합니다.
[13:16] 먼저, 문제가 어디에 있고
[13:18] 무엇인지 파악해야 합니다. 그런 다음
[13:20] 문제를 해결하기 위한 다양한 해결책을
[13:22] 적용해야 합니다. 매우 간단하게 들리죠?
[13:23] 하지만 디버깅의 기술을 과소평가하지 마세요.
[13:25] 바이브 코딩의 경우, 무언가 작동하지 않는다고
[13:27] 깨달았을 때, 제 경험상 가장 좋은 방법은
[13:29] 바이브 코딩에서 무언가 작동하지 않는다는 것을
[13:31] 알게 되었을 때, 제가 발견한 바로는
[13:32] 가장 좋은 방법은 AI에게 문제를 지적하고
[13:34] 가장 좋은 방법은 AI에게 문제를 지적하고
[13:37] AI가 스스로 해결책을 찾도록 하는 것입니다.
[13:39] 예를 들어, 최근에 저는 라이브 스트림을 했는데
[13:41] 애플리케이션을 만들고 있었습니다.
[13:42] 계속해서 오류가 발생했습니다.
[13:44] 그래서 오류 메시지를 복사해서
[13:46] 붙여넣고 '오류가 있다'고 말했더니
[13:47] AI가 '해결해 보겠습니다'라고 응답했고
[13:49] 문제를 해결하기 위한 다양한 솔루션을 제시했습니다.
[13:51] 대부분의 경우 여러분이 해야 할 일은
[13:52] 변경 사항을 수락하는 것뿐입니다.
[13:54] 여전히 작동하지 않는다면
[13:55] 여러 번의 시도가 필요할 수 있습니다.
[13:57] 인내심을 갖고
[13:58] 계속해서 문제점을 지적하고
[13:59] AI가 스스로 해결하도록 두면
[14:01] 대부분 문제가 해결됩니다.
[14:03] 하지만 쉽게 해결되지 않는 경우도 있습니다.
[14:05] 이럴 때는 여러분이 만들고 있는 것에 대한
[14:07] 기본적인 이해가 정말 도움이 됩니다.
[14:09] 예를 들어, 같은 오류가 계속 발생했지만
[14:11] 파일 구조와 파일들이 서로 어떻게 작동하는지
[14:13] 이해하고 있었기 때문에
[14:14] 어떤 파일이 문제를 일으키고 있는지와
[14:15] 어떤 섹션이 문제를 일으키는지
[14:17] 지적할 수 있었고
[14:18] AI가 이를 수정할 수 있었습니다.
[14:20] 또 다른 예로, UI 컴포넌트가 겹치는 문제가 있었습니다.
[14:22] 이 부분이 겹쳐있다고 AI에게 알렸더니
[14:24] AI가 이상한 변경을 했고 전체가 사라져 버렸습니다.
[14:26] 그래서 인내심을 갖고 제가 원하는 것을
[14:28] 더 구체적으로 설명했습니다.
[14:31] 코드를 보니 정적으로
[14:32] 특정 치수를 입력하고 있어서
[14:34] 웹사이트 방향에 따라
[14:35] 때로는 겹치고 때로는 겹치지 않았습니다.
[14:36] 그래서 어떤 경우에도 겹치지 않도록
[14:38] 동적으로 처리해야 한다고 지적했고
[14:40] 다행히 AI가 이를 수정할 수 있었습니다.
[14:42] 마지막으로, 바이브 코딩의 마지막 원칙은
[14:43] 맥락(컨텍스트)을 제공하는 것입니다.
[14:45] 기본 원칙은 더 많은 맥락, 즉 더 많은 정보와
[14:47] 세부 사항을 AI에게 제공할수록
[14:50] 더 좋은 결과를 얻을 수 있다는 것입니다.
[14:51] 맥락은 다양한 형태로 제공될 수 있습니다.
[14:52] 원래 프롬프트나 PRD에 많은 세부 정보를 포함하거나
[14:54] 원하는 모습의 목업을 제공할 수도 있습니다.
[14:56] 또는 애플리케이션 구축에 도움이 되는 예시나 추가 데이터를 제공할 수도 있습니다.
[14:58] 앱, 환경, 선호도에 대한 세부 정보와 오류에 대한 정보도 중요합니다.
[15:01] '이것이 작동하지 않는다'고만 말하는 대신
[15:03] 전체 오류 메시지를 복사하여 붙여넣고
[15:05] 정확히 무엇이 작동하지 않는지에 대한 스크린샷을
[15:08] AI에게 제공할 수 있습니다.
[15:10] 자, 여기 바이브 코딩의 원칙들을 더 쉽게 기억할 수 있는
[15:12] 기억법이 있습니다.
[15:14] 'The friendly cat dances
[15:16] constantly thinking frameworks'
[15:18] 친근한 고양이는 끊임없이
[15:19] 프레임워크를 생각하며 춤춥니다.
[15:21] 이렇게 하면 프레임워크, 체크포인트,
[15:23] 디버깅과 컨텍스트를 기억하는 데 도움이 됩니다.
[15:24] 이는 현재 여러분에게 바로 도움이 될 것입니다.
[15:26] 앱에 대한 세부 정보, 환경, 선호도,
[15:28] 그리고 오류에 대한 정보도 중요합니다.
[15:30] '이것이 작동하지 않는다'고만 말하는 대신
[15:32] 실제로 전체 오류 메시지를 복사하여 붙여넣고
[15:33] 정확히 무엇이 작동하지 않는지에 대한 스크린샷을
[15:35] AI에게 제공할 수 있습니다.
[15:38] 자, 여기 바이브 코딩의 원칙들을 더 쉽게 기억할 수 있는
[15:40] 기억법이 있습니다.
[15:41] 'The friendly cat dances
[15:43] constantly thinking frameworks'
[15:45] 프레임워크, 체크포인트,
[15:49] 체크포인트, 디버깅, 그리고 컨텍스트를 항상 생각하세요,
[15:51] 이것은 여러분에게 당장 유용하게 쓰일 것입니다
[15:53] 왜냐하면 지금 여러분을 위한 작은
[15:55] 평가가 있기 때문인데, 바로 화면에
[15:57] 띄우겠습니다. 이 질문들에 답변하고
[15:59] 댓글에 달아주세요, 제가 설명하는 내용을
[16:00] 잘 따라오고 있는지 확인하기 위해서입니다.
[16:02] 이제 Replet부터 시작해서 바이브 코딩의
[16:05] 몇 가지 예시를 보여드리겠습니다.
[16:06] Replet은 AI를 활용해 바이브 코딩으로
[16:08] 다양한 애플리케이션을 만들 수 있는 플랫폼으로,
[16:10] 클라우드에서 매우 빠르게 배포할 수 있습니다.
[16:12] 정말 초보자 친화적이고,
[16:14] Replet에 로그인만 하면 됩니다.
[16:16] 시작할 수 있는 무료 크레딧도
[16:17] 제공됩니다.
[16:19] 간단한 앱을 위한 PRD(제품 요구사항 문서)부터
[16:20] 시작해보겠습니다. 입력된 웹사이트의
[16:22] SEO 메타태그를 표시하는 매우 간단한 앱입니다.
[16:24] 시작하기 위해 제가 가장 먼저 할 일은
[16:26] ChatGPT를 사용해서 어떤 애플리케이션을
[16:28] 만들고 싶은지 구체화하고 PRD를 생성하는 것입니다.
[16:31] 여기 이 프롬프트를 사용할 건데, 이것은
[16:34] 앞서 보여드렸던 프롬프트의
[16:36] 변형입니다. 그리고 예시 PRD도
[16:38] 링크해 드리겠습니다. 프롬프트는 이렇습니다:
[16:40] "MVP 앱을 위한 PRD 작성을 도와주세요.
[16:43] 바이브 코딩을 하려고 합니다. 웹사이트의
[16:45] SEO 메타태그를 시각적이고 인터랙티브하게 표시하는
[16:48] 앱으로, 메타태그가 제대로 구현되었는지 확인합니다.
[16:50] 이 앱은 사이트의 HTML을 가져온 다음
[16:52] SEO 태그에 대한 피드백을 제공하고
[16:53] SEO 최적화를 위한 모범 사례에 따라
[16:55] 평가해야 합니다. 이 앱은 구글과
[16:56] 소셜 미디어 미리보기를 제공해야 합니다.
[16:58] 다음 질문들을 고려해주세요: 이 앱은 무엇인가요?
[16:59] 이 앱은 어떻게 사용하나요? 이 앱의 기본 패턴은
[17:01] 무엇인가요? 그리고 대상 사용자에게
[17:03] 가장 유용하게 만들려면 어떻게 해야 하나요?"
[17:04] 여기에 PRD 예시도 포함했습니다.
[17:06] 그래서 ChatGPT가 이런 결과를 생성해줍니다:
[17:08] "SEO 태그 비주얼 인스펙터, MVP, PRD,
[17:09] 프로젝트 개요와 주요 기능들이 여기 있습니다.
[17:10] URL 입력 필드, HTML 가져오기 및 파싱,
[17:12] SEO 태그 추출, 시각적 피드백 미리보기가 있습니다.
[17:15] 그리고 '좋으면 좋겠다(nice to have)' 섹션도 있습니다.
[17:17] 전체적으로 좋아 보이지만, 한 가지 핵심 기능으로
[17:20] 100점 만점의 총점을 표시하는 기능을 추가하고 싶습니다.
[17:23] 그리고 '좋으면 좋겠다' 항목들은 제거하고 싶습니다.
[17:26] 항상 가장 핵심 기능부터 시작하고
[17:28] 나중에 추가하는 것이 좋기 때문입니다.
[17:30] 그래서 핵심 기능 4가지로 다시 정리해달라고 하겠습니다.
[17:33] "100점 만점의 총점을 포함해주시고,
[17:36] '좋으면 좋겠다' 항목들은 제거해주세요."
[17:38] 좋습니다, 시각적 피드백이 여기 있네요.
[17:40] 이제 괜찮아 보입니다.
[17:43] 이제 "Replet을 사용해 앱을 만들기 위한
[17:44] 프롬프트로 이것을 변환해주실 수 있나요?"
[17:45] 라고 물어보겠습니다. 이것을 사용할 거에요.
[17:47] 좋습니다. 또한 "이미지 목업이나 인스피레이션을
[17:50] 생성해주세요"라고 요청하겠습니다.
[17:53] 이것을 다운로드 받고 Replet에 가서
[17:57] 복사 붙여넣기를 하겠습니다.
[18:01] 시각적 피드백이 여기 있네요.
[18:04] 좋습니다. 이제 저는 "이것을 Replet을 사용해
[18:06] 앱을 만들기 위한 프롬프트로 변환해주실 수 있나요?"
[18:08] 라고 적겠습니다. 이걸 사용할 거에요.
[18:13] 좋습니다. 그리고 추가로 "이미지 목업이나
[18:15] 인스피레이션을 생성해주세요"라고 하겠습니다.
[18:18] 이것을 다운로드하고, Replet에서
[18:21] 복사 붙여넣기만 하면 됩니다.
[18:24] Replet이 여기 있고, 이제 할 일은
[18:26] 복사 붙여넣기 하는 것뿐입니다.
[18:28] ChatGPT의 프롬프트와 영감이 된 이미지 링크를 복사하고 '시작하기'를 클릭할게요.
[18:33] 좋아요, 이 앱은 'SEO 태그 스카우트'라고 부를 거예요.
[18:36] 지금 이런 추가 기능을 원하는지 물어보는데요.
[18:38] 나중에 추가할 수 있으니 지금은 거절하겠습니다.
[18:41] 여기 있는 추가 기능들은 나중에 넣을 수 있으니까요.
[18:43] 그럼 승인하고 시작해봅시다.
[18:45] 이런 추가 기능은 나중에 넣을 수 있으니까요.
[18:47] 승인하고 시작해보면, 생성되는 동안
[18:49] 볼 수 있듯이 시각적인 디자인을
[18:50] 만들고 있고 동시에
[18:52] 여기에 파일들도 생성하고 있어요.
[18:54] Replit은 이미 좋은 버전 관리 기능을 가지고 있어서
[18:57] 여기서 쉽게 롤백할 수 있습니다.
[18:59] 하지만 모범 사례로는 여전히
[19:01] 결국에는 Git을 사용하는 것이 좋습니다.
[19:03] 어느 시점에서는 Git을 사용하는 게 좋아요.
[19:05] 모든 것이 빌드되고 있는 동안
[19:07] 제가 정말 추천하는 것은
[19:08] 여기로 가서 어시스턴트를 추가하고
[19:10] 어시스턴트를 사용하여 질문하는 겁니다.
[19:13] '이 프로젝트의 파일 구조를 설명해 주시겠어요?'
[19:16] 꼭 할 필요는 없지만
[19:19] 바이브 코딩을 하면서 프레임워크에 대해
[19:21] 배우고 싶다면, 이렇게 하는 것이
[19:22] 사용되는 프레임워크에 대해 배우는 거라면
[19:24] 바이브 코더로서의 실력을 크게 향상시킬 겁니다.
[19:26] 왜냐하면 실제로 무슨 일이 일어나고 있는지와
[19:28] 파일들이 어떻게 상호작용하는지 이해할 수 있기 때문입니다.
[19:29] 실제로 무슨 일이 일어나고
[19:30] 파일들이 어떻게 서로 상호작용하는지
[19:32] 이해할 수 있게 될 거예요.
[19:33] 여기 클라이언트 쪽을 보면
[19:34] 'client' 아래에 소스 폴더에
[19:36] 메인 리액트 애플리케이션 코드가 있습니다.
[19:39] 즉, client/source를 보면 UI 컴포넌트들이
[19:42] 어디에 있는지도 확인할 수 있습니다.
[19:44] 그리고 서버 쪽에서는
[19:45] index.ts와 같은 주요 서비스 진입점이 어디에 있는지
[19:47] 알려주고 여기에 그 코드가 있습니다.
[19:49] 그리고 루트와 같은 것들도 있어요.
[19:51] 이 파일들을 이해하고
[19:53] 이 파일들이 어떻게 상호작용하여
[19:54] 이 완성된 앱을 만드는지 이해하는 것은
[19:55] 이미 여러분에게 큰 도움이 될 겁니다.
[19:57] 그리고 실제 코드를 더 자세히 알아보고 싶다면
[19:59] 여기에서 우클릭하고
[20:01] 예를 들어 '어시스턴트로 설명'을 선택할 수 있어요.
[20:03] 이건 완전히 선택사항이지만
[20:05] 관심이 있다면 코드가 실제로 무엇을 하는지
[20:07] 배우기에 정말 좋은 방법입니다.
[20:08] 정말 코드가 하는 일을 배우기에 아주 좋은 방법이에요.
[20:11] 관심이 있으시다면요.
[20:13] 좋아요, 이제 앱이 완성된 것 같네요.
[20:14] 이제 직접 테스트해 봅시다.
[20:16] www.lonelyoctopus.com을 입력해 볼게요.
[20:19] 확인해보죠. 어, 작동하지 않네요.
[20:21] 이런, 그렇지 않았어요.
[20:24] 제가 할 일은
[20:28] 진정한 바이브 코더처럼 에러가 있을 때
[20:32] 스스로 해결되기를 바랄 거예요.
[20:34] 좋아요, 다시 한번 테스트해 봅시다.
[20:36] lonelyoctopus.com.
[20:38] 좋아요, 뭔가 보이기 시작하네요. 제목은 권장보다 짧고,
[20:40] 메타 설명은 블라블라 등등 모든 정보가 나옵니다.
[20:43] 여기 구글 미리보기가 있고,
[20:45] 소셜 미디어 미리보기, 트위터 카드 미리보기,
[20:47] 그리고 원시 데이터 태그들이 있네요.
[20:49] 자, 이제 웹사이트에 따라 숫자가 실제로 변하는지
[20:51] 확인하고 싶어요. 다른 사이트도 시도해 보죠.
[20:54] 웹사이트 이름이
[20:56] theuselesswebsite.com인지 확인해 보겠습니다.
[20:57] 다른 것을 시도해 봅시다.
[20:59] theuselesswebsite.com이라는 웹사이트를 시도해 보죠.
[21:02] 좋아요, 여전히
[21:04] 여전히 86을 보여주고 있네요. 다른 웹사이트는 어떨까요?
[21:07] 좋아요. 이 숫자는 웹사이트에 따라 변하고 있어요.
[21:09] 이건 시각적으로 매력적이지 않네요.
[21:12] 더 컬러풀하게 만들어 주세요. 네, 컬러풀하게요.
[21:15] 또한 raw 데이터 태그가 여기 있지만 제목이 무엇인지 구체적으로 명시되어 있지 않은 것도 마음에 들지 않아요.
[21:19] 실제 제목이 무엇인지 보여주었으면 좋겠어요.
[21:21] 그걸 다음 수정 단계에서 하려고 합니다.
[21:23] 기억해야 할 또 다른 중요한 점은
[21:26] 무언가를 지적할 때,
[21:28] 변경하고 싶은 것을 말할 때는
[21:29] 한 번에 하나씩 요청하는 것이 좋습니다.
[21:30] 변경하고 싶은 것들의 목록을 나열하기보다는요.
[21:32] 그렇게 하면 AI가 혼란스러워할 수 있거든요.
[21:34] 오, 멋지네요. 제가 말하기도 전에 이미 변경되었네요.
[21:36] 작은 아이콘도 보여주고 있어요.
[21:37] 괜찮네요.
[21:39] 다시 시도해볼게요. lonelyoctopus.com.
[21:40] 좋아요, 이게 훨씬 더 좋네요.
[21:41] 여기서 할 수 있는 또 다른 것은
[21:44] 여기를 클릭하면 개발 URL이 있어서
[21:45] 다른 기기에서도 직접 볼 수 있어요.
[21:46] QR 코드를 스캔하기만 하면 됩니다.
[21:50] 그래서 다른 기기에서도 어떻게 보이는지 확인할 수 있어요.
[21:52] 만약 lonelyoctopus.com이라고 입력하면
[21:55] 모바일에서 어떻게 보이는지도 확인할 수 있습니다.
[21:57] 이것이 Replit을 사용한 웹 코딩의 예시입니다.
[21:58] 작업이 완료되면 원할 때 배포할 수 있습니다.
[22:00] 하지만 더 복잡하고 확장 가능한 것을 만들고 싶다면
[22:03] 어느 시점에서는 AI 코드 에디터로 이전하고 싶을 겁니다.
[22:05] Windsor나 Cursor 같은 것들이요.
[22:07] 제가 지금 Windsor를 예로 들어 보여드리겠습니다.
[22:09] 우선, 이런 도구들 중 어떤 것을 사용하든
[22:12] 방금 이야기한 바이브 코딩의 원칙들은 거의 동일합니다.
[22:14] 그러니 걱정하지 마세요. 다만 초보 단계를 지나면
[22:17] 대부분의 사람들은 Cursor나 Windsor 같은 AI 코딩 에디터로 전환하길 원할 겁니다.
[22:19] 더 강력하고 기능이 많으며 확장성도 뛰어나기 때문이죠.
[22:22] 물론 이런 것들에는 항상 트레이드오프가 있습니다.
[22:24] Replit은 훨씬 빠르고 사용하기 쉽습니다. 모든 것이 클라우드 기반이라
[22:27] 환경 설정이나 배포 과정에 신경 쓸 필요가 없어요.
[22:28] 반면 Cursor와 Windsor는 더 많은 기능이 있습니다.
[22:30] 이 코드 에디터들은 전체 규모의 개발을 위해 만들어졌어요.
[22:32] 그래서 어떤 종류의 개발이든 가능하고
[22:34] 원하는 대로 정확하게 조정할 수 있습니다.
[22:35] 물론 단점은 학습 곡선이 더 높다는 것입니다.
[22:38] 환경을 제대로 설정하는 방법을 배워야 하고
[22:40] 환경 관련 문제를 디버깅하는 방법도 알아야 합니다.
[22:42] 하지만 어떤 도구를 사용하든
[22:43] 방금 이야기한 바이브 코딩의 원칙들,
[22:44] 그 스킬셋 자체는 거의 동일합니다.
[22:46] 그러니 걱정하지 마세요.
[22:47] 다만 초보 단계를 지나면
[22:48] 대부분의 사람들은
[22:50] Cursor나 Windsor 같은 AI 코딩 에디터로 전환하길 원할 겁니다.
[22:51] 더 강력하고 기능이 많으며 확장성도 뛰어나기 때문이죠.
[22:53] 물론 이런 것들에는 항상 트레이드오프가 있습니다.
[22:55] Replit은 훨씬 빠르고 사용하기 쉽습니다.
[22:57] 모든 것이 클라우드 기반이라
[22:59] 환경 설정이나 배포 과정에 신경 쓸 필요가 없어요.
[23:00] 반면 Cursor와 Windsor는 더 많은 기능이 있습니다.
[23:02] 이 코드 에디터들은 전체 규모의 개발을 위해 만들어졌어요.
[23:04] 그래서 어떤 종류의 개발이든 가능하고
[23:05] 원하는 대로 정확하게 조정할 수 있습니다.
[23:06] 물론 단점은 학습 곡선이 더 높다는 것입니다.
[23:08] 환경을 제대로 설정하는 방법을 배워야 하고
[23:10] 환경 관련 문제를 디버깅하는 방법도 알아야 합니다.
[23:11] 이 코드 에디터들은 전체 규모의 개발을 위해 만들어졌으니
[23:13] 어떤 종류의 개발이든 가능하고 원하는 대로 정확하게 조정할 수 있습니다.
[23:17] 물론 단점은 학습 곡선이 더 높다는 것입니다.
[23:19] 환경을 제대로 설정하는 방법을 배워야 하고
[23:21] 환경 관련 문제를 디버깅하는 방법도 알아야 합니다.
[23:23] 더 높은 학습 곡선이 있어요.
[23:24] 학습 곡선이 가파릅니다. 환경을 적절하게
[23:26] 설정하는 방법과 환경 문제를 디버깅하는
[23:27] 방법을 배워야 합니다. 많은 문제가
[23:29] 환경을 제대로 설정하지 않아서
[23:31] 발생합니다.
[23:32] 또한 배포 방법과 시간에 따른
[23:33] 모니터링 방법도 배워야 합니다.
[23:35] 이것이 윈드서프(Windsurf) 환경이고
[23:37] 여기는 앱을 구축하고 싶은 내용을 입력할 수 있는
[23:40] 캐스케이드(Cascade)입니다. 이 경우에는
[23:42] 클라우드 3.7 소넷 모델을 사용하고 있습니다.
[23:45] 저는 윈드서프에서도 똑같은 프롬프트와
[23:47] 이미지를 넣을 것입니다. 이것은
[23:49] 로컬 개발 환경이 될 것입니다.
[23:52] 따라서 로컬에서 여러 설정을
[23:54] 시작할 것입니다.
[23:55] 파일들이 여기에도 채워지는 것을 볼 수 있습니다.
[23:58] 좋습니다. 지금 터미널 명령어가
[24:00] 실행 중이고 이를 수락할 수 있습니다. 물어보는 것을
[24:03] 비활성화하고 자동 실행되게 할 수도 있지만,
[24:05] 저는 신뢰 문제가 있습니다. 왜냐하면 이것이 웹에서
[24:07] 격리된 환경인 Replit과 달리 제 로컬 환경에서
[24:10] 실행되기 때문입니다.
[24:11] 로컬 환경에 무작위 작업이 실행되지 않도록
[24:13] 제가 수락하는 것을 확인하고 싶습니다.
[24:14] 그래서 모든 항목에 대해 '수락'을 클릭할 것입니다.
[24:16] 환경을 설정하고 모든 패키지를 설치하는 데
[24:20] 시간이 더 오래 걸리는 것을 볼 수 있습니다.
[24:23] 이 모든 것은 Replit을 사용하면
[24:25] 할 필요가 없는 작업들입니다.
[24:26] 좋습니다. 작업이 완료된 것 같습니다.
[24:28] "제가 열어준 브라우저 미리보기에서
[24:29] 자유롭게 시도해보세요"라고 합니다.
[24:30] 브라우저 미리보기를 열어보겠습니다.
[24:33] 브라우저 미리보기가 보이지 않네요.
[24:34] 저를 위해 열어줄 수 있을까요?
[24:37] 좋습니다. 미리보기를 열어보겠습니다.
[24:39] 좋아요. 여기에 비슷한 요소들이 있는 것이
[24:40] 보입니다. 예를 들어 www.lonely
[24:44] octopus.com 같은 것이죠. 확인해 볼게요. 앗,
[24:48] https를 추가해야 하네요.
[24:51] 이것은 실제로 Replit의 첫 번째 버전보다
[24:54] 훨씬 더 좋아 보입니다. 우리가 제공한 영감과
[24:58] 매우 유사해 보입니다.
[25:01] 여기 우리가 제공한 영감이 있고,
[25:02] 여기 실제 결과물이 있습니다. 정말 비슷해 보이죠?
[25:06] 꽤 좋아 보입니다. SEO 태그 분석이군요.
[25:08] 이것은 제게 꽤 좋아 보입니다. 다른 것도 시도해 볼게요.
[25:10] maze.toys/mazes/min/aily. 그냥 무작위 웹사이트입니다.
[25:13] SEO 태그가 25네요.
[25:14] 실제로 Replit과 Windfs 사이에 숫자가 다르네요.
[25:16] 흥미롭습니다. 어떻게 이 SEO 태그를 계산하는지
[25:19] 물어봐야겠습니다. 하지만 전반적으로
[25:21] 잘 작동하는 것 같고, 저는 이것이 마음에 듭니다.
[25:23] 약간 개선을 요청해 보겠습니다.
[25:26] 여기 스크린샷을 편집하고 URL 앞에
[25:28] https를 입력할 필요가 없게 해달라고 할 것입니다.
[25:34] 또한 복사 붙여넣기가 활성화되어 있지 않습니다.
[25:36] 다시 미리보기를 열어보겠습니다. 다시 시도해 볼게요.
[25:39] www.lonely
[25:41] octopus.com. 또한 중앙 정렬이 필요합니다.
[25:43]
[25:44]
[25:47]
[25:49]
[25:51]
[25:54]
[25:56]
[25:59]
[26:01]
[26:04]
[26:09]
[26:12]
[26:15]
[26:16]
[26:18] 나중에 이것도 해봐야겠네요. 그런데 여전히 작동하지 않네요.
[26:20] 그냥 '여전히 작동하지 않음'이라고 적어둘게요.
[26:22] 다시 시도해봅시다. lonelyoctopus.com.
[26:26] 좋아요, 이제 작동하네요.
[26:28] 물론 다른 것들도 좀 손봐야 할 부분이 있어요.
[26:30] 좀 더 조정해야 할 것들이 있는데,
[26:31] 가령 중앙에 정렬되지 않은 요소들이 있죠.
[26:33] 이 색상들도 약간 변경하고 싶을 수 있지만,
[26:35] 이것으로 여러분이 Tailwind를 사용해서
[26:36] 어떻게 개발을 시작할 수 있는지에 대한 좋은 아이디어를 얻으셨길 바랍니다.
[26:38] 이 경우에 Git과 GitHub도 함께 사용하기 시작하는 것이
[26:40] 확실히 좋을 것 같습니다.
[26:42] 할 수 있는 일은 다음과 같습니다.
[26:43] '버전 관리를 위한 Git 초기화'를 입력하고
[26:45] 그냥 그대로 입력하면 됩니다.
[26:49] 모든 것을 수락하면 Git이 초기화됩니다.
[26:51] 여기 모든 것이 초록색으로 변했는데,
[26:53] 이는 아직 추적되지 않았다는 의미입니다.
[26:55] 모든 것을 Git에 추가할 것인지 물어봅니다.
[26:57] 모든 것을 Git에 추가하는 것을 수락할 수 있습니다.
[26:59] 그리고 초기 커밋으로 커밋할 것인지도 물어봅니다.
[27:01] 이것도 수락하고 Git 커밋을 할 수 있습니다.
[27:03] 좋습니다. 이제 모든 것이 버전 관리로 추적되고 있습니다.
[27:06] 준비가 되면 Git push도 할 수 있고,
[27:08] GitHub에서 모든 것을 확인할 수 있습니다.
[27:09] 하지만 어떤 도구를 사용하든,
[27:11] 우리가 배운 바이브 코딩의 원칙들을 기억하세요.
[27:13] 어떤 종류의 도구를 사용하든 그 원칙들을 명심하고 적용하세요.
[27:15] 이제 화면에 작은 퀴즈를 띄우겠습니다.
[27:16] 댓글 섹션에 답변을 작성해주세요.
[27:18] 이제 최종 섹션으로 넘어가겠습니다.
[27:20] 여기서는 바이브 코딩 여정에 도움이 될
[27:22] 몇 가지 팁과 트릭,
[27:23] 프레임워크와 마인드셋을 알려드리겠습니다.
[27:24] 첫 번째는 확실히 마인드셋에 관한 것입니다.
[27:26] 이미 엔지니어라면 아마도 이런 방식으로 생각하고 계실 겁니다.
[27:28] 하지만 기술적 배경이 없는 분이라면,
[27:29] 항상 작게 시작해서 점차 확장해 나가는 방식으로 생각하세요.
[27:31] 다시 말해, 무엇을 만들든 간에
[27:33] 항상 최소 실행 가능한 제품(MVP)으로 생각하세요.
[27:36] 즉, 애플리케이션이 작동하기 위해
[27:37] 필요한 최소한의 기능이 무엇인지 생각하는 것입니다.
[27:39] 일단 작동하게 만든 다음에,
[27:40] 그 위에 추가 기능과 기능성을 반복적으로 추가할 수 있습니다.
[27:42] 이것이 올바른 바이브 코딩 마인드셋입니다.
[27:43] 가장 화려하고 모든 세부 사항이 포함된,
[27:45] 수백만 가지 다른 기능이 있는 것을 만들려고 하는 것과는 반대죠.
[27:47] 아니요, 그렇게 하지 마세요.
[27:48] 그렇게 하면 생길 모든 오류와 문제들이 이미 눈에 보입니다.
[27:50] 무엇이 잘못되었는지 파악하지 못해 머리를 쥐어뜯는 상황이 될 거예요.
[27:52] 항상 최소 실행 가능한 제품으로 시작하고
[27:53] 그 위에 반복해서 개선해 나가세요.
[27:55] 먼저 작동하게 만드세요.
[27:57] 다음은 바이브 코딩 101 과정에서 나온 프레임워크인데,
[27:58] 정말 유용하다고 생각합니다.
[28:00] 이것은 올바른 바이브 코딩 마인드셋으로,
[28:01] 가장 화려하고 모든 세부 사항이 포함된,
[28:03] 수많은 기능이 있는 것을 만드는 것과는 반대됩니다.
[28:06] 그런 방식은 생길 모든 오류와 문제들로 인해
[28:08] 머리를 쥐어뜯게 될 것입니다.
[28:09] 항상 최소 실행 가능한 제품으로 시작하고
[28:10] 그 위에 반복해서 개선해 나가세요.
[28:12] 먼저 작동하게 만드세요.
[28:14] 다음은 바이브 코딩 101 과정에서 나온
[28:15] 프레임워크인데, 정말 유용하다고 생각합니다.
[28:16] 이것은 개발이나 앱을 만들 때
[28:18] 바이브 코딩에는 실제로 두 가지 모드만 있다는 것을 보여줍니다.
[28:20] 먼저 작동하게 만든 다음 그 위에 반복해서 개선해 나가는 것이죠.
[28:22] 먼저 작동하게 만드세요.
[28:23] 다음은 바이브 코딩 101 과정에서 나온 프레임워크로,
[28:24] 정말 유용하다고 생각합니다.
[28:26] 이것은 개발이나 앱을 만들 때 바이브 코딩에는 실제로 두 가지 모드만 있다는 것을 보여줍니다.
[28:27] 이는 앱을 개발하거나 구축할 때,
[28:29] 바이브 코딩을 할 때,
[28:30] 실제로 두 가지 모드만 있다는 것을 보여줍니다.
[28:32] 새로운 기능을 구현하거나
[28:34] 오류를 디버깅하는 모드입니다.
[28:35] 새 기능을 구현할 때
[28:36] 기억해야 할 점은 새 기능과 관련된
[28:38] 컨텍스트를 제공하는 것입니다.
[28:39] 프레임워크를 언급하고,
[28:41] 자세한 문서를 제공하는 등의 작업과
[28:43] 점진적인 변경을 만들고
[28:45] 체크포인트와 버전 관리 등을 수행합니다.
[28:46] 그리고 오류 디버깅 모드에서는
[28:48] 기억해야 할 점은 먼저 어떻게 작동하는지 파악하는 것입니다.
[28:50] 프로젝트 구조에 대한
[28:52] 이해가 충분한가요?
[28:54] 이해가 부족하다면
[28:55] AI에게 물어보고 실제로 그것을 파악하세요.
[28:57] 애플리케이션에서 무엇이 잘못되었는지
[28:59] 파악하는 데 매우 도움이 될 것입니다.
[29:00] 그리고 무엇이 잘못되었는지 파악했다면,
[29:02] 어떻게 그 정보를
[29:03] 언어 모델에 전달할지 생각해보세요.
[29:04] 해결책을 찾기 위해서죠.
[29:06] 이때 마지막 원칙인 '컨텍스트'가 유용합니다.
[29:07] 가능한 한 많은 맥락과
[29:09] 정보를 제공하여 LLM이
[29:11] 문제를 해결하도록 안내하세요.
[29:12] 무엇이 잘못되었는지 스크린샷을 제공하고,
[29:15] 오류 메시지를 전달하고, 살펴봐야 할
[29:17] 올바른 파일을 알려주세요.
[29:19] 저는 이 프레임워크를 정말 좋아합니다.
[29:21] 스크린샷을 찍어두고
[29:23] 좌절감을 느끼거나 어떻게 해야 할지
[29:24] 모를 때마다 지금 어떤 모드에 있는지와
[29:26] 각 모드에서 무엇을 해야 하는지
[29:28] 기억하려고 노력하세요.
[29:29] 마지막 팁은 조금 더 고급 내용으로
[29:31] 작성 규칙이나 문서화에 관한 것입니다.
[29:33] 이것은 코딩 에이전트에게 제공하는
[29:34] 시스템 프롬프트와 같은 것입니다.
[29:37] 여기서 원하는 특정 사항이나
[29:38] 하지 말아야 할 것들을 나열할 수 있습니다.
[29:40] 예를 들어, 규칙에 포함시켜야 할
[29:42] 몇 가지 모범 사례로는
[29:44] 새 기능 구현이나 수정 시 코드 변경을
[29:46] 최소화하는 것이 있습니다.
[29:47] 이는 AI가 때때로
[29:48] 새 기능을 구현하거나 무언가를 수정할 때
[29:50] 많은 다른 파일들을 불필요하게
[29:52] 변경하는 경향이 있기 때문입니다.
[29:54] 아주 작은 문제를 고치기 위해
[29:56] 여러 파일을 변경하면
[29:59] 다른 문제를 야기할 수 있습니다.
[30:01] 모든 API 엔드포인트에 비율 제한을 설정하세요.
[30:03] 이는 API를 여러 번 호출하여
[30:05] 많은 비용이 발생하지 않도록 하기 위한 것입니다.
[30:06] 모든 로그인 및 가입 페이지에 캡챠를 활성화하세요.
[30:09] 보안상의 이유로 필요합니다.
[30:10] 파일에 추가할 수 있는 다른 규칙도
[30:12] 많이 있습니다. 온라인에서 사람들이 작성한
[30:14] 특정 유형의 앱이나
[30:16] 사용 중인 특정 언어에 맞는
[30:17] 규칙들을 찾을 수도 있습니다.
[30:19] 이러한 규칙을 규칙 파일에 추가할 수 있습니다.
[30:21] 그리고 이 규칙 파일을 replit이나
[30:23] cursor 또는 runwayml과 같은 도구에 제공할 수 있습니다.
[30:25] 특히 엔지니어링 배경이나
[30:26] 개발 배경이 없는 사람이라면
[30:28] 이런 규칙 파일이 매우 유용합니다.
[30:30] 특히 엔지니어링 배경이
[30:31] 없는 사람이거나
[30:32] 개발 배경이 없는 사람이라면
[30:34] 개발 배경이 없는 분들에게 정말
[30:35] 앱의 안전과 보안을 위한 특정 규칙들을
[30:37] 살펴보시길 적극 권장합니다.
[30:40] 앱의 안전과 보안을 위한 규칙들 말이죠.
[30:42] 최소한 API 키에 관한 것과
[30:44] 왜 API 키를 노출시키지 말아야 하는지에 대해
[30:46] 알아두셔야 합니다.
[30:47] 이런 것들을 배우면서
[30:48] 여러분의 규칙 파일에도 이를 추가하여
[30:50] AI가 최선의 보안 관행을 준수하도록
[30:53] 상기시켜 주는 것이 좋습니다.
[30:56] 그래야 해킹 당하지 않을 테니까요.
[30:57] 사실 더 자세히 설명할 수 있는 내용이 많습니다.
[30:59] 예를 들어, 참조할 수 있는 스타일링 문서,
[31:01] 코드를 리팩토링하는 방법,
[31:03] MCP 서버 같은 것을 사용하는 방법 등이요.
[31:04] AI 에이전트를 구축하고
[31:06] 더 많은 도구와 기능을 부여하고 싶을 때
[31:08] 사용할 수 있는 방법도 있습니다.
[31:09] 지금 이 영상에서 다루기에는
[31:11] 너무 많은 내용이 있어요.
[31:13] 하지만 댓글로 알려주시면
[31:14] 후속 영상을 만들어 더 자세히 설명해 드리겠습니다.
[31:17] 바이브 코딩을 어떻게 해야 하는지,
[31:18] 그리고 윈드서프나 커서 같은
[31:20] AI 코드 에디터에 대한 구체적인 고급 예제들도
[31:22] 제공해 드릴 수 있을 거예요.
[31:24] 이제 이 영상을 마무리할 시간입니다.
[31:25] 이 바이브 코딩 기초 영상이 여러분이
[31:28] 올바르게 시작하는 데 도움이 되었으면 좋겠습니다.
[31:30] 이제 영상의 끝 부분에 왔네요.
[31:32] 이 바이브 코딩 기초 영상이
[31:33] 여러분이 올바른 방식으로 시작하는 데
[31:35] 도움이 되었기를 진심으로 바랍니다.
[31:38] 모범 사례를 염두에 두고 바이브 코딩을 하시길 바라요.
[31:41] 그리고 약속드린 대로, 마지막으로
[31:42] 평가 질문을 드리니 댓글로 답변해 주세요.
[31:45] 제가 설명한 정보를 잘 이해하셨는지
[31:46] 확인할 수 있도록 말이죠.
[31:47] 이 영상을 보시는 분들이
[31:49] 바이브 코딩에 관심이 있다면
[31:50] 아마도 STEM 과목을 배우는 데도
[31:52] 관심이 있으실 거라 생각합니다.
[31:53] STEM 과목을 배우고 싶으시다면
[31:56] 이 영상의 스폰서인
[31:57] Brilliant을 확인해 보시길 적극 추천합니다.
[31:58] Brilliant은 STEM 학습 플랫폼으로
[32:00] 수학, 과학, 프로그래밍, 데이터 분석,
[32:02] 그리고 AI에 관한 수천 개의
[32:03] 인터랙티브 강의를 통해
[32:05] 매일 더 똑똑해지도록 도와줍니다.
[32:07] 제가 Brilliant을 좋아하는 이유는
[32:09] 단순 암기가 아닌
[32:10] 비판적 사고 능력과 깊은 이해력을
[32:12] 기를 수 있도록 도와주기 때문입니다.
[32:14] Brilliant은 작은 퀴즈, 비유,
[32:16] 그리고 도파민을 자극하는 요소들을 포함하여
[32:18] 지루하거나 의욕이 떨어질 때
[32:20] 정말 큰 도움이 됩니다.
[32:21] 단순히 영상 콘텐츠를 보는 것보다
[32:23] 6배 더 효과적인 것으로 나타났습니다.
[32:24] 훌륭한 모바일 앱도 있어서
[32:26] 짧은 시간에도 빠르게 학습 세션에
[32:28] 참여하고 새로운 것을 배울 수 있어요.
[32:30] 몇 분 정도 시간이 있을 때
[32:31] 무의미한 스크롤링 대신
[32:33] 학습할 수 있죠.
[32:34] Brilliant의 프로그래밍 코스는
[32:36] 제가 가장 좋아하는 과정 중 하나입니다.
[32:37] 코딩의 기초를 다지고
[32:39] 엔지니어처럼 생각하는 방법을 배울 수 있습니다.
[32:40] 이는 AI 시대와 바이브 코딩 시대에도
[32:42] 여전히 중요한 기술이죠.
[32:44] 또한 AI 모델의 작동 방식과
[32:46] 응용 프로그램에 대한 깊은 이해를 도와주는
[32:47] 훌륭한 AI 과정도 있습니다.
[32:49] Brilliant 코스는 매우 품질이 높고
[32:51] 스탠포드, MIT, 칼텍, 마이크로소프트,
[32:52] 구글 등의 수상 경력이 있는
[32:54] 교사, 연구원, 전문가 팀들이 가르칩니다.
[32:56] Brilliant이 제공하는 모든 것을 무료로 이용해 보시려면
[32:59] brilliant.org/tina를 방문하거나
[33:00] 화면의 QR 코드를 스캔하세요.
[33:02] 아니면 설명란의 링크를 클릭하셔도 됩니다.
[33:03] 제 링크를 사용하시면 연간 구독에서 20% 할인도 받으실 수 있어요.
[33:06] 영상의 이 부분을 후원해 주신
[33:07] Brilliant에 정말 감사드립니다.
[33:08] 다시 영상으로 돌아오겠습니다.
[33:11] 이 영상을 시청해 주셔서 정말 감사합니다.
[33:12] 행복한 바이브 코딩 되세요.
[33:14] 다음 영상이나 라이브 스트림에서
[33:15] 만나 뵙겠습니다.
[33:17] 즐거운 바이브 코딩 하세요.
[33:19] 다음 영상이나 라이브 방송에서 뵙겠습니다.
[33:20] 감사합니다.