Lovable 프로젝트에서 Claude Code를 사용하는 방법 (단계별 가이드)

저장소 이름이 필요해. GitHub 주소 끝부분 있지? 예를 들면 your-name/your-repo 같은 거. 이걸 아래 프롬프트에 넣어서 입력해:

Clone my GitHub repository your-name/your-repo with the GitHub CLI into a new folder in my home folder. Tell me the full path of the folder.

체크: Claude Code가 새 폴더가 어디 있는지 알려줄 거야. 다음 단계에서 그 폴더를 열면 돼.

5단계: Claude Code에서 프로젝트 열기

Code 탭에서 새 세션을 시작하고 아까 그 프로젝트 폴더를 선택해. 워크스페이스 신뢰하기 누르고, 프로젝트를 제대로 이해했는지 확인하려고 이 프롬프트를 먼저 날려봐:

Tell me in two sentences what this project does.

Lovable에서 만든 프로젝트랑 똑같이 설명하면 세팅 끝난 거야.

6단계: 내 컴퓨터에서 앱 실행하기

Install the dependencies of this project, start the dev server and give me the local address.

브라우저에서 그 주소(보통 "localhost"일 거야)를 열어봐. 거기서 앱이 잘 돌아가는지 확인하면 돼.

7단계: .env 파일 확인하기

Lovable은 리포지토리에 .env 파일을 보관하는데, 리포지토리를 볼 수 있는 사람이면 누구나 이 파일을 읽을 수 있어. 공개해도 되는 값은 괜찮지만, 비밀 키는 절대 안 돼. Claude Code한테 확인해달라고 시켜봐:

.env 파일을 확인해줘. 서비스_역할 키나 Stripe 비밀 키처럼 공개되면 안 되는 게 들어있는지 두 줄로 짧게 말해줘. 값은 절대 출력하지 마.

Step 8: Claude Code로 CLAUDE.md 작성하기

CLAUDE.md는 프로젝트에 대한 간단한 메모야. Claude Code는 세션을 시작할 때마다 이걸 읽어.

이 프로젝트를 읽고 프로젝트 루트에 CLAUDE.md 파일을 만들어줘. 이미 파일이 있다면 내용을 유지하면서 업데이트해줘. 스택, 앱 설치 및 실행 방법, 절대 건드리면 안 되는 파일을 적어줘. 백엔드가 있다면 코드 위치도 명시하고. 한 페이지를 넘기지 마.

Lovable의 Knowledge(프로젝트 설정 > Knowledge에 있는 AI용 메모)에 적어둔 게 있다면, 이 프롬프트 뒤에 복사해서 붙여넣어. 그래야 CLAUDE.md에도 포함되니까.

Step 9: 내 컴퓨터에서 로그인 작동하게 만들기

앱에 로그인이 없으면 이 단계는 건너뛰어.

비밀번호 재설정 링크는 기본적으로 라이브 URL을 사용해. 내 컴퓨터에서 작동하게 하려면 로컬 주소(6단계에서 확인한 거)를 Redirect URLs에 추가해야 해. Lovable Cloud를 쓴다면 More > Cloud > Users > Auth settings > Advanced에 있고, 직접 Supabase를 쓴다면 Authentication > URL Configuration에 있어. Site URL은 그대로 둬.

Step 10: 동기화 잘 되는지 확인하기

본격적으로 작업하기 전에 꼭 해봐. 이 프롬프트를 쓰면 GitHub으로 작은 테스트 변경 사항이 전송돼:

GitHub에서 최신 변경 사항을 가져와(pull). 그리고 README.md 맨 끝에 테스트용 줄 하나를 추가하고, "Test sync"라는 메시지로 커밋한 뒤 푸시해줘.

Lovable에서 프로젝트를 열고 Project settings > Git으로 가봐. 방금 푸시한 변경 사항이 보일 거야.

Step 11: 첫 번째 변경 사항 적용하기

이제부터 모든 세션은 이런 식으로 진행돼:

1. 먼저 Claude Code한테 최신 버전으로 업데이트하라고 해: "GitHub에서 최신 변경 사항을 가져와(pull)."

2. 원하는 변경 사항을 네 말로 설명해. 예를 들면: "홈페이지 메인 버튼을 파란색으로 바꿔줘."

3. 로컬 주소에서 변경 사항을 확인해. 페이지가 안 열리면 Claude Code한테 앱을 다시 시작하라고 해.

4. 마음에 들면 GitHub으로 보내: "모든 변경 사항을 짧은 메시지와 함께 커밋하고 GitHub에 푸시해줘."

5. Lovable에서 Publish를 눌러서 라이브로 반영해.

꼭 기억할 점

• 양쪽에서 동시에 수정하지 마. 동기화 없이 양쪽에서 프로젝트를 수정하면, Lovable이 변경 사항을 GitHub의 별도 브랜치로 옮겨버려서 나중에 수동으로 병합해야 해.

• 푸시가 곧 퍼블리시는 아니야. GitHub으로 변경 사항을 보낸다고 해서 라이브 앱이 바로 업데이트되는 건 아니야. Lovable에서 Publish 버튼을 꼭 눌러야 해.

더 자세한 단계별 가이드가 필요하면 우리가 만든 MoveYourCode라는 프로젝트를 참고해. 조만간 도움이 될 만한 가이드와 도구들을 더 추가할 예정이야.

https://moveyourcode.com/

조만간 Lovable이나 다른 플랫폼에서 호스팅을 옮기는 방법도 정리해서 올릴게. 어때, 의견 있으면 알려줘!