Adyen, Variables의 도움으로 Figma를 사용하여 디자인 시스템 간소화

Adyen은 빠르게 진화하는 핀테크 산업의 최전선에서 운영되고 있습니다. 이 금융 기술 플랫폼은 단일 플랫폼에서 가맹점에 결제, 데이터, 재무 관리를 아우르는 엔드투엔드 서비스를 제공합니다. Adyen이 결제 흐름 전반에 대한 완전한 소유권을 갖고 있기 때문에, 가맹점은 여러 제공업체를 따로 관리할 필요 없이 하나의 플랫폼에만 연결하면 되며, 이는 모두에게 이점이 되는 구조입니다.

Adyen은 사용자 경험에 높은 가치를 두고, 시장에서 가장 고객 중심적이고 효율적인 핀테크 포털을 제공하는 것을 목표로 하고 있습니다. 이러한 이유로 Adyen에는 총 70명 규모의 UX 디자인 팀이 구성되어 있으며, 그 구성은 제품 디자이너 44명, UX 리서처 15명, UX 라이터 11명으로 이루어져 있습니다.

과거에는 모든 구성원의 방향성을 일치시키는 것이 하나의 과제였습니다. 이전에 사용하던 디자인 도구들로 인해 프로세스가 단절되고, 번거롭고 비효율적인 업무 흐름이 발생했기 때문입니다.

이후 회사는 Figma와 FigJam을 활용해 디자인 시스템과 프로세스를 간소화했습니다.

Figma로 전환

Adyen의 디자인 팀은 디자인 운영을 효율화하기 위해 견고한 기반이 필요하다는 점을 인식했고, 이에 따라Figma에서 Bento라는 새로운 디자인 시스템을 구축했습니다. 현재 일부 팀이 여전히 커뮤니티 기반 디자인 시스템을 사용하고 있는 상황에서, Adyen은 기본, 아이콘, 컴포넌트, 패턴, 유틸리티, 아카이브로 구성된 Bento로 모든 팀을 전환하는 작업을 진행하고 있습니다.

Bento는 Adyen 디자인 팀의 업무 방식에 새로운 수준의 효율성과 구조를 가져왔습니다. 예를 들어 유틸리티는 디자인 시스템 문서를 구축하는 데 사용되는 시스템의 시스템( SOS) 컴포넌트를 관리하는 영역입니다. Adyen의 디자인 책임자인 Luiza Breier는 "모든 요소는 라이브러리 형태로 각 팀에 배포되며, Figma를 사용하면 스타일과 컴포넌트 인스턴스의 변경 사항과 업데이트를 매우 간편하게 푸시할 수 있습니다."라고 말합니다. 또한 그는 디자인 시스템 라이브러리가 모든 팀에 기본적으로 활성화되어 있다고 덧붙입니다.

흥미로운 과제 중 하나는 각 팀을 위해 멀티 테마 지원을 어떻게 구현할 것인가였습니다. 이들은 이를 해결하기 위해 다층 구조의 컬러 시스템을 구축했습니다.

핵심 레이어에는 디자이너나 엔지니어가 직접 사용할 수는 없지만, 디자인 시스템 팀을 위한 선택 팔레트 역할을 하는 모든 색상 정의가 포함되어 있습니다. 이 핵심 레이어 위에, 이들은 색상을 색상값이 아닌 UI에서의 역할에 따라 정의한 시맨틱 레이어를 구축했습니다.

시맨틱 레이어는 디자이너와 엔지니어가 제품을 설계하고 구축하는 과정에서 직접 활용할 수 있도록 제공됩니다. 이 레이어를 통해 디자이너는 색상의 역할을 중심으로 제품을 설계할 수 있습니다.

시맨틱 기반 색상은 디자인 내에서 라이트/다크 등 서로 다른 색상 모드에서도 작동합니다. 기존에는 이를 위해 색상 스타일을 사용했지만, 디자이너가 라이트 모드와 다크 모드용 색상을 모두 다뤄야 하는 부담을 주고 싶지 않았기 때문에 기본적으로는 라이트 모드 색상만 제공했습니다. 이후 변수 기능이 도입되면서, 이러한 문제는 Figma에서 별도의 추가 설정 없이도 자연스럽게 해결되었습니다.

Adyen은 색상, 간격, 테두리 반경을 변수로 마이그레이션했으며, 모든 Figma 컴포넌트를 이러한 변수로 업데이트했습니다.

Bento 팀의 제품 디자이너인 Sergii Polkovnikov는 "이제 변수를 사용하면 몇 번의 클릭만으로 테마를 변경할 수 있으며, 이 과정은 완전히 자동화되어 있습니다. 디자이너는 라이트 모드에서 디자인한 뒤 다크 모드로 전환해, 선택한 시맨틱 색상이 올바르게 적용되고 다크 모드에서도 의도대로 작동하는지 확인할 수 있습니다."라고 말합니다.

Figma를 활용해 프로세스를 빠르게 개선하는 것과 더불어, Luiza와 팀은 디자인 시스템이 실제로 어떻게 사용되고 있는지를 이해하기 위해서도 많은 노력을 기울이고 있습니다. 디자이너들은 Figma Enterprise의 디자인 시스템 분석 기능을 활용해 사용 현황을 추적하고 있으며, 동시에 Figma API를 사용해 자체 대시보드도 구축했습니다.

"이를 통해 Figma에서 사용되는 모든 컴포넌트의 임포트 현황, 인스턴스 수, 어떤 팀이 무엇을 사용하고 있는지 등을 모두 추적할 수 있습니다. 또한 누군가 컴포넌트를 분리했을 때도 이를 확인할 수 있는데, 분리된 컴포넌트가 강조 표시된 상태로 해당 Figma 파일로 바로 연결되는 링크를 제공하고 있습니다."라고 그녀는 말합니다.

이와 같은 방식으로 추적하면 디자인 시스템 팀은 마이그레이션이 어떻게 진행되고 있는지 이해할 수 있으며, 어떤 디자이너가 컴포넌트를 분리했는지에 대한 가시성도 확보할 수 있습니다. 이를 통해 해당 디자이너와 직접 소통하며, 컴포넌트를 분리한 사용 사례와 배경을 파악할 수 있습니다.

FigJam은 전략적 계획 수립을 간소화합니다

업무 흐름 협업 방식은 다른 측면에서도 변화했습니다. Adyen의 디자인 시스템 팀은 전략적 계획 수립 도구로서 FigJam을 활용하는 동시에, 공유 리소스와 지식을 위한 플랫폼으로도 사용하고 있습니다. 이를 통해 여러 영역에서 시각적 협업이 한층 개선되었습니다.

이들은 FigJam을 활용해 온라인 브레인스토밍부터 엔지니어링 등 다른 팀의 이해관계자가 자신의 우선순위를 되돌아보도록 돕는 과정에 이르기까지, 팀 내외의 정렬을 위해 제품 비전을 최신 상태로 유지하고 있습니다.

FigJam은 팀 회고와 분기별 계획 수립에서도 핵심적인 역할을 하며, 디자이너들이 협업 방식을 되돌아보고 업무 방식을 개선하기 위한 구체적인 실행 과제를 도출하는 데 도움을 주고 있습니다.

Figma를 통한 전사적 개선

Figma와 FigJam의 결합은 에셋을 하나의 플랫폼으로 통합하고, 매끄러운 사용자 경험을 구축하며, 높은 수준의 협업을 가능하게 함으로써 Adyen이 디자인 시스템을 활용하는 방식을 근본적으로 개선했습니다.

이제 회사는 더욱 강력한 편집 권한 관리, 부서 간 소유권 할당, 그리고 시트 사용 최적화를 통해 비용을 보다 효과적으로 관리할 수 있게 되었습니다.

디자이너들은 더 빠른 피드백을 받고, 작업물을 보다 쉽게 재사용하며, 변수를 활용해 디자인 후 신속하게 변경을 적용하고, Figma API 자동화를 통해 디자인 시스템 업무 흐름을 최적화함으로써 상당한 시간을 절약하고 있습니다.

회사는 Figma로 전환한 것의 가장 큰 장점 중 하나로, 디자이너가 8명에서 70명으로 성장한 팀 전반에 걸쳐 협업과 파일 공유를 원활하게 지원할 수 있게 되었다는 점을 꼽고 있습니다.

"클라우드 기반인 Figma는 다양한 부서 전반에서 전사적으로 협업할 수 있도록 지원함으로써, 작업을 공유하고 신속한 의견과 피드백을 얻을 수 있게 해주며, 빠르게 변화하는 핀테크 산업에서 경쟁 우위를 확보할 수 있도록 돕고 있습니다."라고 Luiza는 말합니다.