12
실버 서퍼 세대의 빛과 그림자
13

UI/UX 디자이너로서, 당신은 어떤 방법으로 생산성을 높이나요?

2020.07.16

안녕하세요, 이번 주제는 프로젝트 진행 시 UI 디자이너로서의 생산성 향상을 높일 수 있는 방법에 대해 이야기해보려 합니다.😀 (해당 기고글은, 지극히 디자이너 개인의 주관적인 내용입니다.)

 

 

 

 

UI 디자인 전용 툴, 왜 사용해야 할까?

 

 

2020년 현재, UI/UX 디자이너들에게 다양한 UI 디자인 전용 툴의 사용은 보편화되었습니다. 하지만 불과 몇 년 전만 해도 어도비(Adobe, 이하 ''어도비'')사의 포토샵(Photoshop) , 일러스트레이터(Illustrator)를 활용한 UI/UX 프로젝트 진행이 주를 이뤘습니다.

 

포토샵과 일러스트레이터는 여전히 디자인 작업에서는 빼놓을 수 없는 툴이지만, 포토샵은 본래 사진 편집과 그래픽 작업 중심의 툴로, 비트맵(Bitmap)을 기반으로 해 툴 자체가 무겁습니다. 따라서 다양한 해상도를 고려하며 제작되어야 하는 UI System을 구축하기에는 효율성이 떨어질 수 밖에 없었습니다.

 

또, 디자인을 완료한 후 GUI Guide를 전달하기 위해 PPT에 추가적인 작업하는 것은 디자이너들에게는 고문과도 같았습니다. (어도비 CC 가 출시되기 전을 논한 것이지만, CC가 나온 이후에도 여전히 툴 자체는 무겁습니다...)

 

 

 

 

이러던 중, 2010년 네덜란드 회사인 Bohemian Coding에서 선발주자가 되어 스케치(Sketch)라는 벡터(Vector) 기반 그래픽 툴이 출시되었습니다. 스케치가 실리콘밸리 스타트업에서 활발하게 사용되면서 툴의 생산성이 중요해지기 시작했습니다.

 

이후 인비전(Invision), 피그마(Figma), 프레이머(Framer), 어도비(Adobe XD), 프로토파이(Protopie) 등의 UI 디자인 전용 툴이 지속적으로 출시되었고, 디자이너들에게 선택의 폭은 계속 넓어지고 있습니다.

 

물론 이런 모든 툴을 학습해야 될 필요는 없지만, 각각의 작업 환경에 맞는 툴을 잘 선택해서 생산성을 높일 수 있도록 시도해보면 좋을 것 같습니다.

 

이번 글에는 이모션글로벌에서 실제로 사용 중인 툴에 대해서에 한하여 이야기 해보려고 합니다.

 

 

 

이모션글로벌에서는 어떤 툴을 자주 쓸까요?

 

이모션글로벌에서 최근 진행되었던 프로젝트에서는 위의 다섯가지 툴을 주로 사용했습니다. (물론 클라이언트가 요구 사항에 따라 툴 도입 여부가 달라지지만 말입니다.) 각 툴에 대해 간략한 정보와 함께 프로젝트에 어떤 식으로 활용되었는지 살펴보겠습니다.

 

 

 

 

스케치(Sketch)

스케치는 벡터(Vector) 기반 그래픽 툴로서 UI Design에 최적화되어 나온 툴입니다.


XD를 제외한 어도비의 툴들과 비교했을 때, 인터페이스는 4가지 섹션으로 비교적 단순한 구성으로 이루어져 있습니다. UI 제작에 있어 불 필요한 기능들은 확실하게 걷어내어, 툴의 진입 난이도는 그렇게 높지 않은 편입니다.

(어도비 툴들과는 단축키가 상이하기 때문에 어도비에 익숙하신 분들은 어색할 수는 있습니다.)

 

 

 

 

 

스케치는 기본적으로 벡터 기반이라 다양한 해상도를 고려해야 하는 네이티브 앱 제작 시 효과적입니다. 웹 제작에도 플러그인을 통해 반응형 설정이 가능하여 실제 퍼블리싱이 들어가기 전에 디자이너가 직접 테스트하고 확인할 수 있어 퍼블리셔, 개발자들과의 커뮤니케이션에서도 시간을 절약할 수 있습니다.

 

제품을 제작하는 단계에서 Low-Fidelity 하게 프로토타이핑을 할 수 있어 User Flow를 검증하며 UI를 제작할 수 있습니다. 스케치 기본 툴 기능 외에도 다양한 플러그인(Plugins)을 연결하면서 환경의 편의성을 지속적으로 높일 수 있다는 점이 스케치의 가장 큰 장점입니다.

 

 

 

 

스케치 툴 업그레이드가 계속되면서 클라우드(Cloud) 기능과 심볼(Symbol) 기능이 더욱 강력해지고 있습니다.

스마트 레이아웃이 적용된 심볼들을 클라우드로 다수의 디자이너들에게 제공하면 일관된 UI를 제작할 수 있기 때문에 초기에 디자인 스타일만 잘 만들어낸다면, 더욱 효과적으로 프로젝트를 진행할 수 있습니다.

 

 

 

 

더 자세한 기능 설명은 관련 링크를 통해 확인 하실 수 있습니다.

 

 

 

 

 

 


 

 

 

제플린(Zeplin)

 

제플린은 스타일 가이드(Style Guide)와 에셋(Asset)을 손쉽게 정리해 주어 제작 및 전달하는 과정에 있어 시간을 절약해주는 매우 유용한 툴입니다.


현재까지 제플린이 지원되는 툴은 Sketch, Adobe XD, Figma, Photoshop의 디자인 툴과 연결이 가능하고 Slack, Trello, Jira 와도 연결되어 제품 제작에 관련된 협업에 있어서 효율적으로 사용이 가능합니다.

 

 

 

 

각 환경에 맞는 수치/에셋 제공

 

 

 

스케치에서 제작된 리소스를 1x 기준으로 제작 후 제플린에 업로드하면 환경에 맞는 에셋을 제공해주기 때문에 매우 유용합니다.

또한 개발자에게 디자인을 전달하는 과정에서도 수정된 이력과, 태그를 통한 피드백이 가능하기 때문에, 매번 GUI Guide를 제작할 필요가 없어졌습니다.

 

 

 

 

선택한 영역의 상세한 정보가 나오기 때문에 수기로 작성하는 가이드보다 더 직관적이고 각각의 정보를 놓치지 않을 수 있습니다. 추가로 단일 화면이 아닌 전체적인 프로젝트의 공통적인 (Style Guide, UI Component) 관리 가능하기 때문에, 가이드 제작에 투입되는 시간을 단축하고 디자인 시스템에 집중할 수 있습니다.

 

제플린은 디자이너 혼자만 사용 방법을 알고 있다고 되는 게 아니기에 사전에 퍼블리셔, 개발자들의 화면 구성에 대해 리뷰해본 후에 시도해 본다면, 분명 더욱 효과적인 프로젝트를 진행할 수 있을 것입니다.

 

더 자세한 기능 설명은 관련 링크를 통해 확인하실 수 있습니다.

 

 

 

 

 

 


 

 

프로토파이(Protopie)

 

프로토파이의 개념 모델은 프로그래밍 언어보다는 자연상의 물체가 움직이는 원리를 바탕으로 하고 있습니다. 오브젝트의 움직임이나 상호작용은 각각 해당 상호작용을 유발하는 ''트리거''와 상호작용의 결과를 보여주는 ''리스폰스'', 상호작용의 대상이 되는 ''오브젝트''로 구성됩니다. 프로토파이 역시 오브젝트, 트리거, 리스폰스를 조합하여 인터랙션을 기술하도록 만들어져 있습니다.

 

[video width="1280" height="720" mp4="src="http://api.emotion.co.kr/upload/EDITOR/2020/07/viedo_03_protopie.mp4"][/video]

 

 

 

프로토파이는 프로토타이핑에 최적화되어있어, UI 단독으로 제작하기에는 한계가 있지만 Sketch, Adobe XD, Figma에서 작업된 디자인을 가져와서 오브젝트로 사용이 가능합니다.


이미지, 미디어, 오디오, 로티 등의 오브젝트를 가져올 수 있고, 센서, 카메라, 브리지 등 High-Fidelity 하게 프로토타이핑이 가능하여 개발적으로 공수가 큰 영역들은 사전에 검증하여, 제작 여부를 판단할 수 있습니다.

 

 

“ 모션을 더 빠르게 ~ 느낌 ~ 느낌으로 가능할까요? ”

 

 

이런 디테일한 프로토타이핑 툴이 출시되기 전까지는, 모션 가이드를 통한 디자이너들의 추상적인 표현만으로 개발 작업을 요청할 수 밖에 없었고 결국 디자이너가 생각한 완성도와는 다른 느낌으로 출시되는 경우가 많았습니다.


이런 간극을 줄이기 위해서 앞으로도 디자이너들은 스스로 프로토타이핑을 통해 테스트해보는 것은 물론이며 추상적인 표현보단 좀 더 명확한 작업 요청을 할 수 있어야 할 것입니다. 예를들면, "시작(Delay)은 ~초에서 지속시간(Duration)은 ~초로 Ease In하게 적용해 주세요." 라고 식의 명확한 요청을 한다면, 각 부서 간의 간극이 조금은 줄어들 것으로 생각됩니다.

 

더 자세한 기능 설명은 관련 링크를 통해 확인하실 수 있습니다.

 

 

 

 

 

 


 

 

 

어도비(Adobe CC)

 

어도비 CC(Adobe CC)는 UI/UX 분야는 물론, 디자인 직군에 있는 사람이라면 모두 다 알만한 명실상부 최고의 그래픽 패키지 툴입니다.


단순한 정보 구성의 프로젝트라면 앞서 말했던 스케치(Sketch)와 Adobe XD만으로도 진행이 가능합니다. 반면, 이미지 위주의 프로젝트일 경우에는 제품 이미지의 톤 보정이나 합성 등의 부가적인 리터칭 작업이 들어가야 하기 때문에 이런 경우는 포토샵(Photoshop)이나 일러스트레이터(Illustrator)를 필수적으로 사용하게 됩니다.

 

 

 

그리고 디지털, 영상 작업에는 자주 활용되지만 UI 쪽에서는 직접적인 연결고리가 없었던 애프터 이펙트(After Effect) 툴은 애니메이션을 분석하여 코드로 이루어진 Json파일로 내보내주는 로티(Lottie)라는 플러그인을 통해 UI 영역에서도 적극적으로 활용되기 시작했습니다.


이제는 사용자에게 보다 직관적이고 좋은 경험을 가져다주기 위해 마이크로한 모션 사용이 극대화되었습니다. 프로토타이핑 툴로 디자이너가 테스트하여 개발자를 통해 모션을 구현시키는 방법도 있었지만, 이제는 디자이너가 직접 모션을 제작하여 Json파일로 추출하여 개발자에게 전달하게 되면서 UI 디자이너들이 알아둬야 할 툴 영역이 확장되었습니다.

 

 

 

 

UI 디자이너에겐 모션의 추가 학습은 결코 쉽지는 않지만, 알아두고 적용한다면 더욱 많은 사용자에게 즐거운 경험을 줄 수 있는 디자인을 할 수 있을 것입니다.

 

더 자세한 기능 설명은 관련 링크를 통해 확인하실 수 있습니다.

 

  • 홈페이지 https://lottiefiles.com/
  • 블로그 https://lottiefiles.com/blog

 

 

 

 

 


 

 

 

디자인 툴의 활용, 어떻게 좋을까?

 

지금까지 다양한 UI/UX 디자인 툴의 특징을 알아보았습니다. 이모션글로벌에서 실제 디자이너들이 주로 사용하고 있는 툴들이기에, 더욱 세부적으로 각 툴의 특징을 알려드릴 수 있었습니다. 지금부터는 프로젝트의 각 단계에서 사용하게 되는 툴들의 순서를 짚어보고자 합니다.

 

Overview

프로젝트 개요, 범위, 일정, 목표설정하는 단계입니다.

 

Analysis

프로젝트 아젠다 설정, AS-IS, 경쟁사, 트렌드 분석, 리서치 & 벤치마킹, 브레인 스토밍하는 단계입니다.

 

Strategy

To-be 디자인 목표, Concept 설정 (Type 별 Concept), 최종 목표 인상/표현방법 전략을 만드는 단계입니다.

 

Mock-up

User Flow Map, Mock-up Review 를 통해 실 제품으로 연결이 가능한지 검증을 진행하는 단계입니다.

  • Sketch를 통해 User Flow를 프로토 타이핑하면서 사용성을 더욱 정밀하게 테스트 가능합니다.
  • Protopie를 활용하여 Lo-fy에서 Hi-fy까지 인터랙션을 테스트하며, 실 제작에 연결이 가능한지 와 공통된 인터랙션 정의가 가능합니다.
  • Client 보고 시 정적인 화면에서 연상하기 어려운 부분을 인터랙션 적용하여 제품에 대한 미스 커뮤니케이션 방지가 가능합니다.

 

Production

프로젝트 제품이 구축되는 단계입니다.

 

 

  • Zeplin 을 통해 기획 -> 디자인 -> 개발 과정을 거치면서 유기적 협업이 가능합니다.
  • Protopie 를 통해 Hi-fy 한 인터랙션을 시연하며 개발팀과의 결과물의 간극을 줄이는게 가능합니다.
  • Teams 를 통해 모든 일정 관리와 각 부서와의 채널을 일원화 가능합니다.

 

 

Design Output

프로젝트, 테스트 및 품질체크, 산출물 완료, 전달 및 교육으로 마무리 됩니다.

  • Zeplin에 생성한 프로젝트 Owner 권한을 클라이언트에 전달하고 작업된 툴에 맞는 산출물을 전달하며 종료됩니다.

 

 


 

 

각 툴의 활용이 절대적인 방법은 아닙니다. 다만 이런 툴들을 때에 맞게 잘 활용한다면, 기존 포토샵으로 진행되었던 때와 비교해 시간을 절약하고 효율을 높일 수 있어 더욱 좋은 프로젝트 컨디션을 만들어 갈 수 있을 것입니다.

 

또한 고객사에게 보고하는 자리에서도 정적인 이미지보다는 역동적인 프로토타이핑을 통해 커뮤니케이션하는 것이 훨씬 설득력을 가질 수 있습니다. 실제로 이렇게 진행했을 때 긍정적인 반응을 보였던 사례들이 있었기에 이모션글로벌 디자인팀에서는 대부분 이러한 프로세스를 통해 프로젝트를 진행하고 있습니다.

 

 

 

 

 


 

 

마지막으로...

스케치(Sketch), 제플린(Zeplin), 프로토파이(Protopie) 의 경우 높은 생산성을 활용할 수 있음에도 유료이다 보니, 기존 어도비(Adobe)만 구매한 회사들에게는 부담이 될 수 있을 것입니다. 이런 추가 구독 비용을 무시할 수 없기 때문에 아직도 많은 곳에서는 어도비(Adobe) 툴로만 UI/UX 작업이 이뤄지고 있습니다.

 

이모션글로벌에서는 감사하게도 2016년도에 모든 디자이너들의 작업 환경이 Mac OS로 구축되었고, 또 툴들의 구독을 통해 효율적인 UI/UX 프로젝트를 진행하고 있습니다.

 

UI 디자이너들에게 있어 UI 전용 디자인 툴은 정말 가뭄의 단비와도 같은 존재입니다. 하지만 여기서 강조해야 될 점은, 툴은 결국 디자인의 퀄리티는 직결되지 않는다는 점입니다. 툴은 생산성을 높여 많은 디자인을 테스트할 수 있는 시간을 만들어 주는 보조제같은 역할로 생각하면 좋을 것 같습니다.

 

이모션글로벌에서는 매 프로젝트가 끝나면 작업에 참여했던 구성원들이 디자인 품평회를 진행합니다. 각자의 경험들을 공유하고, 이를 토대로 다음 프로젝트에서 이전에 했던 실수나 부족했던 부분을 개선하며 더 좋은 결과물을 만들어내기 위해 모두가 노력하고 있습니다.

 

지금까지 UI/UX 디자이너로서의 생산성을 높이기 위해 일하는 방법을 알아봤습니다. 이번 글의 기재된 내용이 누구에게나 적합한 내용은 아닐 수 있지만, 한번쯤 참고하며 도움이 될 수 있는 글이었기를 바랍니다.

 

이외에도 세상에는 다양하고 쉽고 좋은 UI 디자인 툴이 있으니, 많은 시도를 해보며 좋은 작업 환경을 구축해 나가시기를 바랍니다. 새로운 것을 배운다는 것은 많은 스트레스를 요하기에 부담이 되겠지만, 빠르게 진화하는 IT 업계에서 도태되지 않기 위해서는 꼭 필요한 부분이라 생각합니다.

 

다양한 디자인 툴이 개발되고 있습니다. 앞으로도 더 좋은 툴들이 세상에 많이 나와 또 디자이너들은 그 툴들을 통해 모두가 더 쉽게 좋은 디자인을 할 수 있는 날이 오길 바랍니다.

 

긴 글을 읽어주셔서 감사합니다.

 

 

전민준Leader
Creative Designe·motion
13
12