비개발자가 Claude 아티팩트로 대시보드 v2를 만든 후기
📝 한줄 요약
Claude 아티팩트를 활용해 개인 일상 통합 대시보드(daily-dashboard-v2.jsx) 시제품을 만들고, 노션 기록 연동과 일기(.md) 출력까지 구현해 반복 확인·기록 업무를 간소화했습니다.
바쁘시면 이것만 읽어도 돼요:
사용한 도구와 목표: Claude 아티팩트(프론트엔드 시제품) + Notion으로 일일 기록 자동화 설계
과정 중 깨달은 점: UI·데이터 저장은 프론트 단에서 빠르게 구현하되, 실시간 외부 연동은 제약이 있으니 반자동·수동 트리거로 대체하면 실용적입니다
핵심 해결 방법: Claude 아티팩트로 빠른 프로토타입 제작 → 노션 복사/대리입력으로 기록 흐름 연결
인상적이었던 순간: AI가 사용자 요구를 인터뷰 형태로 정리하고 구현 범위를 명확히 해준 점
확장성: 향후 GitHub Pages 배포 + 백엔드 프록시로 외부 API(시세 등) 안전 연동 가능
🎯 이런 분들께 도움돼요
개인 운영 허브를 빠르게 시제품으로 만들고 싶은 실무자
비개발자지만 반복 업무를 자동화하고 싶은 기획자·팀장
Notion/마크다운 기반 일지 기록을 자동화하려는 사용처
😫 문제 상황 (Before)
아레테는 매일 반복 확인·기록해야 할 항목이 많았습니다(학습·운동·약 복용·자산 체크·일기 등). 기존에는 여러 도구(메모, 스프레드시트, 수동 노션 입력)를 번갈아 사용해야 했고, 일관된 한 화면 허브가 없어 불편했습니다.
🛠️ 사용한 도구
도구명: Claude 아티팩트 (프론트엔드 시제품)
모델/환경: 프로젝트 컨텍스트에서 명시된 Claude/Anthropic 관련 설정(
claude-sonnet-4-20250514참고)기타: Notion(기록 DB), 브라우저 로컬 저장(window.storage), 프론트엔드: React(Tailwind)
🔧 작업 과정
DEVLOG의 작업 순서를 따라 스토리텔링 형식으로 정리합니다.
대시보드 기획·방식 결정
사용자는 이렇게 요청했습니다:
아레테: 매일 반복할 것·확인할 것을 관리하는 대시보드를 만들고 싶다. 시작 방법 제안 요청.
우즈는 인터뷰 형식으로 요구를 정리하고, Claude 아티팩트 기반 시제품 제작을 제안했습니다. 이 과정에서 목표(매일 확인·기록), 주요 항목, 모바일·데스크톱 사용 환경을 명확히 했습니다.
요구사항 확정 (인터뷰 → 기능 목록)
우즈가 사용자에게 질문하고 응답을 정리한 결과, 아래 핵심 기능이 확정되었습니다:
할일(체크리스트), 약 복용 트래커(아침/저녁/취침전)
학습·운동 시간 트래커(하루 목표 60분)
자산 4탭(주식/펀드/퇴직연금/예적금), 예적금 만기 D-day
산행 계획·기록, 독서 위시리스트, 오늘의 클래식 추천
일기 인터뷰 후
.md다운로드(옵시디언용)
우즈: 1라운드 인터뷰 5문항(하루 리듬 / 업무 / 학습 / 건강 / 마음의 양식).
v1 → v2 확장 및 구현
사용자의 확장 요구는 다음과 같았습니다:
아레테 요청: 약복용, 자산 4탭, 산행 계획/기록, 일기(.md 다운로드), 주간 날씨 등 추가
우즈는 daily-dashboard-v2.jsx를 구현해 위 항목들을 반영했습니다. 구현 중 다음 제약을 문서화했습니다:
실시간 증권 시세: 무료·안정적 자동화의 한계 → 반자동(참고조회 + 수동 입력)
구글 캘린더 임베드: 비공개 캘린더 보안 제약 → 바로가기 방식 권장
옵시디언 자동 저장: 브라우저→로컬 파일 직접 쓰기 불가 →
.md다운로드 트리거로 우회
✅ 결과 (After)
Before vs After
항목
Before
After
대시보드 존재 여부
없음 / 여러 도구 분산
한 화면 통합 대시보드(v2) 완성
일기 저장
수동 복사·붙여넣기
AI 인터뷰 → .md 다운로드
자산 관리
수동 계산 및 분산 기록
자산 탭으로 분류·수익률 계산 보조(반자동)
노션 기록
수작업
복사 버튼 혹은 우즈 대리입력으로 간소화
결과물
daily-dashboard-v2.jsx(프론트엔드 시제품)Notion: "일상 대시보드 기록" DB 생성 및 첫 행 입력
DEVLOG.md, 프로젝트 문서화 완료
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
인터뷰 방식 요구 수집: AI에게 먼저 질문하게 하면 불명확한 요구를 구조화할 수 있습니다.
시제품 우선: 프론트엔드 시제품으로 핵심 흐름을 빠르게 검증한 뒤 외부 연동을 단계적으로 추가하세요.
반자동 트리거: 실시간 연동이 어려운 외부 데이터는 수동 확인 또는 버튼 트리거로 안전하게 처리하세요.
이렇게 하면 안 돼요
민감한 API 키를 프론트엔드에 직접 두지 마세요.
자동화로 모두 해결하려 애쓰지 마세요 — 보안·정책 제약으로 실패할 수 있습니다.
🌍 다른 업무에 적용한다면?
팀 단위 일일 스탠드업 요약 대시보드
고객 온보딩 체크리스트 대시보드
소규모 운영팀의 자산/일정 통합 패널
🚀 앞으로의 계획
구글 캘린더 임베드(가능한 경우) 또는 캘린더 공개 설정 안내
옵시디언 자동 저장을 위한 데스크탑(Claude Desktop + MCP) 연동 탐색
GitHub Pages로 배포하고, 백엔드 프록시로 안전하게 외부 API 연동
📋 재사용 가능한 프롬프트
프롬프트 1: 기능 인터뷰 (요구 수집)
당신은 제품 디자이너입니다. 사용자의 일상 루틴(아침·점심·저녁 활동, 학습 목표, 건강 체크)을 5개 질문으로 인터뷰해서 핵심 요구사항을 정리해 주세요.
프롬프트 2: 노션 기록 자동화 안내
노션에 일일 기록을 자동으로 추가하려 합니다. 자동화 제약(비공개 캘린더, API 권한, 브라우저 파일 제한)에 대해 사용자에게 간단한 대안(복사 버튼, 우즈 대리입력, 백엔드 프록시)을 제안해 주세요.
이미지 추천
"문제 상황" 섹션: 여러 도구(메모·스프레드시트) 사용 화면 스크린샷
"AI와 협업한 과정" 섹션: Claude 대화창 또는 대시보드 편집 화면 스크린샷
"결과" 섹션: 완성된
daily-dashboard-v2.jsx전체 화면 캡처
게시판 업로드 안내
AI_CASE_STUDY.md파일을 열어 미리보기로 확인원하는 이미지들을 추천 섹션에 맞춰 추가
게시판에 복사·붙여넣기 후 이미지 업로드
작성 완료했습니다. 수정할 부분(톤·길이·구성 변경 또는 특정 항목 보강)을 알려주시면 즉시 반영하겠습니다.
