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