# Onyx Coffee Lab은 어떻게 이커머스를 위한 인터랙티브 3D를 만드나 - Spline customers (https://spline.design/ko/customers/onyx-coffee-lab)

> Onyx Coffee Lab은 Shopify에서 인터랙티브 3D를 활용해 장인 정신과 제품의 미묘한 차이를 빠르고 현대적인 웹 경험으로 전달합니다. 성능이나 전환율은 희생하지 않으면서요.

[고객 사례](https://spline.design/ko/customers)

2026년 3월 2일 · 고객 사례 · Onyx Coffee Lab

# Onyx Coffee Lab은 어떻게 이커머스를 위한 인터랙티브 3D를 만드나

Onyx Coffee Lab은 Shopify에서 인터랙티브 3D를 활용해 장인 정신과 제품의 미묘한 차이를 빠르고 현대적인 웹 경험으로 전달합니다. 성능이나 전환율은 희생하지 않으면서요.

커피는 감각적인 경험입니다. 하지만 온라인 쇼핑은 그렇지 않죠.

[Onyx Coffee Lab](https://onyxcoffeelab.com/)의 온라인 성패는 이 간극을 어떻게 메우느냐에 달려 있었습니다.

커피 원두는 다 비슷해 보이고 제품의 차이는 향, 맛, 질감에 있는 붐비는 카테고리에서, 말만으로 이야기를 전하는 데에는 한계가 있습니다.

Onyx에는 성능이나 전환율을 떨어뜨리지 않으면서 로스팅에서 드러나는 장인 정신에 대한 집착을 그대로 담아낼 디지털 경험이 필요했습니다.

그래서 그들은 한계를 넓혔습니다. **Spline**으로 만들고 작은 팀이 출시한, 웹 위의 인터랙티브 3D로요.

[Onyx Coffee Lab 2025 어드벤트](https://onyxcoffeelab.com/products/2025-advent-calendar)를 위한 스크롤 기반 3D 경험

## 감각 없이 브랜드를 차별화하기

커피 브랜딩은 온라인에서 어렵기로 유명합니다.

- **대부분의 제품이 시각적으로 비슷합니다.**라이트 로스트와 다크 로스트를 나란히 놓아도 그냥 커피 원두로 보입니다.
- **냄새도 맛도 없이 식품을 팔아야 합니다.**감각적인 피드백이 없습니다.
- **시장은 포화 상태입니다.**"훌륭한 커피"는 더 이상 차별점이 아닙니다.

Onyx의 사이트는 보기 좋은 것 이상이어야 했습니다. 빠르게 전달해야 했죠. 그러지 않으면 타깃 고객은 금세 흥미를 잃고 떠날 테니까요.

## 장인 정신을 눈에 보이는 브랜드 신호로

Onyx Coffee Lab의 CTO인 Michael Mahler는 브랜드를 정의하는 두 가지 기둥을 설명했습니다.

1. **가능한 한 가장 신선한 커피**커피는 주문을 받으면 로스팅해 빠르게 배송합니다. 로스터에서 문 앞까지 보통 24\~48시간이 걸립니다.
2. **인센티브를 바꾸는 윤리적 조달**Onyx는 생산자에게 국제 원자재 시세의 4\~6배를 지불하며, 장기적인 관계를 쌓아 필수적인 선순환을 만듭니다. 생산자는 최고의 로트를 Onyx에 팔고 싶어 하고, 그 과정에서 지역 공동체도 혜택을 받습니다.

같은 사고방식이 웹 경험에도 이어집니다.

> 우리 슬로건은 '적당히 좋은 것에 안주하지 말자'입니다. 언제나 무엇을 더 개선할 수 있을지 고민하고, 그 마음가짐은 결코 멈추지 않습니다.

**Michael Mahler**, Onyx Coffee Lab CTO

인터랙티브 3D 씬이 있는 Onyx Coffee Lab의 [Circadian 제품 페이지](https://onyxcoffeelab.com/products/circadian)

## 프로슈머를 위한 디자인

Onyx는 모든 사람을 위해 디자인하지 않습니다. 디테일을 중요하게 여기는 사람들을 위해 디자인합니다.

Michael은 이들을 프로슈머라고 부릅니다. 브랜드가 사소한 부분에서 대충 넘어가면 알아채고, 일관된 디지털 경험이 제품 품질을 반영하기를 기대하는 고객들이죠.

그래서 사이트는 즉시 이해할 수 있어야 하면서도 이커머스에서 "평범한" 것의 경계선 바로 위에 있어야 한다는 의도적인 디자인 접근이 생겨났습니다.

Onyx는 그 차별화의 경계를 한곳에서 찾았습니다. 바로 **Spline으로 만드는 3D 디자인**입니다.

> 우리는 그 경계선을 찾아 최대한 가까이 타고 가고 싶었습니다… 그 경계선이 바로 3D 애니메이션이었죠.

Onyx Coffee Lab [Circadian 제품 페이지](https://onyxcoffeelab.com/products/circadian)의 디테일

## Spline 런타임을 활용하는 Shopify 사이트

Onyx는 Shopify에서 운영되지만, 스토어프런트 경험은 Shopify를 한계까지 밀어붙이는 완전한 커스텀 프런트엔드입니다.

Onyx는 모델을 내보내거나 전용 통합에 의존하는 대신, Spline Viewer로 Spline을 임베드하고 Spline의 Code API로 씬을 프로그래밍 방식으로 제어합니다.

덕분에 정적인 비주얼이 아니라 제품 기능처럼 동작하는 인터랙티브한 순간을 만들 수 있습니다.

## 스토리보드에서 Spline 인터랙션까지

Onyx의 3D 제작 흐름은 속도, 합의, 효율을 위해 설계되었습니다.

1. **고품질 제품 렌더링**주로 배경을 제거한 PNG로 디자인 팀에 전달됩니다.
2. **스토리보드**디자인 팀이 무엇이, 언제, 왜 움직이는지 모션의 "키프레임"을 잡습니다.
3. **Spline에서 애니메이션**팀이 스토리보드를 실제 인터랙티브 씬으로 재현합니다.
4. **개발 팀에 핸드오프**Spline 임베드가 사이트에 들어가고, 런타임 로직으로 제어됩니다.

변수 변경으로 구동되는 상태 기반 애니메이션

## 고객이 예상하지 못한 것을 3D로 설명하기

[Circadian](https://onyxcoffeelab.com/products/circadian)은 흔한 커피 제품 페이지가 아닙니다.

'라이트 로스트 대 다크 로스트'나 '테이스팅 노트' 같은 일반적인 커피 설명 대신, Circadian은 카페인 함량에 따른 옵션을 소개하고 고객이 하루 섭취량을 조절할 수 있도록 계산기를 제공합니다.

Onyx는 3D 비주얼을 설명 시스템으로 활용해 이 정보를 전달하고 더 흥미롭게 만듭니다.

- 배경이 컨셉을 시각적으로 소개합니다
- 씬이 인터랙션에 반응합니다
- 다른 옵션을 클릭하면 Spline 씬에서 다른 모션이 트리거됩니다

"우리에게 옵션의 차이는 말 그대로 제품에 카페인이 얼마나 들어 있느냐입니다. 배경의 에셋은 고객이 보고 있는 경험에 따라 움직입니다."

그리고 결정적으로, Onyx 팀은 인터랙티브 에셋이 필요할 때는 방해되지 않게 물러나고, 필요할 때는 전면에 나서 인터랙티브해지도록 구성했습니다. 예를 들어 중요한 텍스트가 페이지를 가로지를 때는 임베드된 3D 에셋의 조명을 낮춥니다.

인터랙티브 3D 시각화의 도움으로 설명하는 카페인 함량

## 가장 큰 성과: 배포까지 걸리는 시간

Onyx에게 가장 큰 장점은 시각적 품질만이 아니라, 팀이 실제로 해낼 수 있느냐와 속도입니다.

사이트 코드와 크리에이티브를 다루는 사람은 10명 정도입니다. 커피 회사에게 전담 3D 엔지니어와 디자이너를 채용하는 것은 큰 결심이자 비용입니다.

Spline은 일정을 단축하고 누구나 3D에 다가갈 수 있게 해 위험을 낮춥니다.

> 가장 큰 장점은 배포까지 걸리는 시간입니다… Spline은 이런 일들을 3D로 시작하는 데 따르는 위험을 낮춰 줍니다.

## Spline 시작하기

Onyx Coffee Lab은 화려해 보이려고 3D를 도입하지 않았습니다. 실제 이커머스 문제를 해결하기 위해 사용했습니다.

**속도, 명확성, 전환율을 희생하지 않고 감각적인 제품을 온라인에서 실제처럼 느껴지게 하려면 어떻게 해야 할까?**

Spline으로 그들은 작은 팀에 맞고, 모바일에서도 부드럽게 동작하며, 인터랙티브 스토리텔링을 빠르게 출시할 수 있는 워크플로를 찾았고, 덕분에 붐비는 시장에서 브랜드를 차별화할 수 있었습니다.

[영업팀 문의](https://spline.design/ko/enterprise)

## 다른 고객 사례

[2026년 4월 13일 · 고객 사례Lynksen은 어떻게 Spline으로 복잡한 B2B 플랫폼 웹사이트에 생명을 불어넣었나](https://spline.design/ko/customers/lynksen)[2026년 2월 24일 · 고객 사례Hermetica는 어떻게 3D 디자인으로 핀테크 브랜드를 끌어올렸나](https://spline.design/ko/customers/hermetica)[2025년 10월 20일 · 고객 사례Oscilar는 어떻게 Spline으로 AI 리스크 플랫폼을 브랜딩하나](https://spline.design/ko/customers/oscilar)

[Spline](https://spline.design/ko)

팀과 AI 에이전트를 위한 3D·2D 에디터. 웹, iOS, Android에 바로 배포하세요.

#### AI에게 Spline에 대해 묻기

#### 제품

- [3D 디자인](https://spline.design/ko/3d-design)
- [Hana](https://spline.design/ko/hana)
- [Omma](https://omma.build)
- [AI 3D 생성](https://spline.design/ko/ai-generate)
- [Spline MCP](https://spline.design/ko/mcp)
- [Spline Arena](https://spline.design/ko/arena)
- [요금제](https://spline.design/ko/pricing)
- [엔터프라이즈](https://spline.design/ko/enterprise)

#### 런타임

- [Web](https://spline.design/ko/web)
- [iOS](https://spline.design/ko/ios)
- [Android](https://spline.design/ko/android)

#### 앱

- [다운로드](https://spline.design/ko/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror 다운로드](https://spline.design/download-mirror)

#### 학습

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ko/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [솔루션](https://spline.design/solutions)

#### 커뮤니티

- [Spline 커뮤니티](https://community.spline.design)
- [Blog](https://spline.design/ko/blog)
- [변경 로그](https://spline.design/ko/changelog)
- [교육](https://spline.design/ko/education)
- [Contra](https://spline.design/contra)
- [제휴 프로그램](https://spline.design/ko/affiliate)

#### 회사

- [고객 사례](https://spline.design/ko/customers)
- [채용](https://www.ycombinator.com/companies/spline/jobs)
- [보안](https://spline.design/ko/security)

#### 법적 고지

- [이용약관](https://spline.design/terms)
- [개인정보처리방침](https://spline.design/privacy)

#### 문의

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.