본문 바로가기

사는 얘기 Digital Nomad 꿈꾸며

CLAUDE CODE 환경과 Replit 이야기 feat. Replit 내에서 Claude Code 사용하는 방법 - 비개발자도 앱 창업 가능한 AI 개발환경 만들기

728x90
반응형

"아무리 생각해봐도 결론 자본과의 싸움이다"

바이브코딩 환경을 통한 창업과 개발을 하는데있어서 결국은 어떤 개발도구 개발환경을 쓰는게 옳을 지에 대한 결정은 결국은 어떻게 하면 저렴한 가격에 생산성있게 좋은 서비스 또는 제품을 만드느냐 인것 같음.

이미 나는 여기저기 상당히 많은 구독료를 지불하고 있고, 끊임없이 구독과의 전쟁중인데...부족함을 느끼고 있다...턱 없이 모질라는 개발 토큰과 시간대비 부족한 토큰...물론 지금 내가 개발해서 사용중이거나 개발 한것만 봐도 굳이 기성의 개발비용과 시간으로 따지면 상상도 할수 없지만, (불과 2년전만해도 말이 안되는 얘기지) 아직도 부족한 부분을 어떻게 채워서 더 효율적이고 빠른 서비스를 만들어 낼수 있을지 고민하게 된다.

오늘은 이제 내 개발도구로 자리매김한 Claud Code (+Codex 이지만 이건 머 굳이 아직 말할게 없다 사실 최근에 상당히 성능이 좋아지긴 한거같은 현재 나는 Local 환경에서는 Claude Code + Codex 5.5 를 6:4 병행 작업으로 사용 중이고, (진행중인 ERP 프로젝트 에서도 이환경을 통해 산출물 작업 분석작업 등 작업의 효율을 80% 이상 엄청나게 향상 시켰다.) 와 Replit 에 대한 이야기를 좀 다시 꺼래보려 한다. 

그리고 중요한 Replit 에 Claude Code를 탑재(?) 시켜서 사용하는 방법도

내가 내린 결론 부터 말하면 

“Replit은 개발환경 전체를 통째로 만들어주는 AI 개발 스튜디오이고, Claude Code는 그 안에서 코드를 더 깊고 정확하게 다루는 고성능 AI 개발자다.”


REPLIT vs CLAUDE CODE

Replit = 공장, 작업실, 서버, 배포실까지 갖춘 풀세트 개발 기지
Claude Code = 그 안에 투입하는 실력 좋은 시니어 개발자/수석 엔지니어

http://replit.com

 

Replit – Build apps and sites with AI

Build and deploy software collaboratively with the power of AI without spending a second on setup.

replit.com

Replit 은 

쉽게 말하면 브라우저 안에서 바로 앱을 만들고, 실행하고, 배포까지 할 수 있는 클라우드 개발 플랫폼이다. 예전에는 “온라인 코딩 IDE” 느낌이 강했지만, 지금은 AI Agent를 중심으로 아이디어 → 앱 생성 → 코드 수정 → 테스트 → 배포까지 한 번에 이어주는 쪽으로 진화했다.

Replit 공식 문서도 Replit Agent를 “일상 언어로 아이디어를 설명하면 앱, 디자인, 슬라이드 등을 만들어주는 도구”라고 설명하고, 단순 챗봇이 아니라 프로젝트를 만들고, 애플리케이션을 생성하고, 점검하고, 문제를 고치는 방식으로 동작한다고 설명한다.

특히 Replit의 강점은 환경 세팅이 거의 필요 없다는 것이다. 로컬 PC에 Node.js 깔고, Python 버전 맞추고, DB 연결하고, 포트 열고, 배포 서버 잡고… 이런 삽질을 상당 부분 줄여준다. 공식 문서에서도 Replit은 프롬프트 하나로 앱, 웹사이트, 대시보드, 모바일 경험, 프로토타입 등을 만들 수 있는 방향을 강조한다.

https://claude.com/ko/product/claude-code

 

Claude Code by Anthropic | AI Coding Agent, Terminal, IDE

Anthropic's agentic coding tool for developers. Claude Code understands your codebase, edits files, runs commands, and helps you ship faster.

claude.com

Claude Code 는

Anthropic의 Claude를 개발 작업에 특화시킨 AI 코딩 에이전트다. 단순히 “코드 알려주는 챗봇”이 아니라, 프로젝트 폴더를 읽고, 파일을 수정하고, 명령어를 실행하고, 여러 개발 도구와 연동해서 실제 작업을 수행하는 도구다. 공식 문서에서도 Claude Code는 코드베이스를 읽고, 파일을 수정하고, 명령을 실행하며, 터미널·IDE·데스크톱 앱·브라우저에서 사용할 수 있는 agentic coding tool이라고 설명한다.

Claude Code의 본질은 “말귀 알아듣는 개발자”에 가깝다.
내가 느끼기엔 특히 이런 면이 강하다.

“내가 뭘 원하는지 이해하고, 기존 코드를 읽고, 왜 문제가 생겼는지 추론하고, 필요한 부분만 고쳐주는 능력”

Replit Agent가 전체 판을 잘 깔아준다면, Claude Code는 그 판 위에서 정밀 수술을 잘한다.

 

정체성 클라우드 개발 플랫폼 + AI Agent AI 코딩 에이전트
핵심 역할 앱 생성, 실행환경, DB, 배포, 운영까지 연결 코드 이해, 수정, 디버깅, 자동화
장점 풀스택 앱을 빠르게 만들고 바로 배포 가능 말귀, 코드 이해력, 수정 정확도, 개발 작업 집중도
사용 위치 브라우저 기반 Replit 작업공간 터미널, IDE, 데스크톱, 브라우저 등
적합한 상황 MVP, 프로토타입, 웹앱, 빠른 배포 기존 코드 개선, 버그 수정, 리팩토링, 테스트 작성
약점 AI가 과하게 고치거나 비용 부담이 커질 수 있음 자체적으로 호스팅/배포 플랫폼은 아님

Replit은 “전체 개발환경”이고, Claude Code는 “그 개발환경 안에서 일하는 고성능 개발자”다. 이 차이를 모르고 비교하면 “둘 중 뭐가 더 좋아?”가 되는데, 사실 더 좋은 질문은 이거다.

“어떤 일은 Replit에게 맡기고, 어떤 일은 Claude Code에게 맡길 것인가?”

Claude Code가 아무리 똑똑해도, Claude Code 자체는 개발환경과 배포 인프라를 통째로 제공하는 플랫폼은 아니다. 반면 Replit은 프로젝트 생성부터 코드 편집, 실행, DB, Secrets, 배포, 도메인 연결까지 한 화면 안에서 이어진다.

Replit으로 개발을 시작했지만, Claude Code 로 로컬 개발환경으로 이사온 내 자동주식투자매매봇 아직 비공개
순수 로컬에서 Claude Code 로만 개발중인 AI 회사 Simulation BLOKS
BLOKS는 AI 직원들 간의 업무가 어떤것을 할수 있는지 확인 하기 위한 실험이다

 

각 직원들에는 다양한 AI를 뇌로써 탑재한다


Replit Agent는 앱을 만들 때 코드 작성뿐 아니라 인프라 설정과 테스트까지 수행한다고 공식 문서에서 설명한다. 또한 웹앱, 모바일 앱, 데이터 대시보드, AI 도구, 디자인 프로토타입, 파일·문서 생성, 여러 산출물을 같은 프로젝트 안에서 만드는 것도 지원한다고 안내한다.

1. 환경 세팅에대한 스트레스로 부터 해방. 정말 아무것도 모르는 사람들이 앱,웹을 배포 해낼수 있게 모든것을 다 제공한다"돈만 있으면!!!!"

2. 프론트 앤드 백엔드 DB 배포가 모두 한통이다. 위와 일맥 상통하는 얘기로 화면 만들고, 환경변수 세팅, 배포, 오류 로구, 개발-운영 2tier 환경 등등 한방에 정말 다있다. 최근 멀티 에이전트 환경까지 있어서 정말 엄청나긴하다.

3. 심지어는 웹으로 즉시 배포까지 해서 바로 제품화도 가능하고 Stripe 까지 직접 연동 해준다.

즉, 비개발자에게 진입장벅 자체를 아예 허물어놓았다. 돈만 충분하면!!!! Replit의 무서운 점은 코드를 잘짠다 라기보다는 개발자팀이 몇일식 삽질하고 하는 환경 구성과 실행, 서버, 배포, 테스트, 등의 벽을 한방에 낮춰놓아 버렸다.1인창업자에게 작은 개발팀 하나를 차려준다. 심지어는 스마트폰 환경 동기화 SaaS 모델이라 언제 어디서나 24시간 작업 진행이 된다는게 Claude Code와 큰 차이이다. Claude Code도 최근 이런부분이 OpenClaw 등을 통해 많이 개선 되었지만 다소 까다로운 셋업과한계가 있고 감히! SaaS 서비스와 이부분을 비교할수는 없지.


Claude Code의 장점은 정확도와 이해력이다.

Replit은 큰 판을 벌이는 데 강하지만, 때로는 너무 많은 걸 한 번에 건드린다. “이 버튼만 고쳐줘” 했는데 폴더 구조를 바꾸거나, 기존 기능을 건드리거나, 필요 이상으로 코드를 갈아엎는 느낌이 날 때가 있다.

반면 Claude Code는 체감상 내가 뭘 말하는지 더 정확히 알아듣고, 코드 맥락을 읽고, 필요한 수정에 집중하는 느낌이 강하다.

Claude Code는 공식적으로 코드베이스를 이해하고 여러 파일과 도구를 넘나들며 기능 개발, 버그 수정, 개발 자동화를 돕는 도구로 소개된다. 또한 MCP를 통해 외부 도구, 데이터베이스, API, 이슈 트래커 등과 연결할 수 있어 단순 코드 생성보다 넓은 개발 워크플로우로 확장할 수 있다.

1. 말귀를 잘 처 알아듣는다. 내가 이렇게 까지 겪앙된 표현을 쓰는 이유는 Replit로 작업을 하다가 욕하고, 뒤집어 엎어 버린적이 너무 많다. 물론 그것도 이제는 강하고 비싸는 Super 모델을 쓰면서 거의 없어지긴 했지만..Replit은 개발 작업을 할때, 다소 말을 잘(한국말이라 더그런듯) 못알아 들을때도 있었다. 최근에는 왠만하면 가장강력한 옵션으로 하면 이런 문제는 대부분 해결된듯하다.이런면에서 클로드코드는 요구사항의 의도를 잡는 능력면에서 강력하다.

2. 토큰 낭비가 적다. Replit은 쉬운 환경에 알아서 다해주는 값이 토큰값이 묻어 있다. 하지만 Claude Code (Codex도 마찬가지) 는 쓸대없는 설명이 적어도 필요한 파일을 읽고 알아서 작업을 잘한다.

3. 디버깅과 리팩토링 능력이 매우 우수하다. 특히 이부분은 아무리봐도 Codex보다 확실히 한수위인것 같다.

전반적으로 안정성 있게 개발을 진행하며, 특히 좋은 Skill들과 MCP를 탑재해서 사용할수 있다는게 장점이다.

Replit 으로 운영중인 내 유튜브분석기 겸 블로그 작성 도우미 VidDigest

http://viddigest.net

 

유튜브 요약 AI - 무료 영상 요약 사이트 | VidDigest Hub

AI로 유튜브 영상을 10초만에 요약! 무료로 긴 강의, 뉴스, 팟캐스트를 핵심 노트로 변환. 학생, 직장인을 위한 최고의 유튜브 요약 도구.

viddigest.net

Tourgether.io

http://tourgether.io

 

투어게더(Tourgether) - 지도 기반 여행 SNS | Map-based Travel Social Network

투어게더는 여행자와 로컬을 연결하는 여행 SNS입니다. 여행 일정 공유, 타임라인 기록, 현지 추천까지. Tourgether connects travelers with locals for authentic experiences.

tourgether.io

 

사실 장점만 놓고 보면 Replit이 Claude Code 보다 강력하다 Claude Code 최대 장점은 안정성있게 잘만든다인데.. Replit도 돈만 충분히 많이 쓰면 Claude Code 만큼 잘한다. 그게 왜 그러냐면 Replit이 사용하는 도구가 Claude Code 이기때문!! Replit은 Service 공급 업체 이다. 즉, AI 모델을 생산해내지 않는 AI개발 환경을 제공하는 Privider 들중에 가장 강력할뿐, 그럼에도 Replit을 사용하기에 부담스러운건 엄청난 과금!! 모든 강점들을 상쇄해주는 최대약점이 바로 비용이다!

그래서 이 둘의 장점을 잘 밍글링할 방법이 있을까?

에 대해한 나의 결론은 있다! 

일단 왜 둘을 밍글링 해야하는가 하면 이런것들때문

첫째, Replit의 클라우드 개발환경을 그대로 쓴다.
로컬 PC 성능, 환경변수, 설치 꼬임, 포트 충돌 문제에서 어느 정도 자유로워진다.

둘째, Claude Code를 Replit Shell에서 직접 실행하면 프로젝트 파일을 바로 읽고 수정할 수 있다.
복사 붙여넣기로 코드를 왔다 갔다 하지 않아도 된다.

셋째, Replit Agent가 만든 코드를 Claude Code가 정리할 수 있다.
이게 진짜 핵심이다. Replit Agent가 빠르게 만든 코드는 때로 구조가 지저분하거나 불필요한 코드가 섞일 수 있다. 그때 Claude Code에게 “현재 구조 분석하고, 중복 제거하고, 버그 가능성 찾아줘”라고 시키면 훨씬 안정적으로 다듬을 수 있다.

넷째, 두 AI를 서로 견제시키는 효과가 있다.
Replit이 만든 결과를 Claude Code에게 검토시키고, Claude Code가 수정한 걸 Replit에서 실행·배포 테스트한다. 이건 1인 개발자에게 거의 “AI 코드 리뷰어 + AI 실행환경” 조합이다.

다섯째, MVP 개발 속도와 품질의 균형이 좋아진다.
Replit은 속도, Claude Code는 품질.
둘이 합쳐지면 “빨리 만들고, 덜 망치는” 쪽으로 갈 수 있다.

Replit 안에 Claude Code를 탑재하는 건, 자동화 공장에 실력 좋은 공장장을 앉히는 것과 비슷하다. Replit이 재료와 기계와 생산라인을 제공한다면, Claude Code는 “어디가 잘못됐는지”, “어디를 고쳐야 하는지”, “괜히 건드리면 안 되는 파일이 뭔지”를 판단하는 역할을 한다.

 

그래서 Replit에 Claude 코드를 탑재 하는 방법!!??

방법은 아래와 같다 (Replit 을 한번정도 이상 사용해본 경험이 있다는 약간의 전제가 있음)

나의 Replit 프로젝트들

위와같이 Replit 에 개발중이거나 운영중인 프로젝트 중에서 Claude Code 환경을 설치할 프로젝트를 선택한다. 내 PC에서 처럼 전체 PC 권한을 주면 좋겠지만, Saas 환경의 특성상 그건 불가능한것 같다. 이번에는 내 프로젝트들의 전시관 Site 인 SocialBeing 이라는 WEB Page 프로젝트 에 Claude Code를 탑재 해본다. (선택)

http://sotialbeing.com

 

유튜브 요약, 주식 AI, 코디 추천 등 무료 웹 서비스 | Social Being Lab

유튜브 영상 요약, 주식 자동매매, 오늘 뭐 입지 코디 추천, 현지인 여행 가이드, 일본어 공부 등 일상에 필요한 무료 서비스. 설치 없이 바로 사용!

sotialbeing.com

 

Replit 프로젝트의 개발환경

해당 프로젝트 선택하고, 이렇게 개발환경이 나오면 가운데 위에 Replit은 많은 셋업환경들을 보여주거나 세팅가능하다(Replit은 사용자가 직접 소스코드를 수정도 할수 있는 환경도 제공하고, DB 관리자부터, 각종 키관리 환경까지 다 제공해준다.) 그중에 Shell 즉 Console 환경도 준다. 

+ 버튼 눌러 New Tab 을 호출하고 Shell 입력 하고 선택하면 Console 이 뜬다

다양한 방법들이 존재하는데 시행착오 끝에 내가 가장 확실하다고 생각되는 방법으로 정리해봤다. 

1. 혹시 다른 방법등으로 인해서 인증이 꼬인경우를 대비 인증 정리

rm -f ~/.claude/.credentials.json

2. Replit shell 현재 위치 확인

pwd

결과가 저렇게 나오면 맞는거다.만약 저렇게 안나올경우 

cd ~/workspace 를 처서 해당 폴더디렉토리로 이동

3. 이제 준비 되면, 바로 Claude Code 설치 들어가면 된다. npm 이 어쩌고 node.js 18 이상이 필요하거 그런데...Replit 환경이므로 개의치 않고 그냥 

cd ~/workspace
mkdir -p .npm-global
npm config set prefix "$PWD/.npm-global"
npm install -g @anthropic-ai/claude-code@latest

위 4개를 통으로 입력

큰 이상없이 정상 설치가 된다. 즉, PC에 설치 된거처럼 Replit의 내 프로젝트 환경에 설치된거다 Claude Code가

4. Path 임시 등  패쓰를 등록 해준다 export PATH="$PWD/.npm-global/bin:$PATH"

5. 정상 설치 등록 되었는지 확인 

which claude
claude --version

대충 위와같이 나오면 정상이다.

여기까지만 하면 사용 가능인데..이렇게 하면 나중에 개발환경에 다시 들어왔을때 또설치 해야할수 있다.그래서

6. Replit shell 새로 열어도 claude 명령어 먹히게 고정하고

echo 'export PATH="$HOME/workspace/.npm-global/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

그러구 나서 다시 claude --version 한번 재확인 해서 문제 없는지 보기.

7. 클로드 코드 인증 

클로드코드를 사용하려면 Console (PC 에서는 나는 보통 Console 보다는 VS CODE cli를 이용하긴한다) 에 claude 라고 치고 시작하는데 여기도 똑같이 그렇게 입력하면 PC 에 첨세팅할때처럼 아래 화면이 나온다

마치 내 PC 환경처럼 클라우드 SaaS 환경에도 설치 된다...이것도 어찌보면 Replit 만의 강력한 장점이다!!

Replit 이 SaaS 지만 PaaS 처럼 이렇게 환경 제공 되는게 놀랍다.

보통 클로드코드 구독자들은 Subscription 으로 하는게 당연할것이 선택하면 아래와 같이 내 클로드코드의 승인을 요청하는 창이 Web 브라우저에 뜬다. PC에서는 그냥 승인 눌르면 이제 환경이 세팅이 되어야하지만...!!! 안된다!!!왜냐면 이유는잘 모르지만 저게 로컬 포트같은걸로 연결한다. 즉, 내 로컬 PC에서 승인을 받는걸로 뭔가 착각한다.

이런식으로 나와 버린다 로컬포트...

그래서 저렇게하면 안되고 다시 Replit shell로 오면 아래와 같이 URL을 제공해준다. 브라우저 오픈안되나요? 이걸로 해보세요 이런식으로....그래서 저 URL을 WEB Page 에 입력한다

URL 복사

 8. 저 URL 복사 하여 브라우저로 입력 후 승인 받기 

이번에는 정상적으로 승인을 눌르면 인증코드가 나온다 저 인증코드 복사하기 눌러서 복사해서 shell 에 붙여 넣기 하고 Enter 치면

s

성공이다! 이제 엔터 엔터 엔터 3번 (머 이폴더 믿느냐 내가 막 컨트롤 해도 되느냐? 이런거 )

이제 Replit  에 있는 내 프로젝트 팀에 Claude Code라는 일잘하는 개발자가 입사하셨다!

새로 입사한 클로드코드에게 일부터 파악 해보라고 시켰다.

파악을 다했다. 제법이다!!!

이렇게 사용하면 Replit 내에서 Claude Code를 이용한 개발이 가능해진다.

개발 그자체의 효율화와 Replit이 제공하는 환경을 같이 이용 할수 있는 구조가 된것이니, 어느정도 상당한 효율 극대화가 되었다고 볼수 있다.

가장강력하지만 서로 다른 두 AI 기반 개발 환경이 서로 시너지를 낼수 있게 되었다는 것만으로 나를 흥분시킨다. 

============================================================================================

Replit 의 기본 월 구독은 Core Plan  monthly 18~20 달러이다. 가입시 레퍼럴을 이용하면 추가 20달러 를 제공해준다 20달러를 제공해준다. 필요시 사용을 원하면 아래 링크를 이용하면 됨.

https://replit.com/refer/mainstop3

 

Sign Up

Build and deploy software collaboratively with the power of AI without spending a second on setup.

replit.com

아래는 Claude Code 가입 할때 사용 가능한 레퍼럴이다. 1주일 무료 체험 후 10 달러 크레딧을 추가로 받을수 있다

https://claude.ai/referral/I2x69IBJHg

 

Join Claude!

You've been invited to try Claude

claude.ai

 

 

728x90
반응형