유튜브 썸네일, 인스타 스토리, 블로그 포스팅에 넣을 대화 스크린샷, 이제 진짜처럼 만들어보세요.
| 대상 | 활용 사례 |
|---|---|
| 📱 콘텐츠 크리에이터 | 썸네일에 실감나는 대화 캡쳐가 필요할 때 |
| 🎬 쇼츠/릴스 제작자 | 세로형 대화 스크린샷이 필요할 때 |
| ✍️ 블로거/작가 | 스토리텔링에 대화 이미지를 활용할 때 |
| 🎨 디자이너 | 목업에 리얼한 채팅 UI가 필요할 때 |
| KakaoTalk | Discord | Telegram | |
|---|---|---|---|
 |
 |
 |
 |
|
|
||||||||||||||||||||
|
|
# 저장소 클론
git clone https://github.com/Prometheus-P/TalkStudio.git
cd TalkStudio
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev브라우저에서 http://localhost:5173 접속
1️⃣ 좌측 사이드바에서 플랫폼 선택 (카카오톡, Discord, Telegram, Instagram)
2️⃣ 에디터에서 발화자 선택 후 메시지 입력
3️⃣ 우측 iPhone 프레임에서 실시간 미리보기 확인
4️⃣ "PNG 저장" 버튼으로 이미지 내보내기
| Frontend | React 19 + Vite 7 (Rolldown) |
| 상태 관리 | Zustand 5 |
| 스타일링 | Tailwind CSS 4 |
| 이미지 생성 | html-to-image |
| AI 대화 생성 | Upstage Solar API |
| 명령어 | 설명 |
|---|---|
npm run dev |
개발 서버 실행 |
npm run build |
프로덕션 빌드 |
npm run preview |
빌드 결과물 미리보기 |
npm run lint |
ESLint 검사 |
npm run test |
Vitest 테스트 실행 |
TalkStudio/
├── src/
│ ├── components/
│ │ ├── editor/ # 에디터 (메시지 입력, 프로필 설정)
│ │ ├── preview/ # 미리보기 (iPhone 프레임, 메시지 버블)
│ │ └── layout/ # 레이아웃 (사이드바)
│ ├── store/ # Zustand 상태 관리
│ ├── themes/ # 플랫폼별 테마 프리셋
│ └── App.jsx # 루트 컴포넌트
├── scripts/ # AI 대화 생성 & 캡처 스크립트
└── specs/ # 기능 스펙 문서
FigJam으로 작성된 프로젝트 아키텍처 문서입니다.
| 다이어그램 | 설명 | 링크 |
|---|---|---|
| 전체 시스템 플로우 | End-to-End 플로우 (User → Frontend → Backend → Storage) | 보기 |
| 앱 아키텍처 | 3-Column UI 레이아웃, Zustand 상태 관리, 데이터 흐름 | 보기 |
| 사용자 플로우 | 테마 선택 → 메시지 작성 → 미리보기 → 캡처 과정 | 보기 |
| 상태 관리 | Zustand Store 상태 전이 다이어그램 | 보기 |
| 컴포넌트 구조 | React 컴포넌트 계층 구조 (Sidebar, Editor, Preview) | 보기 |
| 백엔드 아키텍처 | Clean Architecture (Router → Service → Repository) | 보기 |
보안 취약점 발견 시 SECURITY.md를 참고해주세요.
Copyright (c) 2024-2025 TalkStudio. All Rights Reserved.
이 소프트웨어는 TalkStudio의 독점 소유입니다. 자세한 내용은 LICENSE 파일을 참조하세요.
Made with ❤️ by Prometheus-P
⭐ Star를 눌러 프로젝트를 응원해주세요!