도루코 컬러 커스터마이징 시스템 개발
KEYWORD #도루코면도기 #컬러커스터마이징 #시스템개발 #홈페이지제작 #threejs #3D #GLTF
DATE 2024
매우 높은 수준의 금속가공기술을 보유한 도루코는 우리나라 뿐만 아니라 세계 시장에서도 좋은 품질을 인정받아 각광받고 있습니다. 도루코 제품에 관심이 높은 전세계 바이어의 니즈를 반영해 시간과 공간의 제약에 없이 제품을 커스텀하고 주문할 수 있는 새로운 시스템을 구현하였습니다. 커스텀에서 생산까지 업무효율을 위해 2만 여건의 생산 요소와 컬러 데이터를 사전에 정의해 바이어는 원하는 제품과 조합, 그리고 컬러를 선택 하기만 하면 모든 과정은 시스템을 통해 진행이 가능한 프로세스를 적용 하였습니다. 물론 모든 데이터는 관리시스템을 통해 컨트롤 할 수 있습니다.
또한 SVG합성 방식을 고안해 브라우저에서 실물과 같은 형태로 커스텀이 가능할 뿐만 아니라 고해상도 이미지 다운로드가 가능하고, 자유자재로 확인이 가능한 3D Viewer도 탑재 되어있습니다.
PROJECT OVERVIEW
도루코는 세계 최고의 면도날(WORLD BEST EDGE)을 목표로 끊임없이 연구 개발하며 성장하고 있는 기업입니다.
도루코 제품에 관심이 있는 전 세계 바이어들이 시공간의 제약 없이 도루코 제품을 만나보고 손쉽게 주문 제작을 할 수 있는 시스템을 개발하여
바이어들이 제품을 만나볼 수 있는 기회를 넓히고, 내부적으로는 제작 및 DB관리를 고도화하여 더 높은 단계로의 성장을 도모했습니다.
프로젝트를 시작하며 영업, 디자인, 생산팀 등 각 부서의 니즈 파악을 통해 각 스텝별로 필요한 기능과 화면을 제작하였으며
특히, three.js를 활용한 3D 뷰어를 시스템과 컬러커스텀 기능을 개발하여 조금 더 입체적으로 도루코 제품을 볼 수 있도록 진행되었습니다.
COLOR CUSTOMIZATION
2D IMAGE RENDERING
3D VIEWER
SAMPLE ORDER
GLOBAL BUYER
PRODUCT MANAGING
MANUFACTURING SYSTEM
COLOR DB
DYNAMIC DORCO
도루코와 바이어간의 만남을 어떻게하면 더 편하게,
더 흥미롭게 만들 수 있을지를 고민했습니다.
CUSTOMIZING
원하는 컬러와 모델을 바이어가 직접
변경하여 웹상에서 확인가능
DYNAMIC
선택한 모델을 3D뷰어를 통해
다양한 각도에서 입체로 확인 가능
COMMUNICATION
커스터마이징시스템을 통한 주문으로
도루코 상품관리자 · 바이어 · 제작부서간의
원활한 커뮤니케이션
FLEXIBLE COMMUNICATION
주문과 제작 DB관리가 하나의 시스템에서 진행되어야 하는 특성상 다양한 화면과 기능, 그리고 방대한 데이터관리가 필요했습니다.
설계단계에서 이미지맵핑을 통해 클라이언트와 작업자들이 복잡한 사이트 구조를 쉽게 이해 할 수 있도록 정리해 커뮤니케이션하며 프로젝트를 진행했습니다.
COLOR CUSTOM
SYSTEM
도루코 커스텀은 2D화면에서 Front, Side, Back, Perspective등 다양한 각도에서의 제품확인이 가능하며,
핸들과 카트리지파트의 컬러변경이 가능하도록 제작되었습니다.
또한, 원하는 로고를 업로드하여 제품에 적용해 볼수도 있으며, 커스텀화면에서 만든 제품 그대로 주문이 가능하도록 설계되었습니다.
이렇게 주문된 커스텀제품은 도루코 생산관리 시스템과도 연결되어 DB관리 또한 용이하도록 했습니다.
360º
3D VIEWER
2D 커스텀과 함께 구성된 3D 뷰어를 통해 제품을 360º 회전, 확대/축소하여 확인해 볼 수 있으며
컬러커스텀을 하거나 핸들과 카트리지를 분리하여 확인 가능하도록 제작하였습니다.
DORCO CASE STUDY 1
전문프로그램을 통해서만 확인할 수 있었던 도루코 면도기 3D 이미지를 일반 사용자가 웹페이지에서 자유롭게 360º 회전, 확대/축소해보며 상품을 볼 수 있고,
원하는 색상과 재질로 커스터마이징 해 볼 수 있는 기능을 구현하는것이 이번 프로젝트의 가장 큰 연구과제였습니다.
웹페이지에서 3D 구현이 가능한 Three.js를 활용하여 여러가지 방법을 고민했고, 수많은 테스트를 거쳐
도루코 제품을 가장 잘 표현할 수 있는 환경값과 파일세팅으로 전문프로그램을 사용하지 않아도 웹에서 제품을 확인할 수 있도록 구현했습니다.
01
Three.js에서 3D모델이 로드되도록 기존3D파일을 GLTF로 변환하는 작업을 진행했습니다.
변환작업을 진행하면서 모델링 Mesh구조를 단순화하는 경량화 작업을 함께 진행하여 GLTF파일이 웹에서 구현될 때의 이슈를 최소화했습니다.
02
GLTF가 Three.js에서 구현될 때의 다양한 환경 및 재질테스트를 통해 최적의 상태로 도루코 면도기 데이터가 로드될 수 있도록 수많은 테스트를 거쳤습니다.
03
테스트를 거쳐 세팅된 Three.js를 도루코 커스터마이징페이지에 적용하여 3D프로그램이 없어도
웹상에서 360º 회전하며 제품을 확인하고, 제품의 각 파트별 재질과 색상을 자유롭게 변경해볼 수 있도록 구현했습니다.
DORCO CASE STUDY 2
각 모델별, 파트별 컬러 커스터마이징에 따라 제작되어야 하는 수많은 2D이미지들의 데이터 경량화를 위하여
SVG를 활용한 이미지구현방법을 연구했습니다. 기존 렌더링 이미지에서 컬러, 그림자, 빛 레이어를 분리 - 재구성함으로써
커스터마이징에 따라 SVG 컬러값만 변경하여도 선택한 컬러가 이미지에 적용될 수 있도록 했습니다.
DORCO,
PERFECT YOUR
SHAVING EXPERIENCE
©SOIJEONG