스튜디오 옴니아
건축·인테리어 스튜디오의 프로젝트 포트폴리오 쇼케이스와 관리자 플랫폼을 Python FastAPI + React 기반으로 설계·구현. 프로젝트 카테고리별 갤러리, 아티클 발행, 견적 문의 관리 기능을 포함한 콘텐츠 관리 시스템 구축.
프로젝트 배경 및 문제점
건축 프로젝트 이미지 수백 장 업로드 시 WebP 변환·리사이징을 응답 블로킹 없이 비동기 처리하는 파이프라인 설계가 필요했고, 카테고리 필터 전환 시 Masonry 레이아웃 카드 재배치를 자연스러운 모션으로 표현하면서 CLS를 억제하는 구현 전략이 필요했습니다.
이미지 비동기 처리
건축 프로젝트 이미지 수백 장 업로드 시 WebP 변환·리사이징을 응답 블로킹 없이 비동기 처리하는 파이프라인 설계
Masonry 레이아웃 모션
카테고리 필터 전환 시 Masonry 레이아웃 카드 재배치를 자연스러운 모션으로 표현하면서 CLS 억제
예약 발행 스케줄러
아티클 예약 발행 스케줄러의 UTC/KST 시간 변환 정합성 설계
다중 태그 쿼리
JSONB 태그 배열의 AND/OR 혼합 다중 조건 쿼리를 인덱스 효율적으로 처리하는 GIN 인덱스 전략
Framer Motion layoutId 카테고리 필터 애니메이션
Framer Motion layoutId 기반 공유 레이아웃 애니메이션을 카테고리 필터 전환에 적용하여 자연스러운 카드 재배치 모션 UX 구현. React Portal 라이트박스는 접근성 ARIA 속성 포함 설계.
Pillow 이미지 처리 비동기 파이프라인
Python Pillow로 WebP 변환·크롭 처리 후 SQLAlchemy 배치 INSERT 파이프라인 구현. JSONB + GIN 인덱스 기반 다중 태그 AND/OR 조건 쿼리 지원.
예약 발행 및 전문 검색
FastAPI APScheduler와 PostgreSQL tsvector/tsquery 전문 검색을 결합하여 예약 발행과 한국어 아티클 검색 기능 구현.
프로젝트 쇼케이스
주거·상업·오피스 카테고리별 건축 프로젝트를 풀스크린 히어로 이미지와 Masonry 그리드로 탐색. 카테고리 탑네비, 풀스크린 히어로, 라이트박스 뷰어
프로젝트 상세 관리
건축 프로젝트 상세 정보 등록·편집하는 관리 화면. 메타 정보 폼, 이미지 시리즈 업로드, 태그 관리, 발행 상태
인사이트 아티클 관리
건축 트렌드·시공 사례 아티클 작성·발행 관리. Tiptap 에디터, 시리즈 관리, 예약 발행, 전문 검색
견적 문의 관리
견적 문의 수신·분류·처리 상태 관리 인박스. 문의 유형 필터, FSM 상태 워크플로우, 이메일 알림
프로젝트 진행 단계
1단계: 건축 도메인 데이터 모델링 및 API 설계 (2025.08)
프로젝트·아티클·문의·미디어 ERD 설계, JSONB 태그 구조 + GIN 인덱스 전략, FastAPI 모듈 분리 아키텍처 설계
2단계: 이미지 처리 파이프라인 및 콘텐츠 API 개발 (2025.09)
Pillow WebP 변환·크롭 파이프라인 구현, 전문검색 설계, 문의 FSM API 38개 구현
3단계: 쇼케이스 프론트엔드 및 Framer Motion 구현 (2025.10)
쇼케이스 메인·상세·라이트박스 구현, Framer Motion layoutId 카테고리 필터 애니메이션, 반응형 Masonry 적용
4단계: 관리자 CMS UI 및 에디터 통합 (2025.11)
Tiptap 에디터 통합, 프로젝트·아티클·문의 관리 화면 15개 구현, react-hook-form + Zod 폼 체계 구축
