여기서는 그 시트를 시각화 대시보드(웹페이지)로 만드는 과정을 다룹니다. 핵심 원리는 어제와 같습니다 — "원하는 것을 말로 던지면, 클로드가 코드를 구성해 준다."
※ 시작 전 준비
① GWS CLI가 설치·인증되어 있을 것 GWS CLI는 구글 시트·Gmail·드라이브 등을 클로드가 명령어로 다루게 해주는 연결 도구입니다. 설치는 어렵지 않습니다 — 크롬에서 "GWS CLI"를 검색해 깃허브 저장소 주소를 복사한 뒤, 클로드에게 "현재 폴더에 설치해줘" 라고 주면 됩니다. 그 다음 구글 로그인(동의)을 한 번 하면 인증 완료입니다. ② 데이터가 들어 있는 구글 시트 주소(URL)와 탭 이름을 알고 있을 것 (이 글에서는 위에 첨부한 dummy mail data 를 사용합니다. 실습에서는 이 파일이 구글드라이브에 있고 주소를 URL로 참조합니다.)
STEP 1. 새 세션 + 시트 탭 확인
대시보드 작업은 새 세션에서 시작하되, 폴더는 그대로 둡니다. 먼저 클로드에게 "어떤 시트의 어떤 탭"을 볼지 정확히 알려 줍니다. 시트 전체가 아니라 특정 탭만 지정하는 것이 포인트입니다.
PROMPT 1(구글 시트 주소 붙여넣기) 위 구글 시트에서 "dummy mail data" 탭을 확인해줘.
클로드가 탭의 행·열 구조와 내용을 읽어 요약해 줍니다.
▶ 새 세션은 "기억"이 없습니다
세션을 새로 열면 클로드는 GWS CLI가 설치·인증됐다는 사실을 모릅니다. 그래서 "GWS CLI는 설치·인증되어 있어"라고 한 줄 알려 주면 헤매지 않습니다.
참고로 이 예시 탭은 다음과 같은 구조였습니다.
항목
내용
규모
총 300건 · 18개 컬럼
주요 컬럼
발신자 · 분류 · 담당부서 · 중요도 · 감정 · SLA기한 · 지연 · 처리상태 · 회신여부 · 검토필요 등
STEP 2. 대시보드 만들기 요청
가장 간단하게는 아래처럼 한 줄로 요청해도 됩니다.
PROMPT 2 (기본)이 내용을 바탕으로 시각화된 대시보드 웹을 만들어줘. 그리고 내 로컬 브라우저에서 실행해줘.
프롬프트에 "STEP 0에서 컬럼 역할을 스스로 추론해줘"를 넣으면, 시트 컬럼이 달라져도 코드 수정 없이 차트가 자동으로 재구성됩니다.
작업이 끝나면 보통 아래와 같은 파일들이 만들어집니다. (예 : Next.js 기준)
app/ page.tsx # 대시보드 화면 api/sheet/route.ts # 시트 읽기(서버) lib/sheets.ts · schema.ts · insights.ts components/ KpiCards · Charts · DataTable .env.local# 비밀 값(외부 공개 금지)
.env.local 은 인증 정보 같은 비밀 값을 담는 파일입니다. 외부에 공개되면 안 됩니다.
STEP 3. 로컬 브라우저에서 실행
만들어진 대시보드를 내 컴퓨터에서 띄워 봅니다.
PROMPT 3내 로컬 브라우저(로컬 서버)에서 실행해줘.
localhost(내 컴퓨터 안에서만 열리는 주소)로 대시보드가 뜹니다.
▶ 실행이 안 되면 — 자바스크립트 실행 환경
웹앱을 실행하려면 Node.js가 필요합니다. 없으면 설치 후 다시 실행하세요. 클로드가 "설치해도 되냐"고 물으면 허용하면 됩니다.
※ 오류가 나면 — 그대로 캡처/복사해서 전달
화면에 빨간 오류 로그가 떠도 당황하지 마세요. 그 오류 메시지를 그대로 복사하거나 화면을 캡처(윈도우+Shift+S)해서 클로드에게 주면, 원인을 찾아 알아서 고쳐 줍니다. 이 "오류 → 전달 → 수정" 루프가 핵심입니다.
STEP 4. 결과 화면 & 고도화
잘 만들어진 대시보드는 보통 이런 구성으로 나옵니다.
구성 요소
역할
KPI 카드
전체 / 미완료 / 지연 / 검토필요 등 핵심 숫자
액션보드 TOP 10
지금 당장 처리해야 할 우선순위 목록
인사이트
분류 신뢰성 · SLA 리스크 · 초안 누락 등 "패턴"
분포 차트
분류·상태별 막대, 일자별 추이, 담당x상태 교차표
원본 표
검색·정렬·CSV 내보내기
한 번에 만족스럽지 않을 때 — 이렇게 다듬습니다
처음 결과가 어설퍼도 괜찮습니다. 대화로 계속 고치면 됩니다. 실제로 자주 쓰는 개선 요청 예시입니다.
고도화 프롬프트 예시· 우선순위 점수가 전부 같아서 변별이 안 돼. 경과일·마감 초과를 점수에 반영해 차이를 내줘.
"AI에게 목적을 말로 던지고 → 결과 화면/오류를 캡처해 다시 전달하며 → 점점 고도화한다." 코드를 직접 몰라도 이 반복 루프만 알면 됩니다.
참고. 구글 시트 읽기 인증 — 구글 클라우드 콘솔(OAuth)
로컬에서는 GWS CLI가 인증을 대신 해주지만, 웹으로 배포한 앱은 스스로 구글에 접근할 "인증 정보"가 필요합니다. 클로드와 구글은 서로 다른 회사 서비스라, 외부인이 함부로 못 들어오도록 인증 절차를 거치는데 — 이때 쓰는 표준 방식이 OAuth(오쓰, O-A-U-T-H)입니다. 우리가 평소 "구글로 로그인" 누르는 그 방식과 같습니다.
OAuth = "구글 동의 한 번 → 외부 앱이 내 구글 서비스(시트 등)에 접근할 인증 정보 발급". 큰 그림은 ① 인증 방식 정하기(OAuth) ② 내 인증 정보 넣기(클라이언트 ID/시크릿) ③ 어떤 API를 쓸지 고르기.
단계별 절차
단계
할 일
1
크롬에서 "구글 클라우드 콘솔" 검색 → 접속 → 우측 상단 [콘솔]
2
좌측 상단 [프로젝트 선택] → 새 프로젝트 생성 (이름은 오늘 날짜 등 자유)
3
(요청 시) 결제 카드 등록 — 처음엔 300달러 무료 크레딧, 실제 비용 거의 없음
4
[≡ 햄버거 → API 및 서비스] → "모두 동의함" 확인
5
사용자 인증 정보 - OAuth 동의 화면 구성 — 앱 이름, 지원 이메일 = 내 이메일
6
대상 — 조직 있으면 "내부", 없으면 "외부" + 테스트 사용자에 내 계정 추가
7
[클라이언트 → 클라이언트 만들기] → 애플리케이션 유형 선택
8
생성 화면에서 JSON 다운로드
※ 클라이언트는 "두 개"를 만듭니다 — 용도가 다릅니다
데스크탑 앱 : 로컬에서 클로드가 구글 시트에 접근할 때 (배포가 필요없을 경우 데스크톱 클라이언트만 생성해도 됨) 웹 애플리케이션 : 대시보드를 웹으로 배포할 때(Vercel) → 오늘은 사실상 2단계 : ① 메일을 구글 시트에 적재 ② 그 시트를 대시보드로 배포
JSON 파일 정리 & 사용할 API 켜기
다운로드된 파일 이름을 client_secret.json 으로 바꾸고(.json 확장자는 절대 지우지 말 것), 클로드에게 저장 위치를 물어 그 경로에 옮겨 둡니다.
그리고 [API 및 서비스 → 라이브러리]에서 Google Sheets API를 검색해 사용 설정(Enable) 합니다.
STEP 5. 인터넷에 배포하기 (GitHub → Vercel)
내 컴퓨터(localhost)에서만 보이던 대시보드를 인터넷 주소로 올립니다. 순서는 두 단계입니다 — ① GitHub에 코드를 올리고 → ② Vercel이 그 코드를 받아 웹사이트로 띄웁니다.
① GitHub에 올리기
GitHub은 "코드용 구글 드라이브"라고 생각하면 쉽습니다. GitHub CLI(gh)를 설치하고 gh auth login 으로 한 번 로그인해 두면, 나머지는 클로드가 대신 해줍니다.
PROMPT지금까지 작업한 내용을 GitHub에 새 저장소를 만들어 올려줘.
※ 비밀 값은 올리지 않기
인증 정보가 든 .env.local 은 .gitignore로 제외해 GitHub에 올라가지 않게 합니다. (이 값은 다음 단계에서 Vercel에 따로 넣습니다)
② Vercel로 배포하기
Vercel은 GitHub 코드를 받아 자동으로 웹사이트를 만들어 주는 서비스입니다. 화면에서 클릭 몇 번이면 됩니다.
vercel.com 에 GitHub 계정으로 로그인
[Add New → Project] → 방금 올린 저장소 Import
Environment Variables(환경 변수)에 로컬 .env.local 값들을 그대로 입력
Deploy 클릭 → 잠시 후 ○○○.vercel.app 주소가 생성
※ 배포본에서 데이터가 안 보일 때 (가장 흔한 경우)
배포하면 주소가 localhost에서 vercel.app으로 바뀝니다. 그래서 2가지를 맞춰야 데이터가 뜹니다. 1) 구글 클라우드 콘솔 → 웹 클라이언트 → "승인된 리디렉션 URI"에 https://(내 배포주소)/api/auth/callback 추가 2) Vercel 환경 변수의 도메인 값(리디렉션/콜백 URL)을 배포 주소로 수정 → 재배포(Redeploy)
▶ 막히면 — 화면 캡처해서 클로드에 전달
오류 화면이나 설정 화면을 윈도우 + Shift + S로 캡처해 클로드에게 주면, "어떤 값을 어디에 넣어야 하는지" 알려주거나 직접 고쳐 줍니다.
한 번 연결해두면, 이후에는 GitHub에 다시 올리기만 해도 Vercel이 자동으로 재배포합니다.
