당신은 디자인 사일로에 갇혀 있습니까? - 인디고.디자인 백서

디자인 사일로에서 벗어나기: 디자인 투 코드

2010년 Sketch가 공식 출시된 이래, 소프트웨어 디자인 툴은 애플리케이션 디자인 방식을 크게 변화시켜 왔습니다. 디자인을 디지털 방식으로 더 간단하고 빠르게 만들고, 클라우드에서 다른 디자이너 및 사용자와 공유하고, 궁극적으로는 작동하는 프로토타입으로 전환하는 것을 훨씬 수월하게 만들었습니다.

하지만 디자인은 디자인/프로토타입을 실제로 작동하는 애플리케이션으로 전환하는 과정에서 하나의 단계에 불과합니다. 문제는 많은 디자인 제품이 사용자를 “디자인 사일로”에 갇히게 만든다는 점입니다 — 프로토타입은 있지만, 이를 완성된 앱으로 전환할 원활한 프로세스가 없는 것입니다. 그리고 전통적인 디자인-개발 핸드오프는 오랫동안 소통 오류, 지연, 실수로 골머리를 앓아 왔습니다.

그렇다면 무엇이 필요할까요? 디자이너와 개발자가 각자 선호하는 툴 — 디자이너에게는 Sketch나 Figma, 개발자에게는 Visual Studio나 선호하는 IDE — 을 그대로 사용하면서도, 표준화된 툴 체인 또는 플랫폼 전반에 걸쳐 툴링의 통합/확장성을 제공하는 디자인 투 코드 프로세스입니다.

그 결과: Sketch나 Figma 파일 같은 정적 디자인/프로토타입을 가져와 개발자와 함께 작업하여 Angular나 Blazor로 프로덕션 준비가 완료된 코드를 신속하게 생성할 수 있게 됩니다. 이 백서에서는 이러한 디자인 투 코드 통합에 대해 자세히 설명합니다.

디자인 사일로란

Sketch의 공식 출시 이후, 소프트웨어 디자인 툴은 앱을 디자인하고 프로토타입을 구축하는 더 빠르고 효율적인 방법을 제공하도록 진화해 왔습니다. Figma, Adobe XD, Zeplin 등은 Sketch에 도전장을 내민 대표적인 툴들입니다.

한 가지 관점에서 보면 이러한 툴들은 앱 제작 과정을 개선하는 데 극적으로 기여했습니다. 하지만 디자인부터 코드까지 완전한 애플리케이션을 구축하는 데 필요한 전체 프로세스를 종합적으로 살펴보면, 이들은 문제의 일부만 해결할 뿐이며 사용자를 이른바 “디자인 사일로”에 남겨 놓습니다.

디자인 사일로란 무엇을 의미할까요?

디자인은 디지털 제품 디자인 프로세스에서 하나의 단계에 불과하며, 이 프로세스에는 목표 사용자의 요구를 충족하는 작동 애플리케이션을 구축하는 데 필요한 모든 것 — 화면 디자인, 사용자 플로우, 공동 편집, 사용자 테스트, 디자인 시스템, 프로토타이핑, 코드 생성 등의 조합 — 이 포함되어야 합니다. 이는 디자인 투 코드라고도 불립니다.

이 디지털 제품 디자인 플랫폼의 구성 요소는 아래 다이어그램에 나와 있습니다.

Infragistics는 App Builder™라는 완전한 디지털 제품 디자인 플랫폼을 출시했습니다. 초기 내부 테스트 결과, 이러한 모든 요소가 하나의 통합 플랫폼에 포함되었을 때 앱을 최대 10배 더 빠르게 구축할 수 있는 것으로 나타났습니다.

완전한 디자인 투 코드 프로세스를 고려할 때, 오늘날의 디자인 툴들이 어떻게 사용자를 디자인 사일로에 가두는지 살펴보겠습니다.

Sketch

Figma

Adobe XD

Zeplin

Mac 전용
사용자 테스트 없음
코드 생성 없음
제한된 협업

사용자 테스트 없음
코드 생성 없음

사용자 테스트 없음
코드 생성 없음
제한된 협업

프로토타이핑 없음
사용자 테스트 없음
코드 생성 없음
제한된 협업

보시다시피, 이러한 디자인 소프트웨어 툴들의 대부분은 사용자 테스트 기능이 부족하고, 협업 툴도 제한적이며, 그 어느 것도 코드 생성 기능을 제공하지 않습니다 — 오랫동안 이어져 온 디자인-개발 핸드오프 문제를 해결하지 못하고 있는 것입니다.

디자인 사일로에서 벗어나기

애플리케이션 리더는 디지털 제품 디자인 플랫폼의 핵심 기능을 이해하고, 화면 디자인부터 코드 생성에 이르는 모든 과정을 아우르는 툴을 도입해야 합니다.

Gartner, Technology Insight for Digital Product Design Platforms1

앞서 언급했듯이, 디자인 투 코드 솔루션은 디자인 사일로에서 벗어나 오랜 세월 앱 제작 속도를 늦춰온 고질적인 병목 현상을 해결해 줍니다 — 디자인과 개발 간 협업을 저해해 온 느리고, 오류가 많으며, 답답한 핸드오프 문제를 극복함으로써 말입니다.

App Builder와 같은 디지털 제품 디자인 플랫폼을 사용하면, 디자인 팀과 개발 팀이 하나의 플랫폼에서 공통 디자인 시스템을 공유하며 작업할 수 있어 앱 구축 속도가 크게 향상됩니다. 디자이너와 개발자는 화면 디자인과 프로토타입을 공유하는 등 쉽게 협업할 수 있으며, 코드가 생성되기 전에 실제 컴포넌트를 사용한 실제 코드나 애플리케이션을 직접 확인할 수 있습니다. 이를 통해 번거로운 핸드오프 과정이 사라지고, 답답함이 줄어들며, 완성된 애플리케이션이 제품 관리자, 디자이너, 개발자 모두의 기대를 충족하게 됩니다.

다음은 디지털 제품 디자인 플랫폼이 제공해야 할 몇 가지 구체적인 기능입니다.

• 유연한 디자인 시스템 – 소프트웨어 애플리케이션 구축 시 재사용하거나 상황에 맞게 조정할 수 있는 소프트웨어 컴포넌트에 매핑되는 UX 패턴 및 브랜드 스타일 가이드라인 목록.

• Sketch나 Figma와 같이 디자이너가 선호하는 벡터 디자인 툴과 연동되며, Figma에 대한 완전한 지원도 곧 제공될 예정입니다.

• 모든 프로토타입에 대해 스레드형 댓글 기능을 갖춘 안전한 작업 공간을 통해 팀, 이해관계자, 고객과 함께 디자인 반복 작업을 협업할 수 있습니다.

• 실시간 분석 기능을 갖춘 무제한 원격 및 비중재 사용자 테스트.

• 디자인에서 CSS, 색상, 크기/위치 코드를 얻을 수 있는 검사 툴(Zeplin과 유사).

• 실시간 코드 미리보기와 Angular 및 Blazor용 코드 생성을 지원하는 WYSIWYG 앱 디자인 및 구축 기능이며, 곧 React와 Web Components도 지원할 예정입니다.

디자인 투 코드는 로우코드 위에서 구축됩니다

디자인 투 코드 솔루션은 로우코드 운동의 일부입니다. 로우코드 툴이 수천 줄의 코드를 작성할 필요를 없애주는 것처럼, 디지털 제품 디자인 플랫폼은 화면 디자인, 사용자 플로우, 코드 생성에서 시간과 답답함, 잠재적인 UX 버그를 제거해주는 빌딩 블록을 제공합니다.

다음은 로우코드 툴이 규모를 막론한 모든 기업과 조직에 얼마나 극적인 영향을 미칠지 보여주는 스냅샷입니다.

디자인 투 코드 플랫폼

디자인에서 코드로 가장 빠르게 전환하는 방법을 원하고 사용자 테스트와 같은 초기 단계 기능에는 관심이 없는 디자이너와 개발자를 위해, App Builder를 사용하면 정적인 Figma 또는 Sketch 디자인을 가져와 실제 UI 컴포넌트와 스타일링을 갖춘 인터랙티브하고 반응형인 앱을 얻을 수 있습니다. App Builder는 로우코드 기반 클라우드 WYSIWYG 드래그 앤 드롭 툴로, 디자이너가 프로토타입을 완성한 후 개발자가 실시간으로 소스 코드를 미리 볼 수 있게 해줍니다. 준비가 되면 개발자는 Angular나 Blazor로 프로덕션 준비가 완료된 코드를 신속하고 손쉽게 생성하여 GitHub 저장소에 업로드하거나 Visual Studio Code 또는 선호하는 IDE에서 실행할 수 있습니다.

디자인 투 코드의 속도를 원하면서도 화면 디자인, 사용자 플로우, 프로토타이핑, 사용자 테스트에 좀 더 집중하고 싶은 디자이너라면, 로우코드 App Builder를 사용할 수 있습니다.

1분 이내에 아이디어를 코드로 전환하는 방법을 확인하려면 데모를 위해 지금 문의하기를 클릭하거나, Sketch 벡터 디자인을 사용 가능하고 테스트 가능하며 업데이트 가능한 Angular 코드로 전환하는 이 짧은 동영상을 시청해 보세요!

출처

1. Gartner, “Technology Insight for Digital Product Design Platforms,” November 24, 2020, Brent Stewart, Van Baker, Magnus Revang
2. Gartner forecast, February, 2021