요즘 개발자 사이에서 가장 주목받는 인공지능(AI) 코딩 도구로 Cursor, Windsurf, Aider가 있습니다. 이 글에서는 세 도구를 사용해 간단한 Todo 애플리케이션을 개발한 과정과 결과를 다뤘습니다. 구체적으로 각 도구의 코드 생성 방식과 소요 시간, 파일 구조, 개발 결과물을 비교하고 도구별 특징을 살펴봤습니다.
흥미로운 점은 ‘AI 코딩 도구들이 서로 장점을 빠르게 흡수하며 진화한다’는 것입니다. 각 도구에는 저마다 구별되는 특장점이 있지만, 기본 기능에 공통점도 많습니다. 물론 도구별로 동일한 요구사항에 미묘하게 다른 접근 방식과 결과물을 보여주기도 합니다. 또 특정 AI 코딩 도구는 동일한 주문을 여러 번 요청받을 때마다 결과물의 품질이 매번 달라질 때도 있습니다.
지금부터 Cursor, Windsurf, Aider의 실제 사용 경험과 도구별 특징을 자세히 소개하겠습니다.
사전 설정
저는 모든 AI 코딩 도구가 Anthropic의 Claude 3.5 Sonnet 모델을 사용하도록 설정했습니다. 기본 규칙에는 한국어 프롬프트만 입력하고, 그 외 개발 지시 사항은 넣지 않았습니다.
각 도구에는 동일한 사항을 요청했습니다. “React로 Todo 애플리케이션을 구현해달라”는 게 주요 내용입니다. 상세 요구사항은 다음과 같습니다.
현재 경로에 React 템플릿으로 Vite 프로젝트를 만들어줘.
React로 Todo 웹 앱을 구현해줘.
요구사항:
1. 기본적인 CRUD 기능 구현
- Todo 추가
- Todo 목록 표시
- Todo 완료/미완료 토글
- Todo 삭제
2. 필수 컴포넌트:
- TodoInput: 새로운 Todo 입력
- TodoList: Todo 목록 표시
- TodoItem: 개별 Todo 아이템
3. Todo 데이터 구조:
{
id: number,
text: string,
completed: boolean
}
4. 기능 상세:
- 입력창에서 텍스트 입력 후 Enter 또는 버튼 클릭으로 Todo 추가
- 각 Todo 항목 옆에 완료 체크박스와 삭제 버튼
- 완료된 Todo는 취소선 표시
5. 스타일링:
- Tailwind CSS 사용
- 반응형 디자인 (모바일 고려)
- 기본적인 애니메이션 효과
추가 기능 (선택):
1. localStorage를 사용한 데이터 유지
2. 필터링 (전체/활성/완료)
3. 전체 완료/삭제 기능
코드 생성 과정 비교
사용자 인터랙션 방식
각 도구는 사용자와 대화하며 코드를 생성합니다.
Cursor와 Windsurf는 작업 단계마다 사용자 확인을 받습니다. 아래 이미지에서 보듯 Cursor는 App.css 파일 삭제와 개발 서버 시작 계획을 밝힌 다음, 사용자가 해당 작업 수락 여부를 선택하도록 합니다. Windsurf는 백그라운드 터미널 명령어를 제시한 다음, 해당 명령어 실행 의사를 사용자에게 묻습니다.
반면에 Aider는 전체 계획을 수립하고 검증한 뒤, 마지막에 사용자 승인을 요청합니다.
코드 생성 방식
각 도구 의 실시간 코드 생성 방식은 아래에 움직이는 이미지를 참고해 주세요.
코드 생성 결과 비교
소요 시간
전체 코딩 속도는 Windsurf(1분 21초 82)가 가장 빨랐으며, Aider(1분 33초 72)와 Cursor(2분 5초 21)가 그 뒤를 이었습니다. 아래 이미지는 도구별 프롬프트 입력부터 코드 완성까지 걸린 시간입니다. 여기에는 코딩 과정에서 발생한 요청 수락 대기, 재요청 작업 시간도 포함됐습니다.
파일 구조
-
Cursor
프롬프트로 요청하지 않았는데도 세 도구 중 유일하게 타입스크립트를 사용해 개발했습니다. 프로젝트 파일 구조를 살펴보면,
types/todo.ts파일에 Todo 관련 타입 정의가 작성됐습니다.src
├── App.tsx
├── assets
│ └── react.svg
├── components
│ ├── TodoInput.tsx
│ ├── TodoItem.tsx
│ └── TodoList.tsx
├── index.css
├── main.tsx
├── types
│ └── todo.ts
└── vite-env.d.ts -
Windsurf
Windsurf는 세 도구 중 유일하게 App.css 파일을 유지했습니다. 이는 나머지 도구에서 App.css 파일을 불필요하게 보고, 최종 단계에서 이를 제거한 점과 대조적입니다.
src
├── App.css
├── App.jsx
├── assets
│ └── react.svg
├── components
│ ├── TodoInput.jsx
│ ├── TodoItem.jsx
│ └── TodoList.jsx
├── index.css
└── main.jsx -
Aider
요청 사항에 맞춰 개발했습니다.
src
├── App.jsx
├── assets
│ └── react.svg
├── components
│ ├── TodoInput.jsx
│ ├── TodoItem.jsx
│ └── TodoList.jsx
├── index.css
└── main.jsx
개발 결과물 비교
각 도구가 개발한 Todo 애플리케이션의 세부 사항을 비교하면 다음과 같습니다.
도구별로 구현한 애플리케이션 화면과 기능을 자세히 살펴보겠습니다.
Cursor
기본 CRUD 기능(추가, 삭제 등), 필수 컴포넌트(새로운 Todo 입력 등), 반응형 디자인 등 요청 사항을 대체로 준수했습니다. 추가 기능은 localStorage 기능만 개발했습니다. 필터링 기능, 전체 완료/삭제 기능은 구현하지 않았습니다.
Windsurf
기본 CRUD 기능(추가, 삭제 등), 필수 컴포넌트(새로운 Todo 입력 등) 등 요청 사항을 반영했습니다. 추가 기능은 localStorage 기능, 필터링 기능을 완성했습니다. 반응형 디자인과 전체 완료/삭제 기능은 개발하지 않았습니다.
특히 반응형 디자인은 모바일 화면 크기에만 고정돼, 다양한 화면 크기에 대응하지 못하는 한계가 있었습니다. 아울러 Cursor, Aider로 구현한 애플리케이션과 비교하면 애니메이션도 미흡했습니다. 일부 버튼에는 글자 또는 기호가 선명하게 보이지 않아 가독성이 떨어졌습니다.
Aider
세 도구 중 요청 사항을 가장 완벽하게 구현했습니다. 기본 CRUD 기능(추가, 삭제 등), 필수 컴포넌트(새로운 Todo 입력 등), 반응형 디자인 등 요청 사항을 대부분 개발했습니다.
추가 기능인 localStorage 기능, 필터링 기능도 만들었습니다. 전체 완료/삭제 기능은 요청 사항에 딱 들어맞지 않지만 ‘완료된 항목 모두 삭제’ 기능으로 구현했습니다.
반응형 디자인과 애니메이션은 세 도구 중 가장 자연스럽고, 깔끔하며, 완성도 높게 개발했습니다. ‘할 일’ 입력 칸과 체크 리스트, 버튼 크기가 적당하고, 버튼 색과 글자 색도 조화로웠습니다.
맺음말
이번 테스트 결과만으로 AI 코딩 도구를 절대적으로 평가하기는 어렵습니다. 같은 AI 코딩 도구에 동일한 내용으로 개발을 여러 번 요청하면, 결과물이 매번 각기 다른 품질로 나옵니다. 이번에는 결과물이 좋아도, 다음에는 결과물이 별로일 수 있습니다.
그래도 도구를 논평하자면, Cursor는 현재 AI 코딩 분야의 선두 주자이지만 가격 대비 결과물의 완성도가 아쉽습니다. Windsurf는 최근 출시된 도구로, 깔끔한 UI와 빠른 개발 속도, 합리적 가격이 장점입니다. 그러나 아직 보완할 기능이 많고, 결과물도 개선해야 합니다.
Aider의 결과물은 우수하고, 개발 속도도 빠릅니다. 그러나 마지막에 모든 결과를 한꺼번에 처리하는 방식에 한계가 있습니다. 터미널 사용이 익숙하지 않으면, Aider 사용에 진입 장벽이 있습니다.
세 도구 모두 각각 장단점이 있습니다. 여러분도 각 도구를 직접 사용해 보고 자기에게 가장 적합한 도구를 선택해 개발 효율성을 높이시면 좋겠습니다.
DevOps와 GitLab을 효과적으로 도입하는 방법, 지금 인포그랩에 문의하세요.