바이브 코딩 경험 - 네트워크/디버깅/보안/모바일 대응

네트워크(Network)란?

컴퓨터와 컴퓨터가 데이터를 주고받는 통신 체계를 말한다. 이 앱에서는 프론트엔드(GitHub Pages)와 백엔드(Google Apps Script) 사이에 데이터가 오가는 과정이 곧 네트워크다. 사용자가 저장 버튼을 누르는 순간, 눈에 보이지 않는 곳에서 데이터가 이동한다.

 

이 앱에서 핵심적으로 등장하는 네트워크 개념은 세 가지다.

첫 번째는 HTTP/HTTPS다. 인터넷에서 데이터를 주고받는 규칙(프로토콜)이다. HTTP에 보안이 추가된 것이 HTTPS인데, 이 앱에서는 GitHub Pages도, Apps Script도 모두 HTTPS를 사용한다. 둘 중 하나라도 HTTP면 통신이 차단되기 때문에 반드시 일치해야 한다.

 

두 번째는 REST API다. 프론트엔드가 백엔드에 데이터를 요청하는 방식의 약속이다. "이 날짜의 데이터를 주세요(doGet)", "이 데이터를 저장해 주세요(doPost)"처럼 정해진 형식으로 요청하고 응답받는 구조다.

 

세 번째는 CORS다. 보안상의 이유로 브라우저는 기본적으로 다른 주소 간의 데이터 통신을 차단한다. GitHub Pages 주소와 Apps Script 주소가 서로 다르기 때문에, GAS 코드에서 CORS를 허용해주는 설정이 필요하다. 실제로 초기 개발 과정에서 저장 기능이 구현되지 않아서 계속 디버깅을 했는데 원인 중 하나가 바로 이 CORS 문제였다고 한다.

 

바이브 코딩에서 네트워크는 가장 존재감이 없는 개념이다. Claude가 보이지 않는 곳에서 모두 처리해줬기 때문이다. 그러나 문제가 생겼을 때 "왜 저장이 안 되는가"를 이해하려면 결국 네트워크 개념이 바탕에 있어야 한다.

 

좋은 방향입니다. 각 섹션마다 "이전에는 이랬다 → 바이브 코딩에서는 이렇게 바뀌었다"는 대비 구조를 넣으면 독자가 변화의 의미를 훨씬 실감할 수 있습니다.

디버깅 섹션부터 그 구조로 다시 써보겠습니다.

디버깅(Debugging)이란?

앱이 의도한 대로 작동하지 않을 때 원인을 찾아 고치는 과정을 말한다. 'Bug(버그)'는 원래 벌레라는 뜻인데, 초창기 컴퓨터 시대에 실제 벌레가 기계 안에 끼어 오작동을 일으킨 사건에서 유래했다. 지금은 소프트웨어의 오류나 결함을 통칭하는 말로 쓰인다.

 

바이브 코딩 이전에는 디버깅이 개발자에게 가장 고된 작업 중 하나였다. 브라우저 개발자 도구를 열고 네트워크 탭을 분석하고, GAS 실행 로그를 한 줄씩 추적하며 원인을 찾아야 했다. 오류 메시지를 읽고 해석하는 것 자체가 전문 지식을 요구했다. 초보자에게 디버깅은 종종 개발을 포기하게 만드는 벽이었다.

 

바이브 코딩에서는 디버깅 방식이 완전히 달라졌다. 오류 메시지를 그대로 복사해서 Claude에게 보여주는 것이 가장 강력한 디버깅 도구였다. 이 앱을 개발하는 과정에서 구글 시트 저장이 되지 않는 문제가 두 번 있었다. 두 번 모두 화면에 뜬 오류 메시지를 그대로 붙여넣었고, Claude가 원인을 진단하고 수정된 코드를 만들어줬다. 모바일에서 화면이 잘리는 문제도 마찬가지였다. "모바일에서 오른쪽이 잘려요"라는 한 마디로 충분했다.

보안(Security)이란?

앱과 데이터를 외부의 unauthorized 접근이나 악의적인 공격으로부터 보호하는 것을 말한다. 아무리 잘 만든 앱이라도 보안이 허술하면 개인 정보가 유출되거나 데이터가 손상될 수 있다.

 

바이브 코딩 이전에는 보안이 개발자에게 가장 전문적인 영역 중 하나였다. HTTPS 설정, 접근 권한 제어, 데이터 암호화, SQL 인젝션 방어 등 보안 관련 지식만으로도 별도의 전문가가 존재할 만큼 깊고 넓은 분야다. 초보 개발자가 가장 소홀히 하기 쉬운 영역이기도 했다.

 

바이브 코딩에서는 기본적인 보안 설정을 Claude가 코드 안에 자동으로 반영해줬다. 이 앱에서 적용된 보안 요소는 크게 두 가지다.

첫 번째는 HTTPS 강제 적용이다. GitHub Pages와 Apps Script 모두 HTTPS를 사용하기 때문에 데이터가 암호화된 상태로 전송된다. 중간에서 누군가 가로채더라도 내용을 읽을 수 없다.

 

두 번째는 Apps Script 접근 권한 설정이다. GAS를 웹앱으로 배포할 때 "누가 접근할 수 있는가"를 설정한다. 이 앱은 개인용이므로 본인 계정으로만 접근하도록 제한했다. 아무나 그 URL로 접근해도 데이터를 읽거나 저장할 수 없다.

 

단, 바이브 코딩에서 보안의 한계도 분명히 있다. Claude는 요청한 기능에 필요한 보안만 처리한다. 요청하지 않은 보안 취약점은 스스로 찾아주지 않는다는 점이다. 개인용 앱 수준에서는 충분하지만, 여러 사람이 사용하는 서비스로 확장한다면 보안은 별도로 깊이 검토해야 할 영역이다.

모바일 대응(Mobile Optimization)이란?

PC에서 만든 앱이 스마트폰에서도 불편함 없이 작동하도록 최적화하는 것을 말한다. 화면 크기, 터치 방식, 손가락으로 누르는 버튼 크기 등 모바일 환경은 PC와 근본적으로 다르기 때문에 별도의 대응이 필요하다.

 

바이브 코딩 이전에는 모바일 대응이 상당한 추가 작업을 요구했다. 화면 크기에 따라 레이아웃이 자동으로 바뀌는 반응형 CSS를 별도로 설계해야 했고, 터치 이벤트 처리, 버튼 크기 조정, 폰트 크기 최적화 등 PC 버전과는 별개의 작업이 필요했다. 경우에 따라서는 모바일 앱을 아예 따로 개발하기도 했다.

 

바이브 코딩에서는 "모바일에서도 잘 보이게 해주세요"라는 한 마디로 충분했다. Claude가 반응형 CSS를 자동으로 적용해줬고, 실제로 모바일에서 열었을 때 오른쪽이 잘리는 문제가 생겼을 때도 "모바일에서 화면이 잘려요"라고 말하는 것만으로 즉시 수정됐다.

 

한 걸음 더 나아가 이 앱은 PWA(Progressive Web App) 개념을 적용했다. PWA란 웹페이지이지만 스마트폰 홈 화면에 추가하면 일반 앱처럼 동작하는 기술이다. 앱스토어에 등록하거나 별도로 설치할 필요 없이, 브라우저에서 홈 화면에 추가하는 것만으로 앱 아이콘이 생기고 전용 앱처럼 실행된다. 앱스토어 없이, 설치 없이, 대화만으로 모바일 앱이 만들어졌다.