클로드와 바이브 코딩
1. 인텔리제이에 클로드 연동하기
인텔리제이를 사용한다면 상당히 간단하다. 설정 > 플러그인 > 마켓 플레이스에서 Claude Code 를 검색 후 설치해주면 된다.


설치 후 위 이미지처럼 상단바에 클로드 로고가 나타나면 성공이다. 혹 나타나지 않는다면 인텔리제이를 재시작하면 된다. 클로드 로고를 누르면 터미널에 귀여운 클로드 채팅창이 나오고 여기서 클로드와 대화하며 코딩을 시작하면 된다.

2. 로컬 폴더 클로드 연동
그 외 클로드를 직접 연동할 수 없는 IDE를 사용 중이라면 데스크탑 버전의 클로드를 설치해서 사용하면 된다.
https://claude.com/download
Download Claude
Download Claude for your desktop or mobile device.
claude.com
설치된 클로드를 실행하면 다음과 같은 창이 뜨는데 이때 세션 쪽을 선택하면 내 컴퓨터에 있는 프로젝트 폴더에 클로드를 접근시켜 작업을 할 수 있게 된다. (물론 ide에 직접 연결하는 것보다는 성능이 떨어진다.)

claude 말고도 chatGPT, Cursor, Gemini 등을 사용해봤지만, 아직까진 클로드가 코드의 완성도나 코드 작성 방향이 나와 제일 잘 맞는 것 같다. 내가 주저리주저리 타입인데, 클로드도 주저리주저리 타입(쓸데없이 많이 알려주고 많이 관여함)이라서 잘 맞는 거 아닐까 하는 생각을.... 깃헙 코파일럿이 요즘 각광을 받고 있는 것 같은데 아직 사용해 볼 기회가 없었다. 다음 프로젝트에 사용해 봐야지! 클로드는 다 좋은데 토큰을 너무 많이 잡아먹는다. 주저리주저리 타입이라서 그런가? 일부러 토큰 사용량을 아끼고 테스트를 생략해달라고 주문해야했다. 그 뒤에는 좀 덜 쓰긴 한다.
3. 바이브 코딩으로 프로젝트 만들기
우리 회사는 IT 기업인데 아직도 결재를 수기로 받는다. 친구들과 술자리에서 안주로 씹기 딱 좋은 주제이다. 오늘 연차 결재 받으러 사장님실 들어갔다가 한 소리 들어서 열받는 김에 당장 클로드를 켜고 프롬프트를 작성했다.
- 기본적인 기능은 각 사용자는 자신이 원하는 날짜를 선택해서 결재를 신청할 수 있고, 결재가 신청이 되면 결재라인을 따라(사람마다 다름. 예를들면 부장-이사-사장) 결재 신청이 한단계씩 올라가고 결재신청을 반려할 수도 있어.
- 결재가 신청이 되면 결재 신청자와 그 다음 결재 라인에 있는 다음 사람에게 메일발송이 되었으면 좋겠어.(사원이 신청하면 사원과 부장에게 메일 발송, 부장이 결재를 허가하면 그다음 결재라인인 이사에게 메일 발송, 다만 부장이 결재를 반려하면 신청한 사원에게 다시 메일발송)
- 관리자는 전체 사용자의 사용자 정보에 접근할 수 있고, 연초에 각 사용자마다 휴가의 개수를 부여해 줄 수 있어. 그리고 사용자를 추가하거나 삭제할 수 있고, 반려권한을 가질 수도 있고, 각 사용자의 결재라인을 설정할 수 있어.
클로드를 쓰면 쓸수록 느끼는 점이지만 프롬프트는 구체적일수록 내가 원하는대로 결과물이 나오고, 클로드 또한 일을 덜 하게 된다. 여기에 내가 정말 토큰을 줄이고 싶어서 추가로 넣은 한마디. 클로드 코드를 여러 번 사용해봤지만 이번에 느낀 것이 마지막 이 질문이 클로드가 최대한 간결하고 빠르게 일할 수 있게 도와준거 같다!
내가 생각한 기능은 여기까지인데, 너가 읽어보고 궁금한 점이 있어?
이렇게 질문하니 클로드가 프로젝트 설계를 위한 질문을 몇 가지 던졌고, 난 대답하고. 질문을 몇번 더 주고 받은 후 완성된 프로젝트는 버그 2~3개만 고쳐주니 완벽하게 동작했다!

프론트는 react로, 백엔드는 express로 만들어졌다.
몇가지 주요 패키지는 date-fns, sql.js, bcryptjs, jsonwebtoken, nodemailer이다.
date-fns는 프론트에서 공휴일 데이터를 받아와 휴가 차감할 때 예외 처리를 하기 위해 쓰였다.
sql.js는 사용자 정보와 연차 정보 등을 저장하기 위한 데이터 베이스 컨트롤 용도로,
bcryptjs, jsonwebtoken은 사용자 정보 관련 보안 용도로 사용되었다.
그리고 nodemailer는 휴가 신청이나 승인이 날때 사용자와 결재자에게 알림 메일을 보내기 위해 사용되었다.
'개발' 카테고리의 다른 글
| [javascript] Promise (0) | 2025.12.17 |
|---|---|
| [React] props와 state (0) | 2025.12.17 |
| [React] React와 Vue (0) | 2025.12.17 |
| [javascript] Ajax (0) | 2025.12.17 |
| [React] 컴포넌트의 라이프사이클 (Lifecycle) (1) | 2025.12.16 |
댓글