KBIC: 페이셜 스킨 니들 롤러

Client: KBIC Services: 인터랙티브 3D, 컨슈머 제품 데모, 사용법 워크스루 Duration: 6주 Tech: Three.js, Verge3D, 모바일 우선 반응형 UI

문제 정의

KBIC는 페이셜 스킨 니들 롤러를 만듭니다. 정밀 엔지니어링과 D2C 판매 동선이 맞물린 뷰티·미용 도구입니다. 외관은 단순해 보입니다. 가치는 내부 구조에 있습니다. 마이크로 니들의 밀도, 회전 메커니즘, 피부 접촉 형상. 의료급 도구와 저가 모방품을 가르는 디테일입니다.

스틸 제품 사진으로는 이 이야기를 담아낼 수 없었습니다. 일반 이커머스 마켓플레이스에서 $20짜리 카피 제품과 KBIC 제품을 비교하는 고객은 차이를 보지 못합니다. 그리고 가격으로 결정합니다.

요청은 이러했습니다. 기기의 내부 구조를 보여 주고, 피부 위에서의 올바른 사용 패턴을 시연하며, 저가 경쟁 제품 대비 KBIC의 프리미엄 포지셔닝을 정당화할 수 있는 브라우저 기반 3D 제품 데모.

만든 것

뷰티 컨슈머의 모바일 우선 브라우징 행동에 맞춘 짧은 세션 3D 데모. 세 가지 레이어로 구성됩니다.

• 제품 중심 뷰. 회전, 줌, 정확한 머티리얼 처리가 적용된 포토리얼리스틱 3D 렌더. 사진으로는 잡히지 않는 엔지니어링이 드러납니다
• 단면 뷰. 내부 니들 어레이, 회전 메커니즘, 그립 구조를 보여 주는 컷어웨이. KBIC의 기술적 차별성 주장을 받쳐 줍니다
• 사용법 워크스루. 양식화된 피부 표면 위에서의 올바른 기기 동작을 보여 주는 애니메이션. 압력, 각도, 동작 방향이 화면 콜아웃으로 표시됩니다
• 비교 인디케이터. 효능 주장이 아닙니다(KBIC는 구체적인 효능 주장을 하지 않았습니다). 기기가 피부 층과 어떻게 상호작용하는지 시각적으로 설명하는 장치입니다

작업 방식

1주차–2주차. 킥오프, CAD와 레퍼런스 포토 리뷰. KBIC가 엔지니어링 도면을 제공했고, 사진의 톤에 맞춰 3D 모델을 처음부터 빌드했습니다.

3주차–4주차. 3D 에셋 빌드, 머티리얼 개발(특유의 메탈릭 마감 때문에 PBR 작업이 까다로웠습니다), 단면 애니메이션 셋업.

5주차. UI 레이어. 모바일 우선 컨트롤, 회전 제스처, 단면 토글, 사용법 워크스루 트리거. 클라이언트 리뷰.

6주차. KBIC의 기존 Cafe24 스토어프런트 통합, 모바일 성능 튜닝, 런칭.

달라진 점

KBIC는 데모를 Cafe24 제품 페이지에 임베드했습니다. 메인 제품 페이지의 전환율이 기존 제품 사진 베이스라인 대비 개선됐고, 세션 시간은 두 배가 됐습니다.

배운 것

뷰티 컨슈머용 3D는 산업용 3D와 다른 결의 마감을 요구합니다. 산업 3D는 다소 테크니컬하고 다소 실용적인 톤이 허용됩니다. 뷰티 3D는 그렇지 않습니다. 제품이 카테고리의 시각적 관습에 맞게 유혹적으로 보여야 합니다. 비슷한 규모의 산업 프로젝트보다 머티리얼과 라이팅 작업에 더 많은 예산을 썼습니다. 그 차이는 전환 수치에 그대로 드러났습니다.

모바일 우선은 모바일 우선이지, 모바일 후처리가 아닙니다. KBIC 트래픽의 80%가 모바일입니다. 3D 프레젠테이션을 폰의 세로 모드에 우선해 설계한 뒤 데스크톱으로 적응시켰습니다. 평소 작업 흐름의 반대입니다. 컨트롤, 폰트, 단면 토글, 사용법 워크스루 트리거 모두 한 손 엄지로 조작할 수 있도록 설계했습니다.

기술적 차별성은 기술적 시각화를 요구합니다. 단면 뷰가 단일 요소 중 가장 강력한 설득 장치였습니다. $60짜리 KBIC 기기와 $20짜리 일반 기기를 가르는 지점입니다. 사진으로는 보여 줄 수 없습니다. 3D는 보여 줄 수 있습니다.

스택

• 런타임: Three.js + Verge3D
• UI: 바닐라 TypeScript + HTML/CSS(React 오버헤드 없음. Cafe24 스토어프런트 통합에는 최소 번들 무게가 필요했습니다)
• 에셋: Draco GLTF, 기기와 단면, 사용법 애니메이션 합산 약 3.5MB
• 성능: 2021년 중급 안드로이드에서 60fps, 4G에서 2초 미만 LCP
• 통합: Cafe24 제품 페이지에 iframe 임베드, 스토어프런트 이벤트 브리징

비슷한 작업이 필요하신가요

뷰티, 코스메틱, 퍼스널 케어 기기. 기술적 차별성은 분명하지만 사진으로는 보이지 않는 제품. KBIC 패턴은 외관만으로 차이를 구분할 수 없는 플랫폼에서 저가 모방품과 경쟁해야 하는 프리미엄 컨슈머 하드웨어 카테고리에 잘 맞습니다.

두 문장짜리 메일을 info@cclemang.com 으로 보내 주십시오.

전체 작업 보기 →