크롬 MCP AI 도구부터 영상 렌더까지, 깃허브 오픈소스 4개

2026-05-12

오늘 볼 건 네 개입니다. 첫 번째는 Chrome 안을 직접 열어보면서 코딩 Agent(AI가 스스로 단계 나눠서 일 처리하는 방식)가 디버깅하게 돕는 도구, 두 번째는 HTML로 영상을 렌더하는 도구, 세 번째는 여러 데이터 소스를 AI가 안전하게 조회하게 만드는 쿼리 엔진, 네 번째는 AI가 뻔한 결과를 내지 않게 방향을 잡아주는 스킬입니다. 바이브 코딩이나 AI 코딩에 손이 자주 가는 사람이라면 깃허브 오픈소스 중에서도 바로 용도가 보이는 조합이구요.

1. ChromeDevTools/chrome-devtools-mcp

⭐ 39371개 · TypeScript · 발견: github

이 레포는 Chrome DevTools를 MCP(AI가 외부 도구랑 대화하게 해주는 규격)로 연결해서 코딩 Agent가 브라우저 상태를 직접 읽고 디버깅하게 해주는 도구입니다. 말로만 페이지를 추측하는 게 아니라, 브라우저를 열고 요소나 동작을 확인하는 쪽에 가깝습니다.

예를 들어 AI 코딩 도구에 웹 문제를 맡기면, 브라우저 화면과 개발자 도구 정보를 받아서 어디가 깨졌는지 확인하고 다시 수정하는 흐름을 만들 수 있습니다. 브라우저 디버깅을 터미널 밖으로 꺼내지 않아도 된다는 점이 바로 편한 지점이죠.

프론트엔드 작업이 많은 개발자, 자동 테스트 전에 화면 상태를 빨리 확인하고 싶은 사람, 바이브 코딩으로 대시보드나 랜딩 페이지를 자주 만지는 사람에게 잘 맞습니다. 매달 도구 구독료를 내는 입장에선 이런 연결이 되는지 안 되는지가 작업 시간 차이로 꽤 크게 느껴집니다.

링크: github.com/ChromeDevTools/chrome-devtools-mcp

2. heygen-com/hyperframes

⭐ 17631개 · TypeScript · 발견: github

Hyperframes는 HTML을 쓰면 영상을 렌더해 주는 프로젝트입니다. description 그대로 보면 agents용으로 만들어졌고, topics에는 animation, ffmpeg, gsap이 붙어 있어서 코드로 장면을 만들고 영상 파일로 뽑는 성격이 분명합니다.

입력은 HTML 쪽에 가깝고, 출력은 렌더된 비디오입니다. 카드 뉴스 스타일 자막 장면이나 제품 소개 애니메이션 같은 걸 화면으로 짜두면 영상으로 내보내는 흐름이 그려집니다.

쇼츠 템플릿을 반복해서 만드는 사람, 영상 편집 툴보다 코드가 편한 팀, 같은 포맷 영상을 여러 개 찍어내야 하는 운영자에게 잘 맞아요. AI 코딩으로 문구와 장면 구조를 만든 뒤 바로 영상까지 붙이고 싶은 경우에 특히 쓸모가 큽니다.

링크: github.com/heygen-com/hyperframes

3. mindsdb/mindsdb

⭐ 39161개 · Python · 발견: github

MindsDB는 여러 데이터 소스를 AI Agent가 안전하게 조회할 수 있게 만든 AI Data Vault 성격의 쿼리 엔진입니다. description에 나온 대로 any datasource를 대상으로 질의하는 쪽이 핵심이라서, 흩어진 데이터를 한 군데처럼 물어보게 만드는 도구로 보면 됩니다.

실제 사용 그림은 이렇습니다. 데이터베이스나 분석 저장소에 들어 있는 값을 사람이 일일이 찾아 복사하는 대신, Agent가 필요한 질문을 던지고 답을 받아오는 흐름입니다. RAG(AI가 내 문서 읽고 답하게 하는 방식)와 비슷하게 느껴질 수 있지만, 여기서는 데이터 조회와 연결이 더 앞에 있습니다.

사내 대시보드 숫자를 자주 확인하는 팀, 여러 저장소에 흩어진 데이터를 한 번에 보고 싶은 운영자, 분석 자동화를 붙이려는 개발자에게 맞습니다. 회사에서 API 비용과 데이터 접근 권한을 같이 보는 사람이라면 이런 보안 중심 접근이 더 신경 쓰일 겁니다.

링크: github.com/mindsdb/mindsdb

4. Leonxlnx/taste-skill

⭐ 17025개 · Shell · 발견: github

taste-skill은 AI가 boring하고 generic한 결과를 내지 않게 방향을 잡아주는 스킬입니다. topics에 claude, claude-code, codex가 붙어 있어서 특정 코딩 AI 도구와 함께 쓰는 보조 레이어 성격으로 읽히구요.

설명만 놓고 보면 입력은 프롬프트나 작업 요청이고, 출력은 더 취향 있는 결과물입니다. 코드 자체를 실행하는 프레임워크라기보다, AI가 어떤 식으로 답하고 만들지 기준을 주는 쪽에 가깝습니다.

랜딩 페이지 초안, 카피, UI 문구, 첫 번째 코드 스캐폴드가 너무 평평하게 나와서 늘 손으로 다시 다듬는 사람에게 잘 맞습니다. 바이브 코딩을 하다 보면 속도는 빠른데 결과가 다 비슷해지는 순간이 있는데, 그때 이런 깃허브 오픈소스가 의외로 시간을 줄여줍니다.

링크: github.com/Leonxlnx/taste-skill

네 레포 다 깃허브 오픈소스답게 README부터 읽어보면 용도가 바로 잡힙니다. 바이브 코딩이나 AI 코딩에 붙일 거라면 star 눌러두고 필요한 순간 다시 찾는 편이 낫습니다.