[클로드 코드(Claude Code)] AI 바이브 코딩의 끝판왕일까? (feat. Claude Code를 통한 react 리팩토링 실습)

안녕하세요. 갓대희 입니다.

얼마전 Anthropic에서 공개한 Claude Code 공식 영상을 보고 (5월 22일 Claude Code Beta 출시) 

커서(cursor)와, 윈드서프(windsulf) 와는 어떤 차이점이 있는지 궁금하여 내돈 내산으로 체험해보게 되었다. 

 

왜 이런 관심을 갖게 되었는가 하면...

 해당 영상에서는 커서나 윈드서프와 같은 툴이 없더라도 프롬프트 한 번으로 결과물을 만들어내는 "클로드 코드"의 강력함, 차별화를 강조하는 것처럼 보였다.

 즉, 클로드 코드의 바이브 코딩 능력을 입증하고, 타 gui 툴의 장점과 단점을 비교하며 개발 생산성 향상에 대한 가능성을 제시하여 "클로드 코드"의 장점을 어필하는것으로 보았다. 

( 곧 에디터도 필요 없을 것이라는 내용 >>>  Claude Code는 CLI 방식이다. :-) )
( gui 방식과 비교 해보고 싶다면, 이후 cursor 사용 후기도 참고하면 좋을 것 같다. https://goddaehee.tistory.com/364)

( 이 방식(cli 방식)으로 gui 툴처럼 툴에 의존하거나 plugin에 의존하지 않을 수 있다.??? )

 

다만 나는 개인적으로 다음과같은 입장이다.
최근 소프트웨어 개발에서 현재 일어나고 있는 AI 혁명에 대한 여러가지 의견들이 있는데, 
기술 스택을 전혀 모르는채 LLM, AI, Code Assistance에 의존 하다보면, 나도 모르게 바이브 코딩(vibe-coding)에 빠지게 되는 것 같다. 매우 편하기도 하고 하기 예시 처럼 ClaudeCode는 특히나 바이브 코딩 능력이 점점 뛰어 나지고 있기 떄문이다.
그래서 잘못하면 바이드 코딩에 너무 의존하기도 하고, 이에 헤어 나오기 쉽지 않을 수도 있을 것 같다.

다만, 반대로 여러 AI도구들을 사용하는것에 거부감을 거무 가져서도 안된다고 생각한다. AI툴을 잘 활용하는 사람들과의 생산성이 많이 차이 날 것 이다. 

 

이런 관점에서 나는 Cluade Code의  "바이브 코딩"의 능력이 얼마나 되는지 가벼운 마음으로 한번 살펴보려고 한다. 

 

클로드 공식 데모 이미지 / https://github.com/anthropics/claude-code/blob/main/demo.gif

 

 

먼저 내 사전 경험과, 현재의 환경부터 얘기해보면 좋을 것 같다.

개인적으로 경험해본 느낌으로, 코딩 영역에서 만큼은 클로드가 타 AI(Chat GPT, 앞선다고 생각하고 있다.

그런데 이미 Cursor와 Windsulf를 사용할때에도 AI모델을 Cluade로 지정 가능한데, [ 클로드 코드 ]는 어떤 차이점이 있고, Anthropic에서는 어떤 혁신을 또 이끌고 있는지 체험해 보고자한다.

 

또한 바이브 코딩의 능력이 얼마나 뛰어난지, 또한 프로젝트가 복잡하면 실수를 많이하던 커서, 윈드 서프와 비교해서 얼마나 오류를 덜 하는지, 이를 간접 체험할 수 있는 예제를 진행해보려 한다. 
( 내가 진행했었던 개인 react 프로젝트를 리팩토링을 시켜보면 좋지 않을까? )

 

전반적인 사용 흐름은 다음과 같다.

1.처음 사용, 접근 하기 위한 간단한 튜토리얼

2.개인 React 프로젝트에 설치

3. CLAUDE.me 추가
4. 소스 리팩토링

5. 성능 개선 
등으로 작성해볼 예정이다. 

 

글을 쓰는 스타일도 한번 AI Assistant 와 같이 글을 작성하려고 하니 평소와는 다른 진행 방식으로 글을 작성할 수 있고, 부자연 스러움은 지적해주시면 수정하도록 하겠습니다.

 

[  부제 : Claude Code와 함께한 실전 리팩토링 여정?  ] 

1. 들어가기 앞서

회사에서 대규포 사이트를 React로 전환해본 개발자라면 이런 고민을 해봤을 것이다. 

단순히 JSP, 타임리프 등의 프로젝트를

리액트로 전환 후 실제 Production환경에서 돌려보면 여러가지 문제점에 직면하게 될 것 이다.

 - 느린 초기 로딩(무거운 번들 사이즈로 인한)속도, 테스트 코드의 부재로 발생하는 코드 퀄리티 문제 등등 

 

프로젝트 초창기에 이러한 문제가 발생하기 전 프로젝트 초기에 Refactoring 하는 과정을 "Cluade Code"로 진행해 보고자 한다. 
전반적인 내용은 공식 page를 참고 해 보면 좋을 것 같다. 
https://docs.anthropic.com/en/docs/claude-code/overview

 

2. 초기 설정

 

 - Jebrain 계열 등에서 플러그인으로 도 사용 가능하지만, 완전 cli 방식으로 진행해보려고 한다.

 - 터미널에서 다음 한줄이면 시작할 준비가 다된 것이다.

npm install -g @‌anthropic-ai/claude-code

 

 

 - 이후 사용할 프로젝트 디렉토리로 위치를 이동 한 후 다음 명령어를 입력하여 주자.

cluade

 

 - 세션이 시작되는데 몇가지 설정 및 인증을 요구 한다. 

claude code 테마 설정

 

 - 계정 설정이 필요한데, 2가지 방식을 선탁할 수 있다.  

 

 - 만약 클로드 Pro 또는 Max Plan 을 고려하거나 사용하고 있었다면 문제가 없을 것 이다.
    해당 플랜들이 현재 클로드 코드를 사용 가능 한 것을 확인 하였다. ( ㅠㅠ 클로드..........도 구독해야 하나.???)

( 해당 링크 참조 : https://support.anthropic.com/en/articles/11145838-using-claude-code-with-your-pro-or-max-plan)

( 현재 plan별 가격도 참고 )

 

 - 나의 경우, 급변하는 AI시대에 너무 많은 구독료를 내고 있는 것 같아, API 사용량 방식으로 테스트 해볼만큼 최소 5.5달러만큼 결제하여 연동 완료 하였다.  (API Key 발급은 간단하니, 별도로 포스팅 하지 않았따.) 

 

 - 이후 몇가지의 기초 진행사항은 참고삼아 보고 쭉 넘어 가보자. 

늘, 나오는 경고 문구. AI는 실수를 할 수 있다고 한다.

 

 - 쭉 넘어가다보면 4번 과정을 끝마쳤다고 안내가 나온다. 

 

3. Claud Code 사용 체험

3.1) CLAUDE.md 파일 생성

 - 1번 과정을 이어 나가보자. 프로젝트 가이드 문서를 CLAUDE.md파일로 생성해주는 부분이다. 

 

 - 안내되있는대로 1번을 선택하거나 /init 을 입력 하면 된다.
   ( 

 

 - 실시간으로 토큰이 마구마구 사용되는 부분도 확인 가능하다 ㅠ

 

  - 이 과정을 끝낸 후의 완료 보고서

( 총 138 라인 ) 

( 상기 내용 요약 ) 

1) 포함된 핵심 정보 (Key Information Included)
프로젝트 개요 및 마이크로서비스 아키텍처
프론트엔드, 백엔드, Python 도구 등 주요 구성 요소의 개발 커맨드
Docker를 활용한 배포 패턴 및 멀티 플랫폼 빌드 프로세스
프록시, 경로 별칭 등 중요한 설정 정보
프론트/백엔드 공통 핵심 설계 패턴
Excel → HTML 변환을 포함한 파일 처리 워크플로우

2) 아키텍처 하이라이트 (Architecture Highlights Captured)
React 프론트엔드, Flask 백엔드, Node.js 기반 서비스로 구성된 멀티 서비스 구조
Prerender.io와의 통합을 통한 SEO 최적화
Docker 기반 서비스 격리 및 배포
Excel 기반 데이터 처리를 핵심 로직 패턴으로 활용

 

 - 생성된 내 파일은 일부 캡쳐하여 참고로 올려본다. 

    (설정 파일, 의존성, 프로젝트 개요, 명령어 등등 마크다운 문서를 알아서 만들어 준다. )

    (나의 경우 기존 마크다운 문서가 있었는데, 마크 다운문서가 없음에도 이정도로 만들어주는지는 직접 해보면 좋을 것 같다.) 

 

3.2) Prompt 사용 언어 변경

 - 영어로 프롬프트 작성이 좋긴 하지만 한글로도 대화를 해보고 싶어 변경 시도해 보았다.

 

3.3) 프로젝트 리팩토링

 - 이후 소스 리팩토링의 과정을 이어가기 전 나의 경우에도 사내에서 무거운 번들 사이즈 및 여러가지 속도 개선에 대한 노력과 고찰의 시간들이 있었다. 

ex) 번들 사이즈 개선 및 측정 과정

https://www.emgoto.com/react-bundles-and-code-splitting/

 

이외에도 Dynamic import, Lazy Loading 적용 등등 초기 로딩 속도를 높이기 위한 최적화 작업들을 하였는데, 

위와 같은 과정을 내 프로젝트를 통해 간단하게 보여 줄 수 있어 기록 해보려 한다. 

 

0) 리팩토링 요청

 

 - 취약점 점검 

 - 성능 최적화 가능성  

이 2가지만 먼저 진행해보자. ( 2개만 진행해도 내가 결제한 5.5$의 토큰을 다 소비하지 않을까? )

 

1) 취약점 점검 (보안 점검)

 - pnpm audit 결과 레포팅

 - 결과 요약

a) xlsx 패키지에 치명적 보안 취약점 2종 발견 : Prototype Pollution, ReDoS
b) 번들 내 위험 요소 제거 필요 경고 > 보안경고 대상 대체 라이브러리 교체 및 소스 적용
 기존 : import * as xlsx from 'xlsx'
 변경: import * as xlsx from '@lokalise/xlsx'
c) 이후 보안 경고 12건 → 2건으로 감소.

 

ex)

 

 

2) 성능 개선

a) 코드 split + 라우트 구조 개선

 - React.lazy 도입으로 동적 import 처리

 - 목적 : 사용자가 해당 경로에 접근했을 때만 JS 청크를 다운로드 처리. 필요한 페이지만 chunk 파일로 분리되기 때문에 트리쉐이킹이 가능 하다

 

b) 번들 분석 도구 추가

 

c) 이미지 최적화는 적용 후 계속된 오류로 인해 원복 처리 

 

d) 완료 보고서 및 약간의 거짓말 ( 이미지 최적화는 실제로 성공하진 못했지만 레포팅에는 포함되어 있다.)

 

3.4) 형상 관리

 - 개인 프로젝트이기 때문에 간단히 여태까지 작업한 내용에 대해 어떻게 message를 생성하고 pr 새성 또는 commit & push작업을 하는지 살펴 보았다.

 

4. 개인적인 생각

 - 클로드 코드를 통해 리팩토링된 결과는 알아서 검증까지 완료하는 부분에 있어서 매우 만족 스러웠다.

( 커서, 윈드 서프와 계속 올바르게 동작하지 않는걸로 싸웠던 기억이 나는 반면 꽤나 수월하게 스스로 검증까지 진행하니 편한 느낌이었다.) 

 - 토큰 방식이 아닌 구독방식을 채택하여 사용해보는게 어떤가 싶다. ( 당일 한두시간 안에 5.5$를 모두 소진 하였다. 물론 비싸다고 생각하는건 아니고, 유용한 툴로써 도움이 된다고 느껴지며, 구독형 방식이 비용을 더 아낄 수 있을 것 같다.) 

 

 - 윈드서프, 커서의 경우 소스 Line by Line으로 적요할지, revert할지, 소스 전체를 한번에 적용할지 선택 가능하였는데 

   claude code 의 경우는 알아서 다 적용하다보니 이 부분은 cli여서 어쩔수 없었는지 모르겠다. 아쉬운 부분이다. 

 

 - 내 환경에 맞춰 실습을 해봤는데 직접 더 자세한 내용을 알고싶다면 당연히 공홈을 활용 하자! 

https://docs.anthropic.com/en/docs/claude-code/overview

 

---

 

마무리 하며

 

- AI는 개발자에겐 이제 '도구'가 아닌 '파트너'라고 생각해도 될 것 같다.

 - Claude Code는 단순히 코드를 자동화 툴이 라기보단, 개발자의 역량과 사고 흐름에 따라 동행하는 협력자라고도 느껴졌다.
    "개발자와 함께 문제를 풀어나가는 파트너"라고 표현해도 과하지 않다고 생각한다.
 - 앞으로의 개발은 "혼자서 잘하는 개발자"보다 "AI를 잘 다루는?? 아니 AI와 잘 협력할 줄 아는 개발자"가 더 빠르게 성장할 수 있을거라고 느껴 졌다. 

기회가 된다면 다른 분들도 한 줄의 명령어로 Claude Code를 통해 새로운 개발 경험을 해보고, 후기를 남겨주시면 좋을 것 같다.

GUI 방식의 툴을 사용해보지 않으신 분들은 커서부터 사용해보기를 추천한다. (https://goddaehee.tistory.com/364)