본문 바로가기
바이브 코딩/혼공 바이브 코딩

6주차 MCP로 클로드 코드의 한계 넘어서기

by 좋아좋아브라이언 2026. 1. 24.

 

MCP 강의 듣고  나만의 바이브 코딩

1. 슈퍼베이스 DB 대신 내가 관리하는 MariaDB로 업무 App만들기 (MCP 없고, DB 활용)

연도와 월을 YYYYMM 형식으로 사용자가 입력하면 연도와 월에 있는 DB data를 excel로 추출해주는 프로그램을 만들어주세요 .env 파일에는 Maria DB 접속   정보가 있어. mariadb에 접속해서 v_entry_board table의 data를 사용자가 입력한 연도와 월이 regdate에 속한 데이타만 추출해서 excel로 저장해 주세요
.................

오류 수정을 포함하여 4번의 대화로 완성

 

2. Web Page 만들기 (context7, Sequential Thinking)

context7에서 next.js와 mantine UI를 확인해서 애플 느낌의 아이폰17 판매 사이트를 만들어줘
  Sequential Thinking을 사용해서 디테일을 놓치지 말고 만들어줘

 

소개된 주요 MCP 서버와 용도

1. 생산성 및 추론 도구

• Notion (노션): 문서 및 프로젝트 관리 도구입니다. 클로드 코드의 변경 사항을 요약하여 노션 페이지에 자동으로 문서를 생성하고 저장하는 데 사용했습니다.
• Sequential Thinking (시퀀셜 씽킹): 복잡한 문제를 단계별로 쪼개어 깊이 있게 추론하는 도구입니다. '웹사이트 체류 시간 늘리기' 같은 전략적 질문에 대해 일반 모델보다 훨씬 체계적인 계획을 도출했습니다.
• Context (컨텍스트, Context7): AI에게 최신 기술 문서나 라이브러리 정보를 제공하는 도구입니다. 작성된 코드가 최신 웹 표준과 문법을 따르고 있는지 점검하는 데 활용했습니다.

2. 개발 및 테스트 자동화

• Playwright (플레이라이트): 웹 브라우저를 제어하여 UI 테스트를 자동화하는 도구입니다. 쇼핑 리스트 앱의 '추가', '삭제' 버튼을 브라우저가 스스로 클릭하며 정상 작동 여부를 검증했습니다.
• GitHub (깃허브): 소스 코드 버전 관리 도구입니다. 로컬에서 만든 코드를 원격 저장소(Repository)에 업로드하고 관리하는 데 사용했습니다.
3. 데이터 및 배포 (Vercel 포함)
• Supabase (슈퍼베이스): 클라우드 데이터베이스 플랫폼입니다. 내 컴퓨터(로컬 스토리지)에만 저장되던 데이터를 클라우드 DB로 옮겨, 배포 후에도 데이터가 유지되고 타인과 공유되도록 만들었습니다.
• Vercel (버셀): 배포 플랫폼입니다. 강의에서는 MCP로 직접 설치하기보다, GitHub와 연동하여 웹사이트를 실제 URL로 전 세계에 배포하는 역할을 담당했습니다. GitHub에 코드가 푸시(Push)되면 Vercel이 이를 감지해 자동으로 웹사이트를 업데이트합니다.
 

GEMINI-CLI MCP 설치

 

 

setting.json 예시

"mcpServers": {
    "context7": {
      "httpUrl": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "ctx7sk-.......... 발급받은 API key",
        "Accept": "application/json, text/event-stream"
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    },
    "sequential-thinking": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-sequential-thinking"
      ]
    }
  }

 

 

강의 내용 - MCP로 클로드 코드의 한계 넘어서기

 

 

 
[초급] MCP 기초와 원격 도구 연결 (Notion)
AI가 외부 도구(레고 블록)와 연결되는 표준 규약인 MCP(Model Context Protocol)를 이해하고, 원격 서버에 있는 노션(Notion)을 연결해 봅니다.
• 레슨 (Lesson)
    ◦ MCP의 개념: AI가 외부 데이터나 도구(파일, DB 등)와 소통하기 위한 표준화된 '다리' 역할을 이해합니다.
    ◦ API vs MCP: 특정 기능만 빌려오는 API와 달리, 파일 시스템 조작 등 통합적인 연결을 제공하는 MCP의 차이를 배웁니다.
    ◦ 원격 MCP 설치: claude mcp add 명령어와 sse 전송 방식을 사용해 외부 서버(노션 등)를 연결하는 법을 익힙니다.
• 실습 (Practice)
    ◦ 터미널에서 claude mcp add --transport sse ... 명령어로 노션 MCP를 설치하고, 인증(Authenticate) 과정을 완료합니다.
    ◦ claude mcp list로 연결 상태를 확인하고, 인증 성공 메시지(Connected)를 확인합니다.

 

• 프로젝트 (Project): "AI 연구 노트 자동화"
    ◦ "클로드 코드의 최신 변경 사항을 요약해서 노션에 저장해 줘"라고 요청합니다.
    ◦ 실제 노션 페이지에 접속하여 요약된 문서가 생성되었는지 확인합니다.
• 체크리스트 (Checklist)
    ◦ [ ] claude mcp list에 노션이 표시되는가?
    ◦ [ ] 노션 인증 페이지에서 권한 승인이 완료되었는가?
    ◦ [ ] 클로드 코드가 작성한 문서가 노션에 저장되었는가?
--------------------------------------------------------------------------------
[중급] 로컬 MCP와 개발 자동화 (Playwright)
내 컴퓨터에 직접 설치하는 로컬 MCP의 특징을 이해하고, 브라우저 자동화 도구인 플레이라이트(Playwright)로 앱 테스트를 자동화합니다.
• 레슨 (Lesson)
    ◦ 로컬 MCP 설치: npx 명령어를 사용해 내 컴퓨터에 MCP 서버를 구동하는 방식을 배웁니다. (CMD와 PowerShell의 명령어 차이 주의).
    ◦ 고급 도구 활용: 복잡한 추론을 돕는 '시퀀셜 씽킹(Sequential Thinking)'과 브라우저 제어 도구인 '플레이라이트(Playwright)'를 학습합니다.
• 실습 (Practice)
    ◦ 시퀀셜 씽킹: MCP를 설치하고 "체류 시간을 늘리는 방법을 체계적으로 구상해 줘"라고 요청하여 추론 과정을 비교해 봅니다.
    ◦ 플레이라이트: npx 명령어로 플레이라이트 MCP를 설치하고, 간단한 '쇼핑 리스트 앱'을 만듭니다.
• 프로젝트 (Project): "UI 자동 테스트 봇"
    ◦ "플레이라이트를 이용해 쇼핑 리스트 앱의 추가/삭제 기능을 자동으로 테스트해 줘"라고 명령합니다.
    ◦ 브라우저가 스스로 열리고 아이템을 입력하고 삭제하는 과정을 지켜봅니다.
• 체크리스트 (Checklist)
    ◦ [ ] 윈도우 환경(CMD/PowerShell)에 맞는 명령어로 MCP가 설치되었는가?
    ◦ [ ] 시퀀셜 씽킹 적용 시 더 상세한 추론 결과가 나오는가?
    ◦ [ ] 플레이라이트가 브라우저를 자동으로 제어하며 테스트를 통과(Pass)했는가?
--------------------------------------------------------------------------------
[고급] 클라우드 DB 연동 및 배포 (Supabase & Vercel)
로컬 데이터를 클라우드 데이터베이스(Supabase)로 옮기고, 깃허브(GitHub)와 버셀(Vercel)을 통해 전 세계에 서비스를 배포합니다.
• 레슨 (Lesson)
    ◦ GitHub MCP: 코드를 원격 저장소에 업로드하고 버전을 관리하는 방법을 배웁니다.
    ◦ 클라우드 DB (Supabase): 로컬 스토리지에만 저장되던 데이터를 '슈퍼베이스' MCP를 통해 서버 데이터베이스와 연동하는 원리를 익힙니다.
    ◦ 배포 (Vercel): 깃허브와 연동하여 웹사이트를 실제 URL로 배포하는 과정을 학습합니다.
• 실습 (Practice)
    ◦ GitHub 연동: 깃허브 MCP를 설치하고 쇼핑 리스트 코드를 저장소(Repository)에 업로드(Push)합니다.
    ◦ DB 연결: 슈퍼베이스 MCP를 설치하고, "로컬 스토리지 대신 슈퍼베이스 DB를 사용하도록 코드를 수정해 줘"라고 요청합니다.
• 프로젝트 (Project): "어디서나 접속 가능한 쇼핑 앱"
    ◦ 슈퍼베이스에 'shopping_item' 테이블을 생성하고 데이터가 저장되는지 확인합니다.
    ◦ 버셀(Vercel)을 통해 배포된 URL로 접속하여, 시크릿 모드에서도 데이터가 유지되는지(DB 연동 성공 여부) 검증합니다.
• 체크리스트 (Checklist)
    ◦ [ ] 깃허브 저장소에 index.html 등의 파일이 업로드되었는가?
    ◦ [ ] 슈퍼베이스 대시보드에서 생성된 테이블과 데이터를 확인할 수 있는가?
    ◦ [ ] 버셀 배포 URL 접속 시, 데이터가 정상적으로 불러와지는가?
저작자표시 (새창열림)

'바이브 코딩 > 혼공 바이브 코딩' 카테고리의 다른 글

마무리 - 다음 장의 내용이 기대되었던 혼공  (0) 2026.01.24
6주차 PROJECT 10. AI 공감 다이어리 앱 만들고 캡처하기  (0) 2026.01.23
5주차 : PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기  (1) 2026.01.21
4주차 - PROJECT 5. 할 일 관리 앱 만들고 캡처하기  (1) 2026.01.17
3주차. - 손글씨 인식 프로그램 만들고 캡처하기  (0) 2026.01.16

관련글

티스토리툴바