도루코 컬러 커스터마이징 홈페이지 제작 및 시스템구축을 진행했습니다. 컬러커스터마이징 시스템구축을 통해 바이어나 각 부서별 커뮤니케이션 편의성을 높혔습니다.
도루코 컬러 커스터마이징 시스템 및 홈페이지 제작
KEYWORD #도루코면도기 #컬러커스터마이징 #시스템개발 #홈페이지제작 #threejs #3D #GLTF
DATE 2024
도루코 컬러 커스터마이징 시스템 개발 프로젝트의 핵심은, 기존에 전문 프로그램을 통해서만 확인할 수 있었던 제품 3D 이미지를 일반 사용자도 웹페이지에서 자유롭게 360° 회전, 확대/축소하며 직관적으로 확인할 수 있도록 구현하는 것이었습니다. 또한, 사용자가 원하는 색상과 재질로 제품을 커스터마이징해보는 인터랙티브 기능을 제공하는 것이 가장 큰 기술적 도전이자 연구 과제였습니다.
이를 위해 WebGL 기반의 Three.js를 중심으로 다양한 구현 방식을 검토하고 수많은 테스트를 거쳐, 도루코 제품의 디테일을 가장 효과적으로 표현할 수 있는 최적의 환경 설정과 파일 구조를 설계하였습니다. 그 결과, 별도의 전문 소프트웨어 없이도 웹에서 고품질 3D 모델을 실시간으로 확인하고 커스터마이징할 수 있는 전용 시스템과 홈페이지를 완성하였습니다. 또한, 각 모델 및 파트별 컬러 커스터마이징 옵션에 따라 생성되어야 하는 방대한 양의 2D 이미지 파일로 인해 발생할 수 있는 데이터 용량 문제를 해결하기 위해, SVG 기반의 이미지 구현 방식을 연구하고 적용하였습니다. 기존 렌더링 이미지에서 컬러, 그림자, 빛 등의 레이어를 분리·재구성함으로써, 사용자가 컬러를 변경하면 즉각적으로 선택한 컬러가 이미지에 반영되도록 설계하였으며, 이를 통해 이미지 품질은 유지하면서도 데이터 경량화를 성공적으로 달성하였습니다.
PROJECT OVERVIEW
도루코는 세계 최고의 면도날(WORLD BEST EDGE)을 목표로 끊임없이 연구 개발하며 성장하고 있는 기업입니다.
도루코 제품에 관심이 있는 전 세계 바이어들이 시공간의 제약 없이 도루코 제품을 만나보고 손쉽게 주문 제작을 할 수 있는 시스템을 개발하여
바이어들이 제품을 만나볼 수 있는 기회를 넓히고, 내부적으로는 제작 및 DB관리를 고도화하여 더 높은 단계로의 성장을 도모했습니다.
프로젝트를 시작하며 영업, 디자인, 생산팀 등 각 부서의 니즈 파악을 통해 각 스텝별로 필요한 기능과 화면을 제작하였으며
특히, three.js를 활용한 3D 뷰어를 시스템과 컬러커스텀 기능을 개발하여 조금 더 입체적으로 도루코 제품을 볼 수 있도록 진행되었습니다.
3D Product Customization
도루코 면도기는 웹 기반의 3D 스마트 카탈로그를 통해 사용자에게 실시간으로 제품을 확인하고,
원하는 컬러나 재질로 즉시 변경하여 제품을 미리 체험할 수 있는 기능을 제공합니다.
실제 제품과 동일한 3D 환경에서 360º 회전 및 확대/축소 기능을 지원하며 카드리지, 핸들, 커버 등 각 파트별 컬러와 재질을
자유롭게 커스터마이징하여 나만의 제품을 경험해 볼 수 있으며 보다 직관적이고 몰입감 있는 제품 체험이 가능해 집니다.
3D Asset Data
제품 3D파일 경량화
제품 모델링 파일에서 메쉬 구조를 최적화하고 단순화하는 작업을 통해
3D 파일의 용량을 줄이고 웹 환경에서의 로딩 시간을 최소화합니다.
이를 통해 웹 기반 3D 구현 시 성능을 극대화하고, 사용자 경험을 향상시킵니다.
웹 환경 최적화
다양한 환경 및 재질 조건에 대한 철저한 테스트를 진행하여,
도루코 면도기 3D가 최적의 성능으로 로드될 수 있도록 최적화합니다.
DYNAMIC DORCO
도루코와 바이어간의 만남을 어떻게하면 더 편하게,
더 흥미롭게 만들 수 있을지를 고민했습니다.
CUSTOMIZING
원하는 컬러와 모델을 바이어가 직접
변경하여 웹상에서 확인가능
DYNAMIC
선택한 모델을 3D뷰어를 통해
다양한 각도에서 입체로 확인 가능
COMMUNICATION
커스터마이징시스템을 통한 주문으로
도루코 상품관리자 · 바이어 · 제작부서간의
원활한 커뮤니케이션
FLEXIBLE COMMUNICATION
설계단계에서 이미지맵핑을 통해 클라이언트와 작업자들이 복잡한 사이트 구조를 쉽게 이해 할 수 있도록 정리해
커뮤니케이션하며 프로젝트를 진행했습니다.
COLOR CUSTOM
SYSTEM
도루코 커스텀은 2D화면에서 Front, Side, Back, Perspective등 다양한 각도에서의 제품확인이 가능하며,
핸들과 카트리지파트의 컬러변경이 가능하도록 제작되었습니다.
또한, 원하는 로고를 업로드하여 제품에 적용해 볼수도 있으며, 커스텀화면에서 만든 제품 그대로 주문이 가능하도록 설계되었습니다.
이렇게 주문된 커스텀제품은 도루코 생산관리 시스템과도 연결되어 DB관리 또한 용이하도록 했습니다.
360º
3D VIEWER
2D 커스텀과 함께 구성된 3D 뷰어를 통해 제품을 360º 회전, 확대/축소하여 확인해 볼 수 있으며
컬러커스텀을 하거나 핸들과 카트리지를 분리하여 확인 가능하도록 제작하였습니다.
DORCO,
PERFECT YOUR
SHAVING EXPERIENCE
들어갈 메시지 영역