브롬프트집 (brompt.zip)
결과 이미지를 보고 AI 이미지 프롬프트를 찾아 복사·공유하는 커뮤니티 | 2026.08
관련 링크
| 홈페이지 | brompt.zip |
프로젝트 개요
브롬프트집은 생성 결과 이미지를 먼저 살펴보고, 마음에 드는 이미지의 AI 프롬프트를 바로 복사해 활용할 수 있는 서비스입니다.
한국어·영어·일본어를 지원하며, 이미지 탐색부터 프롬프트 복사, GPT·Gemini·Grok 이동, 게시글 작성과 공유까지 하나의 흐름으로 구성했습니다.
기술 스택
| 분야 | 기술 |
|---|---|
| 프론트엔드 | React 19, TypeScript, Vite, Mantine |
| 데이터·인증 | Supabase, React Query |
| 이미지·서버 | Cloudflare Pages Advanced Mode Worker, R2 |
| 분석 | Firebase Analytics (GA4) |
| 배포·자동화 | GitHub Actions, Cloudflare Pages |
주요 기능
- 2열 마소너리 피드, 무한 스크롤, 제목·태그 검색과 인기 태그 필터
- 게시글당 최대 8개 이미지와 GPT·Gemini·Grok용 프롬프트 등록
- 프롬프트 복사 후 선택한 AI 도구로 자연스럽게 이어지는 이동 흐름
- 좋아요, 댓글, 공유, 작성자 전용 수정·삭제와 관리자 복구 기능
- 한국어·영어·일본어 UI 및 게시글 현지화, 언어별 URL·메타데이터 제공
- 모바일 전체 화면 이미지, iOS 한글 조합 입력을 고려한 작성 경험
스크린샷
홈에서 검색과 인기 태그, 오늘의 커버를 한눈에 탐색할 수 있습니다.
마소너리 피드에서 생성 결과를 먼저 비교하고 원하는 프롬프트를 선택합니다.
상세 화면에서는 결과 이미지와 프롬프트 담아가기 동작을 중심으로 보여줍니다.
사용한 AI 도구와 태그, 작성자 정보, 프롬프트 원문을 한 흐름에서 확인할 수 있습니다.
주요 경험
- 원본·목록용 썸네일·공유용 이미지를 WebP로 생성하고 Cloudflare R2에 저장하는 이미지 파이프라인 구축
- Supabase RLS와 컬럼 권한, Worker의 소유권 검사를 결합해 클라이언트와 서버의 보안 경계 설계
- 게시글별 동적 Open Graph 이미지, 다국어 canonical·hreflang·sitemap·JSON-LD를 적용해 SPA의 검색 노출 보완
- 일반 브라우저의 Google 로그인과 인앱 웹뷰용 익명 로그인을 분리하고, 익명 계정의 Google 계정 승격 흐름 구현
- 분석 동의 이후에만 페이지뷰와 주요 전환 이벤트를 수집하도록 개인정보 보호 중심의 분석 구조 적용
- GitHub Actions에서 타입 검사와 빌드를 검증한 뒤 Cloudflare Pages로 배포하고 버전 태그와 릴리스를 생성하는 자동화 구성
운영 품질
- 이미지 크기와 용량을 브라우저와 Worker 양쪽에서 검증하고, 목록에는 경량 썸네일을 우선 제공해 전송 비용과 로딩 속도 개선
- 복사 수 중복·과다 요청 제한, soft-delete와 감사 로그를 적용해 공개 커뮤니티 운영 안전성 보강
- 로컬 목업과 Supabase 데이터 소스를 같은 계약으로 분리해 외부 환경 없이도 주요 사용자 흐름을 개발·검증할 수 있도록 구성