코딩 몰라도★
3분 만에 업무용 대시보드 초안 만들기
Claude Artifacts 사용법
기획서나 보고서 내용을 정리하다 보면 이런 생각 들죠?
“이걸 표 말고 화면처럼 보여주면 좋을 텐데…”
“업무 현황을 한눈에 보는 대시보드 초안이 있으면 설명하기 쉬울 것 같은데…”
“개발자 도움 없이 시안만 먼저 만들어볼 수 없을까?”
이럴 때 써볼 만한 기능이 바로 Claude Artifacts예요.
Claude Artifacts는 그냥 답변만 길게 써주는 기능이 아니라, 대화 내용과 분리된 전용 창에서 독립형 결과물을 만들어주는 방식이에요. 공식 도움말 기준으로 문서, 코드, 단일 페이지 HTML 웹사이트, SVG, 다이어그램, 인터랙티브 컴포넌트 같은 형태를 만들 수 있어서, “업무용 대시보드 초안”처럼 화면형 결과물을 빠르게 뽑아보기에 잘 맞아요.
완성품을 바로 배포하는 게 아니라, 설명용 시안과 초안을 빠르게 만드는 것!
이번 글에서는 Claude Artifacts로 업무용 대시보드 초안을 만드는 흐름을 5단계로 정리해볼게요.
 |
| 클로드 대시보드 초안 제작 흐름 |
1. 먼저 “무슨 대시보드인지” 한 문장으로 정하기
처음부터 “대시보드 만들어줘”라고 하면 결과가 애매할 수 있어요.
대시보드도 목적이 다 다르거든요.
예를 들면 이런 식으로 나뉩니다.
- 주간 업무 현황 대시보드
- 마케팅 지표 요약 대시보드
- 프로젝트 일정 관리 보드
- 영업 리드 현황 보드
- 고객 문의 처리 현황판
- 블로그 콘텐츠 발행 현황판
그래서 먼저 한 문장으로 정해두는 게 좋아요.
예시:
- “이번 주 팀 업무 현황을 한눈에 보는 내부용 대시보드”
- “블로그 글 발행 현황과 카테고리 분포를 보는 콘텐츠 관리 대시보드”
- “프로젝트 진행률과 마감일을 보는 일정 관리 화면”
핵심은 “예쁜 화면”보다 무엇을 보여줄 화면인지 먼저 정하는 것!
2. 데이터가 없어도 “보여줄 항목”은 미리 적어주기
비전공자가 Artifacts를 쓸 때 가장 좋은 점 중 하나는, 실제 데이터가 완벽하지 않아도 초안 화면을 먼저 만들어볼 수 있다는 거예요.
예를 들어 업무용 대시보드라면 이런 항목을 적어주면 됩니다.
- 전체 업무 수
- 진행 중 업무 수
- 완료 업무 수
- 이번 주 마감 건수
- 담당자별 업무 수
- 프로젝트별 진행률
- 우선순위 높은 업무 리스트
즉, 진짜 중요한 건 숫자보다 화면에 어떤 박스가 들어갈지예요.
Claude에게 이렇게 설명하면 좋아요.
복사해서 쓰는 프롬프트:
“사내용 업무 현황 대시보드 초안을 만들어줘.
코딩을 모르는 사람이 기획 시안으로 볼 수 있게, 깔끔한 단일 페이지 형태로 만들어줘.
화면에는 아래 항목이 들어가면 좋겠어.
- 전체 업무 수
- 진행 중 업무 수
- 완료 업무 수
- 이번 주 마감 업무
- 담당자별 업무 분포
- 프로젝트별 진행률
- 우선순위 높은 업무 목록
샘플 데이터로 채워서 보여주고, 너무 복잡하지 않게 만들어줘.”
이렇게 하면 “뭔가 있어 보이는 시안”이 아니라, 실제로 설명 가능한 초안이 나올 확률이 높아져요.
3. Artifacts로 먼저 “단일 페이지 시안”을 만들기
Claude Artifacts는 복잡한 웹서비스 전체를 만드는 용도보다, 독립형 결과물을 빠르게 만드는 데 강점이 있어요. 공식 도움말에서도 Artifacts 예시로 단일 페이지 HTML 웹사이트, 다이어그램, 인터랙티브 React 컴포넌트 등을 안내하고 있어. 그래서 대시보드 초안은 “한 페이지 시안” 방식으로 요청하는 게 가장 무난합니다.
처음에는 이렇게 요청해보세요.
복사해서 쓰는 프롬프트:
“위 내용을 바탕으로 단일 페이지 대시보드 초안을 Claude Artifacts 형태로 만들어줘.
카드형 KPI 영역, 간단한 차트 영역, 최근 업무 리스트 영역으로 나눠줘.
색상은 깔끔하고 실무용 느낌으로, 지나치게 화려하지 않게 만들어줘.
실제 서비스가 아니라 기획 검토용 시안이라는 점을 고려해서 작성해줘.”
이렇게 요청하면 대개 이런 구조가 나옵니다.
- 상단 제목
- KPI 카드 3~4개
- 막대그래프/도넛차트 느낌 영역
- 최근 업무 리스트
- 프로젝트 진행률 섹션
이 정도만 나와도 회의 때 설명하기 훨씬 쉬워요.
 |
| 업무용 대시보드 초안 |
4. 첫 결과가 마음에 안 들면 “기능 추가”보다 “화면 수정”부터 요청하기
처음 나온 결과가 딱 마음에 들 가능성은 높지 않아요.
그런데 여기서 바로 “로그인 붙여줘”, “DB 연결해줘”, “필터 기능 넣어줘”로 가면 갑자기 난도가 올라갑니다.
초반에는 기능 추가보다 화면 수정 위주로 가는 게 좋아요.
예를 들면 이렇게 요청할 수 있어요.
- “카드 숫자를 더 눈에 띄게 키워줘.”
- “차트 아래에 간단한 설명 문장을 넣어줘.”
- “최근 업무 리스트를 표 형태로 바꿔줘.”
- “상단 색상을 더 차분하게 바꿔줘.”
- “모바일에서도 보기 쉽게 간격을 조정해줘.”
- “프로젝트 진행률을 막대형으로 보여줘.”
Claude가 아티팩트를 만들면 전용 창에서 결과가 표시되고, 수정 요청을 하면 그 창에서 바로 변경 내용을 확인할 수 있어요. 또 버전 선택, 코드 보기, 복사, 다운로드도 가능해서 초안 다듬기가 편한 편입니다.
즉, 처음부터 완성하려 하지 말고:
1차 시안 → 레이아웃 수정 → 문구 수정 → 설명용 초안 완성
이 흐름으로 가는 것!
5. 마지막에는 “설명용 자료”로 바꿔서 써먹기
많은 사람이 여기서 멈춰요.
“오, 화면 나왔네!”
하고 끝내버리죠.
근데 진짜 중요한 건 그다음이에요.
대시보드 초안을 업무 설명 자료로 바꾸는 것이죠.
예를 들어 이렇게 활용할 수 있어요.
1) 회의용 설명 자료
- 현재 필요한 화면이 어떤 구조인지 보여주기
- 어떤 항목이 핵심인지 설명하기
- 개발 요청 전 공감대 만들기
2) 기획서 시각화
- 글로만 설명한 기능을 한 페이지 시안으로 보여주기
- “이런 느낌의 화면”을 빠르게 공유하기
- 외주/협업 전에 방향 정리하기
3) 개인 업무 정리
- 내가 어떤 대시보드를 원하고 있는지 정리하기
- 엑셀/구글시트 데이터를 나중에 어떤 식으로 보여줄지 미리 구상하기
4) 상사·팀원 설득용
- 말로 설명하기 어려운 구조를 화면으로 보여주기
- 우선순위와 필요한 정보 구성을 시각적으로 설명하기
복사해서 쓰는 프롬프트:
“방금 만든 대시보드 초안을 바탕으로,
이 화면의 목적 / 주요 구성 / 기대 효과를 5줄로 설명해줘.
기획 검토 회의에서 바로 읽을 수 있게 간단한 업무 문체로 정리해줘.”
이렇게 하면 화면만 있는 게 아니라, 설명 문장까지 같이 준비할 수 있어요.
 |
| 업무용 대시보드 초안 회의용으로 바꾸기 |
Claude Artifacts 쓸 때 기억할 포인트
Claude Help Center 기준으로 Artifacts는 설정의 Capabilities에서 켜고 끌 수 있고, 생성된 아티팩트는 사이드바 전용 공간에서 관리할 수 있어요. 또 오류가 나면 “Try fixing with Claude” 버튼으로 오류 내용을 복사해 Claude에게 수정 요청할 수도 있습니다.
실제로 쓸 때는 이 점만 기억하면 돼요.
- 처음엔 완성품보다 초안용으로 보기
- 실제 데이터 연결 전 화면 구성부터 확인하기
- 기능보다 레이아웃 수정부터 하기
- 수치와 문구는 내가 다시 검토하기
- 회의용 설명 문장까지 같이 뽑아두기
그리고 가장 중요한 건 이거예요.
Claude가 제품을 대신 만드는 게 아니라, 내가 생각한 화면을 더 빨리 구체화하도록 도와주는 것!
마무리
Claude Artifacts는 코드를 잘 모르는 사람도 화면형 결과물을 빠르게 시도해볼 수 있게 해주는 꽤 유용한 도구예요.
특히 업무용 대시보드처럼 “일단 초안 화면이 있으면 설명이 쉬워지는 작업”에 잘 맞습니다.
정리하면 이렇게 가면 돼요.
- 어떤 대시보드인지 한 문장으로 정하기
- 화면에 들어갈 항목을 먼저 적기
- 단일 페이지 시안으로 만들어보기
- 기능보다 화면 수정부터 요청하기
- 마지막엔 회의용 설명자료로 바꿔 쓰기
코딩 몰라도★ 설명 가능한 대시보드 초안은 충분히 만들 수 있다는 것!
완성 개발이 목적이 아니라,
기획·설명·검토용 시안을 빠르게 만드는 용도로 접근하면 Claude Artifacts를 훨씬 잘 쓸 수 있어요.
◆ 같이 보면 좋은 글
