클로드 코드와 GSD 프레임워크로 구글 시트 기반 매출 대시보드 만들기 | AI Trends

시민개발자 구씨AI/ML

클로드 코드와 GSD 프레임워크로 구글 시트 기반 매출 대시보드 만들기

Claude Code와 GSD 프레임워크를 활용하여 구글 시트 데이터를 시각화하는 맞춤형 매출 대시보드를 구축하고 Vercel에 배포하는 전 과정을 다룹니다.

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

Claude Code와 GSD 프레임워크를 조합하면 복잡한 코딩 과정 없이도 전문적인 대시보드를 구축할 수 있다. MCP 서버를 통해 AI의 능력을 확장하고, 단계별 워크플로를 따라가며 안정적인 결과물을 얻는 것이 핵심이다.

배경

기존의 Looker Studio나 Power BI 같은 도구 대신, 최신 AI 에이전트인 Claude Code를 사용하여 구글 시트 데이터를 기반으로 한 맞춤형 대시보드를 제작하려는 수요가 늘고 있다.

대상 독자

구글 시트로 데이터를 관리하며 자동화된 시각화 도구가 필요한 비개발자 및 생산성을 높이려는 개발자

의미 / 영향

이 튜토리얼은 비전문가도 AI 에이전트를 활용해 기업용 내부 도구를 직접 제작할 수 있음을 보여준다. 고가의 BI 솔루션 없이도 구글 시트와 무료 오픈소스 도구만으로 수준 높은 대시보드 구축이 가능해졌다. 향후 개발 방식은 직접 코딩하는 방식에서 AI 에이전트의 워크플로를 관리하고 검증하는 방향으로 빠르게 전환될 것이다.

챕터별 상세

00:55

전체 워크플로와 개발 환경 설정

대시보드 제작을 위한 전체 프로세스는 VS Code 환경 설정, Claude Code 및 MCP 설치, 스타터킷 활용, GSD 프레임워크를 통한 단계별 개발, Vercel 배포로 구성된다. VS Code, Node.js, Git을 먼저 설치하여 기본적인 개발 인프라를 구축했다. Claude Code는 터미널에서 실행되는 CLI 기반 에이전트로, 설치 후 계정 인증을 거쳐 활성화했다. 이 과정은 AI가 로컬 파일 시스템에 접근하여 직접 코드를 수정할 수 있는 권한을 부여하는 단계이다.

Claude Code는 Anthropic에서 출시한 터미널용 AI 코딩 에이전트로, 단순 채팅을 넘어 파일 생성 및 실행 권한을 가진다.

08:43

MCP 서버 설치와 스타터킷 설정

AI의 기능을 확장하기 위해 Context7과 Playwright MCP 서버를 추가했다. Context7은 최신 공식 문서를 참조하게 돕고, Playwright는 AI가 브라우저를 직접 제어하여 UI 에러를 확인하게 한다. 구글 시트 연동을 위한 대시보드 스타터킷을 깃허브에서 클론하여 프로젝트의 뼈대를 잡았다. 스타터킷에는 Next.js, Tailwind CSS, Recharts 등 대시보드 구현에 필요한 기술 스택이 미리 정의되어 있다.

MCP(Model Context Protocol)는 AI 모델이 외부 도구와 통신하기 위한 표준 규약이다.

13:40

GSD 프레임워크를 활용한 프로젝트 초기화

GSD(Get Shit Done) 프레임워크를 설치하여 개발 과정을 체계화했다. 이 프레임워크는 탐색, 계획, 실행, 커밋의 4단계를 강제하여 AI가 목표에서 벗어나지 않게 관리한다. `/gsd:map-codebase` 명령으로 현재 코드 구조를 AI에게 학습시키고, `/gsd:new-project`로 대시보드 제작 요구사항을 입력했다. AI는 입력된 요구사항을 바탕으로 전체 개발 로드맵을 4개의 Phase로 나누어 자동 생성했다.

GSD 프레임워크는 AI 에이전트의 작업 일관성을 높이기 위해 설계된 워크플로 관리 도구이다.

24:52

Phase 1: 데이터 연동 및 구글 인증 구현

첫 번째 단계로 구글 시트 API 연동과 구글 OAuth 인증 시스템을 구축했다. 구글 클라우드 콘솔에서 서비스 계정을 생성하고 JSON 키를 발급받아 환경 변수에 등록했다. Claude Code는 이 정보를 바탕으로 구글 시트의 스키마를 분석하고 데이터를 가져오는 로직을 작성했다. 특정 이메일 사용자만 대시보드에 접근할 수 있도록 하는 보안 설정도 함께 구현했다. Playwright MCP를 사용하여 로그인 페이지가 정상적으로 작동하는지 AI가 직접 검증했다.

구글 시트 API를 사용하려면 구글 클라우드 프로젝트 설정과 적절한 권한 부여가 필요하다.

bash

curl -fsSL https://claude.ai/install.sh | bash

Claude Code CLI 도구를 시스템에 설치하는 명령어

39:30

Phase 2-4: 대시보드 기능 고도화 및 시각화

매출 현황, 상품 분석, 고객 분석 페이지를 순차적으로 개발했다. 매출 현황에서는 KPI 카드와 월별 매출 추이 차트를 구현하고 기간 필터링 기능을 추가했다. 상품 분석 단계에서는 도넛 차트와 상세 매출 테이블을 생성하여 카테고리별 비중을 시각화했다. 고객 분석에서는 산업군 및 지역별 분석 차트를 도입했다. 각 단계마다 AI가 코드를 작성한 후 수동 검증(Verify) 과정을 거쳐 기능의 완성도를 확인했다.

Recharts 라이브러리는 React 환경에서 데이터 시각화 차트를 쉽게 구현하게 돕는다.

bash

claude mcp add context7 --scope user --header "CONTEXT7_API_KEY: YOUR_API_KEY" --transport http context7
claude mcp add playwright npx @playwright/mcp@latest

문서 참조를 위한 Context7과 브라우저 제어를 위한 Playwright MCP 서버를 추가하는 과정

52:18

Vercel 배포 및 최종 환경 설정

완성된 코드를 깃허브 저장소에 푸시하고 Vercel 플랫폼을 통해 배포했다. Vercel 대시보드에서 프로젝트를 임포트하고, 로컬에서 사용했던 구글 API 키와 OAuth 비밀번호 등 환경 변수를 동일하게 설정했다. 배포된 도메인 주소를 구글 클라우드 콘솔의 승인된 리디렉션 URI에 추가하여 실서버에서도 로그인이 가능하게 했다. 최종적으로 외부 URL을 통해 대시보드에 접속하여 데이터가 실시간으로 반영되는 것을 확인했다.

배포 후에는 OAuth 인증을 위해 실제 서비스 도메인을 인증 제공자 설정에 등록해야 한다.

실무 Takeaway

Claude Code와 GSD 프레임워크를 조합하면 AI가 개발 로드맵을 스스로 설계하고 단계별로 코드를 작성하여 복잡한 앱 구축이 가능하다.
MCP 서버를 활용하여 AI에게 최신 문서 참조 능력과 브라우저 제어 능력을 부여하면 디버깅과 검증 과정을 자동화할 수 있다.
구글 시트 데이터를 API로 연동할 때는 서비스 계정 생성과 시트 공유 설정이 필수적이며, 이를 통해 실시간 데이터 반영이 가능하다.
에이전트 기반 개발 시에는 작업을 잘게 쪼개고 각 단계마다 AI가 직접 검증하게 하는 워크플로를 유지해야 결과물의 신뢰성을 확보할 수 있다.

언급된 리소스

GitHub구씨 스타터킷 자료

GitHubGSD 프레임워크

GitHubContext7 MCP

GitHubPlaywright MCP

AI 분석 전체 내용 보기

AI 요약 · 북마크 · 개인 피드 설정 — 무료

출처 · 인용 안내

원문 발행 2026. 02. 21.수집 2026. 02. 21.출처 타입 YOUTUBE

인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.