[Git-Page] 6. 깃페이지에서 서버 없이 실시간 방명록 데이터베이스 구현하기!!! 구글 스프레드시트와 Apps 스크립트를 데이터베이스로 활용하여 정적 웹 사이트에 백엔드 연동하기, 비용제로 실시간 동기화 개발기

제 포스팅은 AI가 작성한게 아닌 한글자 한글자 타자를 쳐서 작성한 포스팅입니다. 구독 좋아요 댓글은 힘이됩니다.

안녕하세요~~~!!! 

이번에 포스팅을 할 주제는!

별도의 데이터베이스 서버나 유료 백엔드 인프라를 전혀 쓰지 않고, 구글 스프레드시트와 앱스 스크립트만을 활용하여 깃허브 페이지에 실시간 방명록 저장 시스템을 이식한 개발 노하우를 공유합니다!!!!!!

먼저 한번 제 깃페이지에 접속하셔서 구경해보시는걸 추천드립니다.!!!!

https://uno-km.github.io/uno-km/

AMEVA Neural Fabric — Edge-Native AI Dashboard

코어 아키텍처

구글 스프레드시트 기반의 백엔드 데이터베이스 대체

데이터베이스 관리 시스템을 따로 개설하지 않고 구글 클라우드가 제공하는 스프레드시트를 실제 데이터 보관함으로 이용합니다.

앱스 스크립트를 통한 게이트웨이 웹앱 구축

자바스크립트 기반의 코드로 작성된 앱스 스크립트 API 엔진을 배포하여 클라이언트의 요청을 시트에 기록하고 가공하는 미들웨어 서버 역할을 수행하게 만듭니다.

클라이언트 사이드 실시간 비동기 동기화 통신

웹 브라우저에서 방명록 입력 시 백그라운드에서 비동기 페치 통신을 작동시켜 시트 서버로 데이터를 송신하고 최근 등록된 목록을 화면에 실시간으로 새로고침합니다.

구글 스프레드시트 데이터베이스 셋팅 방법

구글 스프레드시트 문서 생성

본인의 구글 드라이브에 새로운 스프레드시트 파일을 생성하고 첫 번째 시트 이름을 명확하게 설정해 둡니다.

앱스 스크립트 에디터 진입

스프레드시트 상단의 메뉴 영역에서 확장 프로그램 탭을 선택한 다음 앱스 스크립트 메뉴를 클릭하여 코드 편집 환경을 엽니다.

보안키 설정 및 연동 코드 배포

편집기에 아래 연동 스크립트를 작성하여 저장한 뒤, 오른쪽 상단 배포 아이콘에서 새 배포를 생성합니다.

배포 시 유형은 웹 앱으로 잡고 액세스 권한은 반드시 모든 사용자로 설정하여 배포 URL을 확보합니다. 

이때 반드시 맨밑의 URL을 복붙하고 가지고계셔야합니다.!!!

// 구글 앱스 스크립트 내장 코드
function doPost(e) {
  try {
    var SECRET_KEY = "약속된_비밀_키";
    var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
    var data = JSON.parse(e.postData.contents);
    
    if (data.key !== SECRET_KEY) {
      return ContentService.createTextOutput(JSON.stringify({ "status": "error", "message": "Unauthorized" }))
        .setMimeType(ContentService.MimeType.JSON);
    }
    
    var guestbookSheet = activeSpreadsheet.getSheetByName("Guestbook") || activeSpreadsheet.getSheets()[0];
    var rowData = [
      new Date(), 
      data.name || "Anonymous", 
      data.message || ""
    ];
    guestbookSheet.appendRow(rowData);
    
    return ContentService.createTextOutput(JSON.stringify({ "status": "success" }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({ "status": "error", "message": err.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

난제: 포스트 리디렉션 통신 시 브라우저 크로스 오리진 차단 문제와 해결책

구글 리디렉션 주소에 대한 브라우저의 보안 거부 현상

앱스 스크립트로 데이터를 전송하는 포스트 통신을 시도할 때 구글 중계 서버가 다른 서브 도메인 주소로 요청을 리디렉션시킵니다.

이 과정에서 브라우저가 교차 출처 리소스 공유 규격 위반으로 간주하여 통신 결과를 에러로 파기해 버리는 치명적인 교착 상태가 발생했습니다.

포스트 헤더 타입 단순화 및 응답 파싱 과정 생략 기법

리액트나 웹 서버에서 흔히 쓰는 제이슨 규격 헤더 대신 브라우저가 보안 검사를 덜 엄격하게 처리하는 텍스트 플레인 타입으로 통신 헤더를 교체했습니다.

// 클라이언트에서 호출하는 통신 구조
await fetch(this.GAS_URL, {
  method: 'POST',
  body: JSON.stringify({ type: 'guestbook', name: "닉네임", message: message, key: this.API_SECRET_KEY }),
  headers: { 'Content-Type': 'text/plain;charset=utf-8' } // 우회용 헤더
});

리디렉션된 응답 본문 데이터를 자바스크립트로 굳이 읽어서 억지로 파싱하지 않고 바로 통신이 완료된 것으로 간주하고 화면을 갱신하게 설계하여 오류 없이 실시간 저장이 완료되도록 조치했습니다.

설계 과정의 트레이드오프

서버 유지비 제로의 장점과 응답 지연 성능의 타협

서버 구동과 호스팅 관리 비용이 완벽하게 영원히 들지 않으므로 개인 포트폴리오를 유지하는 데 매우 유리합니다.

다만 구글 인프라의 서버리스 구동 특성상 첫 접속 시에 약 1초에서 2초 정도 가동을 준비하는 콜드 스타트 지연 시간이 발생합니다.

결과적으로 실시간 금융 거래 같은 빠른 처리가 불필요한 방명록 시스템이기에 비용 제로라는 경제적 메리트를 최우선으로 취하는 선택을 내렸습니다.

동시 접속 처리 용량 한계성 수용

스프레드시트는 대규모 트래픽이 몰리는 엔터프라이즈급 서비스에 알맞은 대용량 트랜잭션 도구가 아닙니다.

만약 동시에 수천 명이 동시에 데이터를 써내려간다면 시트가 잠기거나 행이 유실될 수 있는 물리적 한계가 존재합니다.

우리는 일상적인 유입과 포트폴리오 탐색 수준의 동시 접속 수치라면 구글 인프라 대역폭 한계 내에서 충분히 안전하게 구동 가능함을 확인하고 구조를 채택했습니다.

개발 시 주의할 점

소스 코드 내부 비밀키 마스킹 기법 적용 <<< 중요

정적 파일들이 모두 오픈소스로 투명하게 노출되는 깃페이지의 구조 상 소스 코드 안에 보안 비밀키를 평문으로 그냥 남겨두면 누구든지 키를 복사해 도용할 수 있습니다.

따라서 깃허브 액션 환경 변수 설정을 통해 배포 빌드 순간에만 시크릿 환경 변수 파일에 키를 동적으로 구워 심는 빌드 파이프라인 처리가 보안 상 안전합니다. 

스태틱 야믈 파일 수정 : 자동 배포를 담당하는 작업 흐름 파일에 환경 설정 문서를 새로 생성하는 명령어를 추가했습니다.
보안 파이프라인 적용 : 저장소에 새로운 코드가 올라가 배포가 시작되면 사전에 등록해 둔 비밀 변수를 불러와 실제 주소가 담긴 환경 설정 파일을 동적으로 덮어쓰도록 적용했습니다.

신규 버전 배포 시 새 버전 지정 필수

스프레드시트 안의 스크립트 편집기에서 코드를 수정하고 저장 버튼만 클릭하는 실수를 많이 범합니다.

이렇게 하면 외부 웹앱 주소는 업데이트 전의 과거 버전을 실행하게 되므로 작동 불능 상태가 지속됩니다.

반드시 배포 관리 메뉴에서 기존 배포 내역 수정을 누르고 버전 설정을 신규 버전으로 수동 변경하여 배포 작업을 매번 완료해 주어야 합니다.

마치며: 우리가 얻은 정수

세상의 수많은 웹 개발 문서들은 데이터베이스를 쓰려면 어딘가의 데이터베이스 엔진을 대여해 돈을 지불해야 한다고 말합니다.

구글 스프레드시트라는 훌륭하고 익숙한 저장 도구를 유연한 웹 포털 엔진으로 승화시켜 정적 깃페이지에 백엔드 생동감을 불어넣은 이번 연구는, 인프라 자본의 종속성에서 탈피하여 아이디어와 논리만으로 무한히 동작하는 완전무결한 독립형 소프트웨어를 설계하는 가장 지혜로운 해결 방안이 되어 줄 것입니다!!!!

긴글 읽어 주셔서 감사합니다!!!!

다음글은 이제 제 정수가 들어간 html을 공유드리겠습니다! 감사합니다.!!!!!

 

 

 

제 포스팅은 AI가 작성한게 아닌 한글자 한글자 타자를 쳐서 작성한 포스팅입니다. 구독 좋아요 댓글은 힘이됩니다.