프롤로그: 왜 나만의 웹사이트를 만들어야 하는가 요즘은 ‘자동화 수익’을 가르친다는 강의가 넘쳐납니다. 애드센스 블로그, 워드프레스, 노코드 플랫폼… 하지만 그 대부분은 ‘자동화’라는 이름을 붙였을 뿐이지 트렌디한 키워드를 찾아서 글을 매일 올려야
Cloudflare 환경변수, Supabase 키 설정 edge function을 호출할 때는 supabase API key (anon public)가 필요합니다. 복사해줍니다. cloudflare에서 환경변수로 세팅해줍니다. 변수 이름은 임의로 정하
Cursor로 최종 UI/UX 다듬기 (API 기반 데이터 표시) 기존 웹사이트 디자인에서 api 호출 기반의 데이터로 바뀐 모습입니다. 유저친화적으로 UI를 꾸며가면서 최종본까지 개선해줍니다. 여기까지 왔으면 사실상 90%는 끝났습니다. 그런데 사용
Supabase Edge Function 구현 & WeatherAPI 연동 OPEN API를 제공하는 사이트는 스펙 문서도 함께 제공합니다. 직접 스펙을 들여다볼 필요 없이 Cursor에게 작업을 위임합니다. 또한, 우리가 추후에 사용할 서버리스 기능
OPEN API 선정하기 저는 날씨 관련 웹사이트를 만들 것이기 때문에, 날씨 관련 OPEN API를 찾아볼 겁니다. 요즘 세상에는 수많은 OPEN API가 있지만, 우리가 사용할 수 있는 것들은 정해져있습니다. 무료여야 함 상업적 사용이 허용되어야
실제로 광고 수익화에 성공한 웹사이트 소개 저의 경우, 처음으로 광고 수익화에 성공했던 서비스는 qwzd.kr이라는 사이트입니다. 넥슨의 FC 온라인(구 피파온라인) 전적을 검색할 수 있는 웹 서비스입니다. 저는 피파온라인이라는 게임을 즐기던 대학생이
v0로 초기 화면 설계 및 개선 사이트의 보이는 부분, 쉽게 말해 껍데기를 먼저 만들 겁니다. 경험상 바로 Cursor에 “이런 사이트 만들어줘”라고 시키는 것보다, AI 빌더를 통해 화면 구조를 먼저 잡는 방식이 훨씬 효율적입니다. 코드를 직접 작
이번에 만들어볼 사이트 구조 이해하기 이번에 예시로써 만들어볼 웹사이트는 ‘날씨에 맞게 옷차림을 추천해주는 웹사이트’입니다. 사용자는 브라우저(Chrome, Safari 같은 웹앱)로 웹사이트에 접속하고, 날씨 정보를 볼 수 있습니다. 구성은 어떻게
v0에서 다듬은 FE 완성본을 Cursor로 옮기기 Download ZIP 버튼을 통해 완성본을 다운로드받을 수 있습니다. 압축을 푼 후, 기존 프로젝트(skeleton)로 옮겨 줍니다. 그리고 Cursor를 이용해 디자인을 이식해줍니다.
개발 환경 세팅 사이트를 만들기 전에, 우리가 앞으로 사용할 몇 가지 필수 도구를 준비해두어야 합니다. 이 도구들은 모두 무료이며, 한 번만 설정해두면 이후 과정이 훨씬 편해집니다. 다만 Cursor의 경우에는 일주일 무료체험기간이 있고 이후엔 결제가
