요즘 개발자 사이에서 가장 주목받는 인공지능(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는 전체 계획을 수립하고 검증한 뒤, 마지막에 사용자 승인을 요청합니다.



코드 생성 방식
각 도구의 실시간 코드 생성 방식은 아래에 움직이는 이미지를 참고해 주세요.


