구글 시트와 제미나이로 실시간 재고 관리 대시보드 구축: 자동화 및 웹 앱 배포

이 기능을 통해 대시보드의 재고 주의 품목을 클릭 한 번으로 업데이트할 수 있습니다. 예를 들어, 촬영 후 사용 버튼을 클릭하면 대시보드가 실시간으로 업데이트되어 재고 주의 품목이 사라지는 것을 확인할 수 있습니다.

이전에 클라우드 플레어를 이용해 엑셀 대시보드를 웹으로 배포하는 강의가 많은 호응을 얻었습니다. 해당 강의 후, 많은 시청자들이 회사에서 구글 시트를 사용하고 있는데 구글 시트로도 유사한 기능 구현이 가능한지 문의했습니다. 이에 따라 무료 사용자들도 실시간으로 재고 관리를 편리하게 할 수 있는 구글 시트 대시보드를 함께 만들어보는 강의를 진행하게 되었습니다.

이를 위해 노션에 있는 첫 번째 데이터 구조 프롬프트를 복사하여 제미나이에 붙여 넣고 플래시 모델로 빠르게 실행하면, 입출고 시트와 품목 시트의 데이터를 분석해 데이터 구조표를 생성합니다.

이 방식은 매우 편리한데, 평소 AI를 사용하여 대시보드를 만들 때 AI가 데이터 구조를 알지 못해 매번 복사 붙여 넣기 해야 하는 번거로움을 덜어줍니다. 이제 브라우저 내 제미나이나 유료 버전 제미나이를 통해 구조화된 표를 손쉽게 만들 수 있습니다.

복사한 프롬프트를 바로 제미나이 입력창에 붙여 넣기 하면 편집이 어려울 수 있으므로, 먼저 메모장에 붙여 넣고 편집하는 것이 좋습니다. 이 과정을 통해 효율적으로 프롬프트를 수정할 수 있습니다.

여기에서 '다크 모드' 테마를 선택하고, '닌텐도' 스타일의 시스템 가이드를 다운로드하여 적용합니다. 이 가이드에는 닌텐도가 사용하는 색상, 공조색, 폰트 등이 정리된 프롬프트가 포함되어 있어, 이를 통해 원하는 브랜드의 스타일을 대시보드에 적용할 수 있습니다.

준비가 완료된 완성 프롬프트를 복사하여 제미나이 입력창에 붙여 넣습니다. 이어서 앞서 다운로드한 스타일 가이드 파일을 드래그하여 제미나이에 추가합니다. 모든 설정이 완료되면 프롬프트를 실행하여 대시보드 코드 생성을 시작합니다.

대시보드를 꼼꼼하게 만들려면 제미나이의 프로 버전을 사용하는 것이 좋습니다. 무료 사용자도 프로 버전의 채팅 기능을 하루에 몇 번 무료로 사용할 수 있으므로, 이 기능을 활용하여 대시보드를 구축할 수 있습니다. 제미나이 AI는 데이터를 정리하고 설계 요약을 거쳐 대시보드 제작에 필요한 코드까지 자동으로 생성해줍니다.

생성된 코드를 여러 번 수정해야 하므로, 제미나이 편집 창과 앱스 스크립트 창을 나누어 편리하게 작업하는 환경을 설정합니다.

먼저, '코드.gs' 파일을 복사하여 앱스 스크립트에 있는 기존 코드를 삭제하고 붙여 넣습니다. 다음으로 더하기 버튼을 클릭하여 HTML 페이지를 새로 생성합니다. 이때 파일 이름은 'Index.html'로 하되, 'I'는 대문자로 입력해야 합니다. 이 과정을 통해 대시보드 구현에 필요한 두 가지 핵심 코드를 앱스 스크립트에 등록합니다.

코드.gs 파일에서 오른쪽 위에 있는 '실행' 버튼을 클릭합니다. '권한 검토' 메시지가 나타나면 이를 클릭하고, 직접 만든 앱이므로 이상이 없다는 것을 확인합니다. '고급' 버튼을 클릭한 후 '제목 없는 프로젝트로 이동'을 선택하고 '계속' 버튼을 클릭하여 내 권한을 승인합니다. 이 과정을 통해 앱이 정상적으로 작동할 수 있도록 권한을 부여합니다.

오른쪽 위의 '배포' 버튼을 클릭하고 '새 배포'를 선택하여 새로운 웹 앱 배포를 생성합니다. 배포 형식은 '웹 앱'으로 설정하고, 설명에는 '두드림 카페 재고 관리 대시보드'와 같이 프로젝트 내용을 기재합니다. 액세스 권한은 '모든 사용자'로 변경하여 링크만 있으면 누구나 대시보드를 볼 수 있도록 설정한 뒤, '배포' 버튼을 클릭합니다. 이 과정을 통해 대시보드 웹 앱이 생성되고 고유 링크가 발급됩니다.

배포가 성공적으로 완료되면 하단에 웹 앱 링크가 생성됩니다. 이 링크를 복사하여 새로운 탭에 붙여 넣고 실행하면, 깔끔하게 완성된 대시보드를 확인할 수 있습니다. 이 대시보드는 필터링, 구분 표시, 날짜별 조회(이번 달, 7일, 30일) 등 다양한 기능을 무료 버전에서 제공하며, 데이터를 관리하고 웹 앱으로 배포까지 할 수 있습니다.

현재 대시보드는 모바일 뷰가 최적화되어 있지 않아 개선이 필요합니다. 따라서 모바일 반응형 디자인을 적용하여 보기에 좋게 수정할 계획입니다. 또한, 대시보드 상단에는 실제 홈페이지처럼 멋진 영상이 재생되는 히어로 섹션을 추가하고, 영수증 사진을 찍으면 재고를 자동으로 인식하여 등록하는 '입고 등록' 버튼도 만들 예정입니다. 이로써 사용자 편의성을 더욱 높일 것입니다.

업로드된 영상에서 점 세 개 버튼을 클릭하고 'Get shared links'를 선택하면 BB 코드를 얻을 수 있습니다. 이 BB 코드를 복사하면 MP4 링크가 만들어지는데, 이는 대시보드 상단에 영상을 넣기 위해 웹에서 재생 가능한 MP4 링크가 필요하기 때문입니다. 이렇게 생성된 링크를 활용하여 웹 대시보드에 영상을 삽입할 수 있습니다.

현재 대시보드에서는 재고주의 품목이 안전 재고보다 부족한 수량임을 알 수 있지만, 구체적으로 어떤 품목인지 바로 확인할 수 없어 불편함이 있습니다. 이에 재고주의 품목을 클릭하면 해당 품목과 사용량을 볼 수 있는 기능을 추가해달라고 제미나이에 요청합니다. 이러한 요청을 입력하고 실행하면, AI가 이를 해석하여 필요한 기능을 대시보드에 구현해 줄 것입니다.

제미나이를 통해 인덱스 페이지에 재고주의 품목 확인 기능이 추가되면, 변경된 코드를 복사하여 저장하고 새로운 버전으로 다시 배포합니다. 배포 관리에서 '부족 재고 확인 기능 추가'라고 설명을 넣어준 뒤 배포를 완료합니다. 이렇게 업데이트된 URL에 접속하면, 대시보드에서 버튼을 클릭하여 부족한 재고 품목(예: 녹차 파우더, 크루아상 생지, 컵홀더 종발대)을 즉시 확인할 수 있습니다. 이 기능은 재고 부족으로 인한 영업 차질을 방지하는 데 큰 도움이 됩니다.

AI 모델을 구글 시트와 연동하기 위해서는 API 키가 필요합니다. 구글은 하루에 제한적이지만 일정 부분 무료로 사용할 수 있는 API 키를 제공합니다. Google AI Studio 웹사이트에 접속하여 대시보드에서 API 키를 발급받을 수 있습니다. 기존 키가 있는 경우 확인할 수 있으며, 없는 경우 'API 키 만들기' 버튼을 클릭하여 새로운 키를 생성합니다. 이 API 키는 보안 키이므로, 나중에 유료 버전을 사용할 경우 키 유출 시 결제 수단이 오용될 수 있으니 주의하여 잘 보관해야 합니다. 생성된 키는 복사하여 메모장 등에 보관합니다.

새로 만든 입고 등록 웹 앱을 배포합니다. '배포'를 클릭하고 '새 배포'를 선택하여 웹 앱 형식으로 진행합니다. 설명에는 '두드림 카페 입고 등록 버전 1.0'이라고 기재합니다. 이때 중요한 점은 입고 등록 기능은 관리자 본인만 사용해야 하므로, 액세스 권한 사용자를 '나만'으로 설정해야 합니다. 앞서 만든 대시보드는 누구나 볼 수 있었지만, 입고 등록은 보안상 본인만 접근 가능하도록 설정한 후 '배포' 버튼을 클릭합니다. 배포가 완료되면 생성된 URL을 복사하여 확인할 수 있습니다.

현재 제작 중인 재고 등록 서식은 재고 관리 대시보드와는 별개의 기능이므로 새로운 채팅 세션을 시작해도 무방합니다. 새 채팅을 연 후, 모델은 '프로'로 선택하고 실행합니다. 이렇게 하면 입고를 등록하는 데 필요한 코드까지 제미나이가 자동으로 생성해 줄 것입니다. 이 코드를 활용하여 입고 등록 웹 앱을 완성할 수 있습니다.