2022년 로우 코드를 넘어서기 - Indigo.Design App Builder 백서

디자인과 프로토타입을 코드 생성과 손쉽게 통합하기

로우코드로의 전환은 최근 몇 년간 가속화되어 왔으며, 2030년까지 연평균 성장률(CAGR) 31.3%를 기록할 것으로 예상됩니다(Research and Markets). 하지만 모든 도구가 그렇듯, 개인이나 팀이 새로운 것을 도입하기란 쉽지 않습니다. 디자이너는 자신에게 익숙한 디자인 도구를 사용하고, 개발자는 GitHub나 선호하는 IDE로 작업합니다.

하지만 기존 도구를 그대로 유지하면서, 그 위에 가벼운 도구 하나를 얹어 소프트웨어 제공 속도를 극적으로 개선할 수 있다면 어떨까요?

우리는 디자인-투-코드(design-to-code) 레이어가 기존 디자인 도구(Sketch와 Figma)와 통합되는 동시에, 개발자들이 Visual Studio Code, GitHub 등 원하는 도구를 계속 사용할 수 있게 해주어야 한다고 믿습니다. 이러한 유형의 도구는 Angular와 Blazor의 코드 생성을 통합하고, 업계 최초의 WYSIWYG IDE를 통해 디자이너와 개발자 간의 더 빠른 협업을 가능하게 합니다.

이 백서에서는 다음 내용을 다룹니다.

• 개발 팀이 과부하 상태에 놓이는 이유

• 로우코드 도구만으로는 충분하지 않은 이유

• 애자일과 디자인 스프린트를 통해 디자인-투-코드를 프로세스에 통합하는 방법

• 지금이야말로 디자인-투-코드 도구가 필요한 시점인 이유

과부하에 시달리는 개발 팀

개발 팀은 수년간 넘쳐나는 백로그에 시달려 왔으며, 우리는 2022년 이후 더 많은 조직이 로우코드/노코드 도구를 도입하고 “시민 개발자(Citizen Developer)”가 늘어날 것으로 예측합니다. 최근 App Developer Magazine 트렌드 기사에 따르면, 일반 시민 개발자들이 사용하는 도구가 앱 개발의 다양한 측면을 담당하게 될 것이라고 합니다. 이는 모든 엔터프라이즈 앱을 의미하는 것이 아니라, 복잡한 아키텍처가 필요하지 않거나 엄격한 SLA를 요구하는 미션 크리티컬 앱으로 간주되지 않는 앱들을 뜻합니다. 이 기사는 다음과 같이 말합니다.

디자인에서 코드로 전환할 때 비용과 시간을 절감할 수 있는 가장 큰 기회의 비결은, ‘코드로 전환’하고 그 이후 커스터마이징할 수 있는 잘 설계된 UI 패턴 또는 UI 컨트롤 세트를 사용하는 데 있습니다.

이는 App Builder™와 같은 디자인-투-코드 도구와 잘 맞아떨어집니다. UI 컨트롤 및 공통 UI 패턴에 매핑되는 잘 정의된 디자인 시스템이 바로 엄청난 시간 절감을 가져올 수 있는 지점입니다. 디자인이 곧 코드라면, 디지털 리더들이 직면한 두 가지 큰 과제를 동시에 해결하는 셈입니다.

로우코드 도구만으로는 충분하지 않다

과거를 돌아보면, 기술 리더들은 블랙박스형 코드 생성 애플리케이션에 ‘물린’ 경험이 있습니다. 1990년대와 2000년대에는 많은 ORM류 도구들의 약속이 실제 성과보다 과장된 경우가 많았습니다. 코드가 프로덕션에 사용할 만한 수준이었을지는 몰라도 편집이 불가능했고, 재사용할 수 없었으며, 어떠한 자동화 테스트 제품과도 맞지 않았습니다. 오늘날, 이러한 과거의 유산은 프로덕션에 바로 사용 가능하고 테스트 가능한 코드 출력으로 앱 제공 속도를 진정으로 가속화할 수 있는 더 현대적인 도구들에게 발목을 잡는 요소가 되고 있습니다.

최근 Information Week 기사에서 우리는 로우코드와 시민 개발자가 등장 이래 진화해 왔지만 아직 성장할 여지가 남아 있다고 언급했습니다. 로우코드, 노코드 플랫폼은 실제로 더 발전해야 합니다. 특히 로우코드는 소비자 대상 애플리케이션뿐 아니라 내부용 앱을 제공할 때도, UX와 디자인 전문가로부터의 인풋(그리고 UX 프로세스)을 포함해야 합니다. 코드가 프로덕션에 사용할 만하고 테스트 가능하더라도, 애플리케이션의 경험이 사용자의 기대에 부응하지 못한다면 그 모든 노력은 실패로 끝나게 됩니다.

디자인 팀이 사용자와 이해관계자를 반복적인 디자인 프로세스의 일부로 포함시키고, 개발 팀이 사용 가능한 코드로 얻는 유연성이 결합된다면, 이러한 도구에 대한 인식은 달라질 것입니다. 기술 리더들이 그 가치, 예를 들어 일반적인 앱 개발 주기에서 수 주에서 수개월에 달하는 시간 절감을 확인한다면, 디자인-투-코드 로우코드 도구의 도입은 쉬운 결정이 될 것입니다.

우리 플랫폼은 UI 프로토타이핑, 디자인 시스템, 사용자 테스트, 앱 빌딩과 코드 생성을 통합하고 있는데, 절대 위치로 배치된 컴포넌트를 가진 일련의 Sketch 아트보드조차도 인공지능 휴리스틱을 통해 제대로 된 웹 레이아웃으로 변환됩니다. 이러한 복잡한 문제들이 도구를 통해 성공적으로 해결됨에 따라, 이러한 도구에 대한 신뢰와 의존도는 계속 높아질 것입니다. Gartner와 Forrester의 이전 연구를 살펴보면, 향후 5년 안에 로우코드가 소프트웨어를 구축하는 데 있어 더욱더 기본 선택지가 될 것으로 보입니다. 기업들이 사용자 경험 디자인, 사용자 테스트, 코드 출력의 관점에서 이 문제를 바라보며 이해관계자들에게 더 나은 경험을 더 빠르게 제공하고자 한다면, 기술 리더들은 로우코드 흐름에 맞서기가 점점 더 어려워질 것입니다.

디자인-투-코드를 프로세스에 통합하기

모든 도구가 그렇듯, 개인이나 팀이 새로운 것을 도입하기란 쉽지 않습니다. 하지만 기존 도구를 그대로 유지하면서, 그 위에 가벼운 도구 하나를 얹어 소프트웨어 제공 속도를 극적으로 개선할 수 있다면 어떨까요? Code Magazine 기사인 “Eliminating Waste During Designer to Developer Handoff”에서 우리는 반복적 디자인 스프린트(Iterative Design Sprint)라는 개념을 강조하며, 이를 프로세스에 추가하는 방법, App Builder와 같은 도구를 디자인 스프린트 협업에 활용하는 방법, 그리고 궁극적으로 디자인으로부터 프로덕션 앱에서 사용할 수 있는 코드를 얻는 방법을 소개했습니다.

디자인 스프린트란 새로운 제품, 서비스 또는 기능을 시장에 출시할 때의 리스크를 줄이기 위해 디자인 사고(design thinking)를 활용하는, 시간이 제한된 5단계 프로세스입니다. 우리는 이 개념을 한 단계 더 발전시켜, 이 프로세스를 애자일 개발 프로세스의 스프린트와 동일하게 취급합니다. 개발 프로세스보다 한발 앞선 상태를 유지하면서, 문제를 해결하고, 가정을 검증하고, 프로토타입을 만들고, 기능과 에픽에 대한 사용자 테스트를 수행하는 것이 목표입니다(2주, 3주, 또는 그 이상의 스프린트 주기로 진행될 수 있습니다). 이는 애자일이라는 용어가 애플리케이션 개발자들만이 아니라 디지털 제품 팀 전체를 아우르게 됨을 의미합니다. App Builder는 사용자 테스트, 협업, 개발자용 WYSIWYG 기능을 추가함으로써 기존 도구(Sketch와 Figma 같은 디자인 도구)에 이 레이어를 더할 수 있으며, 동시에 개발자들은 Visual Studio Code, GitHub 등 원하는 도구를 계속 사용할 수 있습니다.

실무에서 디자인 팀은 이해관계자의 피드백과 사용자를 대상으로 한 디자인 테스트 결과를 바탕으로 반복적으로 디자인을 만들어 나갑니다. 사용자 테스트를 동반한 반복적 디자인은 디자인 활동을 개발자보다 한 스프린트 앞서 진행함으로써 애자일 프로세스에 잘 맞아떨어집니다. 스프린트 1 동안, 디자인 팀은 첫 번째 기능 세트를 디자인하고, 이해관계자의 피드백을 받고, 사용자와 함께 디자인을 신속히 테스트한 후 디자인을 반복 개선합니다. 사용성 테스트는 로우 피델리티 프로토타입으로 신속하게 수행할 수 있습니다. 개발 팀은 그다음 스프린트에서 최종적으로 사용자 테스트를 거친 디자인을 작업합니다. 이러한 디자인용, 개발용으로 나뉜 이중 트랙 스프린트 프로세스는 표준화된 도구와 견고한 디자인 시스템과 결합되어 성공적인 결과를 보장합니다.

지금이 바로 디자인-투-코드 도구가 필요한 시점

애플리케이션은 진공 상태에서 만들어지지 않습니다. 다수의 이해관계자, 고객이 포함된 반복적 디자인 프로세스, 효과적인 사용자 테스트, 그리고 원활한 협업이야말로 성공하는 제품을 만드는 요소입니다. 하지만 개발자가 디자이너에게 알아야 할 7가지에서 언급했듯이, “개발자에 대한 수요는 증가하고 있지만 기술 인재 부족 현상은 널리 알려져 있으며, 이는 개발자와 디자이너의 역할과 그들 사이의 관계를 근본적으로 바꾸고 있습니다. 한때 디자이너는 오로지 아름다운 인터페이스를 구상하는 역할만 맡았지만, 지금은 사용자를 위한 전체 프런트엔드 UI/UX 경험을 정의할 것을 요구받는 경우가 많습니다. 그리고 그들은 과부하 상태인 개발자들에게 이르는 직접적인 관문 역할을 하기 때문에, 프로젝트를 개발에 넘기기 전에 불필요한 코딩이나 불명확함을 초래할 수 있는 요소를 제거하는 데 있어 매우 중요한 존재입니다.”

기술 리더로서, 프로세스뿐 아니라 협업과 코드 출력까지 개선할 수 있는 도구를 살펴보는 것이 중요합니다. 개발자는 채용하기 어렵고, 디자이너는 웹 개발과 웹 레이아웃의 전문가가 아니지만, 도구는 이러한 복잡함을 제거하여 예전에는 몇 주, 몇 달이 걸리던 일을 단 몇 분, 몇 시간 만에 처리할 수 있게 해줍니다.

App Builder를 사용하면 디자인에서 코드로 이어지는 앱 제작 속도를 가속화할 수 있습니다. 여러분의 팀은 혁신 속도와 출시 시간을 앞당기고, 반복적이고 시간이 많이 소요되는 번거로운 작업을 줄일 수 있습니다. App Builder는 UI 프로토타이핑, 디자인 시스템, 사용자 테스트, 앱 빌딩, 코드 생성을 통합한 디지털 제품 디자인 플랫폼으로, 디자인 핸드오프를 없애고 비용이 많이 드는 반복 작업을 줄여 진정한 UX 디자인-개발 협업을 가능하게 합니다.

클라우드 기반 WYSIWYG App Builder를 통해 개발자는 Sketch나 Figma 파일 또는 사전 제작된 템플릿을 실제 UI 컴포넌트에 신속하게 매핑하고, 디자인을 실제 코드로 즉시 미리 볼 수 있으며, Angular 또는 Blazor로 프로덕션에 바로 사용할 수 있는 코드를 생성하여 GitHub에 업로드하거나 선호하는 IDE로 다운로드할 수 있습니다.