Claude Artifacts 활용법 — 코딩 몰라도 앱 만드는 법

매주 엑셀 보고서를 손으로 정리하고, 같은 내용을 파워포인트로 옮기고, 또 PDF로 변환하는 반복 작업. 저도 그랬어요. 그러다 Claude Artifacts를 알게 됐고, 이제는 그 작업 일부를 채팅창 안에서 처리합니다.

그리고 며칠 전엔 재미 삼아 색깔 매칭 퍼즐이랑 테트리스까지 만들어봤어요. 정말 코드 한 줄 안 썼습니다. 직접 해보니 어디까진 되고 어디부턴 한계인지 감이 와서, 그 경험을 함께 정리해봤습니다.

---

이게 뭔데요?

Claude Artifacts가 정확히 뭔가요?

Claude 채팅창 안에서 HTML·CSS·JavaScript 결과물을 바로 미리보기하고 다운로드할 수 있는 기능입니다. 별도 설치나 개발 환경 세팅이 필요 없어요. Claude한테 “이런 거 만들어줘” 하면, 오른쪽 패널에 결과물이 뜹니다.

저 처음 썼을 때 솔직히 좀 당황했어요. 프롬프트 하나 넣었더니 실제로 클릭되는 버튼이 달린 페이지가 생겨서요. “내가 지금 코드를 만든 건가?” 싶은 묘한 기분이 있었습니다.

---

직장인 활용 3가지

업무에 바로 쓰는 활용 사례 3가지

1. 랜딩페이지 — 기획안을 실물로 보여주기

팀장한테 신규 서비스 기획안을 설명할 때, 텍스트 문서보다 실제 페이지 형태로 보여주면 반응이 다릅니다. 저는 이렇게 씁니다.

"OO 서비스 랜딩페이지를 만들어줘.
상단에 헤드라인, 중간에 기능 3가지 소개,
하단에 CTA 버튼 포함. 색상은 파란 계열로."

1~2분이면 스크롤 가능한 페이지가 나옵니다. 수정도 채팅으로 해요. “버튼 색 바꿔줘”, “문구 이렇게 수정해줘” 하면 바로 반영됩니다. 다만 디자인이 정말 마음에 들 때까지는 보통 4~5번은 주고받게 돼요.

2. 교육용 퀴즈 — 온보딩·사내 교육에 딱

신입 온보딩 자료 만들 때 매번 구글 폼 세팅하는 게 은근히 귀찮잖아요. Artifacts로 퀴즈 페이지를 만들면 정답 체크, 점수 계산까지 한 번에 들어갑니다.

"우리 회사 보안 정책 퀴즈 5문항 만들어줘.
객관식 4지선다, 정답 선택하면 즉시 피드백 표시,
마지막에 총점 보여주는 형태로."

HTML 파일 하나 다운받아서 사내 드라이브에 올려두면 끝입니다. 단, 정답 로직은 꼭 직접 한 번씩 눌러보고 확인하세요. (뒤에 사고 친 얘기 나옵니다.)

3. 마인드맵 — 회의 직후 5분 정리

회의록 텍스트를 붙여넣고 “마인드맵으로 시각화해줘” 하면 됩니다. 노드 구조의 정적 다이어그램이 나오는데, 텍스트로만 공유하는 것보다 훨씬 한눈에 들어와요. 인터랙티브하게 펼치고 접는 형태까지 원한다면 “노드 클릭하면 하위 항목 펼치는 형태로 해줘”라고 추가로 요청해야 합니다.

---

실험기 — 진짜 게임도 되나?

재미로 만들어본 게임 2개 — 진짜 되는지 시험해봤다

업무용 사례만으로는 “코딩 없이 어디까지 되는지” 감이 잘 안 잡혔어요. 그래서 일부러 어려워 보이는 걸 시켜봤습니다. 게임이요.

1. 색깔 매칭 퍼즐 — 첫 시도 3분

처음엔 “게임 만들어줘” 한 줄로 시작했어요. Claude가 “어떤 게임이요?” 하고 묻길래 “퍼즐” → “매칭/색깔 맞추기”로 답했더니, 5단계 레벨 시스템이 들어간 퍼즐이 바로 만들어졌습니다.

• 초급(3×3, 4쌍) → 마스터(6×6, 12쌍) 자동 진행
• 이동 횟수가 적을수록 점수가 높아지는 시스템
• 힌트 버튼 (쓰면 보너스 점수 없음)
• 매칭 실패 시 흔들리는 애니메이션

여기까지 한 번의 프롬프트로 끝났어요. 깜짝 놀랐습니다. 사실 이 정도면 평소 같으면 며칠은 잡고 있을 분량인데요.

2. 테트리스 — 가능할 줄 몰랐다

색깔 매칭이 너무 잘 되니까 욕심이 났어요. “테트리스 만들어줘”라고 던졌습니다. 솔직히 안 될 줄 알았어요. 7종 블록, 회전 로직, 라인 클리어, 충돌 판정, 점수 계산… 머릿속에 정리만 해도 복잡한데요.

그런데 됐습니다. 한 번에. 심지어 들어간 기능이 이렇게 많았어요.

• 표준 7종 테트로미노 (I, O, T, L, J, S, Z) + 색상
• 좌우 이동, 회전, 소프트 드롭, 하드 드롭(Space)
• 고스트 블록 (낙하 위치 미리보기)
• NEXT 블록 미리보기 + 점수·레벨·라인 카운터
• 레벨업에 따른 자동 속도 증가
• 일시정지(P), 게임오버 화면
• 모바일 터치 조작 (스와이프로 이동·회전·하드드롭)

그래서 무슨 의미가 있나요?

업무용 도구를 만들 때 “이 정도 복잡한 건 안 되겠지” 하고 미리 포기하지 마세요. 일단 시켜보면 됩니다. 안 되면 그때 가서 수정 요청을 쌓아가면 돼요. 게임도 되는데, 일정 관리 대시보드나 간단한 계산기, 데이터 시각화는 훨씬 더 잘 됩니다.

---

2026 업데이트

2026 업데이트 기능 — 뭐가 실제로 쓸 만한가

2026년 기준으로 Artifacts에 새로 들어온 기능 3가지를 짚어볼게요. 각각 실무에서 얼마나 쓸 만한지 같이 적습니다.

Persistent Storage(저장) — 만든 Artifact 안에 데이터를 저장해서 다음번에 다시 열어도 유지되게 할 수 있습니다. 예를 들어 간단한 할 일 관리 앱을 만들면, 입력한 항목이 다음 방문에도 남아 있어요. 실제로 가장 자주 쓰게 되는 기능입니다.

AI-Powered Artifacts(AI 내장) — Artifact 안에서 Claude API를 호출할 수 있습니다. “사용자가 텍스트를 입력하면 AI가 요약해주는 미니 도구” 같은 게 가능해요. 팀 내부용 간단한 AI 도구를 만들 때 유용한데, API 사용량은 본인 계정에서 차감됩니다.

MCP Integration(외부 툴 연동) — 외부 서비스(노션·슬랙·구글 드라이브 등)와 연결하는 기능입니다. 가능성은 크지만 세팅이 복잡한 편이라, 처음 쓰는 분이라면 권하지 않습니다.

---

공유는 이렇게

만든 결과물, 팀원과 공유하는 법

Artifacts 패널 오른쪽 상단에 다운로드 버튼이 있어요. HTML 파일로 저장됩니다. 팀원에게 파일로 보내거나, 사내 드라이브에 올려두면 브라우저에서 바로 열립니다. 별도 프로그램 설치가 필요 없어요.

또 다른 방법은 Claude의 공유 링크입니다. Claude.ai에서 Artifact를 게시(publish)하면 URL이 나오는데, 그 링크를 받은 사람도 브라우저에서 바로 사용할 수 있어요. 다만 공개 URL이라 민감한 내용엔 부적합합니다.

---

자주 묻는 질문

---