Peloton, Figma로 디자인 핸드오프 속도 5배 향상

요약:

Peloton는 글로벌 연결 피트니스 분야를 선도하는 기업이며, 세계 최고 수준의 하드웨어와 몰입형 콘텐츠를 결합하여 전 세계 수백만 사용자에게 영감을 주고 참여를 유도하는 경험을 창출합니다. 제품 포트폴리오가 확장됨에 따라 디자인 일관성을 유지하고 디자이너와 엔지니어 간의 원활한 협업을 강화하는 것이 최우선 과제가 되었습니다.

이러한 요구를 충족시키기 위해 Peloton은 Figma Enterprise에 의존했습니다. 자사의 디자인 시스템을 통합함으로써 Peloton은 업무 흐름을 간소화하고 팀 간 협업을 개선했습니다. Dev Mode를 사용하여 팀 간의 디자인과 개발 간의 인계가 크게 개선되어 비효율성을 줄였으며, 팀은 일관적이고 고품질 사용자 경험을 이전보다 5배 빠르게 제공할 수 있게 되었습니다.

과제: 수동 주석에서 매끄러운 협업으로 제품 개발 확장

Peloton의 커넥티드 피트니스 생태계가 하드웨어, 소프트웨어, 그리고 방대한 라이브 및 온디맨드 클래스 라이브러리까지 확장되면서, 모든 접점에서 반드시 일관적인 고객 경험을 보장해야 하는 상황이 되었습니다.

Figma가 등장하기 전까지는 산업 디자인 및 협업 도구가 분화되어 있었습니다. 이로 인해 디자이너와 개발자가 서로 고립되어 협업은 비효율적이었으며, 디자인의 일관성을 유지하기 어려운 상황이 되었습니다. 중앙 집중화된 플랫폼이 없어서 디자이너와 개발자는 상태와 행동의 인터랙션을 서로 맞추기 위해 다른 접점에 의지해야 했습니다. Peloton은 협업 체계를 강화하기 위해 Figma를 채택했습니다.

“Figma 덕분에 디자인과 엔지니어링 간에 디자인 시스템 기반 업무 흐름을 더욱 쉽게 적용할 수 있게 되었고, 디자인 속성과 컴포넌트가 구성되는 방식을 일관적으로 조정할 수 있게 되었습니다.”라고 Peloton의 수석 소프트웨어 엔지니어, Joe Spadafora 씨는 말합니다.

Peloton의 자사 디자인 시스템 Kinetic이 일관성을 위한 기반을 제공하긴 했지만, 디자인 사양을 더욱 명확히 정의하고 공유할 여지가 여전히 남아 있었습니다. 과거 엔지니어들은 디자인에 주석을 다는 데 상당한 시간을 들여야 했고,이 때문에 Peloton은 팀을 정렬하고, 협업을 간소화하고, 효과적으로 확장할 수 있는 보다 전체적인 솔루션의 필요성을 느꼈습니다.

솔루션: Figma로 업무 흐름 연결

Peloton은 약 4년 전 Figma로 전환함으로써 디자인 업무 흐름을 강화하는 여정을 이어갔습니다. 첫해에는 기존 UI를 표준화하는 데 집중했으며, Figma 라이브러리를 활용해 컴포넌트와 공유 스타일을 구축함으로써 디자인 업무 흐름 체계를 확립했습니다.

Figma로 전환함에 따라 변수 등의 새로운 기능을 활용할 수 있게 되었고, 이를 통해 공유 컴포넌트에 대한 접근 방식을 재고할 기회도 가질 수 있었습니다.

프로세스를 한 곳으로 통합하자 시간이 많이 드는 회의와 수작업 업무 흐름이 불필요해졌고, 팀은 보다 영향력 있는 사용자 경험을 만드는 데 집중할 수 있게 되었습니다.

“Figma를 도입하기 전에는 핸드오프 및 인터랙션 상태와 컴포넌트 동작에 대한 협업적 논의를 위해 회의를 추가로 해야 했습니다.”라고 Peloton의 스태프 디자인 시스템 디자이너인 Oliver Dumoulin이 말합니다. “이제 Dev Mode를 통해 많은 작업을 비동기적으로 처리합니다.”

Dev Mode는 명세를 명확하고 접근 가능하며 오류 없이 제공함으로써 Peloton의 업무 흐름에 변화를 주었습니다. 올바른 디자인 파일을 찾는 데 걸리는 시간을 줄이는 것처럼 작은 개선도 큰 변화를 가져왔습니다. 예전에는 5분 걸리던 일이 Dev Mode 덕분에 이제는 단 1분이면 충분합니다.

Figma를 통해 제품군 전반에 걸친 디자인 일관성 확장

Peloton이 제품군을 확대함에 따라, 하드웨어와 디지털 플랫폼 전반에서 일관적인 디자인 언어를 유지하기가 점점 더 복잡해졌습니다. Peloton Row와 Peloton Guide의 개발은 중앙 집중화된 디자인 시스템의 필요성을 분명히 보여주었지만, 해당 플랫폼들이 출시될 당시에는 Kinetic이 아직 구축되지 않은 상태였습니다.

대신에, 지난 2년 동안 기능 업데이트와 세부 조정을 통해 이러한 앱에 점진적으로 통합되었습니다. 반면 Peloton Strength+는 처음부터 Kinetic을 기반으로 구축되었으며, 출시 단계부터 디자인 시스템을 완전히 활용한 최초의 Peloton 제품이 되었습니다.

가시성을 위한 확장

디자인 팀이 확장됨에 따라, Peloton은 디자인 파일 관리 방식에 더 체계적인 시스템을 도입할 기회를 갖게 되었습니다. Figma 도입 전에는 팀 간의 작업 가시성이 부족하여, 일관성을 유지하고 협업을 효율화하는 데 어려움이 있었습니다.

Figma 엔터프라이즈로 업그레이드하면서, 협업을 체계화하고 확장할 수 있도록 전용 작업공간이 도입되었습니다. 각 작업공간은 앱, e-commerce, 하드웨어 등 특정 제품 영역에 맞게 구성되어 있어 팀이 관련 있고 최신 상태의 디자인 라이브러리를 활용할 수 있습니다. Kinetic 팀이 관리하는 “Central Design” 작업공간에는 모든 사람이 자동으로 접근할 수 있는 핵심 라이브러리가 구축되어 있어, 단일 진실 공급원(SSOT) 역할을 합니다.

변수를 활용하여 확장 가능한 크로스 플랫폼 시스템 구축

변수는 Peloton의 성장하는 포트폴리오 전반에서 일관성을 강화하는 데 도움을 주었습니다. Figma Enterprise 이전에는 Peloton의 Figma 계정이 네 개의 변수 모드로 제한되어 플랫폼 전반에 걸쳐 수동 업데이트가 필요했습니다. 이제 12개의 테마와 24개의 변수 모드를 통해 팀은 플랫폼 간을 즉시 전환하고, 다양한 시각적 스타일에 적응하며, 제품 전반에 걸쳐 원활하게 업데이트를 추진할 수 있습니다.

Peloton의 기본 테마는 대부분의 제품을 위한 기반 역할을 하며, Strength+에는 시그니처 옐로 색상을 사용한 전용 테마가 있습니다. 새롭게 출시된 소셜 기능에는 10개의 추가 테마가 포함되어 있어 Peloton 앱에서 팀을 만들 때 고유한 색상을 지정할 수 있습니다. 라이트 모드와 다크 모드를 모두 지원하기 위해 변수 모드가 적용되었고, 선택된 테마에 따라 조정되는 24개의 동적 색상 모드가 생성되었습니다.

색상뿐 아니라, 타이포그래피 변수도 플랫폼별 서체 스타일을 간소화해 줍니다. 변수 모드를 사용하면 디자이너는 서체 스타일을 수동으로 조정할 필요가 없으며, iOS에서는 SF Pro, Android에서는 Inter처럼 플랫폼에 맞춰 폰트를 손쉽게 전환할 수 있습니다.

“변수를 사용하면 플랫폼 간 전환이 가능하고, 단일 소스 파일에서 색상, 스타일, 간격 업데이트를 수행할 수 있습니다.”라고 Oliver는 말합니다. 이러한 업데이트는 시스템 전체에 자동으로 반영되어, 수동 작업을 줄이고 모든 접점에서 정확성을 보장합니다.

Dev Mode로 반복 시간을 15분에서 3분으로 단축

업무가 매우 빠른 속도로 진행되는 Peloton에서는 빠른 속도가 매우 중요합니다. 빠르게 진행되는 제품 개발에 맞추기 위해 엔지니어들은 최신 디자인, 명확한 사양, 효율적인 핸드오프 프로세스에 신속하게 접근할 수 있어야 합니다. Dev Mode 도입 이전에는 디자인 파일을 찾아내고, 사양을 명확히 하고, 레이어를 수동으로 확인하는 과정 때문에 업무 흐름이 불필요하게 복잡해졌습니다.

Dev Mode 덕분에 엔지니어들은 필요한 디자인 파일을 훨씬 더 빠르게 찾을 수 있게 되었습니다. 예전에는 5분 걸리던 작업이 이제는 1분이면 충분합니다. 이전에 15분이나 걸리던 수동 검사 역시 5배 더 빨라져 이제는 3분이면 완료됩니다. 또한 재사용 가능한 컴포넌트를 찾는 데 15분 걸리던 작업도 디자인 시스템으로 직접 연결되는 링크 덕분에 지금은 같은 시간 안에 처리할 수 있게 되었습니다.

“개발자 핸드오프를 위해 여러 도구에 의존하곤 했습니다.”라고 Oliver는 말합니다. “하나는 디자인을 관리하고, 다른 하나는 개발 핸드오프 사양을 만드는 용도였죠. 하지만 Dev Mode가 출시된 이후로는, 다른 도구들이 제공하던 모든 기능을 Dev Mode 하나로 대신할 수 있게 되었습니다.”

Peloton은 또한 Dev Mode 안에 Jira 티켓을 직접 연동하여 팀에 필요한 맥락을 제공하고, 제품, 디자인, 엔지니어링 팀 간 커뮤니케이션을 간소화했습니다.

“Dev Mode를 사용하면 JIRA 연동으로 티켓을 통해 진행 상황을 추적할 수 있고, 컴포넌트를 ‘ready for dev’로 표시하거나 여러 상태로 가용성을 관리할 수 있습니다.”라고 Oliver는 말합니다. “우리의 내부 거버넌스 프로세스는 디자인 시스템 라이브러리에서 새로운 컴포넌트 추가나 변수 업데이트가 승인된 후에야 개발자가 이를 구현하도록 보장합니다.”

Dev Mode가 핵심 업무 흐름을 간소화하면서, Peloton은 이제 디자인과 개발 간 협업 체계를 강화할 새로운 방법을 모색하고 있습니다. 일부 Android 개발자들은 핸드오프 프로세스를 더 정교하게 다듬기 위한 다음 단계로 Code Connect를 검토하기 시작했습니다.

자동화는 앞으로 더 큰 역할을 하게 될 것입니다. 팀은 Figma의 REST API를 활용해 JSON에서 변수 업데이트를 Figma로 직접 동기화하는 방법을 모색하고 있으며, 이를 통해 24개 변수 모드 전반에서 수동 업데이트를 줄이는 방향을 지원하고 있습니다.

그들은 프로세스를 계속 개선해 나가면서, Peloton은 차세대 커넥티드 피트니스 경험을 구축하는 과정에서 더욱 빠르게 움직일 준비가 되어 있습니다.