여러분, 새로운 AI 코드 에디터가 출시되었습니다. 얼마 전 이게 출시되자마자 정말 많은 관심을 지금 받고 있는데요.

커서와 비슷한, 그래서 이 Windsurf에는 커서와 비교했을 때 이번 영상에서는 이 Windsurf를 직접 한번 활용을 해보면서 어떤 기능들이 있고 어떤 장단점이 있는지 이런 부분에 대해서 한번 말씀을 드려보도록 하겠습니다.

이 Windsurf도 정말 물건인 거 같거든요.

이번 영상도 끝까지 시청해 주세요. Codeium에서 출시한 여러분이 Windsurf 에디터는, 그리고 이제 Windsurf에는 Cascade라는, 그래서 이 Windsurf를 AI 기반 코드 에디터인데요.

기존 이 Codeium이 익스텐션으로 굉장히 여러 가지 플랫폼에 다 지원을 했었습니다.

VSCODE, Jetbrains 뭐 크롬 굉장히 여러 가지 플랫폼에 익스텐션으로 지원을 해 줬었는데요.

그 Codeium에 있는 모든 기능이 Windsurf로 이제 통합이 되었고 메인 기능이 있거든요.

이 메인 기능을 통해서 더 강력해졌습니다.

한번 사용해 보도록 할 건데요. https://codeium.com으로 접속을 해주시면 되고요 위쪽에 이제 다운로드 탭에 들어가시면 다운로드를 받을 수가 있습니다 Windsurf를 맥 OS, 리눅스, 윈도우즈 여러분들의 운영체제에 맞게 다운로드 받아 주시면 될 것 같고요.

그래서 VSCODE와 비슷한 UI를 가지고 있고 보시게 되면 이렇게 Windsurf도 VSCODE를 기반으로 만들어졌거든요.

여러분들이 이제 Windsurf를 처음에 세팅 하실 때 VSCODE에 있던 익스텐션이나 여러 가지 세팅들도 연동이 가능하도록 되어 있습니다.

이제 여러분들이 기존의 정말 쉽게.

그래서 여기서 프로젝트를 직접 안 띄우시는 분들은 위쪽에 진행하던 프로젝트가 있으면 그 프로젝트 폴더를 열어 주셔도 되고 아니면 시작해 볼 수도 있습니다.

Cascade라는 기능을 한번 제가 보여 드리도록 할 건데요.

이 Cascade라는 기능이 이제 오른쪽에 이렇게 위치하게 됩니다.

요거를 눌러서 이렇게 활성화를 시켜 줄 수도 있고 Open Cascade라는 버튼이 있거든요.

아니면은 저는 일단 프로젝트를 한번 실행을 해 주고 커맨드 L을 누르면은 이렇게 Cascade를 활성화를 이렇게 해 줄 수가 있습니다.

지난번에 저희가 진행했던 무드 다이어리라는 서비스를 한번 Windsurf를 활용해서 조금 수정을 해 보도록 할 건데요.

저희가 필터 기능과 평범이라고 표시된 저희가 이제 어떤 일기를 작성하게 되면은 그 일기에 대한 내용을 분석해서 GPT가 이렇게 감정을 분석하고 분석된 그런 일기가 이렇게 목록으로 표시가 되는 그런 서비스를 만들어 보았었습니다.

그래서 오늘 Windsurf를 활용해 가지고 이 일기장 서비스에 정렬 기능을 한번 추가해 보도록 할 건데요.

예를 들어서 뭔가 날짜별로 이제 정렬을 해서 일기를 한번 바꿔 본다든지 아니면 필터링 기능을 사용해서 감정에 대한 일기만 한번 보여 준다든지 아니면 슬픔이라는 감정의 일기만 한번 확인하고 싶다든지 이런 부분에 대해서 저희가 Windsurf Cascade 기능을 활용해 요청을 해 보도록 할 건데요.

Cascade를 활용할 때 모델을 선택을 할 수가 있거든요.

Cascade에서 지원하는 모델은 GPT-4o 모델, 클로드 3.5 소넷 이렇게 세 가지 모델을 클로드 3.5 소넷을 활용해서 그리고 Cascade 베이스 모델 사용할 수가 있게 되어 있습니다.

저는 이제 한번 Cascade를 사용해 보도록 하고요.

Cascade는 그리고 두 가지 모드가 있거든요.

첫 번째 모드는 이 Write 모드는 아래쪽에 이 토글을 왔다 갔다 하면서 Write 모드가 있습니다.

예를 들어서 어, Write 모드 기능도 생성하거나 활성화를 시켜 줄 수가 있고, 커서의 컴포저 기능과 비슷하다고 여러분들이 생각을 해 주시면 될 거 같아요.

커서의 컴포저에서는 한 번에 여러 가지 파일들을 수정하거나 생성하는 그런 기능이라고 볼 수 있는데 커서의 컴포저 기능과 마찬가지로 저희 코드베이스의 여러 가지의 파일들을 수정할 수 있는 그런 기능이라고 볼 수가 있습니다.

그리고 이제 채팅 기능을 활용해서 있는 것도 동일하지만 채팅 기능은 커서의 채팅 기능과 동일하다고 생각하면 되는데요.

어떤 명령어를 입력해서 코드를 생성할 수, 직접 저희 코드 베이스에 파일이 수정이 되는 부분은 아니고 저희가 선택적으로, 선택적으로 선택을 해서 수정된 코드에 대해서 제가 이제 정렬 기능이나 필터링 기능을 반영을 할 수 있는 그런 기능이라고 보시면 될 것 같아요.

그래서 Write 기능을 사용해서 저희의 무드 다이어리 서비스에 필터링 기능과 정렬 기능을 한번 넣어 보도록 할 건데요.

만들어 달라고 할 때 데이터베이스에 스키마는 어떻게 되어 있고 어떠한 파일들을 참고해야 되고 그런 파일들을 제가 레퍼런스로 이렇게 골뱅이를 입력해서 넣어 줄 수도 있습니다.

그런데 Windsurf가 얼마나 추가하고 싶다고 제가 아무런 컨텍스트를 저희 컨텍스트를 잘 이해하고 있는지 그런 것들을 보기 위해서 아무런 컨텍스트를 넣어 주지 않고 알아서 컨텍스트를 찾아서 그렇게 명령을 한번 수행해 보도록 할 건데요.

저는 이런 식으로 그냥 명령 명령을 한번 작성을 해 봤어요.

일기장 메인 페이지에서 필터링 기능과 정렬 기능을 추가하고 싶은데 필터링 기능에는 감정 상태에 따라서 일기를 필터링 하고 싶고 정렬 기능에는 일기 작성 날짜에 따라서 정렬 기능을 명령을 한번 입력을 해 보도록 하겠습니다.

주어주지 않고 커서 AI에게 명령을 넣어 주었는데요.

수행하기 전에 이렇게 어 이제 Cascade에서는 어떤 명령을 두 가지를 이제 찾은 거 같고요 저희의 파일들을 알아서 서치를 하게 됩니다.

그래서 관련된 파일들이 어떤 파일들이 있는지를 먼저 서치를 하게 되고 그 다음에 애널라이즈 라는 분석 단계를 거치거든요.

그래서 자기가 이제 찾은 파일들에 대해서 분석을 해 본 다음에 어떤 파일들을 수정해야 되는지를 한번 판단을 하게 되는 그런 과정이 들어가 있습니다.

파일을 지금 먼저 그래서 메인 페이지 수정이 완료가 되었고 HTML도 이렇게 그래서 수정을 해 주고 있는 모습입니다.

기존에 생성되어 있는 파일들에 대해서는 이렇게 Editing을 사용해 가지고 수정을 이제 진행을 해 주는 것을 저희가 확인할 수가 있고요.

요거를 이제 눌러 보게 되면은 어떤 변경 사항이 있는지 여기서 이제 확인을 해 볼 수가 있습니다.

이제 필터링 관련된 기능들이 추가가 되고 수정이 된 것을 확인할 수가 있습니다.

이제 수정된 기능을 저희가 한번 적용시켜 주면 되는데요.

예를 들어서 저희가 이제 코드 page.

tsx 이 파일 내부에서 수정을 적용시켜 주는 방법 여기서 저희가 원하는 부분만 이렇게 Accept를 눌러서 수정을 반영을 시켜 줄 수도 있고 아니면 그냥 전체적인 코드를 적용시켜 주고 싶다 했을 때는 이렇게 이 파일에 있는 모든 체인지 모든 변경 사항들을 그리고 아래쪽에 Accept all을 눌러서 적용시켜 줄 수가 있습니다.

이거는 이제 뭐 커서와 거의 비슷하다고 볼 수가 있는 부분인 것 같고요.

ShadCN 컴포넌트가 추가가 안 된 것 같아요.

그래서 ShadCN 셀렉트 컴포넌트 추가해 줘 라고 이렇게 명령을 한번 입력을 해 보도록 할게요.

그리고 이제 카스키에 대해서는 요렇게 제가 컴포넌트 추가해 달라고 했을 때 어 터미널 명령어도 진행을 해 줄 수가 있게 되어 있거든요.

지금 보시게 되면은 제가 select 컴포넌트를 추가해 달라고 하니까 pnpm shadcn 명령어를 활용해 가지고 입력을 해 준 것을 확인할 수가 있습니다.

저희가 이제 억셉트를 눌러서 이 터미널 명령어를 이 실행을 시켜 줄 수도 Cascade 내부에서 Accept를 누르게 되면은 ShadCN 컴포넌트를 있게 되어 있고요.

그래서 억셉트 한번 눌러 보도록 하겠습니다.

이렇게 터미널 명령어도 Cascade 내부에서 이렇게 실행이 완료가 되는 것을 확인할 수가 있고 그런데 에러가 발생했다고 하네요.

어, 아마 이 ShadCN CLI 명령어가 잘못되어 있어서 에러가 발생하는 것으로 확인이 되는데 ShadCN 컴포넌트를 올바르게 생성할 수 있는 CLI 명령어는 이 명령어거든요.

그래서 이 명령어를 기반으로 해서 다시 한번 생성을 요청해 보도록 하고요.

다시 생성해 달라고 요청을 해 보도록 하고요.

다시 설치를 진행하겠다고 합니다.

공식 방법으로 제가 이제 요청한 대로 이번에는 생성이 되어서 그래서 이번에는 정확한 CLI 명령어를 사용해서 진행해 주는 것 같은데 이제 컴포넌트가 잘 생성이 된 거 같네요.

npx 명령 으로 활용하니까 컴포넌트가 잘 지금 적용이 되었고요.

실제 저희의 프로젝트 들어와서 감정을 필터링하는 부분 보게 되면은 이렇게 최신순으로 정렬하는 부분들이 이렇게 들어간 것을 확인할 수가 있습니다.

그래서 모든 감정에서 행복된 감정만 나와야 되고 행복을 하게 되면 그 부분은 감정을 선택했을 때 필터링 슬픔, 화남 이렇게 필터링이 되어야 되는데 지금 필터링이 안 되는 모습이 보이고요.

한번 수정을 요청해 보도록 하고 최신순, 오래된 순은 동작을 하고 있는 것 같습니다.

API 호출이 없는 걸 보니까 뭔가 저희 API가 아직 연동이 안 된 것 같아요.

그래서 정렬 기능은 잘 추가된 것 같아.

근데 실제로 API 연동이 안 된 것 같아서 연동을 진행해 달라고 다시 한번 요청을 해 보도록 하고요.

어떠한 파일들에 대해서 제가 레퍼런스를 이번에도 마찬가지로 API 추가가 완료가 되었다고 하고 변경 사항을 한번 보게 되면은 일부러 제공을 안 해 봤습니다.

그럼 이제 Cascade가 이제 먼저 API 구조를 확인하기 위해서 api.

ts라는 파일을 한번 먼저 분석을 해 주었고요 필터링과 정렬을 위한 API 함수가 없어서 그러한 함수를 먼저 추가를 해 준 거 같습니다.

네, 어, 함수에다가 필터 쿼리랑 기존의 getAllDiaries라는 날짜 정렬 쿼리를 제가 이제 API 이렇게 추가를 해 준 모습입니다.

관련된 파일이 어떤 파일인지를 입력해 주지 않았는데도 Cascade가 알아서 잘 찾아가지고 수정을 해주는 모습이고요.

굉장히 많이 좋은 것 같습니다.

코드 베이스를 판단하는 능력이 그래서 프로젝트에서 이제 메인 페이지에 필터링 부분도 수정이 되었다고 하고 이걸 전체적으로 반영을 해서 다시 한번 체크해 보도록 할게요.

이번엔 행복 감정을 필터링을 해보도록 하고 행복을 누르면 이렇게 뭔가 에러가 발생하게 되었습니다.

이 에러 메시지를 그대로 복사해서 커서 AI에게 요 부분도 다시 한번 저희의 다시 한번 수정을 해달라고 수정을 요청해 보도록 할게요.

그대로 에러 메시지만 붙여 넣어 주었고요.

실제 데이터베이스 ENUM 값을 확인한다고 했는데 어떻게 확인했는지는 잘 모르겠고요.

지금 보게 되면은 데이터베이스 ENUM 값이랑은 다른 값들이 이렇게 반영이 된 거 같아요.

그래서 제가 저희 데이터베이스 ENUM 값은 제가 직접 넣어 주도록 하고요.

요거를 복사해서 이렇게 요청을 해보도록 하겠습니다.

메인 페이지에서도 제가 넣었던 제가 조금 전에 넣었던 데이터베이스 ENUM 값으로 이렇게 이모션 타입을 수정해 주었고요.

ENUM 값으로 해서 이렇게 셀렉트 아이템 을 수정을 다시 해 준 거 같습니다.

그래서 이걸 엑셉트를 눌러서 다시 반영을 해 주고 실제 저희의 프로젝트에 가서 다시 한번 것들이 이제 나오게 되고 반영이 된 것을 기존의 커서에서는 이제 필터링 걸어 보도록 할게요.

기쁨을 누르게 되면은 네, 이렇게 기쁨에 대한 그리고 슬픔, 슬픔도 나오게 되고 분노, 불안, 평범 이렇게 다 잘 필터링이 동작을 하는 것으로 확인이 되었고요.

어, 정렬도 확인할 수가 있습니다. 실제 데이터베이스 쿼리에서도 이렇게 정렬 필터가 잘 들어간 것을 확인을 할 수가 있고요.

제가 이 Windsurf를 사용해 보면서 느꼈던 부분이 코드 베이스를 파악하는 능력은 커서보다 조금 더 뛰어나다고 생각이 들었어요.

저희의 코드 베이스가 조금 이렇게 뭔가 커졌을 때 그것들을 잘 파악하지 못하는 문제가 있었는데 저희 컨텍스트를 조금 덜 Windsurf 에디터에서는 저희가 또 차이점이라고 한다면 제공한다고 하더라도 이러한 코드 베이스를 기반으로 파일들을 수정을 잘 해 주는 것을 느낄 수가 있었고요.

채팅 기능 이렇게 두 가지 기능을 이렇게 나눠줘서 커서에서는 컴포저 기능 새로운 채팅이 생성되는 그런 방식이었는데 커서에는 이렇게 채팅 기능과 컴포저가 커서 UI를 한번 보여 드리게 되면 Windsurf에서는 아까 커서와는 다르게 이렇게 나눠져서 그 컴포저에서는 컴포저에 관련된 컨텍스트만 있고 채팅에서는 또 그와는 별개로 채팅 관련된 컨텍스트만 이렇게 존재하는 형태였는데 Chat을 활용할 수가 있게 되어 있습니다.

하나의 컨텍스트 내에서 Write랑 음 Windsurf에서는 저희 작업을 굉장히 잘 이게 뭐 사용하는 분들에 따라서 이게 장점이 될 수도 있고 단점이 될 수도 있을 것 같은데요.

일단 이런 차이점이 하나 있는 부분이 있고 이 Cascade 기능이 실시간으로 저희 개발자가 개발하는 그러한 내용들을 잘 파악하고 있다는 게 굉장히 느껴지는 것 같습니다.

예를 들어서 저희의 실시간 행동을 분석해서 전례 없는 규모의 협업이 가능하다.

이러한 내용이 있는데 이게 어떤 말이냐면은 예를 들어서 이 Windsurf에서는 저희가 이제 코드 베이스에서 어떤 작업을 하고 있을 때 트래킹을 하고 있는 느낌이거든요.

여기서 diary라는 거를 notebook이라고 이제 notebook이라고 이렇게 변경 Cascade에게 컨텍스트를 주어지지 않고 이렇게 변경을 해 보도록 할게요.

해 보도록 하고 여기서 이제 저희가 continue라고 이렇게 입력을 해 보도록 하면은 저희가 작업했던 것들을 트래킹을 하고 있기 때문에 그 다음 작업을 이어서 해 주게 되거든요.

네, 지금 제가 어떠한 그냥 여기서 이제 수정하던 것들을 바탕으로 해서 입력만 해 준 거거든요.

그러면 이제 그냥 continue라고 다이어리 Windsurf가 이 부분이 정말 굉장하지 않나요 변수명을 노트북으로 변경하는 작업을 제가 하고 있던 거를 이제 판단을 하게 된 거예요.

그래서 여기서 이제 변경하는 작업을 다 진행을 해 주게 되고요.

기존의 커서에서는 사실 안 되던 기능 중에 하나인데 이런 기능은 코드 베이스 Windsurf에게 이렇게 제가 변수명 관련된 Windsurf에서는 그냥 코드에서 어떤 변경 사항을 입력하고 있던 것 이런 것까지 다 파악을 하고 있기 때문에 이런 부분에 대해서 더 자세하게 설명하지 않아도 저희 의도를 더 잘 파악하여 주게 된 그런 모습이 있습니다.

그래서 지금 보시게 되면은 '다이어리'를 '노트북'이라고 변경했는데, 이런 식으로 다이어리 관련된 그러한 부분들을 이렇게 다 수정을 해 준 것을 확인할 수가 있고요.

커서 AI 좀 긴장해야겠습니다... | Windsurf AI 에디터

안녕하세요 개발동생입니다 :)

이메일: devbrother2024@gmail.com


커서 AI 좀 긴장해야겠습니다... | Windsurf AI 에디터

Scripts