Vibe Coding은 끝없는 코드 라인 대신 자연 언어를 사용하여 애플리케이션을 생성함으로써 소프트웨어 개발의 세계를 재구성하고 있습니다. Andrej Karpathy와 같은 비전가들로부터 영감을 얻은이 혁신적인 접근 방식은 개발자가 단순히 아이디어를 말하거나 입력 할 수 있으며 Cursor AI와 같은 AI 도구는 무거운 리프팅을 처리합니다. Cursor AI는 초보자와 전문가 모두를위한 워크 플로우를 가속화하는 획기적인 코드 편집기입니다. 일상적인 작업을 자동화하여 개발자가 창의적인 디자인 및 전략적 문제 해결에 집중할 수 있도록합니다. 이 기사에서는 Cursor AI와의 Vibe 코딩이 현대 소프트웨어를 구축하는 방법을 어떻게 변화시키는 지 철저히 탐구 할 것입니다.
VIBE 코딩은 초점이 구문 및 수동 코딩에서 고급 설계 및 아이디어 표현으로 이동하는 프로그래밍의 패러다임 전환입니다. 코드를 힘들게 입력하는 대신 응용 프로그램이 원하는 것을 설명합니다. AI는 지침을 취하고 처리하며 최소한의 개입으로 작업 코드를 생성합니다. 결과적으로 코딩 경험이 제한된 사람들조차도 기능적 응용 프로그램을 빠르게 구축 할 수 있습니다. 이 방법은 실리콘 밸리와 그 너머에서 물결을 만들어 소프트웨어 개발을 민주화 할 것을 약속합니다.
" 실제로 코딩이 아닙니다. 나는 단지 물건을보고, 물건을 말하고, 물건을 달리고, 복사하는 것들을 보았습니다. 그리고 그것은 대부분 작동합니다. "-Andrej Karpathy
핵심적으로 Vibe Coding은 응용 프로그램이 원하는 것을 설명하고 AI 도구가 필요한 코드를 생성하도록하는 것을 의미합니다. 아이디어 표현, 반복적 인 정제 및 일상적인 코딩 작업 자동화에 관한 것입니다. 이 프로세스는 자연어 프롬프트 및 지속적인 피드백에 의존하여 기능적 고품질 소프트웨어를 형성합니다.
전통적인 코딩은 깊은 기술 전문 지식과 시간 소모적 디버깅을 요구하지만 Cursor와 같은 AI 기반 도구는 구두 또는 서면 지침을 해석하고 코드를 신속하게 생성합니다. 이 진화는 개발자의 역할을 수동 코딩에서 창의적 문제 해결 및 시스템 설계로 이동시킵니다.
또한 더 빠른 프로토 타이핑을 가능하게하고 생산성을 크게 향상시킵니다. 평범한 작업을 자동화함으로써 비전문가조차도 작업 애플리케이션을 구축 할 수있는 문을 열어 소프트웨어 개발이보다 접근 가능하고 혁신적입니다.
Cursor AI는 자연어 지침을 코드로 변환하는 고급 AI 기반 통합 개발 환경 (IDE)입니다. Cursor AI는 최첨단 언어 모델 및 상황 분석을 활용하여 개발자가 코드를 효율적으로 생성, 디버그 및 유지하여 전체 개발 프로세스를 간소화 할 수 있도록 도와줍니다.
이제 커서 AI가 어떻게 작동하는지 이해합시다. 관련 단계는 다음과 같습니다.
1. 자연어 입력
개발자는 "사용자 인증 경로 생성"또는 "이 기능의 오류 수정"과 같은 요구 사항을 입력하거나 말하면서 시작합니다. 이 입력은 AI의 행동의 기초를 형성합니다.
2. 맥락 분석
코드를 생성하기 전에 Cursor AI는 전체 코드베이스를 분석합니다. 프로젝트 구조, 코딩 규칙 및 기존 패턴을 이해하여 새로운 코드가 기존 시스템과 완벽하게 통합되도록합니다.
3. AI 기반 코드 생성
AI는 프로그래밍 작업을 위해 미세 조정 된 강력한 언어 모델을 사용하여 자연어 프롬프트를 작업 코드로 변환합니다. 신뢰할 수있는 생산 준비 코드를 생성하기 위해 모범 사례와 확립 된 코딩 표준을 준수합니다.
4. 자동 디버깅 및 정제
Cursor AI는 구문 오류 및 논리 문제를 자동으로 감지하여 코드 생성을 넘어냅니다. 디버깅 제안을 제공하고 개발자 피드백에 따라 출력을 반복적으로 개선하여 수동 개입없이 문제를 신속하게 해결하는 데 도움이됩니다.
5. 강화 된 문서 조회
IDE에는 개발자가 내부 프로젝트 문서와 외부 리소스 모두에 신속하게 액세스 할 수있는 스마트 문서 시스템을 통합합니다. 이 기능을 사용하면 개발자가 필요에 따라 관련 코드 예제, API 문서 및 문제 해결 안내서를 쉽게 찾을 수 있습니다.
Cursor AI의 주요 기능은 다음과 같습니다.
Cursor AI는 반복적 인 작업을 자동화하여 개발 시간을 크게 줄여 개발자가 높은 수준의 설계 및 문제 해결에 집중할 수 있도록합니다.
Vibe 코딩에 다이빙하기 전에 Cursor AI를 설치해야합니다. 시작하기위한 단계별 가이드는 다음과 같습니다.
공식 웹 사이트 (일반적으로 cursor.ai 또는 [cursor.com])를 방문하여 다운로드 버튼을 클릭하십시오. 웹 사이트는 운영 체제를 자동으로 감지하고 올바른 설치 파일을 제공해야합니다.
Windows 및 MacOS의 경우 :
다운로드 된 설치 프로그램 파일을 실행하고 다른 응용 프로그램과 마찬가지로 화면 지침을 따르십시오.
Linux (Ubuntu)의 경우 :
- Linux에 제공된 AppImage 파일을 다운로드하십시오.
- 터미널을 열고 시간을 실행하여 영구 위치 (예 : /Opt 디렉토리)로 이동합니다.
Sudo MV [Fame-of-File] /opt/cursor.appimage
- AppImage Execable을 사용하여 다음을 수행하십시오.
chmod x /opt/cursor.appimage
Windows 및 MacOS의 경우 :
설치 후 Desktop 바로 가기 또는 응용 프로그램 메뉴에서 Cursor AI를 시작하십시오.
Linux (Ubuntu)의 경우 :
- 터미널을 열고 실행하여 데스크탑 항목을 만듭니다.
sudo nano /usr/share/applications/cursor.desktop
- 다음 내용을 파일에 삽입하십시오.
[데스크탑 항목]
이름 = 커서
exec =/opt/cursor.appimage
아이콘 =/opt/cursor.png
유형 = 응용 프로그램
카테고리 = 개발;
- 파일을 저장합니다 (Ctrl x를 누른 다음 y, 입력).
- (선택 사항) Cursor.png라는 PNG 이미지를 /opt 디렉토리에 배치하여 응용 프로그램 아이콘을 설정하십시오. 변경 사항이 적용되도록 로그 아웃하고 로그인해야 할 수도 있습니다.
첫 번째 시작시 키보드 단축키, AI 상호 작용을위한 언어 및 코드베이스 전체 인덱싱을 활성화할지 여부와 같은 필수 설정을 구성하라는 메시지가 표시됩니다.
또한 터미널에서 직접 커서 AI를 시작할 수있는 추가 명령을 설치하도록 선택할 수도 있습니다.
Visual Studio Code 사용자 인 경우 VS 코드 설정을 가져 오라는 메시지가 표시 될 수 있습니다. 이 단계는 확장, 테마, 사용자 설정 및 키보드 바로 가기를 가져와 친숙한 개발 환경을 제공합니다.
이메일, Google 또는 GitHub 자격 증명을 사용하여 계정을 만듭니다. 신규 사용자는 종종 등록시 커서 프로의 무료 평가판을받습니다.
Cursor AI는 취미, 프로 및 비즈니스의 세 가지 가격 계획을 제공합니다. 무료 버전 또는 취미 계획에는 시험 기간 후 한 달에 14 일 Pro 시험, 2,000 개 완료 및 50 개의 느린 프리미엄 요청이 제공됩니다. 월 $ 20의 가격 인 Pro Plan에는 무제한 완료, 500 개의 빠른 프리미엄 요청 및 무제한 느린 요청이 포함됩니다. 매년 청구 된 경우 월 $ 16/월의 할인 된 가격으로 프로 계획을받을 수 있습니다. 사용자/월 $ 40/월에 비용이 든 사업 계획은 중앙 청구서, 관리자 제어, 개인 정보 집행 및 SSO 통합을 Pro Plan에 추가합니다.
이러한 고정 가격 계층 외에도 Cursor AI는 사용자 지정 가격과 확장 된 지원을 제공하는 엔터프라이즈 솔루션도 제공합니다. 14 일 Pro 시험은 무제한 완료 및 500 개의 빠른 요청에 액세스 할 수 있지만 일부 사용자는 비공식 평가판 재설정을보고합니다. 빠른 요청은 우선 순위가 지정되며 느린 요청에는 지연이 발생할 수 있습니다. 가격 책정은 GPT-4O 또는 Claude와 같은 대규모 AI 모델을 실행하기 때문에 지속 가능성을 보장합니다.
이제 Cursor AI의 도움으로 Flask를 사용하여 웹 기반 할 일 앱을 구축해 보겠습니다. AI 지원 코딩을 사용하면 필요에 따라 설계 및 기능을 정제하면서 프로젝트를 신속하게 설정할 수 있습니다.
Flask 및 Cursor AI를 사용하여 웹 기반 할 일 앱을 작성하면 개발자가 설계 및 기능에 중점을 두면서 개발 프로세스를 간소화 할 수 있습니다. 이 안내서는 프로젝트 디렉토리 설정에서 애니메이션 추가에 이르기까지 매끄럽고 세련된 응용 프로그램을 보장합니다.
Cursor AI는 동일한 프롬프트에 대해 다른 출력을 생성 할 수 있습니다. 프로젝트 요구 사항에 맞게 수신 한 출력에 따라 후속 프롬프트를 수정하는 것이 좋습니다. 이제 시작하겠습니다.
할 일 앱을 생성하기 전에 프로젝트 전용 디렉토리를 만드는 것이 좋습니다. 이를 통해 Cursor AI는 생성 된 모든 파일을 올바른 위치에 배치 할 수 있습니다.
디렉토리를 만들고 프로젝트를 발판하라는 프롬프트 : “플라스크를 사용하여 앱을 수행 할 웹 기반 웹 구축”
"플라스크를 사용하여 웹 기반 할 일 앱을 구축" 하면 Cursor AI가 신속하게 프로젝트를 설정합니다. 작업 공간을 확인하고 Espection.txt Dependencies for Dependence, Main Application 용 App.py , HTML 용 템플릿/ 폴더 및 CSS 용 정적/ 폴더를 작성합니다.
Cursor AI는 작업을 추가, 표시 및 삭제할 기능이있는 앱을 빌드합니다 . 스토리지에 SQLITE 데이터베이스를 사용하고 애니메이션, 호버 효과 및 Poppins 글꼴이있는 현대적이고 반응이 좋은 UI를 설계합니다. 각 작업에는 추적을위한 타임 스탬프 도 포함되어 있습니다.
앱을 실행하려면 PIP 설치 -R 요구 사항을 사용하여 종속성을 설치하고 Python app.py를 사용하여 서버를 시작하는 것이 좋습니다 . 위의 이미지에서 볼 수 있듯이“모두 수락”을 클릭하여 모든 변경 사항을 수락했습니다.
여기서 디렉토리가 생성되었음을 알 수 있습니다.
아래 비디오에서 Cursor AI가 할 일 앱을 만드는 데 필요한 파일을 만들었 음을 알 수 있습니다.
파일이 생성 된 후 다음 단계는 요구 사항에서 필요한 종속성을 설치하는 것입니다. 이를 위해 커서 에이전트에게 프롬프트를 제공 할 것입니다.
프롬프트 : “ 요구 사항 설치 ”
이미지에서 볼 수 있듯이 Cursor AI에서 "run command"버튼을 클릭하여 설치 프로세스를 확인하기 만하면됩니다.
모든 종속성이 설치되면 이제 App.py 파일을 실행하여 플라스크 응용 프로그램을 시작할 수 있습니다.
프롬프트 : “이제 app.py를 실행하십시오”
그리고 "run command"를 클릭하십시오.
앱을 실행 한 후이 URL을 클릭하면 웹 기반 할 일 앱 http://127.0.1:5000을 얻었습니다.
앱이 성공적으로 실행 중이지만 프론트 엔드에 만족하지 않습니다. 너무 기본적으로 보이고 내가 원하는만큼 시각적으로 매력적이지 않습니다. 디자인을 향상시키기 위해 Cursor AI는 스타일을 정제하고 레이아웃 최적화 및 대화식 요소를 추가하여 UI를 더욱 매력적으로 만들어 개선을하도록 촉구합니다. 그게 어떻게되었는지 봅시다
UI 향상 프롬프트 : “현재 앱의 현재 디자인이 마음에 들지 않으며 더 많은 파란색을 포함하고 더 좋고 눈에 띄게 만듭니다”
다음은 변경 사항에 대한 비디오가 있습니다.
이러한 개선 사항을 적용한 후, 할 일 목록은 더욱 세련되고 시각적으로 매력적으로 보입니다. 이제 작업을 추가하고 작동 방식을 살펴 보겠습니다.
따라서 작업을 추가 한 후 '완료'또는 '삭제'와 같은 옵션이 나타납니다. '완료'는 작업을 수행했음을 보여주고 '삭제'는 목록에서 작업을 제거합니다. 또한 목록을 만드는 시간을 보여줍니다.
새롭고 개선 된 웹 앱이 준비되었습니다.
UI가 좋아 보인다! 하지만 이제 애니메이션을 추가합시다.
우리는 매끄러운 전환을 만들고 사용자 경험을 향상시키기 위해 애니메이션을 추가 할 수 있습니다.
애니메이션 추가 : "작업 작업, 버튼 호버 효과 및 전환을위한 부드러운 CSS 및 JavaScript 애니메이션으로 플라스크 할 일 목록 UI를 향상시킵니다."
"RUN COMMAND"버튼을 클릭하면 애니메이션에 대한 JavaScript를 생성하는 것을 볼 수 있습니다.
Cursor AI가 애니메이션을 생성하면 기능을 테스트하고 더 부드러운 경험을 위해 정제 할 수 있습니다.
다음은 Cursor AI로 Vibe Coding을 통해 만든 웹 기반 할 일 앱의 최종 결과입니다.
애니메이션을 구현 한 후 작업을 추가, 업데이트 및 삭제하여 전체 응용 프로그램을 테스트하여 원활하게 작동하는지 확인하십시오. 필요한 경우 사용자 경험을 향상시키기 위해 추가 개선을 수행하십시오.
또한 읽으십시오 : Replit Mobile 앱으로 무료로 전화기에 No-Code AI 에이전트를 구축하십시오!
Cursor AI와 같은 플랫폼으로 VIBE 코딩은 변형 기능을 제공하지만 자체 도전 과제도 제공합니다. 이러한 한계를 이해하는 것은 개발자가 단점을 완화하면서 잠재력을 극대화하는 데 중요합니다.
Cursor ai를 사용하면 아이디어를 작업 코드로 바로 포장하는 것처럼 느껴졌습니다. 빠르고 직관적이며 진정으로 재미있었습니다. 완벽하지 않고 여전히 인간의 감독이 필요하지만 코딩을 단순화하는 방식은 게임 변화입니다. 개발자라면 Vibe 코딩을 시도해야합니다. 그것은 당신이 일하는 방식을 바꿀 수 있습니다!
Cursor AI는 코딩을 쉽게 느끼게하여 최소한의 노력으로 아이디어를 기능적 응용 프로그램으로 바꿉니다. 완벽하지 않으며 복잡한 논리 및 버그 수정에 대한 인간의 개입이 필요하지만 개발을 간소화하는 능력은 부인할 수 없습니다. 이를 통해 개발자는 반복적 인 코딩 작업 대신 창의성에 집중할 수 있습니다. 초보자이든 숙련 된 프로그래머이든 Cursor AI와의 Vibe 코딩은 혁신, 속도 및 효율성이 중심적인 소프트웨어 개발의 미래를 엿볼 수 있습니다.
A. VIBE 코딩은 개발자가 자연어로 원하는 것을 설명하는 소프트웨어 개발에 대한 새로운 접근 방식이며 Cursor AI와 같은 AI 도구는 코드를 자동으로 생성합니다.
Q2. Vibe 코딩은 기존 코딩과 어떻게 다릅니 까?A. 전통적인 코딩에는 구문, 디버깅 및 구조화 코드의 수동 쓰기가 필요하지만 VIBE 코딩은 높은 수준의 아이디어 표현식에 중점을 두어 AI가 코드 생성 및 개선을 처리 할 수 있도록합니다.
Q3. 분위기 코딩으로 누가 혜택을 누릴 수 있습니까?A. 초보자와 숙련 된 개발자는 코딩 작업을 단순화하고 개발 속도를 높이며 문제 해결 및 설계에 더 집중할 수 있으므로 VIBE 코딩의 혜택을 누릴 수 있습니다.
Q4. Cursor AI 란 무엇이며 분위기 코딩에 어떻게 도움이됩니까?A. Cursor AI는 자연 언어 프롬프트를 작업 코드로 변환하고 디버깅을 자동화하며 문서를 지원하여 개발을보다 빠르고 효율적으로 만드는 AI 기반 코드 편집기입니다.
Q5. VIBE 코딩 사용을 위해 코딩을 알아야합니까?A. 일부 프로그래밍 지식이 도움이되지만 VIBE 코딩은 구문 및 구조를 자동으로 처리하여 코딩 경험이 제한된 사람들이 소프트웨어 개발에 액세스 할 수 있도록합니다.
Q6. AI 생성 코드가 인간 프로그래머를 완전히 대체 할 수 있습니까?A. AI는 자동화 및 효율성을 지원할 수 있지만 복잡한 논리를 처리하고 디버깅 및 고품질의 안전한 코드를 보장하는 데 여전히 인간의 감독이 필수적입니다.
Q7. 바이브 코딩의 주요 장점은 무엇입니까?A. VIBE 코딩은 개발을 가속화하고, 반복적 인 작업을 줄이고, 비전거의 접근성을 향상 시키며, 개발자가 창의성과 전략적 문제 해결에 집중할 수 있도록합니다.
위 내용은 나는 Cursor AI와 함께 Vibe 코딩을 시도했는데 놀랍습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
