Code Gear - AI 개발 유튜브 강의

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라는 도구를 잘 활용해서, 보다 좋은 결과물을 얻으시길 바랍니다.

왜 필요하죠?

Claude Code에서 명령을 내리고, 다른 작업을 하다 보면 Claude Code의 작업 완료 시기를 놓치게 됩니다.

이때 음성으로 Notification을 할 수 있는 방법이 있습니다.

Claude Code에서 요청한 작업이 완료되었을 때 음성 알림을 받으려면 Hooks 기능을 활용할 수 있습니다.

Hooks 셋팅 방법을 알아보겠습니다.

MacOS에 음성 알림 기능 설치

macOS 음성 알림 기능을 사용하려면 terminal-notifier를 설치해야 합니다.

설치를 위해 터미널에서 다음 명령을 수행합니다.

brew install terminal-notifier

설치 후에는 터미널에서 다음을 입력해 테스트 해 볼 수 있습니다.

say "요청하신 작업이 완료되었습니다"

음성이 나오면 설치가 정상적으로 된 것입니다.

Hooks에 음성알림 추가

Claude Code의 Hooks에 음성 알림을 추가합니다.

Hooks 설정은 프로젝트와 사용자 Scope으로 할 수 있습니다.

• 프로젝트 Scope 일때는 프로젝트 루트 폴더의 .claude/settings.json
• 사용자 Scope 일때는 ~/.claude/settings.json 

Hooks 추가

• settings.json 파일에 hooks 섹션을 추가하고, 특정 이벤트에 대한 Hook을 정의합니다.
• 작업 완료 시 알림을 받으려면 Stop 이벤트를 활용할 수 있습니다

"hooks": {
    "Notification": [],
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "say \"요청하신 작업이 완료되었습니다\""
          }
        ]
      }
    ]
},

이렇게 하면 요청한 작업이 완료되었을때 음성 안내를 받을 수 있습니다.

n8n이란?

n8n은 AI 워크플로우 자동화 오픈 소스 솔루션입니다.

Make, Zapier 등과 같이 업무를 자동화 하는데 최적화된  도구입니다.

심지어 n8n 셀프호스팅을 하게되면 무료로 사용이 가능합니다.

하지만 이런 노코드 자동화 도구들을 이용해서 자동화를 구축하는 것이 마냥 쉽지는 않습니다.

이를 해결해 주는것이 n8n MCP입니다.

n8n에 대한 내용은 제가 이전에 작성한 글을 참고하시기 바랍니다.

https://codegear.tistory.com/138

n8n 셀프 호스팅 구축 방법도 이전에 작성한 글을 참고하시면 됩니다.

https://codegear.tistory.com/139

n8n MCP란?

n8n MCP를 사용하면 각종 Code Assistant에서 n8n에 자동화를 쉽게 구축할 수 있습니다.

클로드 데스크탑에서도 채팅만으로 쉽게 구축이 가능합니다.

n8n MCP를 사용하면 n8n에서 제공되는 대부분의 기능을 구현할 수 있습니다.

n8n에서 API Key를 생성한 후 n8n mcp 설정에 추가만 하면 n8n 서버를 management 할 수 있습니다.

클로드 코드에서 n8n MCP 사용하기

클로드 코드에 n8n MCP를 설치하는 방법을 알아보겠습니다.

n8n mcp에 대한 자세한 내용은 github에 있는 내용을 참조하였습니다.

https://github.com/czlonkowski/n8n-mcp

n8n MCP 설치하기

• 로그인 계정의 루트에 .claude.json 파일을 에디터에서 Open합니다.
• mcpServers 항목에 아래 내용을 추가합니다.

{
  "mcpServers": {
    "n8n-mcp": {
      "command": "npx",
      "args": ["n8n-mcp"],
      "env": {
        "MCP_MODE": "stdio",
        "LOG_LEVEL": "error",
        "DISABLE_CONSOLE_OUTPUT": "true"
      }
    }
  }
}

• 이렇게 설치하면 기본적인 툴만 사용 가능합니다.
• 만약, n8n 서버에 워크플로우를 작성하고, 수정하는 작업을 하려면 아래와 같이 인증 정보까지 추가해줍니다.

{
  "mcpServers": {
    "n8n-mcp": {
      "command": "npx",
      "args": ["n8n-mcp"],
      "env": {
        "MCP_MODE": "stdio",
        "LOG_LEVEL": "error",
        "DISABLE_CONSOLE_OUTPUT": "true",
        "N8N_API_URL": "https://your-n8n-instance.com",
        "N8N_API_KEY": "your-api-key"
      }
    }
  }
}

• 맥북 환경변수에 등록 하여 사용하실 경우는 .zshrc 파일에 아래 내용을 추가하시면 됩니다.

export N8N_API_URL="https://your-n8n-instance.com"
export N8N_API_KEY="your-api-key"

• 환경변수에 추가한 후에 .claude.json 은 해당 부분을 아래와 같이 수정합니다.

"N8N_API_URL": "$N8N_API_URL",
"N8N_API_KEY": "$N8N_API_KEY"

n8n MCP 연결 확인

• 이제 클로드코드를 재실행 합니다.
• "/mcp" 를 입력합니다.
• 아래와 같이 "connected"라고 나오면 정상적으로 설치가 완료된 것입니다.

이제 클로드 코드에서 n8n에 있는 워크플로우를 프롬프트로 제어할 수 있습니다.

아래는 이 글의 유튜브 영상입니다.

https://youtu.be/GlPuy5ypmYw

아래 이미지는 AI 바이브 코딩으로 개발하여 운영중인 사이트의 화면입니다.

사이트 주소는 https://codegear.info 입니다

이 사이트의 처음부터 끝까지 모두 바이브 코딩으로 만들었습니다.

제작 과정은 블로그와 유튜브로 모두 남겨 놓았으니 참고 하시기 바랍니다.

사이트 개발 목적

• AI 바이브 코딩으로 개발 가능한지 검증
• AI 개발 관련 정보 공유
• CodeGear 블로그와 유튜브 홍보
• n8n 워크플로우 자동화 기능 구현 및 실무 적용 사례

사이트 구조

프로젝트 아키텍처는 다음과 같습니다.

• Frontend : Next.js
• Backend : Nest.js
• Database : MySQL
• AI 자동화 Agent : n8n

프로젝트 폴더 구조는 다음과 같습니다.

로그인 인증은 구글 로그인을 사용하였습니다.

사이트 구조

• 메인 홈
  • 코드 기어 블로그 추천글(codegear.tistory.com) - 3개
  • AI 개발 관련 추천글(기사, 블로그등) - 3개
  • 코드 기어 유튜브 추천 영상(코드기어채널) - 3개
• 소개
• AI 개발 관련 추천글 - 전체
• 코드기어 유튜브 링크
• 코드기어 티스토리 링크

관리자 기능

• 코드기어 블로그 추천글 관리
• AI 개발 관련 추천글 관리
• 사용자 관리
• 코드기어 유튜브 추천 영상 관리

n8n 추천글 자동 요약 워크플로우

• 이 기능은 관리자 "AI 개발 관련 추천글 관리" 메뉴에서 사용을 합니다.
• 원본 링크를 넣고 "AI 요약" 버튼을 누르면 나머지 필드들이 모두 자동으로 채워집니다.
• 관리자는 내용을 확인하고 저장 버튼만 누르면 됩니다.

n8n 워크플로우

• 셀프호스팅으로 설치된 n8n Agent 서버를 사용합니다.
• 클로드 코드에 n8n MCP를 설치 후 해당 워크플로우를 만들어 달라고 요청하였습니다.
• 만들어진 워크플로우는 다음과 같습니다.

클로드 코드와 n8n을 이용해서 바이브코딩으로 만든 사이트 리뷰를 해보았습니다.

사이트를 어떻게 만들지에 대한 계획을 잘 세우고,

AI 도구들을 적재 적소에 활용할 줄 알고,

그것들을 잘 컨트롤 할 수만 있다면,

충분히 상업적인 사이트 개발이 가능하다는게 제 생각입니다.

앞으로 계속 유용한 사이트로 발전 시켜 나갈 계획이므로,

지켜봐주시고 응원 부탁드립니다.

클로드 코드에 Github MCP를 설치하는 방법입니다.

아래 공식 문서를 참조하였습니다.

https://github.com/github/github-mcp-server/blob/main/docs/installation-guides/install-claude.md

Github Personal Access Token 생성

Github MCP를 사용하려면 인증이 필요합니다. 이때 사용되는 것이 Github personal access token입니다.

생성 방법은 다음과 같습니다.

• Github 로그인
• 우측 상단의 "Profile" 아이콘을 클릭
• "Settings" 메뉴 클릭
• 왼쪽 메뉴 중 제일 하단의 "Developer Settings" 클릭
• 왼쪽 메뉴에서 "Personal Access Tokens" 클릭
• 하위 펼쳐진 메뉴에서 "Tokens Classic" 클릭
• 아래와 같은 화면에서 "Generate new token"을 클릭하고 "Generate New Token(Classic)"을 클릭

• 이름, expiration, scope을 설정 후 하단의 "Generate Token" 버튼을 클릭
  • 이름은 사용하고 싶은 것으로 입력하시면 됩니다. 예) codegear-info
  • expiration은 만료 기간입니다.
  • scope은 범위 입니다. 보통은 repo만 체크해주시면 됩니다.

Docker desktop 실행

Github MCP를 사용하기 위해서는 Docker Desktop이 실행되고 있어야 합니다.

클로드 코드에 Github MCP 추가하기

• 터미널에서 다음 명령을 실행합니다.

claude mcp add github -- docker run -i --rm -e GITHUB_PERSONAL_ACCESS_TOKEN ghcr.io/github/github-mcp-server

• 이렇게 하면 github mcp가 추가됩니다.

Github MCP에 인증 추가하기

• 로그인 계정의 루트에 .claude.json 파일을 에디터에서 Open합니다.
• github으로 검색해보시면 아래와 같이 추가된것을 확인할 수 있습니다.

"mcpServers": {
	"github": {
      "type": "stdio",
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "GITHUB_PERSONAL_ACCESS_TOKEN",
        "ghcr.io/github/github-mcp-server"
      ],
      "env": {}
    }
}

• env 아래에 GITHUB_PERSONAL_ACCESS_TOKEN 을 추가합니다. 

"env": {
    "GITHUB_PERSONAL_ACCESS_TOKEN": "$GITHUB_CODEGEAR"
  }

• 예시로 사용한 $GITHUB_CODEGEAR 부분에 github에서 생성한 토큰을 입력하시면 됩니다.
• 저는 맥북에서 환경변수로 $GITHUB_CODEGEAR 를 사용하였으므로 이렇게 썼습니다.
• 맥북 환경변수 등록은 .zshrc 파일에 아래 내용을 추가하시면 됩니다.

export GITHUB_CODEGEAR_TOKEN="github에서 생성한 토큰"

Github MCP 연결 확인

• 이제 클로드코드를 재실행 합니다.
• "/mcp" 를 입력합니다.
• 아래와 같이 "connected"라고 나오면 정상적으로 설치가 완료된 것입니다.