개발자 없이 AI로 홈페이지 만들고 무료로 올리기

---

앞선 글들에서 AI로 웹사이트 만드는 법, 바이브 코딩, 무료 도구들을 소개했습니다. 이번 글은 처음부터 끝까지 전체 과정을 한 번에 정리합니다.

"글은 읽었는데 막상 하려니 어디서 시작해야 할지 모르겠다"는 분들을 위한 글입니다.

---

오늘 만들 것

목표: 내 소개 홈페이지 1개
시간: 30분 이내
비용: 0원
결과: 실제 인터넷 주소로 접속 가능한 사이트

---

준비물 체크

시작 전에 아래 세 가지만 준비합니다.

✅ PC 또는 노트북 (스마트폰은 불편)
✅ 이메일 계정 (회원가입용)
✅ 내 소개 내용 (이름, 하는 일, 연락처)

---

1단계 - Claude 접속 (5분)

claude.ai 에 접속합니다. 구글 계정으로 바로 가입 가능합니다.

로그인 후 새 대화를 시작하고 아래 내용을 입력합니다. 대괄호 안을 본인 내용으로 바꾸세요.

나만의 홈페이지를 만들어줘.

이름: [홍길동]
직업/소개: [프리랜서 번역가, 영어/일본어 전문]
보여줄 내용:
  - 간단한 자기소개
  - 제공 서비스 3가지 [영어번역, 일본어번역, 영상자막]
  - 연락처 [hong@email.com]

디자인 조건:
  - 깔끔하고 전문적인 느낌
  - 배경 흰색, 포인트 컬러 남색
  - 모바일에서도 잘 보이게
  - 부드러운 스크롤 애니메이션

HTML, CSS, JS 한 파일로 만들어줘.

---

2단계 - 코드 저장 (3분)

AI가 코드를 생성하면 코드 블록 우측 상단 복사 버튼을 클릭합니다.

Windows

1. 메모장 실행
2. 붙여넣기 (Ctrl+V)
3. 파일 → 다른 이름으로 저장
4. 파일 형식: 모든 파일
5. 파일명: index.html
6. 저장

Mac

1. TextEdit 실행
2. 포맷 → 일반 텍스트로 변환
3. 붙여넣기 (Cmd+V)
4. 파일명: index.html 로 저장

---

3단계 - 브라우저로 확인 (5분)

저장한 index.html 파일을 더블클릭하면 브라우저에서 열립니다.

이 단계에서 수정하고 싶은 부분을 메모해두세요. Claude에게 한꺼번에 요청하는 게 효율적입니다.

수정 요청 예시:
"1. 상단 타이틀 폰트 크게
 2. 서비스 섹션 배경을 연한 회색으로
 3. 하단에 카카오톡 오픈채팅 링크 버튼 추가
 4. 전체적으로 여백 좀 더 넓게"

수정된 코드를 받으면 index.html에 덮어씌우고 브라우저를 F5로 새로고침합니다.

마음에 들 때까지 반복합니다.

---

4단계 - Netlify 회원가입 (3분)

netlify.com 에 접속합니다. 구글 계정으로 바로 가입 가능합니다.

---

5단계 - 업로드 (2분)

로그인 후 대시보드 하단에 이런 영역이 있습니다.

┌─────────────────────────────────┐
│                                 │
│   파일이나 폴더를 여기에 드래그  │
│                                 │
└─────────────────────────────────┘

index.html 파일이 있는 폴더째로 드래그앤드롭합니다. 파일 하나만 올리면 안 되고 폴더를 올려야 합니다.

30초 후 주소가 생성됩니다.

https://wonderful-curie-abc123.netlify.app

---

6단계 - 주소 공유 (완료)

생성된 주소를 복사해서 SNS, 명함, 이메일 서명에 넣으면 됩니다.

나중에 주소를 바꾸고 싶으면 Netlify 대시보드에서 Site settings → Change site name 으로 변경 가능합니다.

https://honggildong.netlify.app  ← 이런 식으로 변경 가능

---

자주 막히는 부분

Q. index.html을 더블클릭했는데 메모장으로 열려요 우클릭 → 다른 앱으로 열기 → Chrome 또는 Edge 선택

Q. Netlify에 올렸는데 깨져 보여요 파일만 올리지 말고 폴더째로 드래그앤드롭하세요. 이미지 파일이 있다면 같은 폴더 안에 있어야 합니다.

Q. 수정하고 싶으면 어떻게 해요 index.html 수정 후 Netlify 대시보드 → Deploys → 폴더 다시 드래그앤드롭하면 자동으로 업데이트됩니다.

Q. 도메인을 내 걸로 바꾸고 싶어요 가비아나 Namecheap에서 도메인 구매(연 1만 원~) 후 Netlify에서 연결하면 됩니다.

---

마치며

Claude 접속 → 프롬프트 입력 → index.html 저장
→ 브라우저 확인 → 수정 반복 → Netlify 업로드 → 완성

개발자 없이, 돈 없이, 30분이면 됩니다.

막히는 부분이 있으면 그것도 Claude에게 물어보세요. "Netlify 업로드가 안 돼" 라고 하면 해결 방법을 알려줍니다.

---