이번에 만들어볼 사이트 구조 이해하기
이번에 예시로써 만들어볼 웹사이트는 ‘날씨에 맞게 옷차림을 추천해주는 웹사이트’입니다.
사용자는 브라우저(Chrome, Safari 같은 웹앱)로 웹사이트에 접속하고, 날씨 정보를 볼 수 있습니다.
구성은 어떻게 될까요?
① Cursor로 “화면(Frontend)” 만들기
우선, Cursor라는 AI 코딩 도구를 이용해 ‘사용자가 보는 화면’을 만듭니다.
이 화면은 우리가 흔히 말하는 웹사이트에 해당합니다.
예를 들어,
이런 부분이 바로 Frontend(프론트엔드) 입니다. 즉, 사용자가 눈으로 보고, 직접 클릭하는 영역입니다.
② Cloudflare로 “우리 사이트를 세상에 공개하기”
화면을 다 만들었다면, 이제 세상 사람들도 접속할 수 있게 Cloudflare라는 배포 플랫폼에 올립니다.
Cloudflare는 일종의 “사이트 전시장” 역할을 합니다.
우리가 만든 웹사이트 파일을 Cloudflare에 올려두면, 누구나
https://우리사이트주소.com 으로 접속할 수 있게 됩니다.
③ Supabase Edge Function으로 “서버 없이도 날씨 가져오기”
이제 사용자가 “서울 날씨 보여줘!”라고 하면 사이트(Frontend)가 외부 날씨 정보를 어디선가 가져와야 합니다.
그래서 Supabase Edge Function을 사용합니다.
쉽게 말해 “서버 없이도 서버처럼 일하는 조그만 프로그램”입니다.
- 외부 서비스(예: 날씨 API)와 안전하게 통신할 수 있게 해줍니다.
사용자가 접속하면,
→ Edge Function이 대신 날씨 API에 요청하고
→ 받은 결과(“서울 맑음, 15°C”)를 다시 사이트로 전달합니다.
④ WeatherAPI에서 “진짜 날씨 데이터 가져오기”
마지막 단계는 외부 날씨 서비스인 WeatherAPI.com입니다.
이 회사는 전 세계 날씨 정보를 모아둔 곳으로, 우리는 이곳에서 실제 데이터를 받아옵니다.
최종적으로 정리하면 이렇게 됩니다
- Cursor로 만든 웹사이트를
- Cloudflare에 올리고,
- Cloudflare에 올라간 우리 웹사이트가 Supabase Edge Function을 호출하면
- Supabase Edge function이 WeatherAPI에 날씨를 물어본 다음,
- 그 결과를 사용자의 화면에 보여주는 구조입니다.
