개발자를 위한 디자인 워크플로 튜토리얼: 적시에 더 나은 UI/UX 제공

편집자 주: Lubos Volkov는 경력 전반에 걸쳐 수많은 개발자와 원격으로 작업한 경험 많은 디자이너입니다. Toptal의 제품 디자이너인 Lubos는 엔지니어링, 커뮤니티 및 콘텐츠를 포함한 다양한 부서의 팀원들과 매일 교류합니다. 그는 커뮤니케이션 기술이 그의 성공에 기여하는 재능있는 디자이너입니다. 이 튜토리얼에서 Lubos는 디자이너-개발자 UI 및 UX 워크플로를 최적화하여 마감일 또는 그 이전에 고품질 제품을 제공하는 방법과 경험을 공유합니다.

훌륭한 디자이너 또는 디자인 팀과 협력하는 것은 모든 팀에게 귀중한 자산이 될 수 있습니다. 명확한 의사 소통 채널과 자유로운 협력을 통해 설계자는 구축 프로세스의 속도를 높이고 질문과 혼란을 최대한 줄이는 데 필요한 모든 것을 제공해야 합니다.

사용자 인터페이스 및 사용자 경험의 품질을 희생하지 않으면서 빌드한 제품이 적시에 제공되도록 UX 개발자가 할 수 있는 일은 무엇입니까?

내 대답: 첫날부터 디자이너를 참여시키고 전체 UI/UX 개발 프로세스에 참여하도록 하십시오. 개발자와 디자이너 간에 명확한 커뮤니케이션 라인과 일관된 메시지를 설정해야 합니다.

필요한 모든 것이 있습니까?

모든 UI를 구현하는 동안 발생할 수 있는 최악의 상황은 __디자이너와 개발자 사이의 의사소통 부족__(동일한 사람이 아닌 경우)입니다. 일부 디자이너는 PSD가 전송되면 작업이 완료된 것으로 생각합니다. 하지만 그건 틀렸어! PSD 전달 이후에 지속되는 상시 커뮤니케이션 워크플로를 만들어야 합니다.

많은 경우 디자이너가 실제 UI/UX 디자인 구현을 보기까지 시간이 걸립니다. 놀랍게도 빌드는 종종 초기 제출과 완전히 다릅니다. (이런 일이 한 번 이상 발생했습니다. 완전한 설명과 상호 작용 프로토타입이 포함된 소스 파일을 보냈지만 몇 달 후에 마침내 프로젝트를 보았을 때 다른 레이아웃, 다른 색상 및 적절한 상호 작용이 없었습니다.)

이 디자인 워크플로에는 많은 "추가" 작업이 필요하기 때문에 일부 디자이너는 이것을 싫어할 수 있습니다. 그러나 조직적인 방식으로 전체 자산과 정보를 만들고 전달하는 것이 프로젝트와 팀 전체에 더 좋습니다.

개발자 앞에 필요한 모든 것이 있으면 프로세스 속도가 빨라집니다. 깨끗한 PSD만으로는 충분하지 않습니다.

작업을 효과적이고 효율적으로 수행하려면 무엇이 필요합니까?

다음은 개발자가 UI/UX 디자인을 구현하기 위해 디자이너에게 기대해야 하는 자산입니다.

• 리소스 파일 - 디자이너는 앱의 모든 요소를 ​​하나의 파일에 배치해야 합니다. 이 파일에는 버튼, 체크박스, 헤더 스타일, 글꼴, 색상 등이 포함되어야 합니다. 기본적으로 이 파일의 정보를 기반으로 개발자는 모든 인터페이스를 처음부터 다시 만들 수 있어야 합니다. 개발자가 여러 파일을 검색하는 것보다 단일 PSD에서 요소를 내보내는 것이 훨씬 쉽습니다.

• 자산 - 소스 파일은 더 이상 건드리지 않아야 하므로 개발자가 필요한 모든 자산을 확보해야 합니다.

• 상호 작용 프로토타입 - "정적 화면"의 시대는 지났습니다. 스마트 인터랙션 및 애니메이션을 사용하여 UX 디자인 워크플로 및 구현을 원활하게 하는 것은 이제 일반적인 관행입니다. 그러나 개발자에게 "이것은 왼쪽에서 미끄러질 것입니다"라고 말할 수 없습니다. 디자이너는 해당 상호 작용의 실제 프로토타입을 만들어야 합니다. 프로토타입에는 속도, 속도 등과 같은 정보가 포함되어야 하며 디자이너는 이러한 각 값을 지정해야 합니다.

• 명명 규칙 - 파일 명명 구조를 요청하여 정리를 유지합니다. 두 사람 모두 파일을 더 쉽게 탐색할 수 있습니다. (백그라운드 폴더에 무언가를 숨기는 것을 좋아하는 사람은 아무도 없습니다.)

• HDPI 리소스 - 우리는 화면 밀도가 매우 높은 "어려운 시대"에 살고 있습니다. 디자이너가 필요한 모든 해상도의 이미지를 제공하여 애플리케이션이 어디서나 바삭하게 보일 수 있도록 하십시오. 참고: 가능한 한 많은 벡터를 사용하십시오. 많은 도움이 될 것입니다(svg).

구현하는 동안 누락된 다른 것을 발견하더라도 두려워하지 마십시오. 디자이너에게 ping을 보내고 요청하십시오. 절대 건너 뛰지 말고 절대 건너 뛰지 마십시오! 당신은 같은 팀의 구성원이며, 당신의 임무는 최고의 제품을 제공하는 것입니다. 디자이너가 실패하면 당신도 실패합니다.

진행중인 작업

UI/UX 개발 과정에서 디자이너를 활용하세요. 그들이 단지 "픽셀을 밀어붙일 것"이라고 기대하지 마십시오. 설계자는 구현이 시작되기 전에도 가능한 혁신을 봅니다. 이를 활용하려면 루프에 보관하십시오. 진행 중인 작업을 보고 테스트할 수 있는 액세스 권한을 제공합니다. 아무도 완료되지 않은 프로젝트를 공유하는 것을 좋아하지 않는다는 것을 잘 알고 있습니다. 그러나 빌드가 끝날 때보다 빌드 중간에 변경하는 것이 훨씬 쉽습니다. 그렇게 하면 시간을 절약하고 불필요한 작업을 방지할 수 있습니다. 설계자에게 프로젝트를 테스트할 기회를 주고 문제 및 솔루션 목록을 작성하고 개선 사항을 제안하도록 요청하십시오.

개발자가 응용 프로그램의 모양을 바꿀 아이디어가 있으면 어떻게 해야 합니까? 디자이너와 논의하고 디자이너와 상의 없이 개발자가 디자인을 수정하도록 허용하지 마십시오. 이 디자인 워크플로는 빌드가 제대로 진행되도록 보장합니다. 훌륭한 디자이너는 화면의 모든 요소에 이유가 있습니다. 왜 거기에 있는지 이해하지 못한 채 한 조각만 빼면 제품의 사용자 경험이 망칠 수 있습니다.

UI/UX 디자인 프로젝트 관리

디자이너는 개발자가 하루, 심지어 한 시간 안에 디자인에 생명을 불어넣을 수 있다고 생각합니다. 그러나 훌륭한 디자인과 마찬가지로 훌륭한 개발에는 시간과 노력이 필요합니다. 불안한 디자이너가 빌드 진행 상황을 볼 수 있도록 하여 방해가 되지 않도록 하십시오. 외부 프로젝트 관리 소프트웨어를 사용하여 모든 개정이 고려되었는지 확인하는 것은 이메일 대화나 Skype 세션에서 논의된 중요한 정보를 놓치지 않도록 하는 좋은 방법입니다. 솔직히 말해서, 때때로 변경 사항과 활동은 발생할 때까지 전달되지 않습니다.

어떤 솔루션을 사용하든 전체 팀이 채택하고 일관되게 사용할 하나의 워크플로 프로세스를 선택해야 합니다. 우리 팀에서는 Basecamp를 사용하고 있었기 때문에 푸시하려고 했지만 프론트 엔드 개발자는 기능이 제한적이라고 생각했습니다. 그들은 이미 JIRA, GitHub, 심지어 Evernote와 같은 버그, 진행 상황 등을 추적하기 위해 다른 프로젝트 관리 소프트웨어를 사용하고 있었습니다. 프로젝트 추적 및 관리가 최대한 단순해야 한다는 것을 이해하고 UI 디자인 워크플로를 JIRA로 마이그레이션했습니다. 나는 그들이 내 작업 흐름과 진행 상황을 이해하고 있는지 확인하고 싶었지만 그들이 디자인을 관리하는 또 다른 일이라고 느끼게 하고 싶지 않았습니다.

다음은 프로젝트 관리 도구에 대한 몇 가지 제안 사항입니다.

• Basecamp - 설계 및 개발 관련 작업의 진행 상황을 추적하고 작업을 쉽게 내보낼 수 있습니다. 또한 간단한 모바일 클라이언트가 있습니다.
• JIRA - 다양한 영역에 대한 맞춤형 보드를 쉽게 설정할 수 있는 완전히 맞춤형 플랫폼입니다. 예를 들어, 백엔드, 프론트엔드, 디자인 등과 같은 활동을 추적하기 위해 보드를 구성합니다. 모바일 클라이언트는 약간 약한 것 같지만 더 큰 팀을 위한 훌륭한 솔루션이며 버그 추적 기능이 포함되어 있습니다.
• 이메일 - 대화를 설정하거나 이미지를 보낼 때 유용합니다. 그러나 피드백을 위해 이메일을 사용하는 경우 주의 하십시오. 물건을 쉽게 잃을 수 있습니다.

Trello 및 기타 프로젝트 관리 소프트웨어를 사용해 볼 수도 있지만 업계에서 가장 널리 사용되는 것은 Basecamp와 JIRA입니다. 다시 말하지만, 가장 중요한 것은 모든 사람이 일관되게 사용할 수 있는 프로젝트 관리 시스템을 찾는 것입니다. 그렇지 않으면 논점이 되기 때문입니다.

UX 디자인과 개발이 함께 합니다

디자이너와 개발자는 강력한 조합입니다. 가능한 한 자주 UI와 UX를 함께 브레인스토밍하십시오. 개발자는 디자이너가 아이디어를 구상할 수 있도록 기꺼이 도와야 하며, 디자이너는 사용 중인 기술에 대한 최소한의 기본 지식이 있어야 합니다.

디자인 워크플로를 함께 파악합니다. 디자이너가 만든 것을 맹목적으로 구현하지 마십시오. 두 가지 다른 관점을 활용하여 사전에 예방하고 아름답게 보이고 훌륭한 사용자 경험을 제공하는 것을 만드십시오. 디자이너는 상자 밖에서 생각하고 미친 애니메이션, 아이디어, 픽셀 및 버튼을 보는 반면 개발자는 기술, 과속 방지턱 및 한계를 봅니다.

내 경험상 모든 디자이너는 픽셀과 흥미로운 개념에 열광합니다. 그러나 때때로 디자이너는 아이디어가 떠오른 시점에 이르렀지만 개발자는 뒤로 물러나서 "이것은 일단 구현되면 잘 작동하지 않을 것입니다. 성능 소모 문제가 있을 것입니다." 최근에 배경이 흐릿한 모달 창을 구현하려고 했으나 이 흐림으로 인해 로드 시간이 많이 걸렸습니다. 이 문제를 해결하기 위해 개발자는 더 빠르게 로드되고 이미지 품질을 유지하는 일반 풀 컬러 오버레이를 사용할 것을 제안했습니다. 디자이너, 주의: 디자인에 대한 사용자 경험을 타협하지 마십시오.

피드백 루프

디자이너의 피드백은 매우 중요하며 가능한 한 자주 이루어져야 합니다. 그것은 아마도 당신이 할 가장 많은 시간(그리고 에너지)을 소모하는 일일 것입니다. 그러나 완벽한 결과를 제공하려면 이를 채택해야 합니다. 다음은 피드백을 완벽하게 만드는 방법에 대한 몇 가지 UX 및 UI 디자인 워크플로 팁입니다.

• 시각적이어야 합니다. 피드백은 최대한 구체적이어야 합니다. 이를 정확하게 만드는 가장 좋은 방법은 간단한 스크린샷을 찍고 수정하려는 문제를 강조 표시하는 것입니다. 현재 구현과 그것이 어떻게 보여야 하는지에 대한 사진이 있다면 훨씬 더 좋을 것 입니다. 비주얼 커뮤니케이션은 질문의 50%를 제거합니다.

• 설명적 이어야 합니다. 피드백은 정확해야 합니다. "이 버튼을 위로 이동"이라고 말할 수 없습니다. 디자이너는 버튼이 이동해야 하는 픽셀 수, 패딩을 사용해야 하는 등을 지정해야 합니다. 항상 문제에 대한 설명과 적절한 솔루션을 포함해야 합니다. 시간이 많이 걸리지만 그만한 가치가 있습니다.

• 인내심 - 디자이너와 개발자가 같은 초점을 공유하지 않는다는 것을 명심하십시오. 개발자가 디자이너의 아이디어를 완전히 이해하지 못하면 혼란과 잘못된 결정으로 이어질 수 있습니다. 모든 경우에 양측은 인내심을 갖고 다른 팀원들을 기꺼이 도울 필요가 있습니다. 정말 힘들 때도 있지만 모든 디자이너와 개발자가 배워야 하는 소프트 스킬입니다.

적절한 디자인 워크플로로 만들기 위해서는 이러한 것들이 함께 결합되어야 한다는 것은 매우 명백합니다. 하지만 피드백을 전달하는 데 실제로 도움이 될 수 있는 도구는 무엇입니까?

• 이메일 - 이것이 여전히 피드백을 전달하는 가장 일반적인 플랫폼입니다. 몇 가지 간단한 규칙을 따르면 사용하는 것이 좋습니다.
  • 첫째, 피드백을 위해 단일 이메일 스레드를 사용하십시오. 제목이 다른 새 이메일에 모든 개별 조정을 적용하지 마십시오.
  • 둘째, 수정 목록을 만듭니다. 앉아서 당신이 발견한 모든 조정이나 수정 사항에 대해 생각하십시오.
  • 마지막으로 큰 목록을 한 번에 보내지 마십시오. 더 작은 개별 목록으로 나누고 부분으로 이동하십시오.

• Skype(행아웃) - 음성은 피드백을 위한 정말 강력한 도구입니다. 즉시 질문하고 답변할 수 있습니다. 단, 반드시 메모해 두시고 통화 후 후속조치 메시지(이메일)로 보내주시기 바랍니다.

• 공동 작업 도구 - 솔직히 말해서 저는 공동 작업 도구를 그다지 좋아하지 않습니다. 그러나 큰 이점이 있습니다. 피드백을 제자리에 유지하는 데 도움이 됩니다. 질문하고 답하는 속도가 빠르며 영원히 유지됩니다.

다음은 몇 가지 훌륭한 도구입니다.

피드백 주석:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

협업 도구:

• http://www.invisionapp.com/
• https://basecamp.com/

결론

디자인 및 개발 프로세스 전반에 걸쳐 커뮤니케이션 라인을 개방 상태로 유지하는 시스템 및 UI/UX 디자인 워크플로를 구축합니다. 이를 통해 훌륭한 아이디어를 구현하고 잠재적인 문제를 예측하고 중요한 문제의 우선 순위를 지정할 수 있습니다.

개발자 와 디자이너 는 팀 으로 일할 의지 가 있는 한 함께 멋진 것을 만들 수 있습니다 . 서로에게서 배우고 이와 같은 튜토리얼을 디자인하십시오!