software

Nano Bana, React, Hono를 사용한 스타일 인식 AI 이미지 생성기 구축

발행: (2025년 12월 17일 오전 09:38 GMT+9)
6 min read
원문: Dev.to

Source: Dev.to

Magic.rb

프로젝트 스크린샷

개요

새로운 Google Gemini 모델의 한계를 시험해보고자 하는 순수한 호기심에서, 나는 Amaris라는 풀스택 SaaS 애플리케이션을 만들었습니다. 이 애플리케이션은 간단한 채팅 인터페이스를 통해 특정 예술적 스타일의 이미지를 생성할 수 있게 해줍니다. 복잡한 워크플로우 없이, 레퍼런스 이미지를 업로드하고 프롬프트를 입력하면 AI가 나머지 작업을 수행합니다!

  • 스택: “Better‑T‑Stack” (Bun, Hono, React 19)
  • AI: Vercel AI Gateway를 통한 Google Gemini 2.5 Flash Image 모델

현대적인 AI 앱을 구축하고 싶거나, 모노레포에 대해 배우고 싶거나, Hono가 AI 스트림을 어떻게 처리하는지 보고 싶다면, 이 프로젝트는 훌륭한 샌드박스가 될 것입니다.

데모 영상:
https://x.com/devguy_007/status/1997485877325394061?s=20

레포지토리:
🔗

✨ 기능

  • 💬 채팅 기반 인터페이스 – 대화형 흐름으로 이미지를 생성합니다.
  • 🎨 스타일 전송 – 레퍼런스 이미지(스케치, 그림 등)를 업로드하면 AI가 해당 스타일을 모방합니다.
  • ⚡ 초고속 백엔드 – Hono로 구동되며 Bun에서 실행됩니다.
  • 🧠 스마트 비전 – Gemini를 사용해 생성 전에 스타일 레퍼런스를 “볼” 수 있습니다.
  • 🔐 전체 인증 시스템 – Better‑Auth를 통한 안전한 로그인.
  • 💳 크레딧 시스템 – 사용자 크레딧 및 사용 제한을 관리하는 내장 로직.
  • 🌑 모던 UI – 다크 모드, Tailwind CSS 4, shadcn/ui 컴포넌트.

🧰 전체 기술 스택

코어 및 런타임

TechDescription
Bun초고속 JavaScript 런타임 및 패키지 매니저
TypeScript전체 모노레포에 걸친 타입 안전성

프론트엔드 (apps/web)

TechDescription
React 19라이브러리 최신 버전
React Router 7선언형 파일 기반 라우팅
Tailwind CSS 4유틸리티 우선 CSS 엔진
shadcn/ui접근성 높은 UI 컴포넌트
TanStack Query비동기 상태 관리 및 캐싱
TanStack Form복잡한 폼 처리
Lucide React일관된 아이콘 세트
Sonner토스트 알림

백엔드 (apps/server)

TechDescription
Hono경량의 표준 기반 웹 프레임워크
ZodAPI 요청을 위한 스키마 검증
Hono/Zod‑Validator수신 데이터 검증 미들웨어

데이터 및 인증

TechDescription
PostgreSQL관계형 데이터베이스
Drizzle ORM타입 안전 SQL을 위한 TypeScript 우선 ORM
Better‑Auth포괄적인 인증 (이메일/비밀번호, 세션)

AI 및 서비스

TechDescription
Google Gemini2.5 Flash 이미지(생성) 및 2.5 Flash(비전)
Vercel AI SDK캐시, 속도 제한, 분석을 위한 AI 게이트웨이
Cloudinary생성된 이미지 저장 및 최적화
Polar.sh구독 및 결제

🚀 로컬에서 시작하기

1️⃣ 저장소 복제

git clone https://github.com/oyeolamilekan/amaris-app
cd amaris

2️⃣ 의존성 설치

우리는 Bun을 사용해 속도를 높입니다:

bun install

3️⃣ 환경 변수 설정

다음 .env 파일들을 생성하고, 자리표시자 값을 자신의 값으로 교체하세요.

apps/server/.env

DATABASE_URL=postgresql://user:pass@localhost:5432/amaris
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key
CORS_ORIGIN=http://localhost:5173
CLOUDINARY_CLOUD_NAME=your_cloud_name
POLAR_ACCESS_TOKEN=your_polar_token

4️⃣ 데이터베이스 스키마 푸시

bun run db:push

5️⃣ 개발 서버 시작

bun run dev

브라우저에서 열어 바로 생성 작업을 시작하세요!

🧪 작동 방식

  1. 스타일 업로드 – 이미지를 채팅에 끌어다 놓습니다(예: 픽셀‑아트 캐릭터).
  2. 비전 분석 – 백엔드가 Gemini의 비전 기능을 사용해 이미지의 “분위기”를 파악합니다.
  3. 프롬프트 – “미래 도시”와 같은 문장을 입력합니다.
  4. 생성 – 앱이 프롬프트와 스타일 레퍼런스를 결합해 Vercel AI Gateway를 통해 Google Gemini에 전달합니다.
  5. 결과 – 몇 초 후 선택한 스타일로 렌더링된 미래 도시를 받게 됩니다.

💭 Why I Built This

I wanted to move beyond simple “text‑to‑image” scripts and build a production‑ready architecture. The goals were:

  • Explore how Hono pairs with React 19 in a monorepo.
  • Integrate payment flows (Polar.sh) alongside complex AI logic.
  • Leverage the speed and low cost of Gemini 2.5 for style‑transfer experiments.

🧑‍💻 사용해보고, 포크하고, 부숴보세요!

이 프로젝트는 오픈‑소스이며 해킹을 위해 만들어졌습니다. 자유롭게:

  • 레포지토리를 클론하세요.
  • 데이터베이스나 AI 모델을 교체하세요.
  • 만화 생성기, 밈 생성기 등으로 바꿔보세요.

GitHub:
Amaris App

🙌 연결해요

시도해보거나 스택에 대해 질문이 있으면 댓글을 남기거나 저를 태그해주세요!

행복한 해킹! 👨🏽‍💻✨

Back to Blog

관련 글

더 보기 »