클로드로 홈페이지 만들기
Claude Code & Claude Design으로
홈페이지 만드는 방법
AI와 함께 아이디어부터 배포까지, 빠르고 쉽게 나만의 홈페이지를 완성하세요!
준비하기
- Claude 계정 생성 및 로그인
- VS Code 또는 Cursor 설치
- Claude Code 확장 프로그램 설치
- 터미널에서 claude 명령어로 로그인
$ claude Welcome to Claude Code! /help 를 입력하면 도움말을 볼 수 있습니다. > _
- 접속: design.claude.ai
- 원하는 홈페이지 타입 선택
- 색상, 분위기, 레이아웃 등 요구사항 입력
- 여러 시안 생성 후 마음에 드는 디자인 선택
- PNG / Figma / HTML(베타)로 내보내기
포트폴리오 비즈니스 Landing Page 블로그
디자인 시안 만들기
- 원하는 홈페이지 타입 선택 및 요구사항 설명
- 색상, 분위기, 레이아웃 등 세부사항 입력
- 여러 시안을 생성하고 마음에 드는 디자인 선택
- 이미지/컴포넌트로 내보내기
모던하고 미니멀한 개인 포트폴리오 홈페이지 디자인을 만들어주세요.
메인 컬러는 네이비와 블루톤으로, 깔끔한 타이포그래피와 여백을 활용한 레이아웃으로 부탁드립니다.
섹션은 히어로, 스킬, 포트폴리오, 스킬, 연락처로 구성해주세요.
프로젝트 생성 및 설계
- 새 프로젝트 폴더 생성
- 프로젝트 구조 설계 요청
- 기술 스택 선택 (HTML/CSS/JS, React, Vue 등)
- 메이지 구성 및 파일 구조 확정
다음 요구사항으로 홈페이지 프로젝트 구조를 설계해줘.
– 5개 섹션: Hero, About, Portfolio, Skills, Contact
– 반응형 디자인
– 순수 HTML, CSS, JavaScript 사용
– 각 파일의 역할도 설명해줘.
my-website/ ├── index.html # 메인 페이지 ├── assets/ │ ├── images/ # 이미지 파일 │ └── icons/ # 아이콘 파일 ├── css/ │ └── style.css # 스타일 ├── js/ │ └── script.js # 인터랙션 └── README.md # 프로젝트 설명
코딩 및 구현
- 디자인을 코드로 구현 요청
- 디자인 이미지/시안 참고하여 마크업 및 스타일링
- JavaScript로 인터랙션 기능 추가
- 반응형(모바일/태블릿) 화면 지원
- 코드 리뷰 및 개선
첨부된 디자인을 참고해서 index.html, style.css, script.js를 작성해줘. 반응형으로 구현하고, 스크롤 애니메이션과 모바일 메뉴도 포함해줘.
# portfolio_design.png 첨부 후 > 이 디자인을 HTML/CSS/JS로 구현해줘 📎 portfolio_design.png
실행 및 테스트
- Live Server 또는 npm run dev로 실행
- 다양한 화면 크기에서 테스트
- 기능 및 호환성 확인
- 문제 발생 시 Claude Code에게 수정 요청
$ npx http-server Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.2:8080 Hit CTRL-C to stop the server
배포하기
홈페이지를 인터넷에 올리는 방법은 크게 두 가지입니다. 별도 서버가 없는 입문자라면 배포 플랫폼을, 웹호스팅·클라우드 서버·개인 NAS를 보유한 경우라면 직접 서버에 올리는 방식을 사용합니다.
- ·별도 서버·호스팅 계약 불필요
- ·GitHub에 코드 올리면 자동으로 빌드 & 배포
- ·소규모 정적 사이트는 무료로 운영 가능
- ·단점: DB·백엔드가 필요한 동적 사이트에는 부적합
▲ Vercel 추천
- GitHub 저장소 연결
- 프로젝트 선택
- Deploy 클릭
Netlify
- GitHub 연결
- Build 확인
- Deploy
GitHub Pages
- Settings → Pages
- Branch(main)
- Save
- ·AWS, Cafe24, 가비아 등 웹호스팅/클라우드 서버 직접 이용
- ·시놀로지 NAS 등 개인 서버로도 호스팅 가능
- ·FTP/SFTP 또는 SSH로 파일을 서버에 직접 업로드
- ·Node.js·Python 백엔드, DB 연동 등 동적 웹앱도 자유롭게 운영
- ·서버 관리·보안 설정은 직접 해야 하지만 자유도가 훨씬 높음
# SFTP로 파일 업로드 (FileZilla 등) 로컬 폴더 → 서버 /var/www/html/ # SSH 접속 후 Node.js 앱 실행 $ pm2 start app.js --name my-site $ pm2 save # 도메인 연결 후 완료! https://your-domain.com ✓
| 배포 플랫폼 | 직접 서버 배포 | |
|---|---|---|
| 대상 | 서버 없는 입문자 | 호스팅·서버·NAS 보유자 |
| 비용 | 소규모 무료 | 서버 비용 별도 |
| 백엔드/DB | 제한적 | 자유롭게 가능 |
| 배포 방법 | GitHub push → 자동 | FTP/SSH 업로드 |
| 서버 관리 | 플랫폼이 대신 | 직접 관리 |
🎉 배포 완료!
어떤 방식을 선택하든, 이제 세상에 당신의 홈페이지가 공개되었습니다!
https://your-domain.com💬 구체적으로 요청하기
원하는 결과를 얻으려면 구체적이고 상세하게 요청하세요. 막연한 요청보다 세부사항을 포함할수록 결과물의 완성도가 높아집니다.
🔄 반복적으로 개선하기
시안을 바탕으로 계속 수정하고 개선하면 완성도가 높아집니다. AI와 주고받으며 단계적으로 퀄리티를 올려가세요.
📚 코드 학습에도 활용
Claude Code의 설명을 통해 코드를 배우며 성장할 수 있습니다. 단순 생성이 아닌 이해와 학습을 병행해 보세요.
🔒 보안 및 최적화
민감정보 관리와 성능 최적화도 Claude Code와 함께! 배포 전 보안 체크리스트를 꼭 확인하세요.