텍스트를 입력하면 결정론적으로 고유한 비주얼 아트를 생성하는 웹 애플리케이션입니다.

🔗 Live Demo: https://text2visual.jubrolab.dev

텍스트를 독창적인 미술 작품으로 변환합니다. 8가지 예술 스타일을 제공합니다.

• Flow - 유체역학적 패턴
• Brushstroke - 임파스토 붓터치
• Marble - 대리석 마블링
• Expressionist - 표현주의 액션 페인팅
• Watercolor - 물감 번짐 수채화
• Stipple - 점묘법 스타일
• Mosaic - 타일 모자이크
• Glitch - 디지털 글리치 아트

텍스트 기반 시각적 인증서를 생성합니다. 동일한 텍스트는 항상 동일한 패턴을 생성하여 SHA-256 해시로 진위 여부를 검증할 수 있습니다.

이미지 기반 2차 인증 시스템입니다. ID와 비밀번호로 고유한 기하학적 패턴을 생성하고, 9개의 이미지 중 본인의 패턴을 선택하여 인증합니다.

• 다국어 지원: 한국어 / English
• 테마 모드: 다크 모드 / 라이트 모드
• 설정은 브라우저에 저장되어 유지됩니다

• 오프라인 지원
• 홈 화면에 추가 가능
• 앱과 같은 사용자 경험

• Node.js 18.0 이상
• npm 또는 yarn

# 저장소 클론
git clone https://github.com/JangTaeGyu/text-to-visual.git
cd text-to-visual

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

브라우저에서 http://localhost:3000을 열어 확인합니다.

# .env.local 파일 생성
OPENAI_API_KEY=your_api_key        # 감정 분석용 (선택사항)
NEXT_PUBLIC_SITE_URL=https://your-domain.com  # SEO용 사이트 URL
NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION=xxx      # Google Search Console

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Rendering: Canvas 2D API
• Hashing: SHA-256 (crypto-js)
• QR Code: qrcode
• GIF Export: gif.js
• Analytics: @vercel/analytics
• PWA: Custom Service Worker

src/
├── app/
│   ├── api/
│   │   ├── og/              # OG 이미지 생성
│   │   └── visual/          # 비주얼 생성 API
│   ├── art/                 # Art Generator 페이지
│   ├── certificate/         # Certificate 페이지
│   ├── auth/                # Image 2FA 페이지
│   ├── layout.tsx           # 루트 레이아웃 (SEO, 메타데이터)
│   ├── sitemap.ts           # 사이트맵 생성
│   └── robots.ts            # robots.txt 생성
├── components/
│   ├── providers/           # Context Providers
│   ├── ThemeToggle.tsx      # 테마 전환 버튼
│   ├── LanguageSwitcher.tsx # 언어 전환 버튼
│   ├── PWAProvider.tsx      # PWA 서비스 워커 등록
│   └── JsonLd.tsx           # 구조화된 데이터
├── contexts/
│   ├── ThemeContext.tsx     # 테마 상태 관리
│   └── LocaleContext.tsx    # 다국어 상태 관리
├── config/
│   └── i18n/                # 다국어 번역 파일
├── lib/
│   ├── renderer/            # Canvas 렌더러
│   ├── utils/               # 유틸리티 함수
│   └── presets/             # 스타일/사이즈 프리셋
└── types/                   # TypeScript 타입 정의

public/
├── sw.js                    # Service Worker
├── manifest.json            # PWA 매니페스트
├── og-image.png             # OG 이미지
└── icon.svg                 # 앱 아이콘

• 페이지별 메타데이터 최적화
• Open Graph & Twitter Card 지원
• 동적 OG 이미지 생성 (/api/og)
• JSON-LD 구조화된 데이터
• sitemap.xml & robots.txt 자동 생성

Vercel Analytics가 내장되어 있어 Vercel 대시보드에서 방문자 통계를 확인할 수 있습니다.

# Vercel CLI 설치
npm i -g vercel

# 배포
vercel

또는 GitHub 저장소를 Vercel에 연결하여 자동 배포를 설정합니다.

Next.js를 지원하는 모든 플랫폼에서 배포 가능합니다:

• Netlify
• AWS Amplify
• Railway
• Docker

텍스트를 기반으로 비주얼 파라미터를 생성합니다.

Request Body:

{
  "text": "Hello World",
  "style": "vivid",
  "sizePreset": "og",
  "artisticMode": "flow"
}

동적 OG 이미지를 생성합니다.

Query Parameters:

• text - 표시할 텍스트
• style - 스타일 (minimal, vivid, dark, pastel, monochrome)
• page - 페이지 타입 (home, art, certificate, auth)

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Perlin Noise implementation based on Ken Perlin's improved noise algorithm
• Artistic styles inspired by various expressionist and abstract artists
• Built with Next.js and Tailwind CSS