디자이너와 개발자가 함께 작업하기 쉽게 만드는 방법을 살펴보았습니다 . 그러나 이 협업에 방해가 되는 장애물과 워크플로는 무엇입니까? 우리는 디자인 팀과 제품 관리자가 소프트웨어 엔지니어와 함께 작업할 때 저지르는 일반적인 실수와 더 나은 협업 방법을 조사했습니다. 마찰과 장애물을 줄이는 것은 디자인의 가치를 높이는 동시에 더 부드러운 제품 개발 프로세스를 만듭니다 . UXPin Merge로 협업을 강화하고 설계와 개발 간의 격차를 해소하십시오. 이 기술을 사용하면 구성 요소 라이브러리의 요소를 UXPin으로 가져오고 설계한 대로 정확히 개발될 기능적 프로토타입을 만들 수 있습니다. 자세한 내용을 확인하세요. 병합 페이지를 방문하십시오 . 새로운 차원의 프로토타입 제작 팀의 디자인 시스템에서 가져온 대화형 구성 요소를 사용하여 디자인합니다. UXPin 병합 알아보기 1. 이미지 기반 프로토타입 사용 초기 단계의 스타트업이든 엔터프라이즈 소프트웨어 개발 팀의 일원이든 디자인 핸드오프는 종종 디자이너와 엔지니어 간의 마찰의 시간입니다. 이러한 긴장의 가장 큰 원인 중 하나는 프로토타입 충실도입니다. 이미지 기반 설계 도구는 충실도와 기능이 부족한 열악한 프로토타입을 생성하여 엔지니어, 이해 관계자 및 사용성 참가자가 해석하고 이해하기 어렵게 만듭니다. 디자인 팀에는 두 가지 옵션이 있습니다. 프론트엔드 디자이너 또는 UX 엔지니어와 협력 하여 더 나은 프로토 타입 제작 코드 기반 디자인 도구로 전환 후자는 엔지니어링 팀에 대한 의존도를 제거하고 프로토타이핑 기능을 크게 향상시키며 테스트를 개선하고 보다 원활한 설계 핸드오프를 위해 보다 나은 설계자/개발자 협업을 촉진하기 때문에 더 나은 솔루션입니다. uxpin 콜라보레이션 댓글 모바일 디자인 코드 기반 디자인 도구 사용의 이점 UXPin의 코드 기반 디자인 도구를 사용하면 디자이너는 최종 제품 경험을 정확하게 복제하는 프로토타입을 만들 수 있습니다. UXPin의 완전한 대화형 프로토타입은 코드에 필적하는 경험을 제공하기 때문에 엔지니어와 이해 관계자는 작업을 "상상"할 필요가 없습니다. 다음은 프로토타이핑을 향상시키는 4가지 UXPin 기능입니다. 상태 : 각각 다른 속성, 상호 작용 및 애니메이션이 있는 단일 요소 또는 구성 요소에 여러 상태를 적용합니다. 상호 작용 : 동적 사용자 경험을 위한 고급 애니메이션 및 조건부 서식 을 사용하여 복잡한 상호 작용을 만듭니다 . 변수 : 사용자 입력을 캡처 및 저장하고 해당 정보를 사용하여 조치를 취하거나 제품 흐름을 개인화합니다. 표현식 : Javascript와 유사한 기능을 사용하여 완벽하게 작동하는 양식을 만들고, 암호를 확인하고, 장바구니를 업데이트하는 등의 작업을 수행합니다. 무료 평가판 에 등록 하여 이러한 기능과 기타 고급 UXPin 기능을 알아보십시오. 2. 설계 결정을 명확히 하지 않음 디자이너가 저지를 수 있는 가장 큰 실수 중 하나는 디자인 결정의 배후 에 있는 이유 를 명확히 하지 않는 것입니다. 해결하려는 사용자 문제가 무엇인지 모르는 엔지니어가 어떻게 이해하거나 공감할 수 있습니까? 설계 결정을 명확히 하는 핵심은 사전 예방적입니다. 설계 프로세스 전반에 걸쳐 개발자를 참여시키고 설계 핸드오프를 피할 수 있습니다. designops 선택 도구 옵션 디자이너이자 비즈니스 리더인 Antonia Horvath는 협업을 개선하고 설계 결정에 엔지니어를 포함하기 위한 훌륭한 조언을 제공합니다. 개발/설계 짝짓기: 디자이너는 엔지니어 가 프로세스를 이해하고 엔지니어링 문제를 관찰하기 위해 설계 핸드오프 후 기능을 구축하는 것을 지켜봅니다. 이상적으로는 이 프로세스가 가장 잘 작동하며 두 팀 구성원이 같은 화면 앞에서 실시간으로 질문하고 답변합니다. 함께 아이디어 만들기: 엔지니어를 아이디어 세션 에 참여시키면 설계 결정 이면의 사고 과정을 이해하는 동시에 아이디어를 개선하기 위한 기술적 노하우를 활용할 수 있습니다. 디자인 비평 : 전통적으로 디자인 팀 의식 이지만 이상한 비평에 엔지니어를 포함시키면 신선한 관점에서 새로운 아이디어를 가져올 수 있습니다. 또한 엔지니어는 의사 결정 이면의 디자인 사고 프로세스를 이해함으로써 이점을 얻을 수 있습니다. 디자이너/엔지니어 회고: 팀이 각 반복의 결과를 반영하고 개선 사항에 대해 논의 하는 민첩한 소프트웨어 개발 관행. 설계자와 엔지니어는 모든 릴리스가 끝날 때 회고를 수행하여 설계 핸드오프의 문제점과 솔루션을 식별할 수 있습니다. 3. 엔지니어에게 사용자 경험에 대해 교육하지 않음 일반적으로 생각하는 것과는 달리 UX 팀은 제품의 사용자 경험에 대해 전적으로 책임을 지는 것이 아니라 전체 조직의 책임 입니다. 그러나 UX 디자이너가 주도하는 효과적인 디자인 옹호 없이는 아무도 사용자 경험에 대해 기꺼이 배우지 않습니다 . PayPal의 UX 리드 EPX인 Erica Rider가 Design Value Conference 2022 에서 지적했듯이 " 회사에는 상당한 통제/책임 불균형이 있습니다." UX 디자이너는 사용자에게 전달되는 UX에 대해 전혀 통제 할 수 없지만 100% 책임 을 집니다. 엔지니어는 사용자에게 전달되는 UX에 대해 아무런 책임 이 없지만 100% 제어할 수 있습니다. UX 팀의 역할은 엔지니어에게 사용자 경험에 대해 교육 하고 두 부서가 책임을 공유하는 것입니다. Erica는 "UX 팀이 엔지니어와 협력하여 PayPal에서 우수한 사용자 경험을 제공하지만 최종 제품에 대한 책임은 엔지니어에게 있습니다."라는 시스템을 개발했습니다. 가장 큰 장애물 중 하나는 생각의 전환입니다. UX 외부의 모든 사람들은 디자이너의 역할이 미학과 UI 디자인이라고 생각합니다. Erica의 교육 방법론은 사용자 경험을 생각하는 엔지니어를 미학적으로 즐거운 사용자 인터페이스에서 엔지니어가 절대적으로 제어할 수 있는 병목 현상과 장애물을 일으키는 문제로 전환하는 것이었습니다. 몇 가지 예는 다음과 같습니다. 대기 시간: 버튼을 클릭하고 로드하는 데 너무 오래 걸리면 사용자 경험이 좋지 않은 것입니다. 가용성: URL이 로드되지 않으면 사용자 환경이 좋지 않은 것입니다. 보안: 누군가 내 계정을 해킹하면 정말 나쁜 사용자 경험입니다! "사람이 읽을 수 있는" 오류 메시지가 아니거나 사용자가 해결할 수 있는 방법이 없는 오류 메시지: "오류 코드 1578-B1273 – FAILED!" 의미나 해결 방법을 알려주지 않고 사용자에게 이 메시지를 표시하는 이유는 무엇입니까? 또 다른 열악한 사용자 경험. 조직 전체의 사용자 경험 사고방식을 개발(엔지니어부터 시작)하면 책임을 분담하면서 사용자에 대한 공감을 높일 수 있습니다. 4. 사용자 연구 결과를 공유하지 않음 UX 도구 기사 에서 Taylor Palmer는 "사용자 연구가 더 나은 경험을 만드는 데 어떻게 도움이 되는지" 에 대해 엔지니어와의 인터뷰에서 얻은 통찰력을 공유합니다 . 엔지니어는 디자인 결정을 이해하는 데 도움이 되고 한 개발자가 말했듯이 "올바른 것을 구축하고 있는지 확인"하는 데 도움이 되기 때문에 사용자 연구에 관심을 갖습니다. 개발자는 디자인 팀의 전체 사용자 연구 아카이브에 액세스할 필요가 없으며 사용자 인터뷰에 참여할 시간도 없습니다. 그들은 요약, 메모, 녹음된 인터뷰를 선호합니다. 사용자 행동 프로토타입 상호작용 테스트 엔지니어링 팀과 사용자 연구를 공유하는 방법 Taylor Palmer는 UX 연구 를 엔지니어와 공유하기 위한 아이디어 목록을 작성했습니다. 연구 프로젝트 및 통찰력을 공유하는 회의 엔지니어가 "이유"를 이해할 수 있도록 설계 파일을 연구 요약과 연결 인터뷰 및 사용성 연구를 위한 공개 정책 만들기 와이어프레임, 모형 및 프로토타입(저충실도 및 고충실도)을 포함한 모든 UX 아티팩트 에 대한 피드백 받기 내부 연구 저장소 생성 및 공유 – 필요한 경우 엔지니어가 연구에 대해 더 깊이 탐구할 수 있도록 요약 이상 디자인 회의 및 아이디어 세션의 메모 공유 일반 사용자 경험 뉴스레터 만들기 5. 진실의 단일 출처가 없음 제품 개발 팀의 가장 중요한 과제 중 하나는 디자이너와 엔지니어 간의 단절을 극복하는 것입니다. 디자이너와 엔지니어는 완전히 통합된 디자인 시스템 의 단일 소스 없이 서로 다른 언어를 사용 합니다 . 결과는? 빈약한 협업, 디자인 드리프트, 마찰 및 기타 부정적인 결과는 사용자 경험과 제품 품질에 부정적인 영향을 미칩니다. 디자인 시스템 구성 요소 단일 정보 소스를 만드는 방법 디자인 시스템을 만든다고 해서 단일 소스가 보장되는 것은 아닙니다. 설계 시스템을 구축하는 전통적인 방법은 설계자와 엔지니어가 별도의 "진실"을 사용한다는 것을 의미합니다. 디자이너는 UI 키트 또는 이미지 기반 디자인 시스템을 사용합니다. 엔지니어는 코드 구성 요소 라이브러리 를 사용합니다. 디자인 시스템 성숙도 의 4단계 중 3단계입니다. 4단계에 도달하려면 설계자와 엔지니어가 동일한 구성 요소 라이브러리를 사용하는 설계와 개발 간의 격차를 해소하는 도구가 필요합니다 . Iress 의 디자인 시스템 제품 소유자이자 지역 제품 디자인 책임자인 Nick Elliott 는 4단계를 완전히 통합된 것으로 말합니다 . (no) 코드로 디자인: 디자이너는 리포지토리의 코드 구성 요소를 사용하여 UI를 빌드하기 위해 드래그 앤 드롭합니다 . 처음부터 디자인할 필요는 없습니다 . 디자인 드리프트 없음: UX 팀, 제품 디자이너 및 엔지니어는 정확히 동일한 구성 요소를 사용하여 드리프트가 없고 UX/프론트 엔드 부채가 적습니다. 일관된 디자인: 구성 요소에는 디자인 시스템에서 정의한 속성과 상호 작용이 포함되므로 디자이너는 색상, 타이포그래피, 상태 등에 대해 생각할 필요가 없습니다. 원활한(no) 핸드오버: 엔지니어는 이미 프로토타입에 사용되는 모든 구성 요소의 정확한 사본을 보유하고 있습니다. 프론트엔드 개발을 위해 리포지토리에서 복사하여 붙여넣기만 하면 되므로 코드를 작성할 필요가 줄어듭니다 . Iress는 UXPin Merge 를 사용하여 설계와 개발을 동기화했습니다. Merge는 저장소에서 UXPin으로 Iress의 구성 요소 라이브러리를 가져오기 때문에 디자이너는 최종 제품처럼 보이고 느껴지는 코드 기반 프로토타입을 빌드할 수 있으며 디자이너는 코드를 보거나 작성할 필요가 없습니다! 이 공유된 단일 정보 소스는 디자이너와 엔지니어가 동일한 언어를 사용하고 동일한 기술 제약 조건 내에서 작업한다는 것을 의미합니다. 프로세스에서 마찰을 줄이고 워크플로를 간소화합니다. 자세한 내용 과 액세스 요청 방법은 병합 페이지를 방문하세요. 더 나은 협업을 위해 UXPin Merge가 설계 및 개발을 동기화하는 방법 결과를 들었지만 UXPin Merge는 어떻게 작동합니까? Merge를 사용하면 조직이 리포지토리에서 UXPin의 디자인 편집기로 디자인 시스템을 동기화할 수 있습니다. 조직은 Git 통합 을 사용 하거나 React, Angular, Vue, Ember 및 HTML을 비롯한 기타 프론트 엔드 기술에 대한 Storybook 을 사용하여 React 디자인 시스템을 UXPin에 직접 연결할 수 있습니다 . 구성 요소 라이브러리는 디자이너가 요소를 캔버스로 끌어 프로토타이핑을 시작할 수 있도록 UXPin의 왼쪽 사이드바에 나타납니다. 각 UI 구성 요소에는 색상, 크기, 타이포그래피, 상태 등과 같이 디자인 시스템에서 정의한 속성이 포함됩니다. 디자이너는 속성 패널 에서 드롭다운과 선택기를 사용하여 이들 간에 전환할 수 있습니다 . 모든 변경 사항은 JSX로 렌더링되므로 엔지니어가 쉽게 복사하여 붙여넣어 개발 프로세스를 시작할 수 있습니다. UXPin Merge의 코드 기반 설계 솔루션으로 전체 제품 개발 팀이 동일한 언어를 사용하도록 하십시오. 이 혁신적인 기술에 대한 액세스를 요청하는 방법과 자세한 내용을 보려면 병합 페이지를 방문하십시오 .