← 포트폴리오 목록
3D 감수 데이터 관리 플랫폼
P1 MVP를 확장하여 팬톤 색상표 기반 색상 검수 시스템, 감수 리포트 자동화, 협력사별 작업 이력 분석 대시보드, Redis 캐시 기반 검색 고도화를 통합한 3D 감수 데이터 관리 플랫폼을 React + Node.js + PostgreSQL + Redis 풀스택으로 설계·구현합니다.
팬톤 색상 기반 아카이브 필터 시스템 설계팬톤 1,755개 색상코드 HEX→HSL 변환 후 허용 오차 필터링 쿼리를 설계하고 Redis TTL 캐시 연동으로 색상 필터 변경 시 빠른 목록 갱신 구조 구현
감수 리포트 자동화 파이프라인 구현Materialized View 집계와 jsPDF + html2canvas 조합으로 Three.js 뷰어 스크린샷 포함 PDF 감수 리포트 자동 생성 구조 설계·구현
협력사 다지표 Radar 분석 차트 설계처리 속도·주석 품질·응답률·완료율 4개 지표를 정규화하여 Recharts RadarChart로 협력사 간 동시 비교하는 분석 화면 구현
Overview
프로젝트 개요
P1 MVP를 확장하여 팬톤 색상표 기반 색상 검수 시스템, 감수 리포트 자동화, 협력사별 작업 이력 분석 대시보드, Redis 캐시 기반 검색 고도화를 통합한 3D 감수 데이터 관리 플랫폼을 React + Node.js + PostgreSQL + Redis 풀스택으로 설계·구현합니다. 관리자·협력사가 감수 워크플로우를 체계적으로 관리하고 분석할 수 있는 확장 구조를 제공합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
팬톤 색상코드 1,755개를 HEX→HSL 변환 후 허용 오차 범위 필터링 시 PostgreSQL 함수 기반 연산 비용을 줄이기 위한 색상 인덱싱 전략 설계가 필요합니다
PDF 생성 시 Three.js WebGLRenderer 캔버스를 html2canvas로 래스터화할 때 크로스 오리진 텍스처 이미지 접근 제한을 S3 CORS 정책으로 해결해야 합니다
Materialized View REFRESH 중 협력사 분석 화면의 집계 데이터 공백을 방지
REFRESH CONCURRENTLY와 Redis 캐시 폴백 전략을 함께 설계해야 합니다
감수 워크플로우 상태 전이 검증 로직이 복잡해질수록 Express 미들웨어 체인이 길어지는 문제를 상태 머신 패턴(XState 또는 자체 구현)으로 구조화해야 합니다
협력사별 작업 지표 정규화(0~1 스케일 변환) 시 특정 지표 값이 0인 신규 협력사가 RadarChart에서 왜곡되는 문제를 최솟값 바닥(floor) 전략으로 처리해야 합니다
핵심 기능 1
감수 데이터 아카이브 대시보드
카테고리 필터·키워드 검색·팬톤 색상표 조회를 통합한 메인 아카이브 화면으로, 등록된 3D 모델과 360도 뷰어 데이터를 그리드·리스트 뷰로 탐색하는 감수 데이터 관리 화면입니다
핵심 기능 2
감수 리포트 자동화
감수 완료된 주석·피드백 데이터를 집계하여 항목별 감수 결과 리포트를 자동 생성하고, PDF 내보내기와 감수 이력 버전 관리를 제공하는 리포트 화면입니다
핵심 기능 3
협력사 작업 이력 분석
협력사별 감수 완료 건수·평균 처리 기간·주석 작성 수·피드백 응답률을 Recharts 차트로 시각화하고, 협력사별 작업 상세 이력을 조회하는 협업 분석 화면입니다
핵심 기능 4
관리자 CRUD 및 감수 워크플로우
3D 모델·360도 사진 데이터 신규 등록·수정·삭제와 감수 워크플로우(등록→검토→승인→완료) 상태 관리, 감수 완료 이력 조회를 제공하는 관리자 운영 화면입니다
구현 과정
프로젝트 진행 단계
STEP 1
P1 확장 스키마 설계 및 Redis 아키텍처 수립
감수 워크플로우 ENUM·이력·팬톤 색상 테이블 확장, Materialized View 3개 설계, Redis TTL 캐시 키 전략 수립
STEP 2
아카이브 대시보드 및 검색 고도화 구현
PostgreSQL Full-Text Search + pg_trgm 통합, Redis TTL 캐시 연동 검색 API, 팬톤 색상 필터 UI 구현
STEP 3
감수 리포트 자동화 및 PDF 생성 구현
Materialized View 집계 API, jsPDF + html2canvas PDF 생성 파이프라인, 폰트 임베드·감수 이력 버전 관리 구현
STEP 4
협력사 분석 차트 및 관리자 CRUD 구현
Recharts RadarChart·BarChart 협력사 분석 화면, TanStack Table 관리자 CRUD, 감수 워크플로우 상태 머신 API 개발
STEP 5
통합 검증 및 Redis 캐시 최적화
아카이브 검색·리포트·협력사 분석·CRUD 통합 테스트, Redis 캐시 TTL 전략 최적화, Materialized View 갱신 스케줄링 검증
프로젝트 성과
팬톤 색상 기반 아카이브 필터 시스템 설계팬톤 1,755개 색상코드 HEX→HSL 변환 후 허용 오차 필터링 쿼리를 설계하고 Redis TTL 캐시 연동으로 색상 필터 변경 시 빠른 목록 갱신 구조 구현
감수 리포트 자동화 파이프라인 구현Materialized View 집계와 jsPDF + html2canvas 조합으로 Three.js 뷰어 스크린샷 포함 PDF 감수 리포트 자동 생성 구조 설계·구현
협력사 다지표 Radar 분석 차트 설계처리 속도·주석 품질·응답률·완료율 4개 지표를 정규화하여 Recharts RadarChart로 협력사 간 동시 비교하는 분석 화면 구현
감수 워크플로우 5단계 상태 머신 설계PostgreSQL ENUM 상태 전이 규칙을 Express 미들웨어에서 검증하고 Prisma 트랜잭션으로 이력을 자동 기록하는 감사 로그 구조 구현
Full-Text Search + Redis 캐시 통합 검색 구조PostgreSQL tsvector GIN 인덱스 기반 한국어 통합 검색과 Redis TTL 캐시를 결합하여 카테고리·키워드·색상 복합 필터 고성능 처리 구조 구현
Review
기술적 주안점
- 팬톤 색상코드 HEX 값을 HSL로 변환하여 허용 오차(±15°) 범위로 색상 필터링 쿼리를 설계하고, Redis 캐시와 연계하여 색상 필터 변경 시 빠른 목록 갱신 구조를 구현합니다
- 감수 완료 주석 데이터를 Materialized View로 집계하고, PDF 생성 시 html2canvas로 Three.js 뷰어 스크린샷을 래스터화하여 3D 모델 이미지가 포함된 감수 리포트를 자동 생성하는 구조를 설계합니다
- 협력사별 감수 지표 4종(처리 속도·주석 품질·응답률·완료율)을 정규화하여 Recharts RadarChart로 동시 비교하고, Materialized View 기반 월별 집계로 대용량 이력 데이터 조회 부하를 최소화하는 구조를 설계합니다
