메인 콘텐츠로 건너뛰기

Grab이 Figma와 AI를 통해 동남아시아 전역에서 지역 맞춤형 경험을 확장하는 방법

Grab은 동남아시아의 선도적인 슈퍼앱으로, 교통, 식품, 디지털 결제 전반에 걸쳐 5천만 명 이상의 사람들에게 서비스를 제공하고 있습니다. 비즈니스가 다양한 시장으로 확장되면서, 팀들은 현지 요구에 맞추면서도 속도와 일관성의 균형을 유지할 수 있는 공유 시스템이 필요했습니다.

싱가포르 Grab 앱 인터페이스싱가포르 Grab 앱 인터페이스
싱가포르 Grab 앱 인터페이스

Grab은 Figma를 공통 작업공간으로 사용하여 현재 Grab의 승객 앱을 지원하는 자체 디자인 시스템인 Duxton을 구축했습니다. 디자이너와 엔지니어는 하나의 단일 진실 공급원(SSOT)을 바탕으로 작업하며, Dev Mode는 엔지니어가 여러 파일에서 사양을 찾아보지 않아도 필요한 구현 세부 사항을 제공합니다.

Grab이 계속해서 실험을 이어감에 따라, 팀들은 Figma Make와 MCP 기반 통합 기능을 사용해 더 빠르게 프로토타입을 제작하고, 현대화하며, 경험을 현지화할 수 있는 AI 기반 업무 흐름도 탐색하고 있습니다.

과제: 다양한 시장에서 지역 맞춤형 경험 확장하기

Grab은 모든 시장이 서로 다른 지역을 대상으로 디자인합니다. 싱가포르에서 직관적으로 느껴지는 것이 필리핀에서는 통하지 않을 수 있으며, 태국에 맞는 레이아웃이 인도네시아의 사용자에게는 완전히 바뀌어야 할 수도 있습니다.

말레이시아 Grab 앱 인터페이스말레이시아 Grab 앱 인터페이스
말레이시아 Grab 앱 인터페이스

하지만 당시 팀이 사용하던 도구들은 이를 따라잡지 못했습니다. 디자이너들이 공유 시스템 없이 격리된 파일에서 작업했기 때문에 컴포넌트를 다시 만들어야 했고, 사양이 자주 달라졌으며, 글꼴 크기나 모서리 반경 같은 기본 사항조차 팀 간에 일관성이 없었습니다.

통합된 플랫폼이 없어서 빠르게 움직이거나 효과가 있던 부분을 확장하기가 더 어려워졌습니다. Grab은 팀과 시장 전반의 일관성을 잃지 않으면서 현지의 인사이트를 실제 제품으로 빠르게 전환하는 방법이 필요했습니다.

태국 Grab 앱 인터페이스태국 Grab 앱 인터페이스
태국 Grab 앱 인터페이스

해결책: Figma를 통해 더 빠르게 연결되어 일할 수 있는 공유 플랫폼

Grab의 디자인 조직은 약 170명의 디자이너와 380명의 엔지니어로 구성되어 있으며, 소비자, 운전자 및 가맹점 문제를 해결하는 다기능적인 "포드(pod)"와 시스템과 현지화에 집중하는 수평적인 팀들로 구성되어 있습니다.

팀을 Figma로 전환하면서 일하는 방식이 완전히 바뀌었습니다. 공유된 컴포넌트, 내장된 버전 관리, 조직 전체의 가시성을 통해 Figma는 단일 진실 공급원(SSOT)이 되었으며, 이를 통해 디자이너는 더 빠르게 움직일 수 있고 엔지니어는 필요한 정보에 더 빨리 접근할 수 있게 되었습니다.

Figma 내 Grab 공유 에셋 라이브러리Figma 내 Grab 공유 에셋 라이브러리
Figma 내 Grab 공유 에셋 라이브러리

"Figma의 버전 관리 및 시각적 표현과 같은 기능 덕분에 엔지니어들이 더 쉽게 디자인을 활용하고 코드로 변환할 수 있게 되었습니다"라고 Grab의 엔지니어링 및 핵심 경험 부문 책임자인 Suraj Swamy가 설명합니다.

몇 달 만에 팀들은 재사용 가능한 컴포넌트를 구축했으며 즉각적인 업무 흐름 개선을 확인했습니다. 일단 변경 사항이 적용되면, 시스템 전체에 확장되어 반복 작업이 빠르고 일관되며 배포하기 쉽습니다.

Grab 공유 컴포넌트 라이브러리Grab 공유 컴포넌트 라이브러리
Grab 공유 컴포넌트 라이브러리

"사람들은 더 쉽게 서로의 작업을 볼 수 있습니다. Figma를 통해 기존 요소와 솔루션을 재활용할 수 있습니다"라고 Grab의 디자인 책임자인 Patrick Jean은 얘기합니다. 이는 Grab의 실험 중심 문화에 획기적인 변화를 가져왔습니다. 디자이너와 엔지니어는 더 빠르게 결정을 내릴 수 있으며, 더 자신감있게 제품을 출시할 수 있습니다.

Duxton으로 가는 길: 확장을 위해 구축된 디자인 시스템

Duxton은 싱가포르의 역사적인 거리에서 이름을 딴 Grab의 디자인 시스템입니다. 이는 팀이 동남아시아 전역에 걸쳐 일관적이고 지역 맞춤형인 경험을 구축하는 방식의 중심 역할을 합니다. Figma에서 제작된 Duxton은 디자이너와 엔지니어에게 재사용 가능한 컴포넌트의 공유 기반을 제공하여 품질을 저하하지 않고 빠르게 작업할 수 있습니다.

Grab의 디자인 시스템인 DuxtonGrab의 디자인 시스템인 Duxton
Grab의 디자인 시스템인 Duxton

더 많은 팀들이 Duxton을 채택하면서, 중점은 앱 전반에 걸친 디자인 일관성 확장으로 변화했습니다. 디자인 및 플랫폼 엔지니어링 팀은 Duxton Figma 라이브러리를 프로덕션에 적용하는 코드 라이브러리인 Duxton SDK를 구축하고, 시스템 도입과 일관성 유지를 더 쉽게 만들어 주는 AI 기반 도구를 탐색하기 위해 협력했습니다. 이를 통해 팀들은 고립된 지역적 최적화에서 벗어나, 공통 기본 요소를 함께 재사용하고 개선함으로써 속도가 빨라진 공유 모델로 전환할 수 있었습니다.

Duxton의 모바일 UI 라이브러리Duxton의 모바일 UI 라이브러리
Duxton의 모바일 UI 라이브러리

Duxton은 2023년 말에 Grab의 기본 디자인 시스템으로 정해졌습니다. 2025년 하반기에는 앱 전반에서 약 50%의 채택률을 달성했습니다. 이를 달성하기 위해서는 여러 팀이 사용하는 컴포넌트에 영향을 주지 않으면서, 시스템과 SDK가 여전히 진화하는 동안 대규모 레거시 영역을 신중하게 마이그레이션해야 했습니다. 기술적 작업과 더불어, 팀은 조직 전반의 일관성과 현지 시장의 유연성의 균형을 맞추면서 업무 방식을 전환해야 했습니다.

당사 소비자 앱 전체의 약 50%는 SDK로 구동되는 Duxton 디자인 컴포넌트를 기반으로 구축되어 있습니다. 이는 당사 앱 코드베이스의 코드가 500만 줄 이상이라는 점을 고려한 것입니다.

Grab 엔지니어링 및 핵심 경험 부문 책임자, Suraj Swamy

Figma를 기반으로 한 Duxton은 Grab이 일관된 고품질의 사용자 경험을 빠르게 제공할 수 있도록 돕습니다. 이러한 일관성은 제품 전반에 걸쳐 확장되어, 사용자는 차량을 예약하거나 음식을 주문하는 등의 일상적인 인터랙션이 직관적이고 매끄럽다고 느낄 수 있습니다.

Grab 앱의 넛지 컴포넌트 화면Grab 앱의 넛지 컴포넌트 화면
Grab 앱의 넛지 컴포넌트 화면

Patrick은 "우리가 만들거나 디자인하는 모든 것이 사용자의 요구를 충족하는 데 필요한 유연성을 갖추고 있는지 확인해야 합니다"라고 얘기합니다.

디자인 시스템과 SDK 구축은 복잡한 작업이지만 할 수 있는 일이라고 말하고 싶습니다. 하지만 조직 전체로 확장하여 현재 약 50%의 채택률을 달성하는 것? 그것이야말로 정말 많은 전파 활동을 필요로 하는 진짜 과제입니다.

Grab 디자인 책임자, Patrick Jean

추진력을 유지하기 위해, 팀은 이제 대시보드를 사용하여 화면별 및 팀별 채택률을 추적합니다. 이러한 가시성은 격차를 식별하고 개선 우선순위를 정하는 데 도움이 됩니다. 또한 팀은 AI가 이러한 업무 흐름에 어떻게 통합되어 참여를 지원하고 도입을 더욱 가속화할 수 있는지도 살펴보고 있습니다.

Dev Mode를 활용해 디자인에서 개발까지의 과정 간소화

Grab에서는 여러 팀에 걸쳐 Dev Mode가 자연스럽고 적극적으로 도입되었습니다. 현재 Dev Mode는 디자인을 검사하고 구현 세부 정보에 접근하는 기본 방식이 되었으며, 활발하게 사용하는 사용자는 지난해 244명에서 현재 353명으로 늘어서 전년 대비 약 45% 증가했습니다. 색상, 모서리 반경 및 아이콘과 같은 속성을 구성할 수 있으므로, 시스템의 일관성을 해치지 않으면서 지역별 또는 기능별 요구사항에 맞게 컴포넌트를 유연하게 적용할 수 있습니다.

Dev Mode에서 버튼 검사Dev Mode에서 버튼 검사
Dev Mode에서 버튼 검사

디자인과 엔지니어링 간의 정렬이 개선되면서, 마이크로카피 수정이나 레이아웃 조정과 같은 작은 변경 사항을 신속하게 테스트하고 검증하여 훌륭한 제품을 더 쉽게 제작할 수 있게 되었습니다. Grab은 비즈니스 영향을 측정하기 위해 대조군을 대상으로 지역별 A/B 테스트를 실시하며, 시장 전반에 걸쳐 다양한 변형을 출시하여 지역 맞춤형 경험을 개선하고 있습니다.

이는 우리가 말했던 소비자 중심에 대한 내용으로 돌아갑니다. 그것은 실제로 운전자, 가맹자 파트너, 소비자를 포함한 모든 사용자의 고충을 이해하는 것을 의미합니다. Dev Mode를 통해 Grab의 엔지니어들은 컴포넌트를 쉽게 확인하고 디자인을 실제 구현으로 전환할 수 있으며, 이를 통해 우리가 구축하는 것이 항상 고객의 요구에 충실하도록 보장할 수 있습니다.

Grab 디자인 책임자, Patrick Jean

엔지니어는 더 이상 사양을 확인하기 위해 디자인 파일을 뒤질 필요가 없습니다. 컴포넌트 세부 정보, 구조, 간격 등 필요한 모든 것이 작업 중인 화면에 바로 나타납니다.

예전에는 이곳저곳을 뒤지고 헤매며 찾아다니는 일이 매우 많았습니다. 엔지니어가 자신에게 필요하고 관련 있는 것을 찾기가 훨씬 쉬워졌기 때문에, 그런 점에서 볼 때 이것은 마찰 요소를 하나 제거해 주었습니다.

Grab 디자인 책임자, Patrick Jean

AI와 함께 탐색하는 다음 개척 영역

실험은 Grab이 개발하는 방식의 핵심입니다. AI 도구가 발전함에 따라, 팀은 특히 디자인에서 코드 구현까지의 업무 흐름에서 반복적으로 발생하는 디자인과 엔지니어링 간의 마찰을 줄이는 기회를 발견했습니다. 팀은 자연어 프롬프트에서 코드를 생성하는 AI 기반 코드 편집기인 Cursor로 작업하기 시작하여, 일상적인 작업을 자동화하고 빠른 반복 개선을 지원했습니다.

그러한 기반은 Talk to Figma MCP라는 내부 통합 도구 개발로 이어졌습니다. Grab이 구축한 이 도구는 모델 컨텍스트 프로토콜(MCP)을 사용하여 Figma를 Cursor에 연결하므로, 팀은 구조화된 디자인 데이터를 추출하고 AI 명령을 사용하여 디자인 작업 속도를 높일 수 있습니다. 이 플러그인은 주간 사용자 1,700명이 21만 개 이상의 이벤트를 생성하며 높은 채택률을 보여주고 있으며, 이는 팀들이 AI 기반 업무 흐름을 얼마나 빠르게 수용하고 있는지를 나타냅니다. "우리는 AI 모델이 기능 측면에서 어디까지 가능한지 알아보기 위해 항상 한계를 확장하고 있습니다"라고 Suraj는 말합니다.

Figma의 Talk to Figma MCP 플러그인Figma의 Talk to Figma MCP 플러그인
Figma의 Talk to Figma MCP 플러그인

이것은 Figma 플랫폼이 얼마나 확장 가능하고 맞춤 설정 가능한지 보여주는 훌륭한 예시입니다. Dev Mode 및 Figma의 MCP 서버와 같은 자체 도구부터 Grab의 Talk to Figma MCP와 같은 통합 도구에 이르기까지, 팀은 자신들의 필요에 맞게 업무 흐름을 구성할 수 있습니다. 아직 초기 단계이지만, 이 도구는 이미 기존 인터페이스의 현대화, 더 빠른 현지화 작업, 접근성 개선과 같은 사용 사례에 대한 잠재력을 모두 Figma 내에서 보여주고 있습니다.

Talk to Figma MCP 인터페이스Talk to Figma MCP 인터페이스
Talk to Figma MCP 인터페이스

앞으로의 방향: 공유된 도구, 공유된 추진력

디자인과 엔지니어링이 계속해서 융합됨에 따라, Grab은 팀들이 함께 일하는 방식을 간소화할 기회가 점점 늘어난다고 봅니다. Duxton의 확장부터 AI 기반 도구 실험에 이르기까지, Figma는 이러한 발전의 중심 역할을 하고 있습니다.

이제 팀은 아이디어를 빠르게 프로토타입으로 제작하고 테스트하며, 피드백을 더 일찍 프로세스에 반영하기 위해 Figma Make를 탐색하고 있습니다. "사람들이 함께 앉아 공통의 언어로 소통할 수 있을 때 마법 같은 일이 일어납니다"라고 Patrick은 얘기합니다.

단일 플랫폼을 통해, Grab은 의도적으로 디자인되고 대규모로 제공되는 고품질의 지역 맞춤형 경험을 계속해서 구축하고 있습니다.

Figma로 디자인을 효과적으로 확장하는 방법

Figma가 조직의 디자인 확장에 어떻게 도움이 되는지 자세히 알아보려면 양식을 입력하세요.

Figma와 소통하기

Figma로 디자인을 효과적으로 확장하는 방법

위대한 디자인에는 제품과 브랜드를 차별화할 수 있는 잠재력이 있지만, 혼자서는 위대한 디자인을 만들 수 없습니다. Figma는 빠르고 보다 포용적인 디자인 업무 흐름으로 제품 팀을 하나로 모읍니다.

Figma가 조직의 디자인 확장에 어떻게 도움이 되는지 자세히 알아보려면 양식을 입력하세요.

Figma가 제공하는 지원은 다음과 같습니다.

  • 아이디어 구상부터 제작, 디자인 구축까지 디자인 작업의 모든 단계를 한곳에서 해결
  • 전사적으로 공유되는 디자인 시스템으로 디자인 업무 흐름 속도 향상
  • 접근성 높은 웹 기반의 간편한 플랫폼으로 제품팀 작업 과정에서 포용성 강화

Figma와 소통하기

“제출”을 클릭하면 서비스 이용 약관개인정보 처리방침에 동의하는 것으로 간주됩니다.