[혼공바이브코딩] 1주차_나의 첫 바이브코딩
[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작
[혼공바이브코딩] 3주차_클로드 코드 시작하기
[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱
[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리
[혼공바이브코딩] 5주차-1_클로드 코드에 API 날개 달기
[혼공바이브코딩] 5주차-2_클로드 코드 AI 에이전트로 개발팀 구성하기
[혼공바이브코딩] 6주차_MCP로 클로드 코드의 한계 넘어서기
MCP 이해하고 클로드 코드와 연결하기
MCP(Model Context Protocol)란?
MCP는 AI 모델이 외부 데이터, 도구, 서비스와 연결될 때 사용하는 표준화된 통신 규약.
AI가 다양한 시스템과 일관된 방식으로 대화하고 협업할 수 있게 해주는 다리 역할.
노션 MCP 연동하기
- 터미널에서 claude mcp add 명령으로 MCP 서버 설치
- 클로드 코드 실행 후 /mcp 명령어로 목록 확인 → 노션 계정 인증
- 클로드 코드에서 노션 MCP 기능 사용 (15개 도구 제공)
로컬 MCP : MCP 중개 프로그램을 내 컴퓨터 안에서 직접 실행
claude mcp add [이름] -s local -- [실행 명령]- 인터넷 없이 작동
- 빠른 응답 속도
- 개인정보 보호 유리
| 부분 | 의미 |
|---|---|
claude mcp add | MCP 등록 |
[이름] | 서버 별명 |
-s local | 내 컴퓨터에서 실행 |
-- | 이후는 실행 명령 |
[실행 명령] | 실제 MCP 서버 실행 |
명령 프롬프트(cmd)에서 실행하는 경우
claude mcp add sequential-thinking -s local -- cmd /c npx -y @modelcontextprotocol/server-sequential-thinking@latest- cmd /c : “Windows 명령 프롬프트(cmd)에서 뒤에 오는 명령을 실행하고 종료하라”
(맥/리눅스라면 보통cmd /c대신 그냥npx ...를 쓴다.) - npx : Node.js 패키지를 설치 없이 즉시 실행하는 도구
- -y : “중간에 확인 묻지 말고 다 yes로 처리” (자동 동의)
- @modelcontextprotocol/server-sequential-thinking@latest : Sequential Thinking MCP 서버 패키지
| 부분 | 의미 |
|---|---|
claude mcp add | MCP 등록 |
sequential-thinking | 서버 이름 |
-s local | 내 PC에서 실행 |
cmd /c | Windows에서 실행 |
npx -y ... | MCP 서버 즉시 실행 |
@latest | 최신 버전 사용 |
Windows PowerShell에서 실행하는 경우
claude mcp add sequential-thinking -s local -- npx @modelcontextprotocol/server-sequential-thinking@latest| 항목 | 이전 | 지금 |
|---|---|---|
| Windows 래퍼 | cmd /c 사용 | ❌ 없음 |
자동 동의(-y) | 있음 | ❌ 없음 |
| 실행 방식 | Windows 전용에 가깝 | OS 공용(Windows/Mac/Linux) |
원격 MCP : 인터넷상 외부 서버에서 실행
claude mcp add --transport http [이름] [서버 URL]- 설정이 간편
- 여러 사용자와 공유 용이
- 명령어 한 줄로 연결
claude mcp add --transport http notion https://mcp.notion.com/mcpClaude에 Notion용 MCP 서버를 HTTP 방식으로 연결(등록)
claude mcp list“현재 Claude에 등록되어 있는 모든 MCP 서버 목록을 보여줘”라는 명령
계정이 필요하다는 안내가 나오는 군요. claude로 들어가서 /mcp 명령어를 입력합니다.
노션 인증을 진행합니다.
내 웹 포트폴리오 방문자의 체류 시간을 지금의 2배로 늘리고 싶어. 두 가지 문서를 작성해.
- 이 목표를 달성할 방법을 구상해서 노션 MCP를 이용해 ‘체류 시간 늘리기’로 저장해 줘.
- Sequential Thinking MCP를 이용해서 이 목표를 달성할 방법을 체계적으로 구상하고 노션 MCP를 이용해 ‘체류 시간 늘리기 – 체계적 구상’으로 저장해 줘
각 MCP는 서로 다른 역할(능력)을 가지고 있기 때문에, 프롬프트도 달라진다.
| MCP | 현실 비유 |
|---|---|
| Sequential Thinking MCP | “논리 정리 전문 비서” (생각 구조화 담당) |
| Notion MCP | “문서 저장 담당 비서” (작성·저장 담당) |
- Claude의 기본 사고 방식
- Sequential Thinking MCP의 단계적 사고 방식
[ Claude (클라이언트) ]
↑
MCP Protocol ←— 규칙(표준)
↑
[ MCP Server (Tool) ]
- Claude = MCP를 ‘사용하는 쪽’
- MCP Server = Claude가 연결해서 쓰는 ‘도구(Tool)’
MCP로 구현하는 완전 자동화 개발 환경
자동화를 위한 MCP 예제
- Context7 : 클로드 코드가 항상 최신 무서를 참고하도록 돕는 지식 연결 도구
- Playwright : 웹 사이트를 자동으로 테스트하고 UI를 검증하는 브라우저 제어 도구
- GitHub : 프로젝트를 버전 관리하고 자동으로 업로드하는 협업 도구
MCP 서버 찾는 방법 : 구글에서 “[서비스명] MCP” 검색 → 깃허브 문서 확인
API KEY가 필요하므로 Context7만 검색해서 홈페이지로 접속합니다.
쇼핑 리스트 앱을 만들어 줘. 아이템 추가, 삭제, 체크 기능이 있는 간단한 웹 UI로 로컬 브라우저에서 실행되게 해 줘
Playwright MCP를 사용해서 이 쇼핑 리스트 앱의 모든 기능을 자동으로 테스트해 줘. 아이템 추가, 삭제, 체크 기능이 제대로 작동하는지 확인해 줘.
깃허브의 API 키는 Settings의 [Developer settings]-[Personal access tokens]에서 받을 수 있습니다.
Tokens(classic)에서 Generate new token(classic)을 선택하였습니다.
repo, user, project 제어권한을 선택한 후 생성하였습니다.
Invalid configuration: : Invalid input 이란 에러가 나서 For Older Versions of Claude Code 프롬프트로 실행해 보니 성공했습니다.
아마 파워쉘을 사용해서 그런걸지도 모르겠어요.
현재 폴더에 만들어진 쇼핑 리스트 앱을 깃허브에 저장하고 싶어. github mcp를 사용해서 shopping-listapp이라는 저장소를 만들고 업로드해 줘.
내용이 없습니다? 이건 저번에 경험했던 일이라서 당황하지 않았습니다.
github.io에서 main branch로 변경을 해주니 잘 푸시되어 있습니다.
지난번에 고생고생했던 commit과 push가 그냥 대화 한 줄로 끝나다니!
html 문서는 나중에 배포하기 위해서 index.html로 이름을 바꿔줘야 합니다.
GitHub 웹에서 파일명만 바꾸기
- Step 1. 해당 파일로 이동
- Step 2. 연필(✏️) 아이콘 클릭
- Step 3. 파일 이름 수정
- Step 4. Commit
GitHub가 내부적으로 하는 일
git mv shopping-list.html index.html
git commit -m "Rename shopping-list.html to index.html"
git pushmain을 GitHub Pages 브랜치로 바꾸기
- 1) 레포지토리로 이동
- 2) Settings 클릭
- 3) Pages 메뉴로 이동
- 4) Source(소스) 변경
Source: Deploy from a branch
Branch: main / root| 개념 | 의미 |
|---|---|
| main | 실제로 개발하는 기본 브랜치 |
| github.io (또는 gh-pages) | GitHub Pages 전용 배포 브랜치로 따로 만든 것 |
| Pages 설정 | “어떤 브랜치를 웹사이트로 보여줄지” 정하는 스위치 |
main을 배포 브랜치로 쓰려면 main 안에 반드시 index.html 파일이 있어야 합니다.
데이터베이스 연결해 진짜 서비스 만들기
배포(Deploy)란?
배포는 내 애플리케이션을 외부의 인터넷에 연결된 제3의 서버에 올리는 과정입니다. 항상 켜져 있는 서버에서 앱을 실행해 언제, 어디서든 URL로 접속할 수 있습니다.
| 구분 | Netlify | Vercel |
|---|---|---|
| 성향 | 정적 웹 + 마케팅/콘텐츠 친화 | 프론트엔드 개발자 친화 |
| 누구에게 좋냐 | 블로그, 포트폴리오, 일반 웹 | React/Next.js 앱, 웹앱 |
| 강점 | 배포가 단순, 기능이 넉넉 | 프레임워크 최적화, 성능 |
| 대표 고객 | 마케터, 디자이너, 일반 개발자 | 프론트엔드 개발자 |
Supabase로 데이터베이스 연동
Supabase는 데이터베이스 구축을 자동화해 주는 클라우드 데이터베이스 플랫폼입니다.
Windows 명령 프롬프트(cmd)에서 실행하는 경우
claude mcp add supabase -s local -- cmd /c npx -y @supabase/mcp-server-supabase@latest -e SUPABASE_ACCESS_TOKEN=<Supabase API 토큰>Windows PowerShell에서 실행하는 경우
claude mcp add --transport http supabase "https://mcp.supabase.com/mcp"
깃허브를 연동시켰더니 Add new에서 리포지토리를 금방 찾아서 선택할 수 있습니다.
Import를 눌러서 바로 배포까지 해 보겠습니다.
Failed to load resource: the server responded with a status of 404 () 오류가 뜹니다?
클로드한테 오류를 입력하니 GitHub Pages를 활성화해야 한다고 합니다.
GitHub Pages 활성화 방법:
- https://github.com/huchu90/shopping-listapp 접속
- Settings 탭 클릭
- 왼쪽 메뉴에서 Pages 클릭
- Source에서 Deploy from a branch 선택
- Branch에서 main 선택 후 Save 클릭
오류가 해결되었습니다!
그러나 같은 주소로 들어가도 로컬 스토리지를 이용하지 않는 경우에는 입력한 데이터가 보이지 않습니다.
외부에서 접속했을때 입력한 내용을 보기 위해서는 클라우드 데이터베이스에 연동을 해야합니다.
Supabase의 API KEY는 프로필의 Account Preferences에서 Access Tokens에 들어가면 발급받을 수 있습니다.
클로드로 들어가서 /mcp에서 supabse 인증을 해 줍니다.
shopping-list.html 파일의 이름을 깃허브와 똑같이 index.html로 수정해줘.
Supabase mcp를 이용해서 우리의 쇼핑 리스트 앱을 데이터베이스와 연동해 줘. shopping_items라는 테이블을 만들고, 현재 로컬 스토리지에 저장되던 데이터를 Supabase 데이터베이스에 저장하도록 코드를 수정해 줘. 수정이 완료되면 깃허브에 commit하고 push해 줘.
깃허브에서는 huchu90 and claude Add Supabase integration for shopping list app 문구를 확인할 수 있었습니다.
Supabase에서는 Table이 생성된 것을 확인할 수 있었어요.
Supabase Free Tier 주요 제한
- 최대 2개 프로젝트 생성 가능 (Free Tier)
- 7일간 활동이 없으면 프로젝트 일시정지됨
→ 다시 활성화하려면 로그인 또는 쿼리 호출 등으로 깨워야 함 - 비활성 상태가 오래 지속되면 삭제될 수도 있음
음… Supabase로 생산현장 대시보드를 활용할 생각이었는데 조금 생각을 해 봐야겠어요…
Supabase Table에 아이템이 추가가 전혀 되지 않고 있습니다.
Vercel의 연결문제인가 확인을 해보니 배포에서 문제가 발생한 것 같습니다.
파란색 Current 태그 (현재 배포 중인 버전) 이게 지금 사람들이 보고 있는 옛날 버전입니다.
최신 업데이트 (맨 윗줄) 옆에 Preview라고 적혀 있습니다. 이것은 Vercel이 “테스트용 미리보기”로만 인식하고, 실제 사이트(Production)에는 적용하지 않은 상태입니다.
해결 방법: “Preview”를 “Production”으로 승격시키기
코드를 다시 올릴 필요 없이, Vercel에서 버튼 하나만 누르면 해결됩니다.
- Deployments 탭(네 번째 사진 화면)으로 가세요.
- 가장 위에 있는 최신 항목(11m ago)의 오른쪽 점 3개 (
...) 버튼을 클릭하세요. - 나오는 메뉴에서 “Promote to Production”을 클릭하세요.
- 확인 창이 뜨면 승인해주세요.
이 과정을 거치면 Preview 상태였던 최신 코드가 즉시 Current(실제 사이트)로 변경됩니다.
이제 Supabase의 Table에도 잘 반영이 됩니다.
핵심 용어 정리
- MCP : AI 모델이 외부 서비스와 연결되는 표준 통신 규약
- 로컬 MCP : 내 컴퓨터 안에서 직접 실행하는 MCP
- 원격 MCP : 인터넷상 외부 서버에서 실행하는 MCP
- Playwright : 웹 자동 테스트 도구
- 버전 관리 : 코드 변경 이력을 기록하고 관리
- 배포 : 앱을 외부 서버에 올리는 과정
- Vercel : 자동 빌드/배포 클라우드 플랫폼
- Supabase : 클라우드 데이터베이스 플랫폼
- 🚶기본 미션(필수)
- PROJECT 10. AI 공감 다이어리 앱 만들고 캡처하기
- 🏃추가 미션(선택)
- PROJECT 15. 쇼핑 리스트 앱 만들고 캡처하기
- Supabase에 앱 연동하고 데이터베이스 테이블 캡처하기
