[00:00]
오늘은 커서(Cursor)에 기본 내장되지 않은
[00:01]
기능 하나를 소개해드리려고 합니다.
[00:03]
Kline이 출시한 메모리 뱅크(Memory Bank)라는 기능인데,
[00:06]
어떤 기능인지 설명해드리겠습니다.
[00:08]
먼저 문제점부터 살펴보겠습니다.
[00:11]
긴 세션을 진행하는 동안 커서나 윈드서프같은
[00:13]
AI 에이전트들은 이전 대화를 잊어버리거나
[00:16]
맥락을 놓치는 경향이 있습니다.
[00:18]
이로 인해 같은 내용을 반복해서 설명하거나,
[00:20]
에이전트가 맥락을 이해하기 위해
[00:22]
파일을 다시 검색해야 합니다.
[00:24]
이때 Kline의 메모리 뱅크가
[00:26]
도움이 됩니다. 구조화된 파일을 저장해서
[00:29]
여러 세션에 걸쳐 AI가 맥락을 유지할 수 있게 해주어
[00:31]
반복 설명할 필요가 없어집니다.
[00:33]
맥락 창이 가득 차지 않아
[00:35]
환각 현상이 줄어들거나
[00:37]
심지어 완전히 제거됩니다.
[00:40]
이제 이 파일들에 대해 설명하겠습니다.
[00:42]
먼저 프로젝트 브리프가 있는데,
[00:44]
프로젝트의 주요 목표를 설명합니다.
[00:46]
그 다음 제품 컨텍스트는 해결하려는 문제와
[00:49]
프로젝트의 기능을 설명하고,
[00:50]
시스템 패턴은 아키텍처와 설계 방식을 다룹니다.
[00:53]
다음으로 기술 컨텍스트는
[00:55]
기술 스택과 의존성을 나열합니다.
[00:58]
이는 특히 유용한데,
[01:00]
예를 들어 커서가
[01:02]
Next.js 프로젝트에서
[01:04]
React Router 코드를 작성해서
[01:06]
완전히 망가뜨리는 실수를 방지할 수 있죠.
[01:09]
또한 제품 컨텍스트는
[01:11]
현재 작업 중인 내용을 추적하고,
[01:13]
마지막으로 진행 상황은
[01:15]
전체 개발 주기를 문서화하여
[01:18]
에이전트가 작업을 추적할 수 있게 합니다.
[01:20]
가장 좋은 점은 이것이
[01:23]
Kline 전용이 아니라는 것입니다. 이 파일들은
[01:25]
사용 지침과 함께 제공되어
[01:27]
모든 에이전트 IDE에서 사용할 수 있습니다.
[01:30]
실제로 누군가가 이것을
[01:31]
커서용으로 구현했고,
[01:33]
이제 커서에서 직접 사용할 수 있습니다.
[01:36]
나중에 방법을 알려드리겠지만,
[01:38]
지금 바로 사용 가능합니다.
[01:40]
또 다른 점은 Kline이
[01:42]
계획 모드와 실행 모드라는
[01:44]
두 가지 워크플로우를 가지고 있는데,
[01:47]
필요한 설정을 붙여넣으면
[01:49]
커서에서도 사용할 수 있습니다.
[01:51]
계획 모드에서 에이전트는 메모리 뱅크를 사용해
[01:54]
다음 작업을 결정하고, 실행 모드에서는
[01:57]
메모리 뱅크를 확인하고 작업을 업데이트합니다.
[02:00]
내장된 작업 관리 시스템도 있어서
[02:01]
실행 후 문서를 자동으로 업데이트합니다.
[02:04]
실행 후에는
[02:06]
결과에 따라 문서를 업데이트하죠.
[02:09]
따라서 메모리 시스템 외에도 Kline은
[02:11]
에이전트를 제어하기 위한
[02:13]
작업 관리 시스템도 가지고 있습니다.
[02:16]
이제 메모리 뱅크를
[02:17]
프로젝트에 초기화하는 방법을 보여드리겠습니다.
[02:20]
먼저 마크다운 파일을 볼 수 있는데,
[02:22]
RAW 버튼을 클릭해서
[02:24]
원본 형식으로 된 파일을 가져옵니다.
[02:26]
전체 파일을 복사한 다음 커서로 이동하세요.
[02:36]
규칙 섹션에서
[02:39]
에이전트가 동작할 수 있도록
[02:41]
파일을 붙여넣으세요. 커서는
[02:43]
프로젝트별로 다른 설정을
[02:45]
추가할 수 있습니다.
[02:47]
하지만 설정에 시간이 걸리므로
[02:49]
일단은 전역 규칙에 붙여넣겠습니다.
[02:52]
나중에 프로젝트별 규칙을
[02:54]
만들고 싶다면 튜토리얼이 있습니다.
[02:58]
이제 제가 사용자 규칙을 붙여넣었고,
[03:00]
제 프로젝트를 여기서 볼 수 있는데,
[03:02]
이것은 Mac wall이라고 불립니다.
[03:06]
[음악]
[03:10]
이제 커서에게 에이전트 모드에서
[03:13]
보시다시피 규칙을 읽고
[03:16]
목표를 이해하여 메모리 뱅크를
[03:19]
초기화하도록 요청할 것입니다.
[03:21]
에이전트가 메모리 뱅크를 생성할 것이고,
[03:23]
이제 초기화가 완료된 것을 볼 수 있습니다.
[03:25]
그 후에는 파일들을 하나씩 생성할 것입니다.
[03:28]
프로젝트를 읽고
[03:30]
모든 컨텍스트를 적절히 저장할 것입니다.
[03:32]
프로젝트 세부사항을 요청하는 것 같네요.
[03:34]
이제 보도록 요청하겠... 잠깐,
[03:36]
Mac wall 폴더를 볼 수 없는 것 같네요.
[03:38]
실제로 일어난 일은
[03:40]
제가 다른 폴더에서 프로젝트를 복사했기 때문에
[03:42]
커서를 다시 열어야 했습니다.
[03:45]
다시 열면 사용 가능해졌고
[03:47]
모든 것을 읽고 자동으로 모든 파일을 채웠습니다.
[03:50]
처음부터 커서를 다시 열었다면
[03:52]
프로젝트 컨텍스트 제공을 요청하지도 않았을 것이고
[03:55]
첫 시도에서 바로
[03:56]
완료했을 것입니다.
[03:58]
이제 생성된 것을 보여드리겠습니다.
[04:00]
모든 프로젝트 세부사항을 채웠고
[04:03]
분석에 따라 프로젝트를 어떻게 분류했는지
[04:05]
보여드리겠습니다.
[04:07]
Mac wall은 Next.js로 만든 현대적인 웹 애플리케이션으로
[04:10]
아름다운 배경화면 브라우징 경험을 제공하고
[04:13]
Unsplash API와 통합되어 있습니다.
[04:15]
정확히 그것이 하는 일입니다.
[04:17]
또한 핵심 요구사항과
[04:19]
다른 관련 세부사항도 나열했습니다.
[04:27]
기술적 컨텍스트에서는
[04:30]
모든 의존성을 문서화했으므로
[04:32]
에이전트가 프로젝트 내부를
[04:34]
이해할 수 있습니다. 프로젝트 진행 섹션에서는
[04:37]
지금까지 완료된 내용을 기록했습니다.
[04:39]
하지만 아직 향후 작업이나 계획은 나열하지 않았는데,
[04:42]
이는 나중에 채워질 것입니다.
[04:45]
마찬가지로 아직 문제가 확인되지 않았기 때문에
[04:48]
해당 섹션은 현재 비어있습니다.
[04:50]
이것이 유용한 이유는
[04:52]
커서 에이전트가 프로젝트 컨텍스트를
[04:54]
수동으로 유지할 필요가 없기 때문입니다.
[04:57]
개발하는 동안에도
[04:59]
파일을 반복해서 다시 읽을 필요가 없으며
[05:01]
모든 컨텍스트가 메모리 뱅크에
[05:03]
저장되어 있어 참조만 하면 됩니다.
[05:05]
또 다른 점은
[05:08]
시스템 패턴을 감지하여
[05:10]
우리가 사용하는 것과 프로젝트 구조를
[05:12]
식별했다는 것입니다.
[05:14]
머메이드 다이어그램도 생성했지만
[05:16]
원시 형태이기 때문에
[05:18]
완전히 이해하기는 어려울 수 있습니다.
[05:21]
이러한 시스템 패턴을 바탕으로
[05:23]
커서 규칙도 개발했습니다.
[05:25]
이것이 더 이상 사용되지 않는 방법이지만
[05:27]
전역 규칙에서 프로젝트 접근 방법을
[05:30]
지정했기 때문에 여전히 작동합니다.
[05:32]
따라서 이것은 실제로
[05:34]
제대로 작동하는 유효한 방법입니다.
[05:37]
추가로 원하는 대로
[05:39]
규칙을 수정할 수 있습니다.
[05:41]
뭔가 빠졌거나 추가가 필요하다면
[05:43]
필요에 따라 조정할 수 있습니다.
[05:45]
제가 한 일은 에이전트에게
[05:47]
앱의 랜딩 페이지를 구현하도록
[05:49]
요청한 것입니다.
[05:50]
인증은 포함되지 않았지만
[05:53]
계획 모드로 강제하기 위해
[05:55]
파일을 편집할 수 없게 만들었습니다.
[05:57]
이는 커서 규칙 파일의 버그여서
[06:00]
이것이 해결 방법입니다. 계획 모드에서
[06:03]
에이전트는 요소를 추가하는 방법을 계획하고
[06:05]
모든 것을 나열했습니다.
[06:08]
그런 다음 실행 모드로 전환하여
[06:10]
변경사항을 구현하도록 했고
[06:12]
이것이 결과입니다.
[06:14]
이미지를 추가하라고 요청했지만
[06:16]
스스로 하도록 지시했습니다.
[06:18]
여기에 제품 이미지를 넣어야 하지만
[06:20]
지금은 간단한 그리드만 요청했습니다.
[06:22]
이것이 랜딩 페이지의 나머지 부분이며
[06:25]
정말 멋지게 보이는 간단한 미니멀 디자인입니다.
[06:31]
시작하기를 클릭하면
[06:33]
모든 배경화면이 있는 앱으로
[06:35]
직접 이동하며, 필터 시스템과
[06:38]
다른 모든 기능이 있습니다.
[06:40]
에이전트를 체계적으로 유지하고
[06:42]
환각을 최소화하며
[06:44]
작업 관리를 프로세스에 통합하는
[06:47]
정말 좋은 방법입니다. 게다가 설정도
[06:49]
그렇게 어렵지 않습니다.
[06:51]
문서와 규칙 파일을
[06:53]
꼭 확인해보세요.
[06:55]
제가 겪은 것처럼 버그가 발생하면
[06:58]
규칙 파일을 직접 수정할 수 있습니다.
[07:00]
도움이 되셨다면 슈퍼 땡스를 눌러주세요.
[07:02]
저희에게 큰 도움이 됩니다.
[07:05]
업데이트 소식을 받으시려면
[07:06]
구독도 잊지 마세요. 다음에 다시 만나요!