Feat: 프로젝트 설명 파일 파편화

하나의 projects.json으로 관리하기 어려워 각 프로젝트를 대표하는 폴더 안에 각 각 project.json 을 추가하는
방식으로 변경

Author: lazy-dinosaur

package.json

@@ -4,14 +4,15 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
-    "build": "next build && touch out/.nojekyll && node scripts/generate-sitemap.js && node scripts/generate-og-image.js && cp public/robots.txt out/ && cp public/og-image.svg out/",
+    "build": "node scripts/build-projects.js && next build && touch out/.nojekyll && node scripts/generate-sitemap.js && node scripts/generate-og-image.js && cp public/robots.txt out/ && cp public/og-image.svg out/",
     "start": "next start",
     "lint": "next lint",
     "sync": "scripts/sync-notes.py",
     "deploy": "bun run sync && bun run build && gh-pages -d out -b gh-pages",
     "post": "bun run sync && git add . && git commit -m 'update post' && git push",
     "serve": "bunx serve@latest out",
-    "generate-sitemap": "node scripts/generate-sitemap.js"
+    "generate-sitemap": "node scripts/generate-sitemap.js",
+    "build-projects": "node scripts/build-projects.js"
   },
   "dependencies": {
     "@r4ai/remark-callout": "^0.6.2",

public/projects.json

@@ -0,0 +1,70 @@
+{
+  "projectType": "project",
+  "id": "ccxt-mcp",
+  "title": "CCXT MCP Server",
+  "description": "AI 모델(Claude/GPT)이 100개 이상의 암호화폐 거래소 API와 상호작용할 수 있게 해주는 Model Context Protocol(MCP) 서버입니다. CCXT 라이브러리를 활용하여 암호화폐 거래소에 접근하고 거래할 수 있는 기능을 제공합니다.",
+  "thumbnail": "./ccxt-mcp-main.png",
+  "tags": ["Crypto", "MCP", "AI", "NPM"],
+  "technologies": [
+    "TypeScript",
+    "Node.js",
+    "CCXT",
+    "Model Context Protocol",
+    "Zod",
+    "JSON Schema",
+    "NPM",
+    "AI"
+  ],
+  "githubUrl": "https://github.com/lazy-dinosaur/ccxt-mcp",
+  "serviceUrl": "https://www.npmjs.com/package/@lazydino/ccxt-mcp",
+  "featured": true,
+  "createdAt": "2025-03-29",
+  "overview": "CCXT MCP Server는 '모델이 MCP를 이용할 수 있게' 하는 동시에 'MCP 자체를 개발하는' 독특한 메타적 프로젝트입니다. 인공지능 활용이 급부상하는 시대적 트렌드에 맞춰, AI 모델이 암호화폐 거래소와 직접 상호작용할 수 있는 브릿지 역할을 하는 서버를 개발했습니다. Claude나 GPT 같은 AI 모델들이 사용자의 간단한 자연어 요청만으로 복잡한 거래소 API를 통해 정보를 조회하고 실제 거래를 실행할 수 있게 해줍니다.",
+  "features": [
+    "다양한 시장 정보 조회(거래소 목록, 가격, 주문장 등)",
+    "실시간 거래 기능(시장가/지정가 주문 생성, 주문 취소 및 상태 조회)",
+    "계정 자산 조회 및 거래 내역 분석",
+    "트레이딩 성과 분석(승률, 평균 수익/손실 비율 등)",
+    "포지션 관리(자본 대비 비율 매매, 레버리지 설정 등)",
+    "리스크 관리(기술적 지표 기반 손절매, 변동성 기반 손익 관리)",
+    "Claude Desktop과의 원활한 통합",
+    "100개 이상의 암호화폐 거래소 지원"
+  ],
+  "lessons": "이 프로젝트의 가장 큰 의의는 MCP를 사용하면서 MCP 서버 자체를 개발하는 메타적인 경험이었습니다. 최신 AI 트렌드를 따라가기 위해 Aider, Claude Desktop, Cursor 등 다양한 AI 툴을 활용해보며 각 도구의 장단점을 직접 체험할 수 있었습니다. 특히 MCP가 어떻게 통신하는지, 그리고 MCP 서버를 구축하기 위한 기본적인 설정 방법과 구조에 대해 깊이 이해하게 되었습니다. npm을 통한 패키지 배포 과정과 다른 컴퓨터에 설치하여 사용하는 전체 라이프사이클을 경험함으로써 개발자로서의 역량을 한층 더 강화할 수 있었습니다.",
+  "challenges": [
+    "Model Context Protocol 이해와 구현: MCP는 비교적 새로운 프로토콜로, 아직 문서화가 제한적이고 사용 사례도 많지 않아 구현 방법을 파악하는 데 어려움이 있었습니다.",
+    "다양한 AI 도구 학습 곡선: Aider, Claude Desktop, Cursor 등 각기 다른 AI 도구의 사용법과 특성을 이해하고 효과적으로 활용하는 데 시간이 필요했습니다.",
+    "거래소 API 통합의 복잡성: 100개 이상의 거래소마다 API 구조와 요구사항이 다르고, 이를 일관된 인터페이스로 추상화하는 과정이 복잡했습니다.",
+    "TypeScript 타입 정의의 어려움: CCXT 라이브러리와 MCP SDK에서 제공하는 다양한 타입을 조화롭게 통합하는 과정이 도전적이었습니다.",
+    "배포와 사용자 경험 고려: npm 패키지로 배포하고 다른 컴퓨터에서 쉽게 설치하고 사용할 수 있도록 설정과 문서화 작업에 많은 노력이 필요했습니다.",
+    "AI 모델의 제약 이해: AI 모델이 거래소 API와 상호작용할 때 발생할 수 있는 제약과 한계를 이해하고 이를 고려한 설계가 필요했습니다."
+  ],
+  "demoType": "images",
+  "demoImages": [
+    {
+      "url": "./ccxt-mcp-createOrderWithSL.mp4",
+      "description": "Claude와의 통합 데모: Claude 모델이 사용자 요청에 따라 실시간 암호화폐 가격을 조회하고 사용자의 요청에 따라 손절가를 정해 매매에 들어가는것을 보여줍니다.",
+      "showControls": true
+    },
+    {
+      "url": "./ccxt-mcp-winrate-analyze.mp4",
+      "description": "Claude와의 통합 데모: Claude 모델이 사용자의 과거 매매를 조화하고 사용자의 매매 패턴을 분석하는 것을 보여줍니다.",
+      "showControls": true
+    },
+    {
+      "url": "./ccxt-mcp-architecture-diagram.svg",
+      "description": "아키텍처 다이어그램: 사용자, AI 모델, MCP 서버, 그리고 암호화폐 거래소 간의 상호작용을 시각화한 다이어그램입니다."
+    },
+    {
+      "url": "./ccxt-mcp-npm.png",
+      "description": "NPM 패키지: @lazydino/ccxt-mcp NPM 패키지 페이지와 설치 통계를 보여주는 화면입니다."
+    }
+  ],
+  "futurePlans": [
+    "더 많은 AI 도구와의 통합 확장",
+    "다양한 MCP 서버 템플릿 개발",
+    "거래 전략 자동화 기능 향상",
+    "커뮤니티 기반 개발 확대"
+  ],
+  "publishPath": "프로젝트/CCXT-MCP"
+}

public/projects/ccxt-mcp/project.json

@@ -0,0 +1,83 @@
+{
+  "projectType": "project",
+  "id": "imyourbox-website",
+  "title": "아임유어박스 웹페이지",
+  "description": "Next.js, TypeScript, Tailwind CSS, Framer Motion, Payload.js, Supabase, Vercel을 활용한 회사 웹페이지입니다. 고객과 직원을 위한 웹사이트로, SMTP와 이메일 템플릿을 활용한 문의 기능과 Payload.js 기반 관리자 시스템이 특징입니다.",
+  "thumbnail": "./imyourbox-main.mp4",
+  "thumbnailOptions": {
+    "playbackRate": 2.5
+  },
+  "tags": ["웹", "풀스택"],
+  "technologies": [
+    "Next.js",
+    "Framer Motion",
+    "Shadcn UI",
+    "Tailwind CSS",
+    "TypeScript",
+    "Payload.js",
+    "Supabase",
+    "nodemailer",
+    "Naver Map API",
+    "Kakao OpenChat Link API",
+    "Vercel"
+  ],
+  "serviceUrl": "https://imyourbox.com",
+  "featured": true,
+  "createdAt": "2025-02-27",
+  "overview": "1인 외주로 진행한 풀필먼트 회사 웹페이지 프로젝트입니다. Next.js와 다양한 기술을 활용하여 개발하였으며, 회사 관계자가 직접 콘텐츠를 관리할 수 있도록 관리자 기능을 제공합니다.",
+  "features": [
+    "Payload.js를 활용한 관리자 페이지 구현",
+    "데이터 CSV 형식으로 추출하는 기능 구현",
+    "Zod와 React Hook Form을 활용한 데이터 검증",
+    "기업 뉴스, 연혁, 지도, 공지사항을 관리할 수 있는 기능",
+    "고객 문의 제출 및 이메일 전송 자동화",
+    "Framer Motion을 활용한 Parallax 스크롤 애니메이션",
+    "Naver 지도 API를 통한 위치 정보 시각화",
+    "Kakao 오픈채팅 링크 API 연동",
+    "Supabase를 활용한 데이터 저장 및 관리",
+    "모든 디바이스를 지원하는 반응형 디자인"
+  ],
+  "lessons": "이 프로젝트를 통해 Next.js의 App Router와 API 라우팅, Payload.js를 활용한 헤드리스 CMS 구현 방법을 배웠습니다. 또한 SMTP 연동, 이메일 템플릿 작성, 그리고 여러 외부 API와의 통합 경험을 쌓을 수 있었습니다. 혼자 외주를 받아 진행한 프로젝트인 만큼 클라이언트와 소통하며 의견을 조율하는 커뮤니케이션 능력도 크게 향상되었습니다.",
+  "challenges": [
+    "디자이너가 존재하지 않아 디자인을 새로 만들어야 했습니다.",
+    "Payload.js와 Supabase 통합: 외부 데이터베이스(Supabase)와 Payload.js를 연동하여 데이터를 저장하고 관리하는 과정에서 복잡한 관계 설정이 필요했습니다.",
+    "복잡한 애니메이션 구현: Framer Motion을 사용한 Parallax 스크롤 애니메이션의 성능 최적화가 어려웠으며, 다양한 디바이스에서 일관된 경험을 제공하기 위한 조정이 필요했습니다.",
+    "네이버 지도 API 커스터마이징: 네이버 지도 API를 활용하여 맞춤형 마커와 팝업 창을 구현하는 과정에서 API 문서 부족으로 인한 어려움이 있었습니다.",
+    "이메일 템플릿 반응형 설계: 다양한 이메일 클라이언트에서 일관되게 표시되는 반응형 이메일 템플릿을 설계하는 것이 예상보다 복잡했습니다.",
+    "고객 요구사항 변경 대응: 개발 중간에 추가되는 요구사항을 기존 구조를 최대한 유지하면서 효율적으로 통합하는 설계가 필요했습니다."
+  ],
+  "demoType": "images",
+  "demoImages": [
+    {
+      "url": "./imyourbox-main.mp4",
+      "description": "메인 페이지: 서비스의 핵심 내용을 한눈에 볼 수 있는 랜딩 페이지입니다. 애니메이션과 반응형 디자인으로 사용자 경험을 강화했습니다."
+    },
+    {
+      "url": "./imyourbox-parallax-example.mp4",
+      "description": "Parallax 스크롤 이펙트: Framer Motion을 활용하여 구현한 입체감 있는 스크롤 효과입니다."
+    },
+    {
+      "url": "./imyourbox-admin-collections.png",
+      "description": "관리자 대시보드: Payload.js를 통해 구현된 관리자 패널입니다. 회사 직원이 콘텐츠를 쉽게 관리할 수 있습니다. 회사 사이트 내의 공지사항 모달, 회사 뉴스, 회사 연혁, 회사의 위치 소개를 추가하고 삭제하며 관리하고 사이트의 콘텐츠를 관리할 수 있습니다. 또한 사이트를 통한 문의 내역을 저장하여 확인하고 수정할 수 있습니다."
+    },
+    {
+      "url": "./imyourbox-csv-example.mp4",
+      "description": "CSV 추출을 위한 커스텀 버튼: 요구사항에 맞춰 추가한 Payload의 커스텀 컴포넌트로 Payload에 저장된 고객 문의 사항들을 CSV 파일로 추출하는 기능을 구현한 버튼입니다.",
+      "showControls": true
+    },
+    {
+      "url": "./imyourbox-map-example.mp4",
+      "description": "위치 정보 페이지: 네이버 지도 API를 활용하여 회사 위치와 근처 주요 시설을 표시한 지도 기능입니다. Payload를 통해 추가되고 수정됩니다."
+    },
+    {
+      "url": "./imyourbox-inquiry-example.mp4",
+      "description": "문의 기능: nodemailer를 활용하여 문의 내용을 회사 이메일로 전송하는 기능입니다. 전송과 동시에 문의 내용이 Payload API를 활용하여 Supabase에 저장됩니다.",
+      "playbackRate": 2.5
+    },
+    {
+      "url": "./imyourbox-mail-blurry.png",
+      "description": "이메일 템플릿: 사이트를 통해 회사로 이메일이 전달되었을 때의 디자인입니다."
+    }
+  ],
+  "publishPath": "프로젝트/아임유어박스 웹사이트"
+}

public/projects/imyourbox/project.json

@@ -0,0 +1,58 @@
+{
+  "projectType": "project",
+  "id": "lazy-trading",
+  "title": "LazyTrading 크롬 확장프로그램",
+  "description": "Vite, React, Typescript, Tailwind CSS, ReactQuery, Light Weight Chart를 사용하여 개발한 크롬 확장 프로그램입니다. 자동으로 계산된 손절가와 진입 배율을 활용해 한 번의 클릭으로 안전한 매매를 가능하게 하는 것을 목적으로 합니다.",
+  "thumbnail": "./lazy-trading.png",
+  "inDevelopment": false,
+  "demoType": "images",
+  "demoImages": [
+    {
+      "url": "./lazy-trading.png",
+      "description": "대시보드 화면: 실시간 가격 정보와 함께 거래 설정을 할 수 있는 메인 인터페이스입니다."
+    }
+  ],
+  "tags": ["가상화폐", "웹", "시각화", "프론트엔드"],
+  "technologies": [
+    "React",
+    "Vite",
+    "TypeScript",
+    "Tailwind CSS",
+    "Shadcn UI",
+    "Light Weight Chart",
+    "React Query",
+    "Crypto 모듈"
+  ],
+  "serviceUrl": "https://chromewebstore.google.com/detail/lazytrading/cacdlclfkbngdkffeofgniiaikelelai?hl=ko",
+  "featured": true,
+  "createdAt": "2023-10-15",
+  "overview": "가상화폐 거래소 바이낸스 웹사이트에서 사용할 수 있는 크롬 확장 프로그램으로, 안전한 거래를 위한 손절가 및 진입 배율을 자동으로 계산하여 빠르고 효율적인 트레이딩을 도와주는 도구입니다. 이 프로젝트에서는 API 키 보안을 위한 Crypto 모듈의 활용이 큰 특징입니다.",
+  "features": [
+    "위험 관리를 위한 자동 손절가 계산 기능",
+    "다양한 진입 배율 옵션 제공",
+    "Light Weight Chart를 활용한 실시간 차트 시각화",
+    "원클릭 주문 기능으로 빠른 거래 실행",
+    "거래 히스토리 추적 및 분석",
+    "Crypto 모듈을 활용한 API 키 암호화 및 보안 관리"
+  ],
+  "lessons": "이 프로젝트를 통해 브라우저 확장 프로그램 개발 방법과 트레이딩 알고리즘 구현, 실시간 데이터 처리 및 시각화에 대한 경험을 쌓았습니다. 또한 사용자 인터페이스를 통한 복잡한 계산의 단순화 및 자동화 구현 방법을 익혔습니다.",
+  "challenges": [
+    "브라우저 확장 프로그램 환경 제약: Manifest V3 규칙을 준수하면서 필요한 기능을 구현하는 과정에서 보안 정책으로 인한 제약을 극복해야 했습니다.",
+    "바이낸스 API 연동: 거래소 API와의 안전한 통신을 위한 인증 및 요청 관리가 복잡했으며, 레이트 리밋 등을 고려한 최적화가 필요했습니다.",
+    "실시간 차트 최적화: 가벼운 차트 라이브러리를 사용하면서도 복잡한 기술적 지표를 표시하기 위한 성능 최적화가 어려웠습니다.",
+    "위험 관리 알고리즘 정확성: 다양한 시장 조건에서도 정확한 손절가와 진입 배율을 계산하기 위한 알고리즘 설계와 테스트가 필요했습니다.",
+    "사용자 설정 관리: 크롬 확장 프로그램의 스토리지 제약 내에서 사용자 설정을 효율적으로 저장하고 관리하는 방법을 구현해야 했습니다."
+  ],
+  "futurePlans": [
+    "다양한 손절가 계산 방식 추가",
+    "차트와 직접 인터랙션하며 손절 및 타겟 설정하는 기능",
+    "다양한 거래소 지원 확장",
+    "실시간 알림 및 거래 모니터링 기능",
+    "실시간 채팅 기능 추가",
+    "자동화된 거래 전략 구현",
+    "백엔드 추가로 매매 기록 저장 및 평가 기능",
+    "백테스팅 도구 추가",
+    "모바일 앱 버전 개발"
+  ],
+  "publishPath": "프로젝트/LazyTrading"
+}

public/projects/lazy-trading/project.json

@@ -0,0 +1,74 @@
+{
+  "projectType": "project",
+  "id": "my-blog",
+  "title": "개인 블로그",
+  "description": "Next.js, TypeScript, Tailwind CSS를 사용하여 개발한 개인 블로그입니다. 마크다운 기반 콘텐츠 관리와 다크 모드를 지원합니다.",
+  "thumbnail": "./my-blog.png",
+  "tags": ["웹", "풀스택"],
+  "technologies": [
+    "Next.js",
+    "TypeScript",
+    "Tailwind CSS",
+    "Framer Motion",
+    "Shadcn UI",
+    "EsHangul"
+  ],
+  "githubUrl": "https://github.com/lazy-dinosaur/lazy-dinosaur.github.io",
+  "serviceUrl": "https://lazy-dinosaur.github.io/",
+  "featured": true,
+  "createdAt": "2025-03-05",
+  "overview": "마크다운 파일을 기반으로 콘텐츠를 관리하는 개인 블로그 프로젝트입니다. Next.js의 App Router와 TypeScript를 활용해 개발했으며, 저 스스로의 필요에 맞게 자동화했습니다. 이 블로그의 주요 특징은 노트 작성 중 언제든지 Neovim 커맨드를 통해 즉시 블로그에 포스팅할 수 있다는 점입니다.",
+  "features": [
+    "Neovim과 Obsidian을 통한 자동화된 마크다운 기반 콘텐츠 관리 시스템",
+    "명령어를 통한 노트 동기화 기능",
+    "다크 모드 지원 및 테마 전환 기능",
+    "반응형 레이아웃으로 모든 디바이스 지원",
+    "목차 자동 생성 및 스크롤 위치 추적",
+    "코드 구문 강조 및 복사 기능",
+    "한글 검색 기능 및 하이라이팅 기능"
+  ],
+  "lessons": "이 프로젝트를 통해 Next.js의 App Router 구조와 서버 컴포넌트 활용법을 배웠습니다. 또한 마크다운 파일 파싱과 렌더링 최적화, 그리고 애니메이션 처리에 관한 경험을 쌓을 수 있었습니다.",
+  "challenges": [
+    "Next.js의 App Router와 Server Components 모델 적응: 기존 Pages Router에서 App Router로 전환하면서 서버 컴포넌트와 클라이언트 컴포넌트의 구분 및 데이터 흐름을 이해하는 데 시간이 소요되었습니다.",
+    "마크다운 파싱 최적화: 코드 블록, 수식, 이미지 등 다양한 마크다운 확장 기능을 지원하면서도 빠른 렌더링을 위한 최적화 과정이 필요했습니다.",
+    "다크 모드 구현: 테마 전환 시 깜박임 없는 부드러운 전환을 구현하기 위해 여러 테스트를 거쳐야 했습니다.",
+    "모바일 반응형 디자인: 사이드바, 목차, 코드 블록 등 복잡한 요소들의 모바일 레이아웃 최적화가 어려웠습니다.",
+    "Next.js의 특정 훅 사용 제약: Suspense 경계 내에서만 사용 가능한 훅들로 인해 컴포넌트 구조를 재설계해야 했습니다."
+  ],
+  "demoType": "images",
+  "demoImages": [
+    {
+      "url": "./blog-sync-example.mp4",
+      "description": "파이썬 스크립트를 통한 노트 동기화: 스크립트를 통해 블로그에 필요한 파일들을 생성하고 자동으로 분류합니다.",
+      "showControls": true
+    },
+    {
+      "url": "./blog-post-example.mp4",
+      "description": "Neovim과의 통합: Neovim을 통해 노트를 작성하면서 커맨드를 통해 블로그를 바로 포스팅할 수 있습니다.",
+      "showControls": true,
+      "playbackRate": 2.5
+    },
+    {
+      "url": "./blog-search-example.mp4",
+      "description": "한글 검색기능: 전체 노트의 타이틀, 태그, 본문을 검색하며 한글의 자모음을 분리하여 검색해 부자연스러운 결과를 없앴습니다.",
+      "showControls": true
+    },
+    {
+      "url": "./blog-toc-example.mp4",
+      "description": "목차 생성: 마크다운을 읽으면서 목차를 생성하고 스크롤하여 화면에 보이는 문서상의 위치를 하이라이팅하며 클릭 시 해당 위치로 이동합니다."
+    }
+  ],
+  "futurePlans": [
+    "시리즈별/태그별 검색기능 추가",
+    "댓글 기능 추가",
+    "옵시디언 스타일의 그래프뷰 구현",
+    "관련 페이지 추천 기능",
+    "소셜 미디어 공유 기능 구현",
+    "성능 최적화 및 lighthouse 점수 개선",
+    "다국어 지원 기능 추가",
+    "영상 임베드 처리",
+    "마크다운 데이터 전처리 과정 개선",
+    "임베드되는 파일들 버킷으로 관리 및 자동화"
+  ],
+  "publishPath": "프로젝트/개인 블로그"
+}