클로드 코드로 하루 만에 매출 대시보드 만들기! (무료 스타터킷 증정)
구글 시트 데이터로 나만의 대시보드 만들기 (AI 활용법)
"코딩 몰라도 괜찮아! AI한테 시키면 돼!"
혹시 구글 시트로 데이터를 관리하는데, 한눈에 딱! 현황을 볼 수 있는 대시보드가 있으면 좋겠다고 생각해 본 적 있지? 예전에는 이런 대시보드 만들려면 따로 공부하고, 하나하나 직접 만들어야 해서 어려웠잖아.
하지만 이제 AI 시대잖아! 클로드 코드라는 AI를 쓰면 코딩을 전혀 몰라도 구글 시트 데이터를 가지고 멋진 대시보드를 뚝딱 만들 수 있어.
이 영상에서는 클로드 코드를 이용해서 구글 시트 데이터를 기반으로 나만의 대시보드를 만드는 방법을 알려줄게. 코딩 몰라도 충분히 따라 할 수 있도록, 대시보드 만들 때 유용한 스타터 킷이랑 GST 프레임워크도 소개해 줄 테니, 끝까지 보고 나만의 대시보드를 만들어 보자!
대시보드 만들기, 어떻게 진행될까? (3단계 워크플로우)
오늘 대시보드 만드는 과정은 크게 3단계로 나눌 수 있어.
- 개발 환경 준비: 코딩을 도와줄 도구들을 설치하고 설정하는 단계야.
- AI와 함께 대시보드 만들기: 클로드 코드한테 시켜서 코드를 만들고, 우리가 원하는 대로 수정하는 단계야.
- 대시보드 세상에 내놓기 (배포): 만든 대시보드를 다른 사람들도 쓸 수 있게 인터넷에 올리는 단계야.
1단계: 개발 환경 준비 (컴퓨터 세팅!)
대시보드를 만들기 전에 컴퓨터를 좀 세팅해야 해. 마치 게임을 하려면 컴퓨터 사양이 좋아야 하는 것처럼 말이지.
- VS Code 설치: 이건 코드를 보여주고 편집하는 프로그램이야. 코딩을 직접 안 하더라도, 우리가 어떻게 만들어지는지 보거나 설명서를 볼 때 편해.
- Node.js 설치: 클로드 코드가 자바스크립트라는 언어로 돌아가는데, 이걸 돌리려면 Node.js가 필요해.
- Git 설치: 이건 우리가 만든 코드를 버전별로 저장하고 관리하는 도구야. 나중에 실수를 해도 이전 버전으로 돌아갈 수 있게 도와줘.
이것들 설치가 끝나면, 이제 클로드 코드를 설치할 차례야. 설치 방법은 간단해. 클로드 코드 공식 문서에 나와 있는 명령어를 복사해서 VS Code 터미널에 붙여넣기만 하면 돼.
✨ 추가 꿀팁: 클로드 코드가 더 똑똑하게 일하게 도와주는 MCP라는 것도 설치할 거야.
- Context 7 MCP: 최신 정보를 잘 찾아주게 도와줘.
- Playwright MCP: 화면을 캡처해서 오류를 찾거나 확인할 때 유용해.
2단계: AI와 함께 대시보드 만들기 (가장 중요!)
이제 본격적으로 클로드 코드를 써서 대시보드를 만들 거야. 이때 중요한 건, AI한테 일을 시킬 때 명확하고 체계적으로 지시하는 거야.
AI한테 일 시키는 4가지 단계 (탐색, 계획, 실행, 커밋)
엔트로픽(클로드 코드 만든 회사)에서는 AI한테 일을 시킬 때 이 4단계를 따르라고 권장해.
- 탐색 (Explore): 내가 뭘 만들고 싶은지, 어떤 기능이 필요한지, 비슷한 대시보드는 어떻게 생겼는지 등을 미리 조사하는 단계야.
- 계획 (Plan): 조사한 내용을 바탕으로, 대시보드를 어떻게 만들지 구체적인 계획을 세우는 단계야. 어떤 순서로 만들지, 어떤 기능을 넣을지 등을 정하지.
- 실행 (Execute): 계획대로 코드를 만들고 기능을 구현하는 단계야. AI가 코드를 짜주는 거지.
- 커밋 (Commit): 만든 코드가 잘 작동하는지 확인하고, 버전을 저장하는 단계야.
🚀 나만의 대시보드 제작을 도와줄 도구들!
이 4단계를 더 쉽게 하도록 내가 만든 대시보드 스타터 킷과 요즘 핫한 GST 프레임워크를 사용할 거야.
- 대시보드 스타터 킷: 구글 시트 대시보드를 만들 때 자주 쓰는 코드들을 미리 만들어 놓은 거야. 이걸 쓰면 처음부터 다 짜지 않아도 돼서 훨씬 빨라.
- GST 프레임워크: 이 프레임워크는 위에서 말한 탐색, 계획, 실행, 커밋 4단계를 AI가 알아서 잘 하도록 도와주는 역할을 해. 마치 AI를 위한 똑똑한 비서 같은 거지.
✨ GST 프레임워크 활용법:
- 코드베이스 파악: 먼저 스타터 킷으로 만들어진 코드들을 AI가 이해하도록 '맵 코드베이스' 명령어로 분석하게 해.
- 새로운 프로젝트 시작: '뉴 프로젝트' 명령어로 대시보드를 만들고 싶은 내용을 AI한테 설명해주면, AI가 질문을 하면서 필요한 정보들을 물어볼 거야. 이때 질문에 잘 답변해주면 돼.
- 단계별 진행: AI가 제안하는 '탐색', '계획', '실행' 단계를 따라가면서 코드를 만들고, '검증' 단계에서 제대로 만들어졌는지 확인해. 커밋은 AI가 알아서 해줘.
- 디버깅 (오류 수정): 만약 오류가 발생하면, Playwright MCP를 이용해서 AI가 직접 화면을 보고 오류를 찾아서 수정하게 할 수 있어.
3단계: 대시보드 세상에 내놓기 (배포)
대시보드를 다 만들었으면, 이제 다른 사람들도 쓸 수 있게 인터넷에 올려야겠지? 이걸 배포라고 해.
- GitHub 업로드: 만든 코드를 GitHub라는 곳에 올려. 이건 우리가 만든 코드를 저장하는 온라인 창고 같은 거야.
- Vercel 배포: Vercel이라는 서비스를 이용해서 GitHub에 올린 코드를 인터넷에 공개하는 거야. 이렇게 하면 누구나 우리가 만든 대시보드를 볼 수 있게 돼.
✨ 배포 후 설정:
- Google 로그인 설정: 대시보드에 로그인 기능을 넣었다면, Google Cloud Console에서 리디렉션 URI를 설정해 줘야 해. 그래야 로그인 기능이 제대로 작동해.
핵심 정리!
- AI 활용: 코딩 몰라도 클로드 코드로 대시보드 만들 수 있어. AI한테 명확하게 지시하는 게 중요해.
- 체계적인 워크플로우: GST 프레임워크를 이용해서 '탐색, 계획, 실행, 커밋' 순서대로 AI와 함께 개발하면 실수 확률을 줄이고 원하는 결과물을 얻을 수 있어. AI의 질문에 잘 답변하는 게 중요해.
- 스타터 킷 활용: 자주 쓰는 기능은 스타터 킷으로 만들어두면 개발 속도를 높일 수 있어.
- 작게 쪼개서 요청: 너무 복잡한 걸 한 번에 시키기보다, 업무를 잘게 쪼개서 요청하고 단계별로 검증하는 습관을 들이자.
이제 여러분도 구글 시트 데이터를 가지고 나만의 멋진 대시보드를 만들어 볼 수 있을 거야! 어떤 데이터로 대시보드를 만들고 싶은지 댓글로 남겨줘!