구글 시트와 AI로 무료 웹 앱을 만들고 배포하려면 어떻게 해야 하나?

TL;DR

구글 시트에 데이터 구조를 만들고, Claude가 생성한 Code.gs와 index.html을 Apps Script에 붙여넣은 뒤 웹 앱으로 배포하면 됩니다. Gemini API 키를 연결하면 여행 일정 추천이나 음식 사진 분석 같은 AI 기능을 실행하고, 결과와 이용 기록을 시트에 저장할 수 있습니다.

Transcript

뭘 만들어 볼까요? 여행 가이드요? 그러면 이렇게 해볼까요? 스마트 여행 가이드 앱을 만들려고 해요. 여기에 붙여넣기 해서 실행해 볼게요. 앱이 완성되었습니다. 여기에다가 햄버거 하나 여기 추가하고 분석 시작 버튼 클릭하면 PDF로. 오! 여기까지. 오 이거 엄청난데요. 오 이거 엄청난 앱이 완성되었습니다. 여러분 안녕하세요. 오빠두 엑셀 전진권입니다. 자 오늘은 역대급으로 AI 코딩을 정말 쉽게 할 수 있는 업데이트 영상을 준비했습니다. 요즘 바이브 코딩이라고 한 번쯤 들어보셨을 것 같은데요. 오늘은 코딩을 전혀 모르시더라도 구글에서 제공하는 기본 툴과 클로드만 사용해서 나만의 앱을 십분 안에 만드는 방법을 알아보려고... Read More

Key Insights

• 구글 시트는 앱 입력값과 AI 응답 기록을 저장하는 데이터 저장소로 활용되며, 열 제목이 코드 생성의 기준이 된다.
• Claude에는 앱 아이디어만 주기보다 주요 기능, 사용자 흐름, 필드 구조, 화면 요소와 디자인 요구를 함께 전달해야 한다.
• Code.gs는 Gemini 호출과 시트 기록 같은 백엔드 처리를 맡고, index.html은 입력 폼과 결과 화면을 구성한다.
• Gemini API 키는 웹 앱의 요청을 AI 모델로 보내고 분석 결과를 다시 앱에 반환하는 연결 수단으로 사용된다.
• Apps Script 배포 설정에서 실행 계정과 이용 가능 사용자를 선택해야 하며, 외부 데이터 접근에 필요한 권한 승인도 거친다.
• 코드를 수정해 저장해도 기존 공개 URL에 즉시 반영되지 않으므로, 테스트 배포로 확인한 뒤 새 버전을 배포해야 한다.
• 여행 가이드 예제는 여행지, 인원, 나이대, 여행 스타일, 기간과 예산을 받아 추천 결과를 만들고 시트에 저장한다.
• 음식 분석 예제는 음식 사진과 사용자 정보를 받아 영양 평가와 추천 사항을 만들며, 결과를 PDF로 내려받을 수 있다.
• 🎬 이 채널의 다른 영상:
  • NotebookLM에서 회사 템플릿형 슬라이드를 정확하게 만드는 방법은?
  • 엑셀 TRIMRANGE와 트리밍 참조로 동적 범위를 만드는 방법은?
  • 직장인은 AI 시대에 도메인·데이터 통합·책임감을 어떻게 준비해야 할까?
• 📺 이 채널: 오빠두엑셀 l 엑셀 강의 대표채널

Questions & Answers

Q: 구글 시트와 AI로 웹 앱을 만들려면 무엇을 준비해야 하나요?

Google 계정, 새 구글 시트, Google AI Studio에서 발급한 Gemini API 키, 코드 생성을 요청할 Claude가 필요합니다. 구글 시트에는 앱이 받을 입력값과 저장할 결과를 열 제목으로 구성하고, 시트 ID와 시트 이름도 Claude에 전달할 수 있도록 준비합니다.

Q: 구글 시트는 웹 앱에서 어떤 역할을 하나요?

구글 시트는 앱의 데이터 구조와 이용 기록을 보관하는 저장소 역할을 합니다. 여행 앱에서는 타임스탬프, 여행지, 인원수, 나이대, 여행 스타일, 여행 일수, 예산, 요청 내용과 AI 응답 상태 등을 열로 만들고, 앱 실행 결과가 해당 시트에 기록되도록 구성합니다.

Q: Claude에 어떤 프롬프트를 입력해야 앱 코드를 만들 수 있나요?

만들 앱의 목적, 핵심 기능, 사용자가 거치는 순서, 구글 시트의 필드 구성, 화면에 표시할 요소와 원하는 디자인을 구체적으로 입력해야 합니다. 이어서 Gemini API 키, 시트 ID, 시트 이름을 제공하면 Claude가 Code.gs와 index.html 형태의 코드를 작성하도록 요청할 수 있습니다.

Q: Code.gs와 index.html은 각각 무엇을 담당하나요?

Code.gs는 앱 뒤에서 실행되는 백엔드로서 요청 처리, Gemini API 연결, 구글 시트 저장 같은 기능을 담당합니다. index.html은 사용자가 보는 웹 화면으로서 입력 폼, 선택 항목, 실행 버튼, 진행 상태와 AI 분석 결과를 표시하는 인터페이스를 구성합니다.

Q: Claude가 만든 코드를 Google Apps Script에 어떻게 적용하나요?

구글 시트에서 확장 프로그램 메뉴의 Apps Script를 열고, 기존 Code.gs 내용을 생성된 Code.gs 코드로 교체합니다. 이어서 HTML 파일을 추가해 이름을 index로 지정하고, 생성된 index.html 코드를 붙여넣은 다음 프로젝트 이름을 정하고 저장하면 배포 준비가 끝납니다.

Q: Apps Script 웹 앱을 어떻게 배포하나요?

Apps Script 오른쪽 위의 배포 메뉴에서 새 배포를 선택하고 유형을 웹 앱으로 지정합니다. 설명, 실행 계정, 앱을 사용할 수 있는 사용자 범위를 설정한 뒤 배포하고, 계정을 선택해 요구되는 접근 권한을 승인하면 실행 가능한 웹 앱 URL이 생성됩니다.

Q: 앱을 수정한 뒤 변경 사항을 어떻게 확인하고 공개하나요?

수정된 Code.gs와 index.html을 Apps Script에 다시 붙여넣고 저장한 다음 테스트 배포 URL로 먼저 확인합니다. 강의에서는 공개 실행 링크는 exec로 끝나고 테스트 링크는 dev로 끝난다고 설명합니다. 검증이 끝나면 배포 관리에서 새 버전을 선택해 기존 웹 앱을 갱신합니다.

Q: 여행 가이드 앱은 어떤 정보를 받아 무엇을 생성하나요?

여행 가이드 앱은 여행할 나라나 도시, 인원수, 나이대, 여행 스타일, 여행 일수, 예산과 추가 요청을 입력받습니다. 사용자가 추천받기 버튼을 누르면 Gemini가 조건에 맞는 여행 계획을 생성하고, 요청 정보와 처리 결과는 연결된 구글 시트에 저장됩니다.

Q: 음식 분석 앱에서는 어떤 기능을 구현할 수 있나요?

음식 분석 앱은 사용자가 음식 사진과 성별, 나이대 같은 정보를 입력하면 Gemini를 통해 음식 종류와 칼로리, 탄수화물 등 영양 관련 결과를 분석하도록 구성됩니다. 분석 결과와 추천 사항을 화면에 표시하고, 강의 예제에서는 결과를 PDF로 내려받는 기능도 작동합니다.

Q: 완성한 웹 앱을 휴대폰 앱처럼 사용할 수 있나요?

완성된 웹 앱 URL을 휴대폰 브라우저에서 연 뒤 공유 메뉴의 홈 화면에 추가 기능을 사용하면 아이콘을 만들 수 있습니다. 이후 홈 화면의 아이콘을 눌러 식단 관리 앱과 같은 웹 앱을 실행할 수 있으며, 입력과 조회 기능도 모바일 화면에서 이용할 수 있습니다.

Summary & Key Takeaways

• 먼저 Google AI Studio에서 Gemini API 키를 발급받고, 사용할 Google 계정 하나만 로그인한다. 새 구글 시트를 만든 뒤 타임스탬프, 입력값, 요청 내용, AI 응답, 처리 상태처럼 앱에 필요한 필드를 열 단위로 구성하고 시트 이름과 문서 이름을 정한다.

• Claude에 앱의 목적, 주요 기능, 사용자 흐름, 시트 ID, 시트 이름, 필드 구조, 화면 구성, Gemini API 키와 원하는 디자인을 전달한다. 생성된 Code.gs는 서버 처리와 시트 저장을 담당하고, index.html은 입력 폼과 결과 화면 등 사용자 인터페이스를 구성한다.

• 생성된 파일을 구글 시트의 Apps Script에 옮긴 뒤 웹 앱으로 새 배포하고 접근 권한을 승인한다. 수정 사항은 개발용 URL로 시험한 다음 새 버전으로 다시 배포하며, 완성된 앱은 브라우저에서 실행하거나 모바일 홈 화면에 추가해 사용할 수 있다.