달성률을 동적 인터랙션과 차트로 시각화하는 주간 습관 관리 대시보드를 만듭니다.
사용 방법
매일 실천하고 싶은 주간 습관 3~5개를 준비하세요.
- 프롬프트를 복사하여 Claude에 입력하고 아티팩트로 인터랙티브 앱을 생성합니다.
- 요일별 체크박스를 클릭하며 진행률 차트가 실시간으로 변하는지 확인합니다.
- 로컬 저장 기능(LocalStorage)을 추가하여 데이터를 유지하도록 고쳐봅니다.
복사해서 사용할 프롬프트
주간 습관을 체크하고 달성률을 시각적 차트로 보여주는 반응형 대시보드 앱을 제작해 주세요. [입력] - 목표 습관 목록: [습관 3~5개] - 관리 단위: [월~일 주간 단위] - 메인 테마: [다크모드 또는 라이트모드] - 차트 형태: [원형 진행률 또는 막대 그래프] [진행] - 요일별 체크박스를 누르면 해당 습관의 주간 달성률이 즉시 계산되게 하세요. - 전체 습관의 종합 달성률을 상단 차트로 시각화하세요. - 모든 습관을 완료한 요일에는 축하 애니메이션(폭죽 등) 효과를 넣으세요. - 데이터를 초기화하는 버튼을 포함하세요. [출력] - Claude Artifacts에서 바로 작동하는 인터랙티브 웹 앱 코드 - 모바일과 PC 모두에 최적화된 모던한 디자인 부족한 정보는 추측하지 말고 먼저 질문해 주세요.
사용 예시
[대괄호]를 이렇게 채우면
목표 습관 목록: 아침 물 한 잔, 영양제 먹기, 30분 운동, 독서 10페이지
관리 단위: 월요일부터 일요일까지
메인 테마: 다크모드
차트 형태: 원형 프로그레스 바
이런 결과를 받을 수 있습니다
세련된 다크모드 화면 상단에 '이번 주 목표 달성률 68%'를 나타내는 원형 차트가 위치합니다.
아래에는 4개 습관의 월~일 체크박스 테이블이 놓여있으며, 오늘 날짜에 하이라이트가 들어갑니다.
체크박스를 클릭할 때마다 상단 차트의 수치와 원형 그래프가 부드럽게 상승합니다.
예시는 이해를 돕기 위한 가상 상황이며, 실제 결과는 입력 내용과 AI에 따라 달라집니다.
활용 팁 데이터가 브라우저를 새로고침해도 유지되도록 'LocalStorage 적용'을 추가 요청하면 실제 앱처럼 매일 사용할 수 있습니다.
해시태그
AI의 답변에는 오류나 오래된 정보가 포함될 수 있습니다. 중요한 수치와 사실은 원자료로 확인하고, 개인정보와 회사 기밀은 입력 전에 삭제하세요. 투자·법률·의료 관련 결과는 참고 자료로만 활용하세요.