AI 코딩 전문가가 되는 3시간: Cursor 완벽 가이드

AI 코딩 전문가가 되는 3시간: Cursor 완벽 가이드

머리말:

코딩 경험이 전혀 없어도 괜찮습니다. 이 가이드에서는 AI를 활용하여 앱을 만드는 방법을 알려드립니다. 전 세계에서 가장 스마트한 AI 코딩 도구인 Cursor를 사용하여 "바이브 코딩"을 경험하고, 3시간 안에 AI 코딩 전문가가 되어 보세요.

소개:

본 튜토리얼은 3가지 주요 파트로 구성되어 있습니다.

1. Cursor 기초: Cursor의 기본 개념, 용어, 사용법을 익힙니다. 코딩 경험이 없는 사람도 AI 코딩 도구와 효과적으로 소통하는 방법을 배울 수 있습니다. AI 이미지 생성기를 만들어 앱 개발이 얼마나 쉬운지 직접 확인해 보세요.
2. 랜딩 페이지 제작 및 배포: GitHub 라이브러리를 활용하여 멋진 애니메이션 효과가 있는 랜딩 페이지를 만들고, 개인 도메인에 배포하는 과정을 안내합니다.
3. AI 기반 앱 개발: Open AI Deep Research의 단점을 보완하는 AI 기반 앱을 개발합니다. 아이디어를 입력하면 자동으로 이미지를 생성하고, AI를 통해 차트를 편집하여 보고서에 시각적인 요소를 더할 수 있습니다.

본론:

1. Cursor 기초

Cursor란 무엇인가?

Cursor는 AI 코딩 도구로, 사용자가 아이디어를 입력하면 자동으로 코드를 생성하여 앱을 만들 수 있도록 도와줍니다. 웹 기반 도구와 달리, Cursor는 프로젝트 파일을 사용자 컴퓨터에 저장하여 더욱 강력한 제어 기능을 제공합니다.

Cursor 시작하기:

1. Cursor 웹사이트 (cursor.sh)에서 Cursor를 다운로드하여 설치합니다.
2. Cursor를 실행하고 "Open Project"를 선택하여 새 프로젝트를 생성합니다.
3. 프로젝트 파일을 저장할 폴더를 선택합니다. 폴더 이름은 중요하지 않습니다.
4. Command + I를 눌러 Composer 창을 엽니다. Composer는 AI 에이전트로, 파일을 생성, 편집, 삭제하고 터미널 명령을 실행할 수 있습니다.

Composer 사용법:

• 코드베이스 이해: Composer에 "What is a codebase? Answer by creating a new file called codebase_explanation.txt file"과 같은 명령을 입력하여 코드베이스에 대한 설명을 텍스트 파일로 생성합니다.
• 파일 생성 및 편집: Composer를 사용하여 텍스트 파일, 코드 파일, 폴더 등을 만들고 편집합니다.
• 마크다운 변환: 텍스트 파일을 마크다운 파일(.md)로 변환하여 줄 바꿈을 적용하고 가독성을 높입니다.
• 코드 생성: Composer에 원하는 앱의 디자인과 기능을 설명하는 프롬프트를 입력하여 코드를 생성합니다.

AI 이미지 생성기 만들기:

1. Composer 창을 열고 다음 프롬프트를 입력합니다. I want you to create an HTML and JS animation of balls bouncing in a rectangle and they should be red blue green orange and white
2. Composer가 생성한 index.html 및 animation.js 파일을 확인합니다.
3. Composer에 "Run it locally" 명령을 입력하여 로컬 서버를 실행하고, 웹 브라우저에서 앱을 실행합니다.
4. Composer에 추가 명령을 입력하여 애니메이션을 수정합니다. 예를 들어, "Add four more green balls" 또는 "Make these balls bounce off of each other"와 같은 명령을 입력할 수 있습니다.

2. 랜딩 페이지 제작 및 배포

GitHub 활용:

GitHub는 개발자들이 코드를 저장하고 공유하는 플랫폼입니다. 코딩 경험이 없어도 GitHub에서 유용한 라이브러리를 찾아 랜딩 페이지를 만들 수 있습니다.

1. Perplexity 또는 기타 AI 검색 엔진을 사용하여 멋진 애니메이션 효과가 있는 랜딩 페이지 템플릿을 검색합니다.
2. GitHub에서 찾은 템플릿의 저장소 URL을 복사합니다.
3. Cursor에서 "Clone Repo"를 선택하고 저장소 URL을 붙여넣어 프로젝트를 복제합니다.
4. Composer를 사용하여 랜딩 페이지의 디자인과 내용을 수정합니다.
5. Composer에 "Run this locally" 명령을 입력하여 로컬 서버에서 랜딩 페이지를 확인합니다.

Vercel을 통한 배포:

Vercel은 웹 애플리케이션을 쉽게 배포할 수 있는 플랫폼입니다.

1. Vercel 웹사이트 (vercel.com)에서 계정을 생성합니다.
2. Cursor에서 생성한 프로젝트를 GitHub 저장소에 업로드합니다.
3. Vercel에서 GitHub 저장소를 가져와 새 프로젝트를 생성합니다.
4. Vercel이 제공하는 기본 도메인 또는 사용자 지정 도메인을 사용하여 랜딩 페이지를 배포합니다.

3. AI 기반 앱 개발

Open AI Deep Research 활용:

Open AI Deep Research는 AI가 생성하는 보고서로, 유용한 정보를 얻을 수 있지만 텍스트 위주로 구성되어 있어 지루할 수 있습니다. 이 문제를 해결하기 위해 AI 기반 앱을 개발하여 보고서에 시각적인 요소를 더할 수 있습니다.

1. Open AI Deep Research를 사용하여 보고서를 생성합니다.
2. 보고서의 내용을 앱에 복사하여 붙여넣습니다.
3. 각 섹션에 맞는 이미지를 생성하고 삽입합니다.
4. AI를 사용하여 보고서 내용을 요약하고 차트를 생성합니다.

Firebase를 통한 데이터베이스 및 인증:

Firebase는 Google에서 제공하는 클라우드 플랫폼으로, 데이터베이스, 인증, 호스팅 등 다양한 기능을 제공합니다. Firebase를 사용하여 앱의 데이터를 저장하고 사용자 인증을 관리할 수 있습니다.

1. Firebase 웹사이트 (firebase.google.com)에서 계정을 생성하고 새 프로젝트를 만듭니다.
2. Firebase 콘솔에서 데이터베이스, 인증, 스토리지 기능을 설정합니다.
3. Cursor 프로젝트에 Firebase API 키를 추가하여 앱과 Firebase를 연결합니다.
4. Firebase 인증을 사용하여 사용자 로그인 기능을 구현합니다.

주요 내용 사용 방법 30단계 세분화:

Cursor 설정 및 기본 조작

1. Cursor 다운로드: Cursor 공식 웹사이트(cursor.sh)에서 운영체제에 맞는 설치 파일을 다운로드합니다.
2. Cursor 설치: 다운로드한 설치 파일을 실행하여 Cursor를 설치합니다.
3. Cursor 실행: 설치가 완료되면 Cursor를 실행합니다.
4. 새 프로젝트 생성: Cursor 메인 화면에서 "Open Project" 버튼을 클릭합니다.
5. 프로젝트 폴더 선택: 프로젝트 파일을 저장할 폴더를 선택하거나, 새 폴더를 생성합니다.
6. Composer 열기: 프로젝트가 열리면, Command + I (Mac) 또는 Ctrl + I (Windows) 키를 눌러 Composer 창을 엽니다.
7. Agent 모드 활성화: Composer 창 상단의 "Agent" 스위치를 켜서 Agent 모드를 활성화합니다.
8. 기본 명령 입력: Composer 창에 "What is a codebase?"와 같은 간단한 명령을 입력하고, Agent가 생성하는 결과를 확인합니다.
9. 파일 생성 명령: Composer 창에 "Create a new file called hello.txt"와 같은 명령을 입력하여 새 파일을 생성합니다.
10. 파일 내용 편집: 생성된 hello.txt 파일을 열어 내용을 편집합니다.

AI 기반 코딩 및 디자인

1. 기본 HTML/JS 생성 요청: Composer 창에 "Create an HTML and JS animation of bouncing balls"와 같은 명령을 입력하여 기본적인 웹 페이지 코드를 생성합니다.
2. 로컬 서버 실행: Composer 창에 "Run it locally" 명령을 입력하여 로컬 서버를 실행하고, 생성된 웹 페이지를 브라우저에서 확인합니다.
3. 코드 수정 요청: 브라우저에서 확인한 웹 페이지의 디자인이나 기능을 수정하기 위해, Composer 창에 구체적인 요청 사항을 입력합니다 (예: "Change the ball color to red").
4. GitHub 저장소 복제: 원하는 템플릿 또는 프로젝트가 있는 GitHub 저장소 URL을 복사합니다.
5. 저장소 복제 명령: Cursor에서 "Clone Repo" 버튼을 클릭하고, 복사한 GitHub 저장소 URL을 붙여넣어 프로젝트를 복제합니다.
6. 복제된 프로젝트 수정: 복제된 프로젝트의 코드를 Composer를 사용하여 수정합니다.
7. 이미지 생성 API 활용: 이미지 생성 API (예: Fal AI)의 API 키를 발급받고, Composer를 통해 해당 API를 호출하는 코드를 생성합니다.
8. 프롬프트 엔지니어링: 원하는 이미지를 생성하기 위해 Composer에 입력하는 프롬프트 (명령어)를 구체적으로 작성합니다 (예: "A cat wearing a hat").
9. AI 기반 차트 생성: 데이터 시각화를 위해, Composer를 사용하여 AI 기반 차트 생성 코드를 생성합니다.
10. 생성된 차트 편집: AI가 생성한 차트의 내용이나 디자인을 수정하기 위해, Composer에 구체적인 요청 사항을 입력합니다.

데이터베이스 및 사용자 인증

1. Firebase 프로젝트 생성: Firebase 콘솔(firebase.google.com)에서 새 프로젝트를 생성합니다.
2. Firebase API 키 발급: Firebase 프로젝트 설정에서 API 키를 발급받습니다.
3. Firebase 인증 설정: Firebase 콘솔에서 Google 로그인과 같은 사용자 인증 방법을 설정합니다.
4. Firebase 데이터베이스 설정: Firebase 콘솔에서 Cloud Firestore 데이터베이스를 생성하고, 데이터 저장 규칙을 설정합니다.
5. 사용자 인증 코드 생성: Composer를 사용하여 Firebase 인증 API를 호출하는 코드를 생성합니다.
6. 데이터베이스 연동 코드 생성: Composer를 사용하여 Firebase 데이터베이스 API를 호출하는 코드를 생성합니다.
7. 데이터 저장 로직 구현: 사용자가 입력한 데이터 (예: 보고서 내용, 생성된 이미지)를 Firebase 데이터베이스에 저장하는 로직을 구현합니다.
8. 데이터 불러오기 로직 구현: Firebase 데이터베이스에 저장된 데이터를 불러와 화면에 표시하는 로직을 구현합니다.

배포 및 유지보수

1. Vercel 배포: Vercel(vercel.com)에 가입하고, GitHub 저장소와 연동하여 프로젝트를 배포합니다.
2. 지속적인 유지보수: 앱의 오류를 수정하고, 새로운 기능을 추가하며, 사용자 피드백을 반영하여 앱을 지속적으로 개선합니다.

결론:

이 가이드에서 제시된 단계를 따라하면 코딩 경험이 없어도 AI 코딩 도구인 Cursor를 사용하여 앱을 만들 수 있습니다. AI 코딩의 세계는 무한한 가능성을 제공하며, 이 가이드가 여러분의 여정에 도움이 되기를 바랍니다.

프롬프트 (Prompts):

• Create an HTML and JS animation of balls bouncing in a rectangle and they should be red blue green orange and white
• Run it locally
• Add four more green balls
• Make these balls bounce off of each other
• I want you to create a landing page for my app and I want you to start off by making it look like this except where they mention app I want you to say design this is going to be an idea to design tool and it's going to be awesome.
• please give me another one that summarizes this first section adhere to um adhere to proper formatting and sizing rules just give it to me uh in chat not in code in the code base
• Docs for claw
• I want to use the clae API on these um placeholders for mermaid diagrams I want there to be a button that uses AI to generate a mermaid diagram for that section and what it should do is it should look from because these are placed right below the headers and so it should look from header from the current header that you're working under to the next header and that's where it should get the information from and so that's what it should use as the input prompt to generate a mermaid diagram and the output should only be a mermaid diagram
• I created a new GitHub repo at this link right here I just initiated it and I want you to push this code to that and it is a public repo put it on GitHub

These prompts are just a sample of the many prompts, both direct and implied, that are available through the data in the beginning