프로덕트 창조는 한 부서에서 다른 부서로 팀 내의 아이디어와 형태를 이전하는 긴 연쇄 과정이다. 이 아티클에서는 디자이너와 개발자 간의 상호 작용에 대해 이야기해보겠다.
디자인 핸드 오프 란 무엇인가?
디자인 핸드오프 단계에서는 설계자가 UX와 UI를 통해 창업자의 아이디어, 관리자 및 분석가의 요구 사항 등을 개발자에게 전달할 수 있는 발판을 마련해야 한다. 팀 내 좋은 내부 연결의 도움으로 개발자들은 고객에게 실제 제품을 더 빨리 사용하기 시작할 수 있는 기회를 제공할 것이고, 미래에는 팀 전체가 훨씬 더 빠르게 프로덕트를 개선할 수 있을 것이다.
디자인 핸드 오프가 어려울 때
나쁜 디자인 핸드 오프는 모든 규모의 회사에서 발생한다. 신생 스타트 업은 자신의 혼란 속에서 프로세스를 구축하기가 어렵다는 것을 알게 되고, 대기업은 관료주의로 인해 더디다.
다음은 디자인 핸드 오프 프로세스를 괴롭히는 몇 가지 문제이다.
- 팀 간의 의사 소통 부족
디자이너와 개발자는 프로덕트 만들 때 서로 다른 작업을 수행한다. 일부는 인터페이스와 사용자 경험에 중점을 두고 다른 일부는 이를 작업 코드로 변환한다. 접근 방식의 차이로 인해, 팀은 업무의 일부에만 집중하고 서로 거의 소통하지 않는다. 희귀한 디자인 핸드 오프는 디자이너, 관리자 및 개발자 간에 추가적인 피드백 루프를 생성하고 개발 시간을 증가시킨다.
- 설계 구현 프로세스에 대한 제어 부족
종종 디자이너는 새로운 릴리즈의 품질을 철저하게 점검할 시간이 없다. 사소한 불규칙성이 제품의 사용자 경험에 영향을 미치고, 레이아웃과 출시된 프로덕트의 불일치로 인해 향후 새로운 디자인 솔루션에서 문제가 증가한다는 사실 외에도.
- 레이아웃의 혼돈
개발자에게 또 다른 고통은 디자이너가 관리자의 작업을 종료하기 위해 "빠른 디자인"을 수행하고 디자인 시스템을 다루지 않는 상황이다. 디자인 시스템은 지나치게 창의적인 디자이너의 불일치를 줄이고 사용자를 위한 프로덕트 UX를 단순화하며 프로그래머를 위한 개발을 가속화하는 데 도움이 되어야 한다. 물론 이 추가 작업에는 시간이 걸리지만, 소비된 리소스는 향후 디자인 핸드 오프 프로세스를 개선하기 위한 투자로 간주될 수 있다.
디자인 핸드 오프를 개선하는 방법
이제 일반적인 문제 몇 가지를 설명했으므로, 해결 방법을 살펴 보자. 오늘날 디자인 핸드오프를 단순화하고, 팀 내에서 더 나은 프로세스를 수립하는 데 도움이 되는 도구가 있다는 것은 좋은 일이다.
- 팀 커뮤니케이션 설정
좋은 의사 소통은 모든 관계의 핵심이므로, 이것이 디자인 핸드오프 프로세스의 품질을 개선하기 위한 첫 번째 팁이라는 것은 당연하다.
디자이너와 개발자가 프로젝트 개발 초기에 커뮤니케이션을 시작하고, 그 이후에도 커뮤니케이션을 유지하도록 해야 한다. 모든 사람이 조용히 자신의 업무를 하도록 하는 대신, 적어도 가끔은 모두를 모이게 해라. 자발적인 아이디어 교환을 위한 중요한 단계로서 공동 회의와 점심을 장려해라. 디자이너는 프로덕트 디자인 논의에 개발자를 포함하고 그들의 의견을 들어야 한다.
디자이너는 훌륭한 아이디어를 가질 수 있지만, 프로그래밍 지식이 부족하면 이러한 아이디어를 구현하지 못할 수 있다. 반면에 개발자는 제안된 구현이 항상 좋은 UX 솔루션이 아닐 수도 있다는 사실을 깨닫지 못할 수도 있다. 디자이너는 개발자에게 인기 있는 트렌드를 더 자주 알리고, 개발자는 새로운 기술을 공유한다. 이를 통해 디자이너는 기술적으로 충분히 유능하고 개발자는 디자인 의도를 더 잘 이해할 수 있게끔 도울 것이다.
커뮤니케이션 최적화 : 다른 커뮤니케이션 채널 대신, 자신만의 커뮤니케이션 규칙으로 단일 센터를 만들어라. 최신 정보와 이슈를 공유하기 위해 파일을 한 곳에 저장해라. 관리자 형태의 중개자 때문에 시간과 아이디어를 낭비하지 않고, 팀이 서로 빠르게 연결할 수 있는 기회를 갖도록 하자.
궁극적으로 팀 간의 투쟁을 협업으로 대체해라. 디자이너와 개발자가 최종 사용자와 그들의 요구에 대해 생각하게 해라.
- 디자인 핸드 오프 기술 새로 고침
개발자는 코드의 잠재적인 문제를 파악하고 수정하기 위해 가능한 한 빨리 설계에 참여해야 한다. 개발자 혜택을 위해 개발자 핸드 오프 문서를 깨끗하고 이해하기 쉽게 유지해라. 파일이 저장되는 위치, 지침에 따라 작업하는 방법을 설명하고 개발자가 설명을 위해 빠르게 연락하거나 피드백을 제공할 수 있는 연락처를 남겨 두어라.
- 프로세스 자동화
최신 툴을 사용하면 디자이너 작업의 일부를 자동화하고, 일상적인 디자인에 소요되는 시간을 줄일 수 있다. 디자인 시스템 생성, 그리드 및 레이아웃 생성, 기성품 구성 요소의 유연한 라이브러리 사용, 에셋 내보내기 설정-이 모든 것을 최대한 활용해야 한다.
또한 현대 사회의 그림은 프로그래밍 기술을 갖춘 디자이너가 짧은 시간 내에 더 나은 결과를 얻을 수 있는 것과 같다. 디자인을 만들 때 코드를 알고 적용하면 개발자가 아이디어를 완성된 제품으로 빠르게 변환하는 데 도움이 된다.
디자인 핸드 오프 가이드
아래에서는 각 팀원이 동일한 목표를 향해 작업할 수 있도록 디자인 핸드 오프 프로세스를 설정하는 방법을 수집했다. 모두 사용하지 않고 한두 가지 팁만 사용하더라도 도움이 되기를 바란다.
- 목업 및 레이어
디자인을 만들 때, 화면 이름이 기능을 설명하는 화면에 이름 지정 시스템을 사용한다. (예 : "장바구니에 추가"). 이름에 버전 번호를 사용하지 마라. 디자인 버전 관리를 위한 별도의 도구가 있다. 모든 화면, 구성 요소 또는 스타일은 디자이너와 개발자가 모두 같은 이름을 지정해야 한다. 따라서 디자이너와 개발자는 프로덕트가 어떤 요소로 구성되어 있는지, 어떻게 작동하며 동일한 언어를 말할 수 있는지에 대해 동일한 이해를 갖게 된다.
지루하지만 앞으로 많은 시간과 노력을 절약할 수 있다. 레이아웃 정리 : 레이어를 그룹화하고 중복 및 보이지 않는 레이어를 제거
개발자는 코드 생성을 위한 기본 워크 플로로 버전 제어를 사용한다. 이것은 디자이너도 채택할 수 있는 훌륭한 관행이다. 이전 버전과 연구 결과는 항상 디자이너가 유지해야하며, 개발자는 최신 소스에만 액세스 할 수 있어야 한다.
-컴포넌트와 에셋
디자인 시스템은 성공적인 프로덕트의 핵심 요소이다. 이는 디자이너와 개발자 간의 협업을 향상할 뿐만 아니라, 제품의 일관성을 향상해 향후 확장할 때 중요시된다.
최신 디자인 툴을 사용하면 프로세스를 자동화할 수 있다. 디자이너가 레이아웃에 주의를 기울이면 충분하다. 내보낼 이미지를 준비하고 (한 세트의 아이콘은 동일한 크기여야 함) 스타일을 올바르게 구성하고, 색상을 단일 팔레트로 수집한다. 계층 구조의 맥락에서 스타일과 구성 요소의 이름을 지정하고, 모두 서로 어떻게 관련되는지 생각해보아라. 필요한 경우 레이아웃에 개발자 주석을 그대로 둔다.
이미지를 최적화하는 것을 잊지 마라. 불행히도 그래픽 편집자는 디자인의 이미지에 무게를 더하기 때문에, 작업의 이 부분은 디자이너에게 있습니다. 가능하다면 그래픽에 벡터 이미지와 SVG를 사용하고, 디자인에 JPG 또는 PNG가 포함된 경우 최적화 도구를 사용해라. 고객은 프로덕트의 속도의 차이를 즉시 느낄 것이다.
도구:Invision DSM , Zeplin , Plant
- 프로토 타입 및 상호 작용
완성된 레이아웃을 프로토타입으로 수집하여 완전한 사용자 시나리오를 보여주고 탐색 구조를 보여준다. 이를 통해 개발자는 코드를 최적화하여 코드를 계획할 수 있다.
고정밀 프로토타입에 시간을 낭비하지 마라. 일부 화면은 설명이 포함된 정적 일 수 있습니다. 일부 화면은 설명 코멘트가 있는 정적 화면일 수 있다. 개발자들이 쉽게 이해할 수 있는 기존의 단순한 상호작용 패턴을 프로토타이핑하는 데 많은 시간을 할애할 이유가 없다.
도구 : Sketch , Invision , Principle
- 카피 및 콘텍스트
사본의 모든 변형을 사용하고 추가 레이아웃을 만드는 대신, 메시지 테이블이 포함된 문서를 콘텍스트에 배치하여 시간을 절약한다. (예: 메시지 유형이 적용되는 경우 및 사용되는 화면). 표는 UX-라이터와 더 유연하게 작업할 수 있도록 도와줄 것이며, 관리자와 개발자들은 항상 더 빨리 텍스트의 새로운 업데이트를 받을 수 있을 것이다.
그리고 레이아웃에 실제 텍스트를 사용하고 Lorem Ipsum은 사용하지 마라. 개발자들에게 동정심을 가져라. 디자이너를 위한 텍스트를 만드는 데 너무 많은 골칫거리를 가지고 있다.
도구 : Google 문서
- 빈 상태 및 에지 케이스
디자이너는 종종 모든 것이 잘 작동하고 사용자가 실수하지 않을 때 제품의 이상적인 상태를 디자인한다. 또는 빈 상태를 설계하는 데 많은 시간을 소비하지 않고 이러한 화면이 중요하지 않다고 생각한다. 그러나 이러한 경우 작업을 아무리 미루더라도, 개발자는 여전히 이러한 디자인이 필요하다. 유일한 차이점은 개발자가 디자이너에게 화면에 대해 상기시킬 때 디자이너가 다른 작업으로 바쁘다는 것이다. 따라서 초기에 시간을 두고, 누락된 디자인에 대한 계획을 세워 나중에 스스로 만들 수 있도록 해라.
개발 중에 참조할 수 있는 체크리스트를 만든다. 개발자가 더 쉽게 탐색할 수 있도록 특정 레이아웃에 대한 링크와 해당 상태를 목록에 추가한다. 레이아웃 다이어그램은 개발자가 벗어날 수 없는 진리가 되도록 하자. 이렇게 하면 사용자 경험 수준에서 프로덕트가 작동하는 방식에 대한 공통적인 이해를 얻을 수 있다.
성공적인 핸드오프는 훌륭한 프로덕트를 만드는 데 중요한 부분이다. 그러나 관련된 사람들이 많은 경우 팀 간의 우수한 커뮤니케이션과 협업을 유지하는 것이 중요하다.
-
저자 : PlantLabs Inc.
원문 링크: blog.plantapp.io/post/successful-design-handoff
'ᴜx > ᴀʀᴛɪᴄʟᴇ' 카테고리의 다른 글
| 올바른 디자인 시스템 만들기 : 컴포넌트 (1) | 2020.11.10 |
|---|---|
| 디자인 검증: 디자인이 좋은지 어떻게 알 수 있을까? (2) | 2020.11.05 |
| 반응형 디자인의 결함 제거 (2) | 2020.10.30 |
| 2020 Design Tools Survey - UX Tools (0) | 2020.10.27 |
| A/B 테스트의 장점과 단점 (0) | 2020.06.18 |
댓글