{"id":39223387,"url":"https://github.com/devlikebear/aiapps","last_synced_at":"2026-01-17T23:32:05.932Z","repository":{"id":318709349,"uuid":"1072835795","full_name":"devlikebear/aiapps","owner":"devlikebear","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-19T02:48:13.000Z","size":5741,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-19T05:52:59.050Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://aiapps-three.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devlikebear.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-09T09:24:40.000Z","updated_at":"2025-10-19T02:48:16.000Z","dependencies_parsed_at":"2025-10-10T07:02:52.550Z","dependency_job_id":"6b618074-4450-4e86-9275-8aea38f06552","html_url":"https://github.com/devlikebear/aiapps","commit_stats":null,"previous_names":["devlikebear/aiapps"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devlikebear/aiapps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlikebear%2Faiapps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlikebear%2Faiapps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlikebear%2Faiapps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlikebear%2Faiapps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devlikebear","download_url":"https://codeload.github.com/devlikebear/aiapps/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlikebear%2Faiapps/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28522306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T22:11:28.393Z","status":"ssl_error","status_checked_at":"2026-01-17T22:11:27.841Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-17T23:32:05.877Z","updated_at":"2026-01-17T23:32:05.923Z","avatar_url":"https://github.com/devlikebear.png","language":"TypeScript","readme":"# AI Apps - Gemini 기반 멀티모달 생성 도구\n\n\u003cdiv align=\"center\"\u003e\n\n![AI Apps Banner](public/banner.png)\n\n**Gemini AI를 활용한 게임 오디오 \u0026 아트 생성 플랫폼**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Version](https://img.shields.io/badge/Version-1.0.0-blue)](https://github.com/devlikebear/aiapps/releases/tag/v1.0.0)\n[![Next.js](https://img.shields.io/badge/Next.js-15.5-black)](https://nextjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue)](https://www.typescriptlang.org/)\n[![Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black)](https://vercel.com)\n\n[데모 보기](#) | [문서](./CLAUDE.md) | [API 명세](./docs/API.md) | [배포 가이드](./DEPLOY.md) | [기여하기](./CONTRIBUTING.md)\n\n\u003c/div\u003e\n\n---\n\n## 📖 목차\n\n- [소개](#-소개)\n- [주요 기능](#-주요-기능)\n- [기술 스택](#-기술-스택)\n- [시작하기](#-시작하기)\n- [사용 방법](#-사용-방법)\n- [프로젝트 구조](#-프로젝트-구조)\n- [개발](#-개발)\n- [배포](#-배포)\n- [라이선스](#-라이선스)\n\n---\n\n## 🎯 소개\n\n**AI Apps**는 Google Gemini AI를 활용하여 게임 개발자와 크리에이터를 위한 멀티모달 콘텐츠를 생성하는 웹 애플리케이션입니다.\n\n### 포함된 앱\n\n1. **🎵 AI 게임 오디오 생성기**\n   - Gemini Lyria RealTime API 기반\n   - 실시간 배경 음악 및 효과음 생성\n   - 장르, 분위기, BPM, 악기 커스터마이징\n\n2. **🎨 AI 2D 게임 아트 생성기**\n   - Gemini 2.5 Flash Image API 기반\n   - 2D 픽셀 아트, 캐릭터, 배경 생성\n   - 이미지 편집 및 스타일 전이 지원\n\n3. **📝 AI 트윗 생성기**\n   - Gemini AI 기반 소셜 미디어 콘텐츠 생성\n   - 톤, 길이, 해시태그, 이모지 커스터마이징\n   - Twitter(X) 공유 및 Google Drive 저장 지원\n\n---\n\n## ✨ 주요 기능\n\n### 🎵 오디오 생성기\n\n- **프롬프트 빌더**: 장르, 분위기, BPM, 악기, 길이 설정\n- **실시간 생성**: WebSocket 스트리밍으로 빠른 생성\n- **미리듣기**: 생성 전 프롬프트 미리보기\n- **라이브러리 관리**: 태그 필터링, 검색, 다운로드\n- **배경 작업 큐**: 여러 오디오 동시 생성\n\n### 🎨 아트 생성기\n\n- **프롬프트 빌더**: 스타일, 주제, 색상 팔레트 선택\n- **다양한 종횡비**: 1:1, 16:9, 9:16 등 지원\n- **이미지 편집**: 생성된 이미지 수정 기능\n- **스타일 전이**: 참조 이미지의 스타일 적용\n- **갤러리 관리**: 태그 필터링, 검색, 다운로드\n\n### 📝 트윗 생성기\n\n- **프롬프트 빌더**: 톤, 길이, 해시태그, 이모지 설정\n- **톤 다양화**: Casual, Professional, Funny, Inspirational\n- **길이 옵션**: Short (140자), Medium (240자), Long (280자)\n- **소셜 공유**: Twitter(X) 직접 공유\n- **클라우드 저장**: Google Drive에 트윗 내용 자동 저장\n- **라이브러리 관리**: 생성된 트윗 통합 관리\n\n### 🔐 보안 \u0026 개인정보\n\n- **클라이언트 측 API 키 관리**: 서버에 키를 저장하지 않음\n- **AES-256-GCM 암호화**: 브라우저 localStorage에 안전하게 저장\n- **디바이스 지문 기반**: 각 디바이스별 고유 암호화 키\n\n### 📊 관찰성 \u0026 성능\n\n- **Vercel Speed Insights**: 실시간 성능 모니터링\n- **Core Web Vitals**: LCP, CLS, TTFB, INP 추적\n- **에러 바운더리**: 사용자 친화적 에러 처리\n- **구조화된 로깅**: 서버 측 상세 로그\n\n---\n\n## 🛠️ 기술 스택\n\n### Frontend\n\n- **[Next.js 15](https://nextjs.org/)**: React 프레임워크 (App Router)\n- **[TypeScript](https://www.typescriptlang.org/)**: 타입 안전성\n- **[Tailwind CSS](https://tailwindcss.com/)**: 유틸리티 우선 스타일링\n- **[Zustand](https://github.com/pmndrs/zustand)**: 상태 관리\n\n### AI \u0026 API\n\n- **[Gemini Lyria RealTime](https://ai.google.dev/)**: 음악 생성 API\n- **[Gemini 2.5 Flash Image](https://ai.google.dev/)**: 이미지 생성 API\n- **WebSocket**: 실시간 스트리밍\n\n### 데이터 \u0026 저장소\n\n- **[IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)**: 클라이언트 측 데이터베이스\n- **localStorage**: 작업 큐 및 설정 저장\n\n### 테스트 \u0026 품질\n\n- **[Vitest](https://vitest.dev/)**: 단위/통합 테스트\n- **[Playwright](https://playwright.dev/)**: E2E 테스트\n- **[ESLint](https://eslint.org/)**: 코드 린팅\n- **[Prettier](https://prettier.io/)**: 코드 포맷팅\n\n### 배포 \u0026 모니터링\n\n- **[Vercel](https://vercel.com/)**: 배포 플랫폼\n- **[Vercel Analytics](https://vercel.com/analytics)**: 사용자 분석\n- **[Vercel Speed Insights](https://vercel.com/docs/speed-insights)**: 성능 모니터링\n\n---\n\n## 🚀 시작하기\n\n### 사전 요구 사항\n\n- **Node.js**: \u003e= 20.0.0\n- **npm**: \u003e= 10.0.0\n- **Gemini API 키**: [Google AI Studio](https://makersuite.google.com/app/apikey)에서 발급\n\n### 설치\n\n1. **리포지토리 클론**\n\n   ```bash\n   git clone https://github.com/devlikebear/aiapps.git\n   cd aiapps\n   ```\n\n2. **의존성 설치**\n\n   ```bash\n   npm install\n   ```\n\n3. **개발 서버 실행**\n\n   ```bash\n   npm run dev\n   ```\n\n4. **브라우저에서 열기**\n\n   [http://localhost:3000](http://localhost:3000)\n\n---\n\n## 📱 사용 방법\n\n### 1. API 키 설정\n\n1. [Google AI Studio](https://makersuite.google.com/app/apikey)에서 Gemini API 키 발급\n2. 앱에서 **Settings** 페이지로 이동\n3. **API Key Settings** 섹션에 API 키 입력\n4. **Save** 버튼 클릭\n\n\u003e **참고**: API 키는 브라우저 localStorage에 AES-256-GCM 암호화되어 저장됩니다. 서버로 전송되지 않습니다.\n\n### 2. 오디오 생성\n\n1. **오디오 생성기** 페이지로 이동\n2. **프롬프트 빌더**에서 설정:\n   - 장르 선택 (Orchestral, Electronic, Ambient 등)\n   - 분위기 선택 (Epic, Calm, Suspense 등)\n   - BPM 설정 (60-200)\n   - 악기 선택\n   - 길이 설정 (초 단위)\n3. **Generate** 버튼 클릭\n4. 생성 완료 후:\n   - 미리듣기\n   - 다운로드 (.wav)\n   - 라이브러리에 저장\n\n### 3. 아트 생성\n\n1. **아트 생성기** 페이지로 이동\n2. **프롬프트 빌더**에서 설정:\n   - 스타일 선택 (Pixel Art, Cartoon, Realistic 등)\n   - 주제 선택 (Character, Background, Item 등)\n   - 색상 팔레트 선택\n   - 종횡비 선택 (1:1, 16:9, 9:16 등)\n   - 프롬프트 입력\n3. **Generate** 버튼 클릭\n4. 생성 완료 후:\n   - 이미지 미리보기\n   - 다운로드 (.png)\n   - 편집 또는 스타일 전이\n   - 갤러리에 저장\n   - Google Drive에 저장\n\n### 4. 트윗 생성\n\n1. **트윗 생성기** 페이지로 이동\n2. **프롬프트 빌더**에서 설정:\n   - 콘텐츠 설명 입력\n   - 톤 선택 (Casual, Professional, Funny, Inspirational)\n   - 길이 선택 (Short, Medium, Long)\n   - 해시태그 포함 여부\n   - 이모지 포함 여부\n3. **Generate** 버튼 클릭\n4. 생성 완료 후:\n   - 트윗 내용 미리보기\n   - Twitter(X)로 직접 공유\n   - Google Drive에 저장\n   - 라이브러리에 저장\n\n### 5. 미디어 라이브러리\n\n- **필터링**: 태그, 미디어 타입(오디오/이미지/트윗)별 필터\n- **검색**: 프롬프트 기반 검색\n- **정렬**: 날짜, 이름순 정렬\n- **일괄 작업**: 여러 미디어 선택 후 다운로드/삭제\n- **클라우드 동기화**: Google Drive와 자동 동기화\n\n---\n\n## 📁 프로젝트 구조\n\n```\naiapps/\n├── app/                          # Next.js App Router\n│   ├── apps/\n│   │   ├── audio-generator/      # 오디오 생성기 페이지\n│   │   ├── art-generator/        # 아트 생성기 페이지\n│   │   └── tweet-generator/      # 트윗 생성기 페이지\n│   ├── api/                      # API Routes\n│   │   ├── audio/                # 오디오 생성 API\n│   │   ├── art/                  # 아트 생성 API\n│   │   ├── tweet/                # 트윗 생성 API\n│   │   ├── google-drive/         # Google Drive 통합\n│   │   └── settings/             # 설정 API\n│   ├── settings/                 # 설정 페이지\n│   ├── library/                  # 통합 미디어 라이브러리\n│   ├── components/               # React 컴포넌트\n│   ├── lib/                      # 유틸리티, 스토어, DB\n│   │   ├── api-key/              # API 키 암호화\n│   │   ├── db/                   # IndexedDB 관리\n│   │   ├── monitoring/           # 성능 모니터링\n│   │   ├── queue/                # 배경 작업 큐\n│   │   ├── tweet/                # 트윗 생성 클라이언트\n│   │   └── stores/               # Zustand 스토어\n│   └── layout.tsx                # 루트 레이아웃\n├── e2e/                          # E2E 테스트 (Playwright)\n├── public/                       # 정적 파일\n├── docs/                         # 문서\n│   └── API.md                    # API 명세\n├── .github/                      # GitHub 설정\n├── CHANGELOG.md                  # 변경 로그\n├── CLAUDE.md                     # 개발자 가이드\n├── DEPLOY.md                     # 배포 가이드\n├── PLAN.md                       # 프로젝트 계획\n└── package.json\n```\n\n---\n\n## 💻 개발\n\n### 개발 명령어\n\n```bash\n# 개발 서버 실행\nnpm run dev\n\n# 프로덕션 빌드\nnpm run build\n\n# 프로덕션 서버 실행\nnpm run start\n\n# 린트 검사\nnpm run lint\n\n# 린트 자동 수정\nnpm run lint:fix\n\n# 타입 체크\nnpm run type-check\n\n# 단위/통합 테스트\nnpm run test\n\n# E2E 테스트\nnpm run test:e2e\n\n# 번들 분석\nnpm run analyze\n\n# 코드 포맷팅\nnpm run format\n```\n\n### 환경 변수\n\n개발 환경에서는 환경 변수가 필요하지 않습니다. API 키는 클라이언트 측에서 관리됩니다.\n\n프로덕션 배포 시 필요한 환경 변수는 [DEPLOY.md](./DEPLOY.md)를 참고하세요.\n\n### 코딩 규칙\n\n- **TypeScript**: strict mode 사용\n- **ESLint**: `npm run lint`로 검사\n- **Prettier**: `npm run format`으로 포맷팅\n- **Commit**: Conventional Commits 규칙 준수\n\n```bash\n# 예시\nfeat(audio): add new genre options\nfix(api): handle rate limit errors\ndocs(readme): update installation steps\n```\n\n---\n\n## 🚀 배포\n\n### Vercel 배포 (권장)\n\n자세한 배포 가이드는 [DEPLOY.md](./DEPLOY.md)를 참고하세요.\n\n**간단한 배포 방법**:\n\n1. [Vercel](https://vercel.com)에 GitHub 계정으로 로그인\n2. **New Project** 클릭\n3. `aiapps` 리포지토리 선택\n4. **Deploy** 클릭\n\n배포 후 사용자에게 Settings 페이지에서 API 키를 입력하도록 안내하세요.\n\n### 자체 호스팅\n\n```bash\n# 프로덕션 빌드\nnpm run build\n\n# 프로덕션 서버 실행\nnpm run start\n```\n\n---\n\n## 🧪 테스트\n\n### E2E 테스트\n\n```bash\n# E2E 테스트 실행\nnpm run test:e2e\n\n# UI 모드로 실행\nnpx playwright test --ui\n\n# 특정 브라우저만 테스트\nnpx playwright test --project=chromium\n```\n\n자세한 테스트 가이드는 [e2e/README.md](./e2e/README.md)를 참고하세요.\n\n---\n\n## 🤝 기여하기\n\n기여를 환영합니다! 자세한 내용은 [CONTRIBUTING.md](./CONTRIBUTING.md)를 참고하세요.\n\n### 기여 절차\n\n1. 리포지토리 포크\n2. 피처 브랜치 생성 (`git checkout -b feature/amazing-feature`)\n3. 변경사항 커밋 (`git commit -m 'feat: add amazing feature'`)\n4. 브랜치 푸시 (`git push origin feature/amazing-feature`)\n5. Pull Request 생성\n\n---\n\n## 📄 라이선스\n\n이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 [LICENSE](./LICENSE) 파일을 참고하세요.\n\n---\n\n## 🙏 감사의 말\n\n- [Google Gemini AI](https://ai.google.dev/) - AI 모델 제공\n- [Vercel](https://vercel.com/) - 배포 플랫폼\n- [Next.js](https://nextjs.org/) - React 프레임워크\n- 모든 오픈소스 기여자들\n\n---\n\n## 📞 문의\n\n- **이슈**: [GitHub Issues](https://github.com/devlikebear/aiapps/issues)\n- **이메일**: devlikebear@gmail.com\n- **문서**: [프로젝트 문서](./CLAUDE.md)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ by [devlikebear](https://github.com/devlikebear)**\n\n[⬆ 맨 위로](#ai-apps---gemini-기반-멀티모달-생성-도구)\n\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlikebear%2Faiapps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevlikebear%2Faiapps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlikebear%2Faiapps/lists"}