문제 상황
개발자라면 이런 경험이 있을 것입니다.
- OpenAI API가 비싸다 (요청량 많으면 월 수백 달러)
- 민감한 데이터를 클라우드에 올리고 싶지 않다
- 네트워크 없이도 로컬에서 빠르게 실행하고 싶다
하지만 로컬에서 AI 모델을 실행하면 또 다른 문제가 생깁니다:
- Windows/Linux 서버에서 접속할 수 없다
- 출장 중이나 팀원과 공유하기 어렵다
- 스마트폰이나 태블릿에서도 접근하고 싶은데…
해결책? Mac의 로컬 Gemma 모델을 Vercel 웹앱으로 만들고, Cloudflare Tunnel로 터널링하면 됩니다. 오늘 그 전체 과정을 정리했습니다.
기술 선택: 왜 이 스택인가?
| 선택지 | 추천 | 이유 |
|---|---|---|
| 모델 Gemma vs GPT | ✅ Gemma 3 4B | 오픈소스, 로컬 실행 가능, 가볍고 빠름 |
| 런타임 | ✅ Ollama | 원클릭 설치, CORS 처리 간단 |
| 프론트엔드 | ✅ React + Vite | 스트리밍 응답 처리 쉬움, 번들 크기 작음 |
| 배포 | ✅ Vercel | Next.js/SPA 친화적, 콜드스타트 빠름 |
| 터널링 | ✅ Cloudflare | ngrok보다 API 친화적, 계정 불필요, 빠름 |
3단계로 구현하기
📦 Step 1: Mac에 Gemma 설치 (10분)
먼저 Ollama를 설치합니다.
# Ollama 다운로드 (https://ollama.com)
# App을 실행한 후 터미널에서:
ollama run gemma3:4b
첫 실행 시 모델 다운로드(약 3GB)가 시작됩니다. 기다리세요. ☕
pulling manifest
pulling 8935d9cb4c8e
100% ███████████████████████████████ 3.6 GB
success
이제 http://localhost:11434에서 Ollama API가 동작합니다.
🎨 Step 2: React 웹앱 만들기 (15분)
GitHub 리포지토리를 클론합니다.
git clone https://github.com/junsang-dong/gemma-remote.git
cd gemma-remote
npm install
npm run dev
http://localhost:5173에서 채팅 UI가 뜹니다.
Vite 프록시 덕분에 CORS 문제는 자동 해결됩니다. 아무것도 할 필요 없습니다.
로컬에서 테스트하세요:
- 텍스트 입력
- Enter 누르기
- 실시간으로 토큰 단위 응답이 나옵니다 (ChatGPT 스타일)
사용자: 한국 주식 시장 전망을 3줄로
Gemma:
현재 한국 주식 시장은 금리와 지정학적 리스크에 민감합니다.
기술주 중심의 수익성 개선이 긍정적 신호입니다.
단기 변동성은 크지만 중장기 가치 투자 관점에서는 매력적입니다.
🚀 Step 3: Vercel 배포 + 원격 접속 (20분)
3-1. Vercel에 배포하기
npm install -g vercel
vercel --prod
배포가 완료되면:
✓ Production: https://local-ollama-gemma.vercel.app [copied to clipboard]
이 URL은 아직 동작하지 않습니다. 로컬 Ollama에 접속할 방법이 없거든요.
3-2. Cloudflare Tunnel로 로컬 Ollama 외부 노출
첫 번째 문제: CORS + OLLAMA_HOST 설정
기존 Ollama를 종료하고 다시 실행합니다:
pkill ollama
# ⚠️ 중요: 0.0.0.0으로 설정해야 외부 접속 가능
OLLAMA_HOST=0.0.0.0:11434 OLLAMA_ORIGINS=* ollama serve
터미널에 이렇게 나오면 성공:
Listening on [::]:11434
두 번째 문제: 터널 설정
새 터미널 탭을 열고:
brew install cloudflare/cloudflare/cloudflared
# Quick Tunnel 실행 (계정 불필요)
cloudflared tunnel --url http://localhost:11434
출력:
https://xxxx-xxxx-xxxx-xxxx.trycloudflare.com
이 URL을 복사하세요. (재실행할 때마다 바뀝니다)
3-3. 웹앱에 API URL 등록
- https://local-ollama-gemma.vercel.app 접속
- 좌측 하단 ⚙ 설정 클릭
- Ollama API URL 입력:
https://xxxx-xxxx-xxxx-xxxx.trycloudflare.com - 저장하고 상단에 모델 목록이 뜨면 연결 성공 ✅
이제 어디서든 — 카페에서, 출장지에서, 스마트폰에서도 이 웹앱으로 Mac의 Gemma에 접속할 수 있습니다.
학습 포인트
1. Cloudflare Tunnel vs ngrok
ngrok 무료 버전은 axios.get() 등 API 호출에서 403으로 차단합니다. Cloudflare는 막지 않습니다. 개발자라면 Cloudflare를 쓰세요.
2. OLLAMA_HOST=0.0.0.0의 필수성
기본값(127.0.0.1)으로 실행하면 외부 터널도 접속 불가입니다. 이걸 모르면 2시간을 헤맙니다. 😅
3. 로컬스토리지로 API URL 저장
설정값을 브라우저 로컬스토리지에 저장하므로, URL이 바뀌어도 매번 입력할 필요 없습니다.
4. 스트리밍 응답의 가치
fetch + ReadableStream으로 토큰 단위 응답을 처리하면 UX가 ChatGPT처럼 느껴집니다. 사용자 경험이 완전히 달라집니다.
이제 뭘 할까?
이 기초 위에서 할 수 있는 것들:
✅ 포트폴리오: GitHub 공개 + README 정리 → “로컬 AI 앱 경험” 강력함
✅ 팀 협업: Ollama를 NAS나 Linux 서버에서 실행, 팀원 공유
✅ Product Hunt: “로컬 AI + 무료 원격 접속” = 개발자들이 좋아하는 조합
✅ 사이드 프로젝트 확장: 여기에 RAG 추가 → 개인 지식베이스 채팅
마치며
API 요금 걱정 없이 로컬 AI를 쓰되, 어디서든 접근할 수 있다는 게 핵심입니다.
비용: 거의 0원 (Vercel 무료 + Cloudflare 무료)
성능: 로컬이라 빠름 (네트워크 지연 최소)
프라이버시: 모든 데이터가 Mac에 머무름
처음 30분이 가장 어렵지만, 한 번 설정하면 다시는 건드릴 필요 없습니다.
지금 바로 시작하세요. 그리고 만든 것을 공유하세요. 🚀
전체 코드: https://github.com/junsang-dong/gemma-remote
라이브 데모: https://local-ollama-gemma.vercel.app
이 글이 도움되었다면, 별 ⭐ 하나로 응원해주세요.
