바이브 코딩 경험 - 프론트엔드/백엔드 연동

나는 이번 바이브 코딩을 통하여 몇가지 중요한 개념을 배웠다. 이 개념을 프론트엔드, 백엔드 연동, 데이터 저장, 웹호스팅, 버전관리, 네트워크, 디버깅, 보안, 그리고 모바일 대응으로 분류하여 차례로 정리해 보겠다

프론트엔드(Frontend)란?

사용자가 직접 눈으로 보고 손으로 조작하는 화면 부분을 말한다.

앱을 열었을 때 보이는 입력 칸, 버튼, 날짜 표시, 체크박스 — 이 모든 것이 프론트엔드다. 쉽게 말해 "사용자와 맞닿는 면"이다.

 

주요 기술은 세 가지로 구성된다. 이 세 가지는 별개가 아니라 하나의 HTML 파일 안에 함께 담긴다.

• HTML은 페이지의 뼈대를 만든다. 어떤 항목이 어디에 배치될지, 입력 칸은 몇 개인지를 정의한다.
• CSS(Cascading Style Sheets) 는 그 뼈대에 옷을 입힌다. 글자 크기, 색상, 버튼 모양, 모바일에서 화면이 잘리지 않도록 하는 반응형 레이아웃이 여기에 해당한다.
• JavaScript는 화면에 생명을 불어넣는다. 오늘 날짜를 자동으로 불러오고, 전날 "내일 할 일"을 오늘 칸에 채워주고, 3초마다 자동 저장하고, 이달 지출 합계를 계산하는 것 — 이 모든 동작이 JavaScript의 역할이다.

백엔드 연동(Backend Integration)이란?

사용자가 화면에서 입력한 데이터를 어딘가에 저장하고, 필요할 때 다시 불러오는 과정을 말한다. 프론트엔드가 "보이는 면"이라면, 백엔드는 "보이지 않는 면"이다. 로그북 앱에서 저장 버튼을 눌렀을 때 구글 시트에 기록이 남는 것, 그것이 백엔드 연동의 결과다.

 

이 앱에서 백엔드 연동의 핵심 기술은 Google Apps Script(GAS)이다. GAS는 구글이 제공하는 자동화 도구로, 구글 시트·구글 문서·구글 폼 등 구글 서비스를 코드로 제어할 수 있게 해준다. 이 앱에서는 두 가지 역할을 담당했다. doPost는 프론트엔드에서 데이터가 넘어오면 받아서 구글 시트에 저장하는 입력 역할이고, doGet은 저장된 데이터를 날짜 기준으로 찾아서 다시 화면으로 보내주는 조회 역할이다.

 

GAS를 작성한 뒤 '웹앱으로 배포'하면 고유한 URL이 하나 생성된다. 프론트엔드는 이 URL로 데이터를 보내고 받는다. 이 URL이 프론트엔드와 백엔드를 연결하는 다리 역할을 한다. 

좀 더 비유적으로 설명을 하면 URL은 GAS의 현관 주소에 해당한다. 프론트엔드는 이 주소(URL)를 이용하여 GAS에 요청을 한다. "이 데이터 저장해 주세요", "이 날짜 데이터 꺼내주세요". 그러면 GAS는 해당 내용을 처리해 주는데, 그 처리하는 함수가 입력일 때는 (doPost), 출력일 때는 (doGet)이다. 바이브 코딩을 통하여 URL이 전달되는 과정을 설명하면 다음과 같다

 

URL 전달 과정

1. GAS를 웹앱으로 배포하면 구글이 고유한 URL을 자동 생성
2. 그 URL을 화면에서 복사
3. Claude에게 "이 URL 넣어서 코드 수정해 주세요"라고 전달
4. Claude가 index.html 안에 그 URL을 하드코딩으로 삽입
5. 이후 저장 버튼을 누를 때마다 프론트엔드가 그 URL로 자동 요청

즉 URL은 자동으로 연결되는 게 아니라, 내가 배포를 한 뒤 생성된 URL을 클비서에게 전달을 했다. 

 

그리고 여기서 배포 개념에 대한 이해가 필요하다. 배포는 GAS가 웹앱 URL를 만드는 것을 말한다. 
주의할 점은 중간에 GAS의 코드를 수정해도 배포 URL에 자동 반영되지 않는다는 점이다. 반영하려면 반드시:

1. GAS 편집기 상단 → 배포 클릭
2. 배포 관리 선택
3. 연필(✏️) 아이콘 → 버전: 새 버전 선택
4. 배포 클릭

그래야 기존 URL 그대로 유지되면서 수정 내용이 반영된다. 새 배포를 선택하게 되면 URL을 새로 생성하는 것이다. 그렇게 되면 이미 프론트엔드에 전달되었던 URL도 수정해야 하는 번거로움이 생기게 되므로 기존 URL을 그대로 두면서 새 버전을 선택하는 것이 좋다.