2023년 디자이너-개발자 핸드오프 가이드

스타트업이든, 거대 기술 기업이든, 아니면 그 사이에 있든, 일련의 핸드오프, 왕복 및 반복을 거치지 않고 아이디어에서 제품 출시까지 제품을 가져오는 것은 사실상 불가능합니다.

마찰의 주요 원인은 디자이너와 개발자가 전통적으로 제품을 만들 때 매우 다른 작업을 수행한다는 것입니다. 따라서 가장 성숙한 제품 팀조차 종종 괴롭히는 한 가지 핸드오프는 디자이너와 개발자 간의 핸드오프입니다.

오늘 우리는 디자인에서 개발로의 핸드오프에 대해 알아보고 다음과 같은 몇 가지 솔루션을 사용하는 방법을 설명하겠습니다.

• 다기능 팀 간의 완벽하고 향상된 커뮤니케이션.
• 풍부한 UI 키트와 개발 기능을 갖춘 자동화 도구를 사용합니다.
• 팀이 빠르고 쉽게 추적할 수 있도록 모든 디자인 자산이 어디에 있는지와 같은 세부 사항을 명확히 합니다.

따라서 이러한 핸드오프를 처리하는 방법에 대해 모두 배우고 싶다면 이 가이드가 적합합니다.

개발자 핸드오프란 무엇이며 어디에서 이루어지나요?

개발자 핸드오프는 디지털 제품 개발 프로세스에서 가장 중요하면서도 실망스러운 단계인 경우가 많습니다. 즉, 개발자가 구현할 디자인이나 프로토타입이 준비되는 단계입니다.

디자이너-개발자 핸드오프의 문제 중 하나는 용어 자체에 있을 수 있습니다. 'Handoff'는 디자인이 개발자에게 전달되고, 이제 제품에 생명을 불어넣는 것이 개발자의 책임임을 의미합니다. 그러나 사용자가 제품을 사용하기 전까지는 디자인이 완성되지 않습니다. 따라서 디자이너와 개발자가 디자인 및 개발 단계 전반에 걸쳐 의사소통하는 것이 필수적입니다.

기존 워크플로에서 디자이너는 발견 단계와 개발 사이의 사일로에서 작업하여 브리핑을 기반으로 픽셀까지 완벽한 모형을 만듭니다. 그런 다음 클라이언트가 승인한 후 개발자에게 벽 너머로 던졌습니다. 이 과정에는 문제가 많습니다. 디자이너가 완벽하게 측정되고 일관되게 제작되는 디지털 솔루션을 만들기 위해 많은 노력을 기울이더라도 디자인과 디자인 시스템이 개발 시스템으로 유창하게 변환되지 않기 때문입니다.

문제의 일부는 디자이너가 UI에 더 많은 작업을 수행할수록 개발자와 더 많은 커뮤니케이션을 수행해야 한다는 것입니다. 따라서 예를 들어 Sketch 디자인 파일을 넘겨주고 개발자에게 이를 실행하도록 맡기는 것만으로는 충분하지 않습니다. 디자이너는 움직이는 모든 부분의 배치, 간격 지정, 스타일 지정, 색상 지정, 연결 방법 등을 설명하는 디자인 사양을 제공해야 합니다. 이는 앱이 결국 픽셀 단위까지 완벽해지도록 보장하는 유일한 방법이었습니다. 그럼에도 불구하고 개발자가 IDE에 들어가면 여전히 많은 구현이 필요합니다.

개발자는 일반적으로 HTML과 CSS로 코딩하는 습관이 없습니다. 이는 지루한 작업이며 UI만 표현하는 작업입니다. 웹 앱이 작동하도록 만드는 이면에는 훨씬 더 많은 코드가 있지만 모든 개발자가 UI 마크업 작성 방법을 배우는 데 능숙하거나 관심이 있는 것은 아닙니다. 이러한 위치에 강제로 배치되면 가파른 학습 곡선으로 인해 프로젝트에 더 많은 시간이 추가되고 그에 따른 재작업 및 디버깅으로 인해 비용이 통제할 수 없을 정도로 치솟게 됩니다.

디자이너-개발자 커뮤니케이션 개선

수년에 걸쳐 우리는 디자이너와 개발자 사이의 차이점을 면밀히 조사했으며 개선을 통해 더 빠르고, 덜 논쟁적이고, 더 효율적인 핸드오프를 만들 수 있는 영역을 식별했습니다. 좋은 의사소통은 거의 모든 관계에서 핵심이므로 원활한 설계-개발 핸드오프를 위한 요구 사항이라는 것이 합리적입니다. 의사소통이 중단되면 모든 종류의 문제와 오해가 발생할 수 있습니다. 동일한 목표에 대해 서로 다르게 해석하더라도 혼란스럽거나 완전히 나쁜 UX로 이어질 수 있습니다. 그리고 어떤 제품팀도 그럴 시간이 없습니다.

잘못된 디자이너-개발자 커뮤니케이션으로 인해 발생하는 일반적인 문제는 다음과 같습니다.

• 디자이너와 개발자 사이의 불필요한 다중 피드백 루프
• 예상치 못한 품질 보증 문제 또는 예상보다 시간이 많이 걸리는 QA 문제
• 중복되는 기술을 활용할 수 없음
• 협업을 더 쉽게 만들어 줄 새로운 도구를 적절하게 활용하지 못하는 경우.

디자인 시스템 사용

“디자인 시스템은 투자입니다. 많은 회사에서는 디자인 시스템에 집중할 인력이 없어 비효율성이 너무 심해 견딜 수 없을 때까지 채용하지 않습니다.”

– 다이애나 마운터, GitHub

간단히 말해서 디자인 시스템은 소프트웨어 애플리케이션 구축을 위해 재사용하거나 상황화할 수 있는 일치하는 소프트웨어 구성 요소로 실현되는 UX 패턴 및 브랜드 스타일 가이드의 의도적인 목록을 나타냅니다. 콘텐츠 작성, 페이지 템플릿, 사용자 흐름에 대한 음성 및 어조 안내를 포함하도록 디자인 시스템을 확장할 수도 있습니다. 이는 각 조직의 특정 응용 프로그램 도메인 및 사용 상황에 맞게 직접 제작되었습니다. 무엇보다도 이는 애플리케이션을 구축할 때 제품 팀이 정보를 얻을 수 있는 단일 소스 역할을 하며 설계와 개발 간의 협업 계약을 나타냅니다.

디자인 시스템이 없으면 디자이너는 자신의 작업을 제한하는 명확한 매개변수를 가질 수 없습니다. 너무 창의적이어서 불일치를 만들어 사용자 경험이 좋지 않고 개발자에게 좌절감을 줄 수도 있습니다. 이 모든 것이 핸드오프 프로세스를 방해합니다.

개발자의 조기 참여 확보

앞서 언급했듯이 팀에서 흔히 저지르는 실수는 디자이너가 작업을 먼저 수행하기를 기다린 다음 제품 디자인을 개발자에게 전달하는 것입니다. 이는 혼란스러울 뿐만 아니라 약간 거만하기도 합니다(“자, 이제 끝났습니다. 안녕!”).

보다 성공적인 핸드오프를 위해서는 다음 단계를 통해 개발자를 조기에 참여시키는 것이 가장 좋습니다.

• 초기 아이디어 논의에 프로젝트의 수석 개발자(또는 최소한 UI 개발자)를 포함시킵니다.
• 화면 디자인과 상호 작용 디자인이 논의되는 모든 회의에 개발을 포함시킵니다.
• 대행사에 있는 경우 고객과의 전화 회의에 개발 내용을 포함하세요.
• 디자인 요소가 웹 애플리케이션이나 모바일 애플리케이션과 데스크톱 애플리케이션으로 어떻게 변환될 것인지에 대해 개발자로부터 통찰력을 구합니다.
• 초기 디자인 아이디어를 개발자보다 앞서 실행하므로 조정하기가 더 쉬울 때 코드 관련 잠재적인 문제를 식별할 수 있습니다.

점심 식사 또는 원격 모임

모든 사람이 사일로에서 일하도록 두는 대신 최소한 가끔은 모두를 한자리에 모으십시오. 팀 전체가 함께 점심을 먹도록 격려하는 것은 자발적인 아이디어 공유를 향한 중요한 단계입니다. 또한 물리적으로 가능하다면 동일한 기능을 수행하는 팀원들을 같은 공간에 함께 배치하는 것을 고려해보세요.

디자이너와 개발자가 서로 다른 위치에서 작업하는 경우 수시로 가상 회의를 설정하고 작업 진행 상황에 대해 논의할 수 있도록 하세요. 약간의 인간 상호 작용이 작업 환경과 제품 결과에 미치는 영향은 놀랍습니다.

또한 완전한 디자인-코드 시스템을 통해 프로세스 초기에 디자이너와 개발자의 참여가 어떻게 극적으로 향상될 수 있는지 간략하게 논의할 것입니다.

디자인 파일 및 필요한 모든 자산 제공

각 디자이너의 책임 중 하나는 개발자가 성공할 수 있도록 준비하는 것입니다.

이를 달성하는 데 도움이 될 수 있는 첫 번째 방법 중 하나는 개발자에게 필요한 모든 디자인 파일과 자산을 제공하는 것입니다. 계획으로 돌아가세요. Dropbox, Google Drive 또는 기타 도구를 통해 모든 작업을 수행하는 데 동의하셨나요? 해당 자산이 어디에 있는지 알리고 누락된 부분, 질문 또는 우려 사항을 해결하기 위해 의사소통 라인을 열어두십시오.

핸드오프 미팅을 가집니다

핸드오프 회의를 갖는 것은 디자인 팀과 개발 팀 간에 적절한 핸드오프를 실행하는 가장 효과적인 방법 중 하나입니다. 이는 모든 것을 공개하고, 긴급한 질문에 답하고, 팀 전체가 앞으로의 작업에 대해 흥미와 동기를 부여할 수 있는 좋은 방법입니다. 양측의 특이한 점과 질문을 정리하고 개발, QA 및 출시 단계에 어떤 일이 일어날지 준비하세요. 명확한 타임라인과 기대치를 설정하고 각 단계가 결승선을 통과하도록 담당하는 특정 개인의 이름을 지정합니다.

배울 수 있는 새로운 자원을 제공하여 기본 기술과 개념에 대한 상호 이해를 장려하는 것을 고려하십시오. 예를 들어, 일부 디자인을 기능 코드로 변환할 수 없는 이유를 더 잘 이해하기 위해 디자이너가 코딩의 기본을 배우도록 자극합니다. 동시에 개발자가 디자인에 대해 더 많이 배우고 다양한 디자인 요소가 사용되는 방법을 배우는 데 도움이 됩니다.

Figma 개발자 핸드오프

Figma와 같은 도구는 간소화된 개발자 핸드오프를 약속하지만 실제로는 그렇지 않습니다. Figma 개발자 핸드오프 또는 Sketch 개발자 핸드오프의 문제점은 개발자에게 실제로 중요한 일 중 가장 덜 복잡한 부분을 수행하고 있다는 것입니다. 개발자 핸드오프 도구에서 개발자의 목표는 개발 시간을 최소화하고 복잡한 UI의 코딩 시간을 단축하며 팀 생산성을 가속화하는 것입니다. Figma 또는 Sketch에서 이러한 개발자 핸드오프 방식의 대부분은 순전히 화면의 특정 UI 요소에 대한 HTML 또는 CSS(또는 "마크업")의 복사/붙여넣기입니다. 개발자는 여전히 레이아웃, UI 요소 위치 지정, 디자인 도구에서 "전달된" UI 요소 코드가 올바른지 확인하는 등 복잡한 화면 코드를 작성해야 합니다.

Figma 또는 Sketch에서 개발자 핸드오프의 일반적인 예

​로우 코드 App Builder ™를 사용하면 Figma 개발자 핸드오프 또는 Sketch 개발자 핸드오프와 동일한 개념을 얻을 수 있지만 계속 읽어보면 우리 도구가 이 개발자 핸드오프를 다른 수준으로 끌어올리는 것을 볼 수 있습니다.

App Builder에서 코드 마크업/빨간색 선 도구가 어떻게 보이는지에 대한 예입니다.

App Builder 개발자 핸드오프

앞서 간략하게 언급했듯이 설계에서 개발자로의 전달을 개선하는 핵심 부분은 설계를 효율적으로 HTML 코드로 변환하는 것입니다. 많은 디자인 플랫폼은 거의 독점적으로 디자인 부분에만 초점을 맞춘 다음 플러그인 및 기타 해결 방법을 사용하여 개발자를 위한 디자인 파일을 준비합니다.

하지만 디자인-코드에 초점을 맞춘 전체 플랫폼, 즉 디자인과 프로토타이핑을 허용할 뿐만 아니라 단 한 번의 클릭으로 완전한 픽셀 수준의 Angular 코드를 생성할 수 있는 단일 디지털 개발 플랫폼이 있다면 어떨까요?

Sketch 예로 들면 어떤 모습일까요?

App Builder 및 Sketch 용 UI 키트를 사용하면 Sketch (Figma 에서도 사용 가능)에서 생성하는 모든 항목이 디자인 시스템을 사용하므로 모든 스타일 및 테마 사양이 실제 Angular 구성 요소와 일치합니다. 버튼 하나만 클릭하면 디자인에서 바로 고품질 HTML, CSS 및 Angular 코드를 생성할 수 있습니다.

App Builder 디자인에서 코드로 전환하기 위한 2가지 옵션을 제공합니다.

1. ​Visual Studio Code 플러그인을 사용하여 구성 요소 또는 화면을 선택하고 클라우드 기반 서비스가 코드를 생성하여 기존 Angular 앱에 삽입하도록 합니다.
2. Sketch 파일을 App Builder의 작업 공간으로 직접 드래그하고 WYSIWYG 디자이너를 사용하여 디자인을 계속 편집하거나 클릭 한 번으로 간단히 코드를 얻을 수 있습니다.

개발자가 정말로 원하는 것은 앱에서 즉시 사용할 수 있는 프로덕션 준비 코드입니다.

다음은 Sketch 코드 내보내기의 일부입니다.

• 모든 Sketch 자산은 프로젝트 파일에서 가져옵니다.
• 모든 디자인에 HTML 출력용으로 구조화된 레이어가 있는 것은 아니므로 고품질 HTML 출력을 위해 필요에 따라 디자인 요소를 분석하고 재구성하는 도구를 사용하는 것이 중요합니다.
• 필요에 따라 디자인 요소를 버튼, 입력, 선택과 같은 HTML 요소로 변환하고 수동으로 요소를 시각적으로 편집하고 그룹화하고 구성할 수 있습니다.
• 디자인을 게시하고 다른 사람과 공유하여 모든 사람이 HTML/CSS 출력을 다운로드할 수 있습니다.
• HTML과 CSS에만 의존하며 출력에 Javascript를 사용하거나 가정하지 않습니다. 개발자는 Angular, React, VueJS 또는 기타 프런트엔드 라이브러리와 함께 출력 HTML을 사용할 수 있습니다.

App Builder 코드의 품질 때문에 두각을 나타냅니다. Infragistics는 최근 최고 품질의 UI 구성 요소를 생산하려는 도전에 나선 조니가 아닙니다. 우리는 30년 이상 그 일을 해왔습니다. 우리는 매일 우리의 그리드와 차트를 사용하여 실시간 금융 거래, 대규모 인프라를 위한 전력 변환 또는 IoT 데이터 스트리밍을 처리하는 Fortune 500대 기업을 위한 구성 요소를 구축했습니다.

우리는 사용 가능하고 디버그 가능하며 시간 테스트를 견딜 수 있는 깔끔한 프로덕션 준비 코드를 생성합니다. 그리고 전체 패키지, 디자인 도구 호환성, 디자인 시스템, UI 키트, 프로토타입 제작, 사용자 테스트 및 100% 생산 준비가 완료된 코드 생성 기능을 얻을 수 있습니다.

장벽을 허물다

더 나은 앱을 더 빨리 출시할수록 핸드오프 장벽이 줄어든다는 사실을 기업에서 인식하면서 많은 활동이 일어나고 있습니다. 새로운 접근 방식은 "핸드오프" 개념을 없애고 디자이너와 개발자가 더 일찍, 더 자주 협력하기 시작하는 데 초점을 맞춰야 합니다. 직접 또는 원격으로 모임을 갖고, 더 많이 소통하고, 함께 문제를 해결하고, 배송 시간을 획기적으로 단축하는 설계 시스템 및 설계-코드 소프트웨어와 같은 도구를 사용하십시오. 특히 설계-코드 소프트웨어는 디자이너와 개발자가 참조할 수 있는 한 장소를 제공함으로써 잘못된 의사소통을 줄이고, 오류를 줄이고, 불만 수준을 낮추는 데 도움이 됩니다. 또한 이해관계자, 테스터, 사용자를 포함하여 디지털 제품 디자인 프로세스에 참여하는 모든 사람이 모두가 만족할 수 있는 최종 제품에 보다 쉽고 효과적으로 기여할 수 있습니다.

WYSIWYG App Builder 설계에서 코드까지의 속도를 높이고 개발자에게 실제 설계 약속을 전달하는 데 어떻게 도움이 되는지 알아보려면이 빠른 비디오를 시청 하고 평가판에 등록하거나 아래의 포괄적인 App Builder 제품 개요 및 튜토리얼을 시청하여 학습할 수 있습니다. 기능과 성능에 대해 자세히 알아보고 시작해 보세요.

질문이 있으시면 jasonb@infragistics.com으로 이메일을 보내 논의해 보세요.