반응형

이번 글에서는 ChatGPT와 함께 고민하고 만들었던 무료 조회 시스템 구축 방법을 공유해보려고 합니다. 별도의 서버나 데이터베이스 없이, 단지 구글스프레드시트와 Google Apps Script, 그리고 간단한 HTML 폼만으로도 꽤 쓸만한 조회 시스템을 만들 수 있다는 사실, 알고 계셨나요?

사실 이 시스템을 만들게 된 계기는 조금 현실적인 이유 때문이었습니다. 어느 날 갑자기 집합건물의 관리인을 맡게 되었고, 관리비 고지서를 소유주분들에게 전달하는 과정에서 불편함을 느끼게 되었죠. 대부분은 XPERP 시스템을 통해 카카오톡으로 관리비를 받으시는데, "카톡이 안 왔다"거나 "해외라서 열리지 않는다"는 민원이 종종 발생했습니다.

게다가 호실이 여러 개인 분들은 하나씩 따로 확인해야 하는 번거로움도 있었고요. 그래서 "이걸 좀 더 편리하게, 한 번에 확인할 수 있는 시스템은 없을까?" 하는 생각이 들었고, 그렇게 이 시스템을 만들기 시작하게 되었습니다.

 

그리고 그 모든 과정에서 ChatGPT가 정말 큰 도움이 되었어요. 참고로, 저는 이 시스템을 만들 때 **ChatGPT(GPT-4o 유료 플랜)**을 사용했어요. 저는 원래부터 유료 사용자였고, 무료 버전(GPT-3.5)은 실제로 사용해본 적이 없어서 어떤 수준까지 가능한지는 잘 모르겠어요. 그 동안의 사용과정을 보고 다른분들의 의견도 들어보면 GPT-4o는 복잡한 로직이나 예제 코드 생성에 있어서 정밀하고 안정적인 답변을 주는 점에서 큰 도움이 되었던 건 분명합니다. 추후 별도로 소스코드를 정리한 글을 공개할 예정인데, 무료 버전(GPT-3.5) 사용자분들은 그 코드와 비교해보며 어떤 차이가 있는지도 직접 느껴보시면 좋을 것 같아요.

1. 전체 시스템 흐름

가장 기본적인 흐름은 아래와 같습니다:

[HTML 입력폼] → [Apps Script 처리] → [구글 시트에서 검색] → [결과 출력]

복잡할 것 같지만, 막상 해보면 의외로 단순한 구조입니다. 핵심은 입력값을 스크립트가 받아서 스프레드시트에 있는 데이터를 조회하고, 일치하는 정보를 찾아서 사용자에게 보여주는 거예요.

2. 구글 시트를 데이터베이스처럼 구성하기

데이터는 구글 시트에서 관리합니다. 아주 단순하게 다음과 같이 구성하면 됩니다:

코드 제품명 가격
12345 A제품 10,000원
23456 B제품 12,000원

※ 첫 번째 행은 꼭 컬럼명(제목)이어야 합니다. 그래야 Apps Script로 불러올 때도 일관성이 생깁니다.

3. HTML 입력 폼 만들기

이번 시스템을 구축하면서 저는 HTML 파일을 어디에 올릴까 고민했는데요, 저는 마침 시놀로지 NAS를 사용 중이어서 자체 호스팅을 통해 HTML 파일을 올릴 수 있었습니다. 덕분에 쉽게 테스트하고 운영도 편하게 할 수 있었죠.

 

하지만 이 작업을 하면서 가장 불편했던 부분은 바로 Apps Script에서 새로 배포할 때마다 HTML 코드 안에 있는 스크립트 링크도 매번 수정해줘야 한다는 점이었어요. 이게 생각보다 굉장히 반복적인 노가다였습니다. 특히 테스트 중간중간 배포 URL이 계속 바뀌면 HTML 파일도 계속 수정해야 하니까, 귀찮기도 하고 실수할 가능성도 생기더라고요.

 

그래서 가능하다면 배포 URL이 자주 바뀌지 않도록 주의하고, HTML 코드 안에 스크립트 링크를 자동으로 업데이트할 수 있는 방법도 고민해볼 필요가 있겠다는 생각이 들었습니다.

 

그리고 만약 NAS 같은 장비가 없다면 걱정할 필요는 없습니다. HTML 파일을 업로드할 수 있는 무료 홈페이지 서비스를 활용하면 누구나 쉽게 웹페이지처럼 운영할 수 있어요. 예를 들어:

어떤 방식이든 HTML 폼이 동작하고 Apps Script에 입력값을 전달할 수 있으면 OK입니다. 이제 사용자가 정보를 입력할 수 있도록 HTML 폼을 만들어야겠죠. 아주 기본적인 형태는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>제품 코드 조회</title>
</head>
<body>
  <h2>제품 코드 조회</h2>
  <form action="https://script.google.com/macros/s/스크립트ID/exec" method="GET">
    <label for="code">제품 코드 입력:</label>
    <input type="text" id="code" name="code" required>
    <button type="submit">조회</button>
  </form>
</body>
</html>

※ 스크립트ID는 Apps Script에서 배포한 URL로 바꿔야 합니다.

4. Apps Script 처리 코드 작성하기

다음은 입력받은 코드값을 받아서 스프레드시트에서 검색하는 로직입니다:

function doGet(e) {
  var code = e.parameter.code;
  var sheet = SpreadsheetApp.openById("시트ID").getSheetByName("DB");
  var data = sheet.getDataRange().getValues();
 
  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == code) {
      var html = "<h3>검색 결과</h3><p>제품명: " + data[i][1] + "</p><p>가격: " + data[i][2] + "</p>";
      return HtmlService.createHtmlOutput(html);
    }
  }
  return HtmlService.createHtmlOutput("<p>해당 코드가 없습니다.</p>");
}

여기서 시트ID와 DB는 여러분이 만든 스프레드시트의 ID와 시트 이름으로 바꿔주시면 됩니다.

 

사용 과정중에 모르는 부분은 바로 물어보시면 Chat GPT가 바로바로 알려줍니다. (아래 스크린샷 처럼요)

5. 결과 출력 – Apps Script 화면에서 HTML로 보기 좋게 만들기

Apps Script에서 반환하는 결과는 HTML 형태로 구성되기 때문에, 사용자는 Apps Script에서 웹 앱으로 배포된 화면에서 직접 결과를 확인할 수 있습니다. 원하는 디자인을 입히는 것도 가능하죠. CSS로 꾸미면 더 보기 좋습니다.

6. Apps Script 배포 링크 관리의 불편함

이번 시스템을 만들면서 개인적으로 가장 불편했던 점이 하나 있었습니다. 바로 Apps Script를 배포할 때마다 링크가 새로 생성되기 때문에 HTML 코드 안의 URL을 매번 바꿔줘야 한다는 점이었어요.

 

테스트를 하거나 수정 사항을 반영하면서 스크립트를 재배포하면, 그때마다 HTML 코드 안의 action URL을 다시 수정해야 했습니다. 이 작업이 반복되다 보니 정말 노가다처럼 느껴지더라고요. 특히 여러 장치에 HTML을 배포해 두었을 경우, 모든 위치에서 일일이 URL을 바꾸는 것도 꽤 번거롭고 실수하기 쉬웠습니다.

 

사실 이 부분은 현실적으로 피하기 어려운 부분입니다. 특히 ChatGPT와 함께 만들다 보면 계속 테스트하고 수정하면서 Apps Script도 자주 배포하게 되는데, 그때마다 URL이 새로 생기기 때문에 이 작업은 반복될 수밖에 없습니다. 그래서 이런 시스템을 도입하려는 분들은 어느 정도 이 과정을 감수해야 한다는 점도 미리 알고 계시면 좋을 것 같습니다.

7. 왜 이 방식이 좋은가?

  • 완전 무료로 구현 가능 (구글 계정만 있으면 OK)
  • 설치나 서버 세팅 없이도 동작
  • 확장성 있음 – 조건검색, 추가 컬럼, 자동화 등 모두 구현 가능
  • 누구나 따라할 수 있음 – 복잡한 코딩 없이 웹사이트처럼 동작하는 시스템 구축

8. 마무리하며 – ChatGPT의 큰 도움

사실 저는 야간대학교를 다니면서 과제나 업무에서 엑셀을 자주 다뤘고, HTML 기초 구문 정도는 익숙하다고 생각했었어요. 그래서 처음에는 이 시스템도 쉽게 만들 수 있겠지 했지만, 막상 해보니 Apps Script는 HTML과는 완전히 다른 차원의 언어더라고요. 진짜 ChatGPT가 없었으면 관련 문법부터 하나하나 공부했어야 하고, 몇 날 며칠을 붙잡고 있어야 했을 겁니다.

 

그런데 ChatGPT 덕분에 이 복잡한 시스템을 단 3시간 만에 만들어냈다는 건 정말 경이로운 경험이었어요. 특히 Apps Script 문법이나 예제 코드 작성, 흐름 정리 등에서 큰 도움이 되었고, 초보자에게는 진짜 든든한 조력자가 되어줍니다.

그래서 저는 지금도 GPT-4o 유료 결제에 전혀 아깝다는 생각이 들지 않습니다. 혹시 지금 이 글을 보고 “나도 만들어보고 싶다!” 하신다면, 정말 추천드려요.

 

누구나 ChatGPT와 함께라면 이런 자동화 시스템도 어렵지 않게 만들 수 있습니다. 😊

 

id 그리고 이 글에서 설명한 시스템의 핵심 코드를 정리한 글도 곧 별도로 공개할 예정입니다. 특히 이 코드는 **ChatGPT(GPT-4o 유료 플랜)**을 통해 완성한 내용이라, **무료 버전(GPT-3.5)**을 사용 중이신 분들은 참고삼아 어떤 부분이 다르게 생성되는지도 비교해보시면 좋을 것 같아요.

 

9. 소스코드 공개한 게시글 링크

https://www.earthhero.me/140

 

Chat GPT가 만들어준 조회시스템 HTML 코드공개

https://www.earthhero.me/139 ChatGPT와 함께한 무료 조회 시스템 만들기 – HTML과 구글시트(Google Sheets) + 구글앱스스크립트(Google이번 글에서는 ChatGPT와 함께 고민하고 만들었던 무료 조회 시스템 구축 방

www.earthhero.me

https://www.earthhero.me/141

 

Chat GPT가 만들어준 조회시스템 App Script 코드공개

https://www.earthhero.me/139 ChatGPT와 함께한 무료 조회 시스템 만들기 – HTML과 구글시트(Google Sheets) + 구글앱스스크립트(Google이번 글에서는 ChatGPT와 함께 고민하고 만들었던 무료 조회 시스템 구축 방

www.earthhero.me

 

반응형
저작자표시 비영리 변경금지

'Software' 카테고리의 다른 글

맥북 스크린샷 기본 단축키 완벽 정리! (간단하고 빠르게 저장하는 법)  (0) 2025.04.05
포터블 OTT 플레이어(OTTP) 유튜브, 티빙 통합 + PIP 기능까지  (4) 2025.03.31
ChatGPT 사용법 & 활용법 – 초보자를 위한 완벽 가이드 (2025)  (1) 2025.03.05
디아블로2 아이템 옵션 영어로 어떻게 검색할까?  (0) 2023.01.23
KT WAVE2 공유기 초기화 하는 방법  (0) 2022.11.10

다른 글

다른 글 더 둘러보기

티스토리툴바