Customer.io가 변수와 Dev Mode로 디자인 핸드오프를 간소화하는 방법

소요 시간: 4분

요약: 기능성은 항상 마케팅 기술(MarTech) 분야의 주요 초점이었습니다. Customer.io는 디자인과 사용자 경험을 고객을 위한 제품 제작의 지침 원칙으로 삼는 새로운 접근 방식으로 업계에 혁신을 일으켰습니다. 2012년에 설립된 이 회사는 Notion, Clearbit, IMAX와 같은 선도적인 브랜드를 위한 자동화 메시지 캠페인을 운영하는 데까지 성장했습니다.

Figma의 오거니제이션 요금제의 일환으로, Customer.io는 변수와 Dev Mode를 사용하여 디자인-개발 핸드오프를 개선하여 팀이 더 빠르게 작업을 완료할 수 있게 했습니다.

과제: 컴포넌트 라이브러리 단절로 디자인-개발 간 마찰 발생

Customer.io는 일정 기간 Figma를 사용했지만, 디자인 시스템 거버넌스 부족과 임시로 만든 컴포넌트가 업무에 영향을 미치기 시작하는 전환점을 맞았습니다. Customer.io의 선임 디렉터 및 제품 디자인 책임자인 Aiden Bordner는 다음과 같이 설명합니다: "우리는 Figma에서 모든 컴포넌트가 표준화된 형태를 가지고 있지 않는 상황에 도달했습니다. 설계 사양이 디자인 시스템의 의도에 쉽게 매핑되지 않아 디자인과 개발 간의 연속성이 부족했습니다."

이러한 단절로 인해 시작된 작업들 간에 편차가 생겼습니다. 처음에는 잘못된 테두리가 있는 버튼, 너무 어두운 구분선, 몇 픽셀 차이로 맞지 않는 간격 등 미묘해 보이는 영향이었으나, 이러한 디자인-개발 불일치는 심각한 부담과 분산된 사용자 경험으로 빠르게 이어졌습니다.

"그런 오류가 발견되면 QA 담당자가 해당 오류를 태그 처리한 다음 티켓을 생성하고 프론트엔드를 다시 구축합니다."라고 Aiden은 말합니다. "그 문제를 해결하는 데 소요되는 시간과 전환 비용은 새로운 기능 개발 측면에서 고객에게 제공할 수 있는 결과에 실질적 영향을 미칩니다."

불확실한 업무 흐름과 팀 간의 갈등이 심화되면서 Aiden은 이러한 실수들이 사용자 경험에 대규모로 영향을 미치기 전에 변화가 필요하다는 것을 알았습니다.

해결책: 변수와 Dev Mode의 적용

Customer.io는 Figma의 최신 기능을 받아들여 디자인 시스템을 업데이트하기 시작했습니다. "시작 신호는 Config 2023이었습니다. Dev Mode와 변수들이 출시되었고, 저는 '바로 이게 내가 기다려온 도구야'라고 생각했습니다"라고 Aiden이 말합니다. 제품 디자인 팀은 색상, 간격, 글자 크기, 테두리 반경, 타이포그래피 스타일을 지원하기 위해 Figma에서 변수를 설정했습니다. 이제 개발자들은 더 이상 열 사이 간격의 정확한 픽셀 수나 올바른 색상 코드를 추측하는 게임을 하지 않습니다.

변수를 통해 팀은 처음부터 디자인 속성을 표준화할 수 있었습니다. "개발자는 디자인에 대해 자신만의 해석을 할 걱정을 할 필요가 없습니다. 사양이 60~70% 정도 앞에 제시되어 있다면 새로운 개발자가 모형을 실제 구현으로 전환하는데 도움이 될 것입니다"라고 Aiden은 말합니다. 이러한 일관된 프레임워크가 이제 자리를 잡으면서 개발자는 오류를 줄이고 프로세스를 더 빠른 속도로 진행할 수 있습니다.

또한 Dev Mode의 도입은 Customer.io의 업무 흐름에 큰 변화를 불러왔습니다. "무엇이 구축될 준비가 되었는지 파악하는 측면에서 일이 많을 수 있습니다"라고 Aiden은 얘기합니다. "Dev Mode에서는 주석을 통해 디자이너가 특정 섹션을 강조 표시할 수 있어서 개발자가 바로 작업에 착수할 수 있습니다."

영향: 디자인 및 Dev 팀이 효율성의 새로운 기준 설정

새로운 디자인-개발 핸드오프는 팀의 생산성에 기여해 왔습니다. 디자인 파일이 이제 주석 처리되어 있어, 개발자들이 쉽게 검사하고 기본 구조를 이해하며 즉시 구현을 시작할 수 있습니다.

이 속도의 개선은 디자인 팀에게도 결국 그대로 돌아옵니다. "디자이너는 성장 마인드를 가지고 있습니다"라고 Customer.io의 브랜드 스튜디오 책임자인 Rennie Abraham은 말합니다. "디자이너들은 반복하고, 테스트하고, 조정할 수 있습니다. 여섯 달 동안 두세 개의 큰 랜딩 페이지를 작업하고 이것이 비즈니스 목표를 달성할 수 있을지 모르는 상황과는 다릅니다. Figma만큼의 협업과 혁신 정신을 가진 곳은 많지 않습니다."

변수와 Dev Mode를 활용함으로써 Customer.io 팀은 내부 프로세스를 개선했을 뿐만 아니라 MarTech 업계에서 디자인 중심의 리더로 자리 잡았습니다. 파일을 Ready to Dev로 표시하면 디자이너가 세부 사항과 수정 사항을 더 쉽게 추적할 수 있어 개발자 팀원과 함께 작업을 더 높은 수준의 완성도로 전달할 수 있습니다. 이러한 수준의 개선에 대한 회사의 노력을 통해 사용자들은 제품이 고객 커뮤니케이션을 변화시킬 수 있다고 신뢰하게 됩니다.

"우리는 고객에게 소비자 수준의 UX 및 UI 세련미를 제공하는 데 전적으로 집중하고 있습니다"라고 Aiden은 말합니다. "디자인과 엔지니어링 환경을 연결하는 측면에서 이것이 바로 우리에게 경쟁 우위를 제공하는 기반입니다."

Customer.io는 팀이 디자인-개발 핸드오프를 간소화했을 때의 긍정적인 결과를 보여주는 좋은 예입니다. 최종 결과는 효율성과 더 나은 사용자 경험을 촉진할 뿐만 아니라 창의적인 혁신의 새로운 기회를 제시합니다. 이 협력적인 접근 방식을 통해 팀은 사용자에게 고객을 참여시킬 통찰력 있는 데이터를 제공하는 디자인 중심 솔루션을 계속하여 구축할 것입니다.