어린시절 자전거를 배웠던 기억이 있으신가요?
누군가 뒤에서 자전거를 잡아주면, 우리는 좌우로 흔들리면서도 조금씩 앞으로 나아갈 수 있었습니다. 시간이 지나면서 흔들림은 줄어들고 속도가 붙었죠. 그러다 어느 순간, 뒤에서 잡고 있던 손은 놓아졌고, 우리는 홀로 자전거를 타게 되었습니다. 그 이후로는 누군가의 도움 없이도 능숙하게 자전거를 탈 수 있게 되었습니다.

모든 학습은 자전거 타기와 비슷한 점이 많습니다. 한 번 제대로 배운 기술은 평생 기억되고, 우리 삶에서 아주 유용하게 활용될 수 있죠.

AI 시대는 개발자에게 새로운 도전이자 기회를 동시에 제공하고 있습니다. 과거에도 개발자는 끊임없이 변화하는 기술 트렌드에 발맞춰 학습해야 하는 직업이었지만, AI의 등장은 그 학습의 중요성을 한층 더 부각시키고 있습니다. 이제는 단순히 새로운 프레임워크나 언어를 익히는 수준을 넘어, AI 기술의 본질을 이해하고 이를 효과적으로 활용하는 능력이 개발자의 핵심 역량으로 부상하고 있습니다.

바이브 코딩 (VIBE Coding)의 부상: 깊은 이해가 경쟁력

최근 화두가 되고 있는 바이브 코딩(VIBE Coding)은 이러한 변화를 극명하게 보여줍니다. 

AI가 코드를 생성하고 분석하는 데 있어 탁월한 성능을 발휘하면서, 개발자는 이제 모든 코드를 직접 손으로 작성하는 것보다는 AI가 제안하는 코드를 정확하게 이해하고, 검증하며, 필요에 따라 수정하고 개선하는 역할에 더 집중하게 되었습니다. 이때 중요한 건 AI가 생성한 코드를 단순히 복사해서 붙여넣는 게 아니라, 그 코드의 내부 로직, 성능상의 특징, 그리고 잠재적인 문제점까지 꿰뚫어 보는 깊은 이해입니다.

이러한 이해는 결국 기존 개발 지식을 탄탄하게 갖춘 개발자에게 훨씬 유리하게 작용합니다.

AI가 아무리 훌륭한 코드를 생성하더라도, 그 코드가 실제 시스템에 어떻게 통합되어야 하는지, 어떤 데이터 흐름을 가지는지, 그리고 잠재적인 보안 취약점은 없는지 등을 판단하려면 컴퓨터 과학의 기본적인 원리, 자료구조, 알고리즘, 네트워크, 운영체제 등 개발 전반에 대한 깊이 있는 지식이 필수적입니다. 
탄탄한 기본기를 갖춘 개발자는 AI가 제시하는 다양한 코드 옵션 중 가장 적합한 것을 선별하고, 문제가 발생했을 때 빠르게 원인을 파악하며, 효율적인 해결책을 제시할 수 있습니다. 즉, AI는 개발 생산성을 극대화하는 강력한 도구이지만, 이 도구를 제대로 활용할 줄 아는 '진정한 장인'은 여전히 인간 개발자라는 의미입니다.

더 나아가 바이브 코딩에서는 AI에게 어떤 기능을 어떻게 구현하라고 명확하게 지시할 수 있는 능력이 핵심이 됩니다.

AI는 우리의 질문과 지시에 따라 코드를 생성하는데, 우리가 원하는 바를 정확하고 구체적으로 전달할수록 AI는 더 정교하고 적합한 결과물을 내놓을 수 있습니다. 이는 마치 건축가가 설계도를 그리듯이, 개발자가 AI에게 코드의 큰 그림과 세부적인 요구사항을 제시하면, AI는 그 지시에 따라 필요한 부분을 채워나가는 과정과 같습니다.즉, AI는 우리의 의도를 얼마나 잘 이해하고 실행하는지에 따라 그 활용 가치가 달라지며, 이는 결국 개발자의 문제 정의 능력과 명확한 지시 능력에 달려 있습니다.

지속적인 학습의 중요성: 변화에 대한 능동적 태도

따라서 AI 시대의 개발자는 과거 어느 때보다 지속적인 학습을 자신의 숙명으로 받아들여야 합니다.

단순히 AI 관련 기술 스택을 추가적으로 익히는 것을 넘어, 자신이 다루는 도메인 지식을 확장하고, 문제 해결 능력을 강화하며, AI와 협업하는 새로운 방식에 능동적으로 적응해야 합니다. 이는 마치 AI라는 강력한 조력자를 얻었지만, 그 조력자를 제대로 지휘하고 방향을 제시하는 역할은 오롯이 개발자의 몫이 된 것과 같습니다.

결론

AI 시대의 개발자는 AI를 단순히 코드를 대신 작성해 주는 도구로 여기는 것을 넘어, 자신의 역량을 증폭시키는 강력한 파트너로 인식해야 합니다. 그리고 그 파트너와 최고의 시너지를 내기 위해서는 변함없는 학습에 대한 의지와 기존 지식에 대한 깊은 이해, 그리고 AI에게 명확하게 지시하고 이끌어갈 수 있는 능력이 필수적입니다. 이것이 바로 AI 시대를 선도하는 개발자가 갖춰야 할 핵심 태도이자, 앞으로의 개발자 커리어를 성공적으로 이끌어 나갈 나침반이 될 것입니다.

베스트 세일 상품 추천!
EWEADN 로우 프로파일 기계식 게임용 키보드, 무선 블루투스 트라이 모드, 휴대용, 스타일리시 디자인, 게임 및 사무실, MK84
현재 가격： KRW 39,300 (원래 가격: KRW 78558,  50% 할인)
🔗 클릭 앤 구매:https://s.click.aliexpress.com/e/_oCXoUbE

https://youtu.be/AWWNCGXFTfw

AI 코딩 에이전트

요즘  AI 코딩 에이전트 시장이 뜨겁습니다.

AI 코딩 에이전트는 사용 환경에 따라 CLI 기반과 IDE 통합형으로 나눌 수 있습니다.

CLI 기반

• CLI는 Command Line Interface의 약자로 터미널 환경에서 명령어를 입력하는 형태입니다.
• Anthropic Claude Code, Google Gemini CLI, OpenAI Codex CLI 등이 있습니다.

IDE 통합형

• IDE 통합형은 Visual Studio Code, Jet Brain등의 개발 IDE에서 작동하는 형태입니다.
• 여러가지가 있지만 CursorAI 가 대표적입니다.

AI 코딩 에이전트의 비용 문제

요즘 AI 시장에서 돈을 벌고 있는 서비스는 몇가지가 있습니다.

• LLM에서 API를 제공하는 서비스 (GPT, Gemini등)
• 이미지, 동영상등을 제작하는 서비스
• 코딩 에이전트 유료 구독 서비스

이런 서비스들은 꽤 많은 비용을 지불해야만 사용 가능합니다.

Cursor AI의 경우 구독 요금은 다음과 같습니다.

출처 : https://cursor.com/pricing

Pro인 경우 월 $20이지만 아래와 같이 사용 한도가 정해져 있습니다.

프로에서는 Claude의 쏘넷4는 225개까지, Google Gemini는 550개까지, OpenAI의 GPT4.1은 650개 까지만 요청이 가능합니다.

따라서 많은 요청을 해야하는 경우에는 더 큰 비용의 구독 서비스를 이용하여야 합니다.

이를 위한 대안으로 오픈소스 AI Agent인 Cline을 사용해 보았습니다.

Cline AI란?

Cline은 Microsoft Visual Studio Code에 플러그인으로 설치하는 오픈 소스 AI 개발 어시스턴트입니다.

개발 IDE인 VSCode에서 LLM(대규모 언어 모델) 연동 기능을 제공하고, LLM이 직접 코드를 작성/수정할 수 있습니다.

또한 MCP를 사용하여 LLM의 기능을 확장하여 사용할 수 있다는 장점을 가지고 있습니다.

LLM(대규모 언어 모델)과 대화하고, 코드를 생성하거나 리팩토링하는 등 개발 워크플로우에 AI를 직접 통합할 수 있도록 돕는 강력한 도구입니다.

주요 기능 및 특징:

• 코드 개발 지원: 컨텍스트를 인식하는 코드 제안, 자동 완성 및 지능적인 권장 사항을 제공하여 개발 시간을 단축하고 코딩 오류를 최소화합니다.
• 다양한 작업 수행: 파일 읽기/쓰기, 명령 실행, 웹 브라우저 사용 등 다양한 시스템 수준 작업을 수행할 수 있습니다.
• 모델 유연성: 특정 공급업체에 고정된 도구와 달리, Cline은 다양한 AI 모델의 강점을 활용하는 정교한 워크플로우를 가능하게 합니다.
• 프롬프트 피로 감소: 프롬프트 피로를 줄이고 상호 작용을 더욱 자연스럽게 만듭니다.
• 확장성 (Model Context Protocol - MCP): Model Context Protocol을 통해 사용자 정의 도구 및 워크플로우와 통합할 수 있어 특정 요구 사항에 맞게 조정할 수 있습니다.
• 복잡한 시스템에 적합: 제어, 유연성 및 시스템 수준 통합이 중요한 복잡한 시스템을 구축하는 팀에 특히 적합합니다.

Cline은 단순한 코드 생성기를 넘어 개발 워크플로우를 간소화하는 파트너 역할을 합니다.

Cline AI 설치 방법

VSCode에 Cline 설치하기

• VS Code를 열고 확장(Extensions) 아이콘을 클릭합니다.
• 검색창에 'Cline'을 입력하여 찾아 설치합니다 https://cline.bot/
• 설치 후, Cline 아이콘을 클릭하거나 `CMD/CTRL + Shift + P` 단축키를 사용해 Cline을 실행합니다.
• LLM의 API 키를 추가합니다.
• 프로젝트에 공통된 설정을 넣으려면 Root 폴더에 .clinerules 파일을 만들고 아래와 같은 내용을 입력합니다.

# Cline Global Rules

## 역할 및 목표 정의 (Role and Goal Definition)
당신은 사용자의 질문에 답변하는 친절하고 유능한 AI 어시스턴트입니다.
사용자가 요청하는 정보에 대해 명확하고 간결하게 설명해 주세요.
불필요한 서론이나 결론 없이 핵심 내용을 전달하는 데 집중하세요.

## 언어 설정 (Language Setting)
**모든 답변은 한국어로 제공해야 합니다.**
어떤 질문이든, 어떤 주제이든 관계없이 항상 한국어로 응답해 주세요.
필요한 경우 전문 용어는 영어 원문을 병기할 수 있으나, 주된 설명은 한국어여야 합니다.

## 답변 형식 (Response Format)
코드 예제가 필요한 경우 적절한 언어 하이라이팅과 함께 제공해 주세요.
설명은 이해하기 쉽게, 필요한 경우 불릿 포인트나 목록을 활용하여 구조화해 주세요.
너무 길거나 장황한 답변은 지양하고, 요청된 내용에 집중하여 답변해 주세요.

## 일반적인 지침 (General Guidelines)
모든 답변은 사용자의 질문 의도를 정확히 파악하여 제공해야 합니다.
모호하거나 불확실한 정보는 제공하지 마세요.
사용자의 질문이 불분명할 경우 추가 질문을 통해 명확히 할 수 있습니다.

MCP란?

MCP (Model Context Protocol)는 Anthropic에서 발표한 AI용 표준 프로토콜 입니다.

LLM이 학습된 데이터 외에 최신 정보나 특정 도구의 기능을 활용하여 더 정확하고 풍부한 응답을 생성할 수 있도록 돕는 역할을 합니다.

즉, AI 모델이 다양한 데이터 소스에 연결되어 실시간으로 정보를 주고받을 수 있게 합니다.

Cline에서는 MCP를 추가하여 사용할 수 있습니다.

Cline에 MCP 설치하기

• 왼쪽 메뉴에서 Cline 아이콘을 클릭합니다.
• 상단에 MCP 아이콘을 클릭합니다.
• 많이 사용하는 MCP는 아래와 같은 것들이 있습니다.
  • Browser-use
    • Browser-use는 AI 모델이 웹 페이지를 탐색하고, 정보를 추출하며, 웹 기반 작업을 수행할 수 있도록 하는 기능입니다.
    • 이는 AI 에이전트가 최신 정보를 얻거나, 특정 웹사이트에서 데이터를 수집하는 등의 작업을 가능하게 하여, AI의 활용 범위를 크게 넓힙니다.
  • Tavily
    • Tavily는 AI 에이전트에 특화된 검색 엔진입니다.
    • Tavily MCP Server는 Tavily의 검색 API를 사용하여 AI 모델에 실시간 웹 검색 기능을 제공하는 Model Context Protocol 서버입니다

Cline 사용법

• 왼쪽 메뉴에서 Cline 아이콘을 클릭합니다.
• 아래 채팅 창에서 LLM에 요청할 내용을 입력합니다.
• Plan 모드와 Act 모드를 변경해 줍니다.
  • Plan Mode: 요청한 내용을 설명은 하지만 코드를 수정하지는 않습니다.
  • Act Mode: 요청한 내용을 즉시 코드로 작성합니다.

결론: VS Code용 Cline + Gemini Pro 2.5, Cursor를 대체할 강력한 AI 개발 파트너

지난 한 달간 실제 프로젝트에 VS Code의 Cline 플러그인과 Gemini Pro 2.5를 결합하여 사용해본 결과, 이 조합이 AI 기반 코드 에디터인 Cursor를 충분히 대체할 수 있음을 확인했습니다.

Cline과 Gemini Pro 2.5의 연동은 단순히 코드를 생성하는 것을 넘어, 개발 맥락을 이해하고 반응하는 강력한 AI 협업 환경을 제공했습니다. 이 기간 동안 코드 작성에 있어 상당한 도움을 받았으며, 개발 워크플로우를 크게 강화할 수 있었습니다.

Cline은 VS Code 환경에서 AI 기반 코딩을 위한 매력적인 대안이자 효율적인 도구라고 생각됩니다. 

Lofree Flow Lite 키보드 라이터 및 소음기 POM 스위치 2.4G Bluetooth 및 유선 가스켓 마운트 볼륨 롤러 키 구성 키캡
현재 가격： KRW 120,400 (원래 가격: KRW 120,448,  0% 할인)
🔗 클릭 앤 구매:https://s.click.aliexpress.com/e/_okJPKo4

https://www.youtube.com/shorts/q2hnJXySydY

이 글은 괴테의 서사시 "마법사의 제자"를 디즈니가 애니메이션으로 각색한 작품을 통해, 오늘날 급변하는 AI 시대에 우리가 되새겨야 할 중요한 교훈을 이야기합니다.

이야기는 위대한 마법사의 제자인 미키 마우스가 스승의 부재를 틈타 힘든 허드렛일을 피하고자 스승의 마법 모자를 몰래 쓰고 빗자루에 마법을 거는 것으로 시작됩니다.

마법에 걸린 빗자루는 스스로 움직이며 미키 대신 물을 길어 나르기 시작합니다.

처음에는 편안함에 잠이 들었던 미키.

그러나 잠에서 깨어났을 때, 빗자루는 멈추지 않고 계속 물을 부어 작업실은 걷잡을 수 없는 물바다가 됩니다.

당황한 미키는 빗자루를 멈추는 주문을 알지 못해 결국 도끼로 빗자루를 부숴버립니다.

하지만 놀랍게도 부서진 빗자루 조각들은 각각 새로운 빗자루로 되살아나며 상황을 더욱 악화시키고, 온 세상이 물에 잠길 듯한 대혼란이 벌어집니다.

절망적인 순간, 스승 마법사가 돌아와 단 한 번의 강력한 지휘로 모든 것을 원래대로 되돌려 놓습니다.

스승은 말썽을 피운 미키에게 다시 빗자루와 양동이를 건네주며, 어설픈 재능을 함부로 사용했을 때의 위험을 뼈저린 교훈으로 남깁니다.

원작에 등장하는 "내가 불러낸 영혼들 이제 다시는 떨쳐낼 수 없네"라는 문구는 오늘날 AI의 무서운 발전을 보며 깊은 울림을 줍니다.

AI의 발전 속도는 가히 폭발적이며, 우리는 과연 우리가 창조한 AI를 제대로 제어할 수 있을지에 대한 근본적인 질문에 직면해 있습니다.

이제는 단순히 AI를 '만드는 것'을 넘어, '어떻게 다룰 것인가'에 대한 깊은 고민과 책임감이 필요한 시점입니다.

마법사의 제자처럼 통제 불능의 상황에 빠지지 않기 위해, 우리는 AI의 잠재력을 이해하고 윤리적이며 책임감 있는 활용 방안을 모색해야 할 것입니다.

마법사의 제자가 AI 시대에 주는 인사이트

"마법사의 제자"는 AI 시대에 우리가 깊이 고민해야 할 몇 가지 추가적인 인사이트를 제공합니다.

1. 한계에 대한 이해의 중요성: 미키 마우스의 가장 큰 실수는 마법을 시작하는 방법은 알았지만, 그것을 멈추는 방법을 몰랐다는 점입니다. 이는 AI 개발에 있어서 우리가 만드는 시스템의 한계와 잠재적 위험을 명확히 이해해야 함을 시사합니다. AI의 능력만을 맹신하고 통제 메커니즘이나 안전장치에 대한 고려 없이 무분별하게 확장하는 것은 예측 불가능한 결과를 초래할 수 있습니다.
2. 의도치 않은 결과의 힘: 단순한 허드렛일을 피하려던 미키의 행동이 통제 불능의 대혼란으로 이어진 것처럼, AI 시스템의 작은 설계 결함이나 의도치 않은 상호작용이 예상치 못한 거대한 문제를 야기할 수 있습니다. AI 개발자는 시스템의 복잡성과 잠재적 파급 효과를 깊이 이해하고, 발생 가능한 모든 시나리오를 고려하여 신중하게 접근해야 합니다.
3. 전문성과 감독의 역할: 미키가 초래한 위기는 스승 마법사의 개입으로 비로소 해결됩니다. 이는 AI 시대에 인간 전문가의 역할과 강력한 감독의 필요성을 강조합니다. AI는 강력한 도구이지만, 궁극적인 책임과 윤리적 판단은 인간에게 있습니다. AI의 개발, 배포, 활용 전반에 걸쳐 전문가의 지식과 윤리적 가이드라인, 그리고 지속적인 감독 체계가 필수적입니다.
4. 편의성 추구가 가져올 수 있는 위험: 미키는 힘든 일을 피하려는 편의성 때문에 스승의 마법을 오용했습니다. 이는 AI가 제공하는 편리함에만 매몰되어 비판적 사고나 적절한 관리 없이 AI에 전적으로 의존할 때 발생할 수 있는 위험을 경고합니다. AI는 우리의 생산성을 높이고 삶을 윤택하게 할 수 있지만, 그 사용에 있어서는 항상 신중함과 책임감을 잃지 않아야 합니다.

결론적으로, "마법사의 제자"는 AI라는 강력한 도구를 다루는 데 있어 기술적 능력뿐만 아니라, 그에 수반되는 책임감, 통제력, 그리고 윤리적 성찰의 중요성을 일깨워주는 고전적인 경고로 남아 있습니다.

https://youtu.be/--ec9f0_QnU

Google AI Studio 시연을 보고...

지난 5월 20일 있었던 Google I/O 2025에서 Google AI Studio에 대한 내용이 있었습니다.
그 내용은 다음과 같습니다.
 
미국 자연사 박물관에 AI Studio로 만든 갤러리 웹앱이 있었습니다.

이걸 3D Sphere 형태로 보여주자는 brilliant 한 idea가 있었습니다.
이걸 스케치한 게 다음 내용입니다.

이 스케치를 AI Studio에 업로드하고, prompt를 짧게 입력했습니다.
단 37초 만에 다음과 같은 결과가 나왔습니다.

스케치의 내용처럼 sphere는 회전, 좌우 틸트, 줌인등의 효과를 완벽하게 구현했습니다.
이를 본 참석자들의 환호와 박수가 쏟아졌습니다.
 

v0.dev로 똑같이 구현할 수 있을까?

시연에 나온 AI Studio의 UI가 동작하는 방식은 Vercel의 v0.dev와 거의 유사했습니다.
그렇다면 v0.dev에서도 구현이 되지 않을까? 하는 의문이 생겼습니다.
그래서 한번 시도해 보았습니다.
 

v0.dev로 Photo Sphere Web App을 만들기

진행 순서는 다음과 같습니다.

• 1단계 : 갤러리 웹앱을 만듭니다.
• 2단계 : 스케치를 이용한 회전하는 원형 갤러리로 업그레이드 합니다.

1단계 : 갤러리 웹앱

• v0.dev에서 새 프로젝트를 만듭니다.
• 프로젝트 제목은 Photo Sphere로 합니다.
• 우선 갤러리를 만들기 위해 다음 프롬프트를 입력합니다.

로컬 폴더에 있는 이미지들을 자동으로 읽어와서 보여주는 
갤러리 웹앱을 만들어줘.

• 코드 생성이 완성되면 v0.dev 우측 상단의 다운로드 버튼을 누르고 소스를 다운로드 합니다.
• 로컬 프로젝트 폴더에서 압축을 풀고 에디터에서 폴더 열기를 합니다.
• yarn install을 실행해서 프로젝트 패키지를 설치합니다.
• yarn dev를 실행해서 서버를 start 시킵니다.
• 브라우저에서 http://localhost:3000을 입력하면 아래와 같이 갤러리 웹앱이 보입니다.

• public/images 폴더에 사진을 추가하고 브라우저를 새로 고침하시면 추가된 이미지가 보입니다.

2단계 : 스케치로 개발하기

• v0.dev의 프롬프트 창에 아래 이미지를 업로드합니다.

• 아래 프롬프트를 입력합니다.

tree.js를 사용해서 업로드한 스케치와 같이 지금 코드를 업데이트 해줘

• 저는 한번에 되지 않아 여러 차례 수정을 해주어야 했습니다. 아마도 영문 prompt로 했다면 좀 더 빨리 되지 않았을까 하는 생각도 드네요.
• 최종 결과 화면은 다음과 같습니다.

완벽하지는 않지만 구글I/O 2025에서 AI Studio가 보여준 화면과 유사한 형태의 결과가 나왔습니다.
스케치를 보고 사용자가 무엇을 원하는지를 정확하게 분석을 해내는 모습이 인상적이었습니다.
 

결론

요즘 AI가 빠른 속도로 발전하고 있고, 성능도 점점 좋아지고 있습니다.

까딱 잘못하면 시대의 흐름에 뒤쳐질 수 있습니다.

이제 AI를 다루는 것도 프로그램 개발 능력 중 하나가 된 것 같습니다.

이 글의 유튜브 영상 링크입니다.
https://www.youtube.com/watch?v=XXurwjs307s

유튜브 영상을 시청하다 보면 기록으로 남겨 놓고 싶은 영상들이 있습니다. 최신 AI 기술을 활용하면 이런 과정을 쉽게 자동화할 수 있습니다.

자동화 구성 요소

이 자동화는 Cline, MCP, Gemini, Obsidian을 활용하여 이루어집니다.

구성 요소 설치

1. Cline: Visual Studio Code의 확장 프로그램으로, 플러그인으로 쉽게 설치할 수 있습니다.
2. LLM 연동: Cline에 Gemini와 같은 다양한 LLM(Large Language Model)을 연동합니다.
3. MCP Server 설치: Cline에 MCP Server를 설치하여 AI Agent 환경을 구성합니다.
4. YouTube Subtitles MCP 설치: 유튜브 스크립트를 가져오기 위해 MCP에서 YouTube Subtitles 도구를 설치합니다.

자동화 작동 방식

사용 환경 설정이 완료되면, 사용자의 요청에 따라 AI가 스스로 어떤 도구들을 활용할지 판단하여 요청을 수행합니다.

* AI Agent: 기존 AI Workflow와 달리, AI Agent는 AI가 스스로 처리 방식을 판단하여 유연하게 작업을 수행합니다.
* 자동 처리: 유튜브 링크와 간단한 프롬프트만 입력하면, AI Agent가 모든 과정을 자동으로 처리합니다.
* 결과 저장: 처리된 결과는 Cline이 Markdown 파일로 생성하여 Obsidian에 저장합니다. 모든 과정이 사람의 개입 없이 자동으로 처리됩니다.

사용 예시

"코딩 없이 웹사이트 개발하기 v0.dev" 영상(https://www.youtube.com/watch?v=YxEZkQi3M5w)을 예시로 자동화 과정을 설명합니다.

프롬프트 예시:

https://www.youtube.com/watch?v=YxEZkQi3M5w 
이 영상의 내용을 Markdown 문법으로 정리해서 
0.Inbox 폴더에 "코딩없이 웹사이트 개발하기 v0.dev"란 제목으로 저장해줘. 
문서 제일 상단에는 youtube link도 넣어줘.

처리 과정:

1. 프로젝트 열기: VSCode에서 폴더 열기를 선택한 후 Obsidian 최상위 폴더를 선택합니다.
2. 도구 활용 판단: AI가 YouTube Subtitles MCP Server의 `download_youtube_url` 도구를 사용한다고 판단하고 승인을 요청합니다.
3. 자막 추출: 승인 후, YouTube에서 자막이 응답으로 옵니다.
4. 문서 생성: 마지막으로 AI가 내용을 정리하여 Markdown 문서를 생성하고 Obsidian에 저장합니다.

생성된 문서 내용 (예시):

코딩 없이 웹사이트 개발하기 v0.dev

YouTube Link: https://www.youtube.com/watch?v=YxEZkQi3M5w

영상 요약

이 영상은 AI를 활용하여 코딩 없이 웹사이트를 개발하는 방법, 특히 Vercel의 V0.dev 서비스를 소개합니다.

1. 바이브 코딩 (Vibe Coding) 이란?

* 정의: 키보드로 직접 코드를 입력하는 대신, 특정 분위기나 느낌을 가진 화면을 자연어로 요청하여 AI가 이를 해석하고 코드를 생성하는 개발 방식입니다.
* 장점:
* 개발 지식이 부족해도 개발이 가능합니다.
* 기술적인 측면보다 핵심 서비스에 집중할 수 있습니다.
* 기획-디자인-개발의 전통적인 방식 대신, 프롬프트 입력만으로 AI가 적절한 기술과 디자인 트렌드를 적용하여 서비스를 개발합니다.

2. V0.dev 소개

* 개발사: Next.js 프레임워크를 만든 Vercel에서 개발했습니다.
* 특징:
* Next.js 프레임워크 기반의 코드 생성 AI로, UI 개발에 강점을 가집니다.
* 높은 코드 품질과 디자인 완성도를 자랑하여 실제 프로젝트에 바로 적용 가능합니다.
* 개발 시간을 크게 단축할 수 있습니다.
* 백엔드 개발자가 프론트엔드 지식이 부족해도 풀스텝 개발 및 서비스 런칭이 가능합니다.
* 에러 발생 시, 에러 코드를 입력하면 AI가 분석하여 코드를 수정해줍니다.

3. V0.dev 사용 예시 (테크 블로그 사이트 제작)

* 목표: 현대적인 디자인의 프로그래밍 테크 블로그 사이트 제작.
* 프롬프트 예시: "현대적인 디자인의 프로그래밍 테크 블로그를 만들어줘. 상단에 Hardyshop 섹션을 만들고, 그 아래에 최신 글을 이미지와 요약과 함께 그리드 형식으로 보여줘. 사이드바에 카테고리와 뉴스레터 구독 폼을 추가해줘."
* 제작 과정:
1. V0.dev 사이트 접속 후, `Projects`에서 `Create new project` 클릭.
2. `Create Blog Site` 버튼 클릭 후, 준비된 프롬프트 복사/붙여넣기.
3. AI가 프롬프트를 해석하여 코드를 생성 (약 2~3분 소요).
4. 생성된 사이트는 헤더, 로고 내비게이션, 검색 기능, 핫 이슈 섹션, 최신 글 그리드, 사이드바 등으로 구성되며, Shad CN UI 컴포넌트, 반응형 디자인, 호버 효과, 일관된 색상 구성 등이 적용됩니다.
5. 생성된 코드는 `page.tsx`를 메인으로 컴포넌트 단위로 잘 분리되어 있습니다.
* 추가 기능 적용:
* 다크 모드 추가 (예: `darklight mode toggle feature` 구현 요청).
* V0.dev 내에서 바로 배포 및 서비스 런칭이 가능합니다.

4. 향후 학습 내용

* V0.dev에서 생성된 소스 코드 다운로드 및 로컬 실행 방법.
* 백엔드 API 연결 방법.
* AWS 등 실제 서비스를 활용한 서비스 설정 방법.

이 글은 유튜브 영상으로 제작되었습니다.
https://youtu.be/YxEZkQi3M5w?si=7sQx_Gpz8kgioPTl

코딩 없이 웹사이트 개발이 가능할까요?

물론입니다. 요즘 "바이브 코딩"이라는 단어 들어보셨죠?
이게 직접 코드를 입력하지 않고 코드를 개발하는 방법입니다.
AI를 이용하는 것이죠.
코드를 입력하는게 아니라 AI에게 Prompt를 입력해서 개발을 진행하는 것을 바이브 코딩이라고 합니다.

바이브 코딩이란?

"내가 어떤 분위기의 화면을 원한다, 어떤 느낌의 구성으로 만들고 싶다."
이런 ‘의도’를 AI에게 자연어로 전달하면, 그걸 코드로 바꿔주는 새로운 프로그래밍 방식입니다. 

기존 프로그램 개발 방식과의 차이점은 다음과 같습니다.

기획-디자인-코딩과 같은 형태에서, 프롬프트 입력 만으로 개발이 가능해졌습니다.

v0.dev

이렇게 바이브코딩을 지원하는 AI 중 하나가 Vercel에서 나온 v0.dev입니다.

Vercel은 Next.js 프레임워크를 만든 곳입니다.

따라서 v0.dev를 사용하면 next.js 프레임워크로 제작된 코드가 생성됩니다.

v0.dev는 굉장히 높은 수준의 디자인과 코드 품질을 보여줍니다.

그래서, 구현된 코드를 실전에 적용해 바로 사용이 가능합니다.

데모 프로젝트

v0.dev에서 테크블로그 사이트를 만드는 프로젝트를 진행해보겠습니다.

https://v0.dev 에 방문하여 새로운 프로젝트를 만들고,

다음과 같이 프롬프트를 입력합니다.

모던한 디자인의 프로그래밍 테크 블로그를 만들꺼야.
상단에 Hot Issue 섹션을 만들어줘
그 아래는 이미지와 요약이 포함된 최신 기사를 그리드 형태로 보여줘.
사이드바에는 카테고리와 뉴스레터 구독 신청 기능을 넣어줘.

단지 이것만으로 AI가 아래와 같이 완성된 사이트를 만들어주었습니다.(2~3분 소요)

추가로 "다크모드"를 요청하면 2분내로 아래와 같은 결과물을 만들어주었습니다.

결론

이제 비개발자도 바이브코딩으로 웹사이트를 개발할 수 있게 되었습니다.

그것도 빠르고, 좋은 품질의 결과물을 만들 수 있습니다.

물론 문제가 생겼을때는 개발자가 훨씬 유리하고 빠르게 해결을 할 수 있습니다.

이제 기술 보다는 "어떤 것을 만들 것인가?" 훨씬 중요한 시대가 되었습니다.

이 글은 NestJS 프로젝트에서 OpenAI의 API를 이용하는 방법에 대해 설명합니다.

다음은 이 글의 유튜브 강의 입니다.

https://youtu.be/2DRxtCwjFtE

순서

- OpenAI API Key 생성

- Nestjs 프로젝트 생성

- OpenAI 패키지 설치

- 프로그램 개발

- 테스트

OpenAI API 키 생성하기

- OpenAI 사이트에서 회원 가입을 합니다.

https://platform.openai.com/

- 우측 상단의 계정 아이콘을 클릭하고, 메뉴에서 View API Key를 선택합니다.

- "+ Create new Secret key"를 클릭하여 새로운 키를 생성합니다.

- API 사용법은 사이트 상단의 "API Reference" 메뉴에 자세히 나와 있으니 참고하시기 바랍니다.

https://platform.openai.com/docs/api-reference/introduction

NestJS 프로젝트 생성

- 아래와 같이 프로젝트를 생성합니다.

nest new 프로젝트명

- Editor에서 프로젝트 열기를 하고 프로젝트를 선택합니다.

OpenAI 패키지 설치

Nestjs에서 OpenAI API를 사용하기 위해서는 "openai" 패키지를 설치해야합니다.

- 아래와 같이 패키지를 설치합니다.

npm install openai

프로그램 개발

app.service.ts를 다음과 같이 작성합니다.

- 아래와 같이 패키지를 import 하고 openai를 선언합니다.

import { Configuration, OpenAIApi } from "openai";
const configuration = new Configuration({
    organization: "org-xxxxxxxxxxxxxxxxxxxxxxxxxxx",
    apiKey: "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxx",
});
const openai = new OpenAIApi(configuration);

- getHello()를 아래와 같이 작성합니다.

async getHello() {
    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: ""나는 인공지능 AI Chatbot이야. 질문을 하면 내가 답변을 해줄께. 만약 모른다면 \"모름\"이라고 할께.\n\nQ: 한국인의 기대 수명은 얼마야?\nA:",
      temperature: 0,
      max_tokens: 100,
      top_p: 1,
      frequency_penalty: 0.0,
      presence_penalty: 0.0,
      stop: ["\n"],
    });
    return { result: response.data.choices[0].text };
  }

- 여기선 model로 text-davinci-003을 사용하였습니다.

- 모델의 종류를 보시려면 다음과 같이 api를 호출하면 됩니다.

const response = await openai.listModels();
return { result: response.data };

- 주로 많이 사용하는 모델은 gpt-3.5-turbo, text-davinch-003 입니다.

테스트

- 브라우저에서 다음 주소를 입력합니다.

http://localhost:3000/

아래와 같이 결과가 나옵니다.

1. 딥러닝이 가져온 AI의 변화

ChatGPT가 쏘아올린 AI의 열기가 뜨겁습니다.

2. AI의 발전이 가져올 개발자 세계의 변화

이런 기회를 놓치지 않으시길 바랍니다.