Lollypop이 Figma를 통해 브리프부터 빌드까지 고객을 이끄는 방법

Lollypop Design Studio는 인도, 미국, 아랍에미리트, 베트남 전역에 걸쳐 180명 이상의 디자이너와 엔지니어로 구성된 팀을 보유한 글로벌 UI/UX 디자인 에이전시입니다. 10년 이상 이 스튜디오는 의료, 핀테크, 전자상거래 분야의 스타트업 및 포춘 500대 기업과 협력하여 복잡한 비즈니스 요구사항을 확장 가능한 디지털 제품으로 변환하며, 1,000곳 이상의 고객에게 서비스를 제공하고 50개 이상의 글로벌 디자인 상을 수상했으며 20억 명 이상의 삶에 영향을 미쳤습니다.

Lollypop의 고객 명단이 늘어나고 참여가 더욱 복잡해짐에 따라 디자이너, 개발자 및 고객이 정확성과 추진력을 잃지 않고 동일한 방향으로 나아가도록 유지하는 과제도 커졌습니다.

한 고객을 위해 온라인 다중 지역 소매 운영 플랫폼 디자인을 시작했을 때, 이 회사는 여태까지 맞추어 온 사항을 잃지 않으면서 브리프에서 빌드로 더 빠르게 이동하기 위한 방법이 필요했습니다. FigJam, Figma Design, Dev Tools 및 Figma Make 전반에 걸쳐 Figma 내에서 워크플로우를 통합함으로써 Lollypop은 프로토타이핑 노력을 3~4배 줄이고 피드백 주기를 며칠에서 단 하루로 단축했으며, 프런트엔드 개발 일정을 수개월에서 수주로 단축했습니다.

과제: 팀과 고객 전반에 걸친 복잡한 제품 업무 흐름 관리

Figma를 도입하기 전에는 디자이너, 개발자 및 고객 이해관계자가 서로 다른 도구와 문서를 통해 작업을 검토했기 때문에 결정 사항을 동기화하기 어려웠고 중요한 단계에서 피드백이 지연되었습니다.

여러 지역에서 사업을 운영하는 고객을 위해 온라인 소매 운영 플랫폼을 디자인하기 시작하면서 이러한 어려움은 더욱 심해졌습니다. 이 플랫폼은 비즈니스 관리자에게 매장 전반의 소매 실적에 대한 가시성을 제공하는 동시에, 현장 활동 데이터를 제품의 로직과 업무 흐름에 지속적으로 반영해야 했습니다.

공유된 작업공간이 없어 진행 상황은 종종 스프레드시트, 프레젠테이션 및 이메일 스레드를 통해 추적되었으며, 이로 인해 디자인된 내용, 구축된 내용 및 비즈니스에 필요한 내용 사이에 간극이 발생했습니다.

솔루션: 하나의 연결된 업무 흐름에서 디자인, 검증 및 제공

Lollypop은 연결된 단일 환경을 중심으로 전체 프로젝트 업무 흐름을 재구성했습니다. 팀은 모든 것을 Figma로 옮겼습니다. 검색 및 정렬에는 FigJam, 프로토타이핑 및 검증에는 Figma Design, 보다 간소화된 핸드오프에는 Dev Tools, 프런트엔드 제공 가속화에는 Figma Make를 사용했습니다.

그 결과, 검색 단계에서 내린 결정이 디자인으로 직접 전달되고, 디자이너와 개발자 모두 중간에 에셋이나 컨텍스트를 잃지 않고 구현으로 넘어갈 수 있는 프로세스가 탄생했습니다.

FigJam에서 체계적인 검색 프로세스 구축

팀은 FigJam 내부의 촉진 워크숍으로 모든 참여를 시작했습니다. 디자이너와 이해관계자는 협력하여 소매업체 여정을 매핑하고, 성능 트리거를 정의하고, 개입 시나리오를 모델링하고, 엣지 케이스를 표면화하는 작업을 단일 화면이 디자인되기 전에 모두 수행했습니다.

기본 Figma 프로토타입으로 업무 흐름 검증

Lollypop의 수석 디자인 매니저인 Naseer Ahmed는 “예전에는 100개의 화면을 모두 JPEG 형식으로 내보내고, 그 모든 JPEG를 다른 도구에 입력한 다음, 하드코딩하여 프로토타입을 만들어야 했습니다”라고 말했습니다.

프로토타이핑을 Figma 내에서 기본적으로 수행하도록 이동함으로써, 팀은 해당 단계를 완전히 없앴습니다.

또한 스마트 애니메이션을 통해 프로토타입이 완성된 제품의 느낌에 더 가까워졌으며, 이로 인해 이해관계자로부터 더 명확한 피드백을 얻고 현장에서 일어날 수 있는 오해를 줄일 수 있었습니다.

Dev Mode, Code Connect 및 Figma의 MCP 서버를 통해 동일한 캔버스에 디자인과 코드 유지

이전에 Lollypop은 디자이너가 별도의 파일을 유지 관리해야 하고 개발자가 사양, 에셋 및 주석에 액세스하기 위해 여러 플랫폼을 탐색해야 하는 다양한 툴 전반에 걸쳐 작업했습니다.

Figma로 통합함으로써 팀은 해당 업무 흐름을 개발자가 디자인 파일 내에서 정확한 사양, 컴포넌트 세부 정보 및 에셋에 직접 액세스할 수 있는 단일 연결된 환경으로 교체했습니다. 구축된 내용 역시 검토를 위해 Figma로 다시 가져올 수 있었으므로, 모호함을 줄이고 프로젝트 전반에 걸쳐 디자인과 코드를 동기화된 상태로 유지할 수 있었습니다.

“Figma는 구축 전반에 걸쳐 디자인과 개발이 동기화되는 방식을 변화시켰습니다. 디자인 컨텍스트는 개발 업무 흐름으로 직접 전달되며, 구축된 내용은 검토를 위해 다시 Figma로 돌아올 수 있습니다. 이를 통해 모호성이 줄어들고 불필요한 왕복 설명이 최소화되었으며 디자인과 구현 간의 더 긴밀한 정렬이 보장되어, 궁극적으로 시간을 절약하고 제공 효율성이 향상되었습니다”라고 Lollypop의 소프트웨어 서비스 디렉터인 Sri Chandra Dronavalli는 말했습니다.

또한 팀은 Figma의 MCP 서버를 IDE에 연결하여, AI 에이전트가 디자인 파일을 직접 쿼리하고 스크린샷이나 수동 사양에서 추정하는 대신 실제 디자인 시스템 컨텍스트에 기반한 코드를 생성할 수 있도록 했습니다. Code Connect를 사용하여 Figma 컴포넌트를 프로덕션 코드에 연결함으로써, AI 도구는 새로운 요소를 추정하는 대신 정확한 코드베이스 요소를 재사용하여 단 한두 번의 시도만으로 90%의 컴포넌트 정확도를 달성했습니다. 결과적으로 재작업이 줄어들고, 토큰 불일치로 인한 버그가 감소했으며, 사용자 피드백에 대한 반복 작업이 빨라졌습니다.

Figma Make로 프런트엔드 제공 가속화

백엔드 시스템이 이미 구축된 모듈의 경우, Figma Make는 처음부터 구축해야 하는 프런트엔드 레이어의 양을 줄여 다음 단계를 도왔습니다.

Figma Make를 사용하여 팀은 승인된 디자인에서 초기 프런트엔드 스캐폴드를 생성했습니다. 엔지니어는 이를 출발점으로 삼아 처음부터 인터페이스 레이어를 구축하는 대신 백엔드 시스템과 개선 및 통합했습니다.

공유 파일을 통해 피드백 주기 단축

피드백은 항상 고질적인 병목 현상이었으며, 화면을 PDF로 내보내고 응답을 받기 위해 며칠을 기다리는 것은 반복 작업이 항상 고객의 일정을 따라잡는 데 급급하다는 것을 의미했습니다.

Naseer는 “이전에는 프레젠테이션을 보내고 모든 화면을 JPEG로 내보낸 후 PDF로 변환하여 피드백과 검토를 받기 위해 며칠을 기다려야 했습니다”라고 말했습니다.

실시간 Figma 파일을 이해관계자와 공유함으로써 팀은 디자인 작업공간 자체로 검토를 이동할 수 있었습니다. 토론 및 결정 사항이 파일에 직접 캡처되어 추가적인 문서화 작업 없이 추적 가능한 기록이 생성되었습니다.

전망: 협업 확장 및 업무 흐름 개선

Lollypop이 더 복잡한 다중 지역 고객 프로젝트를 맡게 됨에 따라 Figma는 팀이 협업, 프레젠테이션 및 제공하는 방식 전반에 걸친 공유 레이어가 되고 있습니다. 업무 흐름의 통합은 이제 비즈니스의 새로운 영역으로 확장할 기반을 마련했습니다.

“우리가 더 빠르고 더 나은 제품을 출시하면, 그것은 우리가 시장에 어떻게 비춰지는지에 영향을 미칩니다. Figma에 구축한 업무 흐름과 프로세스는 빠르게 구축하고, 빠르게 출시하며, 매번 최고의 결과물을 선보일 수 있도록 도와주었습니다. 그것이 바로 브랜드를 구축하는 길입니다”라고 Lollypop의 글로벌 마케팅 및 파트너십 수석 매니저인 Charan Babu N.은 말했습니다.

또한 팀은 Figma Slides를 통해 이해관계자 프레젠테이션을 디자인 프로세스에 더 가깝게 가져와 툴을 전환하지 않고도 지역 간 팀을 정렬할 수 있도록 지원하고 있습니다. 또한 Figma Buzz를 사용하여 템플릿 및 콘텐츠 전달을 관리함으로써, 에셋을 처음부터 다시 만들지 않고도 캠페인, 형식 및 지역 전반에 걸쳐 브랜드 톤과 일관성을 유지할 수 있도록 보장하고 있습니다.