1
컨피규레이터모델 분할 방식메인 차량 파일 1개와 부위별 파일 1개씩, 부품 이름 기준 바인딩
(사례) 접이식 자전거・Polish 3D
카탈로그에 담을 수 없는 옵션 조합, 매장 방문 전에 끝나는 고객 구성
접이식 자전거의 온라인 3D 컨피규레이터입니다. 고객이 매장에 들어서기 전에 옵션을 구성하고 치수와 핏을 확인한 뒤, 그 구성을 대리점으로 가져갑니다.
같은 방식은 맞춤 구성이 가능한 고가 제품에 적용할 수 있습니다. 자전거, 전기 스쿠터, 가구, 프리미엄 액세서리, 아웃도어 장비가 그 예입니다.
15개 교체 가능 부품
15가지 프레임 색상
2개 운영 사이트
6개 언어
(과제)
카탈로그의 표현 범위를 넘어서는 조합 수
H6 모델은 교체 가능한 부위가 15곳, 프레임 색상이 15종이며, Pro와 Ultra 두 등급과 네 가지 스타일이 더해집니다. 카탈로그 사진 한 장에는 이 가운데 한 가지 조합만 담깁니다.
고객이 주문 전에 가장 자주 확인하는 것은 세 가지입니다. 부품을 바꾼 뒤의 외관, 접었을 때의 치수, 탈 때의 체형 적합도입니다. 이 확인은 원래 매장에서 이루어졌고, 프로젝트는 방문 전에 온라인에서 마치게 하는 것을 목표로 했습니다.
(접근 방식)
상시 표시되는 3D 완성차 장면과 투명한 선택 인터페이스
화면 아래에는 완성차 3D 장면이 항상 자리하고, 그 위에 투명한 옵션 인터페이스가 겹쳐집니다. 어떤 옵션을 바꾸든 차체에 즉시 반영됩니다.
모바일 성능을 전제로 합니다. 일반적인 압축 방식은 3D 모델의 형상 데이터를 풀었을 때 표시 메모리를 거의 두 배 더 차지합니다. 이에 데이터를 먼저 줄인 뒤 압축하는 방식으로 바꿔, 원본 형식보다 다운로드 용량을 약 20% 줄이고 메모리 사용량은 늘리지 않았습니다.
데스크톱
스타일을 한 번에 전환하고 배경색도 함께 변경
스타일 바에는 Pro와 Ultra 두 등급과 여러 스타일이 나열되며, 선택하면 프레임, 휠, 배경색이 함께 바뀝니다. 색상 모드에서는 프레임 색을 차례로 바꿀 수 있습니다.
각 층의 방법은 별도의 글에서 자세히 다룹니다.
1층
2층
3계층
4계층
컨피규레이터
2
컨피규레이터규칙 차단장착할 수 없는 조합은 원인을 먼저 설명한 뒤 가능한 조합으로 전환합니다.
3
컨피규레이터데이터 출처사양은 백엔드 데이터베이스를 기준으로 하며, 프런트엔드에 하드코딩하지 않습니다.
4
컨피규레이터구성 결과 가져가는 방식구성 카드, QR 코드, 사양 PDF
모바일 성능을 전제로 하므로 양자화한 뒤 압축하는 방식을 택해, 다운로드 용량과 메모리를 함께 고려했습니다.
다운로드량디코딩 후 GPU 지오메트리
- 26.32MBmeshopt52.18MB
- 21.18MBqdraco확정약 52MB
- 16.31MB순수 draco96.86MB
첫 화면 모델 파일 7개. GPU 지오메트리는 모델 파일 내용을 기준으로 추정하며, 텍스처는 포함하지 않습니다.
(핵심 설계)
세 가지 핵심 설계
부품 교체
부품을 하나씩 맞출 때 각 옵션 옆에 참고 중량이 표시됩니다. 장착할 수 없는 조합은 이유를 안내하고 자동으로 전환해, 생산할 수 없는 자전거가 구성되는 일을 막습니다.
생산할 수 없는 조합이 나오지 않도록 막습니다.
선택
차단
설명
확인
전환
손님
컨피규레이터
1
손님장착 불가 부품 선택
2
컨피규레이터규칙 표에서 차단장착할 수 없는 조합 먼저 차단
3
컨피규레이터원인 설명
4
손님확인
5
컨피규레이터자동 전환예: E-Bike는 Pro에만 장착 가능
라이딩 핏
키, 다리 길이, 팔 길이에 따라 3D 라이더가 움직이며, 무릎과 고관절의 각도, 앞뒤 바퀴의 무게 배분이 표시됩니다. 사진은 기기 안에서만 처리되며 업로드하거나 저장하지 않습니다.
데스크톱
적합 분석, 슬라이더에 맞춰 실시간 갱신
적합 분석은 3D 라이더로 무릎과 고관절 각도, 안장 높이, 앞뒤 바퀴 무게 배분을 보여 줍니다. 키 슬라이더를 움직이면 체형과 수치가 즉시 갱신됩니다.
가져가기
구성을 마치면 전용 구성 카드가 생성됩니다. 세 시점의 완성차 이미지, 부품별 사양과 중량, QR 코드, 사양 PDF가 담기며, 위치를 기준으로 가까운 공식 대리점도 검색할 수 있습니다.
옵션이 복잡한 고가 제품은 모델과 사양표를 가지고 첫 미팅에서 먼저 논의할 수 있습니다.
(모바일)
모바일 브라우저에서 완전히 작동하며 앱 설치가 필요 없습니다.
휴대폰
휴대폰에서 바로 조작, 다운로드 불필요
같은 컨피규레이터가 휴대폰 브라우저에서 완전히 작동하며 앱을 내려받을 필요가 없습니다. 스타일 바는 좌우로 넘길 수 있고, 색상 모드에서 프레임 색을 차례로 바꿀 수 있습니다.
휴대폰
적합 분석, 휴대폰에서도 실시간
적합 분석은 휴대폰에서도 같은 3D 라이더로 표시됩니다. 키 슬라이더를 움직이면 관절 각도와 앞뒤 바퀴 무게 배분이 갱신됩니다.
(성과)
정식 사이트 두 곳과 여섯 개 언어를 하나의 코드에서 생성
글로벌 사이트와 중국 사이트는 하나의 코드에서 만들어지며, 인터페이스는 중국어 번체, 중국어 간체, 영어, 독일어, 일본어, 한국어를 지원합니다. 중국 사이트는 자체 호스팅 폰트, 트래킹 조정, 이미지 자체 제공, 3D 모델 CDN을 별도로 처리합니다.
여섯 개 언어와 두 개의 정식 사이트가 하나의 사양 데이터를 공유합니다.
데이터 출처
- 백엔드 데이터베이스사양은 이를 기준으로 하며, 6개 언어 필드를 포함합니다.
- 정적 백업별도 1부 보관
규격
프런트엔드
- 동일한 코드인터페이스는 6개 언어를 지원합니다.
데이터에 따라 생성
사이트와 고객이 가져가는 문서
- 국제 사이트
- 중국 사이트
- 구성 카드
- 사양 PDF
값을 가져오지 못할 때구성 카드의 변속 단수와 톱니 수는 “—”로 표시하며, 기본값으로 대체하지 않습니다.
(엔지니어링 기록)
방법과 실측, 한 장씩 펼치기
3D 컨피규레이터의 네 계층 구조: 접이식 자전거 개발 기록
유추 가능한 접두사를 제거하면 URL이 1,000자 이상에서 약 120자로 줄어듭니다.
- JSON + base641,000자 초과QR 코드가 너무 촘촘해 휴대폰으로 인식되지 않음
- 유추 가능한 접두사 제거
- 간결한 문자열약 120자
3D 모델 최적화 전후 비교: 다운로드 용량과 메모리 실측
픽셀 밀도를 낮추는 것은 병목이 픽셀일 때만 효과가 있습니다. 관련 방법
- 픽셀 밀도를 낮추고 싶음상호작용 중에는 일시적으로 낮춤
- 먼저 병목 측정픽셀, draw call, 삼각형 수
- 병목이 픽셀낮출 수 있음픽셀 밀도를 낮춰야 효과 있음
- 병목이 픽셀이 아님건드리지 않음왔다 갔다 전환하면 추가 비용이 듭니다.
전후 비교표
| 지표 | 전 | 후 | 측정 방식 |
|---|---|---|---|
| 다운로드량 | meshopt 26.32MB | qdraco 21.18MB (19.5% 감소) | 세 가지 인코딩 모두 원본 파일에서 다시 압축했습니다. 순수 draco는 16.31MB입니다. |
| GPU 지오메트리(디코딩 후, 텍스처 제외) | meshopt 52.18MB | qdraco 약 52MB; 순수 draco 96.86MB | GLB 내용 파싱 기준 추정 |
웹 3D 성능 엔지니어링: 측정, 예산 수립부터 검수까지의 전체 과정
두 차례 점검으로 첫 화면 다운로드량을 약 57 MB에서 약 37 MB로 줄였으며, 각 차례에서는 실행 중에 쓰지 않는 데이터만 건드렸습니다.
- 점검 전약 57 MB첫 화면 다운로드량
- 1차약 14 MB세 가지 조정, 모두 실행 중 사용되지 않는 데이터
- 1차 후약 43 MB첫 화면 다운로드량
- 2차약 6 MB에셋 측 세 가지 조정
- 2차 후약 37 MB첫 화면 다운로드량
같은 차종 기준. 빌드 후 headless 브라우저에서 리소스 요청을 읽어 확장자별로 분류합니다.
GLB 파일이 너무 클 때: 지오메트리보다 텍스처를 먼저 본다
본체 색상 텍스처를 낮춘 뒤 GPU 점유가 약 150 MB 줄었으며, 이후 검증에서 크기는 바뀌지 않았습니다. 관련 방법
- 원본 텍스처약 160 MB14장, 4096 크기, 그중 12장은 단색
- 축소할 때 버린 픽셀약 150 MB화면 손실 없음
- 1024로 축소약 10 MB2색 텍스처는 전체 해상도로 되돌렸고, 원본과의 차이는 0입니다.
- 디코딩 후 전체 비교약 10 MB14장 모두 개별 검증, 표본 추출 없음
같은 14장의 본체 색상 텍스처, 수치는 대략적인 값입니다.
단색 텍스처를 압축하면 약 1 KB가 되며, 8개 GLB에서 합계 약 43 MB를 헛되이 차지하던 GPU 사용량이 거의 0이 됩니다.
파일 크기GPU 점유
- 약 1 KB단색 텍스처, 원래 2048²헛되이 차지하는 GPU약 43 MB
- 파일 크기 변화 없음같은 텍스처를 4×4로 줄인 후화면 변화 없음거의 0
같은 2048² 단색 텍스처를 GLB 8개에 넣으면 GPU 점유는 8개 합계가 됩니다. 4×4로 줄이는 것은 제자리에서 덮어쓰는 방식이므로 GLB마다 파일 크기는 변하지 않습니다.
텍스처는 디코딩 후 표준편차를 먼저 확인한 뒤 4×4로 줄일지, KTX2로 압축할지 결정합니다.
- 전체 해상도로 디코딩RGBA32로 읽기, 채널별로 alpha 포함
- 표준편차 계산
- 표준편차가 04×4로 축소단색, 화면 변화 없음
- 표준편차 큼, 투명 포함고품질 UASTC구멍 뚫린 가장자리가 깨지지 않음
- 표준편차 큼, 투명 없음저비트레이트 ETC1S디코딩 후 비교하여 탁해지면 UASTC로 재인코딩
외주 3D 모델의 입고, 재현, 검수 과정
GLB 파일 전체를 다시 쓰면 파일 크기가 원래의 약 1.4~2.9배로 부풀어 오릅니다. 관련 방법
원본 크기전체 재작성 후 크기
- 약 5.0 MB모델 1전체 재작성약 9.1 MB
- 약 4.8 MB모델 2전체 재작성약 14.1 MB
- 약 6.6 MB모델 3전체 재작성약 9.3 MB
그래픽 라이브러리로 GLB 세 개를 파일 전체 읽고 쓴 전후의 파일 크기, 수치는 대략적인 값입니다.
항목별로 배제하고 나면 화면 문제는 소재 또는 파이프라인 중 한쪽에서 발생합니다. 관련 방법
- 압축본과 원본 버전을 각각 한 번씩 확인두 버전 모두 나타나면 압축 인코딩 때문이 아닙니다.
- 텍스처만 따로 표시, 따로 끄기텍스처 배제
- 뒷면 표시 모드로 전환반대편이 보인다면 그 부분에 면이 없는 것이므로 지오메트리 구멍입니다.
- Blender로 원본 파일을 직접 읽기개발팀 자체 처리 파이프라인 배제
- 같은 차종, 색상만 다른 동일 부위끼리 비교문제가 한 색상에서만 나타나는지 확인
- 원본 파일을 직접 읽어도 같은 현상이 나타남소재 문제로 판정부위와 수량을 첨부하여 모델링 측에 반려
- 원본 파일은 정상이고 게시용 파일만 비정상파이프라인 문제로 판정개발팀이 원본에서 다시 생성한 뒤 비교
- 압축 후 색상이 원본과 다름소재부터 탓하지 않고 압축을 먼저 확인합니다.디코딩 후 원본과 한 장씩 비교
소재의 결함은 모델링 측 책임이며, 게시용 파일의 재현과 검수는 개발팀 책임입니다.
접수
재현 및 복구
검수
모델링 측
개발팀
고객
1
모델링 측원본 파일과 내보내기 설정 제공원본 파일은 게시용 파일을 재현하기 위한 전제입니다.
2
모델링 측보완 제출 또는 재출력반려 목록의 누락 면, 중복, 불필요 노드 대상
3
개발팀항목별 대조누락 면, 중복, 불필요 노드. 화면 문제가 있으면 소재 또는 파이프라인으로 판정
4
개발팀게시용 파일 재현원본, 산출물, 파라미터를 기록하고, 스키닝 부품은 재양자화하지 않음
5
개발팀수치를 포함한 검수월드 좌표 차이, 가시 메시 수, 스켈레톤 변위
6
고객기존 모델 또는 CAD 제공교체할 부위를 목록으로 제시
7
고객재구축 여부 결정모델링 측이 원본 파일을 제공하지 않을 때
8
고객검수표와 대조해 확인모든 항목에 근거가 보임
본문에 설명된 프로세스의 역할 분담
3D 상품 전시 웹사이트의 비용은 무엇이 결정하는가: 견적과 범위 읽는 법
접수 결과와 인터랙션 깊이에 따라 같은 요구 사항을 서로 다른 견적 경로로 나눕니다.
- 모델 원본 확인운영 버전을 재현할 수 있는 원본 파일이 있는지
- 접수 항목별 배제소재 불량인지 운영 처리 불량인지 구분
- 인터랙션 깊이 확인보기, 배치, 순차 분해
- 원본이 모두 갖춰져 있고 누락 면이 없으며, 인터랙션은 보기와 배치로 한정됩니다.견적의 핵심은 경량화, 배포, 기기별 최적화입니다.가장 단순한 경로
- 원본이 모두 갖춰져 있고, 고객이 CAD 분해 시퀀스를 따로 보유함시퀀스 대응을 추가하고, 착수 전에 대응되지 않는 부분을 목록으로 제시가능 범위는 산정으로 도출합니다.
- 접수 시 누락 면, 중복 또는 불필요 노드 발견조치는 별도 항목으로 분리하고, 나머지 항목은 조건부로 작성먼저 소재 문제인지 명확히 구분
- 원본이 불분명하거나 결손이 커서 조치할 수 없는 경우모델 재작업은 별도 산정하고, 나머지 항목은 모델 확정 후 산정재작업은 독립된 모델링 작업입니다.
범위, 상한, 목록은 모두 규격 단계에서 확정해야 합니다.
규격
제작
검수
고객
개발팀
1
고객휴대폰 상한 설정 및 범위 명시 확인메모리 상한과 텍스처 등급은 위탁자가 결정합니다.
2
개발팀접수 항목별로 배제하고, 대응되지 않는 부분을 목록으로 제시휴대폰 예산을 항목별로 환산
3
고객신규 요구 사항은 별도 제안범위를 벗어난 항목은 별도로 견적하며, 기존 범위에 포함하지 않습니다.
4
개발팀운영 파일은 원본에서 재현 가능기능을 휴대폰에 남길지 PC에만 제공할지는 측정 결과로 결정합니다.
5
고객범위 명시에 따라 항목별 대조기재된 내용이 곧 전체 범위입니다.
6
개발팀사전 목록과 대조하여 차이를 설명대응되지 않는 부분이 검수 단계에서 뒤늦게 드러나지 않도록 합니다.
역할 분담만 보여 주며, 기간을 의미하지 않습니다.
첫 미팅 15~30분 동안 진행 방향, 예산 범위, 일정 초안을 받을 수 있습니다.
Polish 3D다음 프로젝트: 결제 전에 실제 점포 화면에서 간판을 미리 보고, 고객이 완성된 모습을 먼저 확인
(문의)
Start a project.
세 단계를 거치면 판단 근거가 되는 접근 방식과 예산 범위를 얻을 수 있습니다.
- 01첫 미팅 예약: 시간을 선택합니다. 완성된 사양서는 필요하지 않습니다.
- 0215~30분 온라인 상담: 접근 방향, 예산 범위, 일정 초안을 받습니다.
- 03자료를 검토한 뒤 약 3~5 영업일 안에 견적서 및 납품 사양 명세서를 제공합니다.
- 이메일
- hello@polish-design.com.tw
- 우편 주소
- 대만 타이베이시 중산구 즈푸로 191-1호 3층 (104)
첫 미팅 예약
월요일~금요일 16:00–18:00온라인 30분
먼저 시간대를 선택한 뒤 Google 계정 또는 이메일로 확인합니다. 예약이 확정되면 캘린더에 추가할 수 있습니다.
시간 선택
