바이브 코딩 쉽게 하기: 필수 커서 AI 도구!

채널 아이콘
AI LABS 구독자 10,300명

요약

이 영상은 Cursor와 Taskmaster AI를 활용하여 오류 없는 개발 경험을 제공하는 방법을 설명합니다. 워페이퍼 앱을 예시로 들어 글로벌 설치, 환경 설정, API 키 입력 그리고 PRD 생성과 태스크 관리를 순차적으로 안내합니다. 영상은 도구의 체계적인 워크플로우와 의존성 관리, 그리고 에러 없이 효율적인 개발 사이클을 구현하는 점에 중점을 둡니다.

주요 키워드

Cursor Taskmaster AI API 키 PRD Unsplash API Next.js 태스크 의존성 검색 기능 최적화

하이라이트

  • 🚀 Cursor와 Taskmaster AI를 사용해 개발 도구로 인한 오류를 예방하는 방법을 소개합니다.
  • ⚙️ 글로벌 설치 및 프로젝트 초기화와 env 파일 설정 등 기본 환경 프로세스를 자세히 안내합니다.
  • 📌 앱 아이디어 브레인스토밍 후 PRD를 생성하고, 이를 기반으로 세분화된 태스크로 나누는 과정을 설명합니다.
  • 🌟 태스크 간 의존성과 진행 상황을 실시간으로 확인하며, 에러 발생 시 적절한 대처 방법을 시연합니다.
  • 🔍 API 제한 문제 해결을 위한 임시 대응법과 최종적으로 다양한 기능이 구현된 앱의 데모를 제공합니다.

용어 설명

Cursor

실시간 코드 생성 및 대화형 개발을 지원하는 도구로, 사용자가 한 챗 내에서 전체 앱을 구축할 수 있도록 돕습니다.

Taskmaster AI

태스크 분할 및 관리에 특화된 AI 도구로, 컨텍스트 오버로드를 방지하고 체계적인 워크플로우를 유지합니다.

PRD

Product Requirements Document의 약자로, 제품의 기능, 구조 및 구현 계획을 상세히 정의하는 문서입니다.

Next.js

서버 사이드 렌더링을 지원하는 최신 자바스크립트 프레임워크로, 효율적인 프론트엔드 개발을 돕습니다.

Unsplash API

무료 이미지 제공 플랫폼의 API로, 워페이퍼 앱에서 이미지를 가져오기 위해 사용됩니다.

[00:00:00] 도입 및 문제 제기

영상은 커서 도구 사용 시 발생하는 문제점을 제기합니다. 해결책으로 Taskmaster AI 도입의 필요성을 설명합니다.

Claude의 낮은 컨텍스트 윈도우로 인한 문제를 해결할 수 있는 커서 도구를 소개합니다. 이는 깔끔한 UI와 다운로드 기능을 갖춘 월페이퍼 앱입니다.
Taskmaster AI를 활용하여 컨텍스트 과부하 없이 하나의 채팅에서 전체 앱을 개발할 수 있었습니다.
[00:00:39] 설치 및 초기 설정

프로젝트를 글로벌 또는 로컬로 설치하는 방법을 안내합니다. env 파일 재명명과 API 키 입력 과정을 상세히 설명합니다.

도구 설치 방법에는 전역 설치(-g 플래그 사용)와 단일 프로젝트 설치, 두 가지 방법이 있습니다.
프로젝트 초기화 과정에서 프로젝트 이름, 설명, 버전을 설정하고 필요한 파일들을 구성합니다.
[00:01:49] 앱 플랜 수립 및 PRD 생성

앱 아이디어를 브레인스토밍하며, Cursor 에이전트와 함께 논의를 시작합니다. PRD 템플릿을 참조하여 문서 생성 절차를 진행합니다.

envample 파일을 env로 변경하고, Anthropic API 키(필수)와 Perplexity API 키(선택)를 설정해야 합니다.
도구 사용의 첫 단계는 에이전트와 앱 아이디어에 대한 브레인스토밍을 진행하는 것입니다.
Unsplash API를 활용한 배경화면 앱 개발 계획을 수립하고, Next.js 프레임워크를 선택하여 앱의 전반적인 구조와 기능을 설계했습니다.
PRD 생성 과정에 대해 설명하며, 예시 PRD 파일을 템플릿으로 사용하여 scripts 폴더에 PRD.txt를 생성하는 방법을 제시했습니다.
[00:03:31] 태스크 실행 및 관리

Cursor 에이전트가 태스크를 자동 분할하고, 의존성을 고려해 순차적으로 실행합니다. 네트워크 에러 처리와 진행 상황 업데이트 방법을 설명합니다.

커서 에이전트의 작동 방식과 규칙에 대해 설명하고, Taskmaster AI 도구 실행 시 주의할 점을 강조했습니다.
태스크 관리 시스템의 특징을 설명하며, 우선순위와 의존성을 고려한 태스크 실행 방식을 소개했습니다.
front-end 디렉토리로 전환하여 작업을 시작했으나, Next.js 앱 설치 중 네트워크 오류가 발생하여 진행 상황을 확인했습니다.
AI 에이전트가 작업 진행 상황을 확인하고 Next.js 프로젝트를 초기화하며 의존성 패키지를 설치합니다.
태스크마스터 도구를 사용해 작업 상태를 관리하고, Unsplash API 통합을 위한 두 번째 작업을 시작합니다.
README 파일에서 설명하는 도구의 유연한 워크플로우와 프롬프트 제어 방식에 대해 설명합니다.
현재 6번째 작업인 검색 기능 구현을 진행 중이며, 작업 의존성 확인과 Claude API를 통한 작업 분할에 대해 설명합니다.
이 도구는 개발 주기를 체계화하면서도 비용을 낮게 유지하는 장점이 있다고 설명합니다.
[00:09:00] 최종 앱 점검 및 결론

완성된 앱의 기능, 예를 들어 검색 및 API 캐싱,을 데모로 확인합니다. 전체 워크플로우의 효율성과 도구의 장점을 강조하며 마무리합니다.

현재 앱의 상태를 보여주며, 필터링 시스템, 검색 기능, 배경화면 모델이 구현되었음을 설명합니다.
API 제한으로 인해 시간당 50개의 이미지만 요청할 수 있어서 임시로 한 이미지를 반복 사용하고 있다고 설명합니다.
태스크 7까지 완료되었으며, 남은 작업들은 성능 최적화와 분석, 색상 기반 필터링 시스템에 관한 것이라고 설명합니다.
이 도구를 사용함으로써 오류를 완전히 제거할 수 있었고, 모든 태스크를 하나의 채팅에서 효율적으로 완료할 수 있었다고 설명합니다.
이러한 단계별 접근 방식이 실제 개발 주기와 유사하며 효율적이라고 설명합니다.
7개 태스크에 대한 API 사용량이 효율적이며, 체계적인 워크플로우를 제공한다고 설명합니다.
커서가 Claude의 낮은 컨텍스트 윈도우 때문에
앱을 망치는 것에 지쳤나요?
오늘 제가 해결책을 가져왔습니다
이것은 제가 커서를 사용해서
개발한 월페이퍼 앱입니다
꽤 괜찮은 기능들이 있고
깔끔한 UI를 가지고 있어요
월페이퍼도 다운로드할 수 있습니다
제가 커서로 이것을 만들었는데
가장 좋은 점은 어떤 실수도
저지르지 않았다는 것입니다. Taskmaster AI 덕분에
컨텍스트 과부하를 방지할 수 있었죠
덕분에 저는 하나의 채팅에서
전체 앱을 문제없이 만들 수 있었습니다
이제 자세히 살펴보겠습니다
설치 방법을 보여드리고
이 도구를 사용해서 앱을 어떻게
만들었는지 설명해드리겠습니다
먼저 설치 과정을 안내하고
실제 프로젝트 구축 방법을 보여드릴게요
우선 설치가 필요합니다
설치하는 방법은 두 가지가 있는데
-g 플래그를 사용해 전역으로 설치하거나
단일 프로젝트용으로 설치할 수 있습니다
저는 전역으로 설치했습니다
설치 후에는 프로젝트 디렉토리에서
초기화를 해야 합니다
전역 설치를 했기 때문에
이 명령어를 복사해서 터미널을 열고
보시다시피 제 Macwall이라는
프로젝트의 루트 디렉토리에 있습니다
명령어를 붙여넣으면
프로젝트 초기화가 시작됩니다
먼저 프로젝트 이름을 입력하고
프로젝트 설명을 입력해야 합니다
프로젝트 설명은 실제로
도구의 기능과는 관계가 없고
단순히 무엇을 만드는지에 대한
설명일 뿐입니다
다음으로 프로젝트 버전을 입력하는데
엔터를 누르면 버전 1.0으로 기본 설정됩니다
그 다음에는 이 설정들로
계속할지 물어볼 것입니다
확인하면 도구 실행에 필요한
파일들을 설정합니다
초기화가 완료되면
이 명령어를 사용해서 커서에서
프로젝트를 열 수 있고 보시다시피 열렸네요
이제 제가 어떻게 사용했는지
설명해드리겠습니다
커서에서 프로젝트를 연 후
첫 번째 단계는 envample 파일의 이름을
[음악]
env로 변경하는 것입니다
그다음 API 키를 입력해야 합니다
기본적으로 두 개의 API 키가 필요한데
Anthropic API 키는 도구 작동에
필수적입니다. 이 키를 사용해서
계획을 작은 단위로 나누고
에이전트를 단계별로 안내하기 때문이죠
하지만 Perplexity API 키는
필수는 아닙니다
프로젝트에 외부 데이터가 필요하다면
추가해야 합니다. 현존하는 최고의
검색 도구이기 때문입니다
이는 계획 작업을 크게 향상시킬 거예요
API 키들을 붙여넣으세요
쉽게 찾을 수 있을 텐데, 못 찾으시면
ChatGPT에 물어보세요. 쉽게 안내해줄 겁니다
env 파일을 저장하면 됩니다
이제 실제로 도구를 사용하는 방법인데
먼저 해야 할 일은
에이전트와 브레인스토밍을 하는 것입니다
저는 앱 아이디어에 대해 논의하고
아직 파일을 수정하거나 만들지 않도록
프롬프트를 입력하는 것으로 시작합니다
앱 컨셉에 대해 제대로 논의해보겠습니다.
Unsplash API를 사용하여 배경화면 앱을
만들 예정입니다. 제가 아이디어를 제시하면
커서 에이전트가 잘 구조화된
구현 계획을 생성합니다. 에이전트는
제가 가장 선호하는 프레임워크인 Next.js를 제안했고
또한 다른 기능들과
앱의 전반적인 구조도
설명해주었는데 이것이
매우 도움이 되었습니다. 에이전트와 앱에 대해 논의한 후
계획을 더 구체화할 수 있습니다.
예를 들어, 계획을 변경하고 싶다면
에이전트와 논의할 수 있고
그에 따라 업데이트될 것입니다.
논의가 끝나면 다음 단계로
에이전트에게 예시 PRD 파일을 사용하여
PRD를 생성하도록 요청합니다.
커서 에이전트가 예시를 템플릿으로
사용해야 한다는 것을 이해할 수 있도록
이 파일을 명시적으로 참조해야 합니다.
새로 생성된 PRD는
scripts 폴더에 PRD.txt로 저장되어야 합니다.
이 단계는 readme에 명확하게 작성된
특정 템플릿 프롬프트를 따릅니다.
readme를 읽어보시기를 강력히 추천합니다.
도구의 작동 방식과 사용 가능한 명령어에 대한
자세한 설명이 포함되어 있기 때문입니다.
에이전트에게 PRD 생성을 요청하면
예시 PRD를 분석하고
논의 내용을 기반으로
새로운 PRD를 생성합니다.
PRD.txt가 생성되는 것을 확인할 수 있습니다.
다음 단계는 에이전트에게
PRD.txt를 분석하고
태스크를 생성하도록 요청하는 것입니다.
커서 에이전트는 이를 직접 실행하지 않고
도구 제작자가 정의한 특정 커서 규칙에 따라
에이전트가 작동하도록 되어 있습니다.
이러한 규칙들은 특정 키워드가
특정 명령어를 트리거하도록 하며
이 모든 것이 readme에
문서화되어 있습니다. 이러한 규칙을 따라
커서 에이전트는 어떤 명령어를 실행해야 하는지
알고 실행합니다. 이제 Taskmaster AI 도구를
실행할 것입니다. 여기서 중요한 점이 있는데
커서가 기본적으로 선택하는
명령어에는 input 플래그가 포함되어 있어서
이는 잘못된 것입니다. 올바른 명령어가 실행되도록
이 플래그를 제거해야 합니다.
그렇게 하면 도구가
PRD.txt 파일 처리를 시작하는 것을 볼 수 있습니다.
이는 Claude API를 호출하여
태스크를 생성합니다. 10개의 태스크를 작성하고
자체 명령어를 실행했습니다.
인터페이스가 실제로 매우 좋고
모든 태스크를 명확하게 나열했습니다.
인터페이스에는 태스크 우선순위가 포함되어 있고
태스크들이 서로 의존적이라는 것을 볼 수 있습니다.
에이전트는 이러한 의존성을 인식하고
그에 따라 태스크를 실행합니다.
모든 설정이 완료되면
에이전트는 첫 번째 태스크를
시작할지 물어봅니다.
이제 도구가 어떻게 작동하는지
커서 에이전트의 워크플로우를 어떻게 변경하고
더 구조화되고 계획된 방식으로
어떻게 안내하는지 보여드리겠습니다. 시작하기 전에
front-end 디렉토리로 전환하여
거기서부터 작업을 시작하도록 요청했습니다.
에이전트가 이를 인정하고 진행했지만
Next.js 앱 설치 중에
네트워크 오류가 발생했습니다.
이런 상황에서 이러한 프롬프트가 필요하며
저는 에이전트에게
태스크 진행 상황을 확인하도록 요청했습니다.
작업들을 확인하고 계속 진행했는데요
자체적으로 작업 목록을 나열하고 진행 상황을 확인한 다음
현재 진행 중인 작업을 파악했습니다
현재 작업을 파악했죠
[음악]
[음악]
여기서 첫 번째 작업을 진행 중이라는 것을
인식했고, 보시다시피 첫 번째 작업을
시작하려 했다는 것을 확인한 후
진행을 시작했습니다
Next.js 프로젝트를 초기화하고
의존성 패키지들을 설치했죠. 그게 완료되자
작업 상태를 업데이트하고
다음 작업으로 넘어갔습니다
태스크마스터 도구를 호출하고
첫 번째 작업의 상태를 대기 중에서
완료로 변경했습니다. 이 도구의 멋진 점은
다음에 구현해야 할 것을
일일이 추적할 필요가 없다는 거예요
컨텍스트 상에서 단순히 다음 작업을 나열하고
그에 따라 계속 진행했죠. 두 번째 작업이
Unsplash API 통합이라는 걸 확인하고
그걸 진행했습니다. 여기서 주목할 점은
두 번째 작업을 계획하는 동안
Perplexity API를 사용했다는 건데요
이건 작은 오류였지만 스스로 수정했습니다
Perplexity를 사용한 이유는 API 구조와
앱에 제대로 통합하기 위한
요구사항들을 조사해야
했기 때문입니다
또한 두 번째 작업이 더 큰 작업이라고 판단해서
더 작은 하위 작업들로 나눴습니다
그런 다음 두 번째 작업을 시작하고
상태를 대기 중에서 진행 중으로 업데이트했죠
필요한 의존성들을 모두 추가하고
구현을 시작했습니다
지금은 계속 진행해도 되는지
제 승인을 요청하고 있는 상태입니다
현재 두 번째 작업을 진행 중이에요
[음악]
또 하나 강조하고 싶은 것은 README 파일인데요
이전에 읽어보라고 추천드렸던 이유는
도구의 작동 방식과 프롬프트를 통해
에이전트를 제어하는 방법이 자세히
설명되어 있기 때문입니다
예를 들어, README에는 구현 변경사항에 대한
아주 좋은 사용 사례가 있습니다
계획을 구현하다가 변경하기로 결정했을 때
태스크마스터 워크플로우는 유연합니다
단순히 에이전트에게 접근 방식을 변경했다고
알리고, 수정사항을 나열한 뒤
향후 작업을 그에 맞게 업데이트하라고
지시하면 됩니다. 그러면 에이전트는
새로운 명령을 생성하고 Claude AI를 사용해서
앞으로 진행할 작업들을
변경사항에 맞게 조정합니다
따라서 경직된 워크플로우가 아니라
언제든 에이전트를 중단하고
구현 중간에 계획을 수정할 수 있죠
정말 멋진 도구인데, 커서 에이전트와 함께
구조적이면서도 유연한 작업 방식을
제공합니다. 앱의 현재 상황을 보면
지금은 6번째 작업인
검색 기능 구현을 진행 중입니다
6번째 작업을 시작하기 전에
자동으로 의존성을 확인했고
2번과 3번 작업에 의존한다는 것을 발견했죠
작업들을 비선형적으로 완료할 수도 있지만
각 작업의 의존성은
먼저 완료되어야 합니다
그것 외에도 이전 작업들은 모두
Claude API를 사용해 더 작은 단위로 나눠졌어요
나중에 Claude 사용량도 보여드릴 텐데
실제로 그렇게 비용이 많이 들지는 않습니다
마지막에 Claude 사용량을
보여드리도록 하겠습니다
이 도구가 정말 멋진 점은
개발 주기를 체계화하면서
비용도 낮게 유지한다는 거예요. 지금까지
이룬 것들을 보여드릴게요.
자, 이게 현재 앱의 상태인데
보시다시피 배경화면이 반복되고 있죠.
이유가 있는데, 곧 설명해드리겠습니다.
그것 말고는
필터링 시스템이 추가되었고
검색 기능이 개발 중이며
배경화면 모델도 구현되었습니다.
이제 배경화면을 다운로드할 수도 있어요.
같은 배경화면이 반복되는 이유는
API 제한 때문입니다.
현재는 시간당 약 50개의 이미지만 요청할 수 있어서
하나의 이미지만 가져와서 반복하도록 했어요.
지금은 임시 해결책이에요.
나중에는 바꿀 예정입니다.
다른 API들처럼 이것도
여러 가격 티어가 있어서
나중에 업그레이드할지
무료 티어를 유지할지 결정하려고요.
지금까지 이 정도 진행됐고
현재 태스크 7번까지 완료했습니다.
남은 태스크들은 그렇게 중요하지 않은데
대부분 성능 최적화와
분석, 색상 기반 필터링
시스템에 관한 것들이에요.
그래서 태스크 7에서 영상을
마무리하기로 했어요. 전반적으로 UI가
정말 괜찮아 보이고
배경화면 검색, 필터 시스템 사용,
다운로드도 가능해서
정말 탄탄한 앱이 되었어요.
이게 큰 앱은 아니라서
도구 없이도 망칠 가능성이
낮았을 텐데도
이 도구를 사용하니 오류가
완전히 사라졌어요. 여기서 오류란
다시 돌아가서 수정하고
프롬프트를 다시 작성하고 UI를 계속 수정하거나
새 채팅을 열어야 하는 그런 실수들이요.
증거가 여기 있는데
새 채팅을 시작하라는 메시지가 계속 떴는데도
7개의 태스크를 모두 같은 채팅에서
완료했어요. 컨텍스트 오버로드가
발생하지 않은 이유는
모든 정보를 한꺼번에 유지할
필요가 없었기 때문이에요. 모든 것을
단계별로 나누어 순차적으로 실행했거든요.
솔직히 이게 바로 실제
개발 주기가 작동하는 방식이에요.
단계별 프로세스를 따르고 의존성을 정의한 다음
그에 따라 소프트웨어를
개발하죠. 태스크 7은
API 캐싱 구현이었는데
이것도 완료됐어요. 보시다시피
같은 배경화면이 반복되는 대신
다른 배경화면들이 나타나요. 정말 좋죠.
사용량도 보여드리겠다고 했는데
여기 있습니다. 7개 태스크에 대한
사용량인데 제 생각에는 그렇게 많지 않아요.
모든 것을 단계별로 나누고
체계적인 워크플로우를 제공하며
변경 사항을 추적할 수 있는
적절한 인터페이스를 제공하기 때문이죠.
단순한 텍스트 파일이 아니라
전문적인 시스템을 제공해요.
전반적으로 정말 훌륭한 도구예요.
꼭 한번 사용해보세요. 설정도
어렵지 않아요. 두세 가지만
하면 돼요. 설치하고 API 키만
설정하면 되는데 이게
약간 지루한 부분이에요. 그 후에는 Cursor
Agent가 모든 걸 처리해줘요.
readme.md를 꼭 읽어보시는 걸
추천드려요. 도구의 작동 방식과
사용 가능한 명령어들에 대한
좋은 통찰을 얻을 수 있어요. 여기까지입니다.
이 도구가 얼마나 강력한지
cursor와 함께 사용하면 얼마나 좋은지
이해하시는데 도움이 됐길 바라요. 수동 작업의
많은 부분을 없애주고
모든 것을 훨씬 효율적으로 만들어주죠.
도움이 되셨다면 super thanks 버튼을
눌러주세요. 정말 큰 도움이 됩니다.
그리고 최신 소식을 받아보시려면
구독도 잊지 마세요. 다음 영상에서 뵐게요.