Lynksen은 어떻게 Spline으로 복잡한 B2B 플랫폼 웹사이트에 생명을 불어넣었나

Elecctro는 자판기, 전기차 충전기, 세차 자동화 같은 무인 서비스를 위한 소프트웨어 시스템을 만듭니다. 제품은 하드웨어부터 소프트웨어까지 아우르며, 전통적으로 B2B 구매자에게 빽빽한 사양서와 기술 다이어그램으로 소통해 온 시장의 한구석에 자리합니다. 그들의 미션은 스마트하고 연결된 솔루션으로 무인 서비스를 현대화하는 것입니다.

Elecctro에는 웹사이트가 필요했습니다. 그것도 평범한 웹사이트가 아니라, 자신들이 하는 일을 제대로 설명할 만큼 구매자의 관심을 붙잡고, 비슷한 수십 개의 회사와 시각적으로 차별화하며, 방문자가 빠르게 결정을 내리도록 이끄는 웹사이트였습니다.

"전달해야 할 정보가 정말 많았어요." 웹사이트 경험을 새로 만들기 위해 합류한 디지털 디자인 에이전시 Lynksen의 프로젝트 매니저 Tania의 말입니다. "하지만 동시에 기술 중심적인 분야에서 돋보이고 싶어 했죠."

답은 더 많은 콘텐츠가 아니었습니다. 완전히 다른 종류의 인터랙티브 인터페이스였습니다.

읽는 것이 아니라 탐험하는 홈페이지

Lynksen의 핵심 아이디어는 겉보기에는 단순했습니다. 말로만 설명하는 대신 사용자가 시스템을 직접 탐험하게 하자는 것이었죠.

홈페이지는 인터랙티브 3D 씬이 되었습니다. Elecctro의 전체 제품군을 공간적으로 보여 주는 개요로, 사용자는 마우스를 올리고, 클릭하고, 자신의 속도로 둘러볼 수 있습니다. 씬의 각 에셋은 전용 제품 페이지로 연결됩니다. "이게 무슨 제품이지?"에서 "상담하고 싶어요"까지 가는 길이 클릭 몇 번으로 줄었습니다.

사용자는 홈페이지에 들어와 모든 것을 보고, 한 번만 클릭하면 벌써 Elecctro에 필요한 정보를 전달하는 단계로 나아갑니다.

의미 있는 변화였습니다. 대부분의 B2B 웹사이트는 홈페이지를 목차처럼 다룹니다. Lynksen은 Elecctro의 홈페이지를 위에서 아래로 읽어 내려가는 것이 아니라 그 안을 돌아다니는 환경으로 만들었습니다.

왜 Spline인가?

비전은 분명했지만, 어떻게 현실로 만들 수 있을까요?

전통적인 3D 툴은 선택지에서 빠졌습니다. 러닝 커브만으로도 프로젝트 시간을 다 잡아먹었을 테니까요. 더 중요한 것은 Elecctro 팀이 출시 후에도 사이트를 유지 관리할 수 있어야 했다는 점입니다. 즉, 블랙박스 같은 파이프라인도, 전문 아티스트에 대한 의존도, 에셋 하나 바꾸는 데 몇 달의 온보딩이 필요한 도구도 안 됐습니다.

Lynksen은 Spline을 검토하고 다른 길을 보았습니다.

• 하나의 환경에서 만들고 반복하기.
• 도구 안에서 바로 인터랙션 프로토타입 만들기.
• 복잡한 핸드오프 과정 없이 실서비스용 에셋 출시하기.

경험이 거의 없던 상태에서 단번에 프로젝트 전체를 완성했습니다.

이를 가능하게 한 것은 도구만이 아니었습니다. 커뮤니티였습니다. 코드 한 줄을 쓰기 전에 Lynksen 팀은 Spline의 커뮤니티 라이브러리에서 시간을 보냈습니다. 리믹스를 살펴보고, 다른 디자이너들이 인터랙션에 어떻게 접근했는지 이해하고, 이번 클라이언트 프로젝트에 응용할 수 있는 기법을 찾았습니다.

다양한 프로젝트가 있고 리믹스해서 사람들이 여러 인터랙션에 어떻게 접근했는지 볼 수 있는 Spline 커뮤니티 같은 곳은 배우는 데 정말 큰 도움이 됐습니다.

Elecctro에게는 또 다른 요소가 있었습니다. 바로 지속성입니다.

그들은 출시 후 자신들의 팀이 실제로 직접 운영할 수 있는 솔루션을 원했습니다.

오브젝트를 추가하고, 다른 인터랙션을 만들고, 우리가 넘긴 뒤 프로젝트를 유지 관리하는 데 기술적인 지식이 많이 필요하지 않습니다. 그게 우리에게 정말 중요한 장점이었어요.

경험 만들기

Lynksen의 과정은 움직임이 전혀 없는 상태에서 시작했습니다.

정적인 와이어프레임. 평면 UI 레이아웃. 애니메이션을 하나라도 넣기 전에 명확한 정보 계층 구조를 확립했습니다. 구조가 탄탄해진 뒤에야 팀은 레이어를 더하기 시작했습니다.

"우리는 항상 정적인 상태에서 시작해 애니메이션을 한 겹씩 더해요." Tania의 말입니다. "와이어프레임과 스케치에서 주요 상태를 정의하고, 구현하면서 카메라 움직임을 조정하고, 애니메이션을 이리저리 시도해 보고, 모든 것이 기대한 대로 맞물리는지 확인합니다."

이런 원칙 덕분에 프로젝트는 스스로의 야심에 무너지지 않았습니다. 팀은 모션은 내러티브를 뒷받침한다는 단순한 디자인 원칙을 지켰습니다.

실제로는 이런 의미였습니다.

• 3D 에셋에 은은한 호버 상태와 마이크로 인터랙션
• 시선을 강요하지 않으면서 이끄는 스크롤 기반 등장 효과
• 사용자를 현혹하기보다 방향을 잡아 주는 카메라 트랜지션
• 작은 깜짝 요소가 방해가 아니라 즐거움이 되는 보조적인 순간(푸터, 404 페이지)에만 쓴 과감한 창의성

404 페이지는 팀이 가장 좋아하는 것 중 하나가 되었습니다. 전부 Spline으로 만들었으며, 사용자가 이곳저곳 클릭하면 숨겨진 3D 에셋이 드러납니다. 대부분의 방문자는 결코 찾지 못할 작은 이스터 에그지만, Lynksen 팀은 이걸 만드는 걸 분명 즐겼습니다.

"작은 이스터 에그를 숨겨 두는 건 멋진 일이에요." Ross의 말입니다. "누군가 찾아낸다면 디자이너로서 정말 기쁠 거예요."

웹사이트 내비게이션 메뉴 곳곳에 쓰인 3D 아이콘의 디테일.

결과

새로 디자인한 웹사이트가 출시되자 수치가 즉시 움직였습니다.

활성 사용자는 524% 늘었고, 프로젝트는 5개의 상을 받았습니다.

사이트는 2만 건의 새로운 조회 수를 기록했고 디자인 커뮤니티도 주목했습니다.

이런 결과는 팀이 의도적으로 만들어 낸 것을 반영합니다. 단지 보기 좋은 웹사이트가 아니라 진정으로 효과적인 웹사이트였습니다. 명확함이 필요한 구매자에게도, 상주 개발자 없이 사이트를 유지 관리해야 하는 클라이언트 팀에게도 잘 작동하는 웹사이트였죠.

3D를 고려하는 팀을 위해

웹에서 처음으로 3D를 고려하는 팀에게 Tania의 조언은 간단합니다. 전통적인 툴로 시작하지 마세요.

Spline은 러닝 커브가 감당할 만합니다. 디자인 실력이 있는 사람이라면 며칠 만에 익숙해질 수 있어요. 우리 팀은 사용한 지 첫 주 만에 탄탄한 MVP를 만들었습니다.

Ross는 이를 팀이 3D에 접근하는 방식의 더 큰 변화로 봅니다. 여러 복잡한 툴과 워크플로를 짜 맞추는 대신, 하나의 환경에서 디자인하고 반복하고 출시할 수 있어 인터랙티브 3D가 처음부터 훨씬 가깝게 느껴진다는 것이죠.

아주 전문적인 기술 지식 없이 하나의 환경에서 작업하고 보이는 그대로 출시하고 싶다면 Spline을 선택하세요.

클라이언트에게 인터랙티브 웹 경험을 제안하는 디자인 에이전시에게 이 프로젝트는 설득력 있는 증거가 됩니다. 알맞은 도구만 있으면 경험이 없는 상태에서도 단 한 번의 프로젝트로 수상작 웹사이트를 만들 수 있다는 것이죠.

Spline 시작하기

Lynksen처럼 에이전시는 Spline을 활용해 클라이언트가 복잡한 제품을 더 이해하기 쉽고, 유지 관리하기 쉽고, 기억에 남는 인터랙티브 경험으로 전달하도록 도울 수 있습니다.

Elecctro에게 그것은 기술 중심의 B2B 플랫폼을 제품을 명확히 설명하고, 의사 결정을 앞당기고, 붐비는 시장에서 브랜드를 돋보이게 하는 인터랙티브 웹사이트로 바꾸는 일이었습니다.

클라이언트를 위해 만드는 에이전시든 사내 팀이든, Spline은 복잡한 3D 파이프라인이나 전문 기술 없이 아이디어에서 제작까지 더 빠르게 나아가도록 돕습니다.

영업팀 문의