만 가지가 넘는 조합을, 수작업에서 자동 생성으로.
수백 개 배터리 제품에 OEM 브랜드 라벨을 조합하면 만 가지가 넘는 경우가 생깁니다. 외주업체가 수동으로 만들던 제품 이미지를, 3D 모델과 라벨 데이터를 바탕으로 여러 각도에서 자동 생성하도록 개발했습니다.
생성된 이미지는 홍보 전단지, 제품 라인업 소개, 언론 배포용 자료 사진에 활용되고 있습니다.
16초로 살펴보기
고객이 직접 살펴보고 사용하는 웹 3D.
제품에 라벨을 적용해 확인하고, 공간 속 기기를 구분해 조작하는 장면을 살펴보세요. DOOCO 제품 구성기와 LG ThinQ WebGL 엔진 개발 사례를 담았습니다.
영상 내용 읽기
눈으로 보고, 직접 바꿔보는 3D. 재질을 바꾸고 공간에 놓아보는 3D 화면을 웹에서 만듭니다. 첫 제품은 DOOCO CAD 기반 모델이며 재질 변화는 시연용 연출입니다. DOOCO: 제품을 돌려 보고, 직접 라벨을 적용해 확인하는 실제 개발 사례입니다. LG ThinQ: 집 안을 입체적으로 살펴보고 공간에 놓인 기기를 조작합니다. MOSH의 참여 범위는 WebGL 엔진 핵심 개발입니다. Web3DLab은 제품·공간·서비스를 위한 WebGL을 개발합니다.
제품 · 공간 · IoT 웹 3D 개발
WEB3DLAB / INTERACTIVE SHOWCASE
직접 확인하고 결정하도록.
제품 선택 · 구성
제품을 돌려 보고, 치수를 맞춰 놓아 보고, 3D 공간 속 기기를 조작할 수 있게 만듭니다. 제품 선택과 배치 검토, 홍보용 이미지 제작을 위한 웹 3D를 개발합니다.
제조사 제품 구성
우리 브랜드를 입혀, 맞는 제품을 고르도록.
두코의 실제 용기 모델에 재질과 브랜드를 적용하고 부품을 살펴보세요. 고객이 원하는 구성을 비교해 보는 체험입니다.
화장품 용기 · 패키지 · 부품 · 제조업
같은 용기에서 어떤 재질이 우리 제품에 맞는지 비교해 보세요. 부위를 고른 뒤 적용하는 재질 표현은 이 전시장의 체험용 설정입니다.
촬영실의 같은 제품에 브랜드명이나 로고를 입혀 보세요. 재질 카드에서 고른 설정도 그대로 유지됩니다.
입력한 글자를 제품에 적용해 보세요.
선택한 이미지는 이 화면에서만 사용하며 서버로 전송하지 않습니다.
용기·뚜껑·펌프를 따로 살펴보세요. 전체를 다시 켜거나 뚜껑을 열어 조립 관계를 확인할 수 있습니다.
DOOCO I01 · 실제 모델을 활용한 체험
브랜드 제품 감상
제품의 디테일까지 온라인에서 만납니다.
구매 전에 형태와 마감을 충분히 확인할 수 있도록. 원하는 각도로 돌리고 확대하며 제품의 디테일을 살펴보세요.
시계 · 주얼리 · 액세서리 · 브랜드 쇼룸
다이얼의 깊이, 베젤의 반사, 스트랩의 마감까지. 각도와 확대 수준을 바꾸며 제품을 살펴보세요.
Web3DLab이 만든 FORM 01 시계 모형입니다. 브랜드 제품 뷰어의 체험 예시입니다.
치수 비교
우리 공간에 들어갈까요?
구매나 설치를 결정하기 전에 크기를 비교해 보세요. 책상 치수나 냉장고와 설치 공간의 폭을 바꾸면 숫자와 모형이 함께 바뀝니다.
가구 · 가전 · 설비 · 주문 제작
입력한 치수와 모형이 같은 mm 기준으로 바뀝니다. 예시 치수이며, 실제 제품 도면과 설치 여유 기준을 반영해 개발할 수 있습니다.
필지 배치
내 필지에 놓아 보고, 배치안을 검토합니다.
필지의 가로·세로를 입력하고 3 × 6m 모듈을 배치해 보세요. 위치와 방향을 바꾸며 계획을 검토하고, 결과를 도면으로 저장할 수 있습니다.
모듈러 · 주택 · 건축 계획
도면의 물체를 끌어 배치하세요. 선택 후 방향키로도 움직일 수 있습니다.
모두 공간 안에 배치되어 있습니다.
입력 치수 기준의 배치 검토용 도면 · 원본 크기로 인쇄 시 1:50
실내 배치
가구와 가전을 놓고, 맞는 배치를 찾아보세요.
방 크기를 바꾸고 소파·테이블·가전을 놓아 보세요. 같은 치수의 입체 화면과 배치 도면을 보며 우리 공간에 맞는 위치를 검토합니다.
인테리어 · 리빙 · 공간 설계
도면의 물체를 끌어 배치하세요. 선택 후 방향키로도 움직일 수 있습니다.
모두 공간 안에 배치되어 있습니다.
입력 치수 기준의 배치 검토용 도면 · 원본 크기로 인쇄 시 1:50
가전 제어
내가 아는 공간에서 가전을 조작합니다.
같은 에어컨도 설치된 위치로 구분할 수 있도록. 앞에서 배치한 공간 속 기기를 골라 전원과 상태를 바꾸는 체험입니다.
스마트홈 · IoT · 가전 플랫폼
제어 시뮬레이션 · 실제 가전과 연결되지 않습니다.
앞에서 배치한 방을 그대로 사용합니다. 에어컨을 켜고, 조명을 바꾸고, 세탁기를 작동해 보세요.
에어컨
조명
세탁기
실제 서비스에서는 기기 API·IoT 플랫폼과 연결해 제어합니다. 집의 도면이나 공간 정보를 바탕으로 화면을 구성할 수 있습니다.
OEM 이미지 자동화
라벨이 달라져도, 제품 이미지는 자동으로.
제품 모델에 OEM 라벨과 시점을 조합해 이미지를 만듭니다. 제품 소개와 홍보 자료에 쓸 이미지를 브랜드별로 생성하고 저장해 보세요.
배터리 · OEM 제조 · 제품 라인업 · 홍보 이미지
실제 개발 사례 · 한국앤컴퍼니만 가지가 넘는 조합을, 수작업에서 자동 생성으로.
수백 개 배터리 제품에 OEM 브랜드 라벨을 조합하면 만 가지가 넘는 경우가 생깁니다. 외주업체가 수동으로 만들던 제품 이미지를, 3D 모델과 라벨 데이터를 바탕으로 여러 각도에서 자동 생성하도록 개발했습니다.
생성된 이미지는 홍보 전단지, 제품 라인업 소개, 언론 배포용 자료 사진에 활용되고 있습니다.
제품 2종 × OEM 라벨 2개 × 촬영 각도 3개 = 이미지 12장
체험용으로 만든 배터리 모델입니다. 실제 고객사의 제품 모델이나 라벨은 사용하지 않습니다. 이미지 크기 1,200 × 900 px.
개발 사례
고객의 선택과 담당자의 업무에 적용한 웹 3D
두코 · 제품 구성기
바이어가 용기에 재질과 자기 브랜드 라벨을 적용해 고르고 문의하도록, 제품 구성기와 카탈로그를 개발했습니다.
용기·라벨 구성기 보기→
LG ThinQ · WebGL 엔진
집 안의 공간과 기기를 입체적으로 보여주는 서비스입니다. TV·앱·PC의 서로 다른 성능에 맞춰 작동하도록 WebGL 엔진의 핵심 개발을 맡았습니다.
엔진 개발 범위 보기→
현대 아이오닉6 · 파노라마
고객이 차량 내외부를 둘러볼 수 있도록, 출시 프로모션 웹사이트를 4개국 대상으로 개발했습니다.
프로모션 개발 사례 보기→
빌드심플리 · 배치 시뮬레이터
담당자가 콘크리트 모듈러의 배치와 개략 정보를 살펴보고 초기 계획을 검토하는 도구를 개발했습니다.
배치 도구 보기→개발 범위
제품을 고르고, 공간을 배치하는 3D. 우리 서비스에 맞게 만듭니다.
고객이 고른 제품을 문의에 담거나, 배치한 공간을 검토 자료로 저장할 수 있게 만듭니다. 기기 조작과 제품 이미지 생성도 필요한 기능에 맞춰 개발합니다.
무엇을 개발하나요?+
확인하고 싶은 장면부터 실제로 사용할 기능까지
웹에서 어떤 제품과 공간을 보여주고 싶은지 알려주세요. 가진 3D 자료를 살펴보고, 필요한 조작 기능과 저장·문의·기기 제어 등의 연동 방식을 함께 정리합니다.
- 01고객·담당자의 사용 장면과 제품 옵션 규칙 설계
- 02CAD·3D 모델 변환과 웹 최적화
- 03제품 구성·치수 비교·공간 배치·기기 조작 화면
- 04구성 저장·문의, 배치 자료, 기기 API·이미지 생성 연동
- 05PC·태블릿·모바일 대응과 사이트 적용
새 모델 제작이 필요한지는 보유 자료를 보고 판단합니다. 3D 제작과 웹 개발 항목을 나눠 견적을 안내합니다.
어떻게 진행하나요?+
제품이나 공간 하나로 먼저 만들어 봅니다.
사용 장면과 자료 확인
어떤 제품이나 공간을 보여주고, 고객과 담당자가 무엇을 할 수 있으면 좋을지 듣습니다. 가지고 계신 사진·도면·3D 모델과 연동할 시스템을 함께 살펴봅니다.
핵심 체험부터 제작
대표 제품이나 공간으로 핵심 조작 화면을 먼저 만듭니다. 실제로 돌려 보고 놓아 보며 표현과 사용 방식을 맞춥니다.
실제 사용에 필요한 기능 연결
제품군과 옵션 규칙을 적용합니다. 합의한 범위에 따라 구성 저장·문의, 배치 자료, 기기 제어 또는 이미지 생성 기능을 연결합니다.
기기별 확인과 적용
대상 기기에서 로딩·표시·조작과 결과를 확인합니다. 사이트에 적용하고 제품·공간 자료를 업데이트하는 방법을 전달합니다.
체험을 다음 행동으로 연결하기+
제품은 견적으로, 배치는 검토 자료로.
고른 제품 구성과 배치 결과를 저장하거나 문의에 담을 수 있도록 개발합니다. 기기 제어나 제품 이미지 생성이 필요하다면 연동할 시스템과 필요한 기능도 함께 살펴봅니다.
고른 제품 구성은 저장·문의로
선택한 재질·색상·부품과 화면을 저장하거나 견적 요청에 담습니다. 고객과 담당자가 같은 구성을 보며 이야기할 수 있게 합니다.
공간 배치는 검토 자료로
입력한 치수와 배치 결과를 함께 확인하고, 검토용 도면을 저장·공유하는 기능을 개발합니다.
공간 속 기기는 실제 조작으로
설치 위치로 기기를 구분하고 상태를 확인하는 화면을 만듭니다. 실제 제어는 제공되는 기기 API·IoT 플랫폼과 연결해 개발합니다.
모델과 라벨은 제품 이미지로
제품 모델·OEM 라벨·시점을 조합해 홍보와 제품 소개에 쓸 이미지를 생성합니다. 제품군과 필요한 이미지 규격에 맞춰 자동 생성 범위를 정합니다.
자주 묻는 질문+
3D 모델이 없어도 시작할 수 있나요?
네. 만들고 싶은 사용 장면과 제품 사진부터 알려주세요. 필요한 표현 수준에 맞춰 모델 제작 방법을 안내합니다. CAD나 기존 3D 파일이 있다면 웹용으로 변환해 활용할 수 있는지도 확인합니다.
모바일이나 태블릿에서도 되나요?
네. 터치 조작과 작은 화면에 맞춰 개발합니다. 주로 사용할 기기에 맞춰 모델 용량과 표현 수준을 조절하고, 출시 전에 해당 환경에서 확인합니다.
옵션에 따른 가격도 보여줄 수 있나요?
네. 옵션별 가격과 조합 규칙이 있으면 선택에 따라 금액이 달라지도록 만들 수 있습니다. 주문·결제나 기존 견적 시스템 연결이 필요하면 함께 설계합니다.
지금 쓰는 사이트에 넣을 수 있나요?
기존 상품 페이지에 3D 화면을 넣거나, 별도 구성기 페이지로 연결할 수 있습니다. 현재 사이트 주소와 운영 방식을 알려주시면 알맞은 적용 방법을 안내합니다.
제품 보기 외에 어떤 업무에 활용할 수 있나요?
제품 구성과 견적 요청, 치수·배치 검토 자료, 공간 속 기기 조작, OEM 제품 이미지 생성 등에 활용할 수 있습니다. 필요한 결과에 따라 기능을 정하며, 실제 기기 제어에는 기기 API·IoT 플랫폼 연결이 필요합니다.
프로젝트 상담
우리 제품과 공간에서, 무엇을 해보면 좋을까요?
고객에게 보여줄 제품이나 배치해 볼 공간을 알려주세요. 자동으로 만들고 싶은 제품 이미지가 있어도 좋습니다.
가지고 계신 사진·3D 모델·공간 자료를 살펴보고, 필요한 기능과 연동할 시스템을 안내하겠습니다.
스크롤하면 다음 체험으로 이동합니다.