PhonePe가 Figma를 통해 7억 명 이상의 사용자에게 속도와 신뢰성을 제공하는 방법

요약

PhonePe는 7억 명 이상의 사용자와 5천만 개 이상의 가맹점이 신뢰하고 있는 인도의 최대 핀테크 플랫폼 중 하나입니다.

회사의 규모가 커지면서, 소규모 디자인 팀은 더 빠르게 움직이고 모든 제품에 걸쳐 방향성을 맞추며, 일관된 사용자 경험을 유지해야 했습니다. PhonePe는 Figma를 디자인 및 개발의 "살아있는 중앙 시스템"으로 채택하여 직무간 업무 흐름을 간소화하고 핸드오프 속도를 높였으며, Figma Design, Dev Mode, Figma MCP 전반에 걸쳐 안정적으로 디자인 시스템을 발전시켰습니다.

오늘날, 팀은 단 몇 시간 만에 개념에서 50% 명확성까지 도달합니다. 세 가지 디자인 시스템이 자리를 잡고 AI 기반 도구로 초기 성공을 거두면서, PhonePe는 속도나 품질을 떨어뜨리지 않으면서도 더 스마트한 방식으로 규모를 확장해 나가고 있습니다.

과제: 속도와 일관성을 유지하며 확장하기

PhonePe 그룹이 Share.Market과 Indus Appstore 같은 새로운 비즈니스를 시작하면서 협업이 더욱 복잡해졌습니다. 팀 숫자가 늘어나고 7억 명 이상의 사용자가 생기면서, 디자인, 전략, 개발의 방향을 일치시키는 일은 점점 더 복잡해졌습니다.

팀은 속도를 희생하지 않으면서 일관성을 유지하기 위해 더 연결되고 확장 가능한 방법이 필요했습니다. 팀들이 더 효율적으로 일하고 정보를 찾는 데 시간을 덜 쓰도록 하려면 디자인과 문서를 한곳에 중앙 집중화하는 것이 필수적이었습니다.

협업과 일관성은 디자인 팀이 오랫동안 개선하려고 노력해 온 영역이었습니다. 조직이 성숙해지면서 명확한 프로세스와 표준 작업 방식이 자리 잡기 시작했고, 이는 팀이 제품 전반에서 일관성을 유지하는 데 도움이 되었습니다.

해결책: 세 가지 디자인 시스템, 하나의 공통 언어

성장하는 생태계를 지원하기 위해, PhonePe는 세 개의 디자인 시스템을 운영합니다. 가장 오래된 디자인 시스템은 대표 소비자 앱을 구동하며, 새로운 두 가지 시스템은 Share.Market 같은 사업을 지원하면서 이러한 앱이 발전하는 과정에서 자유롭게 실험해 볼 수 있는 여지를 제공합니다.

Figma는 컴포넌트, 토큰, 아이콘 라이브러리 및 문서를 하나로 모으며 PhonePe의 디자인 시스템이 존재하는 단일 공유 공간이 되었습니다. 모든 것이 한곳에 모이게 되면서 디자인 및 엔지니어링 팀은 정렬된 상태를 유지하고, 더 빠르게 움직이며, 높은 품질을 유지할 수 있습니다.

각각의 차이점은 있지만, 세 개의 디자인 시스템 모두는 구조화된 프로세스, 공유된 디자인 토큰, 그리고 확장 가능한 문서화라는 Figma의 공통된 기반 위에 구축되어 있습니다. 이러한 일관성은 팀에게 공통의 언어를 제공하여 핸드오프를 가속화하고, 추측을 줄이며, 모두가 훌륭한 제품을 구축할 수 있도록 돕습니다.

대부분의 피드백과 리뷰는 직접 Figma에서 댓글과 공유 링크를 통해 이루어지며, 소통을 빠르고 맥락 있게 유지해 줍니다. 한편, SSO, 접근 제어, 버전 내역과 같은 Figma 엔터프라이즈 기능은 시스템을 안전하고 최신 상태로 유지하므로, 모든 사람이 명확성과 자신감을 가지고 진행할 수 있습니다.

협업용 "연습장" 및 문서화 도구로서의 FigJam

PhonePe 팀은 FigJam을 전면적으로 적극 활용하고 있습니다. 이는 디자인, 엔지니어링, 제품, 비즈니스, 마케팅, 크리에이티브 팀 전반에서 초기 아이디어 구상을 위해 가장 먼저 찾는 공간이 되었습니다. 한때 스티커 메모나 복도 대화 속에 존재하던 것들이 이제는 FigJam 안에 존재하게 되면서, 회사 전체에서 아이디어를 더 쉽게 기록하고 공유하고 발전시킬 수 있게 되었습니다.

FigJam은 팀이 초기 개념부터 최종 실행까지 기능의 전체 여정을 추적할 수 있도록 도와줍니다. 시간이 지남에 따라, 이는 PhonePe의 문서화 업무 흐름의 중요한 부분이 되었습니다. "디자인 운영 관점에서 보면 그건 성공이었습니다"라고 PhonePe의 콘텐츠 디자인 및 디자인 커뮤니케이션 리드인 Sindhu는 말합니다. "우리는 종합적으로 문서화 문화를 최대한 개선하려고 노력하고 있습니다."

또한 FigJam은 "가상 연습장" 역할도 하는데, 누구나 사용할 수 있을 만큼 간단하지만 큰 아이디어를 구상할 수 있을 만큼 강력합니다. 제품 관리자와 같은 비디자이너도 쉽게 참여해 흐름을 매핑하거나 초기 개념을 스케치할 수 있으며, 디자이너와 개발자는 정보 아키텍처를 설계하고 사이트맵을 구축하며 빠른 반복 작업을 공유하는 데 사용할 수 있습니다. 이러한 낮은 진입 장벽 덕분에 팀들은 더 빠르게 함께 탐색하고, 공동 창작하며, 아이디어를 다듬어 나갈 수 있습니다.

Dev Mode를 통한 명확성, 가시성, 생산성

Figma의 Dev Mode는 PhonePe의 디자인에서 개발까지의 업무 흐름을 간소화하는 데 중요한 역할을 했습니다. 디자이너들은 항상 컴포넌트에 대한 전체 맥락을 파악하며 작업해 왔지만, Dev Mode는 개발자들에게도 동일한 가시성을 제공했을 뿐만 아니라 실시간으로 컴포넌트를 검사하고, 테스트하고, 이해하는 데 필요한 도구를 제공했습니다. 이를 통해 엔지니어들이 디자인 팀과 대화를 주고받으며 소통할 필요 없이, 컴포넌트가 어떻게 작동하는지 탐색할 수 있는 실무적인 공간이 생겼습니다.

팀들은 반복적인 핸드오프나 확인 회의에 의존하는 대신, 파일을 직접 다루고 변형을 테스트하면서 더 확신을 가지고 개발할 수 있게 되었습니다. 플러그인 지원은 핸드오프를 더욱 간소화했습니다. 개발자들은 이제 팀이 구축한 사용자 지정 디자인 시스템 플러그인을 실행하여 사양을 더 명확하고 일관되게 만들 수 있습니다.

"Dev Mode 이전에는 디자인 팀이 컴포넌트 자체를 렌더링하는 데 사용한 각기 다른 변형만 볼 수 있었습니다. 저희에게는 엄청난 업그레이드였습니다"라고 PhonePe의 App Excellence 팀 소프트웨어 엔지니어인 Sachin Kumar는 얘기합니다.

Dev Mode는 회의를 줄이고 협업을 더 원활하게 만드는 데도 도움을 주었습니다. "컴포넌트의 기능을 이해하기 위해 핸드오프 전후로 여러 차례 회의를 할 필요 없이, 필요한 정보를 스스로 얻을 수 있습니다. 이것이 Dev Mode의 가장 강력한 기능 중 하나라고 생각합니다"라고 PhonePe의 디자인 책임자인 Rahul Gonsalves가 말합니다.

개발자는 Android와 iOS용 플랫폼별 코드 스니펫에 접근할 수 있어서, 보다 효율적으로 디자인을 프로덕션 준비 코드로 변환할 수 있습니다. 플러그인 지원 및 분리된 컴포넌트에 플래그를 지정할 수 있는 기능은 추가적인 제어를 제공하며 여러 팀 간의 시스템 무결성을 보호하는 데 도움을 줍니다.

Figma MCP로 업무 흐름에 AI 도입

PhonePe가 성장함에 따라, 팀은 품질이나 일관성을 저해하지 않으면서 AI가 더 빠른 배포를 AI가 지원할 수 있는 방법을 탐색하고 있습니다. 속도와 코드 안정성을 최우선으로 삼고, 그들은 디자인 컨텍스트가 개발로 전달되는 방식을 개선하는 데 집중해 왔습니다.

중요한 진전 중 하나는 Figma MCP를 도입한 것으로, 이를 통해 PhonePe는 AI 코딩 에이전트를 Figma에 안전하게 연결하고 디자인 파일, 컴포넌트, 시스템 메타데이터에 대한 구조적 접근을 제공할 수 있게 되었습니다. 표준화된 프롬프트와 지침 파일을 사용하여, 팀은 정확한 디자인 컨텍스트를 AI 업무 흐름에 전달할 수 있고, 이를 통해 기존의 표준과 일치하는 코드를 생성할 수 있고 개발 시간이 크게 줄어듭니다.

코드 생성뿐만 아니라, Figma MCP는 컴포넌트 생성 및 업데이트를 간소화하는 데에도 도움을 주고 있습니다. 팀은 이를 사용하여 디자인 시스템에 새로운 컴포넌트를 추가하는 작업을 지원하고 있으며, 이 접근 방식이 성숙해짐에 따라 초기 파일럿 팀은 더 간단한 화면에서 이미 성공적인 성과를 거두고 있습니다.

핸드오프 단계에서의 품질을 더욱 보호하기 위해, PhonePe는 핸드오프 전에 문제를 발견하기 위한 맞춤형 린팅 플러그인을 제작했습니다. 이 플러그인은 적용된 토큰과 컴포넌트 메타데이터와 같은 세부 정보를 표시하여 개발자가 해당 파일이 구현할 준비가 되어있는 상태인지 쉽게 확인할 수 있습니다.

"우리는 그 점을 활용하여 플러그인을 개선하고 싶습니다"라고 Sachin은 말합니다. "그래서 Figma에서 이미 제공받는 기능 외에도 우리 디자인 시스템을 더욱 견고하게 만들기 위해 몇 가지 자체 기능을 추가하려고 합니다."

Figma를 통해 더 빠르게 제품 출시

Figma를 통해 가시성을 공유하여 마찰이 줄어들고, 핸드오프 속도가 두 배로 빨라졌습니다. 팀은 종종 단 몇 시간 만에 개념에서 50% 명확성까지 도달하곤 합니다. 그리고 협업이 디자인을 넘어 확장되기 때문에, 비즈니스 파트너 및 비디자인 팀들도 신속하게 프로토타입을 살펴보고 피드백을 제공할 수 있습니다. 특히 낮은 완성도 단계에서 더 일찍 참여시키는 것은 잘못된 방향으로 구축하는 과정에서 발생하는 매몰 비용의 위험을 줄이는 데 도움이 되었습니다.

"다른 팀들이 필요할 때 Figma에서 화면을 직접 살펴보거나 깔끔하고 정돈된 디자인을 시각화할 수 있도록 한 덕분에, 더 빠르게 모든 사람의 이해 수준이 같아졌습니다"라고 Sindhu는 말합니다.

앞으로 팀은 Figma Make를 사용해 초기 아이디어를 테스트 가능한 프로토타입으로 전환할 계획이며, 특히 시간 제약으로 탐색이 중단될 수 있는 상황에 이를 활용하려 합니다 Make를 통해, PhonePe는 더 많은 아이디어를 테스트하고, 더 많은 옵션을 탐색하며, 더 좋은 제품을 더 빠르게 출시하는 것을 목표로 합니다.