무료 Gemini로 구글 시트 재고 관리 대시보드 만드는 법
구글 시트와 무료 Gemini를 활용해 재고 관리 웹 대시보드를 만들고, OCR 영수증 촬영으로 입고를 자동 등록하는 전 과정을 정리합니다.
이 강의에서는 구글 시트와 무료 Gemini를 활용해 실시간 재고 관리 대시보드를 웹 앱으로 배포하는 방법을 다룹니다. 데이터 스키마를 자동 분석하는 방법부터 구글 앱스 스크립트로 코드를 옮겨 대시보드를 배포하고, 영수증을 촬영하면 품목과 수량이 자동으로 인식되어 구글 시트에 입고가 등록되는 폼까지 구성하는 전 과정을 단계별로 알아봅니다.
실습자료를 준비했어요
수업에서 사용한 예제 파일과 보충 자료를 한 곳에 정리했습니다!👇
목차 보기
구글 시트 데이터 스키마를 Gemini로 자동 정리하기
대시보드를 만들 때 AI가 내 데이터 구조를 정확히 파악하도록 하려면, 사용 중인 시트의 구조를 먼저 전달해야 합니다. 예전에는 데이터 일부를 직접 복사해 프롬프트에 붙여넣었지만, 전체 데이터를 대변하지 못하는 문제가 있었습니다. 구글 시트 오른쪽 위에 있는 Gemini 버튼을 사용하면, 시트 전체를 분석해 데이터 구조 표를 자동으로 만들어 줍니다.
- 노션 가이드북에 정리해드린 데이터 구조 정리 프롬프트를 복사합니다.
- 크롬 브라우저 오른쪽 위에 있는 Gemini에게 물어보기 버튼을 클릭해 Gemini 창을 엽니다. 복사한 프롬프트를 붙여넣고 실행하면, 입출고 시트와 품목 시트의 데이터 구조가 표로 정리됩니다.
오빠두Tip : Gemini Plus 유료 플랜 사용자 또는 실험적 기능 참여자는 구글 시트 안의 Gemini를 사용할 수 있습니다. - 입출고 시트 결과와 품목 시트 결과를 각각 복사해 메모장에 붙여넣어 보관합니다.
이렇게 하면 매번 시트 데이터를 복사해 붙여넣는 번거로움 없이, AI가 자동으로 분석한 구조 표 하나로 다양한 대시보드를 만들 수 있습니다.
재고 관리 웹 대시보드 만들기
데이터 구조 정리표가 준비됐으면, 이제 Gemini로 실제 대시보드 코드를 만들 차례입니다. 무료 버전 Gemini에서도 코드를 생성할 수 있으니, 아래 절차에 따라 나만의 멋진 대시보드를 만들어보시길 바랍니다.
- 노션 보너스 자료의 대시보드 만들기 프롬프트를 복사해 메모장에 붙여넣습니다. 대시보드 제목과 앞서 만든 데이터 구조표를 프롬프트 안 지정된 위치에 채워 넣습니다.
- 이후 노션 가이드북에 남겨드린 스타일 가이드 링크에서 원하는 브랜드의 시스템 가이드 다운로드 버튼을 클릭해 스타일 파일을 받습니다.
- gemini.google.com에 접속해 완성된 프롬프트를 붙여넣고, 스타일 가이드 파일을 드래그해 함께 첨부합니다.
- Gemini가 설계 요약과 함께 Code.gs와 Index.html 두 파일의 코드를 생성합니다.
· Code.gs : 서버에서 데이터를 처리할 때 필요한 코드입니다.
· Index.html : 사용자가 브라우저에서 보는 화면을 생성하는 코드입니다.
- 구글 시트로 돌아와 확장 프로그램 → Apps Script를 클릭합니다.
오빠두Tip : Gemini 편집창과 Apps Script 탭을 나란히 열어두면 작업이 편리합니다. Alt + Shift + N 단축키로 탭을 분리할 수 있습니다. - Code.gs 코드를 복사해 기존 코드를 지운 뒤 붙여넣습니다.
- 그다음 더하기 버튼을 클릭해 HTML 파일을 추가하고, 파일 이름을 Index(I는 대문자)로 지정한 뒤 Index.html 코드를 붙여넣습니다.
- 저장(Ctrl+S) 후 Code.gs에서 실행 버튼을 클릭합니다. 처음 실행 시 권한 검토 창이 나타나면 고급 → 제목 없는 프로젝트로 이동을 클릭해 권한을 허용합니다. 실행 완료 메시지가 나오면 코드가 정상입니다.
- 오른쪽 위 배포 → 새 배포를 클릭합니다. 톱니바퀴 아이콘에서 웹 앱을 선택하고, 액세스 권한을 모든 사용자로 바꿔 링크만 있으면 누구나 볼 수 있도록 설정한 뒤 배포합니다.
- 완성된 웹 앱 URL을 복사해 새 탭에서 열면 대시보드가 표시됩니다.
히어로 영역과 입고 버튼으로 대시보드 개선하기
기본 대시보드가 완성됐으면, 히어로 영역 영상과 입고 등록 버튼을 추가해 실제 홈페이지처럼 보이도록 개선합니다. 모바일 반응형도 함께 적용합니다.
- Imgur에 매장 영상을 업로드합니다.
- 업로드 후 ... 버튼 → Get Share Links를 클릭하면 외부 공유용 MP4 링크가 생성됩니다. 이 링크를 복사해 둡니다.
- 노션 보너스 자료의 세 번째 프롬프트를 복사해 메모장에 붙여넣습니다. 대괄호로 표시된 MP4 링크 입력 자리에 방금 복사한 링크를 넣습니다.
오빠두Tip : 복사한 주소에서 "[img]"와 "[/img]" 태그는 지우고 https로 된 실제 URL 주소만 복사합니다. - 완성된 프롬프트를 기존 Gemini 채팅창에 붙여넣고 실행합니다. 이전 대화를 기억하고 있기 때문에 기존 대시보드를 기반으로 수정된 코드를 만들어 줍니다.
- 완성된 Index.html 코드를 복사해 Apps Script의 기존 Index.html 코드를 지우고 붙여넣습니다. 저장 후 배포 → 배포 관리로 이동합니다.
- 연필 아이콘을 클릭해 새로운 버전으로 바꾼 뒤 재배포합니다.
- 대시보드를 다시 실행하면 히어로 섹션과 입고 버튼이 깔끔하게 추가된 것을 확인할 수 있습니다.
영수증 촬영으로 입고를 자동 등록하는 폼 만들기
거래처에서 물건을 받을 때마다 수동으로 입력하는 대신, 영수증 사진을 찍으면 AI가 자동으로 분석해 구글 시트에 입고를 등록하는 폼을 만듭니다. 이 폼은 대시보드와 별도의 앱스 스크립트 프로젝트로 구성합니다.
- 영수증 이미지를 인식하려면 AI API가 필요합니다. 보너스 자료의 링크를 통해 구글 AI 스튜디오에 접속해 대시보드 → API 키 만들기를 클릭합니다. 구글은 하루 사용량이 제한되지만 무료 API 키를 제공합니다.
오빠두Tip : API 키는 보안 키입니다. 무료 티어에서는 큰 문제가 없지만, 이후 유료 결제 수단을 연결했을 때 키가 유출되면 본인 계정으로 결제가 발생할 수 있으므로 안전하게 보관하세요. - 생성된 API 키를 복사해 메모장에 보관합니다. 보너스 자료의 네 번째 자동 등록 폼 만들기 프롬프트를 복사해 메모장에 붙여넣고, Gemini 키 입력 자리와 데이터 구조 정리표 자리를 각각 채워 넣습니다.
- 기존 대화가 길어졌기 때문에 새 채팅을 열고 프롬프트를 붙여넣어 실행합니다. 모델은 Pro로 선택합니다.
오빠두Tip : 이 채팅에서 만드는 입고 등록 폼은 대시보드와 별개의 독립된 기능이므로 새 채팅에서 진행해도 무방합니다. - 생성된 Code.gs와 Index.html 코드가 모두 생성되었으면, Apps Script 메인 페이지로 이동해 새 프로젝트를 추가합니다.
- 프로젝트 이름을 입고 등록 폼임을 알 수 있도록 바꿔줍니다.
- 새 프로젝트에 Code.gs 코드를 복사해 기존 코드를 지우고 붙여넣습니다. 더하기 버튼으로 HTML 파일을 추가하고 이름을 Index(I는 대문자)로 지정한 뒤 Index.html 코드를 붙여넣습니다.
- Code.gs 맨 위에서 시트 ID 입력 자리를 찾아, 구글 시트 URL의 /d/와 /edit 사이에 있는 값으로 교체합니다. 저장 후 실행 버튼을 클릭해 권한을 허용합니다.
- 배포 → 새 배포에서 웹 앱을 선택합니다. 입고 등록 폼은 관리자만 접근해야 하므로 액세스 권한을 나만으로 설정하고 배포합니다. 배포 URL을 복사해 새 탭에서 열면 영수증을 업로드하는 창이 표시됩니다.
- 파일 선택 버튼을 클릭해 영수증을 촬영하거나 파일을 선택한 뒤 사용을 클릭합니다. AI가 분석해 품목과 수량을 정리하면 저장 버튼을 클릭해 구글 시트에 입고를 등록합니다. 대시보드로 돌아오면 재고주의 품목 표시가 업데이트되는 것을 확인할 수 있습니다.
더 자세한 내용은 영상 강의를 참고하세요
이 강의에서는 무료 Gemini와 구글 앱스 스크립트를 활용해 재고 관리 대시보드를 웹 앱으로 배포하고, 영수증 OCR 입고 등록 폼까지 연동하는 전 과정을 다뤘습니다. 각 단계의 실제 화면 흐름과 세부 코드 조작은 영상 강의에서 확인할 수 있습니다. 보너스 자료에는 각 단계에서 사용하는 프롬프트와 스타일 가이드 링크가 정리되어 있으니 함께 활용해보세요!
