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

• •VS Code와 Node.js 기반의 로컬 개발 환경 구축
• •Claude Code 설치 및 시스템 접근 권한 설정
• •에이전트 기반의 자동화된 코딩 워크플로 이해

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

• •Context7 MCP로 최신 기술 문서 참조 능력 강화
• •Playwright MCP로 AI가 직접 UI 디버깅 수행
• •스타터킷을 활용한 프로젝트 초기 보일러플레이트 단축

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

• •GSD 프레임워크 기반의 단계별 개발 프로세스 정립
• •코드베이스 자동 분석 및 개발 로드맵 생성
• •AI와의 질의응답을 통한 구체적 요구사항 정의

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

• •구글 시트 API 및 서비스 계정 기반 데이터 연동
• •NextAuth.js를 활용한 구글 로그인 및 접근 제어 구현
• •Playwright를 이용한 AI의 자동화된 UI 기능 검증

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

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

• •KPI 카드 및 다양한 차트(Bar, Donut)를 이용한 데이터 시각화
• •기간 및 카테고리별 동적 필터링 시스템 구축
• •검색 및 정렬 기능이 포함된 상세 데이터 테이블 구현

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

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

• •Vercel을 이용한 클라우드 환경 배포 자동화
• •프로덕션 환경을 위한 환경 변수(Environment Variables) 설정
• •실서버 도메인 기반의 OAuth 리디렉션 경로 최종 수정

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