이 Windsurf AI 튜토리얼 핵심 요약
- Windsurf는 windsurf.com에서 일반 에디터처럼 설치하며, 처음 실행하면 Getting started 체크리스트가 나타납니다. VS Code 사용자라면 테마와 확장을 그대로 가져올 수 있습니다.
- Ctrl+L을 누르면 AI 에이전트 패널 Cascade가 열립니다. Code 모드를 유지하면 파일을 직접 수정하고, Chat 모드는 코드를 제안만 할 뿐 적용하지 않습니다.
- 기술 스택과 섹션을 명시한 프롬프트 한 줄로 index.html, styles.css, script.js, README 4개 파일로 구성된 완전한 포트폴리오가 만들어져 localhost:8000에서 실행됐습니다.
- 이후 과정은 모두 같은 흐름입니다. 짧은 후속 프롬프트 → 빨강·초록 diff 검토 → Accept all → 브라우저 새로 고침. 전체 빌드에 프롬프트는 여섯 개면 충분합니다.
How I Built a Complete Website with Windsurf AI — Step-by-Step Tutorial
채널:Web Tech Knowledge7:24
본 페이지의 스크린샷은 모두 원본 영상에서 캡처한 것으로, 이 페이지를 위해 직접 작성한 단계별 설명을 보여 드리는 데 사용했습니다. 각 단계는 타임스탬프로 영상의 해당 장면에 바로 연결됩니다.
모든 영상 자료의 저작권은 Web Tech Knowledge에 있습니다. Windsurf 용어(Cascade, Code/Chat 모드, Accept all)는 Tech With Tim의 "Windsurf Tutorial for Beginners (AI Code Editor)"와 corbin의 "How To Use Windsurf Editor For Beginners"로 교차 확인했습니다.
2026년 업데이트: 이 제품은 2026년 6월 2일 Cognition에 의해 Devin Desktop으로 이름이 바뀌었으며, Cascade 에이전트는 2026년 7월 1일에 지원이 종료되었습니다. 이 튜토리얼은 Cascade 시절의 작업 기록으로 남겨둡니다. 함께 읽기: Windsurf에 무슨 일이
다운로드부터 완성까지 14단계
- 1
공식 사이트에서 Windsurf 다운로드
windsurf.com에 접속해 Download for Windows를 클릭합니다(macOS·Linux용 빌드도 바로 옆에 있습니다). 설치 파일을 실행하고 로그인하세요. VS Code 설정을 가져올지 물어보면 수락하는 것이 좋습니다. Windsurf는 VS Code 포크라서 테마와 확장이 그대로 유지됩니다.
windsurf.com 홈페이지. Download for Windows 버튼이 정중앙에 있습니다.영상 0:10부터 보기 - 2
빈 프로젝트 폴더 만들기
환영 화면에서 Code with Cascade를 선택한 뒤 Open Folder를 클릭합니다. 새 폴더를 하나 만드세요(영상에서는 My_cool_portfolio). Select Folder를 누르면 준비 끝입니다. 빈 폴더면 충분하고, 파일은 모두 Cascade가 만들어 줍니다.
Open Folder 대화상자에서 새 폴더 이름을 정하고 Select Folder를 누르는 장면.영상 0:33부터 보기 - 3
1분 만에 에디터 레이아웃 익히기
처음 진입하면 Getting started with Windsurf 체크리스트가 보입니다. 왼쪽 Explorer 사이드바에 프로젝트 파일이 표시되고, 목록에는 꼭 필요한 단축키 두 개가 안내됩니다. Ctrl+L은 Cascade 열기, Ctrl+I는 코드 인라인 편집입니다. 이 튜토리얼에 필요한 사전 지식은 이게 전부입니다.
Getting started 체크리스트와 Explorer에 열린 프로젝트 폴더.영상 0:45부터 보기 - 4
Ctrl+L로 Cascade 패널 열기
Ctrl+L(macOS는 Cmd+L)을 누르면 오른쪽에 Cascade가 열리며 Ask anything 입력창이 나타납니다. 입력창 아래에서 Code 모드를 유지하세요. 이 설정 덕분에 Cascade가 파일을 직접 작성할 수 있고, Chat 모드는 코드를 제안만 하고 프로젝트를 건드리지 않습니다. 다음으로 드롭다운에서 모델을 고릅니다. 이 가이드는 Claude Sonnet 4.5를 사용했습니다.
Cascade 초기 화면. Ask anything 입력창, Code 모드 토글, 모델 선택기가 보입니다.영상 1:03부터 보기 - 5
빌드 프롬프트 보내기
이렇게 입력합니다. Create a responsive portfolio website using HTML, CSS, and JavaScript. Include a hero section, about, projects, and contact form. 기술 스택을 밝히고 섹션을 나열하는 것이 핵심입니다. 프롬프트가 구체적일수록 결과가 좋아집니다. 보내기를 누르면 Cascade는 한 줄의 코드를 쓰기 전에 먼저 작업을 todo 목록으로 정리합니다.
Code 모드에서 Claude Sonnet 4.5를 선택하고 포트폴리오 프롬프트를 보내는 장면.영상 1:35부터 보기 - 6
Cascade가 파일을 만드는 과정 지켜보기
Cascade는 todo 목록을 순서대로 처리합니다. index.html(231줄)을 먼저 쓰고, 이어서 styles.css, script.js, 마지막으로 프로젝트를 설명하는 README를 만듭니다. 새 파일은 초록 줄 수 카운터와 함께 패널에 나타나고, 코드가 완성되면 3 files, +1132로 집계됩니다.
진행 중인 Cascade todo 목록. index.html, styles.css, script.js가 이미 생성됐습니다.영상 2:10부터 보기 - 7
브라우저 미리보기 열기
완료 보고서에는 사이트가 http://localhost:8000에서 실행 중이라고 표시됩니다. 미리보기 링크를 클릭하면 고정 내비게이션, 프로필 원형 프레임이 있는 히어로, about, projects, 연락 폼을 갖춘 원페이지 포트폴리오가 열립니다. 헤드라인을 자세히 보세요. `<span>` 태그가 그대로 출력되고 있습니다. 초안에 사소한 버그가 섞이는 건 흔한 일이고, 13단계에서 고칩니다.
localhost:8000에 생성된 사이트. 헤드라인의 span 태그 하나만 빼면 거의 완성됐습니다.영상 2:35부터 보기 - 8
다크 모드와 네온 버튼 요청하기
Windsurf로 돌아와 먼저 Accept all을 눌러 생성된 파일을 저장한 뒤, 이렇게 보냅니다. Make it dark mode and give the buttons a neon glow. Cascade와 일하는 리듬이 이것입니다. 목표 하나짜리 짧은 후속 프롬프트를 주고받고, 결과를 확인한 뒤 다음으로 넘어갑니다.
Next Steps가 붙은 완료 보고서와, 입력창에 작성된 다크 모드 프롬프트.영상 3:05부터 보기 - 9
diff 검토 후 Accept all
Cascade는 styles.css를 다시 쓰면서 모든 편집을 diff로 보여 줍니다. 빨간 줄은 삭제된 CSS, 초록 줄은 추가된 코드입니다. 이번에는 라이트 팔레트가 다크 토큰과 네온 시안·마젠타 글로우 변수로 교체되었고, 변경 항목은 모두 11건입니다. 훑어본 뒤 Accept all(Alt+A)을 누르세요.
styles.css diff. 빨간색은 삭제된 라이트 테마 변수, 초록색은 새 네온 토큰입니다.영상 3:32부터 보기 - 10
브라우저를 새로 고치고 확인하기
브라우저 탭으로 이동해 새로 고칩니다. 같은 포트폴리오가 검은 배경의 글로우 스타일로 바뀌어 있습니다. View My Work는 시안에서 마젠타로 이어지는 그라데이션이고, Get In Touch는 네온 외곽선, About Me 제목 아래에는 빛나는 구분선이 놓입니다. 프롬프트마다 확인하면 작은 놀라움이 쌓이지 않습니다.
새로 고친 다크 사이트. 네온 버튼과 Portfolio 내비게이션 아래 About Me 섹션.영상 4:12부터 보기 - 11
스크롤 애니메이션과 페이드 효과 추가
Add smooth scroll animation and fade effects라고 보냅니다. Cascade는 scroll-behavior: smooth와 .fade-in 클래스를 추가하고, 섹션이 화면에 들어올 때 나타나는 Intersection Observer, 히어로 원형 프레임의 은은한 패럴랙스, 스킬 태그의 순차 등장을 구현합니다. Accept all, 새로 고침, 스크롤을 내리면 섹션이 하나씩 페이드 인합니다.
Scroll Animations CSS와 옵저버·패럴랙스·순차 등장을 정리한 Cascade 요약.영상 4:32부터 보기 - 12
플레이스홀더를 예시 이미지로 교체
프로필 원형 프레임과 프로젝트 카드가 아직 아이콘 상태라면 Add some demo images라고 보내세요. Cascade는 Unsplash CDN에서 사진을 가져와 히어로 원형 프레임과 세 장의 프로젝트 카드에 채우고, URL 파라미터로 용량을 최적화하며, 카드에 호버 줌과 글로우 효과를 더합니다. Accept all, 새로 고침, 이제야 사이트가 완성물처럼 보입니다.
이미지 작업 요약. Unsplash 사진, 네온 원형 프로필 프레임, 호버 줌.영상 4:58부터 보기 - 13
버그 잡고 내 이미지로 바꾸기
히어로 문구를 Hi! I am Your AI Developer로 바꾸고 원형 프레임에 AI 로고를 넣어 달라고 요청합니다. 새로 고침하면 두 가지 문제가 드러납니다. 헤드라인에 `<span class="highlight">` 마크업이 글자 그대로 출력되고, 생성된 로고도 마음에 들지 않습니다. 입력창 위의 플러스 아이콘을 눌러 Upload image로 직접 이미지를 첨부한 뒤, remove the span completely and add this image on the right circle이라고 프롬프트하세요.
여전히 span 태그를 출력하는 히어로와 플레이스홀더 AI 로고, 그리고 Upload image 수정 방법.영상 6:05부터 보기 - 14
완성된 사이트 최종 점검
마지막으로 새로 고치면 포트폴리오가 완성됩니다. 깔끔한 Hi! I am Your AI Developer 헤드라인, 히어로 원형 프레임에서 빛나는 내 이미지, 네온 버튼, 애니메이션 섹션, 사진이 들어간 프로젝트 카드. 시작 프롬프트 하나에 짧은 후속 다섯 개. 설명하고, 수락하고, 확인하고, 반복하는 것이 Windsurf 작업 흐름의 전부입니다.
완성된 포트폴리오. 깔끔한 헤드라인, 업로드한 로봇 아바타, 네온 버튼.영상 7:12부터 보기