Figma와 Zeplin: Superformula의 성공적인 디자인-개발 프로세스

안녕하세요 Zeplin 아시아 총판 단군소프트입니다.
디자인, 엔지니어링, 리서치 및 인사이트를 전문으로 하는 최첨단 디지털 혁신 파트너 회사인 Superformula를 아시나요?

Superformula | We are your digital transformation partner.

Superformula란? -2010년에 설립 -북미, 남미 및 유럽 등에 직원 분포 -전 세계 최고의 브랜드를 위한 사용자 우선 대행사 -MGM Resorts를 위한 여러 대규모 웹 및 네이티브 앱 프로젝트에 참여

Superformula는 일관성 있는 작업을 위해 재사용할 수 있는 구성 요소가 있는 깔끔한 핸드오프 툴 이자 스마트한 디자인-개발 커뮤니케이션이 가능한 Zeplin을 사용하고 있다고 하는데요. Superformula의 워크플로우에 Zeplin이 어떻게 사용되고 있는지 궁금하지 않으시나요? 그래서 준비했습니다! 아래에 Superformula의 워크플로우에 대한 소개를 준비했으니 지금 바로 확인해 보세요!!

Superformula의 워크플로우 특징

우선 Superformula의 워크플로우를 간단하게 살펴보겠습니다. Superformula의 워크플로우의 첫 번째는 Figma를 이용한 디자인입니다. Superformula의 디자이너는 Figma에서 40~50개의 화면을 작업하고 엔지니어, 테스터 및 마케팅 담당자가 Zeplin에서 함께 모여 디자인을 구현합니다.

1.디자이너의 놀이터, Figma
Superformula는 자유롭게 디자인을 반복해서 작업하는 것이 매우 중요하게 생각합니다. 제품 개발 프로세스에 연연하지 않고 언제든지 아이디어를 자유롭게 내놓는 것이 바로 Superformula 워크플로우 프로세스의 핵심입니다.

이러한 생각을 하는 Superformula 선택한 디자인 도구는 무엇일까요? 정답은 Figma입니다!

Superformula의 디자이너들은 Figma를 디자이너의 놀이터라고 비유합니다. 언제든지 원하는 대로 디자인을 망치고 다시 원래대로 돌려놓을 수 있기 때문입니다. Superformula는 디자이너들이 어린아이들이 장난치듯이 디자인을 갖고 놀아야 혁신적인 디자인이 나올 수 있다고 여깁니다.

2.디자인 게시를 위한 ‘선반’,Zeplin
Figma가 돌아다니며 필요한 만큼 디자인을 엉망진창을 만들 수 있는 '놀이터'라면 Zeplin은 완성된 디자인을 배치할 수 있는 '선반'입니다.

Figma에서 작업한 디자인이 Superformula가 설정한 개발이 가능한 디자인 조건에 충족하면 그 디자인은 다른 팀원들에게 공유됩니다. 이때 다른 팀원들이 디자인을 알아보기 쉽도록 디자인을 질서정연하게 배치해 주는 것이 바로 Zeplin입니다.

그렇다면 효율적인 디자인 게시를 위해 Superformula가 사용하는 Zeplin의 기능은 무엇일까요?

Superformula가 사랑하는 Zeplin의 기능

1.버전 관리
위에서 말했듯이 Superformula의 워크플로우는 빠른 반복이 특징입니다. 이러한 특징 때문에 Superformula에서는 변경 사항과 다양한 버전의 화면 및 구성 요소를 추적하는 것이 중요합니다.

개발을 진행하다 보면 제품 요구 사항이 추가되고 변경되는 경우가 생깁니다. 이때 변경 사항을 디자인과 함께 추적할 수 없으면 다른 팀과 협업 과정에서 혼란이 생기고 제품 출시 일정 및 품질에 영향을 미칠 수 있습니다.

하지만 Zeplin을 사용하면 전체 팀이 디자인 파일의 변경 사항을 쉽게 식별하고 이러한 변경 사항의 특징을 명확하게 문서화하여 공유할 수 있습니다.

2.Commit Messages
Zeplin의 ‘Commit Messages’는 작업을 훨씬 쉽게 만들어주는 기능입니다. 이 기능을 사용하면 QA 팀은 모든 화면에서 변경된 사항을 쉽게 확인할 수 있으며 작업 내역의 버전 관리 또한 간편하게 할 수 있습니다.

Superformula의 디지털 디렉터 Scott Baggett /Caroline Maxwell, Superformula 수석 디자이너

"Zeplin의 버전 관리 기능을 활용하여 표준 워크플로우에서 context를 제공하는 것은 우리가 엔지니어의 관점과 최적의 작업 방식을 고려하고 있음을 보여줍니다."

-Superformula의 디지털 디렉터 Scott Baggett-

"Zeplin의 깔끔한 버전 관리는 원활한 개발 및 디자인 작업을 진행할 수 있게 해줍니다. 버전 및 커밋 메시지를 사용하여 '무엇'과 '이유'를 설명함으로써 개발팀과 디자인팀이 매우 잘 맞물려 진행할 수 있습니다."

-Caroline Maxwell, Superformula 수석 디자이너-

 

3.Styleguides

MGM Resorts와 같은 기존 브랜드의 앱을 완전히 다시 리플랫폼 한 다음 지속적으로 유지 및 관리를 하려면 재사용 가능한 구성 요소를 갖춘 디자인 시스템이 필요합니다. Superformula는 이러한 디자인 시스템을 설계하기 위해 Zeplin의 ‘Styleguides’를 활용했습니다.

‘Styleguides’를 사용하면 개발 과정에서 일관성과 재사용이 촉진되어 매우 원활한 핸드오프로 이어질 수 있습니다.

‘Styleguides’를 사용하면 위의 이미지처럼 디자이너는 개발자에게 색상, 텍스트 스타일 및 간격 토큰을 개발자에게 알려줄 수 있고, 개발자는 Zeplin에서 재사용 가능한 구성 요소를 쉽게 찾아 개발 중에 최대한 활용할 수 있습니다.

또한 Zeplin의 ‘Styleguides’에는 설정한 모든 패딩 값이 표시되기 때문에 만약에 패딩 값이나 유형 스타일에 레이블이 지정되지 않은 경우 개발자는 댓글을 남겨 일회성 스타일인지 단순히 실수인지 물어볼 수 있습니다.

여기까지 Superformula의 워크플로우에 대한 소개였습니다.
여러분들도 Zeplin을 이용해 수많은 사람들과 함께 할 수 있는 워크플로우를 구축해 보세요!

다들 즐거운 한 주 보내세요~
감사합니다.

 

이 글은 Zeplin의 Figma and Zeplin: Superformula’s winning design-to-development process를 번역한 글입니다.

​