AIPilotSmarteasy 랜딩페이지 만들기 – Vercel V0와 함께
V0를 사용해 웹앱 사용자 인터페이스를 만들기 위한 프롬프트를 위해 AIPilotSmarteasy Vercel V0과 협력합니다.
1. AIPilotSmarteasy Vercel V0과 ‘랜딩페이지 만들기’ 대화 시작
| AIPilotSmarteasy 랜딩페이지를 만들려고 합니다. |
AIPilotSmarteasy Vercel V0는 몇 가지 질문합니다.
저는 AIPilotSmarteasy에 대한 설명들을 제공하고, 그 질문들에 답합니다.
AIPilotSmarteasy Vercel V0는 사용자 인터페이스 생성을 위한 프롬프트를 제공합니다.
좀 더 여러 이야기를 해야 하지만, 그건 미루고 바로 다음 작업을 합니다.
2. V0에게 프롬프트를 복사해서 제공합니다.
V0는 제공된 프롬프트에 따라 랜딩페이지를 설계하고 코딩을 제공합니다.
3. Cursor에서 AIPilotSmarteasy 랜딩페이지 프로젝트를 생성합니다.
| Next.js 14 프로젝트 landing-page를 생성해주세요. |
4. Github 레파지토리 생성
Cursor 왼쪽 하단에 Git 아이콘을 클릭하고, 중앙 상단에 제시되는 명령들 중, public으로 Publish하는 명령을 선택합니다. Github 연동 관련 작업을 해야 할 수 있습니다.
제가 연동해 생성한 레파지토입니다. https://github.com/smarteasy/landing-page
5. V0 생성 결과물을 Cursor로 가져오기
V0에서 “Add to Codebase” 버튼을 클릭해서 Cursor에서 생성된 사용자 인터페이스를 가져올 명령을 받아 복사합니다.
Cursor 터미널에서 복사한 명령을 붙여넣고 실행합니다. 그러면 Cursor가 V0에서 생성한 user interface(저의 경우 landing-page.tsx로 작성되었습니다.)를 가져옵니다.
landing-page\src\components\landing-page.tsx 를 더블클릭해서 열고, Chat 패널에 다음과 같이 작성하고 엔터합니다. Cursor 응답 내용을 읽어가면서 하나 하나 합니다.
| landing-page 앱이 실행되면 이 화면이 나타날 수 있게 해 주세요. |
npm run dev해서 웹앱이 잘 실행되는지 확인합니다.
변경사항을 commit합니다.
6. Vercel 플랫폼에 배포
깃헙 레파지토리를 Vercel 플랫폼에 배포할 수 있습니다.
제가 배포해서 실행되는 주소는 https://landing-page-eight-jade.vercel.app/ 입니다. 이 주소는 앞으로도 AIPilotSmarteasy의 랜딩 페이지로 사용할 것입니다.
