← 포트폴리오 목록

3D 아파트 공간 커뮤니티

MVP를 넘어 공개 공간 갤러리, 다른 사용자 공간 방문, 방명록까지 통합한 3D 인테리어 커뮤니티 확장 프로젝트입니다.

3D 뷰어 읽기 전용 모드 분리 설계편집 컴포넌트와 뷰어 컴포넌트를 분리해 방문 모드에서도 동일 렌더링 파이프라인을 재사용하는 구조 구현
무한 스크롤 갤러리 조회 최적화Intersection Observer 기반 무한 스크롤과 Redis 캐시로 정렬·필터 조합별 목록 조회 응답 구조 설계
방명록 낙관적 UI 구조 구현작성 즉시 목록에 반영 후 서버 응답으로 확정하는 낙관적 UI 패턴을 방명록·댓글에 적용
서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptReact Three FiberTailwind CSSNode.jsExpressPrismaPostgreSQLRedis
주요 기능
  • 공개 공간 갤러리
  • 다른 사용자 공간 방문
  • 방명록
  • 가구 카탈로그 관리
Overview

프로젝트 개요

범위: 개발, 디자인, 기획

MVP를 넘어 공개 공간 갤러리, 다른 사용자 공간 방문, 방명록까지 통합한 3D 인테리어 커뮤니티 확장 프로젝트입니다. 무한 스크롤 갤러리와 읽기 전용 3D 뷰어로 소셜 탐색 경험을 제공하고, 가구 카탈로그 관리자 화면으로 향후 상품 연계 확장의 기반을 함께 보여줍니다. 정부 창업 지원 사업 발표에서 MVP 이후의 성장 방향까지 설득력 있게 제시할 수 있는 구조로 설계합니다.

작업 범위

  • 공개 공간 갤러리: 다른 사용자가 공개한 3D 공간을 인기·최신순으로 필터링해 카드 그리드로 탐색하고, 카드를 클릭하면 퀵뷰로 미리보기를 확인합니다
  • 다른 사용자 공간 방문: 공개된 다른 사용자의 3D 공간에 읽기 전용으로 진입해 자유롭게 둘러봅니다
  • 방명록: 방문한 공간에 방명록을 남기고, 다른 방문자의 방명록과 댓글을 함께 조회합니다
  • 가구 카탈로그 관리: 운영자가 가구·마감재 카탈로그를 등록·수정하고 노출 여부를 관리하는 관리자 화면입니다

주요 업무

  • 공개 공간 갤러리 화면: 상단 필터바에서 정렬 기준을 선택하면 목록을 재조회하고, 카드 클릭 시 모달 형태의 퀵뷰에서 3D 씬을 경량 프리뷰로 로드합니다
  • 다른 사용자 공간 방문 화면: P1의 3D 뷰어 컴포넌트를 읽기 전용 모드(편집 컨트롤 비활성)로 재사용해 편집 버튼 없이 시점 전환과 이동만 허용합니다
  • 방명록 화면: 방명록 목록은 커서 기반 페이지네이션으로 조회하고, 댓글은 방명록 항목에 종속된 1단계 구조로 구현합니다
  • 가구 카탈로그 관리 화면: 카탈로그 CRUD API와 이미지 업로드를 제공하며, 추후 상품 연계 확장을 고려해 카테고리·태그 구조로 설계합니다
3D 아파트 공간 커뮤니티
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

다수 방문자가 동시에 같은 공개 공간을 조회할 때 3D 모델 중복 로딩으로 서버 부하가 늘 수 있어

Redis 캐시와 정적 자산 CDN 서빙으로 대응합니다

무한 스크롤 갤러리에서 정렬 기준 변경 시 중복·누락 항목이 생길 수 있어

커서 기반 페이지네이션으로 목록 일관성을 보장합니다

가구 카탈로그가 확장될수록 편집 패널의 목록 탐색이 느려질 수 있어

카테고리·태그 기반 필터링과 가상 스크롤을 적용합니다

방명록·댓글에 부적절한 콘텐츠가 등록될 수 있어

신고 기능과 작성자 본인 삭제 권한으로 최소한의 콘텐츠 관리 체계를 마련합니다

구현 내용

핵심 기능 상세

핵심 기능 1

공개 공간 갤러리

다른 사용자가 공개한 3D 공간을 인기·최신순으로 필터링해 카드 그리드로 탐색하고, 카드를 클릭하면 퀵뷰로 미리보기를 확인합니다.

  • 상단 필터바(인기/최신/친구) 선택 시 쿼리 키를 갱신해 서버 정렬 결과를 재조회
  • Intersection Observer 기반 무한 스크롤로 카드 그리드를 페이지네이션 없이 로드
  • 퀵뷰 모달은 압축된 경량 3D 모델을 로드해 갤러리에서도 빠른 미리보기 제공

카드 클릭 시 전체 3D 뷰어로 전환하지 않고 경량 퀵뷰 모달로 먼저 미리보기를 제공해, 갤러리 탐색과 상세 진입을 분리하는 UX 구조를 구현합니다.

공개 공간 갤러리
공개 공간 갤러리 실제 화면
핵심 기능 2

다른 사용자 공간 방문

공개된 다른 사용자의 3D 공간에 읽기 전용으로 진입해 자유롭게 둘러봅니다. P1의 3D 뷰어 컴포넌트를 읽기 전용 모드(편집 컨트롤 비활성)로 재사용해 편집 버튼 없이 시점 전환과 이동만 허용합니다.

  • 3D 뷰어 컴포넌트에 읽기 전용 속성을 추가해 편집 컨트롤·인스펙터 패널을 조건부로 언마운트
  • 방문 기록을 별도 테이블에 적재해 공간 소유자에게 방문자 수를 집계해 제공
  • 방문 진입 시 소유자 닉네임·공개 시각을 헤더에 표시하는 컨텍스트 바 구현

편집 로직과 뷰어 로직을 컴포넌트 단위로 분리해, 방문 모드에서도 동일한 3D 렌더링 파이프라인을 재사용하는 구조를 구현합니다.

다른 사용자 공간 방문
다른 사용자 공간 방문 실제 화면
핵심 기능 3

방명록

방문한 공간에 방명록을 남기고, 다른 방문자의 방명록과 댓글을 함께 조회합니다. 방명록 목록은 커서 기반 페이지네이션으로 조회하고, 댓글은 방명록 항목에 종속된 1단계 구조로 구현합니다.

  • 방명록-댓글 1:N 관계 모델을 정의하고 커서 기반 페이지네이션 API 구현
  • 방명록 작성 시 낙관적 갱신으로 목록에 즉시 반영 후 서버 응답으로 최종 확정
  • 신고 버튼과 작성자 본인 삭제 기능으로 최소한의 콘텐츠 관리 흐름 구현

방명록·댓글 작성 시 실시간 갱신 없이도 낙관적 UI로 즉각적인 반응성을 체감할 수 있는 구조를 구현합니다.

방명록
방명록 실제 화면
핵심 기능 4

가구 카탈로그 관리

운영자가 가구·마감재 카탈로그를 등록·수정하고 노출 여부를 관리하는 관리자 화면입니다. 카탈로그 CRUD API와 이미지 업로드를 제공하며, 추후 상품 연계 확장을 고려해 카테고리·태그 구조로 설계합니다.

  • 가구·마감재 항목의 카테고리·태그·썸네일을 관리하는 CRUD API 및 관리자 테이블 UI 구현
  • 이미지 업로드는 사전 서명 URL 방식으로 처리해 서버 부하를 최소화
  • 노출/비노출 토글과 정렬 순서 필드로 카탈로그 노출 우선순위를 관리자가 직접 조정

카테고리·태그 구조를 확장 가능하게 설계해, 추후 상품 연계 등 카탈로그 활용 범위를 넓힐 수 있는 기반을 구현합니다.

가구 카탈로그 관리
가구 카탈로그 관리 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

공개 갤러리 데이터 모델 및 API 설계 · 2026.09

공개 공간·방문 기록·방명록 테이블 설계, 정렬·필터 조건별 조회 API 정의

STEP 2

갤러리 UI 및 퀵뷰 개발 · 2026.09

필터바·카드 그리드·무한 스크롤 구현, 경량 3D 프리뷰로 퀵뷰 모달 개발

STEP 3

방문 뷰어 및 방명록 기능 개발 · 2026.09

3D 뷰어 읽기 전용 모드 분리, 방명록·댓글 CRUD 및 낙관적 UI 적용

STEP 4

가구 카탈로그 관리자 화면 개발 · 2026.09

카탈로그 CRUD·이미지 업로드·노출 관리 관리자 UI 구현, Redis 캐시로 목록 조회 최적화

STEP 5

통합 테스트 및 시연 배포 · 2026.09

다중 방문 시나리오 테스트, 크로스 브라우저 검증, 시연 가능한 배포 환경 구성

프로젝트 성과

주요 성과

3D 뷰어 읽기 전용 모드 분리 설계편집 컴포넌트와 뷰어 컴포넌트를 분리해 방문 모드에서도 동일 렌더링 파이프라인을 재사용하는 구조 구현
무한 스크롤 갤러리 조회 최적화Intersection Observer 기반 무한 스크롤과 Redis 캐시로 정렬·필터 조합별 목록 조회 응답 구조 설계
방명록 낙관적 UI 구조 구현작성 즉시 목록에 반영 후 서버 응답으로 확정하는 낙관적 UI 패턴을 방명록·댓글에 적용
Highlights

기술적 주안점

  • 카드 클릭 시 전체 3D 뷰어로 전환하지 않고 경량 퀵뷰 모달로 먼저 미리보기를 제공해, 갤러리 탐색과 상세 진입을 분리하는 UX 구조를 구현합니다
  • 편집 로직과 뷰어 로직을 컴포넌트 단위로 분리해, 방문 모드에서도 동일한 3D 렌더링 파이프라인을 재사용하는 구조를 구현합니다
  • 방명록·댓글 작성 시 실시간 갱신 없이도 낙관적 UI로 즉각적인 반응성을 체감할 수 있는 구조를 구현합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기