초보자를 위한 윈드서프 사용법 (AI 코드 에디터) - 커서보다 나은가?

Tech With Tim 구독자 1,720,000명

요약

본 영상은 AI 기반 코드 에디터 ‘윈드서프’를 활용한 튜토리얼로, 초보 개발자들이 쉽게 따라할 수 있도록 주요 기능과 사용 방법을 상세히 소개합니다. 영상에서는 설치, 가격 정책, 프로젝트 폴더 설정 및 React를 이용한 예제 프로젝트 생성 과정이 다루어지며, 코드 자동 수정, 터미널 명령 실행, 인라인 편집 등 다양한 기능을 실제 데모와 함께 설명합니다. 또한, 채팅 모드와 Write 모드의 차이점을 비롯해 효과적인 코드 관리와 추가 팁, 그리고 멘토십 프로그램 ‘Dev launch’에 대한 안내도 포함되어 있어 AI 코드 에디터 활용법 전반을 익히기에 유용합니다.

주요 키워드

윈드서프 AI 코드 에디터 프롬프트 React 터미널 파일 수정 Write 모드 Chat 모드 Cascade Dev launch

하이라이트

🔑 영상은 윈드서프라는 신개념 AI 코드 에디터의 기본 기능과 실사용 팁을 소개합니다.
🚀 무료 플랜과 Pro 플랜 사이의 차이점을 설명하며, Pro 플랜(월 $10)이 파일 수정 등 유용한 기능을 제공함을 강조합니다.
⚡️ 프로젝트 시작 전, 적절한 폴더 생성 및 파일 저장 위치 관리의 중요성을 언급합니다.
🌟 프롬프트를 통해 React 기반의 Trivia 게임 같은 예제 앱을 생성하고, AI가 자동으로 여러 파일을 수정하는 과정을 보여줍니다.
📌 터미널에서 실행되는 명령어와 변경사항을 실시간으로 확인할 수 있는 Cascade 창의 역할을 상세히 설명합니다.
🚀 채팅 모드와 Write 모드 간 전환, 인라인 편집 및 코드 컨텍스트 태깅 등의 기능 사용법을 안내합니다.
🌟 마지막으로, 디렉터리 구조, 변수명 등 코드 관리에 관한 실전 팁과 Dev launch 멘토십 프로그램에 대한 안내를 제공합니다.

용어 설명

윈드서프

VS Code 설정을 가져와 커스터마이징된 AI 코드 에디터로, 코드 자동 생성 및 수정 기능을 제공함.

Cascade

윈드서프 내에서 파일 수정, 터미널 명령 실행과 변경사항 확인을 담당하는 핵심 기능.

Write 모드 / Chat 모드

파일을 실제로 수정하는 Write 모드와 코드 생성 출력만 보여주는 Chat 모드를 의미함.

인라인 편집

선택한 코드 영역을 대상으로 즉각적인 수정을 진행할 수 있는 기능.

Dev launch

영상 제작자가 제공하는 개발자 멘토십 프로그램으로, 소프트웨어 엔지니어로서 성장할 수 있도록 직접 지원함.

챕터 정보가 없습니다.

[00:00] 오늘은 AI 코드 에디터인 윈드서프(Windsurf)를

[00:02] 살펴보도록 하겠습니다.

[00:04] 이 에디터는 2024년 말에 출시된 비교적 새로운 도구인데

[00:06] 저는 지난 몇 달 동안 이것을 사용해왔고

[00:08] 초기 사용자 중 한 명이었습니다.

[00:10] 재미있게도

[00:11] 이제는 제가 가장 좋아하는 AI 코딩 에디터 중 하나가 되었죠.

[00:14] 이 영상에서는 튜토리얼을 통해

[00:16] 여러분께 알아야 할 모든 기능을

[00:17] 안내해 드리고

[00:19] 알아야 할 기능들을 소개하고

[00:21] 매일 사용하면서 얻은

[00:22] 제 경험을 바탕으로

[00:23] 여러분이 이를 가장 잘 활용할 수 있도록

[00:25] 특히 초보 프로그래머들을 위한

[00:27] 팁과 요령을 공유하도록 하겠습니다.

[00:30] 우선 첫 번째로

[00:31] 윈드서프를 다운로드하고 설치해야 합니다.

[00:33] 이미 설치하셨다고 가정하고

[00:35] 가격 정책에 대해 잠깐 말씀드리고 싶습니다.

[00:37] 윈드서프는 무료 플랜을 제공하지만

[00:39] 제가 알기로는 적어도

[00:41] 이 영상을 촬영하는 시점에서는

[00:43] 파일 수정이 불가능합니다.

[00:46] AI와 대화하고 코드를 생성할 수는 있지만

[00:48] 실제로 파일에 코드를 작성하지는

[00:50] 못하는데, 제가 보기에 이것이

[00:52] 이 도구를 사용하는 주된 이유입니다.

[00:54] 저는 매일 사용하기 때문에

[00:56] 프로 얼티메이트 플랜을 사용하고 있지만

[00:58] 대부분의 사용자들은 아마도

[01:00] 월 10달러의 프로 플랜이면 충분할 것 같습니다.

[01:02] 커서(Cursor)와 비교하면

[01:04] 현재 월 20달러를 받고 있는데

[01:06] 이는 꽤 좋은 거래라고 할 수 있죠.

[01:08] 하지만 무료 플랜만 사용하실 거라면

[01:09] 굳이 시도해보지 않으시는 게 좋을 것 같습니다.

[01:11] 에디터를 사용해볼 순 있지만

[01:13] 유료 플랜을 사용하지 않으면 실제로는

[01:15] 그다지 유용하지 않습니다.

[01:17] 제 의견으로는 가치가 있습니다.

[01:19] 이건 스폰서를 받은 게 아니라서

[01:20] 여러분이 원하는 것을 사용하시면 되고

[01:22] 코드 생성만 필요하다면

[01:24] 커서를 무료로 사용하셔도 됩니다.

[01:26] 이제 튜토리얼을 시작해보겠습니다.

[01:28] 이건 정말 멋진 에디터이고

[01:29] 한번 살펴볼 만한 가치가 있습니다.

[01:32] 제가 방금 윈드서프를 열었는데

[01:33] 여러분의 것과는 약간 다르게 보일 수 있습니다.

[01:34] 그 이유는 윈드서프를 다운로드하면

[01:36] VS Code의 포크이기 때문에

[01:39] 기존 VS Code 설정을

[01:40] 가져올지 물어볼 것입니다.

[01:43] 저는 그렇게 했고 테마와

[01:45] 확장 프로그램들이 있어서 전부 가져왔죠.

[01:46] 그래서 이미 VS Code를 사용하고 계신

[01:48] 개발자들에게는 정말 편리합니다.

[01:50] 어쨌든 처음 시작할 때

[01:52] 코드를 작성하기 전에

[01:53] 폴더를 열어야 합니다.

[01:55] 폴더 열기를 선택하고

[01:57] 제 데스크톱으로 가서

[01:58] 'test'라는 폴더를 만들건데

[02:00] 이미 test 폴더가 있네요.

[02:02] 그래서 'tutorial'이나

[02:03] 'test tutorial' 같은 이름으로 만들어보겠습니다.

[02:07] 나중에 찾기 쉬운

[02:08] 위치에 저장하세요.

[02:09] 많은 초보자들이

[02:11] 코드를 어디에 저장했는지 기억하지 못해서

[02:13] 나중에 컴퓨터를 끄고

[02:15] 다시 켰을 때

[02:16] 프로젝트를 찾지 못하는

[02:17] 실수를 하거든요. 그러니까

[02:19] 프로젝트를 나중에도 찾을 수 있는

[02:20] 위치에 저장해두시기 바랍니다.

[02:22] 이제 여기서 보시면

[02:23] 바로 Cascade 창이 나타날 것입니다.

[02:26] 이것이 Windsurf의 코파일럿 같은

[02:28] 기능이라고 보시면 됩니다.

[02:29] Cascade라는 이름의 의미는

[02:31] 잘 모르겠지만

[02:32] 중요한 것은 이것이

[02:33] 코드베이스를 실제로 수정하는 데

[02:35] 사용할 주요 기능이라는 점입니다.

[02:38] 제가 90% 정도 사용하는

[02:40] 핵심 기능이기 때문에

[02:41] 이것을 중심으로 설명하겠습니다.

[02:44] 실제로 프롬프트를 입력하고

[02:46] 코드를 생성하기 전에

[02:48] 잠깐 시간을 내서

[02:50] 간단한 계획을 세우시는 것을 강력히 추천합니다.

[02:52] 정확히 무엇을 만들고 싶은지

[02:54] 무엇을 구축하고 싶은지

[02:56] 사용자 인터페이스가 어떻게 보일지

[02:58] 간단히 스케치해보세요.

[02:59] 이렇게 말씀드리는 이유는

[03:01] AI 모델들이 때로는 예상치 못한

[03:03] 방향으로 갈 수 있기 때문입니다.

[03:05] 정확히 원하는 것이 무엇인지

[03:07] 모르면 원하는 결과를

[03:09] 얻기가 매우 어려울 수 있습니다.

[03:10] 그러니 간단한 계획을 세우고

[03:12] 최종 결과물이 어떤 모습일지

[03:14] 미리 구상해보시기 바랍니다.

[03:16] 그러면 여기에서 무작정

[03:17] 여러가지를 시도하는 것보다

[03:19] 훨씬 더 효과적일 것입니다.

[03:20] 그렇지 않으면 원치 않는

[03:22] 방향으로 이끌려갈 수 있습니다.

[03:23] 자, 이제 내부를 보시면

[03:25] 프롬프트를 입력해서

[03:27] 바로 코드를 생성할 수 있는데

[03:28] 여기서 보시면

[03:31] Write와 Chat이라는

[03:32] 모드 선택기가 있다는 걸 알 수 있습니다.

[03:35] Write 모드로 설정되어 있는지 확인하세요.

[03:37] 무료 버전에서는 아마

[03:38] 이 기능에 접근할 수 없을 것입니다.

[03:40] Write 모드가 켜져 있으면

[03:43] 기본적으로 여러 파일을

[03:44] 수정하거나 새 파일을 생성하는 등

[03:46] 다양한 작업을 수행할 수 있습니다.

[03:48] 신중하게 접근하고 싶다면

[03:50] Chat 모드로 변경하세요. 이 모드에서도

[03:52] 코드는 작성할 수 있지만

[03:54] 실제 파일에는 적용되지 않습니다.

[03:56] 두 가지 모드가 있는데

[03:57] 코드베이스와 대화하려면 Chat을 사용하고

[03:59] 코드와 관련 없는 UI 출력이나

[04:01] 파일을 수정하고 싶지 않다면

[04:03] Chat을 사용하세요.

[04:04] 파일을 수정하고 싶다면

[04:06] Write 모드를 사용하면 됩니다.

[04:08] 잠시만 중단하겠습니다.

[04:09] 곧 계속하겠지만

[04:11] 이 채널을 오래 보셨고

[04:12] 소프트웨어 엔지니어로서

[04:14] 실력을 향상시키고 싶으시다면

[04:16] 제 멘토십 프로그램을 다시 시작한다는 것을

[04:18] 알려드립니다. Dev Launch라는 프로그램으로

[04:20] 저와 1대1로 직접 소통하면서

[04:22] 소프트웨어 엔지니어로서 성장하는 데

[04:24] 도움을 드립니다. 다음 단계로

[04:26] 무엇을 배워야 할지, 취업은 어떻게 할지

[04:29] 프로그램에 참여한 분들 중에는

[04:30] 기업가가 되고 싶어하는 분들도 있었고

[04:31] 기업가나 프리랜서가 되는 방법,

[04:33] 프로젝트 가격 책정을 제대로 하는 방법 등

[04:35] 소프트웨어 개발 업계에서

[04:36] 필요한 모든 것을 도와드릴 수 있습니다.

[04:39] 만약 적합하다고 생각하시면

[04:40] 아래 링크를 클릭하거나

[04:42] training.techwithtim.net에 방문하셔서

[04:45] 지원하실 수 있습니다.

[04:46] 프로그램에 대해 자세히 알아보시고

[04:48] 적합하다고 판단되면

[04:50] 제 팀에서 연락드릴 것입니다.

[04:52] 자, 이제 나머지 튜토리얼을

[04:54] 계속 진행해보겠습니다.

[04:56] 방금 프롬프트를 입력했는데,

[04:57] 리액트 애플리케이션으로

[05:00] 재미있는 퀴즈 게임을 만들고

[05:01] 점수를 파일에 저장하도록 요청했습니다.

[05:04] 여기서 주목할 점은

[05:06] 제가 정확한 프레임워크와 언어를

[05:08] 지정했다는 것입니다.

[05:09] 리액트의 경우

[05:10] 자바스크립트를 사용한다는 것이 암시적이지만,

[05:12] 단순히 '앱을 만들어줘'라고

[05:14] 요청하면 안 됩니다.

[05:16] 그러면 AI가 임의로

[05:17] 언어나 기술을 선택할 것이기 때문입니다.

[05:20] 최소한 사용할 프레임워크와

[05:22] 기술 스택을 정해야 합니다.

[05:23] 데이터베이스, 백엔드, 프론트엔드,

[05:25] 프론트엔드 프레임워크,

[05:27] CSS 스타일링 라이브러리나

[05:28] 컴포넌트 라이브러리 등을 결정해야 합니다.

[05:31] 코딩을 조금이라도 아신다면

[05:32] AI에 요청하기 전에

[05:34] 이런 결정들을 먼저 내려야 합니다.

[05:36] 제 경우에는 리액트를 사용하고 있는데,

[05:38] 무엇을 사용할지 모르겠다면

[05:40] 채팅 모드로 전환해서

[05:42] 원하는 기능에 맞는 기술 스택을

[05:44] 추천받을 수 있습니다.

[05:45] 하지만 어쨌든

[05:47] 기술 스택은 지정해주세요.

[05:48] 그렇지 않으면

[05:50] 예상치 못한 결과를 받게 될 수 있습니다.

[05:51] 자, 이제 엔터를 누르면

[05:52] 작동하기 시작하는 것을 보실 수 있는데,

[05:54] 여러 파일들을 생성하기 시작합니다.

[05:56] 이게 정말 흥미로운 점인데,

[05:58] 제가 기대했던 첫 번째 기능이

[05:59] 나타났습니다. Windsurf가

[06:01] 터미널 명령어를

[06:03] 실행할 수 있다는 점입니다.

[06:05] Vite+React 프로젝트를 만들어달라고 했기 때문에,

[06:07] 이것이 사용해야 할

[06:09] 명령어라는 것을 알고

[06:11] 실행 허용을 요청합니다.

[06:13] 수락을 누르면

[06:14] 터미널에서 실행되고

[06:16] 그 명령어의 출력을

[06:18] 분석할 수 있습니다.

[06:20] 이것이 바로

[06:21] Cursor와 다른 점 중 하나입니다.

[06:23] 수락을 누르면

[06:25] 실제로 어디서 실행되는지

[06:27] 궁금하시다면, 하단의

[06:29] 터미널 탭을 열어보세요.

[06:31] 여기서 실행 중인 다양한

[06:33] 터미널을 전환할 수 있습니다.

[06:35] Cascade 터미널이 있는 것을 볼 수 있고

[06:37] 이 기본 Cascade 터미널을 보면

[06:39] 방금 Cascade가 실행한

[06:41] 명령어와 그 출력 결과가

[06:43] 표시되어 있습니다.

[06:45] 참고로 알아두시면 좋을 것 같습니다.

[06:47] 실제로 어디서 실행되는지

[06:49] 페이지 하단에서 열 수 있는

[06:50] Cascade라는 터미널에서 실행됩니다

[06:52] 페이지 하단에서 확인할 수 있습니다

[06:55] 이제 우리가 하고자 하는 것은

[06:57] CD 명령어로 이동하고 npm을 설치하는 것입니다

[06:59] 이것이 작동하지 않는 이유는 Powershell에 있기 때문입니다

[07:02] 이 명령어를 실행해보겠습니다

[07:04] 이제 다양한 패키지들이 설치될 것입니다

[07:06] 명령어 실행이 완료되었고

[07:07] Cascade가 여러 파일들을

[07:09] 생성하고 있는 것을 볼 수 있습니다

[07:11] 편집량에 따라 몇 분 정도

[07:13] 걸릴 수 있습니다만

[07:14] 방금 받은 이 출력 메시지에

[07:16] 주목해주시기 바랍니다

[07:18] Cascade는 이미 존재하는 파일을 생성하지 않습니다

[07:20] 이는 좋은 점입니다. 이미 있는 코드를

[07:22] 덮어쓰지 않는다는 의미이기 때문입니다

[07:24] 대신 해당 파일들을 수정할 것입니다

[07:26] 하지만 주의해야 할 점은 Cascade가

[07:28] 저장되지 않은 변경사항이 있는

[07:30] 파일은 수정하지 않는다는 것입니다

[07:32] 따라서 수동으로 변경사항을 만들었다면

[07:34] 반드시 그 파일을 저장해야

[07:36] 다음에 Cascade에 작업을 요청할 때

[07:38] 파일을 수정할 수 있습니다

[07:40] 그래서 말인데

[07:42] 이제 app.jsx, app.css와 같은

[07:44] 여러 파일들을 생성했고

[07:46] 이 프로젝트를 실제로 실행하기 위한

[07:48] 백엔드 명령어를 실행할지 물어보고 있습니다

[07:50] 수락을 누르고

[07:51] 어떻게 되는지 보겠습니다

[07:54] 실행되고 있는 것을 볼 수 있고

[07:55] 다시 한 번 말씀드리면

[07:57] 이 프로세스가 실행되는 곳은

[07:58] 여기 Cascade 터미널입니다

[08:00] 보통 다른 터미널도 있을 텐데

[08:02] Cascade 터미널을

[08:03] 클릭해서 이 프로세스를 확인하고

[08:05] 진행 상황에 영향을 줄 수 있습니다

[08:07] 또한 상단에서

[08:09] 백그라운드에서 실행 중인 프로세스와

[08:11] 현재 실행 중인 명령어를

[08:13] 확인할 수 있습니다

[08:15] 여러 명령어를

[08:16] 동시에 실행할 수 있기 때문에

[08:18] 여기서 추적하거나

[08:19] X 버튼으로

[08:21] 프로세스를 종료할 수 있습니다

[08:24] 좋습니다. 이제 모든 것이 완료되었고

[08:25] 전체 실행 단계가 끝나면

[08:27] 수정된 파일 목록을

[08:29] 보여줄 것입니다

[08:31] 여기서 이 파일들을 클릭하면

[08:34] 모든 변경사항을 확인할 수 있습니다

[08:36] 마치 GitHub 풀 리퀘스트처럼

[08:37] 모든 diff를 보여주고

[08:39] 하단에서는 원하는 경우

[08:41] 여러 파일의 변경사항을

[08:42] 단계별로 확인할 수 있습니다만

[08:44] 저는 보통 그냥

[08:46] 여기서 파일을 클릭해서

[08:47] 변경된 내용을 확인합니다

[08:49] 물론 매우 세부적으로

[08:50] 변경사항을 확인할 수 있고

[08:52] 개별 파일을 거부하거나 수락할 수 있으며

[08:55] 대담하게 가고 싶다면

[08:56] '모두 수락'을 누르면 됩니다

[08:58] 우리는 모두 수락을 누르고

[09:00] 이제 이 모든 것이 코드베이스에

[09:02] 추가될 것입니다

[09:04] 자, 이제 Cascade가 무엇을 했는지 살펴보겠습니다.

[09:06] 제 경우에는 이걸 여는 방법을 알고 있으니

[09:08] 여기로 가서 이것을 찾아보도록 하겠습니다.

[09:10] 이것을 열어보면

[09:12] 퀴즈 챌린지 앱이 보입니다.

[09:14] '게임 시작'을 눌러보겠습니다.

[09:16] 그러면 이런 질문들이 나오고

[09:18] 게임이 끝나면 '게임 오버'가 뜨고

[09:19] 5문제 중 1문제 맞췄네요. '다시 플레이' 할 수 있고

[09:21] 최고 점수도 저장됩니다. 이 정도면

[09:23] 단일 프롬프트 치고는

[09:24] 꽤 괜찮은 결과물이네요. 물론

[09:26] 비교적 간단한 프로젝트이긴 하죠.

[09:29] 이제 많은 사람들이

[09:30] 이 에디터에서 혼란스러워하는 몇 가지를 설명하겠습니다.

[09:32] 우선 간단한 변경을 요청해보겠습니다.

[09:34] '더 보기 좋게 만들어줘'라고

[09:35] 요청해보겠습니다.

[09:40] 매우 모호한 요청이라 추천하진 않지만

[09:42] 여러분을 위한 빠른 예시로

[09:43] 보여드리는 것입니다. 이제

[09:45] Cascade가 파일들을 편집하기 시작할 텐데

[09:47] 많은 분들이 모르시는 것이

[09:49] Cascade가 편집하는 내용이

[09:51] Cascade가 작성하는 동안 실제로 파일 안에 있다는 겁니다.

[09:54] 제가 말씀드리는 것은 '모든 변경 수락'을

[09:57] 누르지 않았더라도

[09:59] 그 내용이 이미 파일 안에 있다는 거죠.

[10:01] 즉, Cascade를 닫더라도

[10:03] 그 내용은 여전히 남아있습니다. 또한

[10:05] '수락' 버튼을 누르기 전에

[10:08] Cascade가 한 작업을 테스트할 수 있다는 뜻입니다.

[10:10] 그래서 Cascade가 수정을 하면

[10:12] 이미 코드베이스에 반영되어 있고

[10:14] 만약 이를 제거하고 싶다면

[10:15] '모든 변경 거부'를 눌러야

[10:18] 코드베이스에서 삭제됩니다.

[10:20] 변경사항을 제거하려면

[10:22] '모든 변경 거부'를 눌러야 하며

[10:24] 그러면 Cascade가 한 작업이 취소됩니다.

[10:27] 이해가 되셨길 바랍니다만

[10:28] 많은 분들이 코드가

[10:30] 실제로 언제 작성되는지

[10:32] 헷갈려하시는데, 이는

[10:33] 다른 AI 코드 에디터들과는

[10:35] 약간 다르게 작동하기 때문입니다. 여기서는

[10:38] app.css를 수정했고

[10:40] 지금 보이는 모든 변경사항이

[10:42] 실제로 이 파일에 저장되어 있습니다. 제가

[10:44] 프론트엔드를 확인해보면

[10:46] '모든 변경 수락'을 누르지 않았는데도

[10:49] 실제로 변경되어 있는 것을 볼 수 있죠.

[10:51] 되돌리고 싶다면 '모든 변경 거부'를,

[10:53] 현재 상태를 유지하고 싶다면

[10:55] '모든 변경 수락'을 누르면 됩니다.

[10:57] 이 점을 꼭 기억하세요. 왜냐하면

[10:58] Cascade의 변경사항을 취소하는 것이

[11:00] 약간 까다로울 수 있기 때문입니다.

[11:02] 특히 여러 번의 편집을

[11:04] 거치면 더욱 그렇죠. 저는 이제

[11:06] 괜찮아 보이니 '모든 변경 수락'을 누르겠습니다.

[11:08] 보시다시피

[11:09] 이제 좀 더 보기 좋아졌네요.

[11:11] 기본 기능은 이정도로 하고

[11:12] 이제 빠르게

[11:14] 알아두면 좋을

[11:15] 다른 기능들을 살펴보겠습니다. 먼저 이것이 채팅

[11:17] 창인데, 열고 닫으려면

[11:19] 운영체제에 따라 Ctrl+L 또는 Command+L을

[11:21] 사용하시면 됩니다.

[11:23] 또는 여기 위에 있는

[11:25] Cascade 로고처럼 생긴

[11:27] 버튼을 누르면 열고 닫을 수 있습니다.

[11:29] 챗 창 내에서는

[11:31] 새로운 대화를 시작하고 싶다면

[11:32] 새로운 세션을 열 수 있습니다.

[11:34] 플러스 버튼을 눌러서

[11:36] 새 세션을 만들 수 있습니다.

[11:38] 이전과 완전히 다른 주제로

[11:39] 질문하려고 할 때는

[11:41] 새 세션을 여는 것을 추천드립니다.

[11:43] Windsurf는 이전 대화의 맥락을

[11:45] 모두 참고하기 때문에

[11:48] 완전히 다른 주제로

[11:49] 작업을 하려고 할 때

[11:51] 혼란이 생길 수 있습니다.

[11:52] 또한 이 채팅창에서는

[11:54] 컨텍스트를 추가할 수 있습니다.

[11:56] @ 기호를 사용해서

[11:58] 파일, 디렉토리, 문서,

[12:00] 웹사이트 링크 등을 태그할 수 있습니다.

[12:03] 참조하고 싶은 것은 무엇이든 가능합니다.

[12:05] 프롬프트를 작성할 때

[12:07] 하지만 Windsurf의 좋은 점은

[12:09] 자동으로 컨텍스트를 파악한다는 것입니다.

[12:12] 수동으로 태그할 필요 없이

[12:14] 컨텍스트를 자동으로 인식합니다.

[12:15] 예를 들어, 채팅 모드에서

[12:17] '내 프로젝트를 설명해줘'라고 하면

[12:20] 먼저

[12:22] 프로젝트를 스캔하기 시작합니다.

[12:25] 보시다시피

[12:26] 프로젝트 디렉토리를 확인한다고 하며

[12:28] 정확히 어떤 파일을

[12:30] 살펴보고 있는지 알 수 있습니다.

[12:32] 코드의 내용을 파악하기 위해서요.

[12:34] 따라서 대규모 프로젝트가 아니라면

[12:36] 컨텍스트를 수동으로 추가할 필요가 없습니다.

[12:38] 프롬프트가 충분히 구체적이라면

[12:40] 자동으로 파악할 수 있습니다.

[12:42] 하지만 코드의 특정 부분을

[12:44] 태그하고 싶다면

[12:46] @ 기호를 사용해서

[12:48] 파일이나 디렉토리를 선택하고

[12:50] 파일 수정이나 질문을 할 수 있습니다.

[12:51] 원하는 작업을 지정할 수 있죠.

[12:54] 개별 파일을 태그하는 것 외에도

[12:55] 코드의 특정 섹션을

[12:57] 참조할 수도 있습니다.

[12:59] 예를 들어, 여기 있는

[13:01] state에 대해 이야기하고 싶다면

[13:03] 이 부분을 하이라이트하고

[13:05] Ctrl+L을 누릅니다.

[13:07] 하이라이트된 코드 섹션에서 Ctrl+L을 누르면

[13:10] 해당 코드 섹션이

[13:12] 채팅창의 컨텍스트로 추가됩니다.

[13:14] 아래에서 볼 수 있듯이

[13:17] app.jsx와

[13:19] 제가 언급한 라인들이 하이라이트됩니다.

[13:21] 이제 이 라인들을 참조해서

[13:23] '이 코드가 무슨 일을 하는지 설명해줘'

[13:26] 라고 물어볼 수 있고, AI는

[13:28] 해당 영역을 분석할 것입니다.

[13:30] targeted 수정을 하고 싶을 때도

[13:32] 같은 방식으로 할 수 있습니다.

[13:34] 여러 섹션을 태그할 수도 있는데

[13:35] 저는 이 기능을 자주 사용합니다.

[13:37] 코드를 하이라이트하고

[13:39] Windsurf에 전달해서

[13:41] 오류나 문제가 있는지

[13:42] 확인하고 수정할 수 있습니다.

[13:44] 자 이제 다시 Write 모드로 돌아가서

[13:46] Cascade라고 실수로 몇 번 언급했네요.

[13:48] 제가 사용하는 다른 도구인데

[13:50] 아무튼 여러분은 이해하셨을 거예요.

[13:51] 이제 할 수 있는

[13:53] 다른 기능들에 대해

[13:55] 이야기해보겠습니다.

[13:56] 여기서 모델도 변경할 수 있는데요

[13:58] 가입한 플랜에 따라 GPT-4나

[14:00] Claude-3.5를 선택할 수 있습니다. 저는 주로 Claude-3.5를 사용해요

[14:03] 이제 인라인 편집이 가능한데

[14:06] 예를 들어 채팅창을 없애고 싶다면

[14:07] Ctrl+L로 제거할 수 있고

[14:09] 이런 부분들을 하이라이트해서

[14:12] 선택한 다음에

[14:14] Ctrl+I를 누르면 됩니다

[14:16] 키보드에서 Ctrl+I나 Command+I를 누르면

[14:18] 여러 모델이 표시되는데

[14:19] 먼저 Claude-3.5로 변경하고

[14:20] 코드의 특정 부분만

[14:22] 빠르게 수정하는 명령어를

[14:24] 입력할 수 있습니다

[14:26] 작은 변경을 하고 싶을 때

[14:28] 리팩토링이나

[14:30] 명명 규칙을 변경하고 싶을 때

[14:32] Ctrl+I로 인라인 편집을 사용하면 됩니다

[14:34] 예를 들어 이렇게 요청할 수 있죠

[14:36] "이것을

[14:38] 파스칼 케이스로 바꿔줘"

[14:41] 카멜 케이스가 아닌 파스칼 케이스로요

[14:44] 간단한 예시일 뿐이에요

[14:45] 무작위로 보여드리는 거지만

[14:47] 변경사항이 적용되고

[14:48] diff로 확인할 수 있습니다

[14:50] 여기서 추가 요청도 할 수 있고

[14:52] 다른 작업을 요청하거나

[14:53] 모든 변경사항을 수락하거나

[14:55] 거부할 수도 있습니다

[14:58] 되돌리고 싶다면

[14:59] Ctrl+Z를 사용하면 되는데

[15:00] 되돌릴 때도 diff가 표시됩니다

[15:03] 이제 제가 할 것은

[15:04] 채팅창으로 가서

[15:05] "퀴즈에 타이머를 추가해줘"라고 요청해보겠습니다

[15:09] 우리가 추가하고 싶은 기능이죠

[15:15] 그리고 이후에

[15:17] WindSurf의 특별한 기능을

[15:19] 보여드리려고 합니다

[15:21] 다른 에디터에는 없는 기능이에요

[15:23] 타이머가 추가되었고

[15:24] CSS도 추가되었네요

[15:26] app.js에 로직도 추가되었습니다

[15:29] 모두 수락하고

[15:30] 다음으로 재미있는 걸 해볼건데요

[15:32] 'continue'라고 입력해보겠습니다

[15:34] 이렇게 하면 WindSurf는

[15:36] 이전 작업 맥락을 기반으로

[15:38] 동일한 실행 흐름을 이어갑니다

[15:40] 이전에 하던 작업을 기반으로

[15:42] 다음에 할 작업을 예측하고

[15:44] 이전 대화 기록을 바탕으로

[15:46] 작업을 진행하는 거죠

[15:48] 그걸 자동으로 실행합니다

[15:50] 이 경우에는

[15:51] 시간이 얼마 남지 않았을 때

[15:53] 시각적 표시를 추가하고

[15:54] 기존 게임 로직과 통합하겠다고 하네요

[15:56] 물론 하나만 요청했기 때문에

[15:58] 맥락이 많지는 않지만

[16:00] 다음 단계로 적절한 제안이네요

[16:02] 기능을 작업할 때

[16:04] 직접 코딩하거나

[16:06] 채팅창에서 요청할 때

[16:07] 멈추고 'continue'를 입력하면

[16:10] 이전 작업을 기반으로

[16:11] 다음 작업을 논리적으로 추측해서

[16:13] 계속 진행해 나갈 수 있습니다

[16:16] 마음에 들지 않으면

[16:17] 거부할 수 있지만

[16:19] 이 경우에는 괜찮은 기능이니

[16:21] 수락하고

[16:22] UI로 돌아가보겠습니다

[16:25] 다시 UI로 돌아가서 한번 시도해보겠습니다

[16:27] 타이머를 확인해볼 건데... 타이머가 보이지 않네요

[16:29] 아마도 뭔가 잘못된 것 같습니다

[16:32] 하지만 이미 이전보다는 훨씬 나아 보이네요

[16:33] 지금 우리가 하고 있는 게 뭐냐면

[16:36] 그냥 무작위로 추측하고 있는데

[16:37] 아, 여기 있네요

[16:39] 타이머가 아직 표시되지 않지만

[16:41] AI가 항상 모든 것을 완벽하게 하진 않죠

[16:43] 게다가 제 프론트엔드가 실행 중이지 않아서

[16:45] 다시 실행하면 해결될 것 같네요

[16:48] 그래서, 뭐 몇 가지 실수가 있었는데

[16:49] AI니까 그럴 수 있죠

[16:50] 여기서 한 가지 더 말씀드리자면

[16:53] 무언가를 선택했을 때

[16:54] 위쪽에 표시가 되는데

[16:56] 설명, 리팩터링, 독스트링 추가와 같은

[16:58] 몇 가지 유용한 버튼들이 있습니다

[17:00] 자주 사용하는 기능들을

[17:01] 처리할 수 있는 버튼들이죠

[17:03] 솔직히 저는 이것들을 자주 사용하지는 않지만

[17:04] 기능은 존재합니다

[17:07] Windsurf에는 다른 기능들도 있지만

[17:08] 일반적으로 이것들이 주요 기능이고

[17:10] 99% 시간 동안 사용하게 될 것들입니다

[17:12] 이미지 추가도 할 수 있고

[17:14] 여러 파일을 참조할 수도 있죠

[17:16] 기능들을 직접 살펴보고

[17:17] 사용해볼 수 있지만, 일반적으로

[17:19] 제가 발견한 바로는 이게 Cursor보다

[17:21] 훨씬 더 잘 작동합니다. 특히 여러 파일을

[17:23] 다룰 때 더 그렇죠

[17:25] 이제 영상을 빠르게 마무리하면서

[17:27] 몇 가지 팁을 공유하고 싶은데요

[17:29] 이 도구를 사용할 때

[17:30] 최상의 결과를 얻기 위한 팁들입니다

[17:33] 첫 번째 팁은 편집하고 싶은

[17:34] 파일을 명시적으로 지정하는 것입니다

[17:36] 한두 개의 파일만 수정하고 싶다면

[17:38] 파일 태그를 사용해 정확히 지정하세요

[17:40] AI가 실수를 하거나

[17:41] 새 파일을 만들거나 원하지 않는 파일을

[17:44] 수정하는 경우가 많기 때문입니다

[17:46] 두 번째 팁은, 직접 작업할수록

[17:48] 그리고 더 많은 컨텍스트를 제공할수록

[17:50] 더 좋은 성능을 보입니다

[17:52] 대화 체인에서 오래 작업할수록

[17:54] 코드 에디터에서 직접 더 많은 코드를

[17:56] 작성할수록 더 잘 작동합니다

[17:58] 만약 AI에만 전적으로 의존해서

[18:00] 모든 것을 생성하려고 하면

[18:02] 방향을 잃고 이상한 결과를

[18:04] 만들어낼 수 있습니다. 다음으로,

[18:06] AI가 하는 일을 이해하고 있어야 합니다

[18:08] 코드를 실제로 읽고 무엇이 수정되었는지 보세요

[18:10] 수정 사항이 너무 크다면 더 작게 만들어달라고 하고

[18:12] 다른 사람의 코드를 리뷰하듯이 검토하세요

[18:14] 물론 초보 프로그래머라면

[18:16] 좀 더 어려울 수 있지만

[18:18] 핵심은 무슨 일이 일어나고 있는지

[18:19] 어느 정도 파악하고 있어야 한다는 겁니다

[18:21] 왜냐하면 AI가 실수를 하면

[18:23] 그 문제를 해결하기가 매우 어려울 수 있기 때문입니다

[18:25] 만약 그 시점까지의 변경 사항을

[18:27] 제대로 추적하지 않았다면요

[18:29] 마지막으로 추가할 점은

[18:32] 좋은 디렉토리 구조와

[18:33] 변수명, 파일명을 사용하려고 노력하세요

[18:36] 이름을 잘 지을수록

[18:38] AI가 컨텍스트를 자동으로

[18:40] 추적하기가 더 쉬워집니다

[18:42] a, b, c나 main1, 2, 3 같은 파일명은 피하고

[18:45] 합리적이고 논리적인 이름을

[18:46] 사용해서 AI가 파일 내용을

[18:48] 추론할 수 있게 하세요

[18:50] 자, 이것으로 Windsurf 튜토리얼을 마치겠습니다

[18:53] 이 영상이 여러분에게 사용법을 알려주고

[18:54] 주요 기능들을 설명하면서

[18:56] 사용해보고 싶은 마음이 들게 했길 바랍니다

[18:58] 다시 한 번 말씀드리지만

[18:59] 월간 구독료를 지불할 의향이 있는지에 따라

[19:01] 제 의견으로는 가치가 있지만

[19:03] 만약 무료 모델만 원한다면

[19:04] Cursor를 추천드립니다

[19:05] 유료 결제를 하지 않으면 매우 제한적이거든요

[19:08] 자, 이 영상이 마음에 드셨다면

[19:10] 좋아요를 누르시고

[19:11] 구독해 주시기 바랍니다

[19:13] 다음 영상에서 만나요

[19:15] [음악]