비개발자가 Claude 아티팩트로 대시보드 v2를 만든 후기

비개발자가 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

결과물

• daily-dashboard-v2.jsx (프론트엔드 시제품)

• Notion: "일상 대시보드 기록" DB 생성 및 첫 행 입력

• DEVLOG.md, 프로젝트 문서화 완료

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 인터뷰 방식 요구 수집: AI에게 먼저 질문하게 하면 불명확한 요구를 구조화할 수 있습니다.

2. 시제품 우선: 프론트엔드 시제품으로 핵심 흐름을 빠르게 검증한 뒤 외부 연동을 단계적으로 추가하세요.

3. 반자동 트리거: 실시간 연동이 어려운 외부 데이터는 수동 확인 또는 버튼 트리거로 안전하게 처리하세요.

이렇게 하면 안 돼요

1. 민감한 API 키를 프론트엔드에 직접 두지 마세요.

2. 자동화로 모두 해결하려 애쓰지 마세요 — 보안·정책 제약으로 실패할 수 있습니다.

🌍 다른 업무에 적용한다면?

• 팀 단위 일일 스탠드업 요약 대시보드

• 고객 온보딩 체크리스트 대시보드

• 소규모 운영팀의 자산/일정 통합 패널

🚀 앞으로의 계획

• 구글 캘린더 임베드(가능한 경우) 또는 캘린더 공개 설정 안내

• 옵시디언 자동 저장을 위한 데스크탑(Claude Desktop + MCP) 연동 탐색

• GitHub Pages로 배포하고, 백엔드 프록시로 안전하게 외부 API 연동

📋 재사용 가능한 프롬프트

프롬프트 1: 기능 인터뷰 (요구 수집)

당신은 제품 디자이너입니다. 사용자의 일상 루틴(아침·점심·저녁 활동, 학습 목표, 건강 체크)을 5개 질문으로 인터뷰해서 핵심 요구사항을 정리해 주세요.

프롬프트 2: 노션 기록 자동화 안내

노션에 일일 기록을 자동으로 추가하려 합니다. 자동화 제약(비공개 캘린더, API 권한, 브라우저 파일 제한)에 대해 사용자에게 간단한 대안(복사 버튼, 우즈 대리입력, 백엔드 프록시)을 제안해 주세요.

이미지 추천

• "문제 상황" 섹션: 여러 도구(메모·스프레드시트) 사용 화면 스크린샷

• "AI와 협업한 과정" 섹션: Claude 대화창 또는 대시보드 편집 화면 스크린샷

• "결과" 섹션: 완성된 daily-dashboard-v2.jsx 전체 화면 캡처

게시판 업로드 안내

1. AI_CASE_STUDY.md 파일을 열어 미리보기로 확인

2. 원하는 이미지들을 추천 섹션에 맞춰 추가

3. 게시판에 복사·붙여넣기 후 이미지 업로드

작성 완료했습니다. 수정할 부분(톤·길이·구성 변경 또는 특정 항목 보강)을 알려주시면 즉시 반영하겠습니다.