생성형 AI 활용 마케팅 기획 업무생산성 향상 · 9일차
등록일 : 2026-06-02 ㅣ 조회수 : 189
AI 활용 업무생산성 향상 심화과정 · DAY 2
Claude Code 메일 트리아지 대시보드 제작·배포
- 구글 워크스페이스 연동부터 Vercel 배포까지
| 강의명 | Claude Code 메일 트리아지 대시보드 제작·배포 — 구글 워크스페이스(GWS) CLI 연동과 OAuth 인증부터, Gmail을 구글 시트에 정리하고, Claude Code로 시각화 대시보드를 만들어 GitHub·Vercel로 배포하는 전 과정 (보너스 : Kie.ai 이미지 생성 웹앱) |
|---|---|
| 구성 | 구글 연동 / 시트 정리 / 대시보드 제작 / 배포 / 접근 제어 |
| 장소 | 강남구 언주로 711 5층 (논현동, 건설회관) |
【 강의 목차 】
PART 1
구글 워크스페이스 연동 → 대시보드 제작
GWS CLI 설치와 구글 클라우드 OAuth 인증부터, Gmail을 구글 시트에 정리하고 Claude Code로 시각화 대시보드를 만드는 과정
01사전 준비 & GWS CLI 설치
▶ 구글 워크스페이스를 명령어로 다루기 실습
- 사전 준비크롬 기본 브라우저 · Node.js 설치 · 작업은 항상 "빈 폴더"로 새로 시작
- GWS CLI 개념구글 시트·Gmail·드라이브 등을 명령어로 사용 · 한 번 설치·인증하면 여러 서비스 통합
- 설치 패턴GitHub 저장소 URL을 클로드에 전달 → "확인·설명 후 설치" 요청 (오픈소스 활용)
02구글 클라우드 콘솔 OAuth 인증
▶ 가장 까다로운 구간 — 차근차근 실습
- OAuth 개념"구글로 로그인" 방식의 표준 인증 · 외부 앱이 내 구글에 접근하도록 허락
- 콘솔 절차프로젝트 생성 → API 6종 사용설정(Gmail·시트·드라이브·캘린더·문서·슬라이드) → 동의 화면 → 테스트 사용자 추가
- 클라이언트 2종데스크탑 앱(로컬 작업용) + 웹 애플리케이션(배포용) · JSON 다운로드 후 지정 경로 저장
03메일 확인 → 구글 시트 정리
▶ 메일을 "판단 컬럼"까지 붙여 정리 실습
- 로그인·인증로그인 URL 접속 → 권한 모두 선택 → "You may close this window" 시 성공
- 시트 적재최근 메일 조회 → 분류·처리상태·감정·지연·검토필요 컬럼으로 구글 시트 자동 정리
- 더미 데이터실습용 "dummy mail data" 탭 활용 — 300건·18컬럼으로 대시보드 제작에 적합
04구글 시트 → 대시보드 웹앱 제작
▶ 말로 던지면 화면이 나온다 실습
- 탭 지정시트 주소 + 특정 탭("dummy mail data")을 정확히 지정해 확인 요청
- 대시보드 요청KPI 카드·우선순위 TOP10·인사이트·분포 차트·원본 표를 갖춘 시각화 웹앱 생성
- 고도화 루프로컬 실행 → 오류·결과 화면 캡처 전달 → 점수·세분화·디자인을 대화로 개선
PART 2
배포 · 접근 제어 · 보너스
GitHub·Vercel로 인터넷에 배포하고, 외부 공개 여부를 제어하는 법, 그리고 보너스 이미지 생성 웹앱까지
05GitHub → Vercel 배포
▶ 내 컴퓨터를 넘어 인터넷으로 실습
- 배포 흐름GitHub(코드 저장소) 업로드 → Vercel이 받아 웹사이트로 배포 → vercel.app 주소 생성
- 환경 변수로컬 .env 값(인증 정보 등)을 Vercel에 등록 후 배포
- 자주 막히는 곳배포 도메인을 "승인된 리디렉션 URI"에 추가 + 도메인 환경변수 수정 → 재배포
06외부 공개 vs 접근 제어
▶ 누가 볼 수 있게 할 것인가 개념
- 공개의 의미서버가 내 토큰으로 시트를 읽어 보여줌 → URL만 알면 누구나 데이터 열람 가능
- 실데이터 주의고객·메일 같은 실데이터는 내부용 취급 — 반드시 접근 제한 권장
- 차단 방법Vercel Deployment Protection(비밀번호/팀 인증) 또는 앱 내 구글 로그인 게이트
07(보너스) Kie.ai 이미지 생성 웹앱
▶ 사진을 올리면 옷을 바꿔주는 앱 보너스
- 점진적 개발API 분석 → CLI 스크립트 → GUI 화면 → 웹앱 → 디버깅 순으로 확장
- 중간 서버(프록시)CORS 방지 + API 키 보호를 위해 브라우저 대신 서버가 대리 호출
- 실전 디버깅응답 필드명(downloadUrl·state) 차이, 문자열화된 JSON 재파싱 등 초보 필수 경험
BEST
참여자 콘테스트 우수작
교육생들이 직접 제작·배포한 대시보드 중 우수 작품을 투표를 통해 선정
1등
이지윤 (애드파워 인턴 근무 예정)
교육생들이 뽑은 완성도에서 가장 높은 평가를 받은 작품
바로가기 → gmail-dashboard-o397.vercel.app
▲ 1등 작품 미리보기 (이지윤)
2등
3등
주소 : 서울 강남구 언주로 711, 5층 (논현동, 건설회관) | TEL : 02-3444-0073