바이브 코딩 경험 - 데이터 저장 / 웹호스팅/버전관리

데이터 저장(Data Storage)이란?

입력한 정보를 잃어버리지 않고 보관하는 것을 말한다. 아무리 잘 만든 화면이라도 데이터를 저장하지 못하면 앱이라고 할 수 없다. 이 로그북 앱에서는 저장 방식이 두 가지로 나뉜다. 상황에 따라 역할이 다르기 때문이다.

 

첫 번째는 LocalStorage(로컬스토리지)다. 인터넷 연결 없이 브라우저 안에 임시로 데이터를 보관하는 공간이다. 아직 정리가 덜 된 내용, 완성되지 않은 기록을 임시저장 버튼을 눌러 여기에 맡겨둘 수 있다. 개발하는 개인 로그북의 경우 하루동안 여러번 입력이 이뤄지기 때문에 최종 구글 시트에 저장하기 전까지는 임시 저장 기능인 로컬 스토리지를 이용하는 것이 필요하다.

 

두 번째는 Google Sheets(구글 시트)다. 저장 버튼을 누르면 GAS를 통해 구글 시트에 기록이 남는다. 어느 기기에서 열어도 같은 데이터를 볼 수 있고, 영구적으로 보관된다. 날짜가 같은 기록이 이미 있으면 새 행을 추가하는 대신 기존 행을 덮어쓰기 때문에 중복 없이 깔끔하게 관리된다.

웹호스팅(Web Hosting)이란?

내가 만든 앱을 인터넷에 올려두어 누구든 어디서든 접근할 수 있게 하는 것을 말한다. 아무리 잘 만든 앱이라도 내 컴퓨터 안에만 있으면 나 혼자만 쓸 수 있다. 웹호스팅은 그 앱을 인터넷 세상에 공개하는 과정이다. 물론 지금 내가 개발하는 '개인 로그북 앱'은 나혼자만 사용하지만 인터넷이 접속되는 환경이면 어디에서든 사용할 수 있게 만드는 것이 웹호스팅 개념이다.

.

이 앱에서는 GitHub Pages를 사용했다. GitHub는 원래 개발자들이 코드를 관리하고 공유하는 플랫폼이다. 쉽게 말해 코드의 구글 드라이브라고 생각하면 된다. 파일을 올려두고, 수정 이력을 관리하고, 다른 사람과 공유할 수 있다.

 

여기서 한 걸음 더 나아간 것이 GitHub Pages다. GitHub에 올려둔 HTML 파일을 그대로 인터넷 웹페이지로 공개해주는 기능이다. 별도의 서버를 구매하거나 운영할 필요 없이, 파일을 올리고 Pages 기능을 활성화하는 것만으로 https://아이디.github.io/저장소명 형태의 고유한 주소가 생성된다.

 

즉, 앞서 프론트엔드에서 만들었던 index.html 파일 하나를 올려두면 https://아이디.github.io/저장소명 형태의 고유한 주소가 생성되고 이 주소를 스마트폰 브라우저에서 열면 앱으로 사용할 수 있다.

이 앱에서는 URL이 두 개 만들어진다. 하나는 사용자가 앱에 접속하는 GitHub Pages 주소이고, 다른 하나는 프론트엔드와 구글 시트가 데이터를 주고받는 Apps Script 주소다. 혼동을 없애기 위하여 두가지 URL 에 대하여 다시 정리해 보았다.

 

사용자용 URL	GitHub Pages	사용자가 브라우저에서 앱에 접근	https://아이디.github.io/logbook
연동용 URL	Google Apps Script	프론트엔드↔백엔드 데이터 통신	https://script.google.com/macros/s/...

버전 관리(Version Control)란?

파일을 수정할 때마다 그 변경 이력을 기록해두는 것을 말한다. 쉽게 말해 "언제, 무엇을, 어떻게 바꿨는지"를 저장해두는 시스템이다. 글쓰기로 비유하면 초고, 2고, 3고를 모두 보관해두고 필요하면 이전 버전으로 되돌아갈 수 있는 것과 같다.

 

이 앱에서는 Git과 GitHub를 사용했다. Git은 버전 관리를 담당하는 도구 자체이고, GitHub는 Git으로 관리한 파일을 인터넷에 올려두는 플랫폼이다. 앞서 웹호스팅에서 설명한 GitHub가 바로 이것이다. 즉 GitHub는 버전 관리(Git)와 웹호스팅(Pages) 두 가지 역할을 동시에 담당한다.

 

실제 사용 방식은 간단하다. index.html 파일을 수정할 때마다 GitHub에 올리면(commit → push), 변경 이력이 자동으로 쌓인다. "버튼 색상 변경", "지출 합계 기능 추가"처럼 무엇을 바꿨는지 메모를 남길 수도 있다. 덕분에 새 기능을 추가했다가 문제가 생기면 이전 버전으로 즉시 되돌아갈 수 있다.

 

바이브 코딩에서 버전 관리는 특히 중요하다. Claude가 코드를 수정해줄 때마다 GitHub에 올려두면, 혹시 수정이 잘못되더라도 언제든 되돌아갈 수 있는 안전망이 생기기 때문이다.