
사용 환경: 맥
*윈도우에서 github안될 때 -> gitkraken설치하기
Cursor에서 배포 방법 물어보기
프롬프트 예시
"나는 이 웹을 vercel로 배포하고 싶어. 어떻게하면 좋아? 바로 진행해줘"
해야할 것
-github 회원가입
-vercel 회원가입(github 계정으로 가입하면 좋음)
*github: 코드 저장소 / vercel: 무료로 배포하는 서비스
-github & vercel 연동
-github에서 repository만들기
-Vercel에서 순서대로 따라하기 Overview-Add New-Project-Import Git Repository-'Import'-'Deploy'
-배포 완료!
github 'push' -> vercel 'deploy'
github라는 오픈된 공간에 코드를 push한 뒤, vercel로 배포(deploy)해야 함
vercel과 supabase 연동하는 법
Cursor에서 Supabase SQL문 요청
프롬프트 예시
나는 프로덕트 디자이너고 넌 20년차 개발자야. 내게 친절하게 설명해주고, 고퀄리티의 서비스를 구현해줘.
내가 만들고 싶은 서비스는 사주일지 궁합을 봐주는 서비스야. 사용자가 1페이지에서 입력하는 정보값이 supabase에 저장되게 할거야.
supabase에서 구현 가능하도록 SQL문을 작성해줘.
서비스 페이지 플로우는 아래와 같이 흘러가.
1. 내 사주 및 개인정보 정보 입력
2. 내 사주 및 최고의 궁합 일지
내사주 설명: 오행과 일지 위주로 구체적이고 임팩트있게. 오행 컬러로 배경컬러를 깔고, 일지를 가장 큰 글씨로 위에 써줘. 그리고 오행과 일주를 상징하는 캐릭터를 각각 그려줘. ex. 을미일주 -> 푸른 양(컬러+동물)
궁합 설명: 최고의궁합/좋은궁합/평범한궁합/최악의 궁합 이렇게 총 4가지로 구분해서 각각 해당하는 일지를 나열해주라.
최고의 궁합(일지 기준): ex. 나(을미일주)와의 최고의 궁합은?
경신일주, 무신일주, 병신일주, 무술일주, 병오일주
좋은 궁합(일지 기준): ex. 정축일주, 병술일주, 갑진일주
평범한 궁합:
최악의 궁합:
2페이지 가장 위에는 '나와 잘맞는 궁합이랑 소개팅하기'라는 뉘앙스의 CTA버튼과 '공유하기'버튼을 추가해줘. 그리고 '나와 잘맞는 궁합이랑 소개팅하기'라는 뉘앙스의 CTA버튼을 눌렀을 땐, 최근 정보를 입력한 사람과 매칭되어 채팅할 수 있도록 연결해줘.
쉽고 다양한 바이브 코딩툴이 있는데 굳이 cursor를 활용하는 이유
- 러버블은 비쌈
- 타사 서비스는 제품이 완성되기까지의 토큰 낭비가 심함
- 버그가 나면 코드 수정이 어려움
'디자인 > 공부' 카테고리의 다른 글
Maker Collective Seoul 2025: 오프라인 강연 요약 (2) | 2025.05.29 |
---|---|
BX Process (0) | 2025.05.11 |
Cursor에서 Supabase 연동하여 웹서비스 만들기 (0) | 2025.05.06 |
Cursor로 바이브 코딩하기 (0) | 2025.04.30 |
[WEB/PC] 사이드+플로팅 영역으로 목차를 보여줄 때 (0) | 2025.04.23 |