DarkGarden

Topics

Sections

클로드코드로 매출 대시보드 하루 만에 만들기 (스타터킷 무료 제공)

30 min read

클로드코드로 매출 대시보드 하루 만에 만들기

📺 원본 영상: 클로드코드로 매출 대시보드 하루 만에 만들기! (스타터킷 무료 제공) 🎙️ 채널: 시민개발자 구씨 📅 정리 일자: 2026-02-21 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(코드, 터미널 출력, UI 화면 등)는 포함되지 않을 수 있으며, 이 경우 영상 참조 표기를 달았습니다.

개요

Google Sheets로 데이터를 관리하는 비개발자도 커스텀 대시보드를 손쉽게 만들 수 있을까? 이 영상은 Claude Code와 GSD(Get Shit Done) Framework, 그리고 강연자가 직접 제작한 Google Sheets Dashboard Starter Kit을 결합해 매출 대시보드를 하루 만에 제작하는 전체 워크플로우를 처음부터 끝까지 실연으로 보여준다. 코딩 지식 없이도 따라할 수 있도록 개발 환경 구성, MCP 연동, 단계별 개발, Vercel 배포까지 전 과정을 다루고 있다.

왜 지금 바이브 코딩으로 대시보드를 만드는가

과거에는 대시보드를 만들기 위해 비개발자도 Looker Studio나 Power BI 같은 전용 BI 툴을 별도로 학습해야 했다. 툴마다 다른 인터페이스와 제약이 있었고, 커스터마이징에는 한계가 따랐다. 강연자는 Looker Studio 튜토리얼 영상을 올린 경험도 있다고 언급하며, 그것이 얼마나 번거로운 과정이었는지를 배경으로 깔아둔다. 그러나 AI 시대에 접어든 지금, 바이브 코딩(Vibe Coding) — AI에게 자연어로 지시해 코드를 생성하는 방식 — 을 활용하면 이러한 시트 기반 대시보드를 훨씬 빠르고 유연하게 제작할 수 있다. 핵심은 Claude Code라는 터미널 기반 AI 코딩 도구이며, 이 영상은 그 가능성을 구체적인 실연으로 증명한다.

오늘의 전체 워크플로우 구성

강연자는 이번 프로젝트를 세 개의 큰 단계로 구성했다. 첫 번째는 개발 환경 세팅으로, Claude Code가 작동할 수 있도록 VS Code, Node.js, Git, 그리고 Claude Code 자체를 설치하고 필요한 MCP(Model Context Protocol) 두 가지를 연동하는 준비 작업이다. 두 번째는 코드 제작 단계로, Google Sheets 데이터를 기반으로 매출 대시보드를 실제로 만드는 과정이다. 이때 Anthropic 공식 문서에서 권장하는 4단계 워크플로우인 **탐색(Discuss) → 계획(Plan) → 실행(Execute) → 커밋(Commit)**을 GSD Framework를 통해 체계적으로 수행한다. 마지막 세 번째는 배포 단계로, 완성된 대시보드를 Vercel을 통해 클라우드에 올려 외부에서도 접근할 수 있게 만드는 작업이다.

이 네 단계 워크플로우(탐색-계획-실행-커밋)에 대해 좀 더 부연하면, 그냥 “대시보드 만들어줘”라고 한 번에 요청하는 것은 AI가 정확히 원하는 결과물을 내기 어렵게 만든다. 탐색 단계에서 어떤 대시보드가 필요한지, 업계에서는 어떻게 만드는지를 리서치하고, 계획 단계에서 구체적인 작업을 잘게 쪼개고, 실행 단계에서 코드를 생성하며, 마지막으로 커밋(버전 저장)을 통해 작업 결과를 보존한다. 이 구조를 GSD Framework가 자동으로 안내해준다는 것이 이 영상의 핵심 제안이다.

1단계: 개발 환경 세팅

VS Code, Node.js, Git 설치

개발 환경 구성의 첫 번째 도구는 **VS Code(Visual Studio Code)**다. 코드 편집기이지만, 비개발자 입장에서도 유용한 이유가 있다. Claude Code가 생성하는 코드 파일뿐 아니라, Markdown 형식으로 작성된 로드맵, 체크리스트, 단계별 계획 문서들도 이곳에서 확인할 수 있기 때문이다. VS Code 공식 사이트에서 운영체제에 맞게 다운로드하고 설치하면 된다.

두 번째로 Node.js를 설치해야 한다. Claude Code 자체가 JavaScript 기반으로 동작하기 때문에, 이 런타임 환경이 반드시 필요하다. Node.js 공식 사이트에서 설치 후, VS Code의 터미널에서 node -v 명령어를 입력해 버전 번호가 출력되면 설치가 정상적으로 완료된 것이다.

세 번째는 Git이다. Git은 코드 버전 관리 도구로, 개발 작업에서 ‘커밋’이란 문서를 버전별로 저장하는 것과 유사하다. macOS에서는 brew install git, Windows에서는 Git 공식 사이트의 설치 파일로 설치할 수 있다. 이 Git이 나중에 GitHub 연동과 Vercel 배포의 기반이 된다.

Claude Code 설치

VS Code, Node.js, Git까지 설치했다면 이제 Claude Code를 설치할 차례다. Claude Code 공식 문서에는 운영체제별 설치 명령어가 제공되어 있다. Mac/Linux는 npm 기반 명령어를, Windows는 PowerShell 기반 명령어를 터미널에서 실행하면 된다. 설치 완료 후 터미널에 claude를 입력하면 Claude Code 인터페이스가 나타나며, 나가고 싶을 때는 /exit을 입력하면 일반 터미널로 돌아온다.

바이브 코딩 시 자주 활용되는 옵션으로 --dangerously-skip-permissions가 있다. 이 플래그를 붙여 Claude Code를 실행하면 작업마다 권한 승인을 요청하지 않고 모든 작업을 자동으로 수행하게 된다. 강연자는 보안 이슈가 덜한 프로젝트에서는 이 방식이 훨씬 빠른 작업을 가능하게 한다고 설명하며, 단 보안이 민감한 작업에서는 주의가 필요하다고 덧붙인다.

2단계: MCP 설치 — Context7과 Playwright

Context7: 항상 최신 공식 문서를 참조하게 해주는 MCP

MCP(Model Context Protocol)는 Claude Code가 외부 도구나 서비스와 연동해 더 지능적으로 작업하도록 돕는 확장 기능이다. 오늘 설치할 두 가지 MCP 중 첫 번째는 Context7이다. 일반적인 웹 검색에서는 최신 정보가 아닌, 단순히 검색 상위에 노출된 정보를 가져오는 경우가 많아 구버전 문서를 잘못 참조하는 문제가 생긴다. Context7은 이 문제를 해결하기 위해 항상 최신으로 업데이트된 공식 문서를 정확하게 참조할 수 있도록 도와준다. GSD Framework와 함께 사용하면 Claude Code가 탐색 단계에서 Context7을 통해 공식 문서를 자동으로 참조하며 더 정확한 코드를 생성하게 된다.

Playwright MCP: AI가 직접 브라우저를 열어 디버깅한다

두 번째 MCP는 Playwright MCP다. 이 MCP는 Claude Code가 실제 브라우저를 직접 제어하고 화면을 스크린샷으로 확인할 수 있게 해준다. 대시보드 개발 중 에러가 발생했을 때, 개발자가 직접 스크린샷을 찍어 Claude Code에 전달하는 대신, Claude Code가 스스로 브라우저를 열어 에러 화면을 확인하고 수정하는 방식으로 동작한다. 이는 디버깅 과정을 크게 자동화해주며, 실제 영상에서도 AUTH_SECRET 누락 에러를 Playwright MCP가 콘솔을 직접 열어 확인하고 수정하는 장면이 나온다.

두 MCP 모두 각각의 GitHub 공식 문서에 Claude Code용 설치 명령어가 제공되어 있으며, 해당 명령어를 터미널에 붙여넣고 실행하면 설치가 완료된다. /mcp 명령어로 설치 여부를 확인할 수 있다.

💡 [영상 참조] 강연자는 이 시점에서 터미널의 MCP 설치 명령어와 Claude Code 내 /mcp 확인 화면을 보여줍니다. 📺 상세 내용은 원본 영상에서 확인하세요.

3단계: Google Sheets Dashboard Starter Kit

Starter Kit이란 무엇인가

강연자는 Google Sheets 기반 대시보드를 만들 때 반복적으로 필요한 기술 스택을 미리 구성해 GitHub에 공개 저장소로 올려두었다. 이 Starter Kit에는 프론트엔드 프레임워크(Next.js), 언어(TypeScript), 스타일링 도구, 차트 라이브러리, Google Sheets API 연동 코드 등이 이미 설치되어 있다. 덕분에 새 대시보드 프로젝트를 시작할 때마다 이 설정들을 처음부터 다시 구성할 필요 없이 Starter Kit을 그대로 가져다 쓸 수 있다.

설치 과정

설치는 git clone 명령어로 Starter Kit 저장소를 로컬로 복사하는 것에서 시작한다. 이때 명령어 끝에 자신의 프로젝트 이름을 지정하면 해당 폴더명으로 복사된다. 이후 cd [프로젝트명]으로 폴더로 이동한 뒤 npm install을 실행해 의존성 패키지를 설치한다. 설치 완료 후 package.json의 name 필드를 자신의 프로젝트명으로 수정하고 npm install을 한 번 더 실행해 package-lock.json에도 이름이 반영되도록 한다.

git clone으로 가져오면 기본적으로 원본 Starter Kit의 Git 이력이 따라오므로, 새 프로젝트로 독립적인 버전 관리를 하려면 Git 저장소를 초기화해주어야 한다. 이 과정도 영상 설명란에 제공된 명령어를 순서대로 실행하면 된다. 마지막으로 환경 변수 파일인 .env.local을 터미널 명령어로 생성해두면 Starter Kit 설치의 준비가 완료된다.

Starter Kit 폴더 안에는 CLAUDE.md라는 파일이 포함되어 있는데, 이 파일은 Claude Code가 코드베이스를 이해하는 데 활용하는 자체 설명 문서 역할을 한다. Claude Code가 작업을 시작하기 전 이 파일을 읽고 현재 프로젝트의 구조와 맥락을 파악한다.

4단계: GSD Framework 설치 및 작동 방식

GSD(Get Shit Done) Framework란

GSD Framework는 Claude Code에서 인기 있는 오픈소스 프레임워크로, Anthropic이 권장하는 탐색-계획-실행-커밋 4단계 워크플로우를 자동화해주는 도구다. 이 Framework를 설치하면 Debugger, Codebase Mapper, Executor, Planner 등 각 단계를 담당하는 서브 에이전트(Sub-agent)가 자동으로 생성되며, 다양한 슬래시 커맨드(Slash Command)와 훅(Hook)도 함께 설정된다. 즉, 개발자가 직접 이 에이전트들을 구성할 필요 없이 커뮤니티에서 잘 만들어진 설정을 바로 가져다 쓸 수 있다.

설치는 GitHub에 공개된 GSD Framework 저장소의 설치 명령어를 터미널에서 실행하면 되며, Claude Code를 기반으로 로컬 혹은 글로벌로 설치할 수 있다. 설치 후 Claude Code 내에서 /gsd:[명령어] 형식의 슬래시 커맨드로 각 단계를 실행한다.

코드베이스 매핑부터 시작

GSD Framework를 설치한 뒤 가장 먼저 할 작업은 /gsd:map-codebase다. 이 명령어를 실행하면 Claude Code가 Starter Kit 전체를 분석해 기술 스택, 아키텍처, 폴더 구조, 코딩 컨벤션 등을 정리한 문서를 .planning 폴더 안에 생성한다. 이 분석 결과가 이후 모든 단계의 기반이 된다. 이 단계가 완료되면 /clear로 컨텍스트 창을 초기화하고 새 프로젝트 초기화 단계로 넘어가는 것이 권장된다.

5단계: 대시보드 개발 — 탐색부터 커밋까지

프로젝트 초기화와 요구사항 정의

/gsd:new-project 명령어를 실행하면 GSD Framework가 코드베이스 분석 결과를 바탕으로 “무엇을 만들고 싶은가요?”라는 질문을 던지며 대화를 시작한다. 강연자는 여기서 ‘구씨컴퍼니(Goocy Company)‘라는 가상 회사의 Google Sheets 데이터를 기반으로 매출 현황, 상품별 분석, 고객별 분석을 한눈에 볼 수 있는 대시보드를 요청했다. GSD Framework는 이 요구를 이해하고 접근 권한, 기간 필터, 차트 유형, 데이터 갱신 방식 등 여러 구체적인 질문을 이어서 던진다. 개발자가 능동적으로 모든 스펙을 정리해야 하는 것이 아니라, Claude Code가 알아서 핵심 질문들을 꺼내준다는 점이 이 Framework의 큰 장점이다.

이 대화를 통해 확정된 요구사항들은 PROJECT.md 형태의 문서로 자동 작성된다. 이는 제품 요구사항 문서(PRD, Product Requirements Document)에 해당하는 것으로, 핵심 기능, 아키텍처 결정, 비기능적 요구사항 등이 정리된다.

💡 [영상 참조] 강연자는 이 시점에서 GSD Framework가 던지는 다지선다형 질문들과 그에 대한 선택 화면을 보여줍니다. 📺 원본 영상에서 확인하세요.

Google Sheets API 연동 설정

대시보드가 Google Sheets 데이터를 직접 읽어오려면 Google Cloud Platform(GCP)에서 몇 가지 설정이 필요하다. 구체적으로는 GCP에서 프로젝트를 생성하고 Google Sheets API를 활성화한 뒤, 서비스 계정(Service Account)을 만들어 JSON 키 파일을 다운로드받아야 한다. 이 JSON 파일 안에 있는 서비스 계정 이메일과 Private Key를 .env.local 파일의 해당 환경 변수에 넣어준다. 또한 Google Sheets 공유 설정에서 이 서비스 계정 이메일에 ‘뷰어’ 권한을 부여해야 Claude Code가 시트 데이터를 읽을 수 있다.

강연자는 이 과정을 모르더라도 Claude Code에게 “어떤 변수를 채워야 시트를 확인할 수 있냐”고 묻기만 하면 단계별 안내를 해준다고 설명한다. 실제로 영상에서 Claude Code는 필요한 환경 변수 세 가지(Google Sheets ID, 서비스 계정 이메일, Google Private Key)와 각 설정 방법을 상세히 안내하는 장면이 나온다.

페이즈별 탐색(Discuss)-계획(Plan)-실행(Execute)-검증(Verify)

GSD Framework에서 대시보드 개발은 여러 페이즈(Phase)로 나뉘어 진행된다. 이 영상에서는 총 4개의 페이즈로 구성되었으며 각 페이즈는 다음의 흐름을 따른다.

탐색(Discuss) 단계는 /gsd:discuss phase [n]으로 실행한다. Claude Code가 해당 페이즈에서 구현할 기능들에 대해 구체적인 질문들을 다시 한 번 던지는 단계다. 페이즈 1에서는 로그인 디자인, 이메일 인증 시 거부 메시지, 로그인 후 랜딩 페이지, 헤더 사용자 정보 표시 방식 등이 질문으로 나왔다. 탐색 단계가 완료되면 Claude Code는 context.md라는 파일을 생성해 이 대화의 결론을 정리해두며, 이후 계획과 실행 단계의 기반 자료로 활용된다.

계획(Plan) 단계는 /gsd:plan phase [n]으로 실행한다. 탐색에서 정리된 내용과 코드베이스 분석 결과, 외부 리서치를 종합해 해당 페이즈의 작업을 세부 태스크로 잘게 쪼갠 개발 계획서를 생성한다. 예를 들어 페이즈 1은 1-1, 1-2, 1-3 세 개의 세부 단계로 나뉘었다.

실행(Execute) 단계는 /gsd:execute phase [n]으로 실행한다. 계획서에 따라 실제 코드를 생성하는 단계로, GSD Executor 서브 에이전트가 계획 문서들을 순서대로 읽으며 코드를 작성한다. 실행이 완료되면 Git 커밋도 자동으로 이루어진다.

검증(Verify) 단계는 /gsd:verify-work [n]으로 실행한다. Claude Code가 체크포인트 목록을 생성해 개발자가 수동으로 하나씩 확인하도록 안내하는 단계다. 강연자는 별도의 터미널에서 npm run dev를 실행해 localhost:3000으로 접속한 뒤 Playwright MCP와 함께 UI를 직접 확인하는 방식을 보여준다. 이 과정에서 AUTH_SECRET 환경 변수 누락 에러를 Playwright MCP가 브라우저 콘솔을 직접 열어 자동으로 발견하고 수정하는 장면도 담겼다.

Google OAuth 연동

구글 로그인 기능 구현을 위해서는 GCP OAuth 클라이언트 설정이 추가로 필요하다. GCP에서 OAuth 2.0 클라이언트 ID를 생성하고, 승인된 자바스크립트 원본(Authorized JavaScript Origins)에 localhost:3000을 추가하며, 승인된 리다이렉션 URI(Authorized Redirect URIs)에는 NextAuth.js가 요구하는 콜백 경로를 추가해준다. 나중에 Vercel로 배포하면 해당 프로덕션 URL도 이 리다이렉션 URI에 추가해야 구글 로그인이 정상 동작한다.

이렇게 설정된 OAuth Client ID와 Client Secret을 .env.local에 등록하면, localhost:3000에서 구글 로그인 버튼이 활성화되는 것을 확인할 수 있다. 강연자의 데모에서는 Google Sheets의 Allowed Emails라는 별도 시트에 등록된 이메일만 로그인을 허용하는 접근 제어 기능도 함께 구현되었으며, 미등록 계정으로 로그인 시도 시 거부 메시지가 나타나는 것이 확인된다.

4개 페이즈의 완성

강연자는 페이즈 1(인증 및 기본 데이터 레이어)과 페이즈 2(매출 현황 대시보드)에서는 탐색 단계까지 상세히 진행했고, 페이즈 3(상품 분석)과 페이즈 4(고객 분석)에서는 시간 관계상 계획-실행-검증으로 바로 넘어갔다. 최종 결과물로는 월별 매출 바 차트, 억/만 단위 자동 전환 포맷, 기간 필터(월/분기), CSV 다운로드, 다크모드 지원, 모바일 반응형 레이아웃, 도넛 차트 기반 카테고리별 분석, 상품/고객 검색 및 정렬 기능 등이 모두 구현되었다.

모든 페이즈가 완료된 후에는 /gsd:complete-milestone으로 전체 프로젝트를 완료 처리한다. 이 단계에서 로드맵 파일과 프로젝트 문서들이 업데이트되며, 이번 버전에서 포함하지 못한 기능들(Out of Scope)도 별도로 정리되어 버전 2 계획 수립 시 참조할 수 있게 된다.

6단계: Vercel 배포

GitHub에 코드 업로드

Vercel 배포를 위한 첫 번째 단계는 로컬의 Git 커밋 이력을 GitHub 원격 저장소에 업로드하는 것이다. 강연자는 Claude Code에게 GitHub에 Public Repository를 생성하고 git push를 해달라고 요청하는 방식을 보여준다. 이때 .env.local 파일은 .gitignore에 의해 자동으로 GitHub에 올라가지 않도록 설정되어 있어야 하며, Starter Kit에는 이 설정이 이미 포함되어 있다. 보안이 걱정된다면 Claude Code에게 “커밋 전 API 키나 민감한 정보가 포함된 파일이 있는지 확인해줘”라고 먼저 요청하는 것이 좋다.

Vercel에서 배포

GitHub에 코드가 올라가면 Vercel에서 회원가입 후 “New Project”를 통해 해당 Repository를 Import한다. 프레임워크 설정은 Next.js로 자동 감지되며, 나머지 빌드 설정은 기본값을 유지하면 된다. 중요한 점은 Environment Variables 항목에서 .env.local에 작성했던 환경 변수들을 여기에도 동일하게 입력해야 한다는 것이다. 이 변수들은 GitHub에 올라가지 않기 때문에 Vercel에 직접 등록해주어야 배포된 앱이 정상적으로 Google Sheets API와 OAuth에 연결된다.

배포가 완료되면 Vercel이 자동으로 도메인을 생성해준다. 이 도메인 URL을 GCP OAuth 클라이언트의 승인된 리다이렉션 URI에 추가해주면 클라우드 환경에서도 구글 로그인이 정상 동작한다. 이후 코드를 수정해 GitHub에 다시 git push하면 Vercel이 자동으로 재배포(Redeploy)를 처리하므로, 버전 2 업데이트도 동일한 방식으로 반영할 수 있다.

💡 [영상 참조] 강연자는 이 시점에서 Vercel의 배포 완료 화면과 클라우드 URL에서 실제 로그인 및 대시보드 동작을 보여줍니다. 📺 원본 영상에서 확인하세요.

마무리 / 핵심 정리

이 영상의 핵심 주장은 세 가지로 압축된다. 첫째, Claude Code를 잘 활용하면 코딩을 몰라도 AI에게 자연어로 지시하는 것만으로 실제 프로덕션 수준의 대시보드를 만들 수 있다. 둘째, 그 지시를 잘 하기 위한 구조가 중요한데, GSD Framework가 제공하는 탐색-계획-실행-커밋 워크플로우를 따르면 Claude Code의 오류 발생 확률을 줄이고 원하는 결과를 훨씬 안정적으로 받을 수 있다. AI에게 막연하게 전부 맡기는 것이 아니라, 단계별로 쪼개서 요청하고 매 단계마다 /clear로 컨텍스트를 초기화하며 작업하는 것이 좋은 결과물을 얻는 습관이다. 셋째, 비슷한 유형의 서비스를 반복해서 만들 계획이 있다면 Starter Kit을 미리 구성해두는 것이 장기적으로 큰 시간 절약이 된다.

강연자는 Claude Code가 여전히 만능은 아니라는 점도 솔직히 인정한다. 너무 복잡한 작업을 한 번에 요청하면 불완전한 결과물이 나오는 경우가 있으므로, 항상 작업을 잘게 쪼개고 단계마다 수동 검증하는 습관이 중요하다고 강조하며 영상을 마무리한다.

📚 출처 및 참고

구분내용
원본 영상클로드코드로 매출 대시보드 하루 만에 만들기! (스타터킷 무료 제공)
채널시민개발자 구씨
리포트 작성2026-02-21
작성 방식YouTube 영상 STT 변환 후 에디팅

💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.

그래프 뷰

Related Reports

백링크