챕터별 상세
전체 워크플로와 개발 환경 설정
대시보드 제작을 위한 전체 프로세스는 VS Code 환경 설정, Claude Code 및 MCP 설치, 스타터킷 활용, GSD 프레임워크를 통한 단계별 개발, Vercel 배포로 구성된다. VS Code, Node.js, Git을 먼저 설치하여 기본적인 개발 인프라를 구축했다. Claude Code는 터미널에서 실행되는 CLI 기반 에이전트로, 설치 후 계정 인증을 거쳐 활성화했다. 이 과정은 AI가 로컬 파일 시스템에 접근하여 직접 코드를 수정할 수 있는 권한을 부여하는 단계이다.
Claude Code는 Anthropic에서 출시한 터미널용 AI 코딩 에이전트로, 단순 채팅을 넘어 파일 생성 및 실행 권한을 가진다.
MCP 서버 설치와 스타터킷 설정
AI의 기능을 확장하기 위해 Context7과 Playwright MCP 서버를 추가했다. Context7은 최신 공식 문서를 참조하게 돕고, Playwright는 AI가 브라우저를 직접 제어하여 UI 에러를 확인하게 한다. 구글 시트 연동을 위한 대시보드 스타터킷을 깃허브에서 클론하여 프로젝트의 뼈대를 잡았다. 스타터킷에는 Next.js, Tailwind CSS, Recharts 등 대시보드 구현에 필요한 기술 스택이 미리 정의되어 있다.
MCP(Model Context Protocol)는 AI 모델이 외부 도구와 통신하기 위한 표준 규약이다.
GSD 프레임워크를 활용한 프로젝트 초기화
GSD(Get Shit Done) 프레임워크를 설치하여 개발 과정을 체계화했다. 이 프레임워크는 탐색, 계획, 실행, 커밋의 4단계를 강제하여 AI가 목표에서 벗어나지 않게 관리한다. `/gsd:map-codebase` 명령으로 현재 코드 구조를 AI에게 학습시키고, `/gsd:new-project`로 대시보드 제작 요구사항을 입력했다. AI는 입력된 요구사항을 바탕으로 전체 개발 로드맵을 4개의 Phase로 나누어 자동 생성했다.
GSD 프레임워크는 AI 에이전트의 작업 일관성을 높이기 위해 설계된 워크플로 관리 도구이다.
Phase 1: 데이터 연동 및 구글 인증 구현
첫 번째 단계로 구글 시트 API 연동과 구글 OAuth 인증 시스템을 구축했다. 구글 클라우드 콘솔에서 서비스 계정을 생성하고 JSON 키를 발급받아 환경 변수에 등록했다. Claude Code는 이 정보를 바탕으로 구글 시트의 스키마를 분석하고 데이터를 가져오는 로직을 작성했다. 특정 이메일 사용자만 대시보드에 접근할 수 있도록 하는 보안 설정도 함께 구현했다. Playwright MCP를 사용하여 로그인 페이지가 정상적으로 작동하는지 AI가 직접 검증했다.
구글 시트 API를 사용하려면 구글 클라우드 프로젝트 설정과 적절한 권한 부여가 필요하다.
bash
curl -fsSL https://claude.ai/install.sh | bashClaude Code CLI 도구를 시스템에 설치하는 명령어
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 서버를 추가하는 과정
Vercel 배포 및 최종 환경 설정
완성된 코드를 깃허브 저장소에 푸시하고 Vercel 플랫폼을 통해 배포했다. Vercel 대시보드에서 프로젝트를 임포트하고, 로컬에서 사용했던 구글 API 키와 OAuth 비밀번호 등 환경 변수를 동일하게 설정했다. 배포된 도메인 주소를 구글 클라우드 콘솔의 승인된 리디렉션 URI에 추가하여 실서버에서도 로그인이 가능하게 했다. 최종적으로 외부 URL을 통해 대시보드에 접속하여 데이터가 실시간으로 반영되는 것을 확인했다.
배포 후에는 OAuth 인증을 위해 실제 서비스 도메인을 인증 제공자 설정에 등록해야 한다.
용어 해설
- 모델 컨텍스트 프로토콜(MCP)
- — AI 모델이 외부 도구, 데이터 소스 또는 서비스와 표준화된 방식으로 상호작용할 수 있게 해주는 프로토콜이다. 이를 통해 Claude Code와 같은 에이전트가 실시간 웹 검색이나 브라우저 제어 기능을 수행할 수 있다. 에이전트의 능력을 외부 생태계로 확장하는 핵심 기술이다.
- GSD 프레임워크(GSD Framework)
- — Get Shit Done의 약자로, Claude Code의 작업 효율을 극대화하기 위한 메타 프롬프팅 및 워크플로 관리 도구이다. 탐색, 계획, 실행, 검증의 단계를 구조화하여 AI가 복잡한 개발 과제를 실수 없이 수행하도록 돕는다. 대규모 프로젝트의 일관성을 유지하는 데 중요하다.
- 플레이라이트(Playwright)
- — 웹 브라우저 자동화를 위한 라이브러리로, 이 영상에서는 MCP 서버 형태로 사용되어 AI가 직접 웹 페이지를 렌더링하고 스크린샷을 찍어 에러를 확인하게 한다. 사람이 직접 화면을 보고 설명할 필요 없이 AI가 스스로 UI 이슈를 디버깅할 수 있게 한다. 자동화된 테스트와 시각적 검증에 필수적이다.
- 버셀(Vercel)
- — 프론트엔드 프레임워크와 정적 사이트를 위한 클라우드 배포 플랫폼이다. 깃허브 저장소와 연동하여 코드 변경 시 자동으로 빌드 및 배포를 수행하며, 환경 변수 설정을 통해 보안 정보를 관리한다. 개발된 대시보드를 외부에서 접속 가능한 실제 서비스로 만드는 역할을 한다.
언급된 리소스
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 02. 21.수집 2026. 02. 21.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
