피그마로 디자이너와 개발자가 협업하기

디자이너와 개발자는 보는 관점의 차이가 있어 프로젝트를 바라보는 방식이 완전이 다릅니다. 그래서 서로 생각도 다르고 이해하기도 힘듭니다만, 지속적으로 조금씩 서로를 이해하려고 하고 좀 더 효율적으로 일을 하기 위한 방법을 모색해야 합니다. 2021년 이전까지 UI/UX 작업의 중심에는 스케치와 제플린이 있었습니다. 두 개의 툴은 모두 뛰어난 툴이였지만, 업무의 볼륨이 늘어나고 협업의 효율성이 중요해짐에 따라 두개의 툴을 동시에 사용해야 하는 번거로움과 기기연결등의 제약으로 만족스럽지 못한 부분들도 있었습니다.

피그마로 전환을 하는 사안은 전부터 조금씩 논의되고 있었지만, 업무를 진행하면서 툴 전환을 해야한다는 부담감 때문에 쉽지는 않습니다. 하지만 장점이 워낙 뚜렷하고 요즘에 대세인 협업툴이기에 앞으로 긍정적인 생각을 가지고 적응해나가야 합니다. 하여 피그마로 개발자와 디자이너가 협업할 때 도움이 될 만한 내용을 포스팅을 해보겠습니다.

피그마의 장/단점

장점

피그마는 협업을 할 때 그 진가가 드러납니다. 웹을 통한 최신 버전 동기화가 자동으로 이루어지므로 버전관리가 되며 모두가 같은 파일을 볼 수 있습니다. 하여, 실시간으로 공동 작업이 가능하며, 같은 파일상에 여러 피드백을 줄 수 있습니다.

단순한 텍스트 수정을 위해 동료에게 파일을 공유할 때, 레이아웃까지 마구잡이로 수정을 하지 않을까 하는 걱정이 있었지만 피그마를 활용하면 공유한 파일을 동료가 어떻게 수정하고 있는지 실시간으로 볼 수 있고, 해당 파일로 보완도 바로 해줄 수 있기 때문에 여러모로 안심이 됩니다. 결과를 즉각적으로 눈으로 바로 확인할 수 있어 개선 포인트를 찾는 시간이 더 빨라질 수 밖에 없습니다. 모두가 같은 파일을 볼 수 있다는 점은, 곧 피그마를 프리젠테이션 툴로도 활용할 수 있다는 것을 시사합니다.

라이이브러리를 공유하기 쉽습니다. 라이브러리란, 한 프로젝트 파일의 Asset Style을 클라우드에 공유 라이브러리로 저장해서 다른 프로젝트에도 그대로 불러올 수 있는 기능을 말하는데, XD의 경우 ‘텍스트 스타일 색삭 적용’등의 문제가 있었습니다. 반면 피그마에서는 여러 프로젝트에 하나의 디자인시스템 라이브러리를 링크하고 적용하기가 무척 편리합니다.

단점

폰트가 없는 사람이 들어와서 클릭할 시 폰트 오류가 생겨 틀어지는 오류가 발생합니다. 링크기반이라 보안상 디자인 유출 이슈가 있습니다.

”스크롤에 따라 모션이 있거나 depth가 많은 캠페인 성격의 페이지를 디자인 요청하는 경우가 많아요. 피그마를 사용하기 전에는 페이지의 모션을 구두로 상의하며 머릿속으로 상상했어야 했어요. 피그마는 프로토타입을 통해 실제로 페이지가 어떻게 구현되는지 눈으로 볼 수 있어서, 고민되는 부분에 대해 개선점을 찾기도 쉽고 더 효윻적으로 페이지를 디벨롭할 수 있게 되었어요!”

피그마와 개발 환경 이해하기

피그마는 개발자가 만든 툴입니다. 개발 환경에 적합하게 구현되다 보니 그 특성을 고스란히 담고 있습니다. CSS를 이해하고 있다면 이해하겠지만 CSS의 속성인 부모, 자식의 관계로 컨스트레인트를 설정하거나, 오브젝트를 프레임의 가로폭에 맞춰서 space between으로 배치하거나, display:flex 등 css 용어가 많이 나오는데 CSS를 공부하여 많이 알아두는 것을 추천합니다. 피그마의 오토 레이아웃은 CSS flex 형태로 되어있습니다. 즉, 오토 레이아웃은 개발 구조와 동일하게 되어 있습니다. 요즘 트렌드인 반응형 레이아웃을 만드는데 최적의 환경입니다. 개발하기 쉬운 구조로 디자인을 만들 수 있기 때문에 사실 디자이너보다 개발자가 더 환영하는 툴이어야 합니다. 코딩 관련 플러그인도 많이 추가가 되고 있습니다.

디자인 리소스 정리 잘하기

레이어, 버튼, 컴포넌트, 오토 레이아웃 등 다양한 디자인 리소스의 네이밍을 개발 환경에 맞게 만들어서 개발자에게 전달하세요. 파일명, 레이어명이 바로 코드로 바뀔 수 있도록 파일명과 레이어명을 잘 정리해두세요. 두번 작업하지 않도록 하는 네이밍이 필요합니다. 네이밍이 힘들다면 선배 디자이너 또는 개발자에게 네이밍 정리하는 다양한 노하우를 전수 받으세요. 네이밍 룰은 모두 달라서 각 플젝에 투입된 사람 또는 회사에서 정한 룰이 있습니다. 꼭 공유하고 일을 시작하세요.

새로운 트렌드, 지식 공유하기

CSS, 플러그인 등 새로운 트렌드와 지식을 공유해서 일을 하신다면 좀 더 매끄러운 의사소통이 됩니다. 요즘은 온라인 컨퍼런스가 많이 있습니다. 디자인, 개발, 트렌드 등 다양한 컨퍼런스를 함께 참석하고 서로 공유한다면 같이 성장하고 좋은 추억도 쌓입니다. 친하기의 연장선이지만 같은 분야를 이야기 할 동료가 생기는 것도 좋은 경험입니다.

뷰어모드 살펴보기

이 모드를 보는 사람은 보통 완성된 시안을 공유받은 사람으로 파일을 생성한 디자이너의 동료가 될 것입니다. (ex.클라이언트, 개발자, PM, 마케터, 또 다른 디자이너)

뷰어모드(veiw only) 에서는 (C)캔버스 영역에 있는 시안에 대해 Asset(ex. icon, button)을 이동시키거나 수정을 할 수 없습니다. 즉 시아나에 물리적 영향을 주지 않을까 하는 부분에 대해서는 걱정하지 않으셔도 됩니다.
뷰어모드에서는 공유받은 시안 또는 아이디어에 대한 피드백이 가능합니다.
Zeplin 프로그램과 유사한 기능으로, 구현을 위한 CODE 기반의 시안 확인이 실시간으로 가능합니다.
선택한 이미지 Asset 또는 특정영역에 대하여 PNG, PDF, JPG, SVG등의 파일로 다운로드를 받을 수 있습니다.
(B) 좌측 패널 : 피그마 결과물 파일에 대한 Page를 탭하여 페이지를 전환 (아래 이미지를 B영역)하거나, (C)에 배치된 Asset들을 선택 후 (B) Layers 패널에서 Asset의 계층 구조를 확인하고, 원하는 Asset을 정확하게 선택할 수 있습니다.
(C) 캔버스 : 편집 모드와 달리 뷰어 사용자는 캔버스에 배치된 Asset들을 수정할 수 없습니다. 대신 아래 그림의 Layer 패널 B영역을 참고하여 C영역의 특정 Asset을 선택할 수 있습니다.
(D)우측패널 : C영역을 선택하면, Inspect 패널에서 코드 기반으로 Assets들의 컬러, 폰트 사이즈, Width, Height, font-weight 등의 속성등을 확인할 수 있으며 덕분에 개발자가 C영역의 화면을 구현 시 매우 유용합니다. Export 패널에서는 캔버스 영역에 있는 특정 Asset들에 대하여 로컬 컴퓨터로 이미지를 다운로드 할 수 있습니다. 다운로드 가능한 이미지 형식은 png, jpg, svg입니다. PNG 추출 시, 1배수부터 3배수 추출 여부를 추가적으로 선택 가능합니다.

이미지 Export : 이미지 추출 시, 편집 모드에서는 Design 패널에서 가능하고, 뷰어모드에서는 Export패널에서 가능합니다. 이미지를 선택하고 우측 패널에 보이는 [+]또는 [-]버튼을 사용하여 다운로드용 파일 형식을 선택 할 수 있습니다.

벡터이미지 : 벡터이미지의 Asset의 경우 SVG 코드로 직접 복사가 가능합니다. 벡터 기반 객체 선택 > 마우스 우클릭 > Copy/Pasre > Copy as SVG

by UX/UI Designer MISOJINA