클로드 디자인·아티팩트로 코딩 없이 웹사이트 만들기
안녕하세요, 깅글렛이에요.
“코딩 하나도 못 하는데 웹사이트를 어떻게 만들어요?” 이 질문, 이제 답이 좀 달라졌어요. 클로드한테 말로 시키면 웹페이지 시안이 그 자리에서 뚝딱 나오거든요.
먼저 하나만 정리하고 갈게요. 검색으로 많이들 찾는 ’클로드 디자인’은 돈을 내야 쓰는 신제품이고, 지금 무료로 당장 따라 할 수 있는 건 ’클로드 아티팩트’라는 기능이에요. 이 둘이 헷갈려서 “결국 돈 내야 하는 거 아냐?” 하고 포기하는 분이 많은데, 그럴 필요 없어요.
발표자료 표지 한 장, 동아리 소개 페이지, 포트폴리오 한 장이 급하게 필요할 때 특히 쓸모 있어요. 제가 직접 만들어본 순서 그대로, 클릭 하나까지 풀어볼게요.
클로드 디자인과 아티팩트, 이름이 왜 두 개일까요
결론부터 말하면 둘은 비슷하면서도 다른데, 하나는 무료고 하나는 유료예요.
’클로드 아티팩트(Artifacts)’는 2024년 6월에 나온 클로드의 기본 기능이에요. 무료 요금제를 포함해서 Pro, Max, Team까지 모든 요금제에서 그냥 쓸 수 있어요. 반면 ’클로드 디자인(Claude Design)’은 2026년 4월 17일에 앤트로픽(클로드 만든 회사)이 새로 내놓은 별도 제품이에요. 이건 Claude Pro(월 3만 원) 이상 구독자만 쓸 수 있고, 무료 요금제는 빠져 있어요.
📖 아티팩트란? 클로드한테 웹페이지나 코드 같은 걸 만들어달라고 하면, 채팅창은 그대로 두고 오른쪽에 결과물이 따로 뜨는 전용 창이에요. 거기서 바로 보고 고칠 수 있어요.
그러니까 “코딩 없이 웹사이트 시안 만들기”를 지금 당장 공짜로 해보고 싶으면 아티팩트부터 시작하면 돼요. 클로드 디자인은 여기서 한 단계 더 욕심날 때 올라가는 유료 도구고요. 참고로 클로드 디자인은 아직 ‘베타(정식 출시 전 시험 공개)’ 단계예요.
정리하면 이래요. 이 표만 기억하면 다시는 안 헷갈려요.
아티팩트로 웹페이지 만드는 5단계
이제 무료로 되는 아티팩트로 직접 만들어볼게요. 준비물은 클로드 계정 하나뿐이에요. 참고로 아티팩트는 아이폰·안드로이드 앱에서도 볼 수 있게 됐지만, 화면이 작아서 미리보기·수정은 컴퓨터로 하는 게 훨씬 편해요.
순서는 딱 다섯 단계예요.
- 요청하기 — 채팅창에 만들고 싶은 걸 그냥 문장으로 써요. “카페 소개 페이지 하나 만들어줘. 메뉴, 사진, 오시는 길 넣어서” 이런 식으로요.
- 자동으로 창이 뜸 — 클로드가 15줄 넘는 결과물을 만들면 대화창 오른쪽에 전용 창이 저절로 열려요. 여기 웹페이지가 나타나요.
- 미리보기 ↔ 코드 전환 — 그 창 위쪽에서 실제 화면(미리보기)과 코드를 오갈 수 있어요. 코딩 몰라도 미리보기만 봐도 돼요.
- 고쳐달라고 요청 — 마음에 안 들면 “배경 파란색으로 바꿔줘”, “메뉴 3개로 줄여줘”라고 말하면 새 버전이 다시 그려져요.
- 게시(Publish) — 완성되면 게시 버튼을 눌러 공개 링크를 만들어요. 이 링크를 아는 사람은 누구나 볼 수 있어요.
말로만 보면 어려워 보여도, 실제로는 채팅하듯 대화만 이어가면 돼요. 아래 흐름도 한 장으로 먼저 보고 갈게요.
첫 화면은 이렇게 생겼어요. 왼쪽 채팅에 요청을 넣으면, 오른쪽에 결과 창이 붙는 구조예요.
오른쪽 창 위에는 미리보기와 코드를 바꿔 보는 버튼이 있어요. 여기서 미리보기를 누르면 진짜 웹페이지처럼 보여요.
이 부분 고쳐줘“ 한마디로 새 버전, 그리고 공개 링크까지
아티팩트가 진짜 편한 건 수정할 때예요. 처음부터 완벽하게 안 나와도 괜찮거든요.
일단 대충 만들어놓고 같은 대화에서 계속 다듬으면 돼요. “제목 글씨 더 크게”, “사진 자리를 위로 올려줘”, “메뉴를 3개로 줄여줘” 이렇게 말할 때마다 클로드가 이전 버전을 기반으로 새로 그려줘요. 포토샵 같은 걸 배울 필요가 없어요. 그냥 옆 사람한테 부탁하듯 말하면 되니까요.
✍️ 저는 동호회 모임 안내 페이지를 이걸로 만들어봤는데, 처음엔 색이 너무 칙칙하게 나왔어요. “좀 밝고 산뜻한 느낌으로 다시”라고 한 줄 던졌더니 분위기가 확 바뀌더라고요. 대여섯 번 왔다 갔다 하니까 그럴듯해졌어요.
이렇게 다듬어서 마음에 들면 게시 버튼으로 공개 링크를 만들 수 있어요. 링크를 받은 사람은 로그인 없이 바로 열어볼 수 있고요. 다른 사람이 그 페이지가 마음에 들면 자기 버전으로 복사해서 고쳐 쓰는 것도 돼요.
한 가지 알아둘 점은 있어요. 이 공개 주소는 claude.site라는 클로드 주소로 고정돼요. 페이지 위쪽에 “클로드로 만들었다”는 안내 바도 같이 붙고요. 그래서 회사 이름이 들어간 나만의 도메인(예: mycafe.com) 주소로 바꾸는 건 아티팩트 자체로는 안 돼요. 이건 뒤에서 클로드 디자인 얘기할 때 다시 짚을게요.
아티팩트로 되는 것과 안 되는 것
솔직하게 짚고 갈 부분이 있어요. 아티팩트는 시안·초안 만드는 데 최적화된 도구예요. 만능은 아니니, 그걸 알고 쓰면 실망할 일이 없어요.
되는 것부터 볼게요. 단일 웹페이지, 버튼 눌러 반응하는 인터랙티브 화면(React, 리액트라는 웹 기술로 만들어져요), 그림(SVG), 순서도·다이어그램, 그리고 워드·PPT·엑셀·PDF 같은 다운로드 파일까지 만들 수 있어요. 차트나 아이콘 같은 것도 따로 설치 없이 바로 들어가요.
반대로 안 되는 것도 분명해요. 이 세 가지는 미리 알아두면 좋아요.
- 입력한 값이 저장 안 돼요. 브라우저 저장 기능(localStorage)이 막혀 있어서, 새로고침하면 적어둔 내용이 날아가요.
- 외부 서비스 연결이 불안정해요. 다른 사이트의 데이터를 실시간으로 불러오는 건 격리된 실행 환경(샌드박스) 때문에 잘 안 될 수 있어요.
- 커스텀 도메인은 안 돼요. 주소가 claude.site로 고정돼서 나만의 도메인으로는 못 바꿔요.
그래서 결제나 회원가입 같은 진짜 서비스를 통째로 만들기엔 무리예요. 대신 발표용 시안, 포트폴리오 한 장, 아이디어를 눈으로 보여주는 데모(시연용 초안)로는 정말 빠르고 깔끔해요. 이 선만 알고 쓰면 충분히 값을 해요.
무료로 부족하면, 클로드 디자인(유료)이 한 단계 위
아티팩트를 써보다가 “좀 더 제대로 된 디자인 도구가 있으면” 싶어지면, 그때가 클로드 디자인을 볼 타이밍이에요.
클로드 디자인은 앞에서 말한 것처럼 Pro(월 3만 원) 이상이면 추가 요금 없이 쓸 수 있어요. 구독에 이미 포함돼 있거든요. 만드는 것도 한 단계 위예요. 화면 뼈대를 잡는 와이어프레임(설계 초안 스케치), 발표용 피치덱(제안 슬라이드), 소개 한 장짜리 랜딩페이지 같은 걸 더 완성도 높게 뽑아줘요.
가장 큰 차이는 두 가지예요. 하나는 캔바(Canva) 연동이에요. 클로드 디자인 결과물을 캔바로 보내서 마우스로 끌어다 놓으며(드래그 앤 드롭) 색을 바꾸고 요소를 옮길 수 있어요. 코드를 다시 만들 필요가 없죠. 게다가 캔바를 거치면 아티팩트로는 막혔던 나만의 도메인 웹사이트로 게시하는 길도 열려요.
또 하나는 클로드 코드(Claude Code) 연동이에요. 디자인을 다 잡은 뒤 개발자에게 넘기는 ’핸드오프 번들’로 정리해주거든요. 시안에서 실제 완성품까지 이어가는 흐름이라, 개발자와 같이 일하는 분한테 특히 유용해요.
✍️ 저는 아직 무료 아티팩트만으로도 웬만한 시안은 다 나와서, 클로드 디자인은 캔바로 이어서 다듬고 싶을 때 눈여겨보는 중이에요. 발표자료를 자주 만드는 분이라면 이 조합이 꽤 편할 것 같더라고요.
한 가지만 솔직하게. 클로드 디자인의 한국어 지원 여부는 아직 공식으로 확인된 게 없어요. 다만 클로드 대화 자체는 한국어로 잘 되니까, 못 쓴다고 단정할 필요는 없어요. 일단 무료 아티팩트로 감을 잡고, 필요할 때 올라가는 순서를 추천해요.
깅글렛 한줄평
💡 좋은 점: 코딩 한 줄 몰라도 채팅하듯 말만 하면 웹페이지 시안이 나와요. 무료 아티팩트만으로도 발표자료·소개 페이지는 충분해요.
⚠️ 아쉬운 점: 입력값 저장·나만의 도메인이 안 되니, 시안·데모용으로 선을 긋고 써야 해요.
마무리
정리하면, 검색으로 많이 뜨는 ’클로드 디자인’에 겁먹을 필요 없어요. 무료 아티팩트부터 열어서 “이거 만들어줘” 한마디 던져보세요. 오늘 저녁에 소개 페이지 한 장 정도는 금방 나와요.
※ 본 글은 2026년 7월 기준 정보를 바탕으로 작성됐어요. 기능·요금제·화면 구성은 추후 변경될 수 있어요.