MCP(Model Context Protocol)는 AI의 손에 각종 도구를 들려주는 것과 같습니다.

이를 이용해서 AI는 좀 더 똑똑하게 일처리를 할 수 있습니다.

예를 들어,

Playwright MCP를 설치하면 Coding Agent가 스스로 브라우저를 열어 테스트를 진행하고, 에러가 발생하는 것을 감지하여 문제를 해결 하는 것이 가능해집니다.

Context7 MCP를 설치하면, 몇일전 업데이트된 Next.js의 새로운 기능을 사용할 수 있습니다.

이렇듯 MCP를 사용하는 것은 AI Coding Agent 사용시 필수라고 할 수 있습니다.

테스트는 티타임즈TV에서 이장선 에센셜AI 연구원(전, 럿거스대 교수)이 출연해서 "지금 AI 시장은 생산성, 자동화, 수익에 미쳐있어요"란 제목으로 진행한 플레이타임 22분 48초 영상입니다.

https://www.youtube.com/watch?v=npbMVONUTMM&t=860s

다음은 Youtube Subtitles MCP를 설치하기 전 후 영상을 요약한 결과를 비교한 것입니다.

Youtube Subtitles MCP 설치 전

현재 AI 시장은 생산성 향상, 자동화 도입, 그리고 수익 창출에 광적으로 집중하고 있습니다. 막대한 자본이 유입되면서 일종의 광기 어린 시대가 도래한 것으로 보입니다.

생성형 AI 혁명은 구글이 'Attention is All You Need'라는 논문을 발표하며 트랜스포머 모델을 연구하면서 시작되었습니다. 이 논문의 제1저자인 아시시 바스와니는 현재 에센셜AI의 대표를 맡고 있습니다.

바스와니와 함께 공부하고 현재 에센셜AI에서 일하고 있는 이장선 전 럿거스대 교수는 AI가 학교와 일반 기업에 미치는 영향에 대해 긍정적인 측면도 있지만, '배움'의 본질이 훼손될 수 있다는 큰 우려를 표하고 있습니다.

Youtube Subtitles MCP 설치 후

이 영상은 전 럿거스대 교수이자 현재 에센셜AI 연구원으로 재직 중인 이장선 님과의 인터뷰를 통해, 생성형 AI가 학습과 산업에 미치는 영향에 대해 심도 있게 다룹니다.

AI와 학습: 양날의 검

• 긍정적 측면: 학습 의지가 있는 학생에게 AI는 어떤 교수보다 뛰어난 개인 교사가 될 수 있습니다.
• 부정적 측면: 많은 학생들이 AI를 악용하여 스스로 생각하는 능력을 잃고 단순히 성적을 얻는 데만 사용합니다. 이로 인해 과제 점수는 높지만 실제 시험에서는 문제를 풀지 못하는 경우가 발생합니다.
• 평가의 어려움: AI가 복잡한 과제도 쉽게 해결하면서, 전통적인 과제 기반의 평가는 의미를 잃어가고 있습니다.

좋은 질문의 중요성

• AI를 효과적으로 활용하려면, 무엇을 왜 물어야 하는지 아는 '좋은 질문을 하는 능력'이 필수적입니다.
• 이 능력은 해당 분야에 대한 깊은 이해와 경험에서 비롯되므로, 초보 학습자들은 AI의 혜택을 온전히 누리기 어렵습니다.
• 교육 기관의 역할은 이제 지식 전달을 넘어, 학생들이 좋은 질문을 던질 수 있도록 방향을 제시하고 학습 환경을 조성하는 것으로 변화해야 합니다. 

산업계에서의 AI

• 산업계의 목표는 '생산성, 자동화, 수익'이며, 이를 위해 AI를 적극적으로 도입하고 있습니다.
• 이로 인해 기술 업계에서는 해고가 증가하고, 남은 인력의 업무 강도는 높아지는 등 큰 변화를 겪고 있습니다.
• 채용 평가 기준 또한 AI가 해결할 수 있는 코딩 문제 풀이에서, 팀워크와 소통을 통한 문제 해결 능력 중심으로 바뀌고 있습니다.

미래와 나아갈 방향

• 궁극적인 해결책은 '자기 주도적 학습 의지'를 갖는 것입니다. 명확한 목표를 가지고 AI를 도구로 활용하되, AI에게 자신의 생각을 의존해서는 안 됩니다.
• 미래의 AI는 생산성 도구를 넘어, 사용자의 사고를 심화시키고 성장을 돕는 '동반자 AI'로 발전할 가능성이 있습니다.
• AI는 소수의 전문가들에게는 과학 발전을 가속화하는 강력한 도구가 되겠지만, 다수는 창의력과 사고력을 잃을 위험에 처할 수 있다는 우려도 존재합니다.

이렇게 MCP 사용 전 후의 결과는 많은 차이가 있습니다.

여러분도 MCP라는 도구를 잘 활용해서, 보다 좋은 결과물을 얻으시길 바랍니다.

이 글의 유튜브 영상 링크입니다.
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 등 실제 서비스를 활용한 서비스 설정 방법.