문구는 피그마에서 직접 바꿔주세요!
쏘카는 피그마로 어떻게 일하고 있을까
디자인 프로그램인데요... 구글 독스 같아요!
쏘카의 브랜드디자인팀은 마케팅본부에 속해있다. 브랜딩과 세일즈 관련 다양한 디자인 작업을 진행하는 만큼 마케터와 협업할 일이 굉장히 많다. 협업의 효율과 속도를 높이기 위한 방법을 고민하던 중 Figma(이하 피그마)라는 프로그램에 대해 알게 되었다. 피그마의 첫인상은 ‘웹 기반 프로그램으로 공동 작업이 가능한 UI 디자인 툴’이었다. 공동 작업이 가능하다는 점에서, 쏘카에서 업무의 기본 툴로 사용하고 있는 ‘구글 독스(Google Docs)’가 떠올랐다. MS 오피스로 문서 작업을 하다가 처음 구글 독스를 접했을 때의 느낌이란! 각자 만든 문서를 취합하는 과정을 거치지 않아도 되고, 최최종까지 무한 생성되는 수많은 버전의 파일들이 없는 그 신세계!
이미지출처: https://torihinn.com/Figma-Brand-Refresh피그마가 실시간 공동 작업을 표현할 때 사용하는 '여러 색상의 마우스 커서와 작업자의 이름' 모티브를 보는 순간, 바로 구글 독스를 떠올릴 수 있었다. (사족이지만 2019년 하반기에 피그마의 리프레시된 브랜드 디자인이 공개되었는데, 이 그래픽 무드에 대한 호감이 프로덕트의 호감으로 옮겨 가기도 했다.)
빠르게 준비하여 실행하고 개선하는 쏘카의 마케팅 액션 진행 속도는 디자인의 속도에도 큰 영향을 미친다. 2019년 하반기, 쏘카는 외부 퍼포먼스 마케팅 대행사에서 제작하던 온라인 디스플레이 광고(이하 DA 광고) 이미지 소재를 내부 디자인 조직에서 제작하기로 결정했다. 이에 디자인 팀에서 소화해야 할 이미지의 수가 굉장히 많아졌고, 조금 더 효율적인 업무 방식이 필요하다는 생각이 들었다.
마침 당시 UI 디자이너들 사이에서 높은 점유율을 차지하고 있던 Sketch(이하 스케치)와 공동 작업이 가능한 피그마를 비교하는 글이 쏟아져 나오고 있었다. 나의 마음속에는 두 가지 생각이 싹텄다.
1. 반복되는 프로모션의 상세 페이지를 UI 시스템처럼 만들면 어떨까? UI 툴을 프로모션 페이지에 적용해보고 싶다.
2. 문구 A/B 테스트가 필요한 DA 광고 이미지에서는, 문구만이라도 마케터가 직접 바꾸면 업무에 들어가는 공수가 줄어들겠는데?
이미지출처: https://uxtools.co/survey-2020/](https://uxtools.co/survey-20202019년~2020년은 피그마가 스케치를 제치고 사용률이 증가하고 있던 시기다. 많은 비교 글들이 온라인에 등장했고, 덕분에 우리의 디자인 업무를 수월하게 만들어 줄 힌트를 얻게 되었다.
여러 가지를 고려하며 디자인 툴의 사용성 테스트를 진행했고, 그 결과 2020년 상반기에 정식으로 피그마를 디자인&협업 툴로 사용하기 시작했다. 마케팅본부 구성원에게 이 툴에 대해 설명할 때는 ‘디자인 프로그램이지만 구글 독스처럼 실시간으로 함께 파일을 보며 공동 작업을 할 수 있다.’고 설명하며 일단 한번 같이 써보자고 얘기하곤 했다.
2020년 하반기부터는 프로덕트디자인팀이 속해있는 프로덕트본부에서도 스케치와 제플린에서 피그마로 이주를 시작했다.
"브랜드-프로덕트 디자인 간의 파일과 라이브러리를 유연하게 공유할 수 있어서 좋습니다. 공유하는 작업 영역들이 많아질수록, 협업뿐 아니라 두 팀 간의 업무에 대한 이해도도 높아지고, 더 다양한 디자인 시안 작업도 가능하게 되었습니다. 결과적으로 기존보다 더 높은 퀄리티의 협업 결과물을 만들 수 있게 되었습니다. 피그마는 정말 협업에 최적화된 툴이라고 생각합니다."
- 언자(프로덕트 디자이너)
다른 직군의 동료들과 같은 프로그램을 쓰는 것의 장점
이미지캡처: [figma.com/sketch-alternative] http://figma.com/sketch-alternative피그마가 직접 강조하는 특장점 포인트인 "같은 페이지 상에 있다", "실시간 협업이 가능하다", "(디자인) 맥락 속에 직접 피드백할 수 있다"를 실제 업무를 하며 몸소 체감할 수 있었다.
피그마는 협업을 할 때 그 진가가 드러난다.
웹을 통해 최신 버전 동기화가 자동으로 이루어진다. (버전 관리가 된다) → 모두가 같은 버전의 파일을 볼 수 있다. → 실시간으로 공동 작업이 가능하다 & 같은 파일 상에 여러 피드백을 줄 수 있다.
단순한 텍스트 수정을 위해 동료에게 파일을 공유할 때, 레이아웃까지 마구잡이로 수정을 하지 않을까 하는 솔직한 걱정이 있었다. 하지만 피그마를 활용하면 공유한 파일을 동료가 어떻게 수정하고 있는지 실시간으로 볼 수 있고, 해당 파일로 보완도 바로바로 해줄 수 있기 때문에 여러모로 안심이 되었다.
“피그마를 이용해 간단한 문안 변경은 마케터가 직접 진행할 수 있게 되어 다양한 문안 AB 테스트를 더 손쉽게 진행할 수 있었어요. 소재 수정 프로세스가 더 효율적으로 바뀌니, 디자이너와 마케터가 소재 디벨롭을 위한 논의에 시간을 더 쏟을 수도 있고요! 또한, 피그마를 통해 실제 매체에 적용될 안을 마케터가 실시간으로 직접 확인할 수 있으니, 매체에 더 적합한 문구와 소재 제작 요청을 할 수 있게 되었습니다.” - 제인(퍼포먼스 마케터)
문구 수정이 필요할 때, 준비한 수정 원고가 기존의 디자인 레이아웃에 영향을 미치지 않는 적절한 분량인지 체크하고 개선하는 과정도 훨씬 빨라졌다. 피그마 사용 이전에는 디자인 파일을 갖고 있는 디자이너에게 마케터가 수정 문구를 전달하면, 디자이너가 이를 적용해보고 그 결과물을 구두로 혹은 수정 문구를 얹은 이미지를 추출해서 전달했어야 했다. 하지만 지금은? 동시에 같은 파일에 접속하고 같은 화면을 보면서 변경할 문구를 넣어본다. 결과를 즉각적으로, 그리고 눈으로 바로 확인할 수 있어 개선 포인트를 찾는 시간이 더 빨라질 수밖에 없다.
디자인 진행 주기가 빠를 때에는, 중간 공유 혹은 보고를 위한 별도의 프레젠테이션 문서 정리가 어려운 순간들이 있다. 특히 여러 개의 이미지를 세트로 제작하고 있거나, 페이지가 많은 온라인 문서를 수정 중일 때는, 사소한 수정과 이미지 추출을 반복하는 시간조차 아쉬울 때도 존재한다. 이럴 때 모두가 같은 파일을 볼 수 있다는 점은, 곧 피그마를 프레젠테이션 툴로도 활용할 수 있다는 것을 시사했다.
우리는 여러 부서가 함께 미팅을 하는 단계에서도 가능하다면 피그마 파일로 디자인 진행 사항을 종종 공유하고 있다. 특히 웹 페이지 디자인의 경우, 피그마에서 제공하는 프로토타입 기능들로 실제 웹상에서의 동작을 상상할 수 있도록 프레젠테이션 할 수 있다는 것도 장점이다.
“스크롤에 따라 모션이 있거나 depth가 많은 캠페인 성격의 페이지를 디자인 요청드리는 경우가 많아요. 피그마를 사용하기 전에는 페이지의 모션을 구두로 상의하며 머릿속으로 상상했어야 했어요. 피그마는 프로토타입을 통해 실제로 페이지가 어떻게 구현되는지 눈으로 볼 수 있어서, 고민되는 부분에 대해 개선점을 찾기도 쉽고 더 효율적으로 페이지를 디벨롭할 수 있게 되었어요!”
- 앤지(브랜드 마케터)
때로는 디자이너들의 고민을 파일을 통해 가감 없이 보여주는 것이 결과물에 대한 서로의 이해를 맞춰나가는 데 도움이 된다. 협업 중인 동료에게 피그마 파일 상에 직접 코멘트를 써달라고 한다. 문구 변경이나 오탈자 확인 과정에서는 디자인 파일 상의 특정 위치를 찍어 코멘트를 작성하는 기능이 특히 도움이 된다.
그래픽 디자이너들이 체감하는 피그마의 장점
1. 자동 저장
파일 상에서 벌어지는 여러 가지 변경 사항은 별도로 저장 버튼을 누르지 않아도 실시간으로 기록되고 ‘자동 저장’된다. 피그마에서 습관처럼 ctrl+S를 누르면, ‘figma auto-saves our work’라는 문구가 자신만만한 이모지들과 함께 뜰뿐이다.
2. 오토 레이아웃 기능
오토 레이아웃 기능을 이용하면, 미리 설정해둔 여백(padding을 생각하면 이해하기 쉽다) 등의 속성을 유지하면서, 오토 레이아웃을 지정한 프레임(adobe 계열 프로그램의 artboard 개념) 내에 포함된 오브젝트가 차지하는 면적이나 텍스트 길이에 따라 프레임의 크기가 달라진다.
이 기능을 잘 활용하면 꼭 UI 디자인이 아니더라도 다양한 그래픽 템플릿을 만들 수 있다. 우리 팀은 말풍선같이 프로모션에서 자주 사용하는 요소를 오토 레이아웃으로 만들어두어 그래픽 제작 시 소요되는 시간을 많이 줄였다. 이 외에도 반복되는 구조의 온라인 문서 디자인을 시스템화 시키는 시도도 계속하고 있다.
3. 다양한 플러그인
피그마의 기본 그래픽 툴이 아주 뛰어난 것은 아니다. 하지만 이런 부족함을 채워줄 수 있는 다양한 플러그인이 존재한다. 피그마는 프로그램 상에서 플러그인을 검색하고, 설치하고, 사용하는 과정이 매우 쉽게 설계되어 있다.
포토샵이나 일러스트레이터에 비하면 피그마 자체의 그라디언트 툴 기능은 단순한 편이다. 대신 피그마 프로그램에서 바로 접근 가능한 커뮤니티 메뉴에서 ‘gradient’를 검색하면 20개 이상의 그라디언트 관련 플러그인이 나온다. 적절한 그라디언트 플러그인을 사용하면 기존의 순정(?) 피그마에서는 만들기 어려웠던 ‘mesh gradient’를 만들 수도 있다.
구글 독스의 스프레드 시트에 있는 정보를 가져와서 피그마 파일 내에 채워주는 Google Sheets Sync, 한 덩어리의 텍스트를 한 줄씩 끊어주는 Text Cutter, 아이소매트릭 그래픽을 손쉽게 만들 수 있는 Isometric/Easometric, 이미지 추출 시 이미지 압축을 좀 더 세밀하게 조정할 수 있는 TinyImage Compressor(유료)는 내가 피그마를 쓰면서 꾸준하게 활용하고 있는 플러그인이다.
사용하며 아쉽다고 느끼는 피그마의 자체 기능은 웬만한 플러그인이 해결해 주는 경우가 많고, 여러 플러그인을 테스트하며 기존의 디자인 툴에서는 없었던 새로운 업무 방식을 찾게 되기도 한다.
4. 라이브러리
디자이너들끼리도 매번 찾는 파일이나 속성들이 있다. 로고 파일이라든지, 우리 브랜드에서 쓰는 특정 컬러 팔레트의 색상이나, 다양한 차량 모델 이미지라든지... 이런 부분은 피그마의 ‘팀 라이브러리’에 저장해둘 수 있다. 어도비 클라우드도 사용 시도를 몇 번 해보았으나, 우리 팀은 피그마의 라이브러리가 더 사용하기 수월하다고 느꼈다. 라이브러리가 컴포넌트(이미지 파일, 오브젝트 요소)와 스타일(컬러, 텍스트 속성)로 나뉘어 있는 점이 특히 유용했다.
그래픽 디자이너로서 느끼는 아쉬움
위에서 언급한 장점들에도 불구하고 그래픽 디자이너로서 피그마에 느끼는 아쉬움도 분명히 존재한다.
1. 웹 기반이고 UI 디자인 툴에 가깝다 보니, cmyk 컬러 설정, 비트맵 이미지의 dpi 설정과 같은 기본적인 인쇄 관련 기능이 부족하다.
2. 텍스트 편집 디자인에 제약이 있다. 문장 또는 문단 단위의 설정이 인디자인만큼 디테일하지 않다. 한글을 사용하는 디자이너에게는 아쉬운 점이 더 크다. 단어 기준 줄 바꿈(CSS에서의 word-break:keep-all) 세팅이 없는 것도 그 아쉬움 중 하나이다.
3. 컬러 채널이 제한적이고, 사진 이미지의 편집 역시 제한적이다. 특히 애플이 사용하고 있는 P3 컬러 채널 지원이 되지 않는데, 이로 인해 이미지의 컬러 채널 변경이 필요하면 포토샵을 사용할 수밖에 없다.
위와 같은 이유로 편집 디자인을 디테일하게 해야 하거나 인쇄를 해야 하는 문서는 인디자인과 일러스트레이터를, 디테일한 사진 편집은 포토샵과 라이트룸을 여전히 사용하고 있다. 피그마가 강력하고, 흥미롭고, 여러 면에서 도움이 되는 디자인 툴이긴 하지만, 기존의 디자인 프로그램들이 그랬듯 각 프로그램마다의 장점은 각각 다르기 때문이다.
혹시... 피그마 홍보대사 같나요?!
함께 일하는 마케터 동료들에게 ‘피그마를 통해 직접 텍스트를 수정하거나, 진행 중인 디자인 시안을 직접 눈으로 보니 좋다.’는 반응을 얻었고, 테스트 사용 때부터 실제 유료 플랜 승인을 받는 과정에서 하도 피그마 피그마 노래를 불렀더니 주변에서 피그마 홍보대사 아니냐는 농담도 들었다.
개인적으로 2020년 디자인 팀의 가장 큰 변화 중 하나로 피그마 도입을 꼽을 만큼, 이는 업무에 큰 영향을 미치는 결정이었다. 하지만 지금, 피그마 도입 후 일련의 과정을 돌이켜보며 생각했을 때, 정말 중요한 것은 피그마라는 툴 그 자체는 아니었던 것 같다. 피그마를 통해 디자이너가 아닌 직군의 동료들에게도 디자인 작업을 쉽게 공유하고, 피드백을 받기 위한 효과적인 방법을 찾았다는 것이 더 의미 있고 중요한 결과가 아닌가 싶다.
익숙한 툴을 제쳐두고 새로운 툴에 적응하느라 고생했던 우리 팀 디자이너 동료들에게도 감사한 마음이 크다. 디자이너 동료들 역시 더 나은 결과를 만들기 위해 공유와 피드백이 중요하다고 생각하고, 또 오픈 마인드로 피드백을 수용하려는 마음을 갖고 있기 때문에, 다소 부담스러울 수 있는 디자인 파일 공유도 흔쾌히 하고 있다고 믿는다.
ps. 어쨌거나! 우리 모두 피그마의 편리함의 취해 다시는 이전으로 돌아가지 못할 것 같다.
written by. 브랜드디자인팀 귄귄
쏘카다운 비주얼이 무엇일지 고민하고 디자인합니다.
디자인 협업에 필요한 도구와 방법을 테스트하길 즐깁니다.
