[AI] ChatGPT로 웹사이트 만들기 2편: Google Sheets 데이터 연결하기
ChatGPT로 웹사이트 만들기
1편에서는 예시 데이터를 사용해 업무 현황을 확인할 수 있는 화면을 만들었다.
실제로 이 화면을 사용하려면 Google Sheets에 업무가 추가되거나 상태가 변경됐을 때 웹사이트에도 같은 내용이 표시되어야 한다.
이미 Google Sheets에서 데이터를 관리하고 있다면 데이터를 다른 저장소로 옮기는 것보다 기존 시트를 그대로 사용하는 편이 간단하다.
이번에는 Google Apps Script를 사용해 Google Sheets의 데이터를 Sites에서 만든 화면에 연결해보려고 한다.
Google Sheets 연결 구조
Sites에서 만든 웹사이트가 Google Sheets 문서를 직접 읽도록 구성하면 시트 권한을 처리하기 어렵고 화면에서 사용하지 않는 열까지 노출될 수 있다.
이때 Apps Script를 중간에 두고 필요한 데이터만 전달하도록 구성할 수 있다.
Google Sheets
→ Apps Script 웹 앱
→ Sites 웹사이트
Apps Script는 Google Sheets의 행을 읽어 JSON 형태로 반환한다. Sites에서 만든 웹사이트는 Apps Script 주소를 호출하고 전달받은 데이터로 숫자, 차트와 업무 목록을 표시한다.
시트 데이터 정리
Apps Script를 만들기 전에 Google Sheets의 구조를 먼저 정리한다.
예시로 사용할 업무 현황 시트는 다음과 같이 구성할 수 있다.
업무명 | 담당자 | 구분 | 상태 | 기준일
첫 번째 행에는 열 이름을 작성하고 그 아래부터 실제 데이터를 입력한다.
표 안에 병합된 셀이 있거나 중간에 빈 행이 많으면 프로그램이 데이터를 읽을 때 일부 값이 비어 있는 것으로 처리될 수 있다.
상태 값도 완료, 완료됨, 처리완료처럼 서로 다르게 입력하면 각각 다른 상태로 집계된다. 그렇기 때문에 차트나 집계에 사용하는 값은 드롭다운을 사용해 입력값을 통일하는 것이 좋다.
연락처나 내부 메모처럼 사이트에서 사용하지 않을 데이터가 있다면 Apps Script 응답에서 제외해야 한다.
Apps Script 웹 앱 만들기
Google Sheets에서 확장 프로그램 > Apps Script를 선택하면 현재 시트와 연결된 Apps Script 프로젝트를 만들 수 있다.
코드를 직접 작성하기 어렵다면 시트의 열과 필요한 응답 형식을 ChatGPT에 전달해 코드를 생성할 수 있다.
Google Sheets 데이터를 조회하는 Apps Script 웹 앱을 만들어줘.
시트 이름은 업무현황이야.
첫 번째 행에는 업무명, 담당자, 구분, 상태, 기준일이 있어.
값이 없는 행은 제외하고
업무명, 담당자, 구분, 상태, 기준일만 JSON으로 반환해줘.
날짜는 YYYY-MM-DD 형식으로 변환해줘.
오류가 발생하면 오류 내용을 확인할 수 있게 만들어줘.
생성된 코드를 Apps Script에 추가하고 웹 앱으로 배포하면 /exec로 끝나는 조회 주소가 생성된다.
이 주소를 브라우저에서 열었을 때 시트의 데이터가 JSON 형태로 나오면 정상적으로 연결된 것이다.
이때 시트의 모든 열이 아니라 사이트에서 사용할 열만 반환되는지도 확인한다.
Sites 화면에 연결하기
Apps Script 주소가 만들어지면 Sites에 해당 데이터를 기존 업무 현황 화면과 연결하도록 요청한다.
아래 Apps Script 웹 앱 주소의 데이터를
기존 업무 현황 화면에 연결해줘.
Apps Script URL:
https://script.google.com/macros/s/.../exec
업무명, 담당자와 상태는 하단 업무 목록에 표시해줘.
상태 값은 전체 업무 수와 상태별 차트를 계산하는 데 사용해줘.
담당자는 담당자별 업무량 차트에 사용해줘.
데이터를 불러오는 동안에는 로딩 화면을 보여주고
오류가 발생하면 다시 시도할 수 있는 버튼을 만들어줘.
데이터가 없을 때는 업무가 없다는 안내 문구를 표시해줘.
조회 주소만 전달하면 각 열을 화면의 어디에 사용할지 Sites가 직접 판단해야 한다.
그렇기 때문에 상태는 차트에 사용, 담당자는 담당자별 업무량에 사용처럼 시트의 열과 화면 구성의 관계를 같이 설명하는 것이 좋다.
데이터 확인
연결이 끝나면 화면 모양보다 숫자가 정확한지 먼저 확인한다.
예를 들어 Google Sheets에 업무가 20개 있다면 화면의 전체 업무 수도 20개가 나와야 한다. 상태별 업무 수를 모두 더한 값도 전체 업무 수와 같아야 한다.
숫자가 맞지 않는다면 다음 항목을 확인한다.
- 중간에 빈 행이 있는지
- 상태 이름이 서로 다르게 입력됐는지
- 셀 값 끝에 공백이 들어갔는지
- Apps Script에서 일부 행을 제외하고 있는지
- 사이트에서 별도의 필터를 적용하고 있는지
시트의 업무 상태를 하나 변경한 다음 웹사이트를 새로고침해 같은 값으로 변경되는지도 확인한다.
데이터 공개 범위
Sites의 공개 범위와 Apps Script의 공개 범위는 서로 다른 설정이다.
Sites를 특정 사용자에게만 공유하더라도 Apps Script 웹 앱이 공개 상태라면 조회 주소를 알고 있는 사용자는 데이터를 직접 확인할 수 있다.
그렇기 때문에 공개 웹 앱을 사용할 때는 화면에서 사용하지 않는 데이터를 처음부터 응답에 포함하지 않는 것이 중요하다.
화면에서 연락처 열을 숨기더라도 Apps Script가 해당 값을 전달했다면 브라우저에는 이미 데이터가 도착한 상태다. 공개하면 안 되는 값은 화면에서 숨기는 것이 아니라 Apps Script가 JSON을 만들 때 제외해야 한다.
로그인이나 별도의 권한 검사가 필요한 민감한 데이터라면 공개 Apps Script 웹 앱보다 인증 기능이 있는 별도 API를 사용하는 것이 적합하다.
마무리
Google Sheets와 Apps Script를 사용하면 기존 시트를 데이터 입력 화면으로 유지하면서 Sites에서 만든 웹사이트를 조회 화면으로 사용할 수 있다.
이 구성에서 중요한 부분은 단순히 데이터를 연결하는 것이 아니라 어떤 열을 외부에 전달할지 정하고 연결된 숫자가 실제 시트와 같은지 확인하는 것이다.
Google Sheets의 구조를 단순하게 유지하고 필요한 데이터만 Apps Script로 전달하면 업무 현황뿐만 아니라 출석부, 예약 현황이나 재고 목록 같은 화면에도 같은 방식을 활용할 수 있다.
이전 글: 1편. 화면 만들기
Leave a comment