테마
날씨 기반 옷차림 추천 사이트 아키텍처
학습 목표
- **②번 패턴(Frontend + 서버리스 + 외부 데이터)**을 실전에 적용하는 방법을 이해할 수 있다.
- Cursor, Cloudflare, Supabase, WeatherAPI의 역할을 각각 설명할 수 있다.
- 전체 데이터 흐름을 시퀀스 다이어그램으로 그릴 수 있다.
- 이 아키텍처의 장점과 비용 구조를 설명할 수 있다.
1. 프로젝트 소개
"오늘 날씨에 맞는 옷차림을 추천해주는 웹사이트"
사용자가 웹사이트에 접속하면, 현재 위치(또는 선택한 도시)의 날씨를 자동으로 가져와서 기온, 습도, 강수 확률 등을 기반으로 적절한 옷차림을 추천해주는 서비스이다.
왜 이 프로젝트인가?
| 기준 | 평가 |
|---|---|
| 도구형 서비스 | 매일 아침 "오늘 뭐 입지?" 검색하는 수요 존재 |
| 반복 방문 | 날씨는 매일 바뀌므로 매일 방문 가능 |
| 외부 데이터 활용 | 날씨 API로 실시간 데이터 조회 |
| 구현 난이도 | ②번 패턴으로 적정 수준 |
| CPC | 패션/생활 분야 — 보통 수준 |
2. 적용 패턴
이전 챕터에서 학습한 **②번 패턴(Frontend + 서버리스 + 외부 데이터)**을 적용한다.
| 구성 요소 | 역할 |
|---|---|
| Frontend | 사용자가 눈으로 보고 상호작용하는 화면 |
| 서버리스 함수 | 서버 없이 API 키를 보호하며 외부 데이터를 가져오는 역할 |
| 외부 API | 실제 날씨 데이터를 제공하는 서비스 |
3. 전체 구성요소
이 프로젝트에는 4가지 핵심 구성요소가 있다. 각각의 역할을 하나씩 살펴보자.
구성요소 1: Cursor로 화면(Frontend) 만들기
역할: 사용자가 눈으로 보는 영역
Cursor는 AI가 내장된 코드 에디터이다. 한국어로 "이런 화면을 만들어줘"라고 설명하면, AI가 HTML, CSS, JavaScript 코드를 자동으로 생성해준다.
| 항목 | 설명 |
|---|---|
| 무엇을 하는가 | 웹사이트의 화면(UI)을 만든다 |
| 비유 | 건물의 외관과 인테리어 |
| 사용자가 보는 것 | 도시 선택, 날씨 정보, 옷차림 추천 |
| 비용 | 무료 (Cursor 무료 플랜) |
구성요소 2: Cloudflare로 사이트 공개(배포)
역할: "사이트 전시장" — 전 세계 누구나 접속할 수 있게 만들기
Cloudflare Pages는 만들어진 웹사이트 파일을 인터넷에 공개해주는 서비스이다.
| 항목 | 설명 |
|---|---|
| 무엇을 하는가 | 웹사이트를 인터넷에 공개한다 |
| 비유 | 완성된 건물을 **주소(URL)**에 배치하는 것 |
| 사용자가 얻는 것 | https://my-weather-app.pages.dev 같은 URL |
| 비용 | 무료로 시작 가능 |
구성요소 3: Supabase Edge Function으로 날씨 가져오기
역할: "서버 역할 대행" — 서버 없이 외부 API를 호출
Supabase Edge Function은 서버리스 함수이다. 서버를 직접 운영하지 않아도, 필요할 때만 실행되어 외부 API를 호출하고 결과를 돌려준다.
| 항목 | 설명 |
|---|---|
| 무엇을 하는가 | WeatherAPI를 호출하고 결과를 Frontend에 전달 |
| 비유 | 배달 대행 서비스 — 직접 가지 않아도 물건을 가져다줌 |
| 왜 필요한가 | API 키를 브라우저에 노출하면 보안 위험 |
| 비용 | 무료 티어로 시작 가능 |
중요: Frontend에서 직접 WeatherAPI를 호출하면 API 키가 브라우저에 노출된다. 누구나 개발자 도구로 키를 볼 수 있다. Supabase Edge Function을 중간에 두면, API 키는 서버리스 함수 안에 안전하게 보관된다.
구성요소 4: WeatherAPI.com — 실제 날씨 데이터 제공
역할: 실제 날씨 데이터를 제공하는 외부 서비스
WeatherAPI.com은 전 세계의 실시간 날씨 데이터를 API 형태로 제공하는 서비스이다.
| 항목 | 설명 |
|---|---|
| 무엇을 하는가 | 기온, 습도, 강수 확률 등 날씨 데이터 제공 |
| 비유 | 기상청 — 날씨 정보의 원천 |
| 데이터 형식 | JSON (컴퓨터가 읽기 쉬운 형태) |
| 비용 | 무료 플랜 제공 (현재 Free 플랜 기준 월 10만 회) |
4. 전체 데이터 흐름
4가지 구성요소가 어떻게 연결되는지, 실제 사용자 시나리오를 따라가며 살펴보자.
시나리오: "서울의 오늘 날씨에 맞는 옷차림이 뭘까?"
단계별 설명
| 단계 | 무슨 일이 일어나는가 | 누가 하는가 |
|---|---|---|
| 1 | 사용자가 브라우저에 URL을 입력한다 | 사용자 |
| 2 | Cloudflare가 웹사이트 화면을 보내준다 | Cloudflare |
| 3 | 사용자가 도시를 선택하면, 브라우저가 날씨를 요청한다 | Frontend |
| 4 | Supabase Edge Function이 WeatherAPI를 호출한다 | Supabase |
| 5 | 날씨 데이터를 받아 옷차림 추천과 함께 화면에 표시한다 | Frontend |
5. 역할 정리표
| 구성요소 | 하는 일 | 목적 | 비유 |
|---|---|---|---|
| Cursor | 웹사이트 화면 코드 생성 | 사용자가 볼 UI를 만든다 | 건축가 |
| Cloudflare Pages | 웹사이트를 인터넷에 공개 | 전 세계 어디서든 접속 가능하게 | 전시장 |
| Supabase Edge Function | 외부 API를 대신 호출 | API 키 보호 + 데이터 전달 | 배달 대행 |
| WeatherAPI.com | 실시간 날씨 데이터 제공 | 정확한 날씨 정보 | 기상청 |
6. 전체 요약 흐름
7. 이 구조의 장점
장점 1: 서버 운영 불필요
전통적인 방식이라면 AWS EC2나 DigitalOcean에서 서버를 빌려야 했다. 하지만 이 구조에서는 Supabase Edge Function이 서버 역할을 대신하므로 서버를 직접 관리할 필요가 없다.
장점 2: 비용 거의 무료
| 구성요소 | 무료 범위 | 예상 비용 |
|---|---|---|
| Cloudflare Pages | 무료로 시작 가능 | $0부터 시작 |
| Supabase Edge Function | 무료 티어 제공 | $0부터 시작 |
| WeatherAPI.com | 무료 플랜 제공 (현재 Free 플랜 기준 월 10만 회) | $0부터 시작 |
| 도메인 (선택) | - | $10~15/년 |
| 합계 | $0~15/년 |
핵심은 초기 검증 비용이 매우 낮다는 점이다. 다만 호출량 한도와 과금 방식은 바뀔 수 있으므로, 실제 운영 전에는 Cloudflare, Supabase, WeatherAPI.com의 최신 가격 정책을 함께 확인해야 한다.
장점 3: 유지보수 최소
- 서버 업데이트: 불필요 (Cloudflare, Supabase가 알아서 함)
- 보안 패치: 불필요 (플랫폼이 자동 관리)
- 모니터링: 대시보드에서 간단히 확인
8. 다른 프로젝트에 적용하기
이 아키텍처는 날씨 서비스에만 국한되지 않는다. 같은 구조로 다양한 서비스를 만들 수 있다.
| 프로젝트 | 외부 API | Frontend 표시 |
|---|---|---|
| 환율 계산기 | 환율 API | 실시간 환율 + 환전 계산 |
| 주식 시세 | 주식 API | 현재가 + 등락률 + 차트 |
| 뉴스 요약 | 뉴스 API + AI API | 주요 뉴스 + AI 요약 |
| 게임 전적 | 게임 OPEN API | 전적 + 통계 |
| 공공데이터 시각화 | 공공데이터포털 API | 데이터 차트 + 분석 |
핵심: 구조를 한 번 이해하면, API만 바꿔서 다양한 서비스를 빠르게 만들 수 있다.
핵심 정리
- Cursor로 화면을 만들고, Cloudflare에 올리고, Supabase Edge Function으로 WeatherAPI 데이터를 가져온다.
- API 키는 서버리스 함수 안에 안전하게 보관한다.
- 이 구조의 비용은 거의 $0이고, 유지보수도 최소 수준이다.
- 같은 아키텍처로 다양한 서비스를 빠르게 만들 수 있다.
- 다음 챕터부터는 이 구조를 실제로 구현하기 시작한다.