본문 바로가기

  • 교재 소개

  • 5장 바이브 코딩을 위한 GitHub

  • 5.3 GitHub Pages로 동적 서비스 구현

GitHub Pages로 동적 서비스 구현

이 장에서는 GitHub Pages를 이용하여 간단한 동적 서비스를 구현해봅니다. 이를 통해 동적 서비스의 작동 원리를 이해하고, 정적 서비스와의 차이점을 명확히 할 수 있습니다.

1. 간단한 동적 서비스

앞 챕터에서 GitHub Pages는 정적 서비스만 배포할 수 있다고 설명했습니다. 하지만 간단한 동적 기능이 필요하다면 어떻게 해야 할까요? 완전한 백엔드 서버를 구축하지 않고도 Google Sheets를 데이터베이스처럼 활용하는 방법이 있습니다.

이 방식은 홈페이지에서 사용자가 입력한 데이터를 Google Sheets에 저장하고, 저장된 데이터를 다시 홈페이지에서 불러와 보여주는 구조입니다. 예약 시스템, 간단한 설문조사, 방명록 등을 구현할 때 유용합니다.

언제 이 방법을 사용할까요?

  • 간단한 데이터 저장이 필요할 때 (예약, 신청, 문의 등)
  • 보안이 크게 중요하지 않은 사내용 서비스
  • 빠르게 프로토타입을 만들고 싶을 때
  • 데이터를 스프레드시트로 관리하고 싶을 때

이 단계는 2장 '대상 독자와 읽는 방법'에 2단계, 3단계로 기록되어 있습니다. 적어도 2 ~ 3개의 서비스를 만들어보며 어떤 식으로 서비스가 동작하는지 이해해보셨으면 좋겠습니다.

Google Sheets를 활용한 동적 서비스는 실무에서 자주 쓰이진 않지만, 간단한 사내 도구나 프로토타입을 만들 때 유용합니다. 이 챕터에서는 요청문과 그 결과로 나온 구현 설명서를 제공합니다. 완성된 코드도 아래 저장소에 있습니다.

1.1 Code 탭에 요청하기

바탕화면에 cafe 폴더를 만들고 Code 탭에서 지정한 뒤, 아래 요청문을 그대로 붙여 넣습니다. 이 책의 요청문치고는 긴 편인데, 눈여겨볼 곳은 '구현 설명서'를 요구하는 첫 번째 요구사항입니다. 코드만 받으면 우리가 Google 쪽에서 무엇을 눌러야 하는지 알 수 없기 때문에, 그 안내문까지 함께 만들게 했습니다.

[목적]
나는 카페를 소개하고 예약할 수 있는 서비스를 만들고 싶어. 카페는 사내용 카페여서 보안이 필요하진 않아. 우리 직원들이 예약할 수 있는 랜딩페이지를 만들어줘.

[구현스택]
- HTML, CSS, JavaScript
- 데이터베이스는 google Sheets를 Apps Script로 연결해서 사용

[요구사항]
1. 구현 설명서: 비개발자가 개발해야하는 상황을 고려하여, 상세한 구현 설명서를 작성해줘.
2. 랜딩페이지 구성:
   - 카페 소개 섹션: 카페의 사진, 위치, 운영 시간, 제공하는 서비스(음료, 간식 등)를 포함.
   - 예약 섹션: 사용자가 날짜와 시간을 선택하고 예약할 수 있는 폼을 제공.

작업이 끝나면 폴더에 index.html, style.css, script.js, apps-script.gs, 그리고 구현 설명서 파일이 생깁니다. 설명서는 보통 README.md나 구현설명서.md 같은 이름입니다. .md 파일은 메모장으로 열어도 읽을 수 있고, Code 탭에 "구현 설명서를 대화창에 보여줘"라고 해도 됩니다.

1.2 구현 설명서 따라가기

그렇게 만들어진 구현 설명서는 아래와 같습니다. Google Sheets와 Google Apps Script를 활용하여 간단한 동적 서비스를 만드는 방법이 상세히 나와 있습니다. 여러분이 받은 설명서는 문구가 조금 다를 수 있지만 순서는 같습니다.

# 사내 카페 예약 시스템 - 구현 설명서

이 문서는 비개발자도 쉽게 따라할 수 있도록 상세하게 작성되었습니다.

---

## 목차
1. [전체 구조 이해하기](#1-전체-구조-이해하기)
2. [파일 설명](#2-파일-설명)
3. [Google Sheets 설정하기](#3-google-sheets-설정하기)
4. [Google Apps Script 설정하기](#4-google-apps-script-설정하기)
5. [웹페이지와 연결하기](#5-웹페이지와-연결하기)
6. [웹페이지 호스팅하기](#6-웹페이지-호스팅하기)
7. [카페 정보 수정하기](#7-카페-정보-수정하기)
8. [문제 해결](#8-문제-해결)

---

## 1. 전체 구조 이해하기

이 시스템은 다음과 같이 작동합니다:

[사용자] → [웹페이지에서 예약 폼 작성] → [Google Apps Script] → [Google Sheets에 저장]

- **웹페이지**: 직원들이 카페 정보를 보고 예약하는 화면
- **Google Sheets**: 예약 정보가 저장되는 데이터베이스 역할
- **Google Apps Script**: 웹페이지와 Google Sheets를 연결해주는 중간 역할

---

## 2. 파일 설명

| 파일명 | 역할 | 수정 필요 여부 |
|--------|------|---------------|
| `index.html` | 웹페이지의 구조 (내용) | 카페 정보 수정 시 |
| `style.css` | 웹페이지의 디자인 (색상, 크기 등) | 디자인 변경 시 |
| `script.js` | 웹페이지의 동작 (예약 전송 등) | Apps Script URL 입력 필요 |
| `apps-script.gs` | Google Sheets 연결 코드 | Google에 복사 필요 |

---

## 3. Google Sheets 설정하기

### 3.1 새 스프레드시트 만들기

1. **Google 계정 로그인**
   - 브라우저에서 Google Drive 접속 (https://drive.google.com)
   - 회사 Google 계정으로 로그인

2. **새 스프레드시트 만들기**
   - 왼쪽 상단의 `+ 새로 만들기` 버튼 클릭
   - `Google 스프레드시트` 선택
   - 빈 스프레드시트 선택

3. **스프레드시트 이름 변경**
   - 왼쪽 상단의 `제목 없는 스프레드시트` 클릭
   - `사내카페_예약목록`으로 변경

---

## 4. Google Apps Script 설정하기

### 4.1 Apps Script 편집기 열기

1. 스프레드시트 상단 메뉴에서 `확장 프로그램` 클릭
2. `Apps Script` 클릭
3. 새 탭에서 Apps Script 편집기가 열림

### 4.2 코드 붙여넣기

1. 기존에 있는 `function myFunction() { }` 코드를 **모두 삭제**

2. `apps-script.gs` 파일의 **전체 내용**을 복사하여 붙여넣기
   - 메모장으로 `apps-script.gs` 파일 열기
   - `Ctrl + A`로 전체 선택
   - `Ctrl + C`로 복사
   - Apps Script 편집기에 `Ctrl + V`로 붙여넣기

3. **저장하기**
   - `Ctrl + S` 또는 디스크 아이콘 클릭
   - 프로젝트 이름 입력: `카페예약시스템`

### 4.3 스프레드시트 초기 설정 실행

1. 상단의 함수 선택 드롭다운에서 `setupSpreadsheet` 선택
2. `실행` 버튼 클릭 (▶ 모양)
3. **권한 요청 팝업이 뜨면:**
   - `권한 검토` 클릭
   - 본인 Google 계정 선택
   - "Google에서 확인하지 않은 앱입니다" 메시지가 뜨면 `고급` 클릭
   - `카페예약시스템(안전하지 않음)(으)로 이동` 클릭
   - `허용` 클릭
4. 스프레드시트로 돌아가면 헤더가 설정되어 있음

### 4.4 웹앱으로 배포하기

1. Apps Script 편집기 오른쪽 상단의 `배포` 버튼 클릭
2. `새 배포` 선택
3. 설정 화면에서:
   - 왼쪽의 톱니바퀴 아이콘 옆 `유형 선택` 클릭
   - `웹 앱` 선택
4. 배포 설정:
   - **설명**: `카페 예약 시스템 v1`
   - **실행 주체**: `나` 선택
   - **액세스 권한**: `모든 사용자` 선택
5. `배포` 버튼 클릭
6. **웹 앱 URL 복사**
   - `https://script.google.com/macros/s/...` 형태의 URL이 표시됨
   - 이 URL을 **반드시 복사하여 메모**해두세요!

---

## 5. 웹페이지와 연결하기

### 5.1 Apps Script URL 입력하기

1. `script.js` 파일을 메모장으로 열기

2. 파일 상단에서 다음 줄을 찾기:
   const APPS_SCRIPT_URL = 'YOUR_APPS_SCRIPT_WEB_APP_URL_HERE';
   

3. `YOUR_APPS_SCRIPT_WEB_APP_URL_HERE` 부분을 **복사해둔 웹 앱 URL**로 교체:
   const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/여러분의URL/exec';

4. 파일 저장 (`Ctrl + S`)

---

## 6. 웹페이지 호스팅하기

웹페이지를 인터넷에 공개하는 방법입니다. 여러 가지 방법 중 가장 쉬운 방법들을 소개합니다.

### 방법 1: 회사 내부 서버 사용 (권장)
- IT 부서에 문의하여 내부 웹서버에 파일 업로드
- 보안상 가장 안전한 방법

### 방법 2: GitHub Pages 사용 (무료)

1. **GitHub 계정 만들기**
   - GitHub 접속 (https://github.com)
   - `Sign up` 클릭하여 계정 생성

2. **새 저장소(Repository) 만들기**
   - 로그인 후 오른쪽 상단의 `+` 버튼 → `New repository`
   - Repository name: `cafe-reservation`
   - `Public` 선택
   - `Create repository` 클릭

3. **파일 업로드**
   - `uploading an existing file` 링크 클릭
   - `index.html`, `style.css`, `script.js` 파일을 드래그 앤 드롭
   - `Commit changes` 클릭

4. **GitHub Pages 활성화**
   - 저장소의 `Settings` 탭 클릭
   - 왼쪽 메뉴에서 `Pages` 클릭
   - Source에서 `Deploy from a branch` 선택
   - Branch에서 `main` 선택, 폴더는 `/(root)` 선택
   - `Save` 클릭

5. **웹사이트 주소 확인**
   - 몇 분 후 `https://사용자이름.github.io/cafe-reservation` 주소로 접속 가능

### 방법 3: 로컬에서 테스트 (개인 PC에서만)
- `index.html` 파일을 더블클릭하면 브라우저에서 열림
- 단, 이 방법은 본인 PC에서만 확인 가능

... 생략 ...

설명서의 6장에서 script.js를 메모장으로 열어 URL을 바꾸라고 하는데, 이 부분은 Code 탭에 시켜도 됩니다. 복사해 둔 웹 앱 URL을 붙여서 이렇게 요청하면 됩니다.

script.js의 APPS_SCRIPT_URL 값을 아래 주소로 바꿔줘.
https://script.google.com/macros/s/여러분의URL/exec

설명서 7장의 GitHub 업로드도 앞 절에서 한 것처럼 "이 폴더를 GitHub 저장소 (주소)에 올려줘"로 대신할 수 있습니다. 단, apps-script.gs 파일은 Google에 붙여 넣는 용도이지 웹페이지에 필요한 파일이 아니니 함께 올라가도 동작에는 문제가 없습니다.

1.3 동작 확인하기

배포까지 끝났다면 실제로 예약을 한 번 넣어 봅니다. 확인할 것은 다음과 같습니다.

  • 배포된 주소에서 예약 폼에 날짜와 시간을 넣고 전송했을 때 완료 메시지가 뜨는가
  • Google Sheets를 열었을 때 방금 넣은 예약이 한 줄로 추가되어 있는가
  • 날짜를 비우고 전송하면 막아 주는가, 아니면 빈 줄이 시트에 들어가는가

세 번째가 걸리면 Code 탭에 "날짜와 시간을 입력하지 않으면 전송되지 않게 막아줘"라고 요청하고, 다시 배포한 뒤 같은 확인을 반복합니다. 이렇게 만든 서비스는 아래와 같이 동작합니다.

카페 소개와 예약 폼이 있는 랜딩 페이지입니다.

예약 폼에서 보낸 내용이 Google Sheets에 한 줄씩 쌓입니다.

2. 활용 사례

Google Sheets + Apps Script 조합으로 만들 수 있는 서비스는 다양합니다. 아래는 실제로 구현 가능한 사례들입니다.

서비스 유형설명복잡도
예약 시스템회의실, 장비, 상담 예약중
설문조사만족도 조사, 피드백 수집하
방명록간단한 메시지 저장 및 표시하
재고 관리사내 비품, 도서 대출 현황중
출석 체크이벤트, 강의 참석자 관리하

이러한 서비스들은 모두 "데이터를 저장하고 조회한다"는 공통점이 있습니다. Google Sheets가 데이터베이스 역할을, Apps Script가 서버 역할을 대신하는 것입니다. 위 요청문에서 [목적]과 [요구사항]의 화면 구성만 바꾸면 그대로 다른 서비스가 됩니다.

3. 한계와 대안

Google Sheets 방식은 간편하지만 분명한 한계가 있습니다.

3.1 이 방식의 한계

한계설명
보안민감한 개인정보 저장에 부적합
성능동시 접속자가 많으면 느려짐
데이터 용량대용량 데이터 처리 불가
기능 제한복잡한 로직 구현 어려움

3.2 복잡한 서비스가 필요하다면

만약 로그인/회원가입, 결제, 실시간 채팅 등 본격적인 동적 서비스가 필요하다면 별도의 백엔드 서버가 필요합니다. 9장에서 다룰 내용입니다.

GitHub Pages로 동적 서비스 구현 - 바이브 코딩 에센셜 with Claude Desktop | 위니버시티