클로드코드로 내 웹사이트 만들기

코딩을 배운 적이 없어도 괜찮습니다. 요즘은 클로드 같은 AI에게 한국어로 "이런 화면을 만들어줘"라고 말하면 AI가 대신 코드를 써줍니다. 이렇게 말로 만드는 방식을 바이브코딩이라고 부릅니다. 이 글에서는 개발자들이 실제로 쓰는 도구를 그대로 써서, 오늘 안에 내 웹사이트 한 페이지를 진짜 인터넷 주소에 올리고 친구에게 링크를 보내는 데까지 갑니다.

겁먹지 않아도 됩니다. 나오는 명령어는 전부 그대로 복사해서 붙여넣으면 되고, 어려운 일은 대부분 클로드에게 한국어로 부탁하면 알아서 해줍니다. 우리가 할 일은 순서대로 따라가는 것뿐입니다.

오늘 만드는 흐름

터미널, 클로드 앱, 깃허브, 버셀. 이름은 낯설지만 한 번 익혀두면 앞으로 무엇을 만들든 계속 쓰는 진짜 도구입니다. 오늘 그 네 가지를 한 번씩 다 써봅니다.

준비물

• 윈도우나 맥 컴퓨터 (터미널을 써야 해서 폰으로는 어렵습니다)
• 이메일 주소 하나
• 30분에서 1시간 정도의 여유
• 만들고 싶은 한 페이지가 무엇인지 한 줄 정리 (예: 내 소개 페이지)

깃허브, 버셀, 클로드 계정은 진행하면서 그때그때 만들면 됩니다. 미리 다 가입해 둘 필요는 없습니다.

1. 터미널 열기

터미널은 컴퓨터에 마우스 대신 글자로 명령을 내리는 창입니다. 검은 화면에 글자만 있어서 낯설지만, 우리는 정해진 줄을 복사해 붙여넣기만 할 거라 외울 것은 없습니다.

• 맥: 화면 오른쪽 위 돋보기(Spotlight)를 누르거나 Command+스페이스를 누른 뒤 "터미널" 또는 "Terminal"을 입력해 엽니다.
• 윈도우: 시작 버튼을 누르고 "PowerShell"을 입력한 뒤 나오는 앱을 엽니다.

2. 클로드 앱 설치하기

클로드 앱(Claude Code)은 터미널 안에서 대화하듯 부탁하면 코드를 대신 써주는 도구입니다. 설치는 명령어 한 줄을 복사해 붙여넣고 엔터를 누르면 끝납니다.

맥을 쓰면 아래 줄을 복사해 터미널에 붙여넣고 엔터를 누르세요.

curl -fsSL https://claude.ai/install.sh | bash

윈도우(PowerShell)를 쓰면 대신 이 줄을 붙여넣고 엔터를 누르세요.

irm https://claude.ai/install.ps1 | iex

설치가 끝나면 claude 라고 입력하고 엔터를 누르면 클로드가 시작됩니다.

claude

처음 실행하면 브라우저 창이 열리면서 로그인하라고 합니다. 안내에 따라 Anthropic 계정으로 로그인하면 됩니다. 한 가지 알아둘 점은, 클로드 앱은 유료 구독(Claude Pro 또는 Max)이나 API 크레딧이 있는 계정이 필요하다는 것입니다. 무료 계정만으로는 쓸 수 없습니다.

3. 프로젝트 만들기

프로젝트는 내 웹사이트 파일들이 담길 폴더 하나를 말합니다. 새 폴더를 만들고, 그 안으로 들어간 다음, 그 자리에서 클로드를 켭니다. 아래 세 줄을 한 줄씩 차례로 입력하세요. (클로드가 켜져 있다면 먼저 /exit 를 입력해 빠져나온 뒤 진행합니다.)

mkdir my-site
cd my-site
claude

mkdir my-site 는 my-site 라는 폴더를 만들고, cd my-site 는 그 폴더 안으로 들어가고, claude 는 그 폴더에서 클로드를 켜는 명령입니다. 이제 이 폴더가 우리의 작업 공간입니다.

4. 한국어로 웹사이트 만들기

이제 클로드에게 한국어로 원하는 화면을 말하면 됩니다. 코드는 클로드가 씁니다. 잘 말하는 요령은 세 가지를 담는 것입니다. 누구를 위한 페이지인지, 어떤 내용이 보여야 하는지, 어떤 분위기였으면 하는지. 한 번에 완벽할 필요는 없으니 일단 보내고 결과를 보며 고쳐 나가면 됩니다.

예를 들어 이렇게 부탁할 수 있습니다. 나중에 버셀에 배포할 거라는 말을 넣어두면 클로드가 배포에 맞는 형태로 만들어줍니다.

간단한 내 소개 웹사이트를 만들어줘.
Next.js로 만들고, 한 페이지 안에
맨 위에 내 이름과 한 줄 소개를 크게,
그 아래에 내가 하는 일 세 가지,
맨 아래에 이메일로 연락하는 버튼을 넣어줘.
깔끔하고 밝은 느낌으로, 나중에 Vercel에 배포할 거야.

클로드가 파일을 만들거나 명령을 실행하기 전에 "이렇게 해도 될까요" 하고 허락을 물어봅니다. 내용을 확인하고 허용(Yes)을 누르며 진행하면 됩니다. 다 만들어지면 "로컬에서 실행해서 미리 보여줘"라고 부탁하세요. 클로드가 사이트를 켜고 http://localhost:3000 같은 주소를 알려줍니다. 그 주소를 브라우저에 붙여넣으면 내가 만든 화면이 보입니다.

마음에 안 드는 부분이 있으면 그 부분만 다시 말로 고치면 됩니다. 처음부터 다시 쓸 필요가 없습니다.

5. 깃허브에 올리기

깃허브(GitHub)는 내 코드를 인터넷에 보관하는 창고입니다. 잠시 뒤에 쓸 버셀이 이 창고를 들여다보고 자동으로 배포해 주기 때문에, 먼저 코드를 깃허브에 올려둡니다. 깃허브 계정이 없으면 github.com 에서 이메일로 가입해 두세요. 1~2분이면 됩니다.

올리는 일도 클로드에게 부탁하면 됩니다. 클로드가 켜진 상태에서 이렇게 말하세요.

이 프로젝트를 내 깃허브에 새 저장소로 올려줘.
공개(public)로 만들어줘.

클로드가 코드를 저장(커밋)하고, 깃허브에 새 저장소를 만들고, 업로드까지 대신 해줍니다. 깃허브에 처음 연결하는 거라면 중간에 로그인 안내가 나오는데, 화면에 보이는 대로 브라우저를 열고 짧은 코드를 입력하면 연결됩니다. 다 끝나면 클로드가 github.com/내이름/my-site 같은 주소를 알려줍니다. 그 주소로 들어가 내 코드가 보이면 성공입니다.

6. 버셀에 연결하고 배포하기

버셀(Vercel)은 깃허브에 올린 코드를 진짜 인터넷 주소로 바꿔주는 서비스입니다. 무료로 시작할 수 있습니다. vercel.com 에 접속해 가입하는데, "Continue with GitHub"으로 가입하면 깃허브와 한 번에 연결됩니다.

Import 화면에서는 따로 건드릴 것이 없습니다. Next.js로 만들었다면 버셀이 알아서 인식하므로, 그대로 Deploy 버튼만 누르면 됩니다. 1~2분 기다리면 축하 화면과 함께 my-site-xxxx.vercel.app 같은 주소가 나옵니다. 그 주소를 누르면 내 사이트가 인터넷에 올라가 있습니다.

이제부터가 편합니다. 사이트를 고친 다음 클로드에게 "변경한 내용 깃허브에 올려줘"라고만 하면, 버셀이 그걸 알아채고 자동으로 다시 배포합니다. 매번 버튼을 누를 필요가 없습니다.

더 빠르게 가고 싶다면 깃허브를 거치지 않고 클로드에게 바로 "버셀에 배포해줘"라고 시킬 수도 있습니다. 이때는 처음 한 번 버셀 로그인이 필요한데, 클로드가 안내하는 대로 브라우저에서 로그인하거나, 버셀 계정 설정에서 토큰(API 키)을 발급해 알려주면 됩니다.

7. 링크 공유하기

받은 vercel.app 주소를 친구나 가족에게 보내보세요. 상대방 기기에서도 똑같이 열린다면, 방금 내 첫 웹사이트가 세상에 공개된 것입니다.

막히면

가장 많이 막히는 지점은 정해져 있습니다. 막히는 건 실력 문제가 아니라 처음이라 도구가 낯설어서 그런 것이니, 아래를 참고해 천천히 다시 시도하면 됩니다. 그리고 거의 모든 막힘은 오류 메시지를 그대로 복사해 클로드에게 보여주면 풀립니다.

• 설치 명령이 안 끝나면: 명령어를 한 글자도 빼지 않고 그대로 복사했는지 확인하세요. 그래도 안 되면 화면에 나온 메시지를 복사해 클로드에게 물어보세요.
• claude 를 입력했는데 "명령을 찾을 수 없음"이 나오면: 터미널을 완전히 껐다가 새로 연 뒤 다시 입력해 보세요.
• 깃허브 로그인에서 막히면: 화면에 나온 안내대로 브라우저를 열고 표시된 코드를 입력하면 연결됩니다.
• 버셀 배포가 실패(빨간 표시)하면: 화면의 로그 메시지를 복사해 클로드에게 "이렇게 배포가 실패했는데 고쳐줘"라고 하세요. 대부분 원인을 찾아 고쳐줍니다.

정리

오늘 한 일을 되짚어보면, 터미널에 클로드 앱을 설치하고, 한국어로 말해 웹사이트를 만들고, 깃허브에 올리고, 버셀로 배포해 진짜 인터넷 주소를 받았습니다. 코드는 클로드가 썼고, 우리는 순서대로 부탁하고 확인했을 뿐입니다.

이제부터는 사이트를 고치고 "깃허브에 올려줘" 한마디면 주소가 자동으로 갱신됩니다. 다음 글에서는 이 한 페이지를 좀 더 보기 좋게 꾸미는 방법을 다룹니다. 오늘 받은 vercel.app 주소를 잘 저장해 두세요.