[6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 6주차

[6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 6주차

이번 6주차는 클로드 코드(및 OpenCode)의 기능을 외부 서비스와 연결해 주는 MCP(Model Context Protocol)를 학습하고, 이를 통해 단순 코딩 도구를 넘어선 완전 자동화 개발 환경을 구축하는 데 집중했습니다.

1. 소프트웨어 개발 자동화의 완성 (07-2)

• 에이전트 팀 프로젝트: 이전 주차에 구축한 AI 에이전트 팀을 활용해 ‘AI 공감 다이어리’와 ‘PDF 요약 AI’를 완성하며, 실제 배포 가능한 수준의 애플리케이션 개발 워크플로우를 익혔습니다.

2. MCP를 통한 도구의 확장 (Chapter 08)

• MCP 이해와 연결: AI가 노션, 깃허브, 데이터베이스 등 외부 도구와 직접 소통할 수 있게 해주는 MCP의 개념을 파악했습니다.

• 실전 MCP 환경 구축: 교재의 클로드 코드 설정을 응용하여 OpenCode의 설정 파일인 opencode.json을 직접 수정했습니다. 이를 통해 Notion, Sequential Thinking, GitHub, Supabase 등 총 6개의 강력한 서버를 연동하는 데 성공했습니다.

• 데이터베이스 기반 서비스: Supabase MCP를 연동하여 쇼핑 리스트 앱에 실제 데이터베이스를 붙이고, 단순 로컬 앱이 아닌 ‘진짜 서비스’로 업그레이드하는 과정을 거쳤습니다.

OpenCode MCP 환경 설정 및 연결 확인

이번 학습의 핵심은 유료 도구가 아닌 OpenCode 환경에서 MCP를 완벽하게 구동시킨 점입니다. 아래는 제가 직접 설정한 opencode.json 파일의 핵심 구조와 연동 결과입니다.

1) opencode.json 설정 (경로: \.config\opencode\opencode.json)

각 서비스의 API 키와 엔드포인트를 설정하여 AI가 외부 도구에 접근할 수 있는 통로를 열어주었습니다.

  },
  "mcp": {
    "notion": {
      "type": "local",
      "command": ["mcp-remote", "https://mcp.notion.com/mcp"],
      "enabled": true,
      "environment": {}
    },
	  "sequential-thinking": {
      "type": "local",
      "command": ["npx", "-y", "@modelcontextprotocol/server-sequential-thinking"],
      "enabled": true,
      "environment": {}
    },
	  "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "발급받은 KEY 입력"
      },
      "enabled": true
    },
	  "playwright": {
      "type": "local",
      "command": [
        "npx",
        "@playwright/mcp@latest"
      ],
      "enabled": true
    },
	  "github": {
	    "type": "local",
	    "command": ["npx", "-y", "@modelcontextprotocol/server-github"],
	    "enabled": true,
	    "environment": {
		  "GITHUB_PERSONAL_ACCESS_TOKEN": "발급받은 KEY 입력"
	    }
	  },
    "supabase": {
      "type": "remote",
      "url": "https://mcp.supabase.com/mcp?project_ref=프로젝트ID",
      "enabled": true,
      "oauth": {}
    }
  }
}

  },
  "mcp": {
    "notion": {
      "type": "local",
      "command": ["mcp-remote", "https://mcp.notion.com/mcp"],
      "enabled": true,
      "environment": {}
    },
	  "sequential-thinking": {
      "type": "local",
      "command": ["npx", "-y", "@modelcontextprotocol/server-sequential-thinking"],
      "enabled": true,
      "environment": {}
    },
	  "context7": {
      "type": "remote",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "발급받은 KEY 입력"
      },
      "enabled": true
    },
	  "playwright": {
      "type": "local",
      "command": [
        "npx",
        "@playwright/mcp@latest"
      ],
      "enabled": true
    },
	  "github": {
	    "type": "local",
	    "command": ["npx", "-y", "@modelcontextprotocol/server-github"],
	    "enabled": true,
	    "environment": {
		  "GITHUB_PERSONAL_ACCESS_TOKEN": "발급받은 KEY 입력"
	    }
	  },
    "supabase": {
      "type": "remote",
      "url": "https://mcp.supabase.com/mcp?project_ref=프로젝트ID",
      "enabled": true,
      "oauth": {}
    }
  }
}

2) MCP 연결 리스트 확인 결과

설정 후 opencode mcp list 명령어를 통해 총 6개의 서버가 정상적으로 연결된 것을 확인했습니다.

┌  MCP Servers
│
●  ✓ notion connected
│      mcp-remote https://mcp.notion.com/mcp
│
●  ✓ sequential-thinking connected
│      npx -y @modelcontextprotocol/server-sequential-thinking
│
●  ✓ context7 connected
│      https://mcp.context7.com/mcp
│
●  ✓ playwright connected
│      npx @playwright/mcp@latest
│
●  ✓ github connected
│      npx -y @modelcontextprotocol/server-github
│
●  ✓ supabase connected (OAuth)
│      https://mcp.supabase.com/mcp?project_ref=프로젝트ID
│
└  6 server(s)

┌  MCP Servers
│
●  ✓ notion connected
│      mcp-remote https://mcp.notion.com/mcp
│
●  ✓ sequential-thinking connected
│      npx -y @modelcontextprotocol/server-sequential-thinking
│
●  ✓ context7 connected
│      https://mcp.context7.com/mcp
│
●  ✓ playwright connected
│      npx @playwright/mcp@latest
│
●  ✓ github connected
│      npx -y @modelcontextprotocol/server-github
│
●  ✓ supabase connected (OAuth)
│      https://mcp.supabase.com/mcp?project_ref=프로젝트ID
│
└  6 server(s)

◈ 6주차 학습 후기

6주간의 대장정을 마무리하며 가장 짜릿했던 순간은 OpenCode에 다양한 외부 도구들을 하나씩 연결할 때였습니다. 설정 파일을 직접 수정하며 Notion부터 GitHub, Supabase까지 6개의 서버가 나란히 연결된 리스트를 확인했을 때, 이제 AI가 단순한 코드 작성을 넘어 프로젝트 전체를 스스로 관리하고 데이터베이스 배포까지 돕는 ‘진정한 파트너’가 되었음을 실감했습니다.

교재는 클로드 코드 기준이었지만, OpenCode의 opencode.json을 직접 컨트롤하며 환경을 구축해 본 덕분에 AI가 외부 도구와 소통하는 원리를 더 깊게 이해할 수 있었습니다. 특히 Supabase로 실제 데이터를 다루고 GitHub로 프로젝트를 관리하는 과정은 앞으로의 개인 프로젝트에 큰 밑거름이 될 것 같습니다. 이제 이 강력한 AI 에이전트 팀과 함께 저만의 독창적인 서비스를 만들어볼 준비가 되었습니다!

🚶기본 미션 (필수 사항)

PROJECT 10. AI 공감 다이어리 앱 만들고 캡처하기

🏃추가 미션 (선택사항)

PROJECT 15. 쇼핑 리스트 앱 만들고 캡처하기

Supabase에 앱 연동하고 데이터베이스 테이블 캡처하기