HP가 Dev Mode로 디자인에서 코딩까지의 과정을 1.5시간 단축한 방법

전자 제품 분야의 진정한 강자인 HP는 프린터, 노트북, 게임 시스템 등의 분야에서 기술을 개척해 왔습니다. 실제로 HP가 소박하게 사업을 시작한 팔로알토의 한 차고는 이제 “실리콘 밸리의 발상지”로서 캘리포니아의 역사적 랜드마크가 되었습니다. HP는 다양한 제품군을 보유하고 있고, 각각 고유한 고객층을 가지고 있기 때문에 모든 고객에게 일관된 경험을 제공하는 것이 어려웠습니다. 특히 회사가 지속적으로 혁신하고 있는 상황에서는 더욱 그러했습니다. 바로 이 지점에서 HP의 디자인 시스템인 Veneer가 중요한 역할을 했습니다. Figma는 HP의 디자인 시스템 관리팀과 함께 다음과 같은 성과를 어떻게 이뤄냈는지 알아보았습니다.

• 다층적 디자인 시스템을 구축하여 70개 이상의 제품을 지원하고 팀의 사일로 현상을 타파
• Dev Mode를 사용하여 개발자와 디자이너가 주당 평균 98분 절약
• Code Connect를 구현하여 Veneer 도입률을 높이고 개발자의 작업 환경 전환 빈도 감소
• Veneer를 통해 연간 500%의 시간 절약 및 개발 시간 50% 단축

팀을 소개해 주세요. 그리고 HP가 제품 품질을 보장하기 위해 어떤 노력을 기울이고 있는지 알려주세요.

HP 디자인 시스템 전략가 Gilson Hoffmeister: 저희 팀은 HP 디자인 시스템 경험을처음부터 끝까지 관리합니다. 디자인 지원부터 Android, iOS, Windows, 웹과 같은 특정 플랫폼까지 모든 것을 담당하고 있죠.

우리는 HP의 모든 팀이 모든 고객에게 일관적으로 높은 품질의 뛰어난 경험을 효율적으로 제공할 수 있도록 지원하는 것이 목표입니다. 하지만 HP는 100개 이상의 다양한 제품 라인을 보유한 대기업이기 때문에 이를 달성하기란 쉽지 않죠. 각 HP 제품에는 고유한 DNA가 있습니다. 비즈니스용 PC의 경우, 사용자가 일상적으로 사용할 수 있는 우아하고 기능적인 제품이어야 합니다. 사용자의 신뢰를 얻어야 하죠. 게임용 액세서리의 경우에는 사람들이 당당하게 착용하고 자랑할 수 있을 만큼 재미있고 품질이 뛰어나야 하고요.

HP의 선임 디자인 관리자 Andrei Garcia: HP는 여러 사업부가 개별적으로 업무를 진행하고 각자의 요구 사항에 집중하다 보니 어려움이 있었습니다. 각 사업부는 HP가 디지털 세상에서 어떤 존재감을 가져야 하는지에 대해 별다른 고민 없이 개별적으로 작업하는 경우가 많았어요. 일부러 그런 것은 아니었지만 우리는 모두를 하나의 공통된 기준을 바탕으로 모아야 했습니다.

HP의 디자인 시스템인 Veneer를 소개해 주시겠어요?

Gilson: HP의 최우선 목표는 고객 만족입니다. Veneer를 사용하면 모든 소프트웨어의 일관성을 유지하고 함께 잘 작동하도록 할 수 있죠. 모든 사람이 동일한 디자인 지침을 사용하도록 하여 다양한 고객에게 더 편리한 경험을 제공합니다.

Andrei: Veneer는 디자이너, 개발자, 작가 등 모두가 작업을 시작할 수 있는 기준선을 제공하며 소프트웨어 개발 프로세스 전반을 지원합니다.처음에는 그저 “프론트 엔드 구성 요소 라이브러리”로 시작했지만 이제는 시간을 절약하고 중복 작업을 방지하며 통일성을 높이는 다각적인 시스템으로 발전했어요.

Veneer 도입률을 어떻게 측정하고 있나요?

Gilson: 정량적 지표와 정성적 지표를 혼합하여 Veneer 도입률을 측정하고 있어요. Figma의 라이브러리 애널리틱스에서 참여 데이터를 분석하고 개발 패키지의 다운로드를 추적하여 시스템이 얼마나 광범위하고 효과적으로 사용되고 있는지 인사이트를 얻습니다. 일례로 아이콘 라이브러리에서 HP의 320개 팀이 915개의 아이콘 컴포넌트를 사용하고 주당 평균 85,000회 삽입하고 있다는 것을 확인할 수 있는데, 이는 광범위하게 사용되고 있다는 증거라고 볼 수 있죠. 재미있게도 줄임표 아이콘이 120만회 이상 삽입되면서 가장 많이 사용되었더라고요.

Veneer 도입을 추진하는 것이 중요한 이유는 무엇인가요?

Gilson: Veneer 사용이 중요한 이유는 제품 개발 프로세스가 더 빨라지고 HP 전사에서 모든 것이 일관성을 유지할 수 있기 때문입니다. Veneer를 사용하면 디자이너와 개발자는 작업을 시작할 기반을 갖출 수 있어요. 컴포넌트를 처음부터 만들려면 시간이 많이 소요되는데, 그런 부담을 덜 수 있는 거죠. 다양한 컴포넌트 상태와 접근성 최적화가 이미 구축되어 있어, 팀은 우리가 이미 Veneer에서 테스트한 것들을 다시 개발하고 검증할 필요가 없습니다. 덕분에 중요한 업무를 더 깊이 고민하고, 전달해야 할 사안에 집중할 수 있습니다.

Gilson: 일례로 2023년 1월부터 12월까지 컴포넌트 제작에 소요된 시간을 비교했을 때 Veneer를 사용한 경우 프로젝트에서 500%나 더 많은 시간을 절약할 수 있었어요. 각 프로젝트에서 동일한 시간을 들여 컴포넌트를 직접 제작하는 대신 Veneer에서 미리 제작된 컴포넌트를 사용했습니다. 이는 Veneer가 비용을 절감하고 효율성을 개선하는 데 얼마나 큰 도움이 되었는지 보여주며, Veneer에 대한 투자가 5배 더 가치 있게 느껴졌죠.

Andrei: 팀이 Veneer를 사용하지 않으면 제품의 일관성과 확장성, 개발자의 효율성이 크게 저하됩니다. 엔지니어링 부문 부사장인 Gaurav Roy에 따르면, 특정 프로젝트에서 Veneer를 사용한 결과 개발 시간이 50% 단축되었어요. 이 평가 지표는 아예 처음부터 시작할 때보다 디자인 시스템을 사용하면 간단한 양식의 개발 시간이 47% 단축된다는 IBM 연구와 같은 외부 비교 결과와도 일치합니다.

Dev Mode 이전에, Veneer 도입을 추진하면서 경험한 어려움이 있었나요?

Andrei: HP가 수많은 하위 브랜드를 보유하고 있다는 게 큰 문제였어요. 단일 계층 디자인 시스템으로는 이 시나리오를 지원하는 것이 불가능했기 때문이에요. 여러 가지 브랜드 전략을 지원할 수 있을 만큼 유연하게 Veneer를 구성하는 데 시간이 오래 걸렸습니다. 도입을 다양한 수준으로 세분화 하지 않는 한 다양한 제품과 세그먼트에서 통일성과 일관성을 유지할 수 없었습니다.

Gilson: 디자이너는 제품과 사용자를 매우 각별하게 여기기 때문에Veneer를 사용하도록 유도하는 것이 쉽지 않았습니다. 외부에서 자신들이 만든 제품에 손을 대려고 하면 사용자와의 관계를 해칠 수 있다고 생각하기 때문에 경계하게 되거든요.

가장 큰 어려움은 사람들에게 통합된 디자인 시스템이 얼마나 도움이 될 수 있는지 증명하는 것이었어요. 많은 사람들이 사용할 컴포넌트 또는 선택할 색상 등 디자인을 스스로 결정하는 데 익숙해져 있었습니다. 이러한 작업에서 벗어나 Veneer를 사용하면 비즈니스 로직, 디자인 패턴과 같은 창의적이고 특별한 부분에 더 집중할 수 있다는 것을 보여줘야 했습니다.

개발자들은 코드 재사용의 이점을 이해하고 있었기 때문에 Veneer를 더 쉽게 받아들였습니다. 하지만 HP 내에서 사용하는 40개 이상의 UI 프레임워크와 프론트 엔드 기술 전반에서 Veneer가 효과적인지 확인해야 하는 과제에 직면했죠.

HP의 팀들은 자체 디자인 시스템에서 Dev Mode를 어떻게 사용하고 있나요?

Dev Mode는 개발자가 Figma 내에서 이러한 디자인 사양에 액세스하는 방식을 간소화했습니다. 광범위한 상호간의 논의와 회의 필요성을 줄이고 디자인에서 코드로의 전환을 그 어느 때보다 원활하게 만들었죠

Andrei: 일례로 우리는 알약 모양의 컴포넌트 지원을 추가했고, 이에 따라 패딩과 여백을 조정해야 했습니다. Dev Mode에서 어노테이션 기능을 사용하니, 디자이너가 개발팀에 업데이트 내용을 전달하기가 더 쉬워졌고, 작업 흐름도 더 원활해졌습니다.

변경 사항 비교 기능은 특히 기존 제품을 업데이트할 때 한 디자인 버전에서 다른 버전으로 변경된 내용을 확인하는 데 매우 유용합니다. 모든 사람이 같은 정보를 공유할 수 있어서 업데이트가 더 원활하게 진행되죠.

또 다른 장점은 디자인의 일부를 “개발 준비 완료”로 표시할 수 있다는 거예요. 개발자에게 정확히 어떤 작업을 해야 하는지 알려줄 수 있어서 혼란이 줄어들고 모두가 작업 완료에 집중할 수 있습니다.

여러 제품을 서비스하는 데 있어 발생하는 문제를 해결하기 위해 Dev Mode에서 변수를 어떻게 활용하고 있나요?

Andrei: 프리미티브 토큰이나 시맨틱 토큰에 연결된 변수를 사용하는데, 이는 라이트, 다크, 고대비 등 다양한 테마와 모드 전반으로 멋지게 확장됩니다.

더 중요한 것은 이러한 변수가 디자인 요소와 코딩 환경 사이에 중요한 연결 고리를 형성한다는 점입니다. 파운데이션팀은 자동화로 디자인에서 코딩으로 전환하는 과정을 간소화하는 등 Veneer의 핵심 요소를 관리하죠. 그리고 Figma API를 사용하여 디자인에서 직접 변수를 읽어 디자인과 개발을 연결하는 강력한 연결 고리를 성공적으로 구축했습니다. 즉, 디자인에 사용된 변수가 코드로 1:1 변환되어 디자이너와 개발자가 말 그대로 동일한 언어를 사용할 수 있죠.

이러한 동기성은 개발 프로세스를 간소화할 뿐만 아니라 팀 간의 커뮤니케이션을 강화하여 디자인 사양을 보다 정확하게 구현할 수 있게 해줍니다. 디자인 요소와 코드가 직접적으로 대응하여 불일치를 크게 줄이고 디지털 제품의 전반적인 품질과 확장성을 개선합니다.

Code Connect의 얼리 어답터로서 지금까지의 경험을 공유해 주시겠어요?

Gilson: Code Connect는 가장 기대했던 기능입니다. 엔지니어 한 명이 2주 만에 작업을 끝낼 정도로 설정도 매우 쉬웠습니다.

시간을 더 절약하기 위해 컴포넌트 변경과 같은 작업 과정을 더 많이 자동화하고 있습니다. 예를 들어 모든 아이콘이 “편집 가능한” 버전(여러 레이어, 선, 직사각형, 원 등 다양한 요소 사용)으로 되어 있는 소스 파일이 있다고 해보죠. 자동화로 소스 파일의 변경 사항을 확인합니다. 여기서 변경 사항을 간소화하고 SVG 코드가 포함된 사전을 생성하여 아이콘 Figma 라이브러리를 만드는 데 사용한 다음 개발팀과 공유하여 개발 라이브러리에 추가합니다. 소스 파일에 아이콘이 추가될 때마다 자동으로 아이콘 라이브러리와 Code Connect에 추가되고 개발 라이브러리로 전달됩니다.

Gilson: 우리는 각 컴포넌트에 대한 설명서가 포함된 거대한 웹사이트를 운영하고 있어요. 여기서 개발자가 속성을 확인하고 코드 스니펫이 포함된 라이브 시연 영상을 얻을 수도 있습니다. 이전에는 코드 스니펫을 찾으려면 웹사이트로 이동해야 했기 때문에 시간이 낭비되었죠. 이제 Code Connect 덕분에 Figma에서 컴포넌트를 클릭하기만 하면 모든 올바른 설정이 포함된 코드 스니펫을 확인할 수 있습니다. 이로 인해 Veneer를 개발하고 통합하는 속도가 정말 빨라졌어요.

Andrei: Code Connect는 디자이너에게도 큰 도움이 되었어요. 코딩이 어떻게 작동하는지 더 잘 이해할 수 있어서 보다 정확한 프로토타입을 제작할 수 있게 됐는데, 이는 Figma의 프로토타입 제작 기능만으로는 해낼 수 없는 일이었어요.

Dev Mode에 대한 팀의 반응은 어땠나요?

Gilson: HP에서 Dev Mode를 사용하는 400명을 대상으로 설문조사를 실시했는데, 참여자 대부분이 개발자였어요. 설문조사에 대한 피드백은 압도적으로 긍정적이었습니다. 한 개발자는 ‘Dev Mode 덕분에 일상적인 작업에 소요되는 시간이 줄어들어 기능 향상에 집중할 수 있게 되었다’고 말했고, 또 다른 개발자는 ‘코드 스니펫을 직접 생성하고 사용할 수 있어 개발 주기가 상당히 빨라졌다’고 답했습니다.

또한 올바른 코드 스니펫을 얻기 위해 작업 환경을 변경하고 다른 웹사이트로 이동할 필요가 없어 1인당 일주일에 평균 98분을 절약할 수 있었습니다.

이 수치는 대부분의 팀이 Dev Mode를 도입한 후 작업 흐름이 크게 개선되었으며, 상당수의 팀이 작업 효율성, 속도 및 품질이 향상되었다고 답했음을 분명하게 보여주죠. 이러한 정량적 피드백은 Dev Mode의 실질적인 이점을 강조하여 HP의 제품 개발 과정에 제공하는 가치를 더욱 확고히 합니다.

Andrei: Dev Mode 덕분에 사고 방식에도 큰 변화가 생겼어요. 이러한 변화는 디자이너와 개발자가 같은 언어를 사용하도록 지원하고 제품 개발 과정을 개선하는 데 도움이 됩니다. 핸드오프라는 개념이 사라지고 이제 사람들이 디자인에서 개발까지의 작업 흐름에 대해 이야기하기 시작했습니다. 작업 흐름은 더 유연해졌고 제품 개발 과정은 더 빨라졌습니다.