플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 이미지 위 부품 영역 좌표를 화면 크기·비율 변화에도 정확히 유지하는 반응형 좌표 변환 로직 설계 필요 - 300여 종 제품의 유형·소재·색상 다중 필터 조합을 성능 저하 없이 처리하는 인덱싱 전략 필요 - 가방 1개에 다수 부품이 연결되는 다대다 관계를 직관적으로 탐색 가능하게 구성하는 UI 설계 필요 - 제품 이미지 용량이 큰 경우에도 빠른 로딩을 보장하는 이미지
프로젝트 성과
이미지 좌표 기반 핫스팟 탐색 구조 구현
백분율 좌표계로 반응형 화면에서도 정확히 위치하는 SVG 핫스팟 오버레이를 설계, 이미지와 제품 데이터를 좌표로 매핑합니다
다중 필터 카탈로그 조회 구조 설계
유형·소재·색상 조합 필터를 URL 쿼리로 동기화하는 구조를 구현, 공유 가능한 필터 링크를 제공합니다
재사용 가능한 제품 상세 컴포넌트 설계
데이터 기반 사양 테이블·이미지 갤러리 컴포넌트를 설계해 300여 종 제품에 동일 구조로 대응합니다
컨텍스트 포함 문의 폼 구축
제품 정보를 자동 포함하는 문의 API를 구현, 발송 실패 시 재시도 로직을 적용합니다
핵심 기능
이미지 핫스팟 쇼룸 탐색
가방 제품 이미지 위에 부품 영역을 표시하고, 바이어가 특정 부위를 클릭하면 해당 부품 상세로 즉시 이동합니다
진행 단계
요구사항 분석 및 제품 데이터 모델 설계
2026.09
부품 유형·제품·핫스팟 좌표 테이블 구조를 설계하고 PostgreSQL 테이블 8개를 정의합니다
프로젝트 상세
1) 포트폴리오 소개 가방 부품을 생산·공급하는 제조업 바이어를 대상으로, 가방 이미지 위 부품 영역을 클릭해 해당 제품으로 이동하는 이미지 기반 탐색과 유형별 카탈로그·상세 정보·이메일 문의를 포함한 디지털 쇼룸을 React와 Node.js 기반으로 구현합니다. 비개발자도 운영 가능한 구조를 전제로 설계합니다. 2) 작업 범위 - 이미지 핫스팟 쇼룸 탐색: 가방 제품 이미지 위에 부품 영역을 표시하
