디자이너와 협업할 때 유용한 툴, 피그마 속성 강좌

개발자를 위한 피그마 가이드북

 

디자이너와 평화롭게 잘 협업해보고 싶다면? 핏이 맞는 팀원을 만나는 것은 복불복이죠 .. 😭 하지만, 같이 일하는 디자이너분이 이런 생각을 하도록 도와드릴 수는 있어요! 

"지금까지 같이 일했던 개발자분들 중 ㅇㅇ님이 같이 일하기 진짜 좋다~"

하고요. 무슨 근거로 이렇게 얘기하느냐 하면.. 제가 바로 그 디자이너거든요!! =) 그래서 디자이너&개발자 협업 과정 중 어떠한 부분에서 소통의 불편함을 겪는지 잘 알고 있어요.

원활한 협업을 위한 가장 쉽고 빠른 방법 = 최적의 협업툴 사용하기

각설하고, 원활한 협업을 위한 가장 쉽고 빠른 방법은 바로, 최적의 협업툴을 사용하는 거에요! 아마 제플린을 많이들 사용하고 계실텐데 아쉽게도 제플린에는 없는 몇몇 기능들이 있어요.  

몇가지만 간략히 예를 들자면, 제플린에는 워크플로우(페이지 연결 관계, 전체적 흐름 순서), 특정 컴포넌트에 사용할 인터랙션 애니메이션 종류와 자세한 속성, 반응형 관련 속성(가로/세로 정렬) 등등은 표시되지 않아요. 그래서 이러한 내용들은 디자이너가 제플린 외의 형식으로 (PPT, 슬랙 등) 전달해주시거나 아니면 개발작업 하시다가 디자이너님에게 여러번 물어보셨어야 했을거에요. 

이러한 이슈들은 협업 시 겪을 수 밖에 없는 과정 중 하나라고 가볍게 여기실 수도 있을거에요. 그런데 그 가벼운 이슈 중 위에 언급했던 이슈들은 제플린 대신 피그마라는 협업툴을 사용한다면 충분히 미연에 예방할 수 있는 간단한 방법이 있어요. 그렇다면 피그마 사용법을 익혀서 예방하시겠어요? 아니면 앞으로 1년, 5년, 10년을 그 자잘자잘한 이슈들을 계속 반복적으로 겪으시겠어요?

저는 어느 날 개발자분들과 협업하다가 우연한 기회에 피그마라는 툴을 접하게 되었어요. 피그마는 쉽게 말하면 포토샵 + 제플린이에요. (이해를 돕기 위해 포토샵을 예로 들었지만 피그마와 포토샵은 엄연히 기능이 다른 툴이에요) 그런데 이 피그마라는 툴이 너무나도 신세계인거에요! 개발자분들은 어떻게 느끼실지 모르겠지만 디자이너 입장에서는 제플린을 사용하는 것이 상당히 불편했거든요. 물론 제플린을 아예 안 쓰는 것보다야 낫긴 하지만요.

그런데 피그마로 디자인 가이드 내용을 공유하면 그동안 제플린에 표시할 수 없었던 내용들까지 다 자동으로 표시가 돼요. 그럼 개발자님도 제플린 외에 어쩔 수 없이 PPT, 카톡 등으로 전달받곤 했던 기타등등의 내용들을 이제 더 이상 여기저기에서 확인하실 필요도 없게 되는 거고요. 피그마 하나만 확인하면 되니까요. 

그리고 디자이너가 작업한 시안과 실제 개발된 산출물의 디자인이 다르게 나온 경험이 있으실거에요. 이는 여러가지 이유가 있겠지만 크게 다음 두가지 이유때문에 발생한다고 보시면 돼요. 

1. 개발작업을 위해 필요한 내용들이 제플린(디자인 가이드)에 충분히 표시되지 않는 것 
2. 그 부족한 내용들을 다지이너가 텍스트로 직접 작성 시, 실수로 무언가 잘못 표기하는 경우. 또는 업데이트 된 내용을 미처 마저 다 실시간 업데이트 하지 못하는 경우

이 중 1번은 조금 전에도 얘기했던 부분들이에요 - '제플린에 표시할 수 없었던 내용들'. 2번은 디자이너가 수작업으로 가이드를 작성할 때 발생할 수 있는 문제에요. 예를 들어 'A페이지의 확인 버튼을 누르면 B버튼으로 이동하게 해주세요' 이런 내용은 제플린에 표시할 수 없기에 별도의 텍스트로 작성해야 하잖아요? 사람이 수작업으로 작성하는 것이니 당연히 간혹 실수가 발생할 수 밖에 없어요. 실시간 업데이트도 불가능하고요. 기획이 바뀔 때마다 파일 여기저기에 있는 그 많은 관련 내용들을 일일이 다 찾아거 그걸 또 수작업으로 다 변경해줘야 하거든요. 그런데 피그마를 사용하면 디자인 요소의 속성들이 '자동'으로 '실시간' 싱크가 맞춰져서 이런 실수가 발생할 일이 없어요. 

그리고 무엇보다 가장 좋은 건, 아주 쉬워요! 새로 공부해야 할 것도 거의 없고 노트북에 뭔가 새로 설치해야 할 필요도 없어요. 제플린과 거의 유사하기 때문에 개발자님은 제플린에는 없던 기능에 대한 사용법들만 살짝 훑어봐주시면 돼요. 공부랄 것도 없이 한 번만 사용해 보시면 금방 익히실 수 있을 거에요. 그리고 피그마는 웹에서도 사용할 수 있기 때문에 노트북에 프로그램을 설치할 필요도 없어요. 당연히 윈도우, Mac 다 지원하고요. 

여기까지 읽으시고 이제 피그마를 사용해보고 싶은 마음이 생기셨나요? 그렇다면 이제 남은 문제는, 디자이너님을 설득해야 한다는 점이에요. 디자이너님이 피그마를 써야 해당 디자인 가이드 내용을 피그마로 전달받을 수 있거든요. 디자이너님이 포토샵, 일러스트레이터를 사용하고 계신다면 피그마로 갈아타는 것이 200% 1000% 좋은 선택이에요. 그런데 스케치나 XD를 사용하고 계신다면 굳이 피그마로 갈아타지 않고 그 툴들을 계속 사용하시는 것도 괜찮아요. 스케치, XD는 피그마와 유사한 툴들이라 거기에도 제플린 같은 기능이 있을거에요. 단지 좀 불편한점은 스케치는 유료이고 윈도우에서 사용하지 못한다는 점, XD는 개발자님 노트북에 프로그램을 설치해야 한다는 점이에요. 스케치와 XD도 좋은 툴들이지만 사실 대세는 피그마이기는 해요. 우버, 에어비앤비와 같은 유니콘 스타트업부터 마으크로소프트와 같은 거대 기업까지도 피그마를 쓰고있을 정도니까요. 

여튼 같이 일하는 디자이너님이 포토샵, 일러스트레이터를 사용중이라고 가정하고 이어서 말씀드릴게요. 디자이너가 피그마 사용법을 익히는 것은 어렵지 않아요. 사용 방법이 비슷하거든요. 문제는 기존에 다른 툴로 작업했던 디자인 작업물들의 형식을 바꿔줘야 한다는 점이에요. 포토샵, XD, 일러스트와 다 호환이 되기는 하지만 완벽하게 호환되지 않기 때문에 어느 정도 수작업을 해줄 수 밖에 없어요. 안타깝게도 그래서 이 부분은 여유가 좀 된다면 아르바이트 외주를 권장드리고 싶어요. 외주를 구하려면 대표님 승인도 필요할텐데 대표님에게는 첨부한 대표님용 PDF파일을 보내주세요. 디자이너님에게도 마찬가지로 첨부한 디자이너용 PDF파일 또는 아래 내용을 복붙해서 보내주세요. 외주를 구하는 것마저 귀찮으실 경우엔 그냥 저한테 외주 요청 주셔도 되고요. 

개발자님이 훗날 어느 유명한 유니콘 스타트업의 핵심 개발자님이 되는 과정에서 이 이 튜토리얼이 아주 쬐애~금이라도 뭔가 좋은 역할을 할 수 있었기를 바랍니다. 🤣

 

To. 디자이너님

피그마에 대해 이미 많이 들어보셨을거라고 생각합니다. 포토샵이나 일러스트레이터 등 기존 주류 그래픽 툴과 사용 방법이 거의 비슷해요. 디자이너인 제가 장담컨데 포샵, 일러를 사용해봤던 디자이너분이라면 피그마 사용법도 금방 익히실 수 있어요. 피그마 공식 유튜브 채널에 사용방법이 아주 자세하게 잘 나와있으니 그 영상들을 봐주시는 것도 좋아요.

그런데 문제는 이미 기존에 다른 툴로 디자인 작업을 해놓았기 때문에 피그마로 이어서 작업하려면 그 파일들을 피그마 파일로 변환해야 한다는 점이에요. 직접 하시기엔 꽤나 귀찮고 시간 잡아먹는 일일테니 변환 작업은 아르바이트 외주로 맡기자고 대표님에게 살짝쿵 제안드려 보세요~! ^^

 

목차

1. 피그마 사용 전 필수 준비사항 및 선수지식
2. 디자이너와 협업 시 빈번하게 발생하는 소통 문제 해결하기
3. 기타 알아두면 좋은 내용들

 

강의 교재 보시다가 이해가 잘 되지 않는 부분이 있다면 언제든 편하게 문의주세요! 인프런으로 문의 주셔도 되고요 인스타그램으로 문의 주셔도 됩니다!  @needesign_official