저는 커서는 약 1년 전부터 꾸준히 사용하고 있고, 클로드코드는 작년10월부터 조금씩 사용해서 올해 1월부터 집중적으로 익히고 있습니다.
이번 인프런 챌린지를 하면서 평소에 궁금했던 몇가지 실험을 했고, 그 결과를 공유하고자 블로그를 작성했습니다.
이번 실험의 컨셉은 얼마전 Cusor로 작업한 프로젝트를 Claude Code로 하게 되면 얼마나 더 잘 만들수 있는지 파악하는 것입니다.
몇 가지 개인적 실험 결과로 객관적 평가는 아닙니다. 다만 Claude Code 사용에 감을 잡기 위해 수행하였습니다.
실험1. 만약 Cursor와 Claude Code에 프롬프트를 동일하게 넣으면 결과는 어떨까?
| 프로젝트 : 이전에 작업했던 국내 자살통계 대시보드(Fast API) 기존 조건 : 2개 모두 claude opus 4.5 사용, 프롬프트 완전 동일 준비물 : 대시보드 PRD문서, 전처리한 JSON데이터, 대시보드 레이아웃 이미지(jpg) |
조금 엉뚱하지만 skill이나 plugin 없이 그냥 프롬프트만 넣었을 때 얼마나 Claude Code가 잘하는지 궁금했습니다.
| # prompt1 @prd.md 문서를 바탕으로 python fastapi를 사용해서 대시보드를 작성하려고 합니다. 화면 전체 구성은 @project_img.jpg 를 사용하시고, 차트는 @Highcharts 를 사용해주세요. 데이터는 @final_data.json 를 사용합니다. # pormpt2 차트에 대해서는 만족하니 기능을 수정하지 마세요. 그런데 차트 외 디자인 적인 요소는 너무 부족해. 30년 경력의 최고의 ux/ui 디자이너라고 생각하고 마스터피스를 만든다고 생각하고 웹페이지 디자인을 변형시켜봐, 적절한 그라데이션 및 폰트, 레이아웃 등도 수정해주세요. |
실험1 결과
코드 작성 정확도 : Cursor나 Claude Code 모두 5~10분 사이에 작성해주었고 1~2회 간단한 수정으로 완성(둘다 우수함)
전체적인 디자인 : Cursor가 Claude Code 보다 약간 나음
1. 커서로 작업한 결과
2. Claude Code(초기 버전)
디자인이나 구성은 전체적으로 커서를 사용했을 때랑 비슷했지만, 버튼의 레이아웃(첫번째 사진 '자살률(10만명당)') 일부 깨짐...
3. Claude Code(frontend-design 플러그인 사용)
그냥 프롬프트만 사용할 경우, Claude Code가 만들어준 코드가 디자인 적으로 만족스럽지 않아 plugin frontend-design를 사용해서 수정했습니다.
비용 : Cursor로는 약 $10소요, Claude 코드는 Current session 약 60%사용(Pro 기준)
결론 :
1. Cursor는 정말 비싸다.토큰당 비용이 클로드코드에 비해서 비싸게 책정되어 있는 듯합니다.
2. 코드의 기능은 둘다 비슷하게 잘 작성함(단,쉬운 과제여서 성능 비교가 정확하지 않음)
3. 단순 프롬프트만 보면 디자인은 커서쪽 대시보드가 나았지만, 플러그인을 사용하면 Claude Code가 더 좋았음
4. Claude Code를 사용할 때, 적극적으로 Skill이나 Plugin 등 Claude Code의 여러 부가 기능을 사용해야 성능을 높일 수 있음(프롬프트만 넣은 것은 바보 같은 행동)
실험2. Plan모드, feature-dev 플러그인을 사용하면 개발 성능이 높아질까?
| 한국관광공사 api를 가져와서 저장하고, 프론트 웹페이지에서 요청할 때 적절한 행사 정보를 제공하는 API개발(FastAPI) 준비물 : PRD문서 , 한국관광공사 API요약 정보(md) Cursor, Claude Code 모두 supabase mcp 사용 |
Cladue Code 에서 1) /init을 활용한 CLADE.md 작성, 2) plan 모드에서 수행, 3)feature-dev 플러그인 사용
Cursor도 plan모드가 되어 있지만, 사용하지 않았습니다. Clode Code로 Plan모드로 동작시키니 진철하게 어떻게 진행할 것이라고 설명을 잘 해주었고 무엇보다 어떻게 작업할 지 보기까지 주면서 적절한 질문을 통해 내 의사를 물어보는 것이 특히 인상깊었습니다.
에러가 발생하는 것은 Claude Code도 마찬가지였지만, 에러가 발생해서 테스트할 때, 서버를 스스로 껐다 키고 스스로 데이터를 업어가면서 테스트를 하는 것이 좋았습니다.
실험2 결과
계획한 API가 잘 만들어짐
비용 : Cursor로는 약 $12소요, Claude 코드는 Current session 약 80%사용(Pro 기준)
코드 작성 정확도 및 시간: Cursor120분, Claude Code 100분 정도
결론 :
1. /init을 수행하면 프로젝트 내 문서를 검색해서(prd문서, api문서 등) 자동적으로 CLAUDE.md문서를 만들어 줘서 좋았음
2. Plan모드로 수행하면 적절한 질문을 해서 개발을 어떻게 하면 좋을지 자세히 설명해줌(프로젝트 초반 프롬프트 시 유용)
3.Cursor와 Claude Code모두 .env에 있는 한국 관광공사의 API key에 인코딩 문제 때문에 여러번 수정함
4. Claude Code 역시 API가 처음에는 잘 작동하지 않았지만, 오류 메시지를 넣어주자 서버를 재실행하면서 스스로 데이터를 입력하고 테스트함
(feature-dev 플러그인을 설치하고, 초반에 feature-dev을 적용해서 개발해달라고 프롬프트에 작성했는데, 제대로 활용해서 작업한 것인지 모르겠음....)
실험3. feature-dev, frontend-design 플러그인을 사용하면 더 멋진 프론트엔드를 만들까?
| 실험2에서 만들 벡엔드 API서버를 활용해서 프론트엔드 페이지를 개발함 준비물 : PRD문서, 벡엔드 API문서(이전 Cursor에서 출력), 프론트엔드 레이아웃 이미지 2장(메인페이지, 모달 페이지) Cursor, Claude Code 모두 Opus 4.5 |
메인 페이지 예시)
단계
1. 파일을 프로젝트 폴더에 넣고 클로드코드에서 /init 시행(CLAUDE.md 생성)
2. plan모드에서 프롬프트1 입력
#prompt1
feature-dev , frontend-design plugin을 사용해서 프론프엔드 서비스를 개발해주세요.
(plan모드로 수행했더니 바닐라 자바 스크립트, html을 추천했지만.... 비교를 위해서 fastapi를 사용했습니다. )
API로 문서를 제대로 가져오지 못함
3. feature-dev를 이용해서 에러 수정 요청(실패)
프롬프트2
현재 프론트엔드 페이지를 검토했는데 벡엔드 api를 가져오지 못하는 것 같습니다. feature-dev를 사용해서 백엔드 api를 제대로 호출해서 기능할 수 있도록 프론트엔드 페이지를 수정해주세요.
프롬프트에 명확히 feature-dev를 사용하니 이것을 활용해 작업을 해주네요.
그러나 API호출 실패.... 개발자 페이지를 보니깐 CORS 위반이네요... localhost로 작업할 때는 보통 허용되는데....
4. 오류 메시지 포함된 수정 프롬프트 전달
프로프트3
(개발자도구에 나타났던 오류들 복사 붙여넣기함)
CORS 에러가 발생하고 있습니다. 수정해주세요. 직접 접속해보고 테스트해서 문제가 있는 것을 알려주세요.
드디어 정상적으로 API가 나타나고 정상적으로 작동합니다.
여기까지 하니 Current Context 94% 차서.... 5시간 있다가 작업했습니다.
5시간 있다가 ...
/compact 한번하니 Current Context 17% 실화냐....
깔끔하게 다시 /clear 해서 context를 비워넴
prompt4
재 화면의 배열이 기존 설계했던 것과 차이가 있습니다. 기존 설계한 화면은 @main.jpg 전체 화면,
@detail.jpg 모달화면에 있습니다. frontend-design 을 사용해서 수정해주세요.
뭔가 원하는 레이아웃은 나왔지만 디자인은 그다지 별로 인 듯...
Tailwind 제거, 커스텀 CSS만 사용했다고 하네요...ㅠㅜ 토큰만 잔뜩 먹고...
우선 행사중, 행사 종료 표시 등이 잘 안되고 있고, 거리순 버튼을 눌렀을 때, 거리가 표시가 안되서 해당 부분을 먼저 수정해주었습니다.
prompt5
오늘을 기점으로 왼쪽 상단에 "행사중"인지 "행사 종료" 됐는지, "D-3"인지 표시해주세요. 거리순 버튼을 누르면 현재 위치로부터 얼마나 떨어져 있는지 알 수 없습니다. 거리순 버튼을 누르면 계산해서 메인 카드 오른쪽에 표시해주세요.
원했던 기능이 잘 구현됐습니다.
실수를 해서 토큰과 시간을 낭비했습니다.
1. 커스텀 CSS적용 : claude랑 작업하면서 중간에 커스텀 css로 제안했는데... 제가 수용한 것 같습니다.
2. 벡엔드 API : 벡엔드 API 행사별 좌표x, y 정보를 수집을 안했는데, 그걸 체크를 못해서 프론트엔드 작업하면서 깨달았습니다. 급하게 하다보니
prompt6
현재 전체적인 레이아웃은 원하는 대로 되었지만, UX/UI적인 부분에서 여러가지 부족한 점이 많습니다. 현재 커스텀 CSS를 사용했는데 Tailwind.css를 사용해서 디자인을 업그레이드해주세요. 메인페이지나 모달 페이지 내 박스형 디자인 같은 경우는 너무 촌스럽습니다. 사용자의 UX/UI를 최대화하고 다지인을 깔끔하고 멋지게 만들어주세요. 행사, 주소, 기간, 등 카드나 모달내 설명도 해줘야 사용자가 이해하기 쉬울 것 같습니다. frontend-design 을 사용해서 수정해주세요.
frontend-design 을 사용한다고 하니 계속 한국의 단청색을 모티브로 바꿔준다고 해서... 그냥 모던하고 깔끔하게 변경해달라고 했습니다. 블랙에 파란색으로 포인트를 준 것이 인상적인데... cursor에 비해서 더 나은지는 모르겠습니다.
참고로 아래 링크는 Cursor로 이전에 작업한 사이트 결과입니다.
-----
비용 : Cursor로는 약 $14소요, Claude 코드는 Current session 약 150%사용(Pro 기준)
결론 :
1. Plan모드 사용은 좋으나 /init과 plan모드로 prd.md 및 초기 문서들의 정보가 일부 날아갈 수 있다. 필수적인 컨텍스트가 상실되지 않도록 중간중간 확인하면서 꼼꼼히 확인해야 한다.(이번 경우에는 화면 레이아웃 jpg의 정보가 사라졌음)
2. 중간중간 철저한 테스트가 필요하다. 백엔드 API가 일부 데이터가 빠져 있었는데, 확인을 안하니 나중에 토큰을 엄청 낭비하게 되었다.
3. /compact도 토큰을 업청 잡아먹을 수 있다....17% 사용(pro 기준)
4. feature-dev, frontend-design를 사용하고 싶을 때, 중간중간 feature-dev, frontend-design를 언급해주면서 프롬프트를 작성해야 한다.
5. 정신 바짝 차리고 클로드가 중간중간 내놓은 결과, 제안 내용를 확인해야 한다. 클로드가 이것저것 제안하는데 별 생각없이 accept를 하게 되면 이상한 방향으로 갈 수 있다. (초기 prd문서에는 tailwind.css를 사용하라고 했는데, 중간에 claude의 제안으로 커스텀 css를 수락한거 같음...)
6. Cursor는 웹브라우저가 내장되어 있어서 colsole에 있는 에러 메시지를 따로 복사하지 않아도 되서 편했고, 에러를 수정할 때 DEBUG모드를 사용하면 더 에러를 잘 수정이 잘 됐던거 같음
혹시 위 예시에 대해서 관심있는 분들은 관련 인프런 강의 할인링크 남겨드립니다.