다국적 결제 기술 선도 기업인 Juspay는 복잡한 가맹점 및 소비자 생태계 전체적으로 진행되는 수백만 건의 거래를 지원하기 위해 민첩하고 엔지니어링 중심적인 기업 문화를 유지하고 있습니다. 수십 개의 대시보드, 모듈식 플랫폼 및 광범위한 맞춤화 요구 사항을 고려하여 디자인은 수작업에서 확장 가능하고 개발자에 맞춘 시스템으로 발전해야 했습니다.

Figma를 도입한 이후, Juspay는 분리된 디자인 업무 흐름을 개발자 친화적인 통합 시스템으로 전환했습니다. 브랜치 Dev Mode, Code Connect와 같은 기능 덕분에 이제 Juspay는 팀과 리셀러 간의 협업 효율을 높이고, 제품을 더 빠르게 출시하고, 일관된 확장성을 유지할 수 있게 되었으며, 결과적으로 디자인 속도가 5배 향상되었습니다.

디자인과 개발 간의 간극 해소

Figma를 도입하기 이전까지 Juspay는 디자인 업무 흐름을 Sketch, Flinto, 그리고 대면 피드백에 의존했습니다. 디자이너들은 종종 혼자 작업하거나 한 화면 앞에 모여, 파일을 주고받는 방식으로 협업했습니다. 이런 방식은 협력은 잘 되는 편이었지만 했지만 업무 흐름이 위치에 크게 의존할 수밖에 없었습니다. 개발자들도 디자인 의도를 이해하는 데 한계가 있었기 때문에 구현이 느리고 오류가 더욱 쉽게 발생하는 경향이 있었으며, 이로 인해 마감일을 놓치는 경우가 많았습니다.

“하루에 9~10시간씩 전화로 통화하면서 Sketch 화면을 공유하니, 기기가 속도가 아주 느렸습니다. 이렇게 불편을 겪다 보니 더 나은 협업 방식이 필요하다는 걸 확실히 느끼게 되었으며, 그래서 거의 하루만에 Figma로 전환했습니다.”라고 Juspay 디자인 디렉터 Samit Barai는 이야기합니다.

깊이와 제어 역량을 갖춘 디자인 시스템 확장

Figma를 채택한 후 Juspay의 첫 번째 디자인 시스템이 등장했습니다. 초기에 스타일을 기반으로 구축되었던 팀은 색상, 타이포그래피, 크기, 테마 설정 등에서 변수를 사용하도록 전환하여 엔지니어링 코드 문법과의 정합성을 더욱 높였습니다.

이 변화는 다양한 브랜드와 여러 대시보드를 운영하는 Juspay의 환경에 반드시 필요했습니다. 각기 다른 팀과 파트너 간에도 기본 요소들이 매끄럽게 적용되어야 했기 때문입니다. 현재는 변수 기반 테마 기능을 통해 디자이너들이 몇 번의 클릭만으로 가맹점 및 리셀러 파트너용 대시보드의 테마를 손쉽게 설정할 수 있습니다.

대규모 환경에서도 정확성 보장

Juspay의 제품 영역이 확장됨에 따라, 팀은 Figma API를 활용해 자체 플러그인과 내부 도구를 구축하여 디자인과 개발 간의 업무 흐름을 연결하고 구현 정확성을 검증했습니다. 디자인 시스템 커버리지 플러그인은 인계 전마다 파일을 스캔하여, 컴포넌트로 제작되지 않은 요소를 표시합니다. “이 플러그인은 디자인 시스템을 사용하지 않는 요소와 컴포넌트로 전환해야 할 부분을 찾아줍니다. QA 도구이자 새로운 가능성을 열어주는 도구이기도 합니다.”라고 Deepanshu는 설명합니다.

그 결과 생성된 데이터는 내부 대시보드로 전달되어, 컴포넌트 재사용, 비디자인 시스템 오버라이드, 디자인 시스템 채택 추이 등 파일 및 사용자 단위의 지표를 추적합니다.

엔지니어링 단계에서 시각적 일관성을 강화하기 위해, Juspay는 검증된 디자인과 일치하지 않는 Pull Request를 표시하는 Chrome 확장 프로그램도 개발했습니다. Figma의 라이브러리 분석 기능과 결합된 이러한 도구들은 불일치를 방지하고, 개발자 간의 동기화를 유지하며, 디자인의 품질을 보장합니다.

이러한 개선은 다음과 같은 구체적인 성과로 이어졌습니다.

• 디자인 속도 5배 향상
• 90일간 컴포넌트 재사용률 173% 증가
• 컴포넌트 분리율 17% 감소
• 스캔된 파일의 평균 디자인 시스템 커버리지 71% 달성
• 12개 내부 팀이 공유 라이브러리를 적극 활용

유연성을 갖춘 거버넌스

Juspay는 대규모로 운영하는 기업이지만 창의성에 제약을 주지 않습니다. 디자이너들은 Slack-to-Jira 업무 흐름을 통해 새로운 패턴이나 변형안을 제안할 수 있으며, 디자인 시스템 팀이 이를 검토합니다. 승인된 변경 사항은 Figma의 브랜치, 동료 검토를 거쳐 명확한 변경 기록과 함께 마스터 파일에 병합됩니다.

대시보드를 넘어, Juspay의 디자인 시스템은 코드의 컴포넌트 아키텍처를 미러링합니다. 테이블 셀이나 래퍼와 같은 모듈형 컴포넌트는 사용 사례에 따라 다양한 방식으로 조합할 수 있습니다. Deepanshu는 “이제 각 인스턴스를 다시 디자인하는 대신 인터페이스를 블록처럼 조립하여 디자인 속도를 5배 향상시켰습니다”라고 설명했습니다.

FigJam을 통한 비평, 아이디어 구상, 포용성

Figma의 영향은 컴포넌트와 코드에 그치지 않았으며, Juspay의 디자인 문화 자체를 바꾸었습니다. 이제 모든 프로젝트에 팀원들이 디자인을 네 가지 측면에서 평가하는 구조화된 동료 비평 세션인 Show & Tell 세션이 포함되어 있으며, 여기에서는 마음에 드는 점, 잘 작동하지 않는 점, 개선할 수 있는 점, 빠진 부분이 있는지 여부를 살펴봅니다. 또한 모든 과정을 FigJam 내에서 진행됩니다.

제품 관리자와 엔지니어들도 아이디어를 공유하고 피드백을 제공하기 위해 스티커 메모와 와이어프레임으로 초기 단계에서 아이디어 구상에 참여합니다. 이러한 개방적이고 교차 기능적인 접근 덕분에, 디자인은 조직 전체가 함께 책임지는 진정한 공동 작업이 되었습니다.

미래 대비: Dev Mode MCP 서버, Code Connect, 자동화

성숙한 디자인 시스템이 구축된 상태에서, Juspay는 디자인에서 코드로 이어지는 업무 흐름을 자동화하기 위한 새로운 방식을 시험 중입니다.

현재 Code Connect는 디자인 시스템 리포지토리와 통합되어 있어, 개발자들이 Dev Mode 내에서 실시간으로 프로덕션 수준의 코드 스니펫을 직접 확인할 수 있습니다. 현재까지 34개의 컴포넌트가 Code Connect를 통해 연결되었습니다.

또한 Juspay는 Figma의 Dev Mode MCP 서버를 활용해 사용 가능한 HTML/CSS 및 TypeScript 코드를 생성하고 있으며, 최소한의 수동 작업으로 개념 단계에서 프로덕션 수준의 코드까지 전환하는 것을 목표로 하고 있습니다.

아직 실험 단계이지만, Juspay는 Figma의 MCP 서버와 Code Connect가 다음과 같은 주요 효율성 향상을 가져올 것으로 예상하고 있습니다.

• 개발 속도 4~5배 향상: 화면당 구현 시간을 45~60분에서 8~12분으로 단축
• 작업 단계 축소: 전체 업무 흐름을 15단계에서 4단계로 간소화
• 일관성 향상: 시각적 불일치율 15~20%에서 3~5%로 감소

또한 개발자들이 모든 변경 사항과 동기화 상태를 유지할 수 있도록, 팀은 디자인 시스템 버전 전반의 업데이트를 스캔하고 GitHub Pull Request를 자동으로 생성하는 플러그인도 시험 중입니다. 이를 통해 디자인 업데이트와 코드 가시성 간의 연결 고리를 완성했습니다.

확장을 위한 디자인, 미래를 위한 구축

필요에서 시작된 Juspay의 Figma 활용 여정은 협업형 디자인 플랫폼이 UI 일관성뿐 아니라 조직 문화와 업무 흐름까지 어떻게 혁신할 수 있는지를 보여줍니다. Figma를 기반으로, Juspay는 더 빠르게 구축하고, 더 스마트하게 협업하며, 더 자신 있게 확장하고 있습니다. 변수, 브랜치, 그리고 플러그인 하나하나가 그 기반이 되고 있습니다.