BUILD NOTEBOOK

이걸 만들면 어떤 화면이 생기는지 먼저 보세요

로컬 챗봇·이미지 AI·소셜 로그인·파일 업로드·웹게임. 완성 화면을 고른 뒤 Windows 첫 실행과 복붙 프롬프트로 넘어갑니다.

결과물 6종 보기 막힘 해결 가이드

무엇을 만들어 볼까요?

결과물을 하나 고르면 화면·도구·실행 순서가 있는 구간으로 이동합니다.

완성 화면 6종

설명보다 먼저 결과를 보고, 만들고 싶은 화면을 고르세요.

대표 만들기 흐름 — 개념 → 화면

각 흐름 위에 관련 개념 카드(Ollama·env·redirect URI 등)를 먼저 보고, 순서·프롬프트·비용 주의까지 따라 하세요.

결과물 미리보기
로컬 AI 채팅
이 문장 3줄로 요약해 줘
1) 핵심 한 줄 · 2) 왜 중요한지 · 3) 다음 행동
메시지 입력…로컬
이걸 만들면 PC 안에서 질문·답변이 이어지는 채팅창이 생깁니다.
실행 루트
로컬 챗봇 화면 — Open WebUI + Ollama
브라우저에서 질문·답변이 이어지는 채팅 UI를 내 PC에 만듭니다.
무료·저렴 도구
Ollama · Open WebUI · Docker Desktop
Windows 첫 시작 순서
ollama pull qwen2.5:3b
Docker로 Open WebUI 실행 → localhost 접속
새 채팅 3턴 테스트
모델·프롬프트 저장
만들기 전에 — 관련 개념
- Ollama
  이건 Ollama입니다
  내 PC에서 AI 모델을 받아 실행하는 프로그램입니다. ChatGPT처럼 클라우드에 보내지 않고 로컬에서 답합니다.
  모델 파일을 내 디스크에 받아 둡니다
  터미널에서 ollama run 으로 바로 대화합니다
  지금 · Windows: ollama.com 설치 → ollama pull qwen2.5:3b → ollama run qwen2.5:3b
  비용 아끼기에서 보기
- Open WebUI
  이건 Open WebUI입니다
  Ollama 위에 얹는 ChatGPT 비슷한 채팅 화면입니다. 브라우저에서 대화·히스토리를 봅니다.
  Docker 또는 로컬로 웹 UI를 켭니다
  Ollama에 받은 모델을 목록에서 고릅니다
  지금 · Docker Desktop 실행 → Open WebUI 컨테이너 → localhost 접속
  비용 아끼기에서 보기
AI 에이전트에게 붙여넣을 프롬프트
```
Open WebUI + Ollama로 로컬 채팅 UI를 켜려 합니다. Windows, RAM [   ]GB. 설치·첫 채팅·모델 안 보일 때 해결 순서.
```
사람이 직접 확인
· Docker 실행
· 디스크 용량
· 데이터 로컬 저장 정책
막히는 지점
· connection refused
· 모델 목록 비음
· 느린 응답
비용: 소프트웨어 무료. 전기·VRAM 한도.
보안·약관: 외부 포트 노출 금지.
만든 뒤 AI 검색 구조 점검 (/ai/geo)
결과물 미리보기
ComfyUI 워크플로
이걸 만들면 노드를 이어 Queue로 이미지를 뽑는 화면이 됩니다.
실행 루트
이미지 생성 워크플로 — ComfyUI
노드 캔버스에서 txt2img로 512px 이미지 1장을 뽑습니다.
무료·저렴 도구
ComfyUI · Stable Diffusion 체크포인트 · GPU 권장
Windows 첫 시작 순서
ComfyUI 설치·python main.py
체크포인트를 models/checkpoints에 배치
기본 txt2img 워크플로 Queue
프롬프트만 바꿔 재실행
만들기 전에 — 관련 개념
- Hugging Face Spaces
  이건 Hugging Face Spaces입니다
  설치 없이 브라우저에서 AI 데모를 눌러보는 곳입니다. GitHub이 코드라면, 여기는 모델·데모·라이선스 확인입니다.
  Run 버튼으로 이미지·음성·챗봇을 바로 시험합니다
  README에서 License·GPU 여부를 먼저 봅니다
  지금 · huggingface.co/spaces → whisper 또는 stable diffusion 검색 → Run 1회
  비용 아끼기에서 보기
- Object storage
  이건 storage(파일 저장소)입니다
  이미지·파일을 서버 디스크 대신 클라우드에 두는 공간입니다. 업로드 → URL 반환.
  용량·MIME(파일 종류)을 서버에서 검사합니다
  공개 버킷인지 비공개인지 정합니다
  지금 · 2MB·image/jpeg만 허용하는 업로드 route 1개 만들기
  가이드에서 보기
AI 에이전트에게 붙여넣을 프롬프트
```
ComfyUI txt2img 첫 성공까지. VRAM [   ]GB, OS Windows. 설치·체크포인트 경로·OOM 시 해상도.
```
사람이 직접 확인
· 체크포인트 라이선스
· CUDA 버전
· 상업 이용 조건
막히는 지점
· 빨간 노드
· 검은 화면
· OOM
비용: 로컬=전기. 클라우드 대비 VRAM 트레이드오프.
보안·약관: 출처 불명 체크포인트 주의.
만든 뒤 AI 검색 구조 점검 (/ai/geo)
결과물 미리보기
로그인·콜백 흐름
내 사이트
→ 콜백 →
로그인됨
/dashboard
이걸 만들면 ‘구글로 로그인 → 내 사이트 복귀’ 화면이 연결됩니다.
실행 루트
OAuth 로그인 — Google/Kakao 콜백
‘구글로 로그인 → 내 사이트 복귀’ 화면을 연결합니다.
무료·저렴 도구
Next.js · NextAuth 또는 Auth.js · Google Cloud Console
Windows 첫 시작 순서
콘솔에 redirect URI 등록(로컬·배포 각각)
.env.local에 client ID·secret
/api/auth 콜백 route 확인
로그인→보호 페이지→로그아웃 1회
만들기 전에 — 관련 개념
- Redirect URI
  이건 redirect URI입니다
  구글·카카오 로그인 후 ‘우리 사이트로 돌아올 주소’입니다. 글자 하나라도 다르면 로그인이 깨집니다.
  콘솔에 등록한 주소와 실제 요청 URL이 같아야 합니다
  http/https · www · 끝 슬래시까지 맞춥니다
  지금 · 콘솔 Redirect URI에 http://localhost:3000/api/auth/callback/... 등록
  가이드에서 보기
- Environment variables
  이건 env(환경변수)입니다
  비밀값·설정을 코드 밖에 두는 칸입니다. 로컬은 .env.local, 배포는 Vercel Environment Variables.
  비밀은 Git에 커밋하지 않습니다
  로컬과 배포 값이 다르면 ‘로컬만 됨’이 납니다
  지금 · .env.example에 이름만 적고, 실제 값은 .env.local에만
  가이드에서 보기
AI 에이전트에게 붙여넣을 프롬프트
```
Next.js App Router + Google OAuth. redirect_uri_mismatch 해결. .env 이름·콜백 route·Vercel env 체크리스트.
```
사람이 직접 확인
· redirect URI 글자 일치
· secret Git 미노출
· 프로덕션 URL 등록
막히는 지점
· redirect_uri_mismatch
· 콜백 404
· 세션 쿠키
비용: OAuth 자체 무료. 호스팅·DB 별도.
보안·약관: scope 최소화·개인정보 처리방침.
만든 뒤 AI 검색 구조 점검 (/ai/geo)

나머지 만들기 흐름 3개 보기

결과물 미리보기
DB 연결 상태
DATABASE_URL연결됨
tablerowsstatus
users128ok
orders42ok
이걸 만들면 연결 성공/실패·테이블이 한눈에 보이는 점검 화면이 됩니다.
실행 루트
DB 연결 대시보드 — Prisma/Postgres
연결 성공/실패·테이블 목록이 보이는 점검 화면을 만듭니다.
무료·저렴 도구
PostgreSQL · Prisma · Vercel Postgres 또는 Neon
Windows 첫 시작 순서
DATABASE_URL을 .env.local에만
npx prisma db push (작은 스키마)
서버 route에서 prisma.$queryRaw SELECT 1
관리 화면에 연결 상태 표시
만들기 전에 — 관련 개념
- Environment variables
  이건 env(환경변수)입니다
  비밀값·설정을 코드 밖에 두는 칸입니다. 로컬은 .env.local, 배포는 Vercel Environment Variables.
  비밀은 Git에 커밋하지 않습니다
  로컬과 배포 값이 다르면 ‘로컬만 됨’이 납니다
  지금 · .env.example에 이름만 적고, 실제 값은 .env.local에만
  가이드에서 보기
- API Key
  이건 API Key입니다
  AI 서비스에 ‘나’라고 증명하는 비밀번호 문자열입니다. 브라우저·GitHub에 올리면 남의 과금이 됩니다.
  서버 환경 변수에만 저장합니다
  NEXT_PUBLIC_ 접두사에 키를 넣지 않습니다
  지금 · .env.local에 KEY=... → .gitignore 확인 → 서버 route에서만 읽기
  실전 도구에서 보기
AI 에이전트에게 붙여넣을 프롬프트
```
Next.js + Prisma + Postgres 연결 테스트 route. .env·prisma schema·연결 실패 메시지·Vercel env 등록.
```
사람이 직접 확인
· URL에 비밀번호 노출 없음
· 프로덕션 DB 분리
· 마이그레이션 백업
막히는 지점
· SSL required
· connection pool
· 로컬만 됨
비용: 무료 tier 한도·연결 수 제한.
보안·약관: DB URL·시드 데이터 Git 금지.
만든 뒤 AI 검색 구조 점검 (/ai/geo)
결과물 미리보기
파일 업로드
IMG
profile.png · 1.2MB
저장됨 · /uploads/…
이걸 만들면 이미지 선택·업로드·보관 URL 화면이 생깁니다.
실행 루트
파일 업로드·이미지 저장
이미지 선택 → 업로드 → URL 표시 화면을 만듭니다.
무료·저렴 도구
Next.js · Vercel Blob 또는 S3 · multipart form
Windows 첫 시작 순서
작은 이미지 1장 업로드 API route
클라이언트 input type=file
성공 시 URL·실패 시 메시지
용량·MIME 검증 추가
만들기 전에 — 관련 개념
- Object storage
  이건 storage(파일 저장소)입니다
  이미지·파일을 서버 디스크 대신 클라우드에 두는 공간입니다. 업로드 → URL 반환.
  용량·MIME(파일 종류)을 서버에서 검사합니다
  공개 버킷인지 비공개인지 정합니다
  지금 · 2MB·image/jpeg만 허용하는 업로드 route 1개 만들기
  가이드에서 보기
- Environment variables
  이건 env(환경변수)입니다
  비밀값·설정을 코드 밖에 두는 칸입니다. 로컬은 .env.local, 배포는 Vercel Environment Variables.
  비밀은 Git에 커밋하지 않습니다
  로컬과 배포 값이 다르면 ‘로컬만 됨’이 납니다
  지금 · .env.example에 이름만 적고, 실제 값은 .env.local에만
  가이드에서 보기
AI 에이전트에게 붙여넣을 프롬프트
```
Next.js App Router 파일 업로드. Vercel Blob. 2MB 제한·image/jpeg만·에러 처리·env 이름.
```
사람이 직접 확인
· 공개 버킷 정책
· 악성 파일
· 비용(스토리지·전송)
막히는 지점
· 413 크기 초과
· CORS
· 권한 오류
비용: 스토리지 GB·요청 수 과금.
보안·약관: 임의 실행 파일 업로드 차단.
만든 뒤 AI 검색 구조 점검 (/ai/geo)
결과물 미리보기
웹게임 화면
SCORE 1280LIFES ●●●
SPACE 눌러 점프
이걸 만들면 점수·버튼·게임오버가 한 화면에 붙습니다.
실행 루트
간단 웹게임·랜딩 페이지
점수·버튼·게임오버가 한 화면에 붙는 미니 게임 또는 랜딩.
무료·저렴 도구
HTML/CSS/JS · Cursor · Vercel 배포
Windows 첫 시작 순서
Canvas 또는 div 기반 미니 게임 목표 정의
Cursor에 UI·점수 로직 요청
npm run dev로 로컬 확인
vercel deploy로 공개 URL
만들기 전에 — 관련 개념
- API Key
  이건 API Key입니다
  AI 서비스에 ‘나’라고 증명하는 비밀번호 문자열입니다. 브라우저·GitHub에 올리면 남의 과금이 됩니다.
  서버 환경 변수에만 저장합니다
  NEXT_PUBLIC_ 접두사에 키를 넣지 않습니다
  지금 · .env.local에 KEY=... → .gitignore 확인 → 서버 route에서만 읽기
  실전 도구에서 보기
- Environment variables
  이건 env(환경변수)입니다
  비밀값·설정을 코드 밖에 두는 칸입니다. 로컬은 .env.local, 배포는 Vercel Environment Variables.
  비밀은 Git에 커밋하지 않습니다
  로컬과 배포 값이 다르면 ‘로컬만 됨’이 납니다
  지금 · .env.example에 이름만 적고, 실제 값은 .env.local에만
  가이드에서 보기
AI 에이전트에게 붙여넣을 프롬프트
```
초보자용 미니 웹게임(또는 랜딩). 키보드 조작·점수·게임오버. 단일 HTML 또는 Next.js page. 파일 구조·첫 프롬프트.
```
사람이 직접 확인
· 모바일 터치
· 배포 env
· 이미지 용량
막히는 지점
· 상태 꼬임
· 배포 404
· 에셋 경로
비용: 정적 호스팅 저렴. API 붙이면 별도.
보안·약관: 외부 스크립트 CDN 최소화.
만든 뒤 AI 검색 구조 점검 (/ai/geo)

GitHub·Hugging Face 데모와 설치 경로 보기

먼저 데모를 보고, 그다음 설치하세요

Hugging Face Spaces → GitHub README → 로컬 설치. 순서를 바꾸면 비용·VRAM에서 막히기 쉽습니다.

1. HF Spaces
Run으로 결과 화면만 확인. License·GPU 안내를 메모합니다.
2. GitHub
README Install·Requirements를 읽고, 내 PC가 감당하는지 봅니다.
3. 로컬 실행
Ollama·Open WebUI·ComfyUI 등 Windows 첫 실행은 마지막에.

GitHub와 Hugging Face는 뭐가 다른가

둘 다 AI 도구를 찾지만, 하는 일이 다릅니다. 초보자는 데모부터, 설치는 마지막에.

GitHub

코드를 내려받아 실행하는 곳

README·Install로 직접 설치합니다
이슈·릴리즈로 버전을 확인합니다
로컬·서버에 올려 내 화면을 만듭니다

Hugging Face

모델과 데모를 먼저 눌러보는 곳

Spaces에서 Run으로 바로 체험합니다
Models에서 License·GPU를 먼저 봅니다
쓸 만하면 로컬·API로 옮길지 결정합니다

1. HF Spaces에서 데모를 먼저 눌러본다
설치 없이 결과 화면만 확인합니다.
2. 마음에 들면 GitHub repo·Docs를 본다
Install·Requirements·License 위치를 찾습니다.
3. 로컬 설치는 마지막에 한다
Docker·VRAM·디스크를 감당할 때만 설치합니다.

브라우저에서 먼저 눌러보는 모델·Spaces

GitHub가 코드·설치라면, Hugging Face는 데모·모델·라이선스·GPU를 먼저 확인하는 곳입니다. 순위·별 개수로 고르지 말고, Run 1회와 License부터.

Hugging Face
Spaces — 브라우저 데모
데모Run
이건 무엇인가
모델·앱을 웹에서 바로 실행해 보는 공개 데모 페이지입니다. 설치 전에 결과 화면을 봅니다.
바로 눌러볼 것
huggingface.co/spaces → 관심 키워드 검색 → Run this Space → 작은 입력 1회
로그인·결제·GPU가 필요한 순간
대기열이 길거나 Sleep 상태면 GPU Space일 수 있습니다. Duplicate·크레딧 안내가 보이면 결제 전 멈춥니다.
라이선스 확인 위치
Space README · 연결된 Model card의 License 섹션
비용·주의
CPU Space는 대개 무료지만 느릴 수 있습니다. GPU·Inference는 크레딧·과금 조건을 먼저 적으세요.
GPU·라이선스·프롬프트 더 보기
로그인·결제·GPU가 필요한 순간
대기열이 길거나 Sleep 상태면 GPU Space일 수 있습니다. Duplicate·크레딧 안내가 보이면 결제 전 멈춥니다.
라이선스 확인 위치
Space README · 연결된 Model card의 License 섹션
AI에게 물어볼 프롬프트
```
Hugging Face Spaces에서 [이미지/음성/챗봇] 데모를 고르려 합니다. 무료 Run 가능 여부, GPU 대기, License 위치, 로컬(Ollama/ComfyUI) 대안 체크리스트를 만들어 주세요.
```
Hugging Face Spaces
Hugging Face
Models — 모델 카드
모델License
이건 무엇인가
모델 이름·용도·파라미터·라이선스가 정리된 카드입니다. 코드를 돌리기 전에 읽습니다.
바로 눌러볼 것
huggingface.co/models → 필터로 용도 고르기 → 모델 카드 열기 → License·README 스크롤
로그인·결제·GPU가 필요한 순간
Inference API·Endpoint·전용 GPU를 켜는 순간부터 호출 과금이 날 수 있습니다.
라이선스 확인 위치
모델 카드 License 탭 · Model card README 상단
비용·주의
상업 이용·파인튜닝 허용은 라이선스마다 다릅니다. 단정하지 말고 카드 문구를 직접 적으세요.
GPU·라이선스·프롬프트 더 보기
로그인·결제·GPU가 필요한 순간
Inference API·Endpoint·전용 GPU를 켜는 순간부터 호출 과금이 날 수 있습니다.
라이선스 확인 위치
모델 카드 License 탭 · Model card README 상단
AI에게 물어볼 프롬프트
```
Hugging Face 모델 카드 [모델명]을 초보자가 읽게 도와주세요. License에서 볼 항목, Inference 과금 여부, 로컬 실행 대안을 체크리스트로.
```
Hugging Face Models
Hugging Face
Datasets — 학습·평가 데이터
데이터카드
이건 무엇인가
공개 데이터셋 목록입니다. 파인튜닝·평가 전에 크기·라이선스·개인정보 여부를 봅니다.
바로 눌러볼 것
huggingface.co/datasets → 키워드 검색 → Dataset card → Preview 몇 행만 보기
로그인·결제·GPU가 필요한 순간
대용량 다운로드·클라우드 학습을 돌리면 스토리지·GPU 비용이 붙을 수 있습니다.
라이선스 확인 위치
Dataset card의 License · 사용 조건 섹션
비용·주의
개인정보·저작권이 섞인 데이터가 있을 수 있습니다. 상업 이용 전 카드 조건을 확인하세요.
GPU·라이선스·프롬프트 더 보기
로그인·결제·GPU가 필요한 순간
대용량 다운로드·클라우드 학습을 돌리면 스토리지·GPU 비용이 붙을 수 있습니다.
라이선스 확인 위치
Dataset card의 License · 사용 조건 섹션
AI에게 물어볼 프롬프트
```
Hugging Face Dataset [이름]을 쓰려 합니다. License·개인정보·다운로드 크기·작은 샘플로 먼저 볼 방법을 정리해 주세요.
```
Hugging Face Datasets
Hugging Face
Whisper — 음성→텍스트 데모
음성STT
이건 무엇인가
짧은 음성을 텍스트로 바꾸는 데모를 Spaces에서 눌러볼 수 있습니다.
바로 눌러볼 것
Spaces 검색 whisper → Run → 30초 이하 음성 업로드 → 결과 문장 확인
로그인·결제·GPU가 필요한 순간
긴 파일·실시간 변환은 GPU 대기·크레딧이 필요할 수 있습니다.
라이선스 확인 위치
사용한 Space README · Whisper 모델 카드 License
비용·주의
테스트는 짧은 클립만. 민감 음성은 공개 데모에 올리지 마세요.
GPU·라이선스·프롬프트 더 보기
로그인·결제·GPU가 필요한 순간
긴 파일·실시간 변환은 GPU 대기·크레딧이 필요할 수 있습니다.
라이선스 확인 위치
사용한 Space README · Whisper 모델 카드 License
AI에게 물어볼 프롬프트
```
Whisper Space로 음성→텍스트를 시험하려 합니다. 30초 테스트 순서, GPU 주의, 로컬 whisper.cpp/Ollama 대안을 알려주세요.
```
Whisper Spaces 검색
Hugging Face
이미지 모델 — SD 등 데모
이미지생성
이건 무엇인가
텍스트로 이미지를 만드는 웹 데모입니다. ComfyUI 설치 전에 프롬프트 감각을 봅니다.
바로 눌러볼 것
Spaces 검색 stable diffusion 또는 text-to-image → 프롬프트 1줄 → 512px 생성 1회
로그인·결제·GPU가 필요한 순간
고해상도·연속 생성·전용 GPU Space는 대기열·과금이 붙을 수 있습니다.
라이선스 확인 위치
Space가 가리키는 체크포인트/모델 카드의 License
비용·주의
상업 이용·유사 인물 생성은 약관·라이선스·현지법을 각각 확인하세요. 단정하지 않습니다.
GPU·라이선스·프롬프트 더 보기
로그인·결제·GPU가 필요한 순간
고해상도·연속 생성·전용 GPU Space는 대기열·과금이 붙을 수 있습니다.
라이선스 확인 위치
Space가 가리키는 체크포인트/모델 카드의 License
AI에게 물어볼 프롬프트
```
이미지 생성 Space를 1회만 시험하려 합니다. 512px 설정, License 볼 위치, ComfyUI로 옮길 때 체크리스트를 주세요.
```
이미지 Spaces 검색
Hugging Face
로컬 실행 전 확인할 것
로컬체크
이건 무엇인가
데모가 마음에 든 뒤, GitHub·Ollama·ComfyUI로 옮기기 전에 보는 체크 목록입니다.
바로 눌러볼 것
데모 URL 저장 → 모델명·License 메모 → RAM/VRAM/디스크 여유 확인 → 그다음 설치 문서
로그인·결제·GPU가 필요한 순간
로컬도 전기·디스크·큰 모델 VRAM이 필요합니다. 클라우드 GPU는 별도 과금입니다.
라이선스 확인 위치
모델 카드 License + GitHub LICENSE 파일(둘 다 위치만 확인)
비용·주의
‘무료 데모 = 무료 상업 이용’이 아닙니다. 라이선스·약관을 직접 적으세요.
GPU·라이선스·프롬프트 더 보기
로그인·결제·GPU가 필요한 순간
로컬도 전기·디스크·큰 모델 VRAM이 필요합니다. 클라우드 GPU는 별도 과금입니다.
라이선스 확인 위치
모델 카드 License + GitHub LICENSE 파일(둘 다 위치만 확인)
AI에게 물어볼 프롬프트
```
HF Space [URL]을 로컬로 옮기려 합니다. Windows, RAM [   ]GB. License·모델 파일·Ollama/ComfyUI 중 어디가 맞는지 결정 트리를 만들어 주세요.
```
Hugging Face Docs

코드를 내려받아 실행하는 대표 6개

Hugging Face에서 데모를 본 뒤, 설치할 때만 여기로 오세요. star·순위로 고르지 말고 README Install부터.

GitHub 오픈소스
Ollama
로컬LLM
이걸로 만들 수 있는 것
내 PC에서 LLM을 받아 터미널·API로 대화하는 로컬 런타임
Windows 첫 실행 순서
1. ollama.com에서 Windows 설치
2. ollama pull qwen2.5:3b (가벼운 모델)
3. ollama run qwen2.5:3b 로 3턴 대화
4. 디스크·RAM 여유 확인 후 다음 UI 연결
README에서 볼 위치
README → Quickstart / Download / Models
막히는 지점
- · 모델 다운로드 느림
- · VRAM 부족
- · 방화벽이 API 포트 차단
비용/보안 주의
소프트웨어는 무료. 전기·디스크. 회사 데이터를 로컬에 넣어도 되는지 확인.
AI에게 붙여넣을 프롬프트
```
Windows에 Ollama를 처음 설치합니다. RAM [   ]GB, GPU [있음/없음]. 가벼운 모델·pull/run·실패 로그 위치를 순서대로.
```
ollama/ollama
GitHub 오픈소스
Open WebUI
채팅 UIDocker
이걸로 만들 수 있는 것
Ollama 위에 ChatGPT 비슷한 브라우저 채팅 화면
Windows 첫 실행 순서
1. Docker Desktop 실행 확인
2. Open WebUI 컨테이너 실행(공식 README 명령)
3. localhost로 브라우저 접속
4. 모델 목록에서 Ollama 모델 선택 → 채팅 3턴
README에서 볼 위치
README → Quick Start / Docker / Connecting to Ollama
막히는 지점
- · connection refused
- · 모델 목록 비어 있음
- · 포트 충돌
비용/보안 주의
소프트웨어 무료. Docker 이미지 용량·외부 포트 노출 금지.
AI에게 붙여넣을 프롬프트
```
Ollama는 됩니다. Open WebUI를 Windows Docker로 연결합니다. 실행 명령·모델 안 보일 때·connection refused 해결 순서.
```
open-webui/open-webui
GitHub 오픈소스
ComfyUI
이미지노드
이걸로 만들 수 있는 것
노드 캔버스로 이미지 생성 워크플로(txt2img 등)
Windows 첫 실행 순서
1. ComfyUI 설치·python main.py (README 경로)
2. 체크포인트를 models/checkpoints에 배치
3. 기본 txt2img 워크플로 Queue 1회
4. 512px부터, OOM이면 해상도 낮추기
README에서 볼 위치
README → Installing / Models / Getting Started
막히는 지점
- · 빨간 노드
- · 검은 화면
- · OOM / CUDA
비용/보안 주의
로컬=전기·VRAM. 체크포인트 라이선스는 모델 카드에서 따로 확인(단정 금지).
AI에게 붙여넣을 프롬프트
```
ComfyUI txt2img 첫 성공까지. Windows, VRAM [   ]GB. 설치·체크포인트 경로·OOM 시 해상도.
```
ComfyUI
GitHub 오픈소스
Flowise
플로우챗봇
이걸로 만들 수 있는 것
드래그앤드롭으로 LLM 체인·챗봇 흐름을 조립하는 빌더
Windows 첫 실행 순서
1. Node.js LTS 설치
2. README의 npx/docker 실행 명령 1개
3. 브라우저 UI에서 빈 플로우 생성
4. LLM 노드 1개 + 채팅 미리보기 1회
README에서 볼 위치
README → Quick Start / Docker / Environment Variables
막히는 지점
- · API Key 미입력
- · 노드 연결 오류
- · env 누락
비용/보안 주의
UI는 오픈소스. 연결한 LLM API는 토큰 과금. Key는 .env에만.
AI에게 붙여넣을 프롬프트
```
Flowise로 초보용 챗봇 플로우 1개를 Windows에서 켭니다. 실행 명령·필수 env·API Key 위치·막히는 지점.
```
FlowiseAI/Flowise
GitHub 오픈소스
n8n
자동화웹훅
이걸로 만들 수 있는 것
웹훅·스케줄·API를 이어 붙이는 자동화 워크플로
Windows 첫 실행 순서
1. Docker 또는 npm으로 n8n 실행(README)
2. 브라우저에서 빈 워크플로 생성
3. Manual Trigger → HTTP Request 1개만 연결
4. Execute 1회 성공 후 스케줄은 나중에
README에서 볼 위치
README → Quickstart / Docker / Security
막히는 지점
- · 웹훅 URL
- · 인증 헤더
- · 크론이 너무 자주 돎
비용/보안 주의
셀프호스트는 인프라 비용. 클라우드 플랜은 별도. 시크릿·고객 데이터 로그 주의.
AI에게 붙여넣을 프롬프트
```
n8n으로 Windows에서 Manual Trigger → HTTP 1회만 성공시키고 싶습니다. 실행 방법·시크릿 위치·스케줄은 끄고 시작하는 순서.
```
n8n-io/n8n
GitHub 오픈소스
Vercel AI SDK
Next.js스트리밍
이걸로 만들 수 있는 것
Next.js에 스트리밍 채팅 UI·서버 route를 붙이는 SDK
Windows 첫 실행 순서
1. Next.js 앱에 ai 패키지 설치(README)
2. .env.local에 API Key(서버만)
3. useChat 또는 streamText 예제 1개 복사
4. 로컬에서 스트리밍 응답 1회 확인
README에서 볼 위치
README / docs → Getting Started / Providers
막히는 지점
- · Key가 클라이언트에 노출
- · stream 끊김
- · provider 설정 오류
비용/보안 주의
SDK는 라이브러리. 실제 비용은 연결한 LLM API. Key·한도·재시도부터.
AI에게 붙여넣을 프롬프트
```
Next.js App Router + Vercel AI SDK로 작은 채팅 1개를 만듭니다. 서버-only Key, stream, max tokens, 401 처리.
```
vercel/ai

대표 빌드의 막힘·비용·사람이 할 일 보기

대표 빌드 — 화면부터 보기

초보자가 막히는 지점 · AI에게 시킬 일 · 사람이 확인할 일을 한 카드에.

보통수동 검토됨프롬프트
ComfyUI로 로컬에서 이미지 뽑는 화면 만들기
ComfyUI는 레고 블록처럼 노드를 이어 이미지 생성 순서를 만드는 프로그램입니다. ChatGPT처럼 채팅창이 아니라, 왼쪽에서 오른쪽으로 흐름을 그립니다.
ComfyUI 워크플로
이걸 만들면 노드를 이어 Queue로 이미지를 뽑는 화면이 됩니다.
AI에게 먼저 이렇게 시킵니다
OS별 ComfyUI 설치 명령·폴더 구조·첫 워크플로 파일 작성
↓ 상세에서 프롬프트를 먼저 붙여넣고, 사람은 외부 설정만 확인하세요
이걸 만들면
ComfyUI는 레고 블록처럼 노드를 이어 이미지 생성 순서를 만드는 프로그램입니다. ChatGPT처럼 채팅창이 아니라, 왼쪽에서 오른쪽으로 흐름을 그립니다.
이런 화면·결과가 생깁니다
텍스트→이미지, img2img, 간단한 워크플로 저장·재실행까지 가능한 로컬 이미지 생성 환경
사람이 직접 확인할 것은 이것입니다
GPU 메모리(VRAM) 용량 확인
필요 도구
ComfyUI · Stable Diffusion 계열 체크포인트 · GPU 권장(없으면 CPU 느림)
초보자는 여기서 막힙니다
- · CUDA·드라이버 버전 불일치로 실행이 안 됨
- · 체크포인트·VAE 경로를 못 찾아 검은 화면만 나옴
- · 워크플로 JSON을 불러왔는데 노드가 빨간색(누락 커스텀 노드)
럭키스팟 판단
이미지 AI를 구독 없이 실험하려면 ComfyUI가 가장 깊게 파고들 수 있는 로컬 경로입니다. 첫 목표는 기본 txt2img 워크플로 Queue 1회 성공입니다.
클라우드 API 대신 전기·하드웨어 비용. 모델 다운로드 용량·VRAM 부족 시 실패. 상업 이용은 모델 라이선스 확인.
전체 실행 흐름 →공식 페이지 열기
보통편집 해석프롬프트
점수·점프·게임오버가 있는 웹게임 화면 만들기
Fable 5식은 AI에게 역할·목표·제약·출력 형식·검증 방법을 한 번에 주는 프롬프트 틀입니다. 게임처럼 상태가 바뀌는 앱에 특히 잘 맞습니다.
웹게임 화면
SCORE 1280LIFES ●●●
SPACE 눌러 점프
이걸 만들면 점수·버튼·게임오버가 한 화면에 붙습니다.
AI에게 먼저 이렇게 시킵니다
5식 프롬프트에 맞는 미니 게임 파일 구조·코드 작성
↓ 상세에서 프롬프트를 먼저 붙여넣고, 사람은 외부 설정만 확인하세요
이걸 만들면
Fable 5식은 AI에게 역할·목표·제약·출력 형식·검증 방법을 한 번에 주는 프롬프트 틀입니다. 게임처럼 상태가 바뀌는 앱에 특히 잘 맞습니다.
이런 화면·결과가 생깁니다
HTML/Canvas 기반 미니 게임(클리커·퀴즈·간단 RPG) 프로토타입 + 점수·상태 로직
사람이 직접 확인할 것은 이것입니다
빈 폴더를 에디터(Cursor 등)에서 열기
필요 도구
Cursor 또는 AI 코딩 에디터 · 로컬 dev 서버 · 브라우저
초보자는 여기서 막힙니다
- · 게임 루프가 없고 정적 HTML만 생성됨
- · 키보드 입력·충돌 판정이 동작하지 않음
- · 모바일 터치 미지원
럭키스팟 판단
5식 프롬프트로 범위를 잘라야 '예쁜 소개 페이지'가 아니라 실제로 클릭·점수가 변하는 게임이 나옵니다.
에디터·API 유료 플랜은 공식 pricing 확인. 생성 코드는 직접 실행·검증 후 배포.
전체 실행 흐름 →공식 페이지 열기
보통수동 검토됨프롬프트
PC 안에서만 도는 로컬 AI 채팅창 만들기
Ollama가 모델을 돌리고, Open WebUI가 그걸 예쁜 채팅 화면으로 보여줍니다.
로컬 AI 채팅
이 문장 3줄로 요약해 줘
1) 핵심 한 줄 · 2) 왜 중요한지 · 3) 다음 행동
메시지 입력…로컬
이걸 만들면 PC 안에서 질문·답변이 이어지는 채팅창이 생깁니다.
AI에게 먼저 이렇게 시킵니다
Ollama·Open WebUI 설치 명령(OS별)
↓ 상세에서 프롬프트를 먼저 붙여넣고, 사람은 외부 설정만 확인하세요
이걸 만들면
Ollama가 모델을 돌리고, Open WebUI가 그걸 예쁜 채팅 화면으로 보여줍니다.
이런 화면·결과가 생깁니다
로컬 LLM 채팅·간단한 문서 업로드 Q&A(기능은 버전별 상이)
사람이 직접 확인할 것은 이것입니다
Ollama 앱/CLI 설치 후 모델 다운로드(pull)
필요 도구
Ollama · Open WebUI · Docker 또는 로컬 설치
초보자는 여기서 막힙니다
- · Ollama는 되는데 WebUI가 모델 목록을 못 불러옴
- · Docker 포트 충돌
- · 모델이 너무 커서 다운로드·실행 실패
럭키스팟 판단
로컬 AI 입문에서 가장 체감 큰 조합입니다. 작은 모델(llama3.2 등)로 짧은 대화만 성공시키면 됩니다.
전기·디스크·GPU. 클라우드 동기화 기능은 끄고 로컬만 쓸지 정책 확인.
전체 실행 흐름 →공식 페이지 열기

전체 프롬프트·실패 사례·대안 도구 펼쳐 보기

따라 만드는 실행 흐름

프롬프트 · 실패 케이스 · 비용 주의 · 대안 도구까지.

ComfyUI로 로컬에서 이미지 뽑는 화면 만들기

Krea·클라우드 없이도 노드 캔버스에서 이미지 생성 흐름을 내 PC에서 조립·실행할 수 있습니다.

럭키스팟 해석은 원출처를 바탕으로 한 실전 안내입니다. 요금·약관·라이선스는 제공자 페이지 최신 조건을 결제·배포 전에 대조하세요. 실제 사업화 전에는 해당 분야 전문가 확인이 필요할 수 있습니다.

초보자 한 줄 설명

ComfyUI는 레고 블록처럼 노드를 이어 이미지 생성 순서를 만드는 프로그램입니다. ChatGPT처럼 채팅창이 아니라, 왼쪽에서 오른쪽으로 흐름을 그립니다.

먼저 AI 에이전트에게 붙여넣을 프롬프트

내 PC에 ComfyUI 로컬 이미지 AI를 설치·실행한다. OS: [Windows/macOS/Linux], GPU VRAM: [   ]GB.
1) ComfyUI clone/pip 설치 명령을 OS별로 단계별 제시
2) VRAM [   ]GB 기준으로 쓸 체크포인트 크기(7B/SD1.5 등) 추천
3) models/checkpoints 경로와 첫 txt2img 워크플로 Queue 순서
4) CUDA OOM·검은 화면·빨간 노드 각각 확인 2항
5) Krea 등 클라우드 구독 대신 로컬을 쓸 때 전기·VRAM 트레이드오프 한 줄
코드는 단계별, 한 번에 전체 repo 금지.

AI가 해줄 수 있는 일

OS별 ComfyUI 설치 명령·폴더 구조·첫 워크플로 파일 작성
VRAM 크기에 맞는 모델 크기 추천·검은 화면·빨간 노드 해결 순서
txt2img 기본 흐름(프롬프트→이미지) 단계별 안내

사람이 직접 해야 하는 외부 설정

GPU 메모리(VRAM) 용량 확인
체크포인트 모델 파일 다운로드·폴더에 넣기
ComfyUI 웹 화면에서 Queue 버튼 눌러 실행

외부 설정 경로

NVIDIA 제어판 또는 작업 관리자 → GPU → 전용 메모리(VRAM) 확인
ComfyUI GitHub → Releases(Windows portable) 또는 clone 설치
ComfyUI/models/checkpoints/ 폴더에 .safetensors 모델 배치

제대로 됐는지 확인하는 방법

브라우저 localhost ComfyUI 화면이 열리는지
Queue 후 output 노드에 이미지 1장이 보이는지
같은 워크플로에서 프롬프트만 바꿔 다시 뽑히는지

실행 순서

1GPU VRAM 확인(nvidia-smi 등)·드라이버 버전 메모
2ComfyUI 설치·python main.py로 웹 UI 실행
3체크포인트를 models/checkpoints에 배치
4기본 txt2img 워크플로 로드 → 프롬프트 1줄 → Queue
5output 확인 후 워크플로 저장·해상도 낮춰 OOM 재시도

막히면 다시 AI에게 줄 프롬프트

ComfyUI 설치 후 Queue 했는데 [검은 화면 / 빨간 노드 / VRAM 부족 에러]가 난다.
OS: [   ], VRAM: [   ]GB, 에러 메시지: [붙여넣기].
1) 원인 후보 3가지와 각각 확인할 메뉴·폴더
2) 해상도·모델 크기 줄이는 순서
3) 성공할 때까지 최소 변경만 제안

막히는 지점

CUDA·드라이버 버전 불일치로 실행이 안 됨
체크포인트·VAE 경로를 못 찾아 검은 화면만 나옴
워크플로 JSON을 불러왔는데 노드가 빨간색(누락 커스텀 노드)
VRAM 부족으로 mid-generation 크래시

비용·보안·저작권·약관 주의

서드파티 체크포인트는 출처 불명 파일 주의
로컬 서버를 외부에 포트 포워딩하지 마세요
클라우드 API 대신 전기·하드웨어 비용. 모델 다운로드 용량·VRAM 부족 시 실패. 상업 이용은 모델 라이선스 확인.

대안 도구

Automatic1111 WebUI · Krea(클라우드) · LM Studio(텍스트 위주)

럭키스팟 판단

이미지 AI를 구독 없이 실험하려면 ComfyUI가 가장 깊게 파고들 수 있는 로컬 경로입니다. 첫 목표는 기본 txt2img 워크플로 Queue 1회 성공입니다.

점수·점프·게임오버가 있는 웹게임 화면 만들기

역할·목표·제약·출력·검증 5단을 프롬프트에 넣으면 '랜딩페이지'가 아니라 플레이 가능한 미니 게임 뼈대까지 나옵니다.

초보자 한 줄 설명

Fable 5식은 AI에게 역할·목표·제약·출력 형식·검증 방법을 한 번에 주는 프롬프트 틀입니다. 게임처럼 상태가 바뀌는 앱에 특히 잘 맞습니다.

먼저 AI 에이전트에게 붙여넣을 프롬프트

역할: 당신은 미니 웹게임 프로토타입 개발자다.
목표: [클리커/퀴즈/RPG 중 하나] 장르의 플레이 가능한 미니 게임을 만든다.
제약: 외부 에셋 URL 금지, 단일 페이지, 300줄 이내, 모바일 터치 지원.
출력: [Next.js app router 또는 순수 HTML]로 game loop·점수·게임오버·재시작 포함.
검증: npm run dev 후 클릭/키 입력으로 점수가 변하는지, 콘솔 에러 0인지 체크리스트 작성.
먼저 파일 구조만 제안하고, 내가 승인하면 코드 작성.

AI가 해줄 수 있는 일

5식 프롬프트에 맞는 미니 게임 파일 구조·코드 작성
버튼·점수·게임오버·재시작 로직 구현
npm run dev 실행 명령·콘솔 에러 수정

사람이 직접 해야 하는 외부 설정

빈 폴더를 에디터(Cursor 등)에서 열기
터미널에서 dev 서버 실행·브라우저로 직접 플레이
에러 메시지 전체를 에이전트 채팅에 붙여넣기

외부 설정 경로

Cursor → File → Open Folder → 빈 프로젝트 폴더
node.js.org → LTS 설치(Next.js 쓸 때)
터미널 → npm run dev → 브라우저 localhost 주소 열기

제대로 됐는지 확인하는 방법

버튼 클릭 시 점수 숫자가 변하는지
게임오버 조건 후 재시작이 되는지
브라우저 개발자 도구 콘솔에 빨간 에러가 없는지

실행 순서

1장르·스택(HTML vs Next) 결정
25식 프롬프트 붙여넣기
3생성 코드 로컬 실행
4플레이·콘솔 에러 확인
5막히는 지점만 짧게 수정 요청

막히면 다시 AI에게 줄 프롬프트

미니 게임 코드를 받았는데 [정적 화면만 보임 / 클릭 안 됨 / 콘솔 에러].
스택: [Next.js / HTML], 에러: [붙여넣기].
game loop·이벤트 리스너·requestAnimationFrame 중 무엇이 빠졌는지 짚고, 수정할 파일만 최소 diff로.

막히는 지점

게임 루프가 없고 정적 HTML만 생성됨
키보드 입력·충돌 판정이 동작하지 않음
모바일 터치 미지원
한 번에 너무 큰 게임을 요청해 컨텍스트 초과

비용·보안·저작권·약관 주의

외부 스크립트 CDN 최소화
배포 전 XSS·innerHTML 사용 점검
에디터·API 유료 플랜은 공식 pricing 확인. 생성 코드는 직접 실행·검증 후 배포.

대안 도구

Phaser.js 공식 튜토리얼 · itch.io HTML5 템플릿

럭키스팟 판단

5식 프롬프트로 범위를 잘라야 '예쁜 소개 페이지'가 아니라 실제로 클릭·점수가 변하는 게임이 나옵니다.

PC 안에서만 도는 로컬 AI 채팅창 만들기

API 과금 없이 브라우저에서 ChatGPT형 UI로 로컬 모델과 대화할 수 있습니다.

초보자 한 줄 설명

Ollama가 모델을 돌리고, Open WebUI가 그걸 예쁜 채팅 화면으로 보여줍니다.

먼저 AI 에이전트에게 붙여넣을 프롬프트

Ollama와 Open WebUI를 로컬에 설치하고 연결하고 싶다. OS: [   ].
1) Ollama 설치 후 작은 모델 하나 pull 명령
2) Open WebUI 설치(도커/로컬 중 추천 하나) 명령
3) WebUI가 Ollama를 인식하는지 확인하는 URL/설정
4) 연결 실패 시 확인할 포트·환경변수 3가지
단계별로만, 한 번에 긴 스크립트 금지.

AI가 해줄 수 있는 일

Ollama·Open WebUI 설치 명령(OS별)
연결 설정·포트 충돌 해결 순서
작은 모델 pull 명령·테스트 질문 3개

사람이 직접 해야 하는 외부 설정

Ollama 앱/CLI 설치 후 모델 다운로드(pull)
Open WebUI 실행·브라우저에서 채팅 화면 열기
모델 목록에 방금 받은 모델이 보이는지 확인

외부 설정 경로

ollama.com → Download → OS별 설치
터미널 → ollama pull llama3.2 (또는 작은 모델)
Open WebUI GitHub → Docker 또는 pip 설치 안내

제대로 됐는지 확인하는 방법

터미널 ollama list에 모델 이름이 보이는지
Open WebUI 새 채팅에서 질문 3개에 답이 오는지
인터넷 끊고도(로컬만) 답이 오는지

실행 순서

1Ollama 설치·ollama pull [small-model]
2Open WebUI 설치·실행
3설정에서 Ollama endpoint 확인
4새 채팅에서 3질문 테스트

막히면 다시 AI에게 줄 프롬프트

Ollama는 되는데 Open WebUI가 [모델 목록 비음 / connection refused / 너무 느림].
OS: [   ], ollama list 결과: [붙여넣기], 에러: [붙여넣기].
연결 URL·포트·방화벽·더 작은 모델 교체 순서만 단계별로.

막히는 지점

Ollama는 되는데 WebUI가 모델 목록을 못 불러옴
Docker 포트 충돌
모델이 너무 커서 다운로드·실행 실패

비용·보안·저작권·약관 주의

로컬만 사용 시 외부 바인딩 끄기
민감 문서 업로드 시 보관 위치 확인
전기·디스크·GPU. 클라우드 동기화 기능은 끄고 로컬만 쓸지 정책 확인.

대안 도구

LM Studio · GPT4All · 클라우드 ChatGPT 무료 티어

럭키스팟 판단

로컬 AI 입문에서 가장 체감 큰 조합입니다. 작은 모델(llama3.2 등)로 짧은 대화만 성공시키면 됩니다.

웹에서 질문·답변이 이어지는 챗봇 페이지 만들기

Next.js 서버 라우트에 스트리밍 채팅 UI를 붙이면 배포 가능한 챗 페이지 골격이 됩니다.

초보자 한 줄 설명

AI SDK는 Next.js 앱에서 '메시지 보내기→스트리밍 응답 받기'를 짧은 코드로 연결해 줍니다.

먼저 AI 에이전트에게 붙여넣을 프롬프트

Next.js App Router + Vercel AI SDK로 최소 채팅 페이지를 만들고 싶다.
1) app/api/chat/route.ts 스트리밍 예시(키는 env)
2) 클라이언트 useChat 예시
3) NEXT_PUBLIC_에 키 넣지 않는 이유 한 줄
4) Vercel 배포 시 필요한 env 목록
파일별로 나눠 제시하고, 각 파일 끝에 로컬 테스트 명령.

AI가 해줄 수 있는 일

Next.js 채팅 페이지·비밀키 숨기는 서버 문(route) 코드 작성
스트리밍 채팅 UI 연결(useChat 등)
로컬 테스트·배포 시 필요한 비밀값 목록 정리

사람이 직접 해야 하는 외부 설정

LLM 서비스에서 서비스 비밀번호(API key) 발급
.env.local에 비밀값 넣기(브라우저용 이름 NEXT_PUBLIC_ 금지)
Vercel 대시보드에 같은 비밀값 등록

외부 설정 경로

OpenAI → platform.openai.com → API Keys
Anthropic → console.anthropic.com → API Keys
Vercel → Project → Settings → Environment Variables

제대로 됐는지 확인하는 방법

로컬 /chat에서 질문 시 글자가 스트리밍되는지
브라우저 소스·Network에 API key 문자열이 없는지
배포 URL에서도 같은 동작인지

실행 순서

1ai 패키지 설치
2서버 route에 streamText 구현
3클라이언트 useChat 연결
4로컬 테스트 후 vercel env 등록

막히면 다시 AI에게 줄 프롬프트

Vercel AI SDK 채팅이 로컬에선 되고 배포만 [401 / 스트리밍 끊김 / 500].
에러 로그: [붙여넣기]. env 이름: [목록].
1) Vercel env 누락·오타 체크
2) 코드 실행 장소(edge vs node) 의심 파일
3) 로컬 production 재현 명령

막히는 지점

API 키를 클라이언트에 노출
Edge vs Node 런타임 불일치
스트리밍이 로컬에선 되고 Vercel에선 끊김

rate limit·인증 없이 공개 배포 금지
키 rotate 절차
API 키는 서버 only. 스트리밍·도구 호출은 토큰 사용량 증가. Vercel 함수 실행 시간 과금 확인.

대안 도구

LangChain.js · 직접 fetch OpenAI · Open WebUI(로컬)

럭키스팟 판단

바이브코더가 '챗봇 페이지'를 배포 가능한 형태로 만들 때 가장 많이 쓰는 Next 스택입니다. 키만 서버에 두는지가 1순위입니다.

파일·검색을 AI에게 맡기는 연결 화면 만들기

MCP 서버 하나만 붙여도 에이전트가 내 파일·도구를 '사용 가능한 기능'으로 인식합니다.

초보자 한 줄 설명

MCP는 AI 앱과 외부 도구 사이의 표준 플러그 규격입니다. USB 포트처럼 서버를 꽂으면 기능이 늘어납니다.

먼저 AI 에이전트에게 붙여넣을 프롬프트

Cursor(또는 [클라이언트])에 MCP filesystem 서버를 연결하고 싶다.
1) mcp.json 예시(절대경로는 [PROJECT_PATH] 플레이스홀더)
2) 연결 후 도구 목록에서 확인할 이름
3) 실패 시 로그 보는 위치
4) 읽기 전용으로 시작하는 이유
JSON만 먼저, 설명은 짧게.

AI가 해줄 수 있는 일

mcp.json 설정 JSON 작성·filesystem 서버 연결
에이전트가 읽을 폴더 경로·명령어 정리
연결 실패 시 로그 확인 위치 안내

사람이 직접 해야 하는 외부 설정

Node.js 설치·npx 동작 확인
에이전트 클라이언트(Cursor 등) 설정 파일에 JSON 붙여넣기
클라이언트 재시작 후 도구 목록 확인

외부 설정 경로

Cursor → Settings → MCP → mcp.json 편집
modelcontextprotocol/servers → filesystem 서버 README
프로젝트 루트 경로를 allowed directories에 등록

제대로 됐는지 확인하는 방법

에이전트 도구 목록에 filesystem(또는 유사 이름)이 보이는지
'package.json 읽어줘'에 실제 파일 내용이 오는지
허용 안 한 폴더는 거절되는지

실행 순서

1modelcontextprotocol/servers에서 filesystem install 명령 실행
2mcp.json에 command·allowed directories 작성
3클라이언트 재시작·도구 목록 확인
4짧은 파일 읽기 요청 E2E
5성공 후 검색·브라우저 서버는 별도 추가

막히면 다시 AI에게 줄 프롬프트

MCP filesystem 연결했는데 도구가 [안 보임 / 권한 거부 / JSON 에러].
mcp.json 내용: [붙여넣기], 클라이언트: [Cursor/...], 에러: [붙여넣기].
JSON 문법·command 경로·allowed directories만 짚어 수정안 제시.

막히는 지점

mcp.json 경로·JSON 문법 오류
Node 버전·npx 경로 문제
서버는 뜨는데 클라이언트에 도구가 안 보임

전체 디스크 허용 금지
프로덕션 secret 경로 제외
브라우저·파일 MCP는 권한 범위가 큼. 무분별한 auto-run 금지.

대안 도구

커스텀 API tool · 플러그인 없이 @파일 첨부

럭키스팟 판단

에이전트가 '내 프로젝트를 본다'는 말의 실체가 MCP입니다. 파일 서버 하나부터 성공시키세요.

노드를 이어 자동으로 도는 워크플로 화면 만들기

코드 없이도 LLM·웹훅·스케줄을 이어 붙이는 시각적 자동화를 만들 수 있습니다.

초보자 한 줄 설명

블록을 드래그해서 '입력→AI→출력' 순서를 만드는 도구입니다. n8n은 범용 자동화, Flowise는 LLM 체인에 특화됩니다.

먼저 AI 에이전트에게 붙여넣을 프롬프트

Flowise로 '텍스트 붙여넣기 → 3줄 요약' 최소 플로우를 만들고 싶다.
1) 필요한 노드 종류와 연결 순서
2) 환경변수로 API 키 넣는 방법
3) 테스트 실행 방법
4) 크론 붙이기 전에 수동 실행으로 검증하는 이유
n8n 대안이 나을지 한 줄 비교.

AI가 해줄 수 있는 일

텍스트→요약 최소 플로우 노드 연결 순서
API 비밀값을 노드 평문 대신 env로 넣는 방법
수동 실행·로그 확인 절차

사람이 직접 해야 하는 외부 설정

Flowise 또는 n8n 설치·실행(Docker 권장)
LLM 서비스 비밀번호를 환경 설정에 입력
화면에서 수동 실행 버튼으로 먼저 테스트

외부 설정 경로

Flowise GitHub → Docker compose 또는 npm install
n8n.io → Self-host Docker 안내
OpenAI/Anthropic → API Keys → 비밀값 복사

제대로 됐는지 확인하는 방법

짧은 텍스트 붙여넣기 → 요약 결과가 화면에 나오는지
크론·스케줄 끈 상태에서만 먼저 성공했는지
실행 로그에 API 에러가 없는지

실행 순서

1Flowise/n8n 설치·실행
2템플릿 또는 빈 플로우 생성
3LLM 노드에 env 키 연결
4수동 실행·출력 확인
5만족 시에만 스케줄 추가

막히면 다시 AI에게 줄 프롬프트

Flowise/n8n 플로우가 [빈 출력 / API 401 / 비용 급증].
사용 도구: [Flowise/n8n], 노드 구성: [설명], 에러: [붙여넣기].
입력 변수명·env 키·크론 중복 여부만 순서대로 점검.

막히는 지점

노드 연결은 했는데 입력 변수명 불일치
크론+웹훅 이중 트리거
API 키를 노드에 평문 저장

웹훅 URL 유출 주의
PII 데이터 로그 마스킹
노드마다 API 호출·크론 중복 시 비용 폭주. self-host vs cloud 요금표 확인.

대안 도구

n8n · Zapier+OpenAI · 직접 cron+script

럭키스팟 판단

바이브코더가 '매일 자동 요약'을 만들 때 코드 대신 먼저 그릴 수 있는 레이어입니다. 한 개 트리거만으로 시작하세요.

따라 만들기 전에 확인할 것

만들려는 목표가 한 문장으로 설명되는지 확인합니다.
다루는 데이터에 개인정보·기밀이 없는지 확인합니다.
외부 API를 붙이면 비용이 생기지 않는지 확인합니다.
배포가 꼭 필요한지, 로컬 실습만으로 충분한지 판단합니다.

이걸 만들면 어떤 화면이 생기는지 먼저 보세요

무엇을 만들어 볼까요?

로컬 챗봇 화면 — Open WebUI + Ollama

이건 Ollama입니다

이건 Open WebUI입니다

이미지 생성 워크플로 — ComfyUI

이건 Hugging Face Spaces입니다

이건 storage(파일 저장소)입니다

OAuth 로그인 — Google/Kakao 콜백

이건 redirect URI입니다

이건 env(환경변수)입니다

DB 연결 대시보드 — Prisma/Postgres

이건 env(환경변수)입니다

이건 API Key입니다

파일 업로드·이미지 저장

이건 storage(파일 저장소)입니다

이건 env(환경변수)입니다

간단 웹게임·랜딩 페이지

이건 API Key입니다

이건 env(환경변수)입니다

코드를 내려받아 실행하는 곳

모델과 데모를 먼저 눌러보는 곳

Spaces — 브라우저 데모

Models — 모델 카드

Datasets — 학습·평가 데이터

Whisper — 음성→텍스트 데모

이미지 모델 — SD 등 데모

로컬 실행 전 확인할 것

Ollama

Open WebUI

ComfyUI

Flowise

n8n

Vercel AI SDK

ComfyUI로 로컬에서 이미지 뽑는 화면 만들기

점수·점프·게임오버가 있는 웹게임 화면 만들기

PC 안에서만 도는 로컬 AI 채팅창 만들기

ComfyUI로 로컬에서 이미지 뽑는 화면 만들기

초보자 한 줄 설명

먼저 AI 에이전트에게 붙여넣을 프롬프트

AI가 해줄 수 있는 일

사람이 직접 해야 하는 외부 설정

외부 설정 경로

제대로 됐는지 확인하는 방법

실행 순서

막히면 다시 AI에게 줄 프롬프트

막히는 지점

비용·보안·저작권·약관 주의

대안 도구

럭키스팟 판단

점수·점프·게임오버가 있는 웹게임 화면 만들기

초보자 한 줄 설명

먼저 AI 에이전트에게 붙여넣을 프롬프트

AI가 해줄 수 있는 일

사람이 직접 해야 하는 외부 설정

외부 설정 경로

제대로 됐는지 확인하는 방법

실행 순서

막히면 다시 AI에게 줄 프롬프트

막히는 지점

비용·보안·저작권·약관 주의

대안 도구

럭키스팟 판단

PC 안에서만 도는 로컬 AI 채팅창 만들기

초보자 한 줄 설명

먼저 AI 에이전트에게 붙여넣을 프롬프트

AI가 해줄 수 있는 일

사람이 직접 해야 하는 외부 설정

외부 설정 경로

제대로 됐는지 확인하는 방법

실행 순서

막히면 다시 AI에게 줄 프롬프트

막히는 지점

비용·보안·저작권·약관 주의

대안 도구

럭키스팟 판단

웹에서 질문·답변이 이어지는 챗봇 페이지 만들기

초보자 한 줄 설명

먼저 AI 에이전트에게 붙여넣을 프롬프트

AI가 해줄 수 있는 일