CORS와 구글 시트 조합, 랜딩 페이지 대기자 명단 구축 비용 절감!

저자는 CORS(Cross-Origin Resource Sharing)를 활용하여 랜딩 페이지에서 백엔드 없이 데이터를 처리하는 방법을 제시한다. fetch() 함수를 사용하여 다른 도메인에 요청을 보내는 방식으로, 랜딩 페이지는 Netlify 또는 GitHub Pages와 같은 무료 호스팅 서비스를 이용하고, 대기자 명단 백엔드는 별도로 호스팅하여 비용 효율성(Cost-Effectiveness)을 높인다. 특히, Access-Control-Allow-Origin 헤더 설정을 통해 보안을 유지하면서 외부 도메인에서의 접근을 허용한다.

구글 시트를 대기자 명단 저장소로 활용하여 비용을 절감(Cost Reduction)하는 방법을 설명한다. 구글 시트는 무료로 사용할 수 있으며, 대기자 명단 이메일을 최종적으로 저장하는 데 적합하다. 구글 시트 API를 사용하기 위해 서비스 계정(Service Account)을 생성하고 액세스 토큰(Access Token)을 발급받는 과정을 거쳐야 한다. 이러한 접근 방식은 별도의 데이터베이스를 구축하는 것보다 훨씬 저렴하다는 장점이 있다.

저자는 자체 호스팅 백엔드를 구축함으로써 얻는 이점을 강조한다. Netlify Form과 같은 다른 솔루션과 비교하여, 자체 호스팅 방식은 폼 디자인 및 커스터마이징(Customization)에 대한 유연성을 제공한다. fetch() 함수를 사용하여 백엔드에 요청을 보내는 방식은 마치 동일한 도메인 내에서 백엔드를 호출하는 것처럼 동작하므로, 스타일링(Styling) 및 액션(Actions)을 자유롭게 제어할 수 있다. 이는 사용자 경험을 향상시키는 데 기여한다.

구현 아키텍처는 CORS 설정(CORS Configuration), 구글 시트 통합(Google Sheets Integration), 그리고 백엔드 호스팅(Backend Hosting)으로 구성된다. CORS 설정은 브라우저가 다른 도메인으로의 요청을 허용하도록 하는 핵심 요소이며, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등의 헤더를 설정해야 한다. 구글 시트 통합은 서비스 계정(Service Account)과 액세스 토큰(Access Token)을 사용하여 구현되며, 백엔드는 OVHcloud와 같은 저렴한 호스팅 서비스를 통해 운영된다.