협업 인터페이스 디자인 도구 – 피그마(Figma)

이전에 Adobe XD에 대해서 포스팅한 적이 있습니다. XD도 디자인 툴에 가깝지만, 본업이 기획이라서 기획적인 관점에서 사용해봤었는데요. XD와 비슷하지만 협업과 공유에서 좀 더 자유로운 툴인 피그마(Figma)를 접하게 되었습니다. 피그마 역시 저는 기획적인 관점에서 보고 있으며, 여태 만나봤던 툴 중에 최고의 툴인 것 같습니다.

 

피그마(Figma) 살펴보기

피그마는 XD와 비슷한 UI를 가지고 있습니다. 왼쪽에 생성한 레이어가 보이고, 오른쪽은 작업 영역입니다. 위 사진은 피그마를 처음 실행하면 만날 수 있는 ‘Figma Basics’ 화면입니다. 화면에 보이는 것이 하나의 프로젝트입니다. 프로젝트 내에서 여러 개의 페이지를 생성할 수 있습니다. 페이지 아래에 레이어가 존재합니다. 자유롭게 레이어를 생성하고, 화면 구성을 할 수 있습니다.

피그마의 최고 장점은 웹 브라우저에서도 거의 모든 기능을 사용할 수 있다는 것입니다. 간단하게 사용하신다면 웹 브라우저로만 사용하셔도 충분할 것 같습니다. 웹에서 문서를 만들고, 그 주소를 바로 공유하면 URL을 받은 사람도 별 다른 프로그램 설치 없이 바로 확인 가능합니다. 이게 XD에서는 못 느꼈던 피그마의 가장 큰 장점입니다.

 

피그마 전용 애플리케이션

피그마는 여러 디바이스의 프로그램을 제공합니다. 피그마 다운로드 페이지로 들어가면 윈도우용, 맥용 데스크탑 앱을 비롯하여, AOS와 IOS까지 모바일 앱도 다운로드 받을 수 있습니다. 피그마에서 사용가능한 폰트까지 다운로드 받을 수 있습니다.

 

각종 플러그인

XD와 마찬가지로 피그마에서도 각종 플러그인을 제공합니다. 설계나 디자인 할 때 유용한 플러그인을 찾아서 쉽게 설치 후 사용하시면 됩니다. 플러그인은 프로그램 설치 시에만 적용 가능합니다.

 

피그마의 가격 정책

이 끝내주는 협업 디자인 도구는 2명의 에디터와 3개의 프로젝트까지는 무료입니다. 가격 정책은 홈페이지의 Pricing 페이지에 자세히 안내 되어 있습니다. 전문가는 에디터 당 월 12달러의 금액이 부과됩니다. 전문가 금액에 한해서 학생일 경우 무료로 사용 가능합니다. 단체 요금제는 에디터당 월 45달러의 금액이 부과됩니다. 조직 전체의 디자인 시스템, 개인 플러그인, 폰트 공유, SSO 보안까지 지원되는 부가 서비스가 많아 집니다.

곧 스타트업 프로젝트를 본격 시작할 참인데, 피그마를 적극 활용해 보려고 합니다. 5인 이하의 스타트업일 경우 프리 요금제로도 충분히 사용 가능할 것 같습니다.

기획 문서의 변화 – Adobe XD 입문기

기획 문서 작성에 대한 개인적인 생각의 변화

며칠 전에 인터뷰를 보러 갔더니, XD를 사용해 봤냐고 면접관이 물어봤다. 사용해 본 적이 없다고 답을 하면서도 어딘가 낯설지 않은 그 이름 XD. 인터뷰가 끝나고 난 뒤 짐작이 가는 곳을 검색해 봤다. 작년에 직감 앱 기획을 시작하면서 초반에 CSO님께 전달받았던 프로토타입의 문서가 XD였던 것이 떠올랐다. 그때 잠시 설치 후, 전달받은 문서만 열어보고 금방 닫았던 기억이 났다. 약간은 신기하네? 하는 정도의 느낌이었다.

이번에 프로젝트도 끝나고 시간이 좀 남아서 XD에 대해서 심도 있는 검색을 좀 해봤다. 사실상 XD는 기획단에서 작성되는 문서로 보기는 어려워 보였다. 실제 화면 배치를 하는 작업에서 디자인의 롤에 더 가깝게 느껴졌다. 하지만 깊게 알아볼수록 이게 기획단에서 제대로 작성이 된다면 좀 더 완성도 있는 산출물이 나올 것 같은 확신이 들었다. 파워포인트로 작성된 딱딱하고 정적인 문서에서 현실적이고 역동적인 XD로 작성된 설계서가 훨씬 설득력이 있어 보였다. 어차피 파워포인트에서도 기존에 해 놓은 작업이나 괜찮은 도형 오브젝트를 복사&붙여넣기 하지 않는가! 포토샵도 꽤 만져왔던 터라 크게 문제없어 보였다.


Adobe XD 설치 후 기능 파악

작년에 삭제했던 Adobe XD를 다시 설치하게 되었다. 작년에 설치했을 때보다 기능이 더 추가된 느낌이었다. 한글화가 아주 잘되어 있다는 것도 접근성에서 좋은 것 같다. 유튜브에서 XD 관련 강의를 몇 개 봤다. 놀라운게 유튜브에서 XD 관련 강의가 몇 개 없다. 꽤 잘 정리된 강의는 모두 본 것 같은데 10편이 넘지 않았다. XD 사용법에 대한 심도있는 강의를 시리즈로 유튜브에 올리는 것도 괜찮은 것 같다.

 

XD는 아주 심플하고 깔끔한 UI를 보여준다. 화면에서 좌측에 툴이 모여 있다. 포토샵처럼 엄청 많은 툴이 있는 것도 아니고, 8개의 툴이 전부다. 작업 공간은 아트보드 개념으로 일러스트를 사용해 본 사람이라면 아주 쉽게 개념을 이해할 수 있을 것 같다. 그리고 XD의 큰 장점은 포토샵과 단축키가 거의 비슷해서 사용하는데 무리가 없다는 것이다.

 

아트보드에서 오브젝트를 선택했을 때 오른쪽에 나오는 설정화면이다. 포토샵과 파워포인트를 섞어 놓은 느낌이다. XD 프로그램을 사용하는데는 무리가 전혀 없었다. 말 그대로 아주 쉽다!

 

XD의 큰 장점이라면 아트보드로 구성된 각각의 페이지를 링크로 연결할 수 있다는 점이다. 이 부분이 파워포인트와 크게 비교되는 부분인데, 프로토타입 탭에서 각 오브젝트를 TAP 하거나 클릭했을 때 이동되는 페이지 및 액션들을 지정할 수 있다. 설정된 링크는 미리 보기로 실제 구현된 앱처럼 확인할 수 있다.

 


Adobe Creative Cloud

XD로 작업을 좀 해봤다. 저장하려고 보니, 클라우드에 저장이 있어서 클라우드에 저장을 해봤다. 저장된 문서는 XD 실행 시 언제든지 불러올 수 있다. 클라우드에 저장할 수 있다는 것은 아주 큰 장점이다. 개인적으로 드롭박스(Dropbox), 에버노트(Evernote), 구글 드라이브(Google Drive) 등을 이용하고 있다. 하지만 별개의 클라우드에 저장하는 것이 아니라 자체 프로그램에서 제공하는 것은 아주 큰 장점이라고 할 수 있다. 실제로 정말 개편하다.

 

XD를 설치하면 위와 같이 Adobe Creative Cloud가 함께 설치된다. Adobe에 이렇게 많은 제품이 있는지 몰랐다. 엄청나구나! Adobe.

 


XD에 날개를 달아주는 Add-on

XD에는 Add-on이라고 하는 플러그인이 존재한다. 프로그램 내에서도 다운로드 가능하며, 각 플러그인의 링크를 제공한다. 여기서 제공하는 링크 외에도 드리블 등에서 템플릿이나 키트를 얻을 수도 있다. 기본적으로 얻을 수 있는 플러그인 공식 사이트를 보자.

 

XD 공식 사이트에서 리소스 메뉴로 가면 된다.

 

리소스 아래에 플러그인, 앱통합, UI키트, 아이콘 세트의 하위 메뉴가 있다. UI 키트에서 위 3개는 모두 다운로드 받는 것을 추천한다. Apple Design은 맥에서 다운받아야 할 것 같다. 윈도우는 지원 안하는 듯.

 

다양한 UI 키트와 아이콘 세트도 제공하니 둘러보고 괜찮은 것들로 다운로드 하도록 하자.

이제 막 XD에 입문한 상태라 디테일한 리뷰는 나중에 작성을 따로 할 것 같다. 개인적으로 기획해야 할 서비스가 하나 있는데, 이번에는 XD로 모두 작업해 볼 생각이다. 하나의 서비스 전체를 기획해 보면 장단점이 확실히 보일 것 같다. 자세한 리뷰나 사용기는 추후에 다시 업데이트 하는 걸로.