클로드 코드 계획 모드로 웹사이트를 실제 서비스로 만드는 법

클로드 코드 계획 모드로 내 컴퓨터 안에만 있는 웹사이트를 회원 가입, 글, 댓글, 공개 주소가 있는 실제 서비스로 바꾸는 순서를 정리합니다. 작업 폴더 고르기부터 계획 모드 요청, 터미널에서 Supabase 로그인까지 28단계로 따라 할 수 있고, 그 과정에 나오는 Git·GitHub, Supabase, Cloudflare가 각각 무슨 일을 하는지도 비개발자 눈높이로 풀었습니다.

AI로 만든 웹사이트가 있어도 다른 사람이 접속하고 가입하고 글을 남길 수 없다면 내 컴퓨터 안의 예쁜 껍데기에 가깝습니다. 이 껍데기를 서비스로 바꾸려면 클로드 코드에 바로 만들라고 하지 말고 전체 계획부터 세우게 하는 것이 출발점입니다.

실제 서비스가 되려면 필요한 것

예를 들어 브랜드 소개 사이트에 채용 공고나 직장인 커뮤니티 기능을 넣고 싶다면, 화면만으로는 부족하고 아래가 필요합니다.

• 회원 가입과 로그인
• 사용자가 직접 쓰는 글과 댓글
• 작성한 내용이 사라지지 않는 저장
• 다른 사람도 인터넷으로 접속할 수 있는 주소

개발 과정을 모르면 이 중 무엇부터 요청해야 할지조차 막막합니다. 그럴 때 처음부터 완벽한 지시문을 만들려고 애쓸 필요는 없습니다. 만들고 싶은 결과와 아는 내용을 솔직하게 설명하고, 바로 작업하지 말고 전체 계획부터 세워 달라고 하면 됩니다.

왜 일반 대화창이 아니라 클로드 코드인가

이런 작업은 일반 대화창보다 클로드 코드에서 시작하는 편이 좋습니다. 클로드 코드는 폴더 안 파일을 직접 확인하고 고치고, 문서를 만들고, 작업 계획을 기록하고, 코드를 실행해 결과를 확인하면서 프로젝트를 이어 갈 수 있습니다. 데스크톱 앱의 Code 탭에서는 대화, 프로젝트 파일, 터미널, 웹 미리보기를 한 화면에서 볼 수 있습니다.

계획 모드(plan mode)는 클로드가 파일을 고치거나 명령을 실행하지 않고, 읽고 조사하고 질문한 뒤 계획만 내놓는 모드입니다. 내가 계획을 승인해야 실제 작업이 시작됩니다. 터미널판 클로드 코드에서는 Shift+Tab을 눌러 입력창 아래 표시가 plan mode가 될 때까지 바꿉니다.

따라 하는 순서: 클로드 코드 계획 모드부터 Supabase 로그인까지

메뉴 이름은 앱 버전에 따라 조금씩 다를 수 있으니 내 화면에서 한 번 더 확인합니다.

준비물

• Claude 데스크톱 앱(Code 탭) 또는 터미널판 클로드 코드
• 이미 만들어 둔 웹사이트 파일이 들어 있는 폴더
• Supabase 계정. 가입 전이면 로그인할 때 회원 가입 화면이 먼저 나옵니다.
• (선택) 지시문을 다듬을 일반 대화창
• 학습⁠·테스트 단계에서는 Cloudflare가 주는 무료 주소로도 충분합니다.

1부. 클로드 코드에서 작업 시작하기

1단계. Claude 데스크톱 앱을 실행하고 Code 탭으로 갑니다. ✅ 확인: 클로드 코드 화면이 열립니다.

2단계. 새 작업(세션)을 만듭니다. ✅ 확인: 새 작업 화면이 열립니다.

3단계. 로컬 작업 폴더 선택에서 실제 사이트 파일이 들어 있는 폴더를 고릅니다. ✅ 확인: 클로드가 답변만 하는 게 아니라 선택한 폴더 안 파일을 확인하고 직접 고칠 수 있게 됩니다. 웹사이트 개발이나 여러 도구를 연결하는 에이전트 작업은 이렇게 폴더를 연 작업 환경에서 합니다.

2부. (선택) 일반 대화창에서 지시문 다듬기

내가 제대로 설명했는지 불안할 때만 하는 단계입니다. 질문이 두서없어도 괜찮습니다. 요즘 AI는 설명을 구조화하는 능력이 상당히 좋습니다.

4단계. Claude의 일반 대화창(채팅)을 엽니다. ✅ 확인: 클로드 코드가 아닌 일반 대화창이 열립니다.

5단계. 내가 작성한 지시문을 붙여 넣습니다. ✅ 확인: 대화창에 내 지시문이 보입니다.

6단계. 아래 문장을 이어서 입력해 보냅니다. ✅ 확인: AI가 지시문을 훨씬 더 정교하게 고쳐 줍니다.

아래의 지시문은 내가 너에게 요청하려는 내용이야. 나의 목적을 네가 정확히 이해하고 작업할 수 있도록 질문을 수정해서 최종 요청문으로 다시 작성해 줘.

7단계. 다시 작성된 지시문을 복사합니다. ✅ 확인: 복사한 지시문을 클로드 코드에 넣을 수 있습니다.

3부. 계획 모드로 요청하기

8단계. 클로드 코드 화면 왼쪽 아래(입력창 아래)의 모드 선택을 찾습니다. ✅ 확인: 지금 모드 이름이 적힌 버튼이 보입니다.

9단계. 모드를 "계획(Plan)"으로 바꿉니다. ✅ 확인: 모드가 계획으로 표시됩니다. 요청을 보내기 전에 바꿔야 합니다. 계획으로 바꾼 다음 요청합니다.

10단계. 만들고 싶은 결과와 알고 있는 내용을 입력창에 솔직하게 씁니다. 7단계에서 다듬은 지시문을 붙여 넣어도 됩니다. 예를 들면 이렇게 씁니다.

이 폴더의 사이트에 회원 가입, 로그인, 글쓰기, 댓글 기능을 넣고 다른 사람도 접속할 수 있게 인터넷에 올리고 싶어. 나는 개발을 잘 몰라. 바로 작업하지 말고 필요한 도구와 순서를 포함한 전체 계획부터 세워 줘.

✅ 확인: "바로 작업하지 말고 전체 계획부터 세워 달라"는 내용이 들어 있습니다.

11단계. 요청을 보냅니다. ✅ 확인: 클로드가 질문을 하는 경우가 생깁니다.

12단계. 클로드의 질문에 답합니다. ✅ 확인: 확실히 아는 부분은 내 의견을 줬고, 잘 모르겠으면 "권장"이라고 표시된 안을 골랐습니다. 권장이라고 표시돼 있어도 무조건 누르지 말고, 적어도 왜 권장하는지는 확인하는 습관을 들입니다.

13단계. 계획이 완성되면 계획을 끝까지 읽습니다. ✅ 확인: 모르는 내용이 나오면 그냥 넘어가지 않고 클로드에게 물었습니다. 이렇게 묻습니다. "이 작업은 왜 필요한 거야? 왜 이 도구를 사용하는 거야? 다른 방법도 있는데 이 방법을 권장하는 이유는 뭐야?"

14단계. 계획을 승인합니다. ✅ 확인: 클로드가 해야 할 일을 순서대로 진행하기 시작합니다. 보통 사이트 파일 분석, 필요한 기능 제작, GitHub·Supabase·Cloudflare 같은 외부 서비스 연결 순서입니다.

4부. 터미널 열고 명령어 실행하기

작업 중에 인증, 사이트 연결, 로그인처럼 처음 보는 내용이 나오면 터미널을 씁니다. 명령어는 외우거나 직접 칠 필요 없이 클로드가 화면에 알려 줍니다.

15단계. 화면 오른쪽 위의 "터미널"을 클릭합니다. ✅ 확인: 오른쪽에 별도 창이 나타나고, 지금 작업 중인 폴더 주소가 함께 표시됩니다.

16단계. 클로드가 알려 준 명령어 오른쪽 끝의 "코드 복사" 버튼을 클릭합니다. ✅ 확인: 명령어가 복사됩니다.

17단계. 터미널 입력창으로 이동합니다. ✅ 확인: 입력창이 선택돼 있습니다.

18단계. 입력창에서 마우스 오른쪽 버튼을 누릅니다. ✅ 확인: 메뉴가 나옵니다.

19단계. "붙여넣기"를 선택합니다. ✅ 확인: 명령어가 화면에 입력돼 있습니다.

20단계. 키보드의 Enter 키를 누릅니다. ✅ 확인: 바로 실행되거나, 영어로 무언가를 요청하는 새 문장이 나옵니다.

21단계. 영어 문장의 뜻을 모르겠으면 화면을 캡처합니다. ✅ 확인: 캡처 이미지가 준비됩니다.

22단계. 캡처를 클로드에게 보여 주고 무엇을 해야 하는지 묻습니다. ✅ 확인: 클로드가 다음에 할 일을 설명해 줍니다. Supabase 로그인이라면 보통 "Enter를 누르면 웹브라우저를 열어 Supabase 로그인을 진행한다"는 뜻입니다.

5부. 브라우저에서 인증번호 받아 로그인 마치기

23단계. 터미널에서 Enter 키를 누릅니다. ✅ 확인: 웹브라우저가 열립니다.

24단계. 브라우저 화면을 확인합니다. ✅ 확인: Supabase에 이미 로그인돼 있으면 인증번호가 나타납니다. Supabase에 가입하지 않았다면 회원 가입 화면이 먼저 나옵니다. 가입과 로그인을 마친 다음 다시 진행합니다.

25단계. 브라우저에 짧은 인증번호가 나타나면 "코드 복사" 버튼을 누릅니다. ✅ 확인: 인증번호가 복사됩니다.

26단계. 터미널로 돌아옵니다. ✅ 확인: 터미널에 인증번호(verification code)를 입력하라는 줄이 나타나 있습니다.

27단계. 그 자리에 복사한 번호를 붙여 넣습니다. ✅ 확인: 인증번호가 입력돼 있습니다.

28단계. Enter 키를 누릅니다. ✅ 확인: 로그인이 완료됩니다.

방금 실행한 명령어의 뜻

이 단계에서 클로드가 보여 주는 명령은 보통 npx supabase login입니다. npx는 Supabase CLI(명령줄 도구)를 따로 설치하지 않고 바로 실행하는 방법이고, supabase login은 이 터미널을 내 Supabase 계정과 연결해 달라는 뜻입니다.

Supabase 입장에서는 이 터미널을 쓰는 사람이 정말 계정 주인인지 확인해야 합니다. 그래서 브라우저에서 계정을 확인하고, 이번 로그인에만 쓸 임시 인증번호를 보여 줍니다. 본인 확인이 끝나면 이 컴퓨터의 터미널에 출입증을 발급한 상황입니다. 이후 클로드가 터미널로 Supabase 프로젝트를 만들거나 설정을 바꾸면, 허용된 범위 안의 작업이 처리됩니다.

마지막 점검

• 클로드 코드에서 사이트 폴더를 고른 작업을 만들었다.
• 모드를 "계획"으로 바꾸고 요청해 계획이 나왔다.
• 계획을 읽고 모르는 부분은 물었다.
• 터미널에서 인증번호까지 넣어 로그인이 완료됐다.
• API 키나 비밀번호 같은 민감한 정보를 대화창에 붙여 넣지 않았다.

막혔을 때

• 터미널에 영어 문장이 나와 무엇을 할지 모르겠을 때: 화면을 캡처해 클로드에게 묻습니다.
• 브라우저에 인증번호 대신 회원 가입 화면이 나올 때: Supabase 가입과 로그인을 마친 뒤 다시 진행합니다.
• 진행 중 오류가 날 때: 화면이나 오류 메시지를 그대로 보여 주고 원인과 다음 조치를 설명해 달라고 합니다.
• 명령이나 권한이 안전한지 모를 때: "지금 이 명령은 무엇을 설치하는 거야?", "이 권한을 승인해도 안전해?", "지금까지 연결이 제대로 된 거야?" 하고 물으며 진행합니다.

API 키와 비밀번호는 특히 조심합니다. 대화창에 그대로 붙여 넣으면 대화 기록에 남고, 그 대화를 공유하거나 파일로 저장하는 순간 함께 퍼질 수 있습니다. 클로드가 키를 넣어 달라고 하면 대화창이 아니라 .env 같은 설정 파일에 직접 넣는 방법을 물어봅니다.

로그인 이후의 GitHub 연결, Supabase 데이터베이스 만들기, Cloudflare 배포는 클로드가 안내하는 화면을 보면서 하나씩 진행합니다. 이해되지 않는 부분은 그때마다 바로 묻습니다.

"승인만 하면" 생기는 문제

진짜 중요한 문제는 그다음부터입니다. 이 사이트를 실제 서비스로 출시했다고 치면 아무 문제 없이 운영할 수 있을까요. 계획도 작업도 기술 선택도 클로드가 했고 나는 승인하고 클릭하고 복사하고 붙여 넣는 일만 했다면, 전체 구조를 이해하지 못했을 가능성이 큽니다.

GitHub에 무엇이 저장돼 있는지, Supabase에 어떤 데이터가 들어가는지, Cloudflare가 어떻게 돌아가는지 모르면 이런 질문에 답하기 어렵습니다.

• 오류가 나면 사이트를 업데이트할 수 있나?
• 사용자가 늘면 비용은 얼마나 드나?
• 회원 정보는 안전하게 보호되고 있나?

그렇다고 전문 개발자 수준의 지식이 필요하지는 않습니다. AI가 지금 무슨 작업을 하는지, 각 도구가 어떤 역할인지, 문제가 생기면 어디를 확인해야 하는지 정도의 전체 그림이면 됩니다. 그래야 AI가 잘하고 있는지 판단하고, 잘못된 방향으로 갈 때 멈춰 세울 수 있습니다.

꼭 알아야 할 도구 4개

웹사이트를 실제 서비스로 만들 때 자주 쓰는 도구는 Git, GitHub, Supabase, Cloudflare입니다.

Git과 GitHub

코드를 고치다 새 기능을 넣은 뒤 갑자기 오류가 났다면, 문제가 생기기 전 버전으로 돌아가고 싶어집니다. 회사에서 엑셀 파일을 "최종본, 진짜 최종본, 진짜 최종본 버전 2"처럼 저장해 두는 습관과 같은 필요입니다. Git은 이런 버전 관리를 체계적으로 해 주는 도구이고, GitHub는 Git으로 관리하는 프로젝트를 온라인에 보관⁠·공유⁠·협업하게 해 주는 서비스입니다.

• 레포지토리(repository): 프로젝트 파일과 수정 기록을 함께 보관하는 프로젝트 전용 창고
• 커밋(commit): 지금까지 작업한 파일 상태를 사진 찍듯 이름 붙여 저장하는 중간 저장 지점. 예를 들면 "메인 화면 완성"
• 푸시(push): 내 컴퓨터에 기록한 변경 내용을 GitHub 원격 저장소로 올리는 작업
• 클론(clone): 반대로 GitHub에 있는 프로젝트 전체를 내 컴퓨터로 복사해 오는 작업

용어를 다 외울 필요는 없습니다. "이전 버전으로 돌아가는 기능이 있지 않을까" 하고 떠올릴 수만 있으면, 필요한 작업을 클로드에게 설명했을 때 알맞은 명령어를 찾아 실행해 줍니다.

Supabase

회원 가입, 글쓰기, 댓글 기능을 넣으면 사용자가 쓴 글이 어딘가에 저장돼야 합니다. 그렇지 않으면 새로 고침하거나 다시 접속했을 때 다 사라집니다. 이렇게 눈에 바로 보이지 않지만 웹사이트 뒤쪽에서 꼭 필요한 기능을 백엔드라고 부르고, Supabase는 백엔드를 빠르게 만들게 돕는 클라우드 서비스입니다.

대표 기능은 데이터베이스, 회원 가입과 로그인을 처리하는 인증, 이미지와 파일을 보관하는 스토리지, 실시간 데이터 처리입니다.

왜 빌려 쓸까요. 직접 운영하려면 서버를 준비하고, 데이터베이스를 설치하고, 네트워크와 보안을 설정하고, 계속 유지보수해야 합니다. 개인이나 작은 팀이 처음부터 다 갖추기는 어렵습니다. 같은 역할을 하는 서비스로 아마존 AWS, 구글 Firebase도 있습니다. 실제 사용자가 들어오는 서비스라면 예상 사용자 수, 저장 용량, 트래픽, 보안과 지원 수준, 확장성과 안정성까지 보고 업체를 고릅니다.

배포와 Cloudflare

사이트가 내 컴퓨터에서만 돌면 다른 사람은 접속할 수 없습니다. 완성된 코드를 인터넷에서 계속 실행되는 환경에 올리고 누구나 접속할 주소와 연결하는 과정이 배포입니다. 배포에는 Cloudflare나 Vercel 같은 서비스를 쓸 수 있습니다. Cloudflare에는 Workers와 Pages 같은 배포 기능 말고도 도메인 관리, 전송 속도 개선, 보안 기능이 있습니다.

Cloudflare Workers로 올리면 사이트 주소가 이름.계정.workers.dev처럼 Cloudflare가 주는 하위 주소(서브도메인)로 끝납니다. 누구나 접속할 수 있는 실제 공개 주소이고 학습⁠·테스트 단계라면 이런 무료 주소로 충분합니다. 실제 브랜드나 사업용이라면 기억하기 쉬운 자기 도메인을 사서 연결합니다. 원하는 주소가 이미 누군가에게 선점돼 있는 경우도 많습니다. 도메인 등록 사이트에서 검색해 보면 소유자가 1만 4,350달러에 팔겠다고 내놓은 사례처럼 비싼 매물로 나와 있기도 하니, 이름은 여러 후보를 두고 고릅니다.

배포는 완성된 집을 사람들이 방문할 수 있게 여는 것이고, 도메인은 그 집을 찾아오게 해 주는 주소와 간판입니다.

끌려가지 말고 이유를 묻기

전체 흐름은 이렇게 정리됩니다.

• 일반 대화창에 원하는 것을 편하게 말한 뒤 "내 목표를 클로드 코드가 정확히 이해하고 작업할 수 있는 지시문으로 바꿔 줘"라고 요청한다.
• 완성된 지시문을 클로드 코드에 주되 바로 작업시키지 말고 계획 모드에서 전체 계획부터 세워 달라고 한다.
• 계획을 읽다가 모르는 게 나오면 왜 필요한지, 왜 이 도구인지, 왜 이 방법을 권장하는지 묻는다.

클로드가 권장하는 방법은 대부분 그대로 진행해도 괜찮지만, 왜 권장하는지만큼은 이해하고 넘어갑니다. 시키는 대로 무작정 따라가면 AI에게 끌려가게 되고, 이유를 물으며 따라가면 AI를 부리게 됩니다. 무엇을 만들고 있는지 판단하고 최종 결과에 책임지는 사람은 결국 나입니다.