GPT-6 아스트라 활용법: MCP 서비스 개발부터 웹사이트 관리 자동화까지

안녕하세요! 사랑받는 IT 프로덕트의 첫 스텝, 똑똑한개발자입니다 :)

AI에게 글이나 이미지를 만드는 일을 요청하는 데서 더 나아가, 웹사이트에 데이터를 등록하고 관리하는 작업까지 맡길 수 있을까요?

이런 운영 환경을 만들기 위해 GPT-6 아스트라를 활용해 MCP 스튜디오를 개발했습니다. 웹사이트의 코드와 데이터베이스를 분석해 AI가 사용할 관리 기능을 구성하고, 사용자는 연결된 AI 개발 도구에서 작업을 요청하는 서비스입니다.

크몽 AX와 똑똑한개발자의 웹사이트 운영 사례부터 프로젝트 연결과 설정, 데이터 조회, 외부 서비스 정보 수집·등록까지 실제 시연의 전개 순서에 따라 소개합니다.

영상으로 보러 가기

GPT-6 아스트라로 만든 MCP 스튜디오의 개발 배경

크몽 AX 웹사이트의 데이터 등록과 관리

크몽 AX 웹사이트에는 인사이트, 전문가, 포트폴리오, 솔루션 카탈로그처럼 여러 종류의 데이터가 들어갑니다. 담당자는 관리자 페이지에서 내용을 입력하고 관리합니다.

AI를 활용해 필요한 정보를 찾거나 문구를 작성할 수는 있지만, 그 결과를 실제 DB에 등록하고 수정·삭제하는 작업까지 연결하려면 별도의 설정이 필요합니다.

개발자가 사용하는 작업 환경을 다른 담당자에게도 제공하려면 환경 변수와 Supabase 인증 정보 등을 설정해야 합니다. 이 과정이 복잡하고 관련 지식이 필요하다는 점에서 MCP 스튜디오 개발이 시작됐습니다.

똑똑한개발자의 콘텐츠 운영에도 연결할 수 있는 구조

똑똑한개발자 웹사이트에서도 담당자가 관리자 페이지에 들어가 포트폴리오와 콘텐츠를 업로드하고 있습니다. 이 작업 역시 AI가 자료를 작성하는 단계와 사이트에 반영하는 단계가 나뉘어 있습니다.

개발 과정에서는 Figma 등 작업 도구와 연결된 환경에서 자료를 전달하며 포트폴리오를 올려달라고 요청하거나, 필요한 텍스트를 작성하도록 하는 활용 방식도 구상했습니다.

AI가 작성·등록 작업을 처리하고, 사람은 관리자 페이지에서 결과를 확인하는 구조입니다. 사람이 확인하거나 판단하는 과정에 참여하는 방식을 휴먼 인 더 루프(Human-in-the-loop)라고 합니다.

MCP란? 정확한 정의와 쉬운 설명

MCP는 Model Context Protocol의 약자로, AI 애플리케이션이 외부 데이터와 도구에 연결되는 방식을 표준화한 통신 규약입니다.

쉽게 말하면 AI와 다른 프로그램이 같은 약속에 따라 요청과 결과를 주고받도록 하는 연결 방식입니다. AI에게 전문가 목록을 보여달라고 요청하면, 연결된 조회 기능을 호출해 결과를 받아오는 식입니다.

MCP 자체가 데이터를 수집하거나 DB를 수정하는 것은 아닙니다. 실제 작업은 연결된 도구와 관리 기능이 수행합니다. 사용자는 MCP의 세부 구조를 몰라도 AI에게 연결된 기능을 요청하는 방식으로 활용할 수 있습니다.

GPT-6 아스트라를 활용한 구조 설계와 기능 구현

소스 코드와 DB를 분석해 관리 기능 구성

MCP 스튜디오는 우선 GitHub와 Supabase를 연결하는 방식으로 만들었습니다. GitHub에서는 소스 코드 저장소를, Supabase에서는 데이터베이스와 파일 저장소를 연결합니다. GitLab·Bitbucket 같은 다른 코드 저장소 서비스는 수요에 따라 추가 지원을 검토하는 대상으로 소개했습니다.

연결 후 셋업을 실행하면 AI 개발 도구가 코드와 DB(데이터베이스)를 분석해 관리 기능을 구성합니다. 데이터 생성·조회·수정·삭제를 뜻하는 CRUD기능입니다. 각각 Create, Read, Update, Delete에 해당합니다.

예를 들어 사이트에 등록된 전문가를 조회하거나 새로운 데이터를 추가하도록 요청할 수 있습니다. 직접 만든 웹사이트를 이후에도 관리하기 쉽도록 연결하는 것이 목적입니다.

로컬 분석 결과를 웹 대시보드에 전달

이번 구조에서는 MCP 스튜디오 웹사이트 안에서 AI가 직접 분석하는 것이 아닙니다. 사용자의 컴퓨터에서 실행한 Claude Code나 Codex 같은 AI 개발 도구가 분석을 진행하고, 결과를 API로 스튜디오 대시보드에 전달합니다.

API는 프로그램끼리 정해진 방식으로 요청과 결과를 주고받는 인터페이스입니다. 여기서는 분석 결과와 진행 상태를 웹사이트에 전달하는 역할을 합니다. 도구를 내 컴퓨터에서 실행한다는 뜻이며, AI 모델 자체가 모두 컴퓨터 안에서 실행된다는 뜻은 아닙니다.

이전에도 이런 구조를 구현하려고 시도했지만, 로컬 작업 환경과 웹사이트가 연결되는 방식을 상세하게 설명해야 했습니다. 이번에는 GPT-6 아스트라가 의도를 빠르게 파악해 구조 설계와 기능 구현을 진행할 수 있었습니다.

MCP 스튜디오 사용법: 프로젝트 생성과 연결 설정

GitHub 로그인과 서비스 연결

시연에서는 GitHub 계정으로 로그인한 뒤 ‘kmong-ax-test’ 프로젝트를 새로 만들었습니다. 프로젝트에는 서비스 연결, 셋업, 위키, 관리 기능, MCP 연결, 실행 이력 메뉴가 표시됩니다.

먼저 GitHub 계정을 연결하고 분석할 소스 코드 저장소를 선택합니다. 계정에 저장소가 여러 개 있다면 이번 프로젝트에 사용할 대상을 지정해야 합니다.

Supabase도 계정을 연결한 뒤 사용할 프로젝트와 파일 저장소를 선택합니다. 연결 과정에서 DB 접근에 필요한 인증 정보를 설정합니다. API 문서처럼 분석에 도움이 되는 자료가 있다면 선택적으로 추가할 수 있습니다.

빈 폴더에서 스킬 설치 시작

다음 설정은 사용자의 컴퓨터에서 진행합니다. 시연에서는 오르카에서 새 프로젝트를 만들고, Claude 기반의 작업 환경을 빈 폴더로 열었습니다.

MCP 스튜디오의 셋업 화면에는 사용하는 도구에 맞춰 복사할 수 있는 프롬프트가 준비되어 있습니다. 이를 붙여넣으면 스킬 설치와 초기 설정이 진행됩니다.

스킬은 AI 개발 도구가 수행할 작업 절차를 담은 지침입니다. 코드와 DB를 분석하고, 가이드 문서와 기능 명세를 작성해 위키와 관리 기능으로 구성하는 과정을 안내합니다. 이후 기능을 사용하면 실행 이력도 남습니다.

데이터 등록·삭제 기능을 사용할 예정이라면 셋업 전에 프로젝트 설정에서 등록·삭제를 허용해야 합니다. 해당 정책을 반영해 관리 기능을 구성하기 위한 설정입니다.

MCP 연결 프롬프트와 키 설정

스킬 파일 설치 이후에는 MCP 연결 설정을 진행했습니다. MCP 연결 메뉴에는 Claude Code와 Codex 각각의 설정 프롬프트가 있으며, 연결에 사용할 키를 발급하는 기능도 있습니다.

시연에서는 새 키를 발급하고 MCP 연결 프롬프트와 함께 AI 개발 도구에 전달했습니다. 이후 MCP 연결용 JSON 설정 파일과 MCP 스튜디오 토큰을 설정하고, 인증 정보를 환경 변수에서 가져오도록 구성했습니다.

스킬 설치·실행과 MCP 연결은 구분된 과정입니다. 같은 환경에서는 기존 MCP 연결 설정을 이용할 수 있지만, 코드나 DB 구조가 바뀌면 분석과 관리 기능 구성을 위한 셋업을 다시 실행해야 합니다.

세션을 다시 열고 스킬 실행

MCP 설정이 끝나면 셋업 화면의 스킬 설치·실행 프롬프트를 다시 실행합니다. 분석하는 동안 웹 대시보드에서 프로젝트 단계별 진행 상황을 확인할 수 있습니다.

시연에서는 기존 MCP 키를 글로벌 설정으로 사용하고 있어 오류가 발생했습니다. 키 설정을 변경했지만 실행 중인 터미널 세션에 반영되지 않은 상태였습니다. 터미널을 닫고 다시 실행해 해결했습니다.

이 경험을 바탕으로 MCP 연결 설정 → 세션 다시 열기 → 스킬 설치·실행 순서를 안내했습니다.

다른 담당자의 컴퓨터에서 사용하도록 설정하는 방법도 소개했습니다. 해당 환경에서 사용할 MCP 연결 프롬프트와 키, 셋업 프롬프트를 전달해 연결하는 방식입니다.

코드·DB 분석과 프로젝트 위키 게시

분석 중 확인한 모델별 활용 차이

프로젝트 분석을 기다리는 동안 GPT-6 아스트라의 개발 활용 경험도 설명했습니다. 이전 GPT 버전과 비교해 구현하려는 구조를 이해하고 기능으로 옮기는 데 도움이 되었습니다.

다만 디자인 결과물은 아쉬워, 아스트라로 기능을 개발한 뒤 Claude로 디자인을 보완했습니다. 문구 작성에서는 Codex가 표현을 다듬는 데 강점을 보였다는 사용 경험도 소개했습니다.

데이터 관계와 이미지 저장 구조 분석

코드와 DB를 함께 분석하는 이유는 데이터의 내용뿐 아니라 사용 방식까지 파악해야 하기 때문입니다. 크몽 AX를 예로 들면 전문가와 포트폴리오가 연결되고, 포트폴리오에 인사이트가 연결되는 관계가 있습니다.

이미지도 별도의 저장 과정을 거칩니다. 파일은 Supabase Storage의 버킷에 업로드하고, DB에는 이미지 파일 자체가 아니라 URL을 저장합니다. 버킷은 파일 보관 공간이고, URL은 해당 파일에 접근하는 주소입니다.

DB에 저장된 값만 보면 이미지 주소도 텍스트입니다. 따라서 이미지 등록 기능을 구성하려면 파일 업로드 → URL 확보 → DB 저장의 흐름을 코드와 함께 파악해야 합니다. 이런 구조를 분석하고 관리 기능을 구성하기 때문에 셋업에는 시간이 걸릴 수 있습니다.

등록·삭제 정책을 반영해 셋업 재실행

분석 후 검수·게시 단계에서 등록·삭제 허용 설정이 제대로 반영되지 않은 것을 확인했습니다. 새 셋업을 시작해 상태를 초기화하고, 프롬프트를 다시 전달해 분석을 진행했습니다.

완료된 뒤에는 프로젝트 위키가 버전 1로 게시되었습니다. 위키에는 데이터 구조, 관리 기능과 접근 방법, 업무 흐름, 검수 결과가 정리됩니다.

이후 코드나 데이터 구조가 바뀌면 새 셋업을 실행해 변경된 내용을 반영할 수 있습니다.

MCP 스튜디오 활용 시연: 조회부터 서비스 등록까지

카테고리 조회와 실행 이력 확인

관리 기능에서 카테고리 목록을 선택하면 사이드바에 실행 화면이 표시됩니다. 여기서 가져올 데이터 개수를 지정해 조회했습니다.

시연에서는 두 개를 가져오도록 설정해 R&D와 솔루션 카테고리를 확인했습니다. Supabase에서 실제 데이터를 읽어오는 기능이 작동한 것입니다. 실행 이력에도 카테고리 조회가 완료된 기록이 남았습니다.

설정이 끝난 뒤에는 오르카에서 작업을 요청할 수 있습니다. 요청에 따라 연결된 관리 기능이 실행되고, 크몽 AX 웹사이트의 데이터에 반영되는 방식입니다.

프로덕트헌트 서비스 정보 수집·등록

다음으로 글로벌 IT 서비스와 SaaS를 소개하는 프로덕트헌트에서 정보를 가져왔습니다. 서비스 링크를 전달하며 다음과 같이 요청했습니다.

해당 사이트에 있는 상위 열개 서비스 가져와서 솔루션 카테고리로 생성해 줘

AI와 연결된 도구가 서비스 정보를 수집하고 사이트에 등록하는 작업을 진행했습니다. 담당자가 외부 사이트를 보면서 정보를 하나씩 입력하던 과정을 요청으로 연결한 사례입니다.

작업 중에는 관리자 페이지의 역할도 설명했습니다. 데이터 입력을 AI에게 맡기더라도 사람이 확인하거나 수정해야 할 항목은 생길 수 있습니다. 관리자 페이지는 결과를 검수하고 필요한 내용을 조정하는 용도로 계속 활용합니다.

로고 보완과 콘텐츠 작업에 여러 도구 활용

서비스 정보를 가져오는 과정에서는 로고가 빠지는 경우가 있었습니다. 이미지가 없는 항목을 확인하고, 인터넷에서 정사각형 로고를 찾아 넣도록 추가 요청하는 방법을 소개했습니다.

또한 설계·개발에는 아스트라를, 디자인에는 Claude를 함께 사용하는 작업 방식도 설명했습니다. 블로그 작성 스킬로 본문을 구성하고, Codex에 참고 자료를 전달해 필요한 이미지를 만드는 활용 방식입니다.

여러 도구를 함께 사용할 때는 각 도구가 참조하는 지침과 설정 방식이 다르다는 점도 고려해야 합니다. 같은 작업 규칙을 여러 환경에서 사용할 수 있도록 구성하려는 취지입니다.

실제 생성 결과와 실행 이력 확인

서비스 등록이 끝난 뒤에는 유료·무료 여부와 가격 정책 같은 정보가 반영되었는지 확인했습니다. 요청한 개수와 실제 생성된 항목은 구분해 실행 이력과 사이트에서 확인했습니다.

MCP 실행 이력에는 서비스 생성 작업과 후속 조회 기록이 남았습니다. 크몽 AX 웹사이트에서도 데이터가 추가된 것을 확인했지만, 새로 등록된 항목에는 로고가 빠져 있어 이미지 보완을 다시 요청했습니다.

AI 개발 도구가 사이트의 구조를 분석한 상태에서 그 구조에 맞춰 데이터를 수집하고 등록하는 흐름입니다. 담당자가 항목마다 내용을 옮겨 넣는 작업을 줄이는 데 활용할 수 있습니다.

이미지 여백·해상도 조정과 최종 확인

이미지 작업에서는 Codex로 로고의 여백이나 해상도를 조정하는 방법도 설명했습니다. 필요한 여백을 추가하거나 불필요한 여백을 제거하는 편집 작업입니다.

TLDV의 이미지를 찾는 과정에서는 작은 파비콘만 확보할 수 있는 상황도 언급했습니다. 파비콘은 브라우저 탭 등에 표시되는 작은 아이콘입니다. 이때 이미지를 필요한 크기로 조정하도록 Codex에 요청하는 방법을 소개했습니다.

로고 반영 후에는 웹사이트와 관리자 페이지를 새로고침해 결과를 확인했습니다. 직접 이미지를 검색하고 저장한 뒤 업로드하던 과정을 AI에게 이어서 요청한 사례입니다.

GPT-6 아스트라의 개발 강점과 작업별 도구 활용

이번 MCP 스튜디오 개발에서 GPT-6 아스트라의 강점은 로컬 작업 환경과 웹 대시보드가 연결되는 구조를 설계하고, 실제 기능으로 구현하는 과정에 있었습니다. 기술적인 요구사항을 상세하게 설명하지 않아도 의도를 빠르게 파악했고, 사용자가 설정하고 기능을 실행하는 흐름까지 고려했습니다.

디자인은 Claude로 보완하고, 이미지 편집과 문구 작성에는 Codex를 활용했습니다. 이러한 차이는 이번 프로젝트에서 확인한 사용 경험이며, 특정 모델이 모든 작업에서 우수하다는 일반적인 평가로 확대하지 않습니다.

기획부터 구현·테스트까지는 주말 동안 이틀 정도 사용했습니다. 이틀 내내 연속으로 작업한 것은 아니며, 다른 프로젝트도 함께 진행하면서 서비스를 만들고 실행해본 기간입니다.

MCP 스튜디오는 무료로 공개할 예정이며, 운영 방식으로 광고 수익을 고려하고 있습니다. 추가되었으면 하는 기능이나 필요한 서비스 아이디어가 있다면 댓글로 알려주세요.

감사합니다 :)