사용자 인터페이스 디자인의 미래: 차세대 UI 도구

UI 디자인 도구는 동적 사용자 인터페이스를 만들지 않고 사진 편집을 위한 프로그램인 Adobe Photoshop의 1세대 이후로 많은 발전을 이루었습니다. Adobe XD, Figma 및 Sketch와 같은 최신 도구를 사용하면 작업이 더 쉽고 빨라졌습니다.

그러나 일상적인 워크플로의 비효율성은 만연하고 사람들이 사용하고 싶어하는 제품을 디자인할 수 있을 때 귀중한 시간과 자원을 낭비하고 있습니다. 오늘날 사용 가능한 디자인 프로그램은 우리가 시작한 것보다 우수하지만 현재 기술을 활용하지 못하고 UI 디자이너로서의 잠재력을 최대한 실현하지 못합니다.

새로운 세대의 UI 도구가 필요한 때입니다.

디자인과 코드의 통합

미래의 사용자 인터페이스 도구는 디자인과 코드를 결합하여 디자이너와 개발자에게 보다 원활한 경험을 제공할 것입니다. 현재 도구는 웹 UI를 디자인하는 데 도움이 되지 않습니다. 그들은 우리가 웹 UI의 추상적 표현 을 디자인하는 데 도움을 주고 있습니다. Figma 및 Sketch에서 만든 목업은 소스 코드에서 분리됩니다.

오늘날 많은 디자이너들이 HTML과 CSS의 기본 사항을 알고 있습니다. 일부 강경한 사람들은 코드로 디자인하지만 복잡한 프로젝트에는 효과적이지 않습니다. 설계자는 개념 증명에 착수하기 전에 신속하게 개념 증명을 탐색할 수 있는 능력이 필요합니다.

소프트웨어 개발자에게는 코드 편집과 개발을 통합하고 엔지니어가 동일한 환경에서 코드를 빌드, 테스트 및 디버그할 수 있도록 하는 도구인 Visual Studio Code가 있습니다. 마찬가지로 디자이너는 완전한 디자인 기능을 제공하면서도 생산 준비 코드를 생성할 수 있는 시각적 개발 환경이 필요합니다.

여기에 미래가 있습니다.

병렬 생성은 디자이너/개발자 핸드오프를 대체할 것입니다.

특히 핸드오프 단계에서 디자이너와 개발자 사이에 너무 많은 교류가 있습니다. 어떤 경우에는 핸드오프가 너무 시간 소모적이고 소모적이어서 작업 품질이 저하됩니다. 소스 코드와 인터페이스하는 차세대 디자인 도구를 통해 개발자는 더 이상 UI 구축을 단독으로 책임지지 않습니다. 대신, 그들은 제품의 UI를 백엔드에 연결하고 제대로 작동하게 하는 논리적 아키텍처 개발에 집중할 수 있을 것입니다.

디자이너는 구운 코드로 UI의 기초를 다지고, 개발자는 이 코드를 기반으로 제품에 생기를 불어넣을 것입니다. 디자이너는 더 이상 "목업에 표시된 대로 8픽셀 대신 16픽셀의 패딩을 추가하세요."와 같은 요청으로 개발자에게 잔소리를 할 필요가 없습니다. 또한 개발자는 "이 구성 요소가 태블릿과 데스크톱 중단점 사이에서 어떻게 확장되어야 합니까?"와 같은 디자인 질문을 하기 위해 일시 ​​중지할 필요가 없습니다.

대신 디자이너와 개발자는 주어진 시간과 예산에서 디자인 접근 방식이 실행 가능한지 또는 모든 UI 구성 요소 상태가 해결되었는지와 같은 더 중요한 문제에 대해 파트너 관계를 맺을 것입니다.

디자인 UI 도구와 개발자 소프트웨어가 맞춰집니다.

현재 도구는 맞춤형 프로그래밍 모델에 의존하여 설계 구성 요소를 생성합니다. 이러한 모델은 일반적으로 CSS만큼 강력하지 않으며 디자이너가 최종적으로 HTML, CSS 또는 JavaScript로 내보내야 하는 코드인 디자인 파일의 기본이 되는 자동 생성 코드를 볼 수 없도록 합니다. 우리 도구가 HTML과 CSS를 기본적으로 사용했다면 훨씬 더 간단했을 것입니다.

예를 들어 CSS는 높이, 너비, 테두리 및 패딩을 정의하도록 코딩된 상자 내의 각 페이지에 HTML 요소를 배치하는 상자 모델을 사용합니다. Figma는 자동 레이아웃 기능을 통해 이 기능을 거의 제공합니다. 그러나 Figma가 이미 대부분의 웹 UI를 지원하는 상자 모델을 사용했다면 개발자는 번역 및 내보내기를 덜 수행해야 할 것입니다.

특정 요소에 대해 스타일이 지정되지 않은 경우 발생하는 상황을 제어하는 ​​스타일 상속도 마찬가지입니다(기본값과 유사). CSS는 그것을 사용하지만 웹 전용으로 만들어지지 않은 대부분의 디자인 도구는 사용하지 않습니다.

정적 아트보드나 목업이 아닌 웹 보기를 출력하려면 도구가 필요합니다. HTML 및 CSS 시뮬레이터가 필요하지 않습니다. HTML과 CSS가 필요합니다.

모형은 쓸모 없게 될 것입니다

버려지는 모형 대신 모형을 문밖으로 던지자.

모형은 답이 없는 질문을 너무 많이 남깁니다. 모든 디지털 환경에 맞게 설계하는 것은 불가능합니다. 오늘날 디자이너는 320px, 834px 및 1440px의 화면 너비에 대한 레이아웃을 구축합니다. 하지만 레이아웃의 일부가 1220px 뷰포트에서 깨지면 어떻게 될까요? 오늘날의 대형 휴대폰에서 흔히 볼 수 있는 크기인 375픽셀에 최적화하는 것은 어떻습니까?

모든 시나리오에 대한 아트보드를 만드는 것은 비실용적입니다. 특히 어두운 테마는 말할 것도 없고 모든 중단점과 보기를 고려할 때 더욱 그렇습니다. 이러한 모든 변수에 대해 디자인하는 것은 이유를 초월한 아트보드의 수를 복잡하게 만듭니다.

모형도 자원 낭비입니다. 그들은 구축하는 데 시간이 많이 걸리고 디지털 제품 디자인에서 덜 두드러졌습니다. Webflow는 목업을 없애고 대신 반응형 대화형 프로토타입을 옹호합니다. (불행히도 Webflow는 웹 기반 솔루션으로 제한되며 간단한 웹사이트에 적합합니다). 그리고 버려지는 결과물은 관념화 단계에서는 의미가 있을 수 있지만 솔루션 단계에서는 낭비입니다.

모든 시스템 상태가 설명됩니다.

모든 디지털 제품에는 특정 순간에 수행 중인 작업에 해당하는 상태가 있습니다.

모든 상태를 고려해야 하지만 현재 UI 도구는 이 작업을 디자이너에게 맡겨 단일 구성 요소의 수많은 변형을 생성해야 합니다. 개발 도구인 React 및 Vue.js를 사용하면 개발자가 구성 요소의 모든 가능한 상태를 쉽게 조정할 수 있습니다. 디자인 도구는 그에 따라야 하며 디자이너가 모든 구성 요소 상태를 위해 디자인되었는지 확인하도록 권장해야 합니다.

실제 데이터가 자리 표시자 콘텐츠를 대체할 것입니다.

디자이너가 여러 상태에 대한 구성 요소를 만드는 것처럼 다양한 데이터도 디자인합니다. UI 디자이너는 복사본, 이미지, 날짜, 이름, 제목 등의 실제 입력으로 구성 요소를 테스트할 수 있어야 하며, 이는 궁극적으로 디자인의 구성 요소를 채울 것입니다. 현재 디자이너는 데이터를 수동으로 복사하여 대지에 붙여넣는 방식으로만 데이터를 시뮬레이션할 수 있으며 이는 매우 지루한 작업입니다. 이 프로세스를 자동화하는 데 도움이 되는 플러그인이 있지만 번거롭습니다.

구성 요소가 데이터를 처리하는 방법을 평가하도록 개발자에게 요청하는 것도 답이 아닙니다. 구성 요소를 테스트할 때쯤이면 구성 요소를 다시 설계하는 데 너무 많은 시간이 소요됩니다. 그리고 설계자가 실제 데이터로 구성 요소를 테스트하고 반복할 수 없다면 카드가 긴 제목과 함께 작동하는지 또는 제목이 전혀 없는지 어떻게 알 수 있습니까? 글꼴이 아랍어 문자를 지원하지 않거나 사이트에서 오른쪽에서 왼쪽으로 읽는 언어를 지원하지 않는다는 것을 어떻게 알 수 있습니까?

엣지 케이스 테스트가 더 쉬워질 것입니다

UI 도구가 마침내 모든 상태를 수용하고 실제 데이터 테스트를 가능하게 하면 디자이너는 엣지 케이스를 더 잘 예측할 수 있습니다. 구성 요소가 생성되면 설계자는 다양한 상태를 스트레스 테스트하고 다양한 데이터로 구성 요소가 다른 시나리오에서 어떻게 수행되는지 확인합니다. 이러한 방식으로 UI는 디자이너의 영역이 되어 개발자가 JavaScript 수정 또는 API 테스트와 같은 작업에 집중할 수 있습니다.

개발자 도구 및 타사 브라우저 확장의 세계가 열릴 것입니다

작업이 HTML 및 CSS에 적용되면 성능, SEO 및 접근성 감사를 위한 필수 Lighthouse 또는 장치 중단점 및 낮은 네트워크 속도를 시뮬레이션하는 다양한 브라우저 개발자 도구와 같은 전체 확장 에코시스템을 설계 단계에서 사용할 수 있게 됩니다. 브라우저 도구 세트는 Figma, Sketch 또는 Adobe XD의 어떤 플러그인보다 프로덕션 준비 UI를 만들고 테스트하는 데 훨씬 더 유용합니다.

디자이너와 개발자가 함께 작업합니다.

저는 제품 개발의 현재 상태를 한 셰프가 다른 셰프에게 지시하여 요리를 요리하려고 하는 주방에 비유합니다. 작동할 수는 있지만 훨씬 더 오래 걸리고 훨씬 덜 효율적입니다. 코드 기반 설계 도구를 개발하는 회사가 있습니다. Hadron, Modulz 및 Relate는 베타 버전의 제품을 보유하고 있습니다. 이러한 도구의 광범위한 채택은 디지털 제품 생성에 있어 혁명의 시작을 알릴 것입니다.

또한 디자이너-개발자 관계의 급격한 변화를 알릴 것입니다. 두 측면이 동시에 작동하면 제품 팀이 기하급수적으로 더 효율적이 됩니다. 개발자는 모형을 해석하는 데 시간을 낭비하거나 디자이너가 픽셀을 완벽하게 조정하도록 요청하는 데 얽매이지 않고 UI 아키텍처의 복잡한 논리를 자유롭게 다룰 수 있습니다. 그리고 디자이너는 성공적인 디지털 제품의 공동 제작자가 됨에 따라 팀과 회사에 더 가치가 있을 것입니다.