바이브 코딩은 정말 미쳤다... (초보자를 위한 바이브 코딩 튜토리얼)

Memory 구독자 87,000명

요약

이 영상은 바이브 코딩의 개념과 실제 활용 사례를 심도 있게 다룹니다. 자연어로 개발 문제를 설명하면 AI가 코드를 생성해주는 방식으로, 초보자도 쉽게 프로토타입부터 완성도 높은 애플리케이션까지 만들 수 있음을 보여줍니다. 여러 도구와 확장 프로그램, API 키 설정 및 설치 과정을 통해 VS Code와 Cline 확장을 활용하는 방법을 단계별로 안내합니다. 또한, DeepSeek와 Claude 3.7 Sonnet 같은 AI 모델 간의 성능 차이를 비교하며, 앞으로의 AI 기반 코딩 발전 방향을 전망합니다.

주요 키워드

바이브 코딩 AI 코딩 프롬프트 엔지니어링 Cline 확장 VS Code Claude 3.7 Sonnet DeepSeek API 키 에이전틱 코딩

하이라이트

🔑 바이브 코딩의 핵심 개념: 자연어 프롬프트를 통해 AI가 자동으로 코드를 생성하는 혁신적인 방법을 소개합니다.
⚡️ 다양한 도구 소개: Cursor, GitHub Copilot, VS Code, Cline 확장 등 여러 AI 및 코딩 보조 도구의 역할과 사용법을 설명합니다.
📌 실습 단계: VS Code 설치부터 API 키 설정, 프로젝트 폴더 생성, 그리고 Windows 앱과 웹페이지 제작까지 전 과정을 단계별로 시연합니다.
🚀 프롬프트 엔지니어링의 중요성: AI에게 올바른 프롬프트를 제공하는 기술이 결과물의 품질을 좌우함을 강조합니다.
🌟 AI 모델 비교: DeepSeek와 Claude 3.7 Sonnet의 성능 차이를 예시로 들어, 보다 정교한 코딩 결과를 보여줍니다.
📌 트러블슈팅 및 개선: AI가 생성한 코드의 오류를 수정하고, Git 및 PowerShell 업데이트 등 환경 설정 문제 해결 방법을 안내합니다.
🚀 미래 전망: AI 기반 코딩이 개발 분야의 접근성을 극대화하며, 전문가와 초보자 모두 활용 가능한 시대가 도래하고 있음을 시사합니다.

용어 설명

바이브 코딩

개발자가 자연어로 문제를 설명하면 AI가 자동으로 코드를 생성하는 프로그래밍 기법을 의미합니다.

프롬프트 엔지니어링

AI에게 원하는 결과를 얻기 위해 구체적이고 명확한 자연어 지시문을 작성하는 기술입니다.

API (응용 프로그램 인터페이스)

프로그램과 프로그램 간 통신을 가능하게 하는 인터페이스로, 다양한 AI 모델과 연동하여 데이터를 주고받습니다.

Cline 확장

VS Code 내에서 설치하여 AI와의 채팅 및 코드 생성을 돕는 확장 프로그램으로, 계획(plan)과 실행(act) 모드를 제공합니다.

YOLO 모드

AI가 사용자의 추가 승인 없이 터미널 명령을 자동으로 실행할 수 있도록 하는 기능입니다.

에이전틱 코딩

개발자가 세부사항을 일일이 작성하지 않고, AI가 스스로 문제의 해결책을 제시하여 코드를 생성하는 방식을 말합니다.

영상은 최근 AI 도구 탐색과 바이브 코딩의 기본 개념에 대해 소개합니다. 자연어로 AI에게 명령해 코드를 생성하는 혁신적인 프로세스를 설명합니다.

[00:00] 바이브 코딩의 개념과 AI 도구 탐색에 대한 소개. AI 모델에 지시사항을 제공하여 자동으로 코드를 생성하는 방식을 설명하고, 이 영상에서 다룰 주요 내용을 소개합니다.

바이브 코딩의 기본 원리와 이를 통한 빠른 프로토타입 제작 방법을 논의합니다. 제작 과정에서 XML, PowerShell, 그리고 C# 등 다양한 언어 경험을 공유합니다.

[00:37] 바이브 코딩의 정의와 작동 방식 설명. 자연어로 문제를 설명하면 AI가 실행 가능한 코드를 생성하며, 세부적인 이해 없이도 개발이 가능한 특징을 설명합니다.

[01:19] 발표자의 개인적인 코딩 여정 공유. XML, PowerShell, WPF 등 다양한 기술을 활용한 프로젝트 경험과 C#으로의 전환 과정을 설명합니다.

Cursor, GitHub Copilot, VS Code, Cline 확장 등 핵심 도구들을 소개합니다. 실제 설치 및 기본 설정 과정, API 키 생성, 인터넷 연결 요건을 안내합니다.

[02:28] 바이브 코딩 도구와 AI 모델 소개. Cursor, Claude 3.5/3.7 Sonnet의 특징과 장단점, GitHub Copilot 등 현재 사용 가능한 도구들을 설명합니다.

[03:11] VS Code와 Cline 확장 프로그램 소개. Cline은 VS Code에서 AI와 대화하며 코드를 작성할 수 있게 해주는 도구이며, 다양한 API와 함께 사용 가능합니다.

[03:32] OpenRouter 서비스 설명. 구글의 무료 API와 일부 유료 API를 제한적으로 사용할 수 있으며, Replit, Windsurf 등 다양한 도구들도 소개됩니다.

프로젝트 워크스페이스 설정, API 키 입력, YOLO 모드와 자동 승인 기능 등을 설명합니다. 또한, 올바른 프롬프트 작성법을 강조합니다.

[04:00] 설정 요구사항 설명. 특별한 하드웨어 없이 현대적인 코드 에디터를 실행할 수 있는 컴퓨터와 안정적인 인터넷 연결만 있으면 됩니다.

[04:29] Cursor의 YOLO 모드와 Cline의 자동 승인 기능 설명. AI 프롬프트 작성의 중요성과 이를 배우는 방법에 대해 설명합니다.

[05:04] Vibe Coding의 장점과 사용 사례 소개. 빠른 프로토타이핑이 가능하고, 비개발자도 아이디어를 실현할 수 있으며, 디버깅도 쉽게 할 수 있습니다.

[06:12] AI 모델의 한계점과 해결 방안에 대해 설명합니다. AI가 문제를 해결하지 못할 때는 직접 개입하거나 다른 모델을 사용해야 하지만, AI의 발전으로 이런 문제는 점차 줄어들고 있습니다.

[06:28] 바이브 코딩의 장점으로 미래 개발 가능성을 설명합니다. 프로그래머가 적절한 프롬프트만 제공하면 AI가 새로운 기능을 기존 애플리케이션에 쉽게 추가할 수 있습니다.

[06:44] 바이브 코딩의 5단계 퀵 스타트 워크플로우를 소개합니다. 프로젝트 계획, 가이드라인 문서화, 명확한 프롬프트 제공, 코드 검토, 문제 해결 과정을 설명합니다.

[07:28] 바이브 코딩에서 피해야 할 일반적인 실수들을 설명합니다. AI를 과도하게 신뢰하거나, 계획 없이 코딩을 시작하는 것 등이 포함됩니다.

[08:05] 초보자의 바이브 코딩 학습 과정을 설명합니다. AI와의 상호작용을 통해 코드와 앱의 작동 방식에 대한 이해도를 높일 수 있습니다.

[08:31] Visual Studio Code 설치와 Cline 확장 프로그램 설정 방법에 대한 실습을 시작합니다. 단계별 설치 과정을 보여줍니다.

Cline을 활용하여 Windows의 시작 메뉴 정렬을 전환하는 간단한 WPF 응용프로그램을 제작합니다. 단계별로 파일 생성, 빌드, 실행 그리고 오류 수정까지 시연합니다.

[09:14] VS Code 설치를 완료하고 Copilot 대신 Cline 확장 프로그램을 설치하는 과정을 설명합니다.

[10:08] Cline의 주요 기능을 소개합니다. Claude 3.7 Sonnet의 에이전트 코딩 기능, 프로젝트 파일 관리, 브라우저 사용, 터미널 명령어 실행 등이 가능합니다.

[10:43] API 키 설정 방법을 설명합니다. 자체 API 키를 사용하여 다양한 언어 모델에 접근할 수 있습니다.

[11:20] OpenRouter 계정 생성과 API 키 발급 과정을 상세히 설명합니다. 무료로 사용 가능하며, API 키의 안전한 관리가 중요함을 강조합니다.

[12:17] API 키 설정과 Cline 확장 프로그램 초기 설정 방법을 설명합니다. OpenRouter API 키를 붙여넣고 시작하는 과정을 보여줍니다.

[12:41] AI 모델 선택에 대해 설명합니다. Claude 3.7 Sonnet이 가장 강력하지만 비용이 높아, 무료 모델인 DeepSeek Chat을 선택하기로 합니다.

[13:20] 사용자 지정 명령어 설정에 대해 설명합니다. AI가 코드를 작성할 때 따라야 할 중요한 지침들을 설정하는 방법을 보여줍니다.

[14:35] Cline의 계획 모드와 실행 모드에 대해 설명하고, 권한 설정 및 익명 데이터 수집 동의 과정을 안내합니다.

[15:27] Cline의 강력한 웹 검색과 API 통합 기능에 대해 설명하고, 기본 설정값으로 시작하는 방법을 소개합니다.

[16:09] Cline의 이미지 처리 기능과 다양한 AI 모델 지원에 대해 설명하며, 특히 Claude와 같은 고급 모델의 기능을 소개합니다.

[16:51] 프로젝트를 시작하기 위한 기본 설정과 폴더 구성 방법을 단계별로 설명합니다.

[17:20] 바이브 코딩으로 다양한 애플리케이션을 만들 수 있음을 설명하고, Windows 11 작업 표시줄 커스터마이징 앱 제작을 위한 프롬프트 작성을 시작합니다.

[18:53] AI의 계획 모드에서는 원하는 결과를 얻기 위해 여러 번의 대화가 필요할 수 있다는 점을 설명합니다.

[19:14] AI가 시작 메뉴 정렬을 위한 레지스트리 키를 식별하고, 이미 내장된 지식을 바탕으로 작업을 시작했습니다.

[19:40] AI가 모던한 WPF 창과 토글 스위치를 포함한 UI 디자인 계획을 제안하고, 머티리얼 디자인을 적용한 깔끔한 레이아웃을 설계했습니다.

[20:27] 바이브 코딩의 실제 동작을 보여주며, AI가 자동으로 파일을 생성하고 필요한 개발 환경을 구성하는 과정을 설명합니다.

[21:20] .NET 개발 환경 설정을 위해 필요한 런타임과 SDK를 설치하는 과정을 진행합니다.

[21:59] Visual Studio로 돌아와 AI가 생성한 C# 애플리케이션을 실행하려 했으나, dotnet 명령어 인식 문제가 발생했습니다.

[22:19] VS Code 업데이트와 셸 설정 문제를 해결하기 위해 PowerShell을 기본 터미널로 설정하고 문제 해결을 시도했습니다.

[23:04] 체크포인트 기능 사용을 위해 Git 설치가 필요하다는 것을 확인하고, Git과 관련 설정을 진행했습니다.

[23:56] 추가적인 문제 해결을 위해 PowerShell을 최신 버전으로 업데이트하고 VS Code를 재시작했습니다.

[24:34] PowerShell 7과 Git 설정을 완료하고 빌드 명령을 다시 시도했으나 빌드 오류가 발생했습니다.

[25:06] AI에 애플리케이션 오류를 해결하도록 요청하고, 빌드 문제를 수정하기 위해 필요한 파일들을 생성했습니다.

[25:32] 시스템 설정을 완료하고 .NET Runtime 6을 설치한 후, 애플리케이션을 성공적으로 실행했습니다.

[26:11] 완성된 Windows 앱에서 시작 메뉴 정렬을 왼쪽과 중앙으로 전환하는 기능을 테스트했습니다.

[26:54] 새로운 프로젝트로 Memory Website를 시작하고, DeepSeek 모델을 사용해 간단한 원페이지 웹사이트 제작을 요청했습니다.

HTML, CSS, JavaScript를 이용한 간단한 웹페이지를 제작합니다. DeepSeek와 Claude 3.7 모델을 활용하여 디자인과 기능을 구현하는 과정을 보여줍니다.

[27:48] AI가 HTML, CSS, JavaScript를 사용해 웹사이트를 생성하고, 요청한 링크들이 정상적으로 작동하는 것을 확인했습니다.

[28:23] AI를 통한 웹사이트 버튼 색상 변경 작업을 수행하면서, 유튜브 버튼은 빨간색으로, 웹사이트 버튼은 파란색으로 변경하는 과정을 보여줍니다.

[28:52] 사용자가 직접 코드를 수정하여 버튼 색상과 호버 효과를 변경하는 방법을 설명하고, AI에만 의존할 필요가 없음을 강조합니다.

[29:30] AI와 코딩의 미래에 대해 논의하며, 전문가들은 코딩의 90% 이상이 AI에 의해 수행될 것이라고 예측하지만, 기본적인 이해는 여전히 중요함을 강조합니다.

[29:47] DeepSeek에서 Claude 3.7 Sonnet으로 전환하여 동일한 프로젝트를 수행하기 위한 준비 과정을 설명합니다.

[30:33] Claude 3.7 설정을 조정하고 새로운 프로젝트를 시작하여 웹사이트 생성 작업을 진행합니다.

[31:40] Claude가 웹사이트 생성을 마무리하며 styles.css와 script.js 파일을 생성합니다. DeepSeek보다 더 체계적이고 구조화된 코드를 작성하고 있습니다.

[32:10] 웹사이트의 기본 구조가 완성되었고, 백그라운드에서 자동 테스트가 진행 중입니다. 실제 서버 연동을 위한 플레이스홀더 코드도 포함되어 있습니다.

[32:39] Cline과 Claude의 조합이 현재로서는 최고의 선택임을 설명합니다. 두 도구가 매우 효과적으로 연동되어 작동하며, 웹사이트 테스트도 자동으로 수행됩니다.

DeepSeek와 Claude 3.7 Sonnet의 결과물을 비교하며 각 모델의 장단점을 설명합니다. 이미지 업로드 및 CSS 수정으로 개선 사항을 반영하는 과정을 다룹니다.

[33:12] 완성된 웹사이트의 기능을 시연하며, 다크 모드 토글, 링크 기능, 이메일 폼 등 다양한 기능이 구현되어 있음을 보여줍니다.

[33:56] 동일한 프롬프트로 만든 DeepSeek와 Claude의 결과물을 비교하며, Claude의 결과물이 훨씬 더 우수함을 설명합니다.

[35:15] Claude를 이용한 웹사이트 제작 비용이 50센트 미만이었으며, 간단한 디자인 수정도 즉시 가능함을 보여줍니다.

[36:26] AI 기술의 빠른 발전 속도를 설명하며, 현재 Claude가 코딩 분야에서 최고의 성능을 보이고 있다고 평가합니다.

[37:00] 바이브 코딩의 기초적인 내용을 설명하고, VS Code와 Cline 설치 방법에 대한 개요를 제공합니다.

바이브 코딩의 활용 가능성과 AI를 통한 자동 코딩의 미래를 전망합니다. 최종적으로 영상이 제공하는 학습 자료와 향후 콘텐츠 계획을 공유합니다.

[37:34] AI 활용에 대한 부정적인 시각을 계산기 사용에 대한 과거의 반발과 비교하며, 이는 결국 표준이 될 것이라고 전망합니다.

[00:00] 최근에 저는 더 많은 AI 도구들을 살펴보면서 바이브 코딩에 빠져들었는데요,

[00:04] 간단히 말해서 AI 모델에 지시사항을 제공하고 코드를 자동으로 작성하게 하는 것입니다.

[00:09] 이 영상에서는 좀 더 자세히 들어가서 바이브 코딩이 정확히 무엇인지 종합적으로 살펴보려고 합니다.

[00:14] 현재 사용할 수 있는 도구들과 제가 현재 사용 중인 도구들, 그리고 이 영상을 녹화하는 시점에서

[00:19] 코드 작성에 가장 적합하다고 생각하는 AI 모델들도 소개해드리겠습니다.

[00:23] 또한 컴퓨터에 이것을 설치하고 작동시키는 방법을 단계별로 안내해드리고,

[00:27] 무료로 완전히 코드를 작성하고 생성하는 방법도 알려드리겠습니다.

[00:32] 그럼 시작해보겠습니다. 바이브 코딩이 정확히 무엇일까요?

[00:37] 바이브 코딩은 개발자가 자연어로 된 프롬프트를 사용해 대규모 언어 모델에 문제를 설명하면,

[00:42] 수동 코딩이나 상세한 이해 없이도 실제 작동하는 코드를 생성하는 AI 기반 프로그래밍 방식입니다.

[00:47] 개발자들은 모든 세부 사항을 이해할 필요 없이 AI가 생성한 코드를 받아들이며 '분위기에 맡기는' 것입니다.

[00:53] 생성된 코드의 세세한 부분을 신경 쓰지 않고도 빠른 소프트웨어 개발과 디버깅이 가능합니다.

[00:58] 심지어 초보 프로그래머도 광범위한 훈련 없이 소프트웨어를 만들 수 있게 해줍니다.

[01:04] 코딩 경험이 전혀 없더라도 바이브 코딩을 시작할 수 있습니다.

[01:09] 앱이 어떻게 작동하는지 이해하기 위해서는 코드가 어떻게 작동하는지 어느 정도 이해가 필요합니다.

[01:14] 제 개인적인 경험을 말씀드리자면, 약 1년 전만 해도 저는

[01:19] 코딩이나 프로그래밍 언어에 대해 전혀 경험이 없었습니다.

[01:25] UnattendedWinstall GitHub 프로젝트에서 XML 파일로 시작했고,

[01:29] XML 파일에서 사용되는 PowerShell 스크립팅과 배치 파일 스크립팅도 배워야 했습니다.

[01:35] 그 후에 WPF 윈도우나 Windows presentation forms 창이 있는

[01:40] PowerShell 애플리케이션인 WIMUtil을 만들었습니다.

[01:47] 그 다음으로 Winhance를 만들었는데, 이것도 현재는 PowerShell WPF 애플리케이션입니다.

[01:52] 하지만 지금은 Windows 애플리케이션에 더 적합한 언어인 C#으로 리팩토링하고 있습니다.

[01:58] 가까운 미래에 준비가 될 것이고, 현재의 Winhance PowerShell

[02:03] 애플리케이션보다 훨씬 더 나아질 것입니다.

[02:08] 바이브 코딩에 대한 제 개인적인 경험을 공유하고 싶었습니다.

[02:13] 모바일 앱이든, 웹사이트든, Windows 앱이든, Linux 앱이든 상관없이

[02:18] 아이디어만 있다면 현재는 바이브 코딩과 적절한 도구를 사용해 무료로 무엇이든 만들 수 있습니다.

[02:24] 이제 다음 섹션으로 넘어가보겠습니다.

[02:28] 이 영상을 녹화하는 시점에서 사용할 수 있는 주요 도구와 기술 중 하나는 Cursor입니다. Cursor는

[02:34] 제가 알기로는 AI 에이전트 코딩 기능을 갖춘 최초의 바이브 코딩 앱 중 하나였습니다.

[02:40] 제가 사용해본 최고의 API나 AI 모델은 Claude 3.5 Sonnet이었고, 최근에는

[02:46] Claude 3.7 Sonnet이 출시되었는데, 지금까지는 3.5보다 훨씬 더 좋았습니다.

[02:51] 인터넷상에서 많은 사람들이 Claude와 그의 코딩 능력에 대해 이야기하고 있습니다.

[02:56] Claude API는 유료 서비스이고 꽤 비싸지만, 정말 뛰어납니다.

[03:01] 하지만 무료 대안들도 있어서 이에 대한 접근 방법도 보여드리겠습니다.

[03:06] 또한 Microsoft 제품에 이미 통합되어 있는 GitHub Copilot도 있습니다.

[03:11] 이 영상에서는 Visual Studio와 Visual Studio Code, 그리고 Cline 확장 프로그램을 사용할 것입니다.

[03:16] Cline은 VS Code에 설치할 수 있는 확장 프로그램입니다. 이것을 올바르게 설정하면

[03:21] AI와 대화하면서 코드를 작성하게 할 수 있습니다. 또한 원하는 다양한 API와 함께 사용할 수 있죠.

[03:26] OpenRouter 서비스도 소개해드리겠습니다. OpenRouter를 통해

[03:32] 구글의 무료 API를 포함한 여러 API에 접근할 수 있습니다. 일부 유료 API도

[03:37] 하루 몇 번 정도 무료로 사용해볼 수 있지만, 사용 횟수가 제한되어 있습니다.

[03:43] 이 영상을 녹화하는 시점에는 Replit, Windsurf, 터미널 기반 코딩 앱인 Claude Code,

[03:48] Aider, Lovable.dev, Bolt, 그리고 Vercel의 v0와 같은 다른 도구들도 있습니다.

[03:56] 이제 설정 요구사항과 장점, 그리고 사용 사례에 대해 알아보겠습니다.

[04:00] 컴퓨터의 경우, 특별한 하드웨어가 필요하지 않습니다. VS Code나 Cursor 같은 현대적인 코드 에디터를

[04:05] 실행할 수 있는 컴퓨터면 충분합니다. 그리고

[04:11] 앞서 언급한 Cursor나 이 영상에서 사용할 Cline 확장이 설치된 VS Code와 같은

[04:15] Vibe Coding 호환 도구를 다운로드하고 설치하면 됩니다.

[04:20] 시작하려면 컴퓨터에 빈 폴더를 만들어 프로젝트 작업공간으로 사용하세요.

[04:24] 또한 AI 모델을 API를 통해 사용하기 위해서는 안정적인 인터넷 연결이 필요합니다.

[04:29] Cursor에는 YOLO 모드라는 기능이 있는데, 이를 활성화하면 AI가

[04:35] 터미널 명령어를 실행할 때마다 수동으로 승인할 필요가 없습니다.

[04:40] 하지만 이 영상에서는 VS Code의 Cline 확장을 보여드릴 건데, 이것도 비슷한 자동 승인 기능이 있습니다.

[04:45] 추가로 언급할 점은, 원하는 결과를 얻기 위해서는 AI 모델에 어떻게 프롬프트를 작성해야 하는지 알아야 합니다.

[04:50] 이 영상과 앞으로 이 채널에 업로드할 영상들에서 도움을 드리겠습니다.

[04:55] AI가 완벽하게 이해하고 정확히 원하는 결과를 주도록 프롬프트를 작성하는 것은

[04:59] 일종의 예술이기 때문입니다.

[05:04] 이제 장점과 사용 사례로 넘어가보면, 먼저 빠른 프로토타이핑이 가능합니다.

[05:14] 수동으로 코드를 작성하지 않고도 아이디어를 빠르게 실제 프로토타입으로 만들 수 있습니다.

[05:19] 개발을 민주화하여 비개발자, 기업가, 디자이너 등이

[05:25] 광범위한 코딩 지식 없이도 자신의 아이디어를 실현할 수 있게 합니다.

[05:30] 소프트웨어 개발의 진입 장벽을 크게 낮춰 명확한 아이디어만 있다면 누구나 접근할 수 있습니다.

[05:35] 앞서 말씀드렸듯이, 어떤 플랫폼이나 어떤 소프트웨어를 만들고 싶은지

[05:40] 아이디어와 비전만 있고 시간을 투자할 의지가 있다면

[05:44] vibe coding으로 만들 수 있습니다. 전문가의 도움이 필요 없죠.

[05:50] AI가 전문가 역할을 합니다. 또한 빠른 수정과 디버깅도 가능합니다.

[05:56] 에러 메시지를 해석하고 자동으로 수정사항을 적용하여 디버깅을 단순화합니다.

[06:01] 오류가 발생하면 사용자는 추가 설명 없이 오류 메시지를 복사해서 시스템에 넣기만 하면 됩니다.

[06:06] 하지만 주의할 점이 있습니다. 앞서 설명했듯이, 때로는 AI가 문제를 해결하지 못하고 무한 루프에 빠질 수 있습니다.

[06:12] 문제를 파악하고 해결책을 제시하지 못하는 상황이 발생할 수 있습니다. 이런 경우에는 직접 개입하거나

[06:17] 다른 AI 모델을 사용해야 할 수 있습니다. 하지만 AI 모델들이 계속 발전하면서 이런 문제는 점점 줄어들고 있습니다.

[06:23] 그리고 이런 발전은 매일 일어나고 있죠. 마지막으로, 미래 개발도 가능하게 합니다.

[06:28] 프로그래머가 직접 코드를 작성할 필요 없이 최소한의 노력으로

[06:33] 기존 애플리케이션에 새로운 기능을 빠르게 추가할 수 있습니다. 올바른 프롬프트와

[06:37] 구조, 그리고 지시사항만 제공하면 AI가 기존 애플리케이션에 작동하는 기능을 추가할 수 있습니다.

[06:44] 마지막으로, 퀵 스타트 워크플로우를 보여드리겠습니다. 이 인포그래픽에서

[06:50] 다섯 단계를 확인할 수 있습니다. 첫째, AI와 작업하기 전에 아이디어, UI 디자인, 기능 세트를 결정하는

[06:54] 프로젝트 계획이 필요합니다. Cursor를 사용한다면, AI 도구가 따라야 할 가이드라인을 Cursor 규칙 파일에

[07:01] 문서화할 수 있습니다. 하지만 제가 보여드릴 것처럼 Cline과 VS Code에서도 동일한 작업이 가능합니다.

[07:06] 셋째, 무엇을 만들고 싶은지에 대해 명확하고 구체적인 프롬프트를 제공해야 합니다.

[07:12] AI에게 어떻게 프롬프트를 작성해야 하는지 아는 것이 정말 중요합니다.

[07:17] 그리고 출력된 결과를 검토하고 생성된 코드에 오류나 문제가 있는지 확인해야 합니다.

[07:22] 문제가 있다면 그것을 AI에 복사하여 붙여넣고 해결을 요청하면 됩니다.

[07:28] 마지막으로 피해야 할 일반적인 실수들이 있습니다. 초보자들이 흔히 저지르는 실수는 바이브 코딩에서 AI를 너무 신뢰하는 것입니다.

[07:34] 특히 대규모 코드베이스에서는 환각 문제가 발생할 수 있기 때문입니다.

[07:39] 프로젝트가 매우 큰 경우, 명확한 창의적 통제를 유지하지 않고 AI가 프로젝트 방향을 결정하도록 두거나

[07:44] AI가 따라야 할 가이드라인을 문서화하지 않는 것이 문제가 될 수 있습니다.

[07:49] 또한 계획 단계를 건너뛰고 바로 코딩에 뛰어드는 것도 문제입니다. 이것이 제가 Cline을 특히 좋아하는 이유입니다.

[07:55] Cline은 계획 모드와 실행 모드가 있기 때문이죠. 다른 바이브 코드 에디터들도 기본적으로

[08:00] 같은 기능을 가지고 있지만, 저는 개인적으로 Cline을 선호합니다. 여기서 한 가지 더 추가하자면

[08:05] 초보자라면 경험이 없기 때문에 AI를 어느 정도 신뢰할 수밖에 없습니다.

[08:11] 하지만 AI가 실수를 하고 그것을 해결하는 과정을 통해

[08:16] 앱이 어떻게 작동하는지, 코드가 어떻게 동작하는지, 그리고 모든 것이 어떻게 함께 작동하는지에 대한

[08:21] 지식이 크게 향상됩니다. 이제 바이브 코딩이 무엇인지,

[08:27] 사용할 수 있는 다양한 도구와 작동 방식에 대해 종합적으로 살펴보았으니,

[08:31] 이제 Visual Studio Code를 다운로드하고 설치하는 방법, Cline 확장을 설치하는 방법,

[08:36] 다양한 API 키를 얻는 방법, 그리고 이를 사용하여 코드를 작성하고 아이디어를 실현하는 방법을 단계별로 보여드리겠습니다.

[08:42] 먼저 Visual Studio Code를 다운로드하겠습니다. code.visualstudio.com/download에서 받을 수 있지만,

[08:46] 이 모든 다운로드 링크와 제가 언급한 내용은

[08:51] 제 웹사이트 글에서도 확인할 수 있습니다. 이 영상의 설명란에서 링크를 찾을 수 있습니다.

[08:55] 저는 Windows용을 다운로드하겠습니다. Windows 다운로드 버튼을 클릭하면

[08:59] 자동으로 다운로드가 시작되고, 파일을 클릭하여 설치를 시작하면 됩니다.

[09:04] 약관에 동의하고 일반적인 설치 과정을 진행합니다. 여기 있는 모든 체크박스를 선택하는 것을 추천합니다.

[09:09] 다음을 클릭하고 설치를 클릭한 다음, 설치가 완료될 때까지 기다리면 됩니다. 완료되면

[09:14] 설치가 완료되면 '완료'를 클릭하면 VS Code가 실행됩니다.

[09:19] VS Code에서 Copilot을 무료로 사용할 수도 있지만, 이 영상에서는 다루지 않을 예정입니다.

[09:24] 우리는 Visual Studio Code에서 Cline을 설정할 것입니다. 이를 위해서

[09:30] 여기 있는 확장 프로그램 버튼을 클릭하세요. 그런 다음 검색창에

[09:35] Cline을 검색하면 Cline 결과가 나타날 것입니다. 보시다시피 거의

[09:39] 백만 번 다운로드되었고 비슷한 다른 확장 프로그램들도 있지만, 공식 Cline이

[09:45] 바로 여러분이 찾는 것입니다. Roo code(이전의 Roo Cline)도

[09:50] 아주 좋은 확장 프로그램이라고 들었습니다. 아직 테스트해보진 않았지만, 다른

[09:54] 확장 프로그램을 시도해보고 싶다면 Roo code를 사용해볼 수 있습니다. 하지만 우리는 Cline을 설치할 것입니다.

[09:59] 개발자를 신뢰할 수 있으니 설치를 진행하고, 설치가 완료될 때까지 기다립니다.

[10:04] 설치가 완료되면 사이드바에 Cline 아이콘이 나타나고 사용을 시작할 수 있습니다.

[10:08] 보시다시피 Cline은 Claude 3.7 Sonnet의 혁신적인 에이전트 코딩 기능 덕분에

[10:14] 다양한 작업을 수행할 수 있고, 프로젝트 파일을 생성하고 편집하며,

[10:20] 프로젝트를 탐색하고, 브라우저를 사용하며, 사용자의 허가를 받아 터미널 명령어를 실행할 수 있는

[10:26] 도구들에 접근할 수 있습니다. 또한 MCP를 사용하여 새로운 도구를 만들고 자체 기능을 확장할 수 있습니다.

[10:32] 이 영상에서는 MCP에 대해 다루지 않을 것입니다만, 기본적으로

[10:37] MCP를 사용하면 AI의 기능을 더욱 강화할 수 있습니다. 이 영상에서는

[10:43] Cline 설정, AI 모델용 API 키 제공, 그리고

[10:48] 간단한 앱이나 게임 작성에 집중할 것입니다. 저는 Cline 계정을 사용한 적이 없고 항상 자체 API 키를 사용했습니다.

[10:54] 그래서 이 영상에서도 그렇게 하겠습니다. '자체 API 키 사용'을 클릭하면

[10:58] API 제공자를 선택할 수 있습니다. 드롭다운 메뉴를 클릭하면

[11:03] 다양한 옵션이 나타납니다. 이것들은 코딩에 사용할 수 있는

[11:08] 대규모 언어 모델들입니다. 전에 언급했듯이 저는 Anthropic의 Claude 3.7 Sonnet을 사용합니다.

[11:14] 하지만 이러한 API를 직접 사용하고 싶지 않다면, OpenRouter

[11:20] 계정을 만들고 openrouter.ai에 가서 로그인할 수 있습니다. 계정이 없다면

[11:26] 새로 만들어야 합니다. 저는 제 구글 계정 중 하나로 로그인하겠습니다.

[11:30] 이제 로그인이 완료됐습니다. 상단의 프로필 아이콘을 클릭한 다음

[11:35] 키로 이동할 수 있습니다. API 키를 받을 수 있고, 이 계정에 이미 몇 개의 키를 만들었음을 볼 수 있습니다.

[11:41] 이 계정에 크레딧도 추가했네요. 현재 잔액은 $10입니다만, OpenRouter를 사용하기 위해

[11:46] 자금을 추가할 필요는 없습니다. 완전히 무료로 사용할 수 있습니다.

[11:51] 새 키를 만들어보겠습니다. 'Cline testing'이라고 이름 짓고, 크레딧 한도를 설정해보겠습니다.

[11:56] 이 모델들이 무료라는 것을 보여드리기 위해서입니다. 그러면 API 키를 받게 되는데,

[12:02] 지금 복사하거나 메모해서 저장해야 합니다. 나중에는 다시 볼 수 없기 때문입니다.

[12:07] 이 키는 기밀이고 개인적으로 관리해야 합니다. 누군가 여러분의 API 키에 접근하면

[12:12] 여러분의 크레딧을 사용해 앱을 개발할 수 있습니다. 그러니 절대 이 키를 다른 사람과 공유하지 마세요.

[12:17] 그리고 다른 API 키도 마찬가지입니다. 자, 이제 복사해보겠습니다. 그리고 Cline 확장 프로그램으로 이동해서

[12:22] OpenRouter API 키를 붙여넣고 '시작하기'를 클릭하겠습니다. API 키를 추가하면

[12:29] 더 많은 옵션을 사용할 수 있게 됩니다. 현재 선택된 모델은 Claude 3.7 Sonnet인데

[12:34] 보시다시피 이 모델은 비용이 꽤 높지만, 가장 강력한 기능을 제공합니다.

[12:41] Cline은 항상 Claude 3.7 Sonnet을 추천하지만, 우리는 다른 목적으로

[12:48] 무료 모델을 사용할 것입니다.

[12:53] 기존 설정을 지우고 'free'라고 입력하면 됩니다. 이렇게 하면 모든 무료 모델에 접근할 수 있습니다.

[12:58] 일부 모델은 사용량 제한이 있을 수 있지만, Google Gemma나 Google Gemini 같은

[13:04] 구글 모델들은 완전히 무료이기 때문에 사용량 제한이 없습니다.

[13:09] 하지만 현재로서는 이런 무료 모델들이 Claude 3.7 Sonnet만큼 성능이 좋지는 않습니다.

[13:14] 이 영상에서는 DeepSeek Chat 무료 버전을 사용하도록 하겠습니다.

[13:20] 이것을 선택하고 이제 사용자 지정 명령어로 넘어가보겠습니다. 이 명령어들은

[13:24] AI에 보내는 모든 요청의 시스템 프롬프트 끝에 추가됩니다. 너무 많은 정보를 넣으면

[13:29] AI의 컨텍스트 윈도우가 꽉 찰 수 있으니 주의해야 합니다. 제가 준비한

[13:34] 몇 가지 사용자 지정 명령어를 붙여넣고 각각에 대해 빠르게 설명해드리겠습니다.

[13:38] 이 명령어들은 제 웹사이트의 가이드에서도 확인하실 수 있습니다.

[13:43] 기본적으로 여기서 하는 지시사항은 항상 프로젝트 마지막에 오류가 없는지 테스트하라는 것입니다.

[13:48] 그 다음으로, AI가 나중에 확장할 계획이 없다면 단순한 자리표시자 코드나 기본 기능만 만들지 말라는 것입니다.

[13:53] AI는 어떤 기능이 10%만 구현되었거나 순수한 자리표시자 코드일 때

[13:59] 그것이 완전히 구현되었다고 말해서는 안 됩니다.

[14:04] A부터 Z까지 완전한 코드를 작성해야 하며, 사용자가 원하는 기능을 하지 않는 자리표시자나 부분적인 코드만 제공해서는 안 됩니다.

[14:10] 그리고 가능한 한 프로젝트 파일을 300~500줄 사이로 유지하고

[14:16] 중복 코드를 만들지 말아야 합니다. 이미 구현된 것이 있다면 새로 만들지 말고 그것을 기반으로 발전시켜야 합니다.

[14:21] 이러한 도구들을 더 많이 사용하다 보면

[14:26] 각각의 모델이 어떻게 작동하는지, 어떤 지시사항이 정말 중요한지

[14:30] 이해하게 될 것입니다. 어떤 모델에는 이런 지시사항이 전혀 필요하지 않을 수도 있죠.

[14:35] 다음으로, 계획 모드와 실행 모드에서 서로 다른 AI 모델을 사용할지 선택할 수 있습니다. Cline에는

[14:41] 코드를 작성하는 실행 모드가 있고, 또 계획 모드가 있는데

[14:45] 계획 모드에서는 실행 모드로 전환했을 때 실행할 상세한 구현 계획을 먼저 세웁니다.

[14:51] 저는 보통 계획 모드와 실행 모드 모두에서 같은 모델을 사용합니다. 그리고 보통

[14:57] 익명 오류 및 사용 보고를 허용합니다. 이는 단순히 사용 데이터와 오류 보고서만 전송하고

[15:03] 코드나 프롬프트, 개인 정보는 Cline에 전송하지 않습니다. 설정이 완료되면

[15:08] '완료'를 클릭하면 Cline과 대화할 수 있는 메인 인터페이스가 나타납니다.

[15:12] 먼저 여기 자동 승인 버튼이 있는 것을 보실 수 있습니다. 이것을 클릭하면

[15:16] Cline에게 파일과 디렉토리 읽기, 파일 편집, 안전한 명령어 실행,

[15:21] 브라우저 사용, MCP 서버 사용 등의 권한을 부여할 수 있습니다. MCP 서버는 다른 주제인데

[15:27] 다른 영상 주제이니 이번에는 다루지 않을 건데, 정말 강력한 기능이에요.

[15:31] 이것까지 설정하면 Cline이 웹을 검색하고

[15:37] 다른 앱이나 API와 통합되어 AI로 할 수 있는 자동화 기능이 엄청나게 많아져요.

[15:42] 하지만 이번 영상에서는 다루지 않을 거예요. 저는 기본적으로

[15:47] 이 옵션들을 모두 선택합니다. 최대 요청 수는 기본값으로 두는데, 이것도 늘릴 수 있지만

[15:53] 저는 기본값으로 두고 사용합니다. 여기 아래에는 AI에게 만들고 싶은 작업을

[15:59] 입력하면 됩니다. 곧 살펴볼 텐데, 이 추가 버튼을 클릭하거나

[16:03] @ 기호를 입력해서 AI에게 폴더나 다른 옵션들을 통해 맥락을 제공할 수 있어요.

[16:09] 그리고 여기 이 버튼이 있는데, 현재는 사용할 수 없지만 이미지를 업로드할 수 있고

[16:14] 이미지를 지원하는 AI 모델이 이미지를 보고 상황을 이해할 수 있죠.

[16:20] 이미지처럼 만들어달라고 하거나 이미지의 오류를 확인해달라고 할 수 있어요.

[16:25] 기본적으로 이미지를 제공해서 문제를 해결하거나 코드를 만들 수 있어요.

[16:30] 현재는 DeepSeek 챗이 이미지를 지원하지 않아서 사용할 수 없지만

[16:35] Anthropic의 Claude같은 더 고급 모델을 사용하면 이 모든 것이 가능합니다.

[16:41] 마지막으로 계획 모드가 있는데, 이 모드에서는 Cline이 계획을 설계하기 위한 정보를 수집하고

[16:46] 실행 모드에서는 Cline이 즉시 작업을 완료합니다.

[16:51] AI에게 지시를 하기 전에 먼저 프로젝트용 폴더를 만들어야 해요.

[16:56] 파일로 가서 폴더 열기를 선택하고, 컴퓨터 어디든 저장할 수 있어요.

[17:00] 저는 기본 디렉토리에 저장할 건데요, 우클릭해서 새 폴더를 만들고

[17:05] Cline Test라고 이름을 붙인 다음 그 폴더를 선택합니다. 이제 프로젝트 폴더가 설정됐고

[17:10] Cline 확장 프로그램을 다시 클릭해서 설정이 모두 그대로인지 확인해보면

[17:15] 기본적으로 저장되기 때문에 그대로 있을 거예요. 이제 코딩을 시작할 준비가 됐습니다.

[17:20] 바이브 코딩으로는 모바일 앱도 만들 수 있고

[17:25] 웹사이트도, 윈도우 앱도 만들 수 있다는 걸 기억하세요. 코딩이나 프로그래밍으로 만들 수 있는 건

[17:31] 바이브 코딩으로도 만들 수 있어요. 제 채널이 윈도우 관련 내용이고

[17:36] 앞으로 리눅스도 다룰 예정이지만, 기본적으로 컴퓨터 기반 애플리케이션을 다루니까

[17:40] Cline에게 간단한 C# WPF 앱을 만들어달라고 할 건데요, 이건 기본적으로

[17:47] 클릭할 수 있는 버튼이 있는 윈도우 창을 가진 앱이에요. 이 앱은 단순히

[17:51] 작업 표시줄을 왼쪽이나 가운데로 전환할 수 있게 해줄 거예요. 프롬프트

[17:57] 엔지니어링이 원하는 결과를 얻는데 매우 중요하기 때문에, 실시간으로

[18:02] 프롬프트를 입력하면서 필요한 경우 설명을 덧붙이도록 하겠습니다.

[18:07] 이렇게 입력할 거예요. 'Windows 11의 작업 표시줄에서 시작 메뉴를 가운데 정렬과 왼쪽 정렬 사이에서

[18:18] 전환할 수 있는 C# WPF 애플리케이션을 만들어주세요. 레지스트리 항목을 사용해서

[18:29] 이를 구현하고, 사용자가 이 두 정렬 사이를 전환할 수 있는 버튼이나 슬라이더를 넣어주세요.

[18:41] 창은 단순하지만 모던한 디자인으로 만들어주세요.' 이렇게 프롬프트를 입력하겠습니다.

[18:48] 지금은 계획 모드에 있어서, AI가 실제로 작업을 시작하기 전에 먼저 계획을 세울 거예요.

[18:53] 실제로 작업을 수행하기 전에 계획 모드에서는 몇 번의 메시지를 주고받아야 원하는 결과를 얻을 수 있을 수도 있습니다.

[18:58] 하지만 일단 이 메시지를 보내고 AI가 어떤 결과를 내놓을지 확인해 보겠습니다.

[19:03] AI가 작업을 전송했고, 입력과 출력 토큰 사용량, 현재 사용 중인 모델의 컨텍스트 윈도우,

[19:09] 그리고 API 비용도 보여줍니다. 무료 모델을 사용하고 있기 때문에 API 비용은 0으로 표시됩니다.

[19:14] AI가 응답했고, 시작 메뉴 정렬을 제어하는 레지스트리 키와 값을 식별할 것입니다.

[19:19] 제가 레지스트리 키를 알려주지 않았지만, AI가 이미 지식 베이스에 그 정보를 가지고 있었습니다.

[19:24] 물론 AI가 필요한 정보를 모르는 경우에는 직접 제공하는 것이 도움이 됩니다.

[19:29] 간단한 작업을 요청했고, AI는 작업 표시줄 정렬을 제어하는 레지스트리 항목을 알고 있었습니다.

[19:34] AI가 세부 내용을 분석하고 계획을 제안했습니다. 레지스트리 구성을 포함하고,

[19:40] 애플리케이션 기능으로는 토글 스위치가 있는 모던한 WPF 창을 만들 것을 제안했습니다.

[19:46] 또한 UI 디자인은 현대적인 머티리얼 디자인 룩을 적용하고,

[19:51] 중앙에 토글 스위치를 배치하고 그 위에 상태 표시기를 둔 깔끔한 레이아웃을 제안했습니다.

[19:57] 제안된 내용에 대해 필요한 조정을 요청할 수 있습니다.

[20:01] AI는 애플리케이션 흐름을 보여주는 Mermaid 다이어그램도 제공했지만,

[20:07] 저는 특별한 수정 없이 이 계획을 그대로 진행하기로 했습니다.

[20:12] 그 옵션을 선택하니 AI가 실행 모드로 전환하라고 세 번이나 요청했습니다.

[20:17] 이제 계획을 실제로 구현하기 위해 실행 모드로 전환해야 합니다.

[20:22] 실행 버튼을 클릭하고 어떤 결과가 나오는지 확인해 보겠습니다.

[20:27] 이것이 바로 바이브 코딩입니다. AI가 직접 파일들을 생성하고 있고, 저는 아무것도 건드리지 않고 있습니다.

[20:32] 키보드와 마우스에서 완전히 손을 뗀 상태이고, Cline이 이 애플리케이션을 만들고 있습니다.

[20:38] Visual Studio에서 알림이 왔는데, 작업 중인 프로젝트 유형에 따라

[20:42] 해당 프로그래밍 언어에 필요한 확장 프로그램 설치를 제안합니다.

[20:48] C#으로 프로젝트를 만들도록 요청했기 때문에,

[20:52] C# 개발 키트 설치 알림을 받았습니다.

[20:58] 이는 Cline이 코드를 디버깅하고 오류를 찾는 데 도움이 됩니다.

[21:04] 지금까지 메인 윈도우와 코드 비하인드 파일인 MainWindow.xaml.cs를 생성했습니다.

[21:08] 이 파일은 메인 윈도우에서 발생하는 모든 동작을 제어합니다. 보시다시피,

[21:14] 아직 아무것도 승인하지 않았지만 AI가 자체적으로 모든 작업을 진행하고 있습니다.

[21:20] 제가 .NET 런타임을 아직 설치하지 않았다는 것을 확인했는데, Cline이 터미널에 설치 명령어를 입력했고

[21:26] .NET 8이 성공적으로 다운로드되었습니다.

[21:32] 이제 .NET Core SDK도 필요하니 SDK 받기를 클릭해서

[21:37] 설치를 진행하겠습니다. 작업 중인 앱과 프로그래밍 언어에 따라

[21:42] Cline과 코드 에디터가 제대로 작동하기 위해 필요한 것들이 다릅니다.

[21:47] .NET SDK를 설치해 보겠습니다. 설치 프로그램을 실행하겠습니다.

[21:53] .NET SDK가 성공적으로 설치되었습니다.

[21:59] 창을 닫고 Visual Studio로 돌아가보겠습니다.

[22:03] AI가 어떤 답변을 줬는지 확인해보죠. C# 애플리케이션을 만들었고 다음 명령어로 실행할 수 있다고 합니다.

[22:09] Cline이 명령어를 실행하려고 하네요. '명령어 실행'을 클릭하겠습니다.

[22:14] SDK를 설치했음에도 아직 dotnet 명령어를 인식하지 못해서 실행할 수 없는 것 같습니다.

[22:19] 여기 다른 문제가 있네요. Cline이 명령어 출력을 볼 수 없다고 합니다.

[22:25] VS Code를 업데이트하고 지원되는 셸을 사용하고 있는지 확인해야 합니다.

[22:31] 먼저 VS Code가 최신 버전인지 확인해보죠. 도움말로 가서 업데이트 확인을 클릭합니다.

[22:36] 최신 버전이네요. 그럼 문제는 이게 아니고, 지원되는 셸을 사용하고 있는지 확인해야 합니다.

[22:42] Windows에서는 Control+Shift+P를 누르고 'terminal'을 입력한 다음 기본 프로필을 선택합니다.

[22:48] 저는 PowerShell을 선택하겠습니다. 확인해보죠.

[22:53] 여기 '여전히 문제가 있나요?'라는 링크가 있네요. Cline이 뭐라고 하는지 봅시다.

[22:58] Cline GitHub 페이지에 좋은 정보가 있네요. VS Code를 재시작했는데도 문제가 계속되고 있습니다.

[23:04] Windows 사용자를 위한 추가 문제 해결 방법으로 Git Bash를 다운로드하라고 합니다.

[23:08] Git Bash를 설치하겠습니다. 체크포인트 기능을 사용하려면 Git이 필요하다고 하네요.

[23:13] 체크포인트는 기본적으로 시간을 되돌려서 파일을 복원할 수 있는 기능입니다.

[23:19] AI가 프롬프트로 인해 뭔가 망쳐놓았을 때

[23:24] 채팅에서 이전으로 돌아가서 모든 것이 정상적으로 작동했던 시점의

[23:29] 체크포인트에서 파일을 복원할 수 있습니다. Git을 설치하러 가보죠. Windows용 설치 프로그램을 다운로드하겠습니다.

[23:35] 기본 에디터로 Visual Studio Code를 Git의 기본 에디터로 선택하겠습니다.

[23:40] 다음을 클릭하고 나머지는 기본값으로 두겠습니다. 다음을 클릭하고

[23:46] Windows를 기본 콘솔 창으로 사용하도록 선택하겠습니다. 다른 것들은 기본값으로 둡니다.

[23:51] 설치를 클릭하고 완료를 누릅니다. 문제 해결 가이드로 돌아가보면

[23:56] VS Code를 종료하고 다시 열어야 한다고 하네요. 그리고 PowerShell도 업데이트해야 한다고 합니다.

[24:02] 그것도 하겠습니다. Windows 64비트용 PowerShell MSI 패키지를 다운로드하고

[24:07] 파일 열기를 클릭합니다. 일반적인 설치 과정을 진행하고

[24:13] 모든 것을 기본값으로 두고 설치를 클릭한 다음, 프롬프트를 수락하고

[24:18] 설치가 완료될 때까지 기다립니다. Visual Studio Code를 다시 열겠습니다.

[24:23] 우리의 Cline 테스트 폴더에 있어야 합니다. Cline으로 돌아가서 최근 작업에 접근할 수 있습니다.

[24:29] Control+Shift+P를 누르고 터미널, 기본 프로필 선택을 합니다.

[24:34] PowerShell 7을 사용해보고, 안 되면 Git으로 전환하겠습니다. Git 메시지가

[24:39] 작업에서 사라진 것을 확인할 수 있네요. 좋은 신호입니다. 터미널을 클릭하고

[24:44] 위쪽 화살표를 눌러서 이전에 실행하려 했던 명령어를 다시 가져온 다음 엔터를 누릅니다.

[24:50] 명령어를 실행해보죠. 빌드가 실패했다는 오류가 발생했네요. 빌드 오류를 수정하고

[24:55] 다시 실행해야 합니다. 이제 이 오류를 선택해서 복사한 다음

[25:01] Cline 채팅창에 다시 붙여넣을 수 있습니다. Control+V를 눌러서

[25:06] 새 줄로 이동하기 위해 Shift와 Enter를 누른 다음, '애플리케이션을 실행했는데 위의 오류가 발생했어요. 수정해주세요.'라고 전달하겠습니다.

[25:13] 대부분의 경우 이렇게 직접 입력할 필요도 없습니다. 오류 메시지만 복사해서 붙여넣으면 AI가 알아서

[25:20] 무엇을 해야 할지 파악할 만큼 똑똑합니다. AI가 문제를 감지하고

[25:26] 앱에 필요한 추가 파일들을 생성했습니다. 이제 스스로 빌드를 시도할 겁니다.

[25:32] PowerShell을 업데이트하고 Git을 설치했기 때문에, AI가 이제 터미널에 접근할 수 있는 것을 확인할 수 있습니다.

[25:38] 빌드가 성공한 것을 확인했습니다. 앱을 실행하려고 하지만 문제가 있네요.

[25:44] 현재 시스템에 필요한 프레임워크가 설치되어 있지 않습니다. '예'를 클릭하겠습니다.

[25:50] 이제 다운로드를 진행하겠습니다. 웹 페이지가 열렸네요.

[25:54] .NET Runtime 6을 위한 페이지입니다. '파일 열기'를 클릭하고,

[26:00] 설치를 클릭한 다음 프롬프트를 수락하고 완료될 때까지 기다린 후

[26:05] 닫기를 클릭합니다. 이제 다시 시도해보겠습니다. 명령어를 다시 실행하면... 됐네요!

[26:11] 앱이 실행되었습니다. 현재 정렬은 중앙입니다. '왼쪽으로 전환'을 클릭해보겠습니다.

[26:16] 변경 중이네요. 자, 왼쪽으로 전환되었습니다. 현재 정렬이 왼쪽인 것을 확인할 수 있죠.

[26:22] '중앙으로 전환'을 클릭하고 새로고침을 기다려보겠습니다. 새로고침이 완료되었네요.

[26:27] 검색창이 좀 버벅이는데, 이건 Windows의 문제인 것 같습니다. 자, 이렇게

[26:33] AI를 사용해서 코딩 지식 없이도 간단한 Windows 앱을 만들었습니다. 이 간단한 앱은

[26:39] 제가 요청한 대로 시작 메뉴 정렬을 왼쪽과 오른쪽으로 전환합니다.

[26:44] 이제 개선사항을 요청할 수 있습니다. 버튼을 변경하거나

[26:49] 디자인을 변경하고 싶다면 AI에게 구현을 요청할 수 있죠.

[26:54] 다른 예시로, 새 프로젝트를 만들어보겠습니다. 새 폴더를 열고

[26:59] 'Memory Website'라고 이름 짓고 폴더를 선택합니다. 그리고 DeepSeek 모델을 사용하는 Cline에게

[27:04] HTML, CSS, JavaScript를 사용해서 간단한 원페이지 웹사이트를 만들어달라고 요청할 겁니다.

[27:14] 웹사이트 제목은 'Memory's Tech Tips'로 하고, 다음 링크나 버튼들을 제공해달라고 할 겁니다.

[27:23] 제 유튜브 채널과

[27:27] 실제 웹사이트 링크를 제공했습니다. 처음부터 시작하니까 먼저 plan 모드로 전환하고,

[27:33] 명령어를 보내서 어떤 계획을 제시하는지 보겠습니다. 계획이 나왔네요.

[27:38] 전체를 읽진 않겠습니다. act 모드로 전환하면

[27:42] 만들기 시작할 겁니다. AI가 이 간단한 원페이지 웹사이트를 만드는 걸 지켜보겠습니다.

[27:48] 이제 스타일 파일을 만들고 있습니다. 물론 코딩이나 프로그래밍을 잘 알수록

[27:53] 더 구체적인 지시를 할 수 있습니다. 사용할 폰트를 지정하거나

[27:58] 원하는 대로 정확히 지시할 수 있지만, 일단 명령어를 실행해서

[28:02] 웹사이트가 열리는지 보겠습니다. 자, 웹사이트가 생성되었네요. 물론 가장 예쁜 디자인은 아니지만,

[28:08] 제가 매우 간단한 프롬프트만 제공했으니까요. 요청한 대로 Memory's Tech Tips가

[28:13] 제목으로 있고, YouTube 시청하기를 클릭하면 아마도 제 유튜브 채널로

[28:19] 이동할 겁니다. 네, 제가 제공한 링크로 잘 이동되네요. 웹사이트 방문을 클릭하면

[28:23] 웹사이트로 이동하게 될 거예요. 이제 이 시점에서 우리는

[28:27] 추가 명령을 내려서 유튜브 버튼은 빨간색으로, 웹사이트 버튼은

[28:36] 파란색으로 만들어달라고 요청할 수 있어요. AI가 무엇을 변경해야 할지 파악했고

[28:41] 이제 그 작업을 수행할 거예요. 명령을 실행하면

[28:46] 자, 보세요. 이제 유튜브 버튼은 빨간색이고 웹사이트 버튼은 파란색이 되었어요. 이렇게 쉽게

[28:52] 바이브 코딩을 할 수 있죠. AI가 모든 걸 하도록 할 필요는 없어요. 직접 코딩할 수도 있습니다.

[28:58] 예를 들어, 여기 유튜브 버튼이 있는데, 이걸 다른 색으로

[29:03] 예를 들어 초록색으로 바꾸고 싶다면, 코드 에디터에서 직접 수정할 수 있어요. 마우스 호버 색상도

[29:07] 마찬가지예요. 호버 색상을 초록색으로 바꾸고 싶다면 그렇게 할 수 있죠.

[29:12] 직접 수정하고 파일을 저장한 다음, 터미널로 가서

[29:19] start index.html 명령어를 실행하면 됩니다. 이제 버튼이 초록색이 되었죠. 이처럼 AI가

[29:24] 모든 걸 하게 할 필요는 없어요. 수동으로도 작업할 수 있지만, AI와 에이전틱 코딩과 관련해서

[29:30] 큰 변화가 일어나고 있어요. 전문가들은 코딩의 90% 이상이

[29:37] AI에 의해 이루어질 것이고 인간의 입력은 매우 적을 것이라고 예측하고 있어요. 하지만 여전히

[29:43] 이것이 어떻게 작동하는지 이해해야 해요. 그렇지 않으면 뒤처질 수 있죠. 지금까지 우리는

[29:47] DeepSeek의 무료 버전을 사용했는데, 일반 DeepSeek 채팅이었어요. 그런데 제가 생각한 것이

[29:52] 이 웹사이트를 만들기 위해 여기서 사용한 정확한 프롬프트를 Claude 3.7 Sonnet에

[29:59] 적용해보는 거예요. 이 영상에서 계속 언급했던 것처럼, DeepSeek과 비교해서

[30:05] 이런 간단한 프롬프트로 어떤 결과물을 만들어내는지 궁금하네요.

[30:10] 이 프롬프트를 복사해서 새 프로젝트를 위한 새 폴더를 만들어보겠습니다.

[30:16] 새 폴더를 만들고 Memory Website with Claude라고 이름 짓고

[30:22] 그 폴더를 선택할게요. 이제 새 작업공간이 생겼네요. Cline으로 돌아가서

[30:26] 설정으로 가보겠습니다. open router를 계속 사용할 건데, 모델을 Sonnet 3.7로 변경할게요.

[30:33] 일반 버전을 선택하고, 이전에 이 API 키에 제한을 걸어뒀던 걸 기억하네요. 그래서

[30:40] 그 제한을 제거해야 해요. 그렇게 하고 저장하면, 이제 무제한으로 사용할 수 있어요.

[30:45] 이 계정에는 약 10달러 정도밖에 없지만, 어쨌든 완료를 클릭하고

[30:52] 여기 아래에서 올바른 모델이 선택되어 있는지 확인해볼게요. 프롬프트를 붙여넣고

[30:58] 먼저 계획 모드로 설정해서 웹사이트를 계획할 수 있도록 하고, Claude 3.7을 사용하고 있죠.

[31:03] 이제 프롬프트를 입력하고 Cline에 보내서

[31:08] 어떤 결과가 나오는지 보겠습니다. 처음에는 계획 모드 사용에서 오류가 발생했지만, 이후에

[31:14] 웹사이트 계획, 구조, 디자인 접근법, 기술적 구현 등을

[31:19] 모두 받았어요. 조정이 필요한지 아니면 진행해도 될지 물어보는데, 저는 아무것도

[31:24] 변경하지 않고 실행 모드로 전환해서 직접

[31:28] 구현을 시작하도록 할게요. 자, 이제 파일들을 만들기 시작했네요. index.html 파일을 이미 만들었고

[31:33] 이제 styles.css 파일에 집중하고 있어요. styles.css 파일 생성을 완료했네요.

[31:40] styles.css 파일이 완성되었네요. 이제 다음으로 JavaScript를 위한 script.js를 만들어보겠습니다.

[31:46] 코드를 보니 DeepSeek이 만든 것보다 Claude가 만드는 웹사이트가 훨씬 더 체계적이고 잘 구성되어 있는 것 같습니다.

[31:51] 최종 결과물이 나오면 확실히 알 수 있겠지만, DeepSeek보다 Claude가 만든 것이 더 좋아 보이네요.

[31:56] 지금은 웹사이트를 테스트하고 있고, 브라우저를 사용 중입니다. 현재 보이지 않는 백그라운드에서 테스트가 진행되고 있어요.

[32:01] 코드를 보니 실제 애플리케이션에서는 이 데이터를 서버로 보내야 한다는 주석이 있네요.

[32:06] 이 데모에서는 단순히 성공 메시지만 보여주도록 되어 있습니다.

[32:10] 이것은 임시 코드이지만, 이미 좋은 기반이 되는 구현이 되어 있습니다.

[32:16] 여기서 웹사이트가 어떻게 생겼는지 대략적으로 볼 수 있지만, 곧 브라우저에서 직접 확인할 수 있을 거예요.

[32:22] 방금 다크 모드 스위치를 테스트했네요. 이것이 바로 에이전틱 코딩 또는 바이브 코딩이 할 수 있는 일입니다.

[32:27] Cline이 브라우저를 사용해서 Claude로 구현한 기능들을 테스트하고 있습니다.

[32:33] 이 영상을 녹화하는 시점에서 Cline과 Claude를 함께 사용하는 것이 최고의 조합이라고 말씀드리는 이유가 바로 이것입니다.

[32:39] 두 도구가 정말 잘 연동되어 작동하거든요.

[32:44] 지금 리뷰를 마무리하고 있고, 작업이 완료되어 브라우저에서 웹사이트를 실행할 준비가 되었네요.

[32:50] 이제 실행 명령을 사용할 수 있습니다. index를 실행하면 브라우저에서 웹사이트가 열립니다.

[32:55] 이미 DeepSeek이 만든 것보다 훨씬 더 보기 좋네요. 다크 모드 토글도 있어서 켜고 끌 수 있습니다.

[33:00] 전반적으로 다크 모드가 더 마음에 드는데, 텍스트와 헤더 사이의 간격에 약간의 문제가 있어 보입니다.

[33:06] 다크 모드 토글 버튼에도 간격 문제가 있네요.

[33:12] 보시다시피 JavaScript도 추가되어 있어서 버튼에 멋진 애니메이션 효과도 있습니다.

[33:17] About 페이지로 연결되는 링크도 있고, 텍스트도 있으며 연락처 양식도 있어서 코드에 지정된 이메일 주소로 메일을 보낼 수 있죠.

[33:22] 물론 이것은 임시 코드라 제대로 구현되지는 않았지만, 링크들은 작동합니다.

[33:30] YouTube 채널을 클릭하면 YouTube 채널로 이동하고,

[33:35] 공식 웹사이트 링크도 마찬가지로 작동합니다.

[33:40] 이 두 AI 모델을 Cline과 함께 사용했을 때의 차이점을 보여드리고 싶었는데,

[33:44] Claude와 DeepSeek에 정확히 동일한 프롬프트를 주었다는 점이 중요합니다.

[33:50] 다시 한번 확인해보면, Claude와 DeepSeek에 똑같은 프롬프트를 주었죠.

[33:56] DeepSeek이 만든 첫 번째 웹사이트를 열어보고

[34:01] Claude가 만든 것과 비교해보면, 정말 하늘과 땅 차이가 납니다.

[34:05] 오른쪽에 있는 Claude가 만든 웹사이트가 같은 프롬프트로도 훨씬 더 좋은 결과물을 보여줍니다.

[34:11] 왼쪽의 DeepSeek이 만든 것과 비교하면 확실히 차이가 나죠. 이제 Claude가 만든 웹사이트로 돌아가서

[34:16] Claude같은 AI 에이전트에 이미지를 업로드할 수 있다는 점을 활용해 보여드리겠습니다.

[34:22] 스니핑 도구를 사용해서 전체 화면의 스크린샷을 찍어보겠습니다.

[34:28] 스크린샷을 복사하고 VS Code로 돌아가서

[34:32] Ctrl+V로 채팅창에 붙여넣겠습니다. 그리고 Claude에게 말해보겠습니다.

[34:38] 방금 웹사이트의 스크린샷을 제공했는데, Memory's Tech Tips 헤더 텍스트와

[34:48] 다크 모드 슬라이더 버튼 상단에 간격 문제가 있는 것이 보이나요? 거의 뒤의 테두리와 겹쳐 보이네요.

[34:59] 여기 이 부분을 말씀드리는 거예요.

[35:06] Cline과 Claude에 이 메시지를 보내보겠습니다. 계획 모드로 전환하지 않고 실행 모드를 유지한 채로

[35:11] 메시지를 보내서 문제를 파악하고 개선할 수 있는지 보겠습니다.

[35:15] 지금까지 이 웹사이트를 만드는 데 든 비용을 보시면 USD로 거의 50센트 정도네요.

[35:22] Claude가 헤더의 간격 문제를 확인했고, 패딩과 요소들의 정렬을 조정해야 한다고 합니다.

[35:27] CSS 파일을 업데이트하겠다고 하니 진행해보죠.

[35:31] 수정 후에 어떻게 보이는지 확인해보겠습니다. 먼저 수정사항이 제대로 적용되었는지 확인하고

[35:36] 브라우저에서 웹사이트를 다시 열어볼 거예요. 다음 API 요청으로 웹사이트를 다시 열어야 합니다.

[35:41] 보시다시피 문제가 해결되었네요. 이제 컨테이너 안에 제대로 들어가 있고,

[35:47] 다크 모드 슬라이더 버튼도 이제 컨테이너와 겹치지 않습니다.

[35:53] 전에도 여러 번 말씀드렸듯이, Claude로 만든 웹사이트와

[35:59] DeepSeek으로 만든 웹사이트의 품질 차이가 하늘과 땅처럼 크다는 것을 확실히 알 수 있습니다.

[36:05] 그리고 Claude로 이 웹사이트를 만드는 데 1달러도 들지 않았어요.

[36:11] 물론 아직 모든 것이 구현되지는 않았지만,

[36:16] 나머지 설정을 완성하는 데는 20-30분도 걸리지 않을 거예요.

[36:22] 여러 AI 모델들 간의 차이점을 이해하셨길 바랍니다.

[36:26] 앞서 말씀드렸듯이, 이 기술은 너무나 빠르게 발전하고 있어서 1-2주 후면

[36:32] 다른 모든 모델들을 능가하는 새로운 모델이 나올 수도 있습니다. Claude 3.7 Sonnet보다도 더 나은 모델이 나올 수 있죠.

[36:38] 하지만 지금까지는 Claude의 모델들이 코딩 분야에서 최고의 성능을 보여왔습니다.

[36:43] 이것이 제가 바이브 코딩을 바라보는 관점이었습니다. 이 영상을 만든 데는 두 가지 이유가 있는데요.

[36:50] 첫 번째는 바이브 코딩이 무엇인지, 그리고 VS Code와

[36:54] Cline을 컴퓨터에 어떻게 설치하는지에 대한 개요를 제공하기 위해서입니다.

[37:00] 물론 이와 비슷한 기능을 하는 다른 코드 에디터들도 많이 있습니다. 제가 보여드린 것보다 훨씬 더 깊이 있는 내용이 있지만,

[37:06] 기본적인 개요를 제공하고 싶었고, 언제든 다시 참고할 수 있는 기초 영상을 만들고 싶었습니다.

[37:12] 앞으로 바이브 코딩이나 코드 에디터 설정에 대한 더 심화된 영상들을 만들 예정이기 때문입니다.

[37:18] 이 영상이 이런 주제에 관심 있는 분들에게

[37:23] 유용한 참고 자료가 될 것 같습니다. 이 기술은 매일 진화하고 있죠.

[37:28] AI가 모든 것을 만들게 하는 것에 대해 어떻게 생각하든지, 그것이 핵심이 아닙니다.

[37:34] 과거에 사람들이 '계산기를 사용하면 안 된다, 수학은 반드시 손으로 계산해야 한다,

[37:38] 그렇지 않으면 바보가 되고 게을러진다'고 말했던 것과 비슷합니다.

[37:43] 어느 정도는 맞는 말일 수 있지만, 몇 년이 지난 지금을 보세요.

[37:49] 모든 사람이 계산기를 사용합니다. 이제는 표준이 되었죠.

[37:53] 인공지능과 현대의 코딩 방식도 마찬가지가 될 것입니다.

[37:58] 이 모든 것을 말씀드리면서, 이 영상이 여러분께 어떤 식으로든 도움이 되었길 바랍니다.

[38:03] 관심이 있으시다면 인포그래픽을 받아가시고, 이 영상의 문서 버전이나 관련 글을 보시려면 제 웹사이트를 방문해주세요.

[38:08] 그리고 항상 제 YouTube 멤버분들과 제 콘텐츠를 지원해주시는 모든 분들께

[38:13] 감사의 말씀을 전하고 싶습니다. 여러분의 지원 덕분에 제가 계속해서 전업으로 콘텐츠를 만들 수 있습니다.

[38:18] 곧 다시 만나뵙겠습니다.

[38:23] 감사합니다.