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

BUILD · 대표 미디어
개요
한 줄 요약: 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를 직접 연결하여 게시글 요약 및 프롬프트 최적화 기능 추가 예정
주요 특징
- 프로젝트 개요 (Overview)
- 기술 스택 (Tech Stack)
- 주요 기능 및 도전 과제 (Features & Challenges)
- 제작 과정 (Workflow)
- 배운 점 및 향후 계획 (Learnings & Next)

댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.