[00:00]
지난 해에 우리는
[00:01]
다양한 종류의 강력한
[00:03]
AI 코드 에디터들이 등장하는 것을
[00:05]
보았고, 이를 통해 소프트웨어를
[00:08]
훨씬 빠르게 개발할 수 있게 되었죠. Cursor는
[00:10]
탭 기능과 컴포저로 큰 인기를 얻었고
[00:14]
WindSurf에는 Cascade가 있습니다.
[00:16]
컴포저나 Cascade 기능을 사용하면
[00:18]
자율적인 에이전트가 코드 에디터에서
[00:21]
작동하면서 자연어로
[00:22]
새로운 기능을 만들거나
[00:24]
인증을 추가하거나 데이터베이스를 연결하는
[00:27]
작업을 수행할 수 있습니다. 이는
[00:29]
GitHub Copilot에는 없던 기능이었고
[00:31]
개발 속도를 늦추는 요인이었죠.
[00:33]
Copilot 팀은 최근 몇 주 동안
[00:36]
많은 새로운 기능을 출시했고
[00:37]
며칠 전에는
[00:39]
Copilot Agent를 발표했는데, 이는
[00:42]
Cursor의 컴포저 기능과
[00:44]
매우 유사하다고 합니다. 이는 자율적인
[00:46]
에이전트로서 파일과 디렉토리,
[00:48]
폴더 등을 생성할 수 있게 해줍니다.
[00:51]
이 영상에서는 며칠 전에
[00:52]
출시된 GitHub Copilot Agent를
[00:54]
Cursor AI 및 WindSurf와 비교해보면서
[00:57]
어떤 차이가 있는지 살펴보고
[00:59]
전환을 고려해볼 시점인지 알아보겠습니다.
[01:02]
이런 종류의 콘텐츠가 마음에 드신다면,
[01:03]
AI를 활용한 소프트웨어 개발에 대한
[01:05]
영상을 많이 제작하고 있으니
[01:08]
switchdimension.com을 방문해보세요.
[01:10]
거기에는 더 많은 리소스와
[01:11]
가입할 수 있는 커뮤니티가 있어서
[01:14]
코드 개발 여정을 가속화하는 데
[01:16]
도움이 될 것입니다. 만약
[01:18]
새로운 GitHub Agent가 적용된 VS Code 버전을
[01:21]
사용하고 싶다면 Visual Studio
[01:23]
Code Insiders를 방문하세요.
[01:25]
링크는 아래 설명란에 남겨두었고
[01:27]
거기서 최신 버전을 다운로드할 수 있습니다.
[01:30]
솔직히 말씀드리면,
[01:32]
VS Code로 돌아오니 정말 좋네요.
[01:35]
깔끔하고 단순한 인터페이스를 가지고 있고
[01:38]
지난 몇 년간 코드를 개발하면서
[01:40]
가장 많은 시간을 보낸 곳이죠.
[01:42]
Cursor는 정말, Cursor는 매우
[01:44]
강력하지만 한 가지 단점은
[01:46]
사용자 인터페이스가 그리 좋지 않다는 점입니다.
[01:48]
WindSurf나 VS Code에서
[01:50]
사용하는 인터페이스가 더 마음에 들어요.
[01:52]
이제 제가 할 일은
[01:54]
간단한 할 일 목록 프로젝트를
[01:56]
데이터베이스와 함께 설정하고
[01:58]
그 과정을 살펴보면서
[02:00]
Cursor와 비교해보는 것입니다.
[02:02]
중요한 것은 작업하려는
[02:05]
실제 폴더를 열고
[02:07]
워크스페이스로 설정하는 것입니다.
[02:09]
Cursor와 마찬가지로 AI 패널을 열 수 있고
[02:12]
여기에는 두 가지 기능이 있습니다.
[02:14]
Control Alt I로 열 수 있는 채팅은
[02:15]
Cursor의 채팅 기능과 매우 유사하고
[02:18]
또 다른 하나는 Copilot 편집 기능입니다.
[02:20]
Copilot 편집은 WindSurf의
[02:23]
컴포저나 Cascade와 같은 기능으로
[02:25]
여러 파일을 한꺼번에
[02:28]
편집할 수 있게 해줍니다.
[02:31]
아래쪽을 보시면
[02:33]
다양한 모델을 선택할 수 있는데
[02:34]
프리뷰 버전으로 Claude 3.5가 있고
[02:37]
Gemini와 GPT-4도 프리뷰로 제공됩니다.
[02:40]
하지만 이 프리뷰 모델들은 실제로
[02:43]
이미지를 추가하거나 오류의
[02:45]
스크린샷 또는 디자인 이미지를 업로드할 수 없습니다
[02:47]
원하는 디자인을 복사하려면
[02:49]
현재로서는 GPT 4.0에 의존해야 합니다.
[02:52]
작은 단점이 있지만
[02:54]
곧 활성화될 것이라 확신합니다.
[02:56]
그래서 너무 걱정하지 않으셔도 됩니다.
[02:58]
GPT 3.5 모드로 설정하면
[03:01]
두 가지 옵션이 있습니다.
[03:02]
편집과 에이전트가 있는데
[03:04]
에이전트를 사용해 보겠습니다.
[03:06]
윈도우의 내장 받아쓰기 설정으로
[03:09]
여기서 테스트해 볼 수 있습니다.
[03:11]
VS Code 확장 프로그램을
[03:13]
설치해야 하니 진행해 보겠습니다.
[03:15]
확장 프로그램을 설정하고 있습니다.
[03:18]
1, 2, 3 테스트 중인데
[03:20]
마이크 설정이 잘 되지 않네요.
[03:23]
그래서 기존 방식으로
[03:24]
이 디렉토리에 Next.js를 설치해보겠습니다.
[03:28]
설치를 진행해 주세요.
[03:30]
터미널이 열렸네요. 좋습니다.
[03:32]
기본 설정들을 차례대로 진행해야 합니다.
[03:36]
네, 네, 네, 네, 아니오... 네, 아니오
[03:43]
좋습니다. 설치가 시작되었네요.
[03:46]
앱 라우터 설정 완료했습니다.
[03:49]
이제 개발 서버를 시작할 수 있습니다.
[03:51]
이 프롬프트도 마음에 드네요.
[03:53]
새 터미널이 열릴지 아닐지 보겠습니다.
[03:56]
네, 새 터미널이 열렸네요.
[03:58]
개발 서버가 실행 중이고
[04:01]
여기를 클릭하면 미리보기가 가능합니다.
[04:04]
다음은 무엇을 해볼까요?
[04:06]
Bash에서 AI를 사용할 수 있는지 확인해보죠.
[04:11]
Control + I를 눌러보니
[04:16]
이 애플리케이션을 어떻게 빌드할까요?
[04:20]
첫 번째로 보이는 것은
[04:21]
워크스페이스를 설정해야
[04:24]
무엇이 진행되는지 알 수 있다는 것입니다.
[04:26]
지금은 잘못된 명령어를
[04:27]
보여주고 있거든요.
[04:29]
프로젝트가 설정되었으니 이 폴더를
[04:33]
워크스페이스에 추가해보겠습니다.
[04:37]
VS Code test one을 추가하고
[04:41]
다시 시도해보겠습니다. Control + I로
[04:44]
Next.js 프로젝트 빌드 방법을 물어보니
[04:47]
이제 올바른 명령어가 나오고
[04:50]
세부 정보도 확인할 수 있습니다.
[04:51]
실행, 삽입, 닫기 옵션이 있네요.
[04:54]
아주 좋습니다.
[04:56]
실제로 이것이 Cursor보다
[04:58]
조금 더 낫다고 생각합니다.
[05:00]
페이지 편집은 어떨까요?
[05:03]
페이지로 가서 목록 항목을 편집해보겠습니다.
[05:07]
Control + I를 눌러보죠.
[05:10]
자, 어떻게 되나요?
[05:12]
프로바이더 코드에서
[05:15]
꽤 멋진데요.
[05:18]
음성으로도 들을 수 있습니다.
[05:20]
실제로 이어폰으로 음성 모드를
[05:23]
듣고 있는데 좀 성가시네요.
[05:25]
Cursor처럼 컨텍스트도
[05:28]
추가할 수 있습니다. 파일을 가져와서
[05:31]
작업 파일 세트에 추가할 수 있죠.
[05:34]
파일을 드래그 앤 드롭할 수 있다는 점이
[05:37]
정말 마음에 듭니다.
[05:38]
Cursor에서는 할 수 없는 기능이라
[05:40]
장점이 되겠네요. 또한
[05:43]
해시 키를 눌러 파일을 추가할 수도 있고
[05:47]
코드베이스 파일과 문제점을
[05:48]
볼 수 있지만, 문서는
[05:50]
추가할 수 있는 것 같지는 않네요.
[05:52]
문서를 붙여넣을 수 있는지
[05:55]
아직 확실하지 않습니다.
[05:57]
문서에 대해 언급은 했지만
[05:59]
읽지는 않았거든요.
[06:02]
아직 지원되는 기능이 아닌 것 같습니다.
[06:04]
확실하지는 않네요.
[06:06]
아직 설정되지 않았지만
[06:08]
웹 검색이나
[06:10]
첨부 기능 같은 것이 있으면 좋겠고
[06:12]
그것은 아마도
[06:14]
다른 모델들과 관련이 있을 것 같네요
[06:17]
자, 좀 더 시도해보겠습니다
[06:19]
'get it done'이라는 투두리스트 애플리케이션을 위한 랜딩 페이지를 만들어보죠
[06:24]
히어로 섹션과 기능들,
[06:27]
그리고 시작하기 링크를 포함해주세요
[06:32]
다크 모드에 녹색 강조색으로
[06:35]
컬러 스킴을 적용해주세요
[06:37]
수정사항을 생성하는 것을 보니
[06:39]
마치 Cursor에 있는 것 같네요
[06:41]
여기 수락과 거절 버튼을 보면
[06:44]
파일들을 살펴볼 수 있고
[06:47]
사실 이게 Cursor보다
[06:48]
더 나은 구현 방식인 것 같아요
[06:50]
이 깔끔한 인터페이스가 말이죠
[06:54]
CSS 유효성 검사 경고가 보이지만
[06:56]
예상된 것이고 기능에는
[06:58]
영향을 주지 않을 거예요. 랜딩 페이지가
[06:59]
이제 준비되었으니
[07:02]
Cursor처럼 수락할 수 있고
[07:04]
모든 수정사항을 볼 수 있어요
[07:06]
시작점으로는 나쁘지 않네요
[07:08]
이것도 역시
[07:10]
이런 작업에 능숙한 Clae를 사용하고 있죠
[07:12]
좋아요, 한번 살펴보죠
[07:15]
소스 컨트롤도 있고
[07:19]
익숙한 인터페이스네요
[07:20]
위에 있는 별표 아이콘으로
[07:23]
커밋 메시지를 생성할 수 있어요
[07:25]
홈페이지 레이아웃 개선이라고 하죠
[07:27]
매우 익숙하네요. 이제 좀 더 도전해볼까요
[07:29]
작업 세트를 정리하고
[07:31]
새로운 페이지를 만들어보려고 해요
[07:34]
실제 애플리케이션의
[07:36]
메인 페이지가 될 거예요
[07:39]
거기에 투두리스트를 만들어서
[07:42]
새로운 항목을 추가하고
[07:44]
체크할 수 있게 하고
[07:48]
완료된 항목은
[07:51]
취소선으로 표시되게 하고 싶어요
[07:54]
그리고 SQLite 데이터베이스를 사용해서
[07:57]
모든 투두 항목의 상태를 기록하고 싶어요
[08:01]
이건 작은 도전과제인데
[08:03]
몇 가지 다른 작업이 필요해요
[08:05]
새 페이지도 만들어야 하고
[08:06]
SQLite 데이터베이스도 설정해야 하고
[08:09]
한 가지 테스트하지 않는 것은
[08:12]
파일 베이스의
[08:14]
크기와 컨텍스트예요
[08:16]
Cursor가 정말 잘하는 것 중 하나가
[08:19]
큰 컨텍스트와
[08:21]
많은 파일을 다루는 거예요
[08:24]
또 작성자나 편집 채팅을
[08:27]
요약해서 컨텍스트에
[08:29]
포함시키는 등
[08:30]
유용한 기능들이 많아요
[08:33]
이 영상에서는 테스트하지 않을 거지만
[08:35]
기본적인 것만 테스트해볼게요
[08:37]
실행해보면 어떻게 되는지 보죠
[08:40]
계속 진행해보시죠
[08:42]
Prisma 클라이언트를 설치하고
[08:45]
Prisma 폴더와 스키마가 생성되었네요
[08:47]
지금까지는 좋아요
[08:49]
Prisma가 뭔지 모르시는 분들을 위해 설명하자면
[08:51]
데이터베이스와 통신하는 방법인데
[08:52]
꼭 필요한 건 아니지만
[08:55]
강력한 기능들이 있어요
[08:57]
이 투두앱에는 좀 과하지만
[08:59]
어떻게 잘 작동하는지
[09:01]
보면 재미있을 것 같네요
[09:03]
이제 API 엔드포인트를 만들어볼게요
[09:05]
먼저 To-do 리스트 페이지를 위한
[09:07]
Prisma 클라이언트를 위한 유틸리티 파일을 만들어보겠습니다
[09:09]
계속 진행하고 싶습니다
[09:11]
지금까지 본 것에 꽤 인상적이네요
[09:13]
오류를 확인하기 위해 이 버튼을 클릭하면
[09:16]
모든 수정사항을 볼 수 있고
[09:18]
한 줄로 모든 것을 볼 수 있습니다
[09:21]
모든 것이 꽤 좋아 보이네요
[09:23]
여기 랜딩 페이지를 테스트해보겠습니다
[09:25]
'정리 시작하기'를 클릭하면
[09:27]
AGI로 만든 To-do 리스트가 나옵니다
[09:30]
'종이클립 만들기'를 추가했네요, 좋습니다
[09:35]
잘 작동하고 체크도 할 수 있습니다
[09:37]
체크를 해제할 수도 있고, 이 모든 것이
[09:39]
데이터베이스에 저장됩니다
[09:42]
완벽했네요, 어떤 오류도
[09:44]
발생하지 않았습니다. 물론 이것은
[09:46]
매우 기본적인 애플리케이션이지만
[09:50]
확실히 더 깊이 살펴볼 가치가 있습니다
[09:52]
인터페이스가 마음에 듭니다
[09:54]
매우 유사하고 참조하는 내용도 보여줍니다
[09:56]
체크포인트 기능은 보이지 않지만
[09:58]
대신에
[10:00]
마지막 수정사항을 취소할 수 있는
[10:02]
기능이 있어서 이것이 일종의
[10:04]
체크포인트와 같습니다
[10:06]
이 기능은 최근 며칠 사이에
[10:07]
추가된 것입니다
[10:08]
변경 로그를 보시면
[10:10]
추가된 모든 훌륭한 기능들을 볼 수 있는데
[10:12]
중간 모드에서 03 미니를 무료로
[10:15]
50회까지 사용할 수 있다는 점이
[10:17]
꽤나 매력적입니다
[10:20]
또한 그들은 이 SWE 에이전트의
[10:23]
출시를 발표했는데, 이는 우리가 본
[10:25]
Devon open Devon SW 에이전트와 매우 유사합니다
[10:28]
이전에 이 채널에서 다뤘던 것처럼
[10:29]
이것은 자율적인 에이전트로
[10:33]
단위 테스트 작성이나
[10:35]
GitHub 저장소의 문제 해결과 같은
[10:37]
특정 작업을 할당할 수 있으며
[10:40]
실제로 문제를 해결하고
[10:41]
풀 리퀘스트까지 수행할 수 있습니다
[10:44]
프로젝트 파드완이라고 부르는데, 스타워즈의
[10:47]
제다이 견습생을 참고한 것이죠
[10:51]
왜 제가 이걸 설명하나요? 여러분이라면
[10:53]
다 아실 텐데요, 좋습니다
[10:57]
흥미롭네요
[11:00]
Cursor와 WindSurf에 대한
[11:02]
강력한 경쟁자가 되겠지만
[11:05]
이것은 필연적으로
[11:06]
이런 방향으로 발전할 수밖에 없었습니다
[11:09]
Microsoft라는 회사가 있죠
[11:11]
아마 들어보셨을 텐데, 그들은
[11:14]
꽤 괜찮은 예산을 가지고 있고
[11:16]
Codium, WindSurf,
[11:18]
그리고 Cursor는 VS Code의 파생 버전입니다
[11:23]
하지만 아직 지켜봐야 할 것은
[11:26]
Cursor와 WindSurf 팀이
[11:28]
어떻게 혁신하고 어떤 특별한
[11:31]
장점을 제공할 수 있는지입니다
[11:33]
저는 아직 이것으로
[11:35]
바로 전환하지는 않을 겁니다
[11:36]
아직 몇 가지 제한사항이 있고
[11:39]
완전히 편하지는 않지만
[11:40]
개발 과정을 주의 깊게 지켜볼 것입니다
[11:43]
이 모든 것에서 정말 고무적인 점은
[11:46]
데모를 작업하는 동안 특정 시점에서
[11:48]
제가 VS Code에 있다는 것을 잊었다는 겁니다
[11:51]
Cursor가 아닌데도 문제가 없었죠
[11:54]
VS Code와 Copilot을 함께 사용하면서
[11:57]
파일을 어떻게 추가하고
[11:59]
컨텍스트를 어떻게 생각해야 하는지
[12:01]
이해하는 데 전혀 문제가 없었습니다
[12:03]
왜냐하면 결국 우리가 다루는 것은
[12:04]
대규모 언어 모델의 기본 요소이기 때문입니다
[12:06]
제게는 GitHub Copilot에서
[12:09]
Claude 3.5로 전환하는 것이
[12:11]
더 큰 변화였습니다
[12:15]
모델과 작업하는 방식에 더 익숙해져서
[12:18]
그것이 더 큰 변화이고
[12:20]
인터페이스 측면에서는
[12:22]
Cursor나 VS Code,
[12:24]
또는 WindSurf에서 모두 매우 유사합니다
[12:27]
그래서 이것은 여러분의 기술과
[12:29]
전환 등에 있어 좋은 소식입니다
[12:31]
좋습니다, 이것이 도움이 되었길 바랍니다
[12:34]
이런 종류의 콘텐츠에 관심이 있다면
[12:36]
Switch Dimension을 확인해보세요
[12:38]
더 많은 리소스와
[12:39]
커뮤니티, AI로 무언가를 만드는 방법에 대한 강좌가 있습니다
[12:43]
다음 영상에서 만나요