"서버비 0원? 드래그 한 번이면 당신도 웹사이트 오너!"
드디어 마지막 단계다. 지난 여정을 복기해 보자. 우리는 1편에서 클로드와 기획을 마쳤고, 2편에서는 '아티팩트' 기능을 통해 단 1분 만에 디자인과 코딩을 완성했다. 하지만 아직 이 멋진 사이트는 당신의 컴퓨터 화면 속에만 갇혀 있다. 친구에게 자랑하려 해도 보여줄 링크가 없다.
오늘은 복잡한 서버 구축이나 도메인 구매 없이, 돈 한 푼 들이지 않고 10초 만에 내 사이트를 전 세계에 배포(Hosting)하는 방법을 소개한다. 준비물은 우리가 2편에서 만든 '코드' 딱 하나다.
1. 준비 작업: 코드를 파일로 저장하기
클로드 화면 우측에 있는 미리보기(Preview) 창이나 코드 창을 보자. 코드를 내 컴퓨터로 가져오는 방법은 매우 간단하다.
- 방법 A (다운로드 버튼): 아티팩트 창 우측 하단의 'Download' 아이콘을 클릭하면 파일로 바로 저장된다.
- 방법 B (복사 붙여넣기): 'Copy Code'를 누른 뒤, 메모장을 열어 붙여 넣고 저장한다.
💡 테크바이버의 필수 Tip: 파일명은 무조건 'index'
파일을 저장할 때 이름은 반드시 index.html로 해야 한다. 웹 서버는 index라는 이름을 가진 파일을 '대문(홈페이지)'으로 인식하기 때문이다. 다른 이름으로 저장하면 사이트가 열리지 않는다.
2. 배포의 신세계: Netlify(넷리파이)
우리가 사용할 도구는 개발자들 사이에서 '배포의 신'이라 불리는 Netlify다. 개인 포트폴리오 수준의 트래픽은 평생 무료로 제공하며, 사용법이 기가 막히게 쉽다.
Step 1. 회원가입 및 로그인
Netlify 홈페이지에 접속해 'Sign up'을 누른다. 구글 아이디 이외에도 깃허브(GitHub)나 이메일로 간편하게 가입할 수 있다.
Step 2. 드래그 앤 드롭 (Drag & Drop)
로그인 후 메인 화면(Team Overview) 하단을 보면 "Drag and drop your site output folder here"라는 점선 박스가 보인다. 여기에 아까 저장한 index.html 파일이 들어있는 '폴더'를 마우스로 끌어서 툭 던져 넣으면 된다.
Step 3. 배포 완료 및 주소 확인
파일을 놓자마자 로딩 바가 돌더니, 3초 만에 초록색 'Published' 글자가 뜬다. 그리고 그 위에 https://stellar-zuccutto-abc2de.netlify.app 같은 무작위 주소가 생성된다. 클릭해 보자. 방금 필자가 이전 편에서 클로드와 함께 만들었던 화면이 인터넷에서 열린다! 이제 이 주소를 카톡으로 친구에게 보내보자. 스마트폰에서도 완벽하게 접속될 것이다.
3. 조금 더 프로처럼 보이기 (주소 변경)
Netlify가 지어준 이름(fluffy-unicorn...)이 마음에 들지 않는다면? 무료로 바꿀 수 있다.
- [Site configuration] 버튼 클릭
- [Change site name] 메뉴 선택
- 원하는 영문 이름 입력 (예:
my-ai-portfolio)
이렇게 하면 주소가 https://my-ai-portfolio.netlify.app으로 깔끔하게 변경된다. 이 정도면 명함에 넣어도 손색이 없다.
마무리하며: 이제 당신은 '크리에이터'다
총 3편에 걸친 [클로드 웹사이트 만들기 프로젝트]가 끝났다. 우리는 코딩 지식 하나 없이 기획부터 디자인, 개발, 그리고 배포까지 해냈다. 이것이 바로 AI 시대의 생산성이다.
과거에는 개발자에게 수백만 원을 줘야 만들 수 있었던 결과물을, 이제는 아이디어만 있다면 누구나 만들 수 있다. 필자가 포스팅한 포트폴리오 사이트는 이해를 돕기 위한 수단일 뿐이다. AI 시대가 와서 직장이 없어질 것이라고 걱정하는 자도 있지만 필자가 보기에는 이건 엄청난 기회다. 이제 당신의 상상을 실행해 줄 에이전트가 생겼기 때문이다. 자그마한 프로젝트라도 실행해 보자. 당신에게 어떤 새로운 기회를 가져다줄지 아무도 모른다.