UXUI 디자인 툴 피그마
아직도 피그마를 모르는 사람이 있다고?
제가 요새 많이쓰기도 하고 너무 애정하는 툴 "Figma" 피그마를 소개하고 싶어서 글을 작성해봅니다.
소프트웨어 개발 회사를 운영하면서 내부, 외주 프로젝트에 있어 디자이너 및 의뢰사와 산출물에 대한 초기 모습에 대한 부분을 피그마로 진행하기 때문에 필수도 사용법을 잘 알아야하는 툴이기도 했습니다.
직장인 분들이라도, 만약 신제품을 개발하면서 웹 및 앱 개발 및 UI UX에 함께 참여하는 역할도 담당한다면 이 툴을 꼭 배워두시는 것을 추천합니다.
(사실 마케터 같은 경우도 그로스 해킹적 전략을 담당자가 직접 수행하기 위해서는 UX/UI와 웹 및 앱 안에서의 여러 요소들을 쉽게 수정 디자이너, 개발자에게 이러한 제안을 쉽게 할 수 있는 자유도가 있는게 좋다고 생각하기 때문에 배우는 것을 적극 추천합니다.)
그 중에서도 코딩을 할 시간이 없거나, 사실 그렇게 복잡성이 큰 프로젝트가 아니라면
(대시보드나 원~투 페이지 플랫폼) 노코드 툴로 작업을 하는 것이 좋다고 하더라구요~
즉, 피그마로 일단 디자인 작업을 하고
노코드 툴(bubble.io - 웹개발 , Appy Pie - 모바일 앱 개발, AWS Amplify Studio -로우코드 ) 에 피그마에서 만든 디자인을 import하면 개발이 가능합니다.
원래는 어도비 XD를 썼었는데, 피그마가 훨씬 사용성도 좋고 뭔가 더 안정감이 있다고 느꼈습니다. (또한 요새 젊은 디자이너 및 개발 회사는 대부분 피그마를 많이 쓰는 추세라서 피그마를 모르면 뒤쳐진다는 느낌을 받을 수 있습니다.)
피그마의 장점
1) 코딩을 몰라도 됨 (그래도 최소 조건으로 html, css를 읽고 해석할 수 있으면 더욱 좋겠습니다.)
2) 실시간 동시 수정 가능 (협업 디자인 툴로서도 쓰이기 때문에 팀원과 동시 제작이 가능합니다.)
3) 이미 많은 디자이너들이 만들어 놓은 템플랫이 존재함 (특정 아이덴티티가 있는게 아니라면 그대로 리퍼런스해서 쓰면 시간이 절약됨)
4) 프로토타입 제작 가능 (프로토타입 : 개발 중인 기기, 프로그램, 시스템 등의 성능 검증 및 개선을 위하여 상품화에 앞서 제작하는 시제품)
만약 클라이언트 제품 제작을 하거나, 투자자들 혹은 팀에게 출시/본격적인 개발 전 프로토타입을 선보일 수 있습니다.
5) 툴 사용법 강의 1개 (40분 ~1시간) 들으면 바로 개발/디자인 시작이 가능함 (다른 툴에 비해서 훨씬 난이도가 낮아요)
6) 브레인 스토밍 기능도 있어서 아이디어나 어떠한 서비스에 대한 기획할때 사용하기 좋아요.(Figjam)
피그잼 - 브레인스토밍
피그마 살펴보기
실제 제작하는 대시보드(웹/앱) 스크린입니다.
모든 요소 하나하나에 독립성이 있어서 작은 부분이라도 쉽게 수정이 가능해요
각 element에 대한 디자인 수정 또한 정말 자율적이라서 내가 상상한 대로 많은 시도 또한 가능합니다.
처음부터 디자인이 어렵다면? 커뮤니티를 참고하세요
저는 디자인이나 UIUX 기획을 전공하거나 전문적으로 배운것이 아니기 때문에
제가 처음부터 기획하는 것은 무리가 있었어요
따라서 다양한 디자인 아이디어를 얻는 것이 정말 큰 부분을 차지했어요.
피그마 커뮤니티에는 나보다 훨씬 잘하는 디자이너들이 이미 무료로! 자신들의 작업물을 올려놓았어요.
만약 내가 개발하고자 하는 서비스와 정말 비슷한 구조를 가지고 있다고 생각한다면 참고하거나 복사하여서 사용하면 훨씬 프로세스에 걸리는 시간이 단축됩니다.
이렇게 다양한 작업물들이 무료로 올라와있어요
예시를 들고자 무비스트리밍 서비스의 웹 UI 키트를 보여드릴게요~
저 위에 get a copy를 클릭하면 내 대시보드로 자동으로 복사되고, 그대로 쓸 수 있어요 :)
인스타그램 UI를 레퍼런스로 해서 소셜앱을 만들고 싶다면 인스타그램 Mockup 키트를 통해 아이디어를 얻을 수도 있겠죠?
피그마 정복, 1시간이면 가능해요!
피그마 정복은 정말 30분~1시간이면 가능합니다! 유투브에 이미 많은 튜토리얼들이 있어요.
되도록이면 영어권 강사들이 올려놓은 강의를 추천드려요!
내가 참고한 강의
