Devlog 실전프로젝트 가이드

게시 2025/12/28 업데이트 2026/01/05

By BLUEBUG

46 분읽는 시간

Devlog 실전프로젝트 가이드

개발자를 위한 일일 개발 로그 & 프로젝트 관리 시스템

Continuous Agentic Development 방식으로 4시간 만에 구축하기

프로젝트 개요

무엇을 만드는가?

DevLog는 개발자가 매일의 개발 활동을 기록하고, 프로젝트를 관리하며, 생산성을 추적하는 시스템입니다.

핵심 가치:

📝 매일의 작업 내용을 빠르게 기록
📊 시간 추적으로 생산성 분석
🎯 프로젝트별 진행 상황 관리
🔍 과거 작업 내용 검색
📈 주간/월간 통계 및 인사이트

왜 이 프로젝트인가?

실제로 사용할 수 있는 실용적인 도구
CRUD부터 고급 기능까지 모든 것을 경험
CAD 방식의 효과를 직접 체감
포트폴리오로 활용 가능

기능 명세

Phase 1: 핵심 기능 (MVP)

1.1 프로젝트 관리

✅ 프로젝트 생성/수정/삭제
✅ 프로젝트 상태 (진행중/완료/보류)
✅ 프로젝트별 태그/카테고리
✅ 프로젝트별 진행률 추적

1.2 일일 로그 작성

✅ 날짜별 개발 로그 작성
✅ 작업 시간 기록 (시작/종료)
✅ 프로젝트 연결
✅ 기술 스택 태그
✅ 코드 스니펫 첨부
✅ 이슈/버그 메모

1.3 검색 및 필터링

✅ 날짜 범위 검색
✅ 프로젝트별 필터
✅ 기술 스택별 필터
✅ 전체 텍스트 검색

1.4 통계 및 대시보드

✅ 주간 작업 시간 차트
✅ 프로젝트별 시간 분포
✅ 사용 기술 스택 분석
✅ 월간 생산성 리포트

Phase 2: 고급 기능 (확장)

🔄 GitHub 연동 (커밋 자동 import)
🔄 Jira/Notion 연동
🔄 AI 기반 작업 요약
🔄 팀 협업 기능
🔄 주간 회고 템플릿
🔄 목표 설정 및 추적

기술 스택

Backend

  
Framework: Spring Boot 3.2.1
Language: Java 17
ORM: MyBatis 3.0.3
Database: PostgreSQL 15
Build: Maven 3.9+

Frontend

  
Framework: React 18.2
State: React Hooks (useState, useEffect)
HTTP: Axios
Charts: Recharts
Styling: Tailwind CSS
Icons: Lucide React

DevOps

  
Version Control: Git
Container: Docker (optional)
CI/CD: GitHub Actions (optional)

데이터베이스 설계

ERD 개요

projects (1) ──< (N) logs (N) >── (M) tech_tags
    │
    └──< (N) project_stats

테이블 상세 설계

1. projects

  
CREATE TABLE projects (
    id BIGSERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    description TEXT,
    status VARCHAR(20) DEFAULT 'active', -- active, completed, on_hold
    start_date DATE NOT NULL,
    end_date DATE,
    repository_url VARCHAR(255),
    progress INTEGER DEFAULT 0, -- 0-100
    color VARCHAR(7), -- hex color for UI
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_projects_status ON projects(status);
CREATE INDEX idx_projects_dates ON projects(start_date, end_date);

2. dev_logs

  
CREATE TABLE dev_logs (
    id BIGSERIAL PRIMARY KEY,
    project_id BIGINT REFERENCES projects(id) ON DELETE CASCADE,
    log_date DATE NOT NULL,
    start_time TIME,
    end_time TIME,
    duration_minutes INTEGER, -- calculated or manual
    title VARCHAR(200) NOT NULL,
    description TEXT,
    achievements TEXT, -- what was accomplished
    challenges TEXT, -- problems encountered
    learnings TEXT, -- what was learned
    code_snippets TEXT, -- code examples
    mood VARCHAR(20), -- great, good, okay, bad
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_logs_project ON dev_logs(project_id);
CREATE INDEX idx_logs_date ON dev_logs(log_date DESC);
CREATE INDEX idx_logs_project_date ON dev_logs(project_id, log_date DESC);

3. tech_tags

  
CREATE TABLE tech_tags (
    id BIGSERIAL PRIMARY KEY,
    name VARCHAR(50) NOT NULL UNIQUE,
    category VARCHAR(50), -- language, framework, database, tool
    color VARCHAR(7),
    usage_count INTEGER DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_tech_tags_category ON tech_tags(category);

4. log_tech_tags (Many-to-Many)

  
CREATE TABLE log_tech_tags (
    log_id BIGINT REFERENCES dev_logs(id) ON DELETE CASCADE,
    tech_tag_id BIGINT REFERENCES tech_tags(id) ON DELETE CASCADE,
    PRIMARY KEY (log_id, tech_tag_id)
);

CREATE INDEX idx_log_tech_log ON log_tech_tags(log_id);
CREATE INDEX idx_log_tech_tag ON log_tech_tags(tech_tag_id);

5. project_stats (집계 테이블)

  
CREATE TABLE project_stats (
    id BIGSERIAL PRIMARY KEY,
    project_id BIGINT REFERENCES projects(id) ON DELETE CASCADE,
    stat_date DATE NOT NULL,
    total_minutes INTEGER DEFAULT 0,
    log_count INTEGER DEFAULT 0,
    UNIQUE(project_id, stat_date)
);

CREATE INDEX idx_project_stats_project ON project_stats(project_id);
CREATE INDEX idx_project_stats_date ON project_stats(stat_date DESC);

API 설계

Project API

POST   /api/projects              # 프로젝트 생성
GET    /api/projects              # 프로젝트 목록 (필터링 지원)
GET    /api/projects/{id}         # 프로젝트 상세
PUT    /api/projects/{id}         # 프로젝트 수정
DELETE /api/projects/{id}         # 프로젝트 삭제
GET    /api/projects/{id}/stats   # 프로젝트 통계

Request/Response 예시:

  
// POST /api/projects
{
  "name": "DevLog 프로젝트",
  "description": "개발 로그 관리 시스템",
  "status": "active",
  "startDate": "2025-12-28",
  "repositoryUrl": "https://github.com/username/devlog",
  "color": "#3B82F6"
}

// Response
{
  "id": 1,
  "name": "DevLog 프로젝트",
  "description": "개발 로그 관리 시스템",
  "status": "active",
  "startDate": "2025-12-28",
  "endDate": null,
  "repositoryUrl": "https://github.com/username/devlog",
  "progress": 0,
  "color": "#3B82F6",
  "createdAt": "2025-12-28T10:00:00",
  "updatedAt": "2025-12-28T10:00:00"
}

DevLog API

POST   /api/logs                  # 로그 생성
GET    /api/logs                  # 로그 목록 (날짜/프로젝트 필터)
GET    /api/logs/{id}             # 로그 상세
PUT    /api/logs/{id}             # 로그 수정
DELETE /api/logs/{id}             # 로그 삭제
GET    /api/logs/search           # 검색 (쿼리 파라미터)
GET    /api/logs/calendar         # 캘린더 뷰용 (월별 요약)

Request/Response 예시:

  
// POST /api/logs
{
  "projectId": 1,
  "logDate": "2025-12-28",
  "startTime": "09:00",
  "endTime": "13:00",
  "title": "사용자 인증 시스템 구현",
  "description": "JWT 기반 로그인/로그아웃 기능 완성",
  "achievements": "- JWT 토큰 생성/검증 로직 구현\n- 로그인 API 완성\n- 프론트엔드 연동",
  "challenges": "Refresh token 로직이 복잡했음",
  "learnings": "JWT의 장단점을 이해함",
  "mood": "good",
  "techTags": ["Java", "Spring Security", "JWT", "React"]
}

// Response
{
  "id": 1,
  "projectId": 1,
  "projectName": "DevLog 프로젝트",
  "logDate": "2025-12-28",
  "startTime": "09:00",
  "endTime": "13:00",
  "durationMinutes": 240,
  "title": "사용자 인증 시스템 구현",
  // ... (나머지 필드)
  "techTags": [
    {"id": 1, "name": "Java", "category": "language"},
    {"id": 2, "name": "Spring Security", "category": "framework"},
    // ...
  ]
}

Statistics API

GET    /api/stats/weekly           # 주간 통계
GET    /api/stats/monthly          # 월간 통계
GET    /api/stats/project/{id}     # 프로젝트별 통계
GET    /api/stats/tech-stack       # 기술 스택 사용 통계

Response 예시:

  
// GET /api/stats/weekly?startDate=2025-12-22
{
  "period": {
    "start": "2025-12-22",
    "end": "2025-12-28"
  },
  "totalMinutes": 2400,
  "totalLogs": 6,
  "dailyBreakdown": [
    {"date": "2025-12-22", "minutes": 480, "logCount": 1},
    {"date": "2025-12-23", "minutes": 360, "logCount": 1},
    // ...
  ],
  "projectBreakdown": [
    {"projectId": 1, "projectName": "DevLog", "minutes": 1200, "percentage": 50},
    {"projectId": 2, "projectName": "포트폴리오", "minutes": 1200, "percentage": 50}
  ],
  "topTechTags": [
    {"name": "Java", "count": 5},
    {"name": "React", "count": 4}
  ]
}

화면 설계

1. Dashboard (메인 화면)

┌─────────────────────────────────────────────────┐
│ DevLog                    [New Log] [New Project]│
├─────────────────────────────────────────────────┤
│ Quick Stats (이번 주)                            │
│ ┌──────────┬──────────┬──────────┬──────────┐  │
│ │ 40시간   │ 12개 로그│ 3 프로젝트│ 85% 목표│  │
│ └──────────┴──────────┴──────────┴──────────┘  │
│                                                  │
│ 이번 주 작업 시간                                │
│ ┌────────────────────────────────────────────┐ │
│ │        [Bar Chart]                         │ │
│ │  Mon ████████                              │ │
│ │  Tue ██████                                │ │
│ │  Wed ██████████                            │ │
│ └────────────────────────────────────────────┘ │
│                                                  │
│ 최근 로그                                        │
│ ┌────────────────────────────────────────────┐ │
│ │ 2025-12-28  DevLog  4h  사용자 인증 구현   │ │
│ │ 2025-12-27  DevLog  6h  데이터베이스 설계  │ │
│ └────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

2. Log List (로그 목록)

┌─────────────────────────────────────────────────┐
│ Development Logs                     [Filter] [+]│
├─────────────────────────────────────────────────┤
│ Filters: [All Projects ▼] [Date Range] [Tags]   │
├─────────────────────────────────────────────────┤
│ 2025-12-28                                       │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🟦 DevLog Project     09:00-13:00 (4h)      │ │
│ │ 사용자 인증 시스템 구현                      │ │
│ │ Tags: Java, Spring Security, JWT            │ │
│ │ ✅ JWT 토큰 생성/검증 완료                  │ │
│ └─────────────────────────────────────────────┘ │
│                                                  │
│ 2025-12-27                                       │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🟦 DevLog Project     14:00-20:00 (6h)      │ │
│ │ 데이터베이스 설계 및 구현                    │ │
│ │ Tags: PostgreSQL, MyBatis                   │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

3. Log Detail (로그 상세/작성)

┌─────────────────────────────────────────────────┐
│ New Development Log                    [Save] [×]│
├─────────────────────────────────────────────────┤
│ Project *    [DevLog ▼]                         │
│ Date *       [2025-12-28]                       │
│ Time         [09:00] - [13:00]  (4 hours)       │
│                                                  │
│ Title *                                          │
│ ┌─────────────────────────────────────────────┐ │
│ │ 사용자 인증 시스템 구현                      │ │
│ └─────────────────────────────────────────────┘ │
│                                                  │
│ Description                                      │
│ ┌─────────────────────────────────────────────┐ │
│ │ JWT 기반 로그인/로그아웃 기능 완성          │ │
│ └─────────────────────────────────────────────┘ │
│                                                  │
│ What I Achieved                                  │
│ ┌─────────────────────────────────────────────┐ │
│ │ - JWT 토큰 생성/검증 로직 구현              │ │
│ │ - 로그인 API 완성                           │ │
│ │ - 프론트엔드 연동 완료                      │ │
│ └─────────────────────────────────────────────┘ │
│                                                  │
│ Challenges                                       │
│ ┌─────────────────────────────────────────────┐ │
│ │ Refresh token 로직이 복잡했음               │ │
│ └─────────────────────────────────────────────┘ │
│                                                  │
│ Tech Stack   [+]                                 │
│ [Java] [Spring Security] [JWT] [React]          │
│                                                  │
│ Mood         😊 Great  😀 Good  😐 Okay  😞 Bad │
└─────────────────────────────────────────────────┘

4. Statistics (통계)

┌─────────────────────────────────────────────────┐
│ Statistics          [Weekly] [Monthly] [Custom]  │
├─────────────────────────────────────────────────┤
│ Time Period: Dec 22 - Dec 28, 2025              │
│                                                  │
│ Total Working Time: 40 hours                     │
│ ┌────────────────────────────────────────────┐ │
│ │     Daily Working Hours                    │ │
│ │  [Line/Bar Chart]                          │ │
│ │  10h ┤                                     │ │
│ │   8h ┤    ▅▅▅                              │ │
│ │   6h ┤  ▅▅▅▅▅  ▅▅▅                        │ │
│ │   4h ┤▅▅▅▅▅▅▅▅▅▅▅▅▅                       │ │
│ │      └─────────────────                    │ │
│ │       M T W T F S S                        │ │
│ └────────────────────────────────────────────┘ │
│                                                  │
│ Project Breakdown                                │
│ ┌────────────────────────────────────────────┐ │
│ │ [Pie Chart]                                │ │
│ │ DevLog         50%  (20h)                  │ │
│ │ Portfolio      30%  (12h)                  │ │
│ │ Study          20%  (8h)                   │ │
│ └────────────────────────────────────────────┘ │
│                                                  │
│ Most Used Tech Stack                             │
│ ┌────────────────────────────────────────────┐ │
│ │ Java           ████████████ 12 times       │ │
│ │ React          ██████████   10 times       │ │
│ │ PostgreSQL     ████████      8 times       │ │
│ └────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

단계별 구현 계획 (CAD 방식)

전체 타임라인: 4시간

Hour 1: 프로젝트 생성 및 기본 구조
Hour 2: 백엔드 API 완성
Hour 3: 프론트엔드 UI 구현
Hour 4: 통계/차트 및 마무리

Hour 1: 프로젝트 생성 및 기본 구조

Step 1.1: 프로젝트 초기화 (10분)

프롬프트 1:

새로운 프로젝트 "DevLog"를 만들 거야.
개발자를 위한 일일 개발 로그 및 프로젝트 관리 시스템이야.

다음 구조로 프로젝트를 생성해줘:

[백엔드]
- Spring Boot 3.2.1
- Java 17
- MyBatis 3.0.3
- PostgreSQL 15
- Maven

[프론트엔드]
- React 18.2
- Tailwind CSS
- Recharts
- Axios
- Lucide React (아이콘)

[프로젝트 구조]
devlog/
├── backend/          # Spring Boot
├── frontend/         # React
├── database/         # SQL 스크립트
├── docs/            # 문서
└── README.md

필요한 모든 설정 파일과 기본 구조를 만들어줘.

예상 결과:

Maven pom.xml 생성
application.yml 생성
package.json 생성
기본 디렉토리 구조 생성
.gitignore 생성

Step 1.2: CLAUDE.md 작성 (5분)

프롬프트 2:

이 프로젝트를 위한 CLAUDE.md 파일을 만들어줘.

다음 내용을 포함해:
프로젝트 개요 및 목적
기술 스택
코딩 컨벤션
데이터베이스 규칙
API 설계 원칙
브랜치 전략
중요 사항

실제로 이 프로젝트를 개발할 때 참고할 수 있도록 상세하게.

Step 1.3: 데이터베이스 스키마 (15분)

프롬프트 3:

PostgreSQL 데이터베이스 스키마를 만들어줘.

[테이블]
1. projects (프로젝트 정보)
   - id, name, description, status, start_date, end_date
   - repository_url, progress, color
   
2. dev_logs (개발 로그)
   - id, project_id, log_date, start_time, end_time
   - title, description, achievements, challenges, learnings
   - code_snippets, mood
   
3. tech_tags (기술 태그)
   - id, name, category, color, usage_count
   
4. log_tech_tags (로그-태그 연결)
   - log_id, tech_tag_id
   
5. project_stats (프로젝트 통계 - 집계용)
   - id, project_id, stat_date, total_minutes, log_count

[요구사항]
- 적절한 인덱스 추가
- Foreign Key 제약조건
- 기본값 설정
- 샘플 데이터 10개 정도

database/schema.sql 파일로 만들어줘.

Step 1.4: 백엔드 기본 설정 (15분)

프롬프트 4:

Spring Boot 백엔드 기본 설정을 해줘:

1. Application.java (메인 클래스)
   - @MapperScan 설정
   - CORS 설정

2. application.yml
   - PostgreSQL 연결 설정
   - MyBatis 설정
   - 서버 포트 8080

3. 기본 패키지 구조
   - com.devlog.model
   - com.devlog.mapper
   - com.devlog.service
   - com.devlog.controller
   - com.devlog.dto
   - com.devlog.config

4. WebConfig (CORS, 시간 형식 등)

모두 backend/src/main/java에 생성해줘.

Step 1.5: 프론트엔드 기본 설정 (15분)

프롬프트 5:

React 프론트엔드 기본 구조를 만들어줘:

1. Tailwind CSS 설정
2. 기본 컴포넌트 구조
   - components/
     - Layout/
     - Dashboard/
     - Logs/
     - Projects/
     - Statistics/
   - pages/
   - services/
   - utils/

3. App.js (라우팅 구조)
   - / : Dashboard
   - /logs : Log List
   - /logs/new : New Log
   - /logs/:id : Log Detail
   - /projects : Project List
   - /statistics : Statistics

4. API 서비스 (services/api.js)
   - axios 기본 설정
   - BASE_URL 설정

5. 기본 레이아웃 (Layout.jsx)
   - 헤더 (네비게이션)
   - 사이드바 (메뉴)
   - 메인 콘텐츠 영역

Tailwind CSS로 깔끔하게 스타일링해줘.

Hour 2: 백엔드 API 완성

Step 2.1: Model & Mapper - Projects (15분)

프롬프트 6:

Project 관련 백엔드를 구현해줘:

1. Model (Project.java)
   - 모든 필드 (id, name, description, status, dates, etc.)
   - Getter/Setter
   - Builder 패턴

2. Mapper Interface (ProjectMapper.java)
   - List<Project> findAll()
   - Project findById(Long id)
   - void insert(Project project)
   - void update(Project project)
   - void delete(Long id)
   - List<Project> findByStatus(String status)

3. Mapper XML (ProjectMapper.xml)
   - ResultMap 정의
   - 모든 SQL 쿼리 작성

4. Service (ProjectService.java)
   - 비즈니스 로직
   - 진행률 계산
   - 통계 조회

5. Controller (ProjectController.java)
   - REST API 엔드포인트
   - CRUD 기능
   - 적절한 HTTP 상태 코드
   - 에러 처리

모든 코드에 JavaDoc 주석 추가해줘.

Step 2.2: Model & Mapper - DevLogs (20분)

프롬프트 7:

DevLog 관련 백엔드를 구현해줘:

1. Model (DevLog.java)
   - 모든 필드
   - Project 정보 포함 (join용)
   - TechTag 리스트

2. DTO (DevLogDTO.java)
   - 생성/수정용 DTO
   - 응답용 DTO (프로젝트명, 태그 포함)

3. Mapper Interface (DevLogMapper.java)
   - findAll(날짜, 프로젝트 필터링)
   - findById
   - insert
   - update
   - delete
   - search(검색어)
   - findByDateRange
   - findCalendarData(년월)

4. Mapper XML
   - Association으로 Project 조인
   - Collection으로 TechTag 조인

5. Service
   - 시간 자동 계산 (start_time - end_time)
   - 통계 업데이트
   - 태그 자동 생성

6. Controller
   - CRUD API
   - 검색 API
   - 캘린더 API

특히 검색 기능은 제목, 설명, 성과, 도전과제 모두에서 검색되도록.

Step 2.3: Model & Mapper - TechTags (10분)

프롬프트 8:

TechTag 관련 백엔드를 구현해줘:

1. Model (TechTag.java)

2. Mapper Interface & XML
   - findAll()
   - findByName(String name)
   - insert(TechTag tag)
   - incrementUsageCount(Long id)
   - findPopular(int limit) // 많이 사용된 태그

3. Service
   - 태그 자동 생성 (없으면 생성)
   - 사용 횟수 업데이트

4. Controller
   - 태그 목록 조회
   - 인기 태그 조회

간단하게 구현해줘.

Step 2.4: Statistics Service (15분)

프롬프트 9:

통계 기능을 구현해줘:

1. StatisticsService.java
   - getWeeklyStats(LocalDate startDate)
   - getMonthlyStats(int year, int month)
   - getProjectStats(Long projectId)
   - getTechStackStats()

2. StatisticsController.java
   - 주간 통계 API
   - 월간 통계 API
   - 프로젝트별 통계 API
   - 기술 스택 통계 API

3. DTO
   - WeeklyStatsDTO
   - MonthlyStatsDTO
   - ProjectStatsDTO
   - TechStackStatsDTO

통계는 다음 정보 포함:
- 총 작업 시간
- 로그 개수
- 일별/프로젝트별 분포
- 기술 스택 사용 빈도

복잡한 집계 쿼리는 MyBatis에서 처리해줘.

Hour 3: 프론트엔드 UI 구현

Step 3.1: Dashboard 페이지 (15분)

프롬프트 10:

Dashboard 페이지를 만들어줘:

1. Dashboard.jsx
   - 주간 통계 요약 카드 4개
     * 총 작업 시간
     * 로그 개수
     * 활성 프로젝트 수
     * 목표 달성률
   - 이번 주 일별 작업 시간 바 차트 (Recharts)
   - 최근 로그 5개 목록

2. API 연동
   - /api/stats/weekly
   - /api/logs (최근 5개)

3. 스타일
   - Tailwind CSS 사용
   - 반응형 그리드
   - 카드 디자인
   - 깔끔한 차트

4. 로딩 상태 처리
5. 에러 처리

현대적이고 깔끔한 디자인으로 만들어줘.

Step 3.2: Log List 페이지 (15분)

프롬프트 11:

Log List 페이지를 만들어줘:

1. LogList.jsx
   - 필터 바
     * 프로젝트 선택 (드롭다운)
     * 날짜 범위 (date picker)
     * 검색 (제목, 설명)
   - 로그 목록
     * 날짜별 그룹핑
     * 프로젝트 색상 표시
     * 작업 시간 표시
     * 기술 태그 표시
     * 클릭하면 상세 페이지로

2. LogCard.jsx (개별 로그 카드)
   - 프로젝트 아이콘 + 이름
   - 시간 정보
   - 제목
   - 태그 칩
   - 수정/삭제 버튼

3. API 연동
   - /api/logs (필터링)
   - /api/projects (필터용)

4. 무한 스크롤 또는 페이지네이션

Tailwind CSS로 카드 기반 레이아웃 만들어줘.

Step 3.3: Log Form 페이지 (20분)

프롬프트 12:

Log 작성/수정 폼을 만들어줘:

1. LogForm.jsx
   - 필드들:
     * 프로젝트 선택 (필수)
     * 날짜 선택 (필수)
     * 시작/종료 시간
     * 제목 (필수)
     * 설명
     * 성과 (textarea)
     * 도전과제 (textarea)
     * 배운 점 (textarea)
     * 코드 스니펫 (textarea with syntax highlight)
     * 기술 태그 (멀티 선택, 새로운 태그 추가 가능)
     * 기분 (이모지 선택)

2. 유효성 검사
   - 필수 필드 체크
   - 시간 유효성 (종료 > 시작)

3. API 연동
   - POST /api/logs (생성)
   - PUT /api/logs/:id (수정)
   - GET /api/projects (프로젝트 목록)
   - GET /api/tech-tags (태그 목록)

4. UX
   - 자동 저장 (draft)
   - 성공/실패 토스트
   - 취소 시 확인

폼 디자인은 깔끔하고 입력하기 편하게.

Step 3.4: Project List 페이지 (10분)

프롬프트 13:

Project List 페이지를 만들어줘:

1. ProjectList.jsx
   - 프로젝트 카드 그리드
     * 프로젝트 색상
     * 이름
     * 설명
     * 진행률 바
     * 상태 배지 (진행중/완료/보류)
     * 총 작업 시간
     * 로그 개수
   - 새 프로젝트 추가 버튼
   - 필터 (상태별)

2. ProjectCard.jsx
   - 클릭하면 프로젝트별 로그 목록으로

3. API 연동
   - GET /api/projects
   - GET /api/projects/:id/stats

간단하고 시각적으로 예쁘게.

Hour 4: 통계/차트 및 마무리

Step 4.1: Statistics 페이지 (20분)

프롬프트 14:

Statistics 페이지를 만들어줘:

1. Statistics.jsx
   - 기간 선택 탭 (주간/월간/커스텀)
   - 주간 통계:
     * 일별 작업 시간 막대 차트 (Recharts)
     * 프로젝트별 시간 분포 파이 차트
     * 기술 스택 사용 빈도 수평 바 차트
   - 월간 통계:
     * 일별 히트맵
     * 주별 트렌드 라인 차트
   - 인사이트 카드
     * 가장 생산적인 요일
     * 평균 작업 시간
     * 가장 많이 사용한 기술

2. API 연동
   - /api/stats/weekly
   - /api/stats/monthly
   - /api/stats/tech-stack

3. 차트 라이브러리
   - Recharts 사용
   - 반응형
   - 색상 테마 일관성

4. 데이터 필터링
   - 날짜 범위 선택
   - 프로젝트별 필터

차트는 인터랙티브하고 보기 좋게!

프롬프트 15:

전체 레이아웃과 네비게이션을 완성해줘:

1. Layout.jsx 개선
   - 헤더
     * 로고
     * 네비게이션 메뉴
     * 사용자 프로필 (추후 확장용)
   - 사이드바
     * Dashboard 🏠
     * Logs 📝
     * Projects 📁
     * Statistics 📊
     * Settings ⚙️ (추후)
   - 현재 페이지 하이라이트

2. 반응형 디자인
   - 모바일에서는 사이드바 토글

3. 스타일
   - Tailwind CSS
   - 다크 모드 지원 준비

Lucide React 아이콘 사용해줘.

Step 4.3: 추가 기능 및 개선 (20분)

프롬프트 16:

다음 개선사항들을 적용해줘:

1. 검색 기능
   - 헤더에 전역 검색 바
   - 로그 제목, 설명, 태그에서 검색
   - 실시간 검색 결과

2. 날짜 네비게이션
   - 로그 리스트에서 달력 뷰 옵션
   - 날짜 클릭하면 해당 날짜로 이동

3. Quick Actions
   - "오늘 로그 추가" 플로팅 버튼
   - 키보드 shortcut (Ctrl+N: 새 로그)

4. 로딩 스켈레톤
   - 모든 리스트에 스켈레톤 로딩

5. 토스트 알림
   - 성공/실패 메시지
   - 우측 상단에 표시

6. 에러 바운더리
   - 에러 발생 시 친화적인 메시지

UX를 한 단계 업그레이드해줘.

Step 4.4: 문서화 및 테스트 (10분)

프롬프트 17:

프로젝트 문서화를 완성해줘:

1. README.md
   - 프로젝트 소개
   - 주요 기능
   - 기술 스택
   - 빠른 시작 가이드
   - 스크린샷
   - API 문서 링크

2. API_DOCUMENTATION.md
   - 모든 API 엔드포인트
   - Request/Response 예시
   - 에러 코드

3. database/SCHEMA.md
   - ERD 다이어그램 (Mermaid)
   - 테이블 설명

4. 간단한 테스트
   - ProjectServiceTest.java (주요 로직)
   - LogServiceTest.java (주요 로직)

5. .env.example
   - 환경 변수 템플릿

실제 사용자가 보기 좋게 작성해줘.

실제 개발 진행 예시

실제 Claude Code 세션 기록

=== Session Start: 2025-12-28 09:00 ===

You: 새로운 프로젝트 "DevLog"를 만들 거야...
     (프롬프트 1)

Claude: 알겠습니다. DevLog 프로젝트를 생성하겠습니다.

[Creating project structure...]
✓ Created backend/ with Spring Boot structure
✓ Created frontend/ with React structure
✓ Generated pom.xml with dependencies
✓ Generated package.json with dependencies
✓ Created database/ directory
✓ Created docs/ directory

[Generated files: 12]
- backend/pom.xml
- backend/src/main/java/com/devlog/Application.java
- backend/src/main/resources/application.yml
- frontend/package.json
- frontend/src/App.js
- frontend/tailwind.config.js
...

다음 단계: CLAUDE.md 작성할까요?

You: 응, 해줘.

Claude: [Creating CLAUDE.md...]
✓ CLAUDE.md created with project guidelines

=== 09:15 - Database Schema ===

You: (프롬프트 3)

Claude: [Analyzing requirements...]
✓ Creating database/schema.sql
✓ Adding indexes
✓ Adding sample data

[Schema includes:]
- 5 tables with proper relationships
- 12 indexes for performance
- 20 sample records

SQL generated: 350 lines

테스트할까요?

중간 체크포인트 (Hour 2)

=== 10:00 - Backend Progress Check ===

Files created: 28
- Models: 4
- Mappers: 4
- Mapper XMLs: 4
- Services: 4
- Controllers: 4
- DTOs: 8

API Endpoints: 24
✓ Projects CRUD (5 endpoints)
✓ DevLogs CRUD (7 endpoints)
✓ TechTags (3 endpoints)
✓ Statistics (4 endpoints)

Tests passing: 12/12

Ready for frontend?

You: 좋아! 프론트엔드 시작하자.

최종 완성 (Hour 4)

=== 13:00 - Project Complete ===

Total files: 87
- Backend: 45 files
- Frontend: 38 files
- Database: 2 files
- Docs: 2 files

Lines of code: ~8,500
- Java: 3,200 lines
- JavaScript/JSX: 3,800 lines
- SQL: 500 lines
- Config: 1,000 lines

Features implemented:
✓ Project management
✓ Daily dev logs
✓ Search & filtering
✓ Statistics & charts
✓ Responsive UI
✓ Dark mode ready

Ready to run:
1. cd backend && mvn spring-boot:run
2. cd frontend && npm start
3. Open http://localhost:3000

Next steps?

예상 결과물

프로젝트 구조

devlog/
├── backend/
│   ├── src/
│   │   └── main/
│   │       ├── java/com/devlog/
│   │       │   ├── Application.java
│   │       │   ├── config/
│   │       │   │   └── WebConfig.java
│   │       │   ├── controller/
│   │       │   │   ├── ProjectController.java
│   │       │   │   ├── DevLogController.java
│   │       │   │   ├── TechTagController.java
│   │       │   │   └── StatisticsController.java
│   │       │   ├── dto/
│   │       │   │   ├── DevLogDTO.java
│   │       │   │   ├── WeeklyStatsDTO.java
│   │       │   │   └── ...
│   │       │   ├── mapper/
│   │       │   │   ├── ProjectMapper.java
│   │       │   │   ├── DevLogMapper.java
│   │       │   │   └── ...
│   │       │   ├── model/
│   │       │   │   ├── Project.java
│   │       │   │   ├── DevLog.java
│   │       │   │   └── ...
│   │       │   └── service/
│   │       │       ├── ProjectService.java
│   │       │       ├── DevLogService.java
│   │       │       └── ...
│   │       └── resources/
│   │           ├── application.yml
│   │           └── mapper/
│   │               ├── ProjectMapper.xml
│   │               └── ...
│   └── pom.xml
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Dashboard/
│   │   │   │   ├── Dashboard.jsx
│   │   │   │   ├── StatsCard.jsx
│   │   │   │   └── RecentLogs.jsx
│   │   │   ├── Logs/
│   │   │   │   ├── LogList.jsx
│   │   │   │   ├── LogCard.jsx
│   │   │   │   ├── LogForm.jsx
│   │   │   │   └── LogDetail.jsx
│   │   │   ├── Projects/
│   │   │   │   ├── ProjectList.jsx
│   │   │   │   └── ProjectCard.jsx
│   │   │   ├── Statistics/
│   │   │   │   ├── Statistics.jsx
│   │   │   │   ├── WeeklyChart.jsx
│   │   │   │   └── ProjectChart.jsx
│   │   │   └── Layout/
│   │   │       ├── Layout.jsx
│   │   │       ├── Header.jsx
│   │   │       └── Sidebar.jsx
│   │   ├── services/
│   │   │   └── api.js
│   │   ├── utils/
│   │   │   ├── dateUtils.js
│   │   │   └── formatters.js
│   │   ├── App.js
│   │   └── index.js
│   ├── package.json
│   └── tailwind.config.js
│
├── database/
│   ├── schema.sql
│   └── SCHEMA.md
│
├── docs/
│   ├── API_DOCUMENTATION.md
│   └── screenshots/
│
├── CLAUDE.md
└── README.md

확장 아이디어 (Phase 2)

1. GitHub 연동

프롬프트:

GitHub API를 연동해서 커밋을 자동으로 import하고 싶어:

1. GitHub OAuth 로그인
2. 연결된 레포지토리 선택
3. 일일 커밋을 자동으로 로그에 추가
4. 커밋 메시지에서 태그 자동 추출

어떻게 구현하면 좋을까? 단계별 계획 세워줘.

2. AI 작업 요약

프롬프트:

Claude API를 사용해서 주간 작업을 AI가 요약하게 하고 싶어:

1. 일주일치 로그를 수집
2. Claude API로 요약 생성
   - 주요 성과
   - 기술적 하이라이트
   - 다음 주 추천 사항
3. 이메일 또는 슬랙으로 발송

구현해줘.

3. 팀 협업 기능

프롬프트:

팀 기능을 추가하고 싶어:

팀 생성
팀원 초대
팀 대시보드 (전체 통계)
팀원 로그 공유 (선택적)
팀 목표 설정 및 추적

데이터베이스 스키마 변경과 API를 설계해줘.

4. 모바일 앱

프롬프트:

React Native로 모바일 앱을 만들고 싶어:

1. 간단한 로그 작성 (음성 입력 지원)
2. 타이머 (작업 시간 추적)
3. 푸시 알림 (일일 로그 리마인더)
4. 오프라인 지원

기본 구조와 주요 화면을 만들어줘.

트러블슈팅

자주 발생하는 문제

1. CORS 오류

문제:

Access to XMLHttpRequest at 'http://localhost:8080/api/logs' 
from origin 'http://localhost:3000' has been blocked by CORS policy

해결 프롬프트:

CORS 에러가 발생해. WebConfig.java에서 CORS 설정을 확인하고 수정해줘.
React 앱 (localhost:3000)에서 Spring Boot (localhost:8080)로 요청이 가능하도록.

2. MyBatis 매핑 오류

문제:

org.apache.ibatis.binding.BindingException: 
Invalid bound statement (not found): com.devlog.mapper.DevLogMapper.findAll

해결 프롬프트:

MyBatis 매핑 오류가 발생해. 다음을 확인해줘:
DevLogMapper.xml 위치가 올바른지
namespace가 일치하는지
application.yml의 mapper-locations 설정
@MapperScan 경로

3. 날짜 형식 문제

문제:

Cannot deserialize value of type `java.time.LocalDate` 
from String "2025-12-28T00:00:00"

해결 프롬프트:

날짜 형식 변환 오류가 발생해. 
프론트엔드에서 날짜를 YYYY-MM-DD 형식으로 보내고,
백엔드에서 LocalDate로 받도록 설정해줘.
Jackson 설정도 확인해줘.

성능 최적화

데이터베이스 최적화

프롬프트:

성능을 최적화하고 싶어:

1. N+1 쿼리 문제 확인
   - DevLog 조회 시 Project, TechTag join
   
2. 인덱스 최적화
   - 자주 사용하는 WHERE 조건에 인덱스
   
3. 페이지네이션
   - 로그 목록에 LIMIT/OFFSET

4. 캐싱
   - 프로젝트 목록
   - 태그 목록
   
분석하고 개선해줘.

프론트엔드 최적화

프롬프트:

React 앱을 최적화해줘:

1. 코드 스플리팅
   - 페이지별 lazy loading
   
2. 메모이제이션
   - useMemo, useCallback 활용
   
3. 이미지 최적화
   - 차트는 가볍게
   
4. 번들 크기 줄이기
   - 불필요한 라이브러리 제거
   
webpack-bundle-analyzer로 분석하고 개선 제안해줘.

배포 가이드

Docker 컨테이너화

프롬프트:

Docker로 컨테이너화하고 싶어:

1. Dockerfile (백엔드)
   - Multi-stage build
   - Maven 빌드
   
2. Dockerfile (프론트엔드)
   - Production build
   - Nginx 서빙
   
3. docker-compose.yml
   - PostgreSQL
   - Backend
   - Frontend
   - 네트워크 설정
   
4. .dockerignore

프로덕션 레벨로 만들어줘.

클라우드 배포

프롬프트:

AWS에 배포하고 싶어:

1. 아키텍처 설계
   - RDS (PostgreSQL)
   - ECS or EB (Backend)
   - S3 + CloudFront (Frontend)
   
2. 환경 설정
   - 프로덕션 application.yml
   - 환경 변수 관리
   
3. CI/CD
   - GitHub Actions
   - 자동 빌드 및 배포
   
단계별 가이드를 만들어줘.

학습 체크리스트

이 프로젝트를 통해 배운 것

  
## 백엔드
- [ ] Spring Boot 프로젝트 구조
- [ ] MyBatis ORM 사용법
- [ ] RESTful API 설계
- [ ] DTO 패턴
- [ ] Service 레이어 분리
- [ ] 복잡한 SQL 쿼리 (Join, Aggregation)
- [ ] 에러 처리
- [ ] CORS 설정

## 프론트엔드
- [ ] React Hooks (useState, useEffect)
- [ ] React Router
- [ ] Axios를 통한 API 통신
- [ ] Tailwind CSS 스타일링
- [ ] Recharts 차트 라이브러리
- [ ] 폼 처리 및 유효성 검사
- [ ] 컴포넌트 설계
- [ ] 반응형 디자인

## 데이터베이스
- [ ] PostgreSQL 스키마 설계
- [ ] 관계 설정 (1:N, N:M)
- [ ] 인덱스 최적화
- [ ] 집계 쿼리
- [ ] 트랜잭션

## DevOps
- [ ] Git 워크플로우
- [ ] Docker 컨테이너화
- [ ] CI/CD 파이프라인
- [ ] 환경 변수 관리

## CAD (Continuous Agentic Development)
- [ ] 효과적인 프롬프트 작성
- [ ] AI와의 협업 패턴
- [ ] 단계별 검증
- [ ] 반복적 개선
- [ ] 문서화 자동화

다음 단계

프로젝트 확장

추가 기능 구현
- Phase 2의 고급 기능들
- 사용자 피드백 반영
실제 사용
- 매일 자신의 개발 로그 작성
- 패턴 분석 및 개선
포트폴리오 활용
- GitHub README 작성
- 스크린샷 및 데모
- 기술 블로그 포스팅

다른 프로젝트 도전

E-commerce
- 상품 관리
- 장바구니
- 결제 시스템
블로그 플랫폼
- Markdown 에디터
- 댓글 시스템
- SEO 최적화
실시간 채팅
- WebSocket
- 그룹 채팅
- 파일 공유

마치며

이 프로젝트는 Continuous Agentic Development의 진정한 힘을 보여줍니다:

4시간 만에 완전한 풀스택 애플리케이션
8,500+ 라인 의 프로덕션 레벨 코드
24개 API 엔드포인트
실제 사용 가능한 제품

전통적 방식이라면 2-3주가 걸렸을 작업입니다.

하지만 더 중요한 것은, 당신이 의미 있는 결정에 집중할 수 있었다는 점입니다:

어떤 기능을 만들 것인가?
사용자에게 어떤 가치를 제공할 것인가?
데이터를 어떻게 구조화할 것인가?

코드 타이핑은 Claude에게 맡기고, 창의적 사고는 당신이 했습니다.

이것이 바로 Continuous Agentic Development입니다.

프로젝트 시작일: 2025-12-28
예상 완성 시간: 4시간
난이도: 중급
학습 효과: ⭐⭐⭐⭐⭐
실용성: ⭐⭐⭐⭐⭐

지금 바로 시작하세요!

  
mkdir devlog
cd devlog
claude  # Claude Code 시작

# 그리고 이 문서의 첫 프롬프트를 복사해서 붙여넣으세요!

AI, Vibe Coding, Guide

개발자를 위한 일일 개발 로그 & 프로젝트 관리 시스템

프로젝트 개요

무엇을 만드는가?

기능 명세

Phase 1: 핵심 기능 (MVP)

1.1 프로젝트 관리

1.2 일일 로그 작성

1.3 검색 및 필터링

1.4 통계 및 대시보드

Phase 2: 고급 기능 (확장)

기술 스택

Backend

Frontend

DevOps

데이터베이스 설계

ERD 개요

테이블 상세 설계

1. projects

2. dev_logs

3. tech_tags

4. log_tech_tags (Many-to-Many)

5. project_stats (집계 테이블)

API 설계

Project API

DevLog API

Statistics API

화면 설계

1. Dashboard (메인 화면)

2. Log List (로그 목록)

3. Log Detail (로그 상세/작성)

4. Statistics (통계)

단계별 구현 계획 (CAD 방식)

전체 타임라인: 4시간

Hour 1: 프로젝트 생성 및 기본 구조

Step 1.1: 프로젝트 초기화 (10분)

Step 1.2: CLAUDE.md 작성 (5분)

Step 1.3: 데이터베이스 스키마 (15분)

Step 1.4: 백엔드 기본 설정 (15분)

Step 1.5: 프론트엔드 기본 설정 (15분)

Hour 2: 백엔드 API 완성

Step 2.1: Model & Mapper - Projects (15분)

Step 2.2: Model & Mapper - DevLogs (20분)

Step 2.3: Model & Mapper - TechTags (10분)

Step 2.4: Statistics Service (15분)

Hour 3: 프론트엔드 UI 구현

Step 3.1: Dashboard 페이지 (15분)

Step 3.2: Log List 페이지 (15분)

Step 3.3: Log Form 페이지 (20분)

Step 3.4: Project List 페이지 (10분)

Hour 4: 통계/차트 및 마무리

Step 4.1: Statistics 페이지 (20분)

Step 4.2: Navigation & Layout (10분)

Step 4.3: 추가 기능 및 개선 (20분)

Step 4.4: 문서화 및 테스트 (10분)

실제 개발 진행 예시

실제 Claude Code 세션 기록

중간 체크포인트 (Hour 2)

최종 완성 (Hour 4)

예상 결과물

프로젝트 구조

확장 아이디어 (Phase 2)

1. GitHub 연동

2. AI 작업 요약

3. 팀 협업 기능

4. 모바일 앱

트러블슈팅

자주 발생하는 문제

1. CORS 오류

2. MyBatis 매핑 오류

3. 날짜 형식 문제

성능 최적화

데이터베이스 최적화

프론트엔드 최적화

배포 가이드

Docker 컨테이너화

클라우드 배포

학습 체크리스트

이 프로젝트를 통해 배운 것

다음 단계

프로젝트 확장