[Claud Code] 비개발자가 30분 만에 투자자 시연용 대시보드 만든 방법

한줄 요약

작업지시서 하나로 Claude Code에게 React 대시보드를 요청했더니, 프로젝트 생성부터 라우팅까지 7단계를 자동으로 진행하여 완전한 Care Ops Dashboard 목업이 완성되었습니다.

이런 분들께 도움돼요

• 투자자/고객에게 제품 컨셉을 시연해야 하는 스타트업 창업자

• React를 모르지만 인터랙티브한 프로토타입이 필요한 비개발자

• 바이브코딩으로 실제 동작하는 웹앱을 만들어보고 싶은 분

• 헬스케어/케어테크 분야에서 MVP를 빠르게 검증하고 싶은 분

소개: 시도하고자 했던 것과 그 이유

배경

투자자 미팅과 고객 시연을 앞두고, 제품 컨셉을 보여줄 수 있는 대시보드 목업이 필요했습니다.

문제점

• 개발자 리소스가 부족하여 목업 제작에 시간을 할애하기 어려움

• Figma 목업은 인터랙션이 없어 실제 사용 경험을 전달하기 힘듦

• 외주 제작은 비용과 시간이 많이 소요됨

시작 계기

Claude Code를 활용하면 작업지시서만으로 실제 동작하는 React 앱을 만들 수 있다는 것을 알게 되었습니다. 기획 문서를 정리하고, Claude에게 맡겨보기로 했습니다.

진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?

사용한 도구

• 도구명: Claude Code (CLI) + VS Code

• 모델: Claude Opus 4.5

• 핵심 기능: TodoWrite (작업 계획), Bash (프로젝트 생성), Write/Edit (코드 작성)

1단계: 작업지시서 준비

상황: 대시보드에 필요한 화면, 데이터 구조, 디자인 요구사항을 정리했습니다.

작업지시서 구성:

1. 프로젝트 개요 - 목적과 산출물 정의
2. 대시보드 구성 - 3개 화면 (환자 리스트, 태스크, 리포트)
3. 데이터 구조 - Mock 데이터 (환자, 태스크, 센서 이벤트)
4. UI/UX 요구사항 - 컬러 팔레트, 디자인 원칙, 필수 인터랙션
5. 기술 요구사항 - React, Tailwind, Lucide, Recharts
6. 작업 단계 - Step 1~6 순서대로 진행

2단계: Claude Code에 작업지시서 전달

이렇게 요청했어요:

Care Ops Dashboard 목업 작업지시서
[작업지시서 전체 내용 첨부]

이 작업지시서를 사용해서 바로 대시보드 구현을 시작해줘.
물어보지 말고 너가 알아서 가장 좋은 선택을 해서 개발해줘.

핵심 포인트: "물어보지 말고 알아서"라는 지시로 Claude가 자율적으로 의사결정하도록 했습니다.

3단계: Claude의 자동 작업 진행

Claude는 TodoWrite로 7단계 작업 계획을 세우고 순차적으로 진행했습니다:

총 소요 시간: 약 15분 (작업지시서 준비 포함 30분)

인상 깊었던 순간

Claude가 작업 계획을 세우고 하나씩 체크하며 진행하는 모습이 인상적이었습니다.

TodoWrite 도구로 7개 항목을 작성하고, 각 단계를 완료할 때마다 completed로 변경하면서 진행했습니다. 마치 주니어 개발자에게 일을 맡긴 것 같은 느낌이었습니다.

특히 놀라웠던 점:

• 컴포넌트 분리를 적절하게 함 (AlertBadge, StatusBadge, PatientCard 등)

• Tailwind 클래스를 Careloop 브랜드 컬러에 맞게 적용

• 태스크 완료/예외 처리 버튼의 상태 관리까지 구현

• Recharts로 일별 완료율 차트까지 자동 생성

결과와 배운 점

Before vs After

결과물

1. 환자 리스트 화면 (/)

• 요약 카드 3개

• 환자 카드 5개

• 카드 클릭 시 상세 화면 이동

2. 환자 상세 - 태스크 탭 (/patient/:id)

• 대기중/완료됨 섹션 분리

• 완료 버튼 → 상태 즉시 변경

• 예외 버튼 → 사유 선택 모달

3. 리포트 탭

• 주간 요약 (수행률 87%, 136/156 완료, 예외 8건)

• 일별 완료율 바 차트

• 최근 이벤트 타임라인

4. 프로젝트 구조

careloop-dashboard/
├── src/
│   ├── components/ (8개 컴포넌트)
│   ├── pages/ (2개 페이지)
│   ├── data/mockData.js
│   └── constants/colors.js

배운 점

1. 작업지시서가 결과물의 품질을 결정한다

작업지시서에 포함한 내용이 그대로 구현되었습니다:

• Mock 데이터 구조 → 그대로 사용

• 컬러 팔레트 → Tailwind 클래스로 적용

• 화면별 요구사항 → 각 페이지에 반영

• 인터랙션 요구사항 → useState로 상태 관리

2. "물어보지 말고 알아서"가 효과적

Claude가 매번 확인을 구하면 작업 속도가 느려집니다. 명확한 작업지시서를 주고 자율권을 부여하니 빠르게 진행되었습니다.

3. TodoWrite로 진행 상황 추적

Claude가 스스로 작업 목록을 만들고 체크하는 모습을 보며 안심할 수 있었습니다. 어디까지 진행되었는지 한눈에 파악 가능했습니다.

다른 업무에 적용한다면?

1. 다른 프로덕트 목업에도 동일하게 적용

이번에 사용한 작업지시서 구조를 템플릿으로 활용할 수 있습니다:

1. 프로젝트 개요 - 목적, 산출물
2. 화면 구성 - 각 화면별 레이아웃과 기능
3. 데이터 구조 - Mock 데이터 정의
4. 디자인 요구사항 - 컬러, 폰트, 컴포넌트 스타일
5. 기술 스택 - 사용할 라이브러리
6. 작업 단계 - Step by Step

2. 실제 개발 전 프로토타이핑

투자자 미팅 → 피드백 수집 → 수정 사이클을 빠르게 돌릴 수 있습니다.

예시:

• "환자 카드에 사진도 넣어줘" → 즉시 수정

• "차트 색상을 브랜드 컬러로" → 바로 반영

• "모바일 레이아웃으로 변경" → 반응형 추가

3. 개발자에게 명확한 스펙 전달

이렇게 만든 목업은 실제 개발 시 레퍼런스가 됩니다:

• 컴포넌트 구조가 이미 정의됨

• 상태 관리 로직이 검증됨

• 디자인 토큰이 코드로 존재

재사용 가능한 프롬프트

1. React 대시보드 작업지시서 템플릿

# [프로젝트명] 대시보드 목업 작업지시서

## 1. 프로젝트 개요
- 목적: [투자자 시연 / 고객 데모 / MVP 검증]
- 산출물: React 웹 애플리케이션 (로컬 실행)

## 2. 기술 스택
- React 18 + Vite
- Tailwind CSS
- Lucide React (아이콘)
- Recharts (차트) - 필요시
- React Router (다중 화면시)

## 3. 화면 구성
### 화면 A: [메인 화면명]
- [구성 요소 1]
- [구성 요소 2]
- [인터랙션]

### 화면 B: [상세 화면명]
- [구성 요소]
- [인터랙션]

## 4. Mock 데이터
```javascript
export const [데이터명] = [
  { id: 1, ... },
];

5. 디자인 요구사항

• Primary: #[색상코드]

• Secondary: #[색상코드]

• 디자인 원칙: [한 줄 설명]

6. 실행

물어보지 말고 알아서 가장 좋은 선택을 해서 개발해줘.

### 2. 빠른 수정 요청 프롬프트

[현재 상태 설명] 다음을 수정해줘:

1. [수정사항 1]

2. [수정사항 2]

수정 후 dev 서버 다시 실행해줘.

### 3. 컴포넌트 추가 프롬프트

[컴포넌트명] 컴포넌트를 추가해줘.

요구사항:

• [기능 1]

• [기능 2]

• [스타일 참고]: 기존 [참고 컴포넌트]와 일관되게

[페이지명]에 import하고 사용해줘.

## 도움 받은 글

이번 작업은 다음 자료를 참고했습니다:

- Careloop 사업 전략 문서 - 제품 컨셉 및 주요 기능 정의
- gpters 프리랜서 자동화 스터디 - 바이브코딩 방법론
- Claude Code 공식 문서 - TodoWrite, Task 도구 활용법

---

**🤖 이 글은 Claude Code와 함께 작성되었습니다.**

**실행 방법**:
```bash
cd careloop-dashboard
npm install
npm run dev
# http://localhost:5173 에서 확인소개