모던 풀스택 AI 커뮤니티, AIsleHub 제작기

한 줄 요약: AI 프롬프트 공유와 커뮤니티가 결합된 큐레이션 플랫폼 개발

제작 기간: 2024.03 ~ 진행 중 (약 2주 소요)

핵심 목표: * 복잡한 AI 프롬프트를 시각적으로 구조화하여 제공

이미지 중심의 갤러리와 텍스트 중심의 커뮤니티가 공존하는 하이브리드 UI 구현

Framework: Next.js 14 (App Router)

Language: TypeScript

Database: PostgreSQL (with Prisma ORM)

Storage: Cloudflare R2 (이미지 저장소)

Deployment: Vercel

Design: Tailwind CSS & Lucide Icons

이미지 워터마크 자동화: 유저가 업로드한 이미지에 sharp 라이브러리를 활용하여 서버 측에서 사이트 로고를 합성해 무단 도용을 방지함.

하이브리드 레이아웃: 카테고리에 따라 Grid와 List 형태가 변하는 반응형 디자인 시스템 구축.

프롬프트 복사 시스템: 클립보드 API를 활용해 한 번의 클릭으로 긴 프롬프트를 정확히 복사하는 UX 제공.

아이디어 빌드: AI 활용도가 높아짐에 따라 '프롬프트의 체계적 저장'이 필요함을 느낌.

DB 설계: Prisma를 사용하여 Post, User, Comment 간의 관계 설정 및 카테고리 Enum 정의.

UI/UX 작업: Cursor AI를 활용해 퀘이사존과 오픈프롬프트의 장점만 결합한 UI 프로토타이핑.

인프라 연결: Cloudflare R2 버킷 생성 및 CORS 설정을 통해 안정적인 이미지 호스팅 완료.

배운 점: 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 분리했을 때 초기 로딩 속도가 비약적으로 상승함을 체감함.

향후 계획: * 유저 활동에 따른 포인트/레벨 시스템 도입

Gemini API를 직접 연결하여 게시글 요약 및 프롬프트 최적화 기능 추가 예정