코로나19 장기화로 협업 툴 시장이 급성장하고 있다고 합니다. 재택근무가 일상화되면서 화상회의, 문서관리 등 업무기능이 부각된 협업 도구 필요성이 커지고 있기 때문이라고 하는데요.

선택 아니라 필수…코로나에 ‘블루오션’된 15兆 협업툴 시장
선택 아니라 필수…코로나에 ‘블루오션‘된 15兆 협업툴 시장, 코로나19 팬데믹으로 ‘줌’ 이용자 하루 3억명 급증 ”협업툴 시장 선점하자”…네이버·카카오·KT ‘각축전’

코드에프 역시 코로나로 인해 전면 재택근무를 진행했었고, 현재도 코로나19 상황에 맞춰 부분 재택을 진행하고 있습니다. 무리 없이 재택근무로 전환하고 업무 진행을 할 수 있었던 이유는 코드에프의 협업을 중요시하는 문화와 사용하고 있는 다양한 협업 툴 덕분일 것입니다. 코드에프가 사용하고 있는 여러 협업 툴 중 2021년 초 도입하게 된 UI/UX 주요 툴인 피그마에 대해 이야기해보려고 합니다.

2021년 이전까지 코드에프의 UI/UX 작업 중심에는 스케치와 제플린이 있었습니다. 두 개 툴 모두 뛰어난 툴이었지만, 업무의 볼륨이 늘어나고 협업이 늘어남에 따라 만족스럽지 않은 부분들도 분명 존재했습니다. 두 개의 툴을 동시에 사용해야 한다는 번거로움이 있었고, 기기 연결 등의 제약으로 작업물의 편집과 업데이트를 원 작업자 또는 라이선스가 있는 작업자만 할 수 있다는 불편함이 있었습니다.

피그마로 전환을 하는 사안은 전부터 조금씩 논의되고 있었지만, 업무를 진행하면서 툴 전환을 해야 한다는 부담감 때문에 쉽지는 않았습니다. 새로운 프로젝트를 준비 중이었던 2021년 초부터 본격적으로 피그마 도입을 검토하기 시작했습니다. 원활한 작업물 관리와 협업의 관점에서 툴에 대한 스터디, 툴을 도입할 경우 소용되는 시간과 비용 등에 대해 면밀히 검토하는 데에만 약 3개월 정도가 걸렸습니다.

피그마의 대표적인 장점은 아래와 같습니다.

  1. 자동 저장: 가장 최신의 화면을 유지하는 피그마 특성상 버전관리를 위해 작업 파일을 재플린에 업로드하고 다운로드할 필요가 없습니다.
  2. 언링크의 불편함이 없음: 제플린으로 작업할 경우, 아이맥 계정과 언링크 되는 현상이 발생하기도 하죠. 피그마는 계정 생성만 하면 개인기기 연결 등의 과정이 필요 없고, 웹과 앱이 디바이스 수에 상관없이 작동한다는 장점이 있습니다.
  3. 올인원: 디자인, 프로토타이핑, 코드까지 피그마로 다 사용할 수 있습니다. 피그마는 프로토타이핑까지 가능하여 하나의 툴로 많은 작업을 연계할 수 있는 장점이 있죠.
  4. 실시간 협업: 피그마는 디자인 시스템을 구축하며 컴포넌트를 오토 레이아웃이나 반응형으로 제작할 때 까다롭고 헷갈리는 부분을 즉각 반영할 수 있는 실시간 툴입니다.

피그마의 단점은 아래와 같습니다.

  1. 한글 버그가 종종 발생합니다. 웹 버전 이슈는 많이 줄었지만, 데스크톱 용을 설치하여 사용할 때 한글 모음과 자음이 흩어지는 버그가 종종 발생한다는 단점이 있습니다.
  2. 프로토타입: 피그마는 프로토타입 구분을 위해 각 프로토타입의 페이지를 구분해야 합니다. 한 페이지에 한 프로토타입만 들어갑니다. 노션 임베드의 경우도 페이지 단위로만 가능합니다.

단점을 상쇄하는 피그마의 가장 큰 장점은 업데이트 주기가 빠르다는 것입니다. 초기 피그마가 갖고 있던 단점들은 빠른 업데이트를 통해 많이 해소가 되었고, 현재도 개선이 이루어지고 있습니다.

피그마가 가진 장단점을 분석하고 보니, 피그마라는 툴이 더 매력적으로 느껴졌습니다. 하지만, 스케치에서 피그마로 전환하는 데에는 시간과 인력의 누수가 생길 수 있는 일이었죠. 그래서 조금 더 면밀한 검토를 진행해보기로 했습니다.

스케치에서 피그마로

툴 전환은 정말 어려운 일입니다. 스터디를 위해 참고한 어떤 분은 ‘이사'라고 표현을 하기도 했습니다. 단순히 전환만 하면 되는 것이 아니라, 그동안 쌓아 놓은 디자인 시스템, 협업 규칙, 히스토리 파일 이사 등 다양한 부분에서 구체적인 액션 플랜이 나와야 하고, 이전에 없던 규칙을 만들어야 하는 일입니다. 매우 고통스러울 수 있죠.

이를 위해 이미 툴 변환을 시도한 국내외 기업들의 사례들을 찾아보았습니다. 그중 저희 조직과 비슷한 상황에서 (스케치 → 피그마 전환) 툴 전환을 겪은 분들이 작성하신 아티클 두 개를 소개합니다. 먼저 툴 전환을 경험한 조직의 사례를 보고 저희도 용기를 얻을 수 있었고, 툴 전환을 감행하게 되었습니다.

스케치에서 피그마로 바꾸면 일어나는 일 (번역)
제가 처음 접한 UI 디자인 툴은 스케치였어요, 딱히 강좌를 보고 익히지는 않았지만 구글링하면서 쓰다보니 어찌어찌 사용할 수 있게 되더라고요. 하지만 심볼이 뭔가 편리하면서도 완벽하게 편리하게 느껴지지는..
스케치에서 피그마로 디자인 시스템 옮기기 - Webactually
피그마는 브라우저 기반으로 운영체제와 관계없이 누구나 사용할 수 있고, 클라우드 기반이어서 언제나 최신 버전을 볼 수 있습니다.또 개발자와 디자이너의 협업과 커뮤니케이션이 용이합니다.이 때문에 피그마를 도입하려는 팀이나 기업이 많습니다. 하지만 쉽게 결정할 수 없어 망설여지는 부분들도 있겠죠.필자는 스케치에서 피그마로 옮아가는 과정에서 직접 경험한 고민과 깨달음들을 자세히 서술하면서 피그마로 안착하는 노하우를 알려줍니다

코드에프는 우선 새롭게 시작되는 프로젝트를 피그마로 진행하며 피그마 중심의 협업 규칙을 정립했습니다. 새로운 프로젝트 시작과 툴 전환의 시기를 맞추어 부드럽게 전환을 시도할 수 있었죠.

다행이게도, 이전 스케치에서 진행되던 프로젝트들은 마무리 단계이거나 운영단으로 넘어가 있었기에 해당 기획&디자인 파일들은 스케치와 제플린 라이선스를 유지하며 조금씩 옮기는 방법을 사용하게 되었습니다. 툴 전환을 단번에 끝낼 수 없다는 것이 아쉬웠지만, 이전 프로젝트 파일의 중요한 컴포넌트들이 소실되지 않도록 하기 위해서는 여러 번의 확인을 거치는 것이 낫다는 판단이었습니다.

마케터 입장에서 피그마 도입을 환영하게 된 이유

피그마에 대한 기초 스터디가 끝나자마자 툴 전환 논의에 속도가 붙었습니다. 마케터는 이 사안에 조금 더 불을 붙여보기로 했습니다. 마케터의 입장에서 직접 툴 스터디도 진행했고 해당 내용을 UI/UX 부서(기획팀&디자인팀)와 공유했습니다.

마케터는 마케팅 기획 의도를 디자인을 통해 효과적으로 전달해야 합니다. 마케터의 입장에선, 콘텐츠를 만들 때마다 효율적인 커뮤니케이션을 위한 효과적인 툴의 필요성을 느껴왔습니다. 피그마를 사용하게 된다면, 디자이너에게 작업을 요청하기 전 최종 결과물과 가장 유사한 형태의 구체적인 시안을 구현할 수 있다는 점과 콘텐츠 전달의 도구로 산출물을 사용할 수 있게 된다는 장점이 있었습니다.

figma_ima0

마케터 정연님이 한땀한땀 그려낸 짤

피그마 도입 전, 마케팅-디자인 협업은 상당히 번거롭고 복잡했습니다. 마케터는 디자인 산출물을 요청하기 위해 키노트를 이용해 기획안을 작성하고, 이를 파일로 다운받아 확인한 디자이너가 작업을 진행했습니다. 디자이너가 작업 완료한 산출물을 제플린에 업로드하면 마케터가 다시 다운로드받는 여러 단계를 거치는 플로우였죠. 수정사항이라도 생기면 채팅으로 하나하나 소통해야 했고, 수정이 완료된 파일을 디자이너가 다시 제플린에 업로드하고, 다시 마케터가 다운로드했습니다. 이런 방법은 마케터에게도, 디자이너에게도 엄청난 시간과 노력이 소요되는 일이었습니다.

피그마 도입 후, 마케터는 명확한 기획안을 작성해 실시간으로 공유할 수 있게 되었으며 제작 및 커뮤니케이션에 들어가는 시간을 엄청나게 아끼게 되었습니다. 이제 오타나 색상 변환 정도는 마케터가 직접 수정할 수 있는 환경이 되었습니다. 덧붙여, 종종 발생하는 기획팀과의 협업에서도 기획안과 협업 현황을 실시간으로 파악할 수 있어, 커뮤니케이션에 들어가는 시간이 확연히 줄어들었습니다.

마케터는 얼마나 행복해졌을까요? 피그마가 도입된 후, 코드에프에 합류하게 된 콘텐츠 마케터 정연님을 인터뷰해 보았습니다.

figma_ima0-1

마케터 정연님

마케터로서 피그마 사용, 어떤 점이 좋은가요?

타 팀과의 협업이 수월한 것이 가장 큰 장점이라고 생각해요.

마케터의 업무 특성상 디자인팀에 콘텐츠 제작을 요청하는 일이 매우 많거든요. 이전 회사 기억을 떠올려보면 피그마만 사용하는 지금과 큰 차이가 있죠. 기획안을 PPT로 만들어서 디자인 제작 요청을 올리고, 수정사항이 생기면 다시 PPT로 수정 요청서를 만들어 담당자에게 전달하는 과정의 반복이었어요. 최종본이 나올 때까지 파일만 수십 개가 쌓였죠.

피그마는 로그인만 하면 모든 히스토리가 웹 환경 안에 남고, 실시간 작업도 가능해서 콘텐츠가 완성될 때까지 번거로운 과정을 거치지 않아도 된다는 점이 정말 좋아요.

어떤 점이 불편한가요?

디자인 작업에 한계가 있다는 점이요. 기획서를 만들다 보면 이미지 누끼를 따거나 효과를 넣는 등 간단한 작업을 해야 하는 경우가 있는데, 피그마는 은근 이런 기능이 지원되지 않거든요.

그래서 어쩔 수 없이 포토샵이나 일러스트와 병행해서 쓸 수밖에 없어요. 그래도 피그마가 업데이트되면서 기능이 조금씩 발전 중이니 이런 불편함이 언젠가는 해결될 것이라 기대해요.

협업 툴로 피그마, 추천하나요?

네, 매우 추천해요. 특히 디자인팀과 협업이 많은 마케터라면 꼭 써보셨으면 좋겠어요. 저는 피그마를 사용하면서 ‘이런 것이 있으면 일하기 참 편할 텐데' 했던 것들의 80% 이상이 다 해결됐어요. ‘기획서 전달 → 디자인 → 콘텐츠 완성본 수령'을 반복해야 하는 콘텐츠 마케터에게 이보다 더 적절한 툴이 없겠다 싶을 정도예요. 협업 체계가 아직 안 만들어진 조직이라면 피그마를 도입해보시는 것을 추천해요.

그렇다면, 현재 피그마로 가장 많은 작업을 하는 UI/UX 부서는 어땠을까요? 다음 포스팅에서 코드에프의 UI/UX 협업툴 전환 이야기를 이어가도록 하겠습니다.


코드에프는 다양한 협업 툴을 사용해 업무를 합니다. 함께 연결되고 성장하는 코드에프의 협업 문화가 궁금하신가요? 코드에프는 지금 저희와 함께 서비스를 성장시키기 원하는 동료를 찾고 있습니다. 궁금하신 분은 아래 배너를 눌러 확인해주세요.

nblog_hire_banner_211014_3

코드에프의 문화가 궁금하신가요?
아래 인터뷰들을 확인하여 코드에프가 일하는 모습을 확인해보세요.

[코드에프 인(人)터뷰 #3] 팀장님, 우리도 협업 도구 쓸까요? 출간 기념 인터뷰 2편
[코드에프 인(人)터뷰 #3] 팀장님, 우리도 협업 도구 쓸까요? 출간 기념 인터뷰 1편
[코드에프 팀터뷰 #4] 코드에프 마이데이터팀을 소개합니다
[코드에프 팀터뷰 #3] 코드에프 디자인랩 기획팀을 소개합니다
[코드에프 팀터뷰 #2] 코드에프 데이터랩 API 백엔드 개발팀을 소개합니다
[코드에프 팀터뷰 #1] 사업팀을 소개합니다
[코드에프인(人)터뷰 #1] 디자인팀 김유진
[코드에프인(人)터뷰 #2] 개발자 조정민