SNS 슬로건 카드 생성기

1줄 슬로건을 입력받아 SNS용 이미지 카드로 자동 제작하는 웹 애플리케이션

📋 프로젝트 개요

사용자가 입력한 짧은 슬로건 문구를 시각적으로 매력적인 SNS 카드 이미지로 변환하여 쉽게 공유할 수 있도록 돕는 서비스입니다.

배포 방식: 웹 브라우저에서 바로 사용 가능한 온라인 서비스 (별도 설치 불필요)

🎯 주요 기능

1. 슬로건 입력

• 여러 줄 텍스트 입력 (최대 100자)
• 엔터키로 줄바꿈 지원
• 자동 높이 조절 textarea
• 실시간 미리보기

2. 카드 디자인 커스터마이징

• 배경 옵션

  • 단색 배경 (색상 선택 가능)
    • 해달에듀 브랜드 컬러 선택 버튼
      • HAEDAL_YELLOW: '#FFD506', DARK: '#3D3D3D', DARK_BG: '#4A4A4A', GRAY: '#6B6B6B', LIGHT_BG: '#F5F5F5', CREAM_BG: '#FFF9E6', WHITE: '#FFFFFF',
  • 그라데이션 배경 (2-3가지 색상 조합)
  • 이미지 업로드

• 텍스트 스타일

  • 폰트 선택 (3-5가지 프리셋)
  • 글자 크기 조절
  • 글자 색상 선택
  • 텍스트 정렬 (좌, 중앙, 우)

• 레이아웃

  • 카드 비율 선택 (1:1, 16:9, 9:16, 4:5)
  • 여백 조절

3. 카드 내보내기

• PNG 포맷으로 다운로드
• 해상도 옵션 (1080x1080, 1920x1080 등)
• 클립보드 복사 기능

🛠 기술 스택

Frontend (클라이언트 사이드)

• HTML5 Canvas API (카드 렌더링)
• JavaScript (ES6+) - 브라우저에서 직접 실행
• CSS3 (반응형 디자인)

배포 환경

• 정적 웹 호스팅
  • GitHub Pages (무료)
  • Vercel / Netlify (무료)
  • Cloudflare Pages (무료)
• 별도 서버 없이 브라우저에서 모든 처리 수행

선택적 고려사항

• React.js (UI 컴포넌트 관리)
• Tailwind CSS (스타일링)
• html2canvas / fabric.js (고급 캔버스 기능)
• Backend API (Phase 4 AI 기능 시 필요)

📐 화면 구성

┌─────────────────────────────────────┐
│         SNS 카드 생성기             │
├─────────────────┬───────────────────┤
│                 │                   │
│   카드 미리보기  │   설정 패널       │
│   (Canvas)      │                   │
│                 │  - 텍스트 입력    │
│                 │  - 배경 설정      │
│                 │  - 폰트 설정      │
│                 │  - 레이아웃 설정  │
│                 │                   │
│                 │  [다운로드 버튼]  │
└─────────────────┴───────────────────┘

🎨 디자인 프리셋

제공할 기본 템플릿:

1. 미니멀 - 흰 배경 + 검정 텍스트
2. 그라데이션 - 선셋 그라데이션
3. 다크모드 - 검정 배경 + 흰 텍스트
4. 파스텔 - 부드러운 파스텔 톤
5. 비비드 - 강렬한 컬러 조합

📱 지원 SNS 플랫폼

최적화된 카드 사이즈:

• Instagram (1080x1080, 1080x1350)
• Facebook (1200x630)
• Twitter/X (1200x675)
• LinkedIn (1200x627)
• Story (1080x1920)

🚀 개발 단계

Phase 1: MVP

• 기본 텍스트 입력 UI
• Canvas 기반 카드 렌더링
• 3가지 기본 프리셋
• PNG 다운로드 기능
• 여러 줄 입력 지원 (줄바꿈)

Phase 2: 커스터마이징

• 배경 색상/그라데이션 선택
• 폰트 옵션 추가
• 텍스트 스타일링 옵션
• 비율 선택 기능
• 노트 배경 패턴 (3종)
• 배경 이미지 업로드
• 해달에듀 브랜드 컬러

Phase 3: 고급 기능

• 폰트 변경 옵션 추가
• 로고/워터마크 추가
• 프리셋 저장/불러오기
• 소셜 미디어 직접 공유

Phase 4: AI 통합 (선택적)

• 생성형 AI 연동으로 배경 이미지 자동 생성
  • 텍스트 프롬프트 입력으로 배경 이미지 생성
  • DALL-E, Stable Diffusion 등 API 연동
  • 슬로건 내용 기반 자동 프롬프트 제안
  • 주의: 이 기능은 백엔드 서버 또는 서버리스 함수 필요

💡 추가 아이디어

• 명언/격언 랜덤 추천 기능
• 사용자 작품 갤러리
• 다국어 폰트 지원
• 애니메이션 효과 (GIF/비디오 내보내기)
• 테마별 카테고리 (동기부여, 명언, 유머 등)
• AI 배경 생성 (Phase 4+)
  • 슬로건 분위기에 맞는 배경 이미지 AI 자동 생성
  • "해변", "산", "도시" 등 키워드 기반 이미지 생성
  • 생성된 이미지 히스토리 저장

🌐 접근 방법

사용자는 웹 브라우저(Chrome, Firefox, Safari 등)에서 URL을 통해 접속하여 바로 사용할 수 있습니다.

• 설치 불필요
• 크로스 플랫폼 지원 (PC, 태블릿, 모바일)
• 오프라인 작동 가능 (PWA로 구현 시)

📄 라이선스

MIT License