Claude `아티팩트`로 코딩 한 줄 없이 웹페이지 만들기. 대화만으로 결과물이 나옵니다

Claude `아티팩트(Artifacts)`는 대화창 옆에 실제 결과물을 만들어 바로 보여주는 기능입니다. `이런 페이지 만들어줘`라고 말하면 코딩 없이 웹페이지, 계산기, 차트가 실시간으로 완성됩니다. 마음에 안 들면 대화로 고치면 됩니다. 비개발자도 바로 따라 할 수 있게 3단계로 정리했습니다.

---

`간단한 랜딩페이지 하나 필요한데, 개발자한테 맡기긴 부담스럽고` 이런 고민, 많이들 하십니다. 코딩을 배우자니 막막하고, 외주를 맡기자니 비용과 시간이 듭니다.
그런데 Claude의 아티팩트를 쓰면, 말로 설명하는 것만으로 실제 작동하는 웹페이지가 나옵니다. 코드를 한 줄도 안 봐도 됩니다. AI 좀 하는 아저씨를 운영하며 저도 블로그 소개 페이지나 간단한 도구를 이걸로 뚝딱 만드는데, 직접 해보면 생각보다 훨씬 쉽습니다. 오늘은 그 방법을 처음 하는 분도 따라올 수 있게 풀어드립니다.

▲ 사람이 AI 로봇에게 말로 요청하자 오른쪽 분할 화면에 완성된 웹페이지-브라우저 창-가 바로 뜨는 모습; 왼쪽에서 말하면 오른쪽에 실제 페이지가 나타난다는 아티팩트의 핵심을 직관적으로 표현.

---

📜 Claude `아티팩트`가 뭔가요?

일반 대화에서 Claude는 글로 답합니다. 아티팩트는 다릅니다. 대화창 옆에 별도 창을 열어, 실제로 작동하는 결과물을 만들어 보여줍니다. 글로 `이렇게 만들면 됩니다`가 아니라, 진짜 페이지를 눈앞에 띄워주는 거죠.

· 아티팩트로 만들 수 있는 것

- 웹페이지-랜딩페이지, 소개 페이지 등, 계산기, 간단한 도구, 차트, 다이어그램, 문서, 표, 간단한 게임이나 인터랙티브 콘텐츠
- 가장 큰 장점은 실시간으로 보면서 고칠 수 있다는 것입니다. `버튼 색을 파란색으로 바꿔줘`라고 하면 그 자리에서 바뀝니다.
- 그리고 좋은 소식 하나. 기본적인 웹페이지, 차트, 문서 아티팩트는 무료 사용자도 쓸 수 있습니다. 2026년 기준, 설정에서 `Code execution and file creation`을 켜면 활성화됩니다. 외부 데이터와 실시간 연동되는 고급 아티팩트는 유료 플랜이 필요합니다.

 

---

📜 1. 첫 페이지 만들어보기

아티팩트는 따로 켜는 게 아닙니다. 결과물이 필요한 요청을 하면 Claude가 알아서 아티팩트로 만들어줍니다. 중요한 건 `무엇을, 어떻게`를 구체적으로 말하는 것입니다. 막연하면 막연한 페이지가, 구체적이면 바로 쓸 만한 페이지가 나옵니다. 아래처럼 빈칸을 채워 요청해보세요.

[복사해서 쓰세요]
🗣prompt;
내 [블로그/제품/서비스]를 소개하는 간단한 랜딩페이지를 만들어줘.
- 이름 [예; AI 좀 하는 아저씨]
- 소개 문구 [예; AI와 마케팅 실전 노하우를 전합니다]
- 꼭 넣을 버튼 [예; "블로그 보러가기"]
- 색감 [예; 깔끔한 네이비와 흰색]
- 분위기 [예; 신뢰감 있고 미니멀하게]
- 모바일에서도 잘 보이게 만들어줘

몇 초 안에 오른쪽 창에 실제 페이지가 나타납니다. 글이 아니라, 진짜 눈으로 확인할 수 있는 페이지가요. 처음 이 장면을 보면 "어, 이게 되네?" 싶습니다. 
빈칸을 꼼꼼히 채울수록 좋습니다. 이름, 문구, 색감, 분위기를 구체적으로 줄수록 한 번에 마음에 드는 결과가 나옵니다. 귀찮아도 이 빈칸을 채우는 게, 나중에 수십 번 고치는 것보다 훨씬 빠릅니다.

▲ 이 이미지는 제가 위의 프롬프트를 Claude에 입력하고, 15초 후에 Claude가 띄워준 아티팩트입니다.

---

📜 2. 대화로 페이지 고치기

첫 결과물이 100% 마음에 들 필요는 없습니다. 대화로 계속 다듬으면 되고, 이게 아티팩트의 진짜 강점입니다. 디자인 지식이 없어도 됩니다. `이건 좀 별로다, 저렇게 바꿔줘`만 반복하면 점점 원하는 모습에 가까워지거든요.

🗣 수정할 때는 이런 식으로 요청하면 됩니다
- 제목을 더 크고 굵게 만들어줘
- 버튼을 화면 가운데로 옮겨줘
- 배경에 부드러운 그라데이션 넣어줘
- 소개 문구 아래에 핵심 키워드 3개를 작은 태그로 넣어줘
- 전체적으로 더 고급스러운 느낌으로 바꿔줘

▷ 말할 때마다 그 자리에서 바뀝니다. 완성된 아티팩트는 코드를 복사하거나, 공유 링크로 다른 사람에게 보여줄 수 있습니다. 직접 서버에 올려서 실제 웹사이트로 쓸 수도 있습니다.

▲ 세 개의 웹페이지 미리보기가 왼쪽에서 오른쪽으로 갈수록 점점 다듬어지고, 사이사이 짧은 수정 요청 말풍선이 있는 모습; 대화를 반복할수록 페이지가 완성에 가까워진다는 메시지를 표현.

---

 

📜 3. 블로거·마케터의 활용법

아티팩트를 막연히 신기한 기능으로 두면 안 쓰게 됩니다. 구체적인 쓸모를 알아야 손이 가죠. 블로거·마케터라면 이렇게 활용할 수 있습니다.

· 소개 랜딩 페이지
- 제품, 서비스, 뉴스레터의 소개 페이지를 만듭니다
· 인터랙티브 계산기
- `수익 계산기`, `시간 절약기`같은 도구를 만듭니다
· 비교 차트 시각화
- 요금제 비교표, 제품 비교 시각화 자료를 만듭니다
· 퀴즈나 진단 도구
- 당신에게 맞는 AI 툴 진단 같은 콘텐츠를 만듭니다
· 블로그 시각 자료
- 시각 차트, 다이어그램, 인포그래픽 등을 만듭니다

▷ 특히 블로그에 넣을 인터랙티브 콘텐츠; 계산기, 진단 도구.는 독자의 체류 시간을 늘리는 데 효과적입니다. 독자가 직접 클릭하고 입력하며 노는 콘텐츠는, 그냥 읽고 지나가는 글보다 오래 머물게 하거든요. 이런 걸 코딩 없이 만들 수 있다는 게 아티팩트의 진짜 가치입니다.

▷ 실전 팁; 진단·계산기 같은 도구는 만든 뒤 공유 링크나 코드로 내 블로그에 삽입할 수 있습니다. `내 독자가 직접 해볼 수 있는 무언가`를 하나 만들어두면, 글의 격이 달라집니다.

---

📜 결론; `만들 줄 안다`의 의미

예전엔 웹페이지를 만들려면 코딩을 배워야 했습니다. 이제는 `무엇을 원하는지 명확하게 말하는 능력`만 있으면 됩니다. 아티팩트는 코딩의 진입장벽을 없앴고, 아이디어가 있는 사람이 바로 결과물을 만들 수 있는 시대를 열었습니다.
완벽하지 않아도 괜찮습니다. 일단 만들고, 대화로 고쳐가면 됩니다. 그게 아티팩트의 방식입니다.

---

⚠️힘듦주의; "말로 하면 페이지가 나온다"는 마법 같지만, 막상 해보면 '무엇을 원하는지 명확하게 말하는 것'이 생각보다 어렵습니다. 머릿속 이미지를 구체적인 말로 옮기는 게 핵심인데, 이게 안 되면 아무리 좋은 도구라도 평범한 결과만 나옵니다. 색감, 레이아웃, 분위기를 어떤 단어로 요청해야 원하는 게 나오는지는 몇 번 해봐야 감이 옵니다.
그리고 `예쁜 페이지`와 `목적을 달성하는 페이지`는 다릅니다. 방문자가 버튼을 누르게 만드는 구성, 우리 브랜드에 맞는 톤은 도구가 아니라 전략의 영역이거든요. 도구는 누구나 쓰지만, 그걸로 성과를 내는 건 또 다른 일입니다.

---

💯 ?? 자주 묻는 질문ㅡ FAQ

Q. 정말 코딩을 아예 몰라도 되나요?
A. 네, 한 줄도 몰라도 됩니다. 코드는 Claude가 만들고, 우리는 결과물을 보며 `이렇게 바꿔줘`라고 말만 하면 됩니다. 코드 화면은 열어볼 수도 있지만, 안 봐도 페이지를 완성하는 데 전혀 지장 없습니다.

Q. 무료로 쓸 수 있나요?
A. 기본적인 웹페이지, 차트, 문서 아티팩트는 무료 플랜에서 쓸 수 있습니다. 설정에서 관련 기능 `Code execution and file creation`을 켜면 됩니다. 다만 외부 데이터와 실시간으로 연동되는 고급 아티팩트나 영구 저장 기능은 유료 플랜이 필요합니다. 처음 경험해보는 용도로는 무료로 충분합니다.

Q. 만든 페이지를 실제 웹사이트로 쓸 수 있나요?
A. 가능합니다. 완성된 아티팩트는 코드를 복사하거나 공유 링크로 내보낼 수 있고, 직접 서버에 올려 실제 사이트로 운영할 수도 있습니다. 다만 본격적인 사이트라면 도메인, 호스팅 등 별도 준비가 필요하니, 아티팩트는 `빠른 시제품`, `간단한 페이지`에 가장 강하다고 보시면 됩니다.

Q. 한 번에 원하는 페이지가 안 나와요.
A. 정상입니다. 아티팩트는 한 방이 아니라 대화로 완성하는 도구예요. 첫 결과가 아쉬우면 `제목 키워줘`, `색 바꿔줘`처럼 구체적으로 이어 요청하세요. 그리고 처음 요청할 때 이름, 색감, 분위기를 꼼꼼히 채울수록 처음부터 더 가까운 결과가 나옵니다.

Q. 어떤 걸 만들어보면 좋을까요?
A. 처음이라면 `내 블로그 또는 사업 소개 페이지`가 가장 쉽고 효과가 바로 보입니다. 익숙해지면 독자가 직접 써볼 수 있는 계산기나 진단 도구로 넓혀보세요. 블로그 체류 시간을 늘리는 데 특히 좋습니다.

---

마치며; 거창할 필요 없습니다. Claude에 `내 블로그 소개하는 간단한 페이지 만들어줘`라고 한 줄만 입력해보세요. 오른쪽에 실제 페이지가 뜨는 걸 보면, 가능성이 확 와닿을 겁니다. 거기서부터 대화로 다듬어가면 됩니다.
아티팩트의 핵심은 코딩 실력이 아니라 원하는 걸 말로 풀어내는 힘입니다. 그 힘은 몇 번 써보면 금방 늡니다. Claude를 더 깊이 활용하는 법이 궁금하다면 Claude 프롬프트 잘 쓰는 법도 함께 보세요. 원하는 걸 정확히 말하는 요령이 곧 아티팩트를 잘 쓰는 요령이기도 하니까요.

---

AI 아저씨; AI로 먹고사는 법을 직접 해보고 기록하는 아저씨입니다. 전자책·뉴스레터·자동화·콘텐츠 수익화를 몸으로 통과하며, 과장 없이 '되는 것과 안 되는 것'을 솔직하게 나눕니다. 'AI 좀 하는 아저씨'에서 AI 부업·수익화의 전 과정을 단계별로 풀어갑니다.