Cursor AI를 이용한 랜딩 페이지 제작 튜토리얼

Cursor AI를 이용한 랜딩 페이지 제작 튜토리얼

Cursor Landing Page Full Tutorial (No Coding just AI Prompts)

 

안녕하세요. 오늘은 Cursor AI를 사용하여 코딩 없이 간단한 프롬프트만으로 랜딩 페이지를 만드는 방법에 대해 알아보겠습니다. 이 방법을 사용하면 비즈니스, 개인 브랜드, 또는 어떤 목적으로든 깔끔한 랜딩 페이지를 단 5분 만에 만들 수 있습니다.

Cursor AI 소개

Cursor AI는 현재 시장에서 가장 뛰어난 AI 코딩 도구 중 하나입니다. 이 도구를 사용하면 코딩 경험이 없는 사람도 쉽게 웹 페이지를 만들 수 있습니다.

랜딩 페이지 제작 과정

1. Cursor 설치 및 프로젝트 설정

1. Cursor를 다운로드하고 설치합니다. 설치는 약 30초 정도 소요됩니다.
2. Cursor를 실행하고 새 창을 엽니다.
3. '폴더 열기'를 선택하고 원하는 위치에 새 폴더를 만듭니다 (예: "Landing_yo").
4. 생성한 폴더를 엽니다.

2. Composer 사용하기

1. Command + I를 눌러 Composer를 엽니다.
2. Agent 모드를 선택합니다.
3. 제공된 GitHub 템플릿 링크를 붙여넣고 실행합니다.

3. 템플릿 설치 및 실행

1. 터미널에서 npm install 명령을 실행합니다.
2. 서버를 실행합니다 (npm run dev).
3. localhost:3000 링크를 Command + 클릭하여 브라우저에서 템플릿을 확인합니다.

4. 이미지 추가 및 커스터마이징

1. 원하는 이미지를 클립보드에 복사합니다.
2. Cursor로 돌아가 이미지를 붙여넣고, 원하는 변경사항을 프롬프트로 설명합니다.
3. AI가 변경사항을 적용하는 동안 기다립니다.

5. 스타일 조정

1. 필요한 경우 추가적인 스타일 조정을 요청합니다.
2. 변경사항을 확인하고 필요시 추가 수정을 요청합니다.

6. GitHub 저장소 생성

1. GitHub에서 새 저장소를 만듭니다.
2. 저장소 이름을 지정하고 생성합니다.

7. Vercel 배포 준비

1. Vercel 계정에 로그인합니다.
2. Cursor에서 Vercel 배포 명령을 실행합니다.

8. Vercel 배포 과정

1. Vercel CLI 명령을 따라 프로젝트를 설정합니다.
2. 프로젝트 이름, 디렉토리 등을 지정합니다.
3. 배포 과정을 지켜봅니다.

9. 도메인 연결

1. 도메인 제공업체(예: Namecheap)에서 도메인 설정으로 이동합니다.
2. DNS 설정에서 A 레코드와 CNAME 레코드를 추가합니다.
3. Vercel에서 제공하는 값을 사용하여 레코드를 설정합니다.

10. 최종 확인

1. DNS 설정이 올바르게 되었는지 확인합니다.
2. 설정한 도메인으로 접속하여 랜딩 페이지를 확인합니다.
3. 필요한 경우 추가 수정을 진행합니다.
4. 모든 기능이 정상적으로 작동하는지 테스트합니다.
5. 완성된 랜딩 페이지를 공유하고 활용합니다.

결론

이렇게 Cursor AI를 사용하면 코딩 지식 없이도 간단한 프롬프트만으로 전문적인 랜딩 페이지를 만들 수 있습니다. 이 방법은 시간을 절약하고 빠르게 웹 presence를 구축하고자 하는 개인이나 소규모 비즈니스에 특히 유용합니다.

주요 프롬프트

1. "Copy this landing page perfectly but call the app 'say short' instead of 'say briefly' this as closely as you can please focus and do it well"
2. "Focus more on the styling this time make sure everything is nice and clean and adds the color the Styles the font everything"
3. "Make this for a site called create.in instead"
4. "I want to deploy to Vercel please do it all"

이러한 프롬프트들을 사용하여 AI에게 구체적인 지시를 내리고, 원하는 대로 랜딩 페이지를 커스터마이즈할 수 있습니다.