구성요소 중심의 전략을 통해 사용자 인터페이스 디자인 설계 프로세스 최적화 (Optimize your User Interface design process with Component-driven strategy)

이 글은 Ky PhamOptimize your User Interface design process with Component-driven strategy글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.


presentation
지난 몇 년간 우리는 팀의 생산성을 높이고 디자인 리드 타임을 단축하고 변경 비용을 줄이기 위해 디자인 설계 프로세스를 개선하려고 노력해 왔습니다. Figma와 최근과 같은 강력한 협업 기능을 갖춘 설계 도구가 발표되었으므로, Sketch는 2019년 7월에 팀용 Sketch의 공개 베타 버전을 출시할 예정이므로, 문제는 어떻게 하면 더 효과적일 수 있을까 하는 것입니다.
시작하기 전에 Atomic 디자인 설계 및 협업 설계 도구를 사용하여 사용자 인터페이스 설계의 진화를 빠르게 상기해 보겠습니다.

Atomic design

"Atomic 디자인은 디자인 설계 시스템을 제작하기 위한 명확한 방법을 제공합니다. 고객과 팀 구성원은 앞에 놓인 단계를 실제로 보고 디자인 설계 시스템의 개념을 더 잘 이해할 수 있습니다." — Brad Frost
presentation
Brad Frost의 Atomic 디자인 설계 설명 입니다.
오래 전에 Adobe가 Creative Cloud Library를 처음 출시하고 많은 디자이너들이 Adobe Photoshop 또는 Illustrator를 사용하여 프로토타입을 만들었을 때 Creative Cloud Library는 디자인 설계 방식을 완전히 바꾸어 놓았습니다. 공유 라이브러리를 사용하면 단일 계층 또는 계층 그룹을 쉽게 추가하여 설계의 여러 위치에서 재사용할 수 있습니다. 공유 라이브러리를 사용하면 팀의 다른 사용자가 항목을 수정하고 변경 사항을 일관되게 적용할 수 있습니다.
오늘날 Figma(및 Sketch)는 구성 요소 시스템을 생성하여 다음 단계로 진입했습니다. 디자이너는 구성요소를 작성하고 유연성(측면 시스템 또는 제약 시스템)과 유지관리성(인스턴스의 측면을 유지하면서 마스터 구성요소를 변경)을 통해 구성요소를 재사용할 수 있습니다.

공동 설계 도구입니다 (Collaborative design tools)

저는 수년간 Adobe Photoshop, Adobe Illustrator, Sketch, Adobe Xd를 사용해 왔으며 최근에는 Figma를 사용하여 상업용 프로젝트를 위한 사용자 인터페이스 디자인 설계를 생성했습니다. Figma에서 제가 정말 좋아하는 것은 여러 디자이너와 이해관계자(개발자, 고객 등)가 동시에 프로젝트에 참여할 수 있는 능력입니다. 제품 디자인은 협업 프로세스이기 때문에, 우리가 그들의 입장에서 다른 사람들의 기여를 받을 때 항상 유익합니다.
presentation
줌(Figma의 블로그)에서 작업 중인 여러 디자이너가 Morgan Kennedy를 소개합니다.
Figma를 사용하면 팀원들이 동시에 동일한 파일을 작업할 수 있습니다. 하지만 어떻게 하면 디자이너가 (1) 병렬로 작업할 수 있고 (2) 다른 사람의 작업을 상속할 수 있으며 (3) 충돌, 중복 작업을 피할 수 있을까요?
다양한 규모의 회사의 여러 디자인 팀과 협력할 기회가 있는 저는 일부(나 포함)가 UI 작업을 화면별로 할당(또는 여전히)하는 것을 알고 있습니다. 기본적으로 와이어프레임이 끝나면 픽셀 단위 UI 설계를 생성하기 위해 스크린별로 팀원을 위한 작업을 할당합니다. 이렇게 하면 디자인 설계가 일관되지 않고 검토에 시간이 많이 소요되며 충돌을 일으킬 수 있습니다(특히 견고한 디자인 설계 시스템이 없는 회사/고객).

정답은 구성 요소 중심의 전략입니다.

구성요소 중심의 전략은 구성요소 수준에서 사용자 인터페이스 디자인 설계 프로세스에 접근하는 방법입니다.
presentation
화면은 서로 다른 구성 요소를 결합하여 생성됩니다.
구성 요소 수준에서 디자인 설계를 접근하면 다음과 같은 몇 가지 이점이 있습니다.
  • 고객을 위한 디자인 설계 시스템 및 구성 요소 라이브러리를 지속적으로 완료하고 장기적인 이점을 제공합니다.
  • 디자이너는 라이브러리에서 독립적으로 작업하고, 다운타임을 줄일 수 있습니다(다른 결과물-outputs의 대기).
  • 상속 가능한 구성 요소 라이브러리를 재사용하기 때문에 일관된 디자인 설계를 생성합니다.

이 전략을 적용하기 전에 다음이 필요합니다.

  1. 일반적인 디자인 설계 시스템은 디자인 설계 개발을 위한 기본 규칙입니다.
기본 디자인 설계 시스템에는 다음이 포함됩니다.
  • 고객의 브랜드 아이덴티티를 유지하기 위해 Typography, color-schemebasic shapes을 제공합니다.
  • 최소 assets 라이브러리: menu, close, checkmark, arrows 등과 같은 기본 아이콘으로 구성 요소를 구성하는 동안 더 많은 아이콘을 추가할 수 있습니다.
  • Grid templates (8 points grid, responsive grid, etc.)
  • 화면 템플릿은 다음과 같습니다. 글로벌 템플릿은 header, footer, web 또는 title bar body, navigation, 모바일 앱 콘텐츠의 위치를 정의합니다.
  • 기본 구성 요소는 다음과 같습니다. Buttons, Label, Text-fields입니다.
presentation
고객을 위해 테크노콤의 디자이너가 만든 기본 디자인 설계 시스템입니다.
2. 디자인을 위한 아키텍처로서 와이어프레임(낮음/미드 충실도) 또는 와이어프레임의 일부입니다.
와이어프레임에는 사용자 흐름이 포함되어 팀 구성원이 애플리케이션에 대한 개념적 개요를 제공합니다. 디자이너가 구성요소 수준에서 접근함에 따라 개념적 개요를 갖는 것은 디자이너가 동일한 목표를 따르고 디자인의 일관성을 보장하는 데 도움이 됩니다.
presentation
몇 년 전 F&B 업계의 고객을 위해 만든 고충실도 와이어프레임입니다.

위의 항목을 준비하면 바로 시작할 수 있습니다.

먼저 구성 요소를 백로그(back-log)로 구성합니다.

와이어프레임에서 빌드해야 하는 구성 요소를 쉽게 나열할 수 있습니다. 우선 순위가 지정된 구성 요소 백로그는 워크로드와 구성 요소의 상태를 추적하는 데 도움이 되며, 향후 유지 보수에 대한 항목도 계속 책임집니다.
구성 요소를 기능 또는 특성으로 분류해 보겠습니다.
  • 기본 구성 요소(Basic components)는 다음과 같습니다. title bar, bottom navigation, tab-navigation 등과 같은 매우 기본적인 항목입니다.
  • 이벤트 구성 요소(Event components): Pop-up, notification, toast messages, error messages, loading indicator등입니다.
  • 상태 구성 요소(State components) : Downloading, updating, loading…
  • 기능 구성 요소(Function components): 제품 요구 사항에 따라 Conversation bubbles, map, charts 등을 교환합니다.
presentation
백로그에는 항목과 우선 순위를 포함한 여러 구성 요소 그룹이 포함되어 있으며 세부 정보(설명 및 상태...)는 항목 내에 포함될 수 있습니다.

그런 다음 정의된 구성 요소 그룹을 디자이너에게 할당합니다.

이제 디자이너 수, 경험 및 프로젝트 범위에 따라 정의된 백로그의 구성요소 그룹을 처리하도록 디자이너를 지정할 수 있습니다. 디자이너는 제품 개발 수명 주기에 따라 구성 요소의 제작, 게시 및 유지 관리를 담당하게 됩니다.

마지막으로, 화면 디자인을 만들기 위해 레고잉(Lego-ing)을 시작합니다. 쉬운 게임!

필요한 모든 구성 요소를 빌드하면 나머지 작업은 구성 요소를 드래그 앤 드롭하여 와이어프레임에 따라 화면 디자인 설계를 구축하는 것입니다. 필요한 구성 요소를 모두 준비하면 이 작업은 간단한 작업입니다.
presentation
그룹으로 나눈 구성 요소는 해당 구성 요소를 생성한 디자이너가 유지합니다.

다음 사항에 유의합니다.

  • 구성 요소 수준에서 UX 방향을 지정합니다. 이는 사용자 인터페이스 디자인 설계 프로세스이지만 구성 요소를 구축하는 디자이너는 구성 요소를 애플리케이션 전반에서 유연하게 재사용할 수 있는지 주의 깊게 고려해야 합니다. 또한 사용자에게 최상의 환경을 제공하기 위해 구성 요소를 최적화해야 합니다.
  • 구성 요소의 상태(states of components)가 다르다는 것을 잊지 마십시오. 일부 구성 요소에는 여러 개의 상태가 있으므로 할당된 디자이너는 모든 구성 요소를 처리해야 합니다.
부품 중심의 프로세스를 적용하면 일부 측면에서 디자인 설계 프로세스가 개선될 것이라고 생각합니다. 그러나 우리가 무엇을 사용하든, 우리가 제품의 최상의 품질을 제공할 수 있도록 하기 위해서는 팀의 특성, 프로젝트의 범위 및 사용 가능한 자원에 따라 공정을 수정해야 한다는 것을 항상 명심해야 합니다.
소프트웨어 개발을 전문으로 하는 제품 디자인 프로세스를 최적화한 경험이 있다면 주저하지 말고 생각을 공유하세요. Mahalo!

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp