본 사이트는 파트너스 활동으로 수수료를 받을 수 있으며, 서버 운영과 무료 앱 개발에 사용됩니다. 본 사이트는 파트너스 활동으로 수수료를 받을 수 있으며
서버 운영과 무료 앱 개발에 사용됩니다.
CDB 큐레이터 단비's 웹앱 아이디어 창고
템플릿 메인으로

나만의 AI 서비스 만들기

2개의 AI 템플릿으로 나만의 AI 서비스를 만들어보세요
API 키만 입력하면 바로 사용 가능합니다

API 키 가이드 포함Gemini & OpenRouter

중요: 다운로드 후 .env.local 파일에 API 키를 입력해야 사용할 수 있습니다.API 키를 GitHub에 절대 커밋하지 마세요!

AI 서비스란?

인공지능 API를 활용하여 사용자와 대화하거나, AI끼리 토론하는 등의 서비스를 직접 만들 수 있습니다. 코딩 지식이 없어도 템플릿을 다운로드하고 API 키만 입력하면 바로 사용할 수 있습니다.

AI 채팅

사용자와 AI가 1:1로 대화하는 챗봇 서비스

AI 멀티 에이전트

여러 AI가 서로 토론하고 협업하는 시뮬레이션

무료 API

Gemini, OpenRouter 무료 등급으로 시작

완성된 코드

Next.js + TypeScript 풀스택 템플릿 제공

AI 템플릿 (2개)

원하는 AI 서비스 템플릿을 선택하세요

미리보기
AI 서비스
AI 채팅

단독 AI 채팅

사용자와 AI가 1:1로 대화하는 채팅 서비스입니다. Gemini 또는 OpenRouter API를 사용하여 다양한 대화를 나눌 수 있습니다.

필요한 API 키
GEMINI_APIOPEN_ROUTER_API

Gemini API 또는 OpenRouter API 중 하나만 입력해도 작동합니다.

AI채팅GeminiOpenRouter
  • 실시간 스트리밍 응답
  • 마크다운 지원
  • 대화 히스토리
미리보기
AI 서비스
AI 시뮬레이션

AI 끼리 채팅

두 AI가 주어진 주제에 대해 서로 토론하고 대화하는 시뮬레이션입니다. AI들의 자연스러운 대화를 관찰할 수 있습니다.

필요한 API 키
GEMINI_APIOPEN_ROUTER_API

AI 간 대화를 위해 API 키가 필요합니다. 두 키 모두 입력하면 각 AI가 다른 모델을 사용합니다.

AI토론시뮬레이션멀티 에이전트
  • AI 간 자동 대화
  • 토론 주제 설정
  • 대화 속도 조절

API 키 발급 & 설정 가이드

AI 템플릿을 사용하기 위해 API 키가 필요합니다. 아래 가이드를 따라 무료로 API 키를 발급받으세요.

⚠️ 보안 필수 주의사항

❌ 절대 하지 마세요

  • ✗API 키를 GitHub, GitLab 등 공개 저장소에 커밋
  • ✗API 키를 소스 코드에 직접 하드코딩
  • ✗API 키를 타인과 공유하거나 공개

✅ 반드시 이렇게 하세요

  • ✓.env.local 파일에만 저장
  • ✓.gitignore에 .env.local 포함 확인
  • ✓Vercel 배포 시 환경변수 설정 사용
G

Gemini API

Google AI Studio에서 무료 발급

무료 등급 제공분당 15회 요청일일 1,500회

📋발급 단계

  1. 1

    Google AI Studio 접속

    aistudio.google.com/app/apikey
  2. 2

    Google 계정으로 로그인

    일반 Gmail 계정으로 바로 사용 가능

  3. 3

    "Create API Key" 버튼 클릭

    새 프로젝트 생성 → API 키 자동 생성

  4. 4

    API 키 복사 후 안전하게 보관

    AIzaSy... 형태의 키

💡 Gemini API 특징

  • • Gemini 2.0 Flash, Gemini 1.5 Pro 등 최신 모델 사용
  • • 텍스트, 이미지, 코드 생성 모두 지원
  • • 한국어 자연어 처리 우수
O

OpenRouter API

다양한 AI 모델을 하나의 API로

무료 모델 제공100+ AI 모델통합 API

📋발급 단계

  1. 1

    OpenRouter 접속

    openrouter.ai/keys
  2. 2

    Google/GitHub 계정으로 가입

    간편 소셜 로그인으로 빠른 가입

  3. 3

    "Create Key" 버튼 클릭

    키 이름 입력 후 생성 완료

  4. 4

    API 키 복사 (크레딧 충전은 선택)

    sk-or-v1-... 형태의 키

💡 OpenRouter 특징

  • • GPT-4, Claude, Llama, Mistral 등 100+ 모델 지원
  • • 무료 모델: Llama 3.1, Mistral, Devstral, Qwen 등
  • • 하나의 API로 여러 모델 전환 가능

로컬 개발 환경 설정

1

템플릿 다운로드 후 압축 해제

원하는 폴더에 압축 해제 후 VS Code 등 에디터로 열기

2

.env.local 파일 생성 및 API 키 입력

# .env.local 파일 내용
GEMINI_API=AIzaSy...여기에_제미나이_API_키
OPEN_ROUTER_API=sk-or-v1-...여기에_오픈라우터_API_키
3

패키지 설치 및 개발 서버 실행

$ npm install
$ npm run dev

브라우저에서 localhost:3000 접속

Vercel 배포 가이드

1

GitHub에 프로젝트 업로드

⚠️ .env.local 파일은 절대 업로드하지 마세요!

2

Vercel에서 프로젝트 Import

vercel.com/new
3

Environment Variables 설정

# Settings → Environment Variables
GEMINI_API = AIzaSy...
OPEN_ROUTER_API = sk-or-v1-...
4

Deploy 버튼 클릭

자동 빌드 후 HTTPS URL이 생성됩니다

📚 Vercel 환경변수 공식 문서

자주 묻는 질문

Q. 코딩 지식이 없어도 사용할 수 있나요?

네! API 키 설정과 GitHub 덤프만으로 배포가 가능합니다. 더 심화된 기능을 원하신다면 AI 바이브 코딩 도구를 활용해 보세요. AI가 코드를 직접 설명하고 수정해 주기 때문에, 대화만으로도 전문가 수준의 사이트를 완성할 수 있습니다.

CursorWindsurfAntigravityKiro

Q. 템플릿을 수정해도 되나요?

그럼요! 이 템플릿은 학습과 확장을 위한 베이스입니다. AI에게 "여기에 이미지 생성 기능을 추가해줘"라고 요청해 보세요. 바이브 코딩의 정수는 기존 코드를 수정하며 성장하는 것입니다. 나만의 독창적인 AI 페르소나를 입혀보세요!

Q. 왜 이 템플릿을 무료로 제공하나요?

2025년 바이브 코딩 시대의 가능성을 보여드리기 위해 기여하고 있습니다. 지식의 나눔이 더 큰 성장을 만든다고 믿습니다. 누구나 AI 개발자의 생산성을 가질 수 있도록 돕는 것이 이 프로젝트의 목표입니다.

Q. API 비용이 많이 발생하지 않나요?

Gemini API는 현재 매우 관대한 무료 등급을 제공하며, OpenRouter의 무료 모델을 쓰면 운영비가 0원입니다. 트래픽이 많아지면 유료로 전환하되, 그전까지는 무상으로 무제한 실험이 가능합니다.

Q. Node.js를 꼭 설치해야 하나요?

로컬 환경에서 코드를 실행해 보고 수정 내용을 실시간으로 확인하려면 Node.js 환경이 필수입니다. nodejs.org에서 설치 후 npm install 한 번이면 개발 환경 세팅이 완료됩니다.

Q. 모바일과 태블릿 최적화는요?

당연합니다! 반응형 웹 기술을 적용하여 모든 스마트 기기에서 자연스러운 유저 경험을 제공합니다. Tailwind CSS의 그리드 시스템으로 각 기기에 맞는 최적의 레이아웃을 보장합니다.

Q. 검색 노출(SEO)을 잘 받으려면?

Next.js 16의 최신 서버 사이드 렌더링 기능을 활용합니다. 각 서비스마다 고유한 메타 태그와 OpenGraph 이미지를 설정하여 SNS 공유 시에도 높은 클릭률을 유도할 수 있습니다.

Q. 내가 원하는 모델로 바꿀 수 있나요?

네! OpenRouter를 지원하므로 코드의 모델 ID만 바꾸면 GPT, Claude, Llama 등 현존하는 거의 모든 AI 모델을 즉시 연동하여 사용할 수 있습니다.

Q. 도메인 연결은 어떻게 하나요?

Vercel에서 가비아, 아이티이지 등의 도메인을 클릭 몇 번으로 연동하세요. 클라우드플레어(Cloudflare)를 사용하면 더욱 강력한 보안과 캐싱 성능을 누릴 수 있으며, HTTPS는 자동 적용됩니다.

Q. 코딩 중 오류가 발생하면?

바이브 코딩 도구의 AI 채팅창에 에러 메시지를 복사해 넣으세요. AI가 코드의 맥락을 완벽히 이해하고 즉각적인 수정안을 제시해 줄 것입니다. 당신의 든든한 AI 사수가 상시 대기 중입니다!

Q. 템플릿의 상업적 이용이 가능한가요?

물론입니다! 이 템플릿을 활용해 수익형 서비스를 구축하거나 포트폴리오로 제출하셔도 좋습니다. 다만, 템플릿 자체를 재판매하는 행위는 지양해 주시고, 창의적인 변형을 가미해 보세요.

Q. 향후 업데이트 계획이 있나요?

지속적으로 새로운 AI 서비스 아이디어를 추가할 예정입니다. 더 강력한 Multi-Model 지원과 데이터베이스 연동이 완료된 템플릿들을 준비 중이니 자주 들러 확인해 주세요!

📚 더 자세한 가이드가 필요하신가요?

바이브 코딩과 웹사이트 제작에 대한 상세한 내용은 아래 칼럼에서 확인하세요

바이브 코딩으로 나만의 홈페이지 만들기

코딩 몰라도 OK! AI에게 말만 하면 홈페이지가 완성됩니다. Cursor AI, Vercel, Supabase 활용한 웹사이트 제작 단계별 가이드.

바이브 코딩 환상과 현실

바이브 코딩으로 1개월간 웹앱을 개발하며 겪은 환상과 현실. 실전 경험을 바탕으로 한 솔직한 조언.

Cursor 2.0: AI 코딩의 새로운 시대

Cursor 2.0의 혁신적 기능: Composer, 멀티 에이전트, 브라우저 GA, 샌드박스 터미널 등 완벽한 가이드.

💡 팁: 위 칼럼들을 읽으시면 바이브 코딩의 기본 개념부터 실전 활용법까지 모든 것을 배울 수 있습니다.