클로드로 홈페이지를 만들려면 Claude 채팅에서 만들고 싶은 한 페이지짜리 홈페이지를 말로 설명하면 됩니다. Claude는 이것을 대화 옆 창에 「아티팩트」로 만들어 보여 주고, 말로 고쳐 달라고 하면 바꿉니다.
2026년 10월 21일 Claude 고객센터 기준으로 채팅에서 아티팩트를 만드는 기능은 Free를 포함한 모든 플랜에 있습니다.
아티팩트는 Claude가 대화와 따로 띄워 주는 결과물입니다. Claude 고객센터와 클로드 코드 공식 문서를 2026년 10월 21일에 직접 읽고, 처음 해 보는 분이 따라 할 순서와 만든 뒤에 할 일을 정리했습니다.
1. 클로드로 홈페이지를 만들 수 있나요?
네. 고객센터는 Claude가 아티팩트로 만들 수 있는 것을 꼽으면서 문서, 코드 조각과 함께 「single-page websites」(한 페이지짜리 웹사이트)를 적어 두었습니다.
그림, 도표, 대시보드, 작은 도구도 같은 목록에 있습니다. 가게 소개나 행사 안내처럼 한 장으로 끝나는 홈페이지가 여기에 맞습니다.
2. 시작 전에 켜 둘 설정 하나
아티팩트가 만들어지지 않으면 설정부터 봅니다. 고객센터는 아티팩트를 쓰려면 「Cloud code execution and file creation」이 켜져 있어야 한다고 적었습니다.
- Free·Pro·Max 플랜 —
Settings > Capabilities - Team·Enterprise 플랜 —
Organization settings > Capabilities
웹의 Claude와 Claude Desktop에서는 아티팩트를 만들고 고치고 공유할 수 있습니다. 휴대폰 앱에서도 만들고 고칠 수 있지만 공유 설정은 웹이나 Desktop에서 바꿔야 합니다.
3. 채팅에서 홈페이지 만드는 순서
채팅창에 바로 요청해도 되고, 템플릿으로 시작해도 됩니다. 고객센터는 메시지 입력창에서 「Output」을 골라 템플릿을 고르거나 「Artifacts」 탭에서 고르는 방법을 안내합니다.
템플릿 가운데 Design의 설명은 이렇습니다.
"Design: Visuals, mockups, prototypes, one-pagers, and landing pages, built with your design system."
시각 자료, 시안, 시제품, 한 장짜리 소개, 랜딩 페이지를 만드는 용도라는 뜻입니다. 랜딩 페이지는 방문자가 처음 들어와 보는 소개 화면입니다. Design 템플릿은 모든 플랜에서 쓸 수 있습니다.
만든 것은 Claude 사이드바의 「Artifacts」 탭에 저장되어 다른 대화에서도 다시 찾을 수 있습니다. 고칠 때는 Claude에게 말로 시키거나, 템플릿으로 만든 것이면 화면에서 직접 고칩니다.
4. 요청은 무엇을 넣을지 구체적으로
요청이 구체적일수록 원하는 홈페이지에 가까워집니다. 클로드 코드 빠른 시작 문서도 「버그 수정」 대신 어떤 상황의 어떤 버그인지 적으라는 예를 들며 요청을 구체적으로 하라고 권합니다.
홈페이지라면 이런 식으로 적어 볼 수 있습니다. 「동네 빵집 소개 한 페이지 홈페이지를 만들어 줘. 맨 위에 가게 이름과 한 줄 소개, 가운데에 대표 빵 세 가지, 맨 아래에 영업시간과 전화번호를 넣어 줘.」
한 번에 다 하려 하지 말고 나눠서 고칩니다. 빠른 시작 문서도 복잡한 작업은 단계로 나누라고 안내합니다. 아티팩트에 오류가 나면 오류 옆의 「Try fixing with Claude」 버튼을 눌러 오류 내용을 Claude에게 보낼 수 있습니다.
5. 클로드 코드로 내 폴더에 파일로 만들기
홈페이지를 내 컴퓨터의 파일로 갖고 싶으면 클로드 코드를 씁니다. 클로드 코드는 내 컴퓨터 폴더 안에서 파일을 직접 만들고 고치는 도구입니다. 작업할 폴더에서 터미널을 열고 claude를 입력한 뒤 홈페이지를 만들어 달라고 말로 시키면 됩니다.
빠른 시작 문서에 따르면 클로드 코드가 변경하기 전에 확인을 요청하면 Yes를 골라 승인합니다. 다만 클로드 코드는 「Pro, Max, Team, Enterprise 또는 Console 계정」이 필요하고 무료 플랜에는 들어 있지 않습니다.
맥에 설치하는 순서는 클로드 코드 설치 mac, 맥북에서 처음 깔기에, 설치가 막힐 때는 클로드 코드 설치 안됨에 정리했습니다.
6. 만든 홈페이지를 다른 사람에게 보여 주려면
아티팩트는 처음에 만든 사람에게만 보입니다. Pro·Max 플랜은 「공유」로 링크를 만들 수 있지만(Free는 예전 레거시 아티팩트 게시만), 고객센터 기준으로 링크를 여는 사람도 Claude 계정이 있어야 합니다. 플랜별 범위는 클로드 웹사이트 배포, 만든 화면 공개하기에 따로 정리했습니다.
계정이 없는 손님도 보는 홈페이지라면 HTML 파일로 내보내 웹사이트로 배포하는 쪽이 맞습니다. 고객센터는 Design으로 만든 것을 「Export」에서 standalone HTML(파일 하나짜리 웹페이지)로 내보낼 수 있다고 적었습니다. 무료 배포 순서는 깃허브로 웹사이트 무료 배포하기에 있습니다.
정리하면 클로드로 홈페이지를 만드는 순서는 이렇습니다.
Settings > Capabilities(Team·Enterprise는Organization settings > Capabilities)에서 Cloud code execution and file creation을 켭니다- 채팅에 원하는 홈페이지를 구체적으로 적거나 Design 템플릿으로 시작합니다
- 말로 나눠서 고치고, 오류가 나면 「Try fixing with Claude」를 누릅니다
- 파일로 갖고 싶으면 클로드 코드로 내 폴더에 만듭니다
- 보여 줄 때는 공유 링크나 HTML 내보내기를 고릅니다
클로드 코드 전체 사용법은 클로드 코드 사용방법 총정리에서 이어서 볼 수 있습니다.
참고자료 (모두 2026년 10월 21일 확인)
- Claude 고객센터 「What are artifacts and how do I use them?」 — support.claude.com/en/articles/9487310
- Claude 고객센터 「아티팩트 공유」 — support.claude.com/ko/articles/9547008
- Claude Code 문서 「빠른 시작」 — code.claude.com/docs/ko/quickstart
- Claude Code 문서 「고급 설정」 — code.claude.com/docs/ko/setup
#홈페이지만들기 #클로드홈페이지 #클로드아티팩트 #바이브코딩 #클로드코드
