지난 포스팅에서 코드에프의 UI/UX 협업 툴 전환에 관한 이야기를 시작했죠. 마케터가 왜 피그마 사용을 두 손 들고 환영하게 되었는지에 관해서도 이야기 했습니다. 그렇다면 현재 피그마로 가장 많은 작업을 진행 중인 UI/UX 부서는 피그마로 전환하는 과정에서 어떤 경험을 했을까요? 지금 UI/UX 부서는 행복할까요?

UI/UX 부서는 툴 전환 후 어땠을까?

피그마 사용이 마냥 좋았던 마케터들과 달리, 업무 중 전환이라는 챌린지를 겪어야 했던 기획팀과 디자인팀은 어땠을까요? 피그마로 전환한 지 벌써 1년, 대부분의 작업을 피그마로 진행하는 코드에프 UI/UX 부서를 인터뷰해 보았습니다.

툴 전환에 참여했던 4인 (디자이너: 주디, 킴디 / 기획자: 잭대니얼, 김신디)

지난 1년, 피그마를 써보니 가장 좋은 점은 무엇인가요?

• 주디: 기존 UI 툴인 “스케치"와 가이드라인 툴이라 할 수 있는 “제플린"을 합친 툴이어서, 하나의 툴로 기획/개발단과 커뮤니케이션이 편해졌어요. 피그마는 디자인 유행이 변화함에 따라 심플한 공통 UI를 구성할 때 간편하고 빠르게 디자인할 수 있다는 점이 편리해요.
  피그마 미러 앱으로 프로토타입, 인터랙션 시연 등을 할 수 있고 모바일로 화면을 확인하면서 디자인작업을 할 수 있다는 점도 장점이죠. 가장 좋은 점은, 재택근무 환경이 회사와 동일한 애플 OS가 아닌 윈도우 환경이라고 해도 사용할 수 있다는 점이죠.

• 킴디: 웹 기반으로 이루어진 프로그램이어서 PC 환경에서 자유로울 수 있어요. 오토 레이아웃 기능 등 모바일 환경에 편리한 기능도 많고요. 간격이나 배열 수정도 편리해요.

• 잭: 툴 자체 화면크기의 제약이 없어 기획서 작성 편의성이 극대화된다는 점이 큰 장점이죠. 기획자가 실제 화면 사이즈에 대한 개념을 가지고 기획을 할 수 있다는 것도 좋은 점이에요.
  협업의 편리성 측면에서도 스케치보다 피그마가 월등해요. 피그마는 수정된 부분을 코멘트 기능으로 체크가 가능하고, 모두가 동일한 시간에 동일한 작업 사항을 공유할 수 있거든요.

• 김신디: 피그마는 웹 기반으로 이루어진 프로그램이어서 운영체제와 상관없이 어디서든 파일을 확인하고 작업할 수 있다는 것이 큰 장점이에요. 저는 회사에서는 아이맥을 사용하고 집에서는 윈도우 노트북을 사용하고 있는데요, 재택근무할 때 불편함 없이 피그마를 이용한 업무를 할 수 있어서 좋습니다.

디자이너 킴디와 주디

그렇다면, 피그마 사용의 단점은 무엇인가요?

• 주디: 피그마는 컴포넌트(재사용 가능한 웹의 구성요소) 관리 시, 사용(연동)되고 있지 않은 컴포넌트가 무엇인지 한눈에 확인할 수 없다는 단점이 있어요. 결국 화면마다 사용된 컴포넌트를 하나씩 클릭하며 확인할 수밖에 없죠.
  이 점이 디자인팀의 입장에서 더 부각되는 단점인데요. 디자인팀은 시안 작업할 때 컴포넌트를 생성하며 디자인 규칙을 만들기 때문에, 가끔 불필요한 컴포넌트들이 생겨나거든요. 업무를 진행하다 보면 일단 넘겨야 할 때가 많다 보니 나중에 정리를 하려고 보면 사용된 라이브러리가 혼돈의 카오스가 되는 것이죠.

• 킴디: 한글 텍스트 입력 오류가 있어요. 메모장에 텍스트를 옮겨 붙여넣어야 하는 번거로움이 있죠. 이미지 편집에 한계가 있어 포토샵과 같은 다른 툴도 병행해서 사용해야 하고요.

• 잭: 비즈니스 성향에 따라 외부 고객과의 접점이 생기면 고객에게 피그마 계정생성을 권유해야 한다는 정도일까요? 당연한 이야기지만 화면 디자인에 특화된 툴이어서 그 외의 기획 문서 작업은 다른 툴과 병행해서 사용하기도 해요.

• 김신디: 페이지별 히스토리 관리가 안 된다는 단점이 있어요. 제플린에서는 수정 버전을 업로드하면 페이지마다 히스토리가 저장되어서 바로 비교할 수 있었거든요. 피그마는 파일 히스토리 관리는 되지만 수정된 페이지별로 비교할 수 없다는 것이 아쉬워요.

피그마를 통한 협업, 추천하시나요? 협업 규칙은 어떻게 만드셨어요

• 주디: 디자이너들만 있는 회사라고 해도 피그마 협업 추천해요. 작년 초, 툴 도입을 스터디하고 업무에 바로 적용하느라 깊게 익히지 못했지만, 지금도 팀 내부에서 꾸준히 익히고 서로 알려주며 업무에 편리하도록 디자인팀 내부 협업규칙을 보완하고 있어요.
  프로트엔드 개발자들과 앱 개발자들에게 전달하는 요소가 일부 상이해서, 프로젝트를 진행하면서 해당 개발단의 피드백을 반영해 협업 규칙을 보충하고 있고요.

• 킴디: 피그마를 이용한 협업 추천해요. 체계적인 가이드가 필요해 보이지만, 피그마 가이드를 작성하고 전달하는 등 내부에서 규칙을 잡아가고 있어요.

• 잭: 협업을 위해 태어난 툴 답게 그 부분에서는 현존하는 모든 툴 중에 가장 편리한 것 같아요. 당연히 누구에게라도 추천하고 싶어요. 협업 규칙은 아직 숙제로 남아 있는 부분이지만, 기획자란 직군 자체가 여러 파트와 협업해야 하다보니 자연스럽게 협업 규칙을 고민하고 만들 수밖에 없긴 해요.

• 김신디: 피그마는 협업만을 위해 쓴다고 해도 과언이 아닐 정도로 협업에 효율적이기 때문에 추천해요. 협업 규칙은 프로젝트를 진행하면서 디자인, 개발 담당자들과 논의하며 만들어나갔어요.

기획자 잭과 신디

툴 전환을 하는 데 있어서 가장 어려웠던 점은 무엇인가요?

• 킴디: 피그마의 컴포넌트와 스케치의 심볼 기능 차이로 인해 기존 작업물을 변환할 때 오류가 있어 시간 소요도 많이 되었어요. 그게 가장 어려웠죠.

• 잭: 역시 제일 꺼려졌던 부분은 스케치를 주로 사용했기 때문에 기존 작업물의 이관이 어려울 것이라는 점이었죠. 분명히 툴 전환에 따르는 소요 시간도 있고요.

• 김신디: 기존 스케치 작업 파일 이관이 가장 어려웠어요. 심볼과 컴포넌트의 개념이 비슷하지만 변환되지 않는 부분들은 피그마에 맞춰 일일이 수정을 해야 해서 많은 시간이 소요되거든요.

툴 전환을 부드럽게 할 수 있었던 비결은 무엇인가요?

• 주디: 스케치와 비슷하지만 다른 설계 시스템 개념을 익히느라 다소 어렵기는 했어요. 그런데도 툴 전환이 어렵지 않았던 것은 작업 되어 있던 스케치 파일을 피그마로 파일 전환 할 수 있었다는 점이 가장 커요. 기존의 스케치 심볼 속성을 모두 가져오지는 못해서 피그마로 수정할 경우 컴포넌트로 재생성하거나 하나씩 수정해야 하는 원본이 아직 일부 남아있긴 해요.

• 킴디: 툴 전환이 어렵지만, 그런데도 저희가 어렵지 않게 전환할 수 있었던 이유는 스터디 할 수 있는 시간이 주어졌기 때문이라고 생각해요. 툴 전환과 프로젝트 업무를 동시에 진행해야 해서 어려움이 있었지만, 그만큼 툴을 빨리 익힐 수 있었어요.

• 잭: 부드러웠던 부분과 부드럽지 못한 부분이 공존해요. 이전부터 스케치를 사용했다는 것이 피그마에 익숙해진 가장 큰 이유라고 생각해요. 기본 개념이 같고, 단축키 정도만 새로 익혀도 사용에 불편함이 없었거든요. 하지만 아직도 익숙하지 않거나 활용하지 못하는 기능들도 남아있어요. PPT를 사용하던 기획자가 피그마로 전환한다 생각하면 진입장벽이 아주 낮다고 할 수는 없어요.

• 김신디: 기존 사용하던 스케치와 크게 다르지 않고 기본적인 기능만 알고 있으면 누구나 쉽게 사용할 수 있기 때문에 툴 전환이 잘 이루어진 것 같아요.

최종적으로 피그마를 선택하게 된 이유는 무엇인가요?

• 주디: 피그마로 툴 전환을 하며 도입까지 여러 가지를 고려했던 것 같은데, 가장 저희와 적합한 툴이라고 생각했어요. 조금만 익히면 실무에 바로 적용할 수 있고, 여러 직군이 사용하기 편한 툴이라는 결론을 내리게 되었어요.

• 킴디: 프로토타이핑을 이용해 디자인 시안을 구현하기 매우 쉬워요. 저는 그 점이 피그마를 선택하는 데 중요하게 작용했다고 생각해요.

• 잭: 피그마를 선택한 것은 대표님의 권유가 가장 컸고, 그 권유를 받아들이게 된 것은 새로운 툴에 대한 호기심이 있었기 때문이고요. 저는 잘 바꾼 것 같아요.

• 김신디: 스케치를 사용할 때는 하나의 파일을 다른 사람이 작업하려면 클라우드에 올리고 다운로드받고, 해당 파일을 다시 클라우드에 올려야 해서 아주 번거로웠어요. 피그마는 그 문제를 한 번에 해소해주는 툴이에요. ‘하나의 파일을 여러 명이 동시 작업할 수 있다'는 점이 피그마를 선택한 이유라고 할 수 있죠.

툴 전환이 완료된 후 합류한 2인 (디자이너: 전디/ 기획자: 슭)

기획자 슭과 디자이너 전디

이전에는 어떤 툴을 사용해서 작업하셨나요?

• 전디: 포토샵, 일러스트레이터 등을 사용했어요

• 슭: 주로 기획서, 제안서, 발표 자료 등의 문서를 작성하며 PPT와 포토샵을 병행하여 사용했어요.

피그마 써보니, 가장 좋은 점은 무엇인가요?

• 전디: 컴포넌트, 오토레이아웃 등의 자동화로 작업자들이 반복 작업 할 수 있는 것들을 최소화해주어 편리해요. 이게 가장 큰 장점이라고 생각해요.

• 슭: 공유 기능이 가장 좋아요. 링크만 공유한다면 실시간으로 개정된 내용을 빠르게 전달할 수 있는 점이 불필요한 소통을 줄여주거든요. 기획에서 전달하고자 하는 장표의 길이, 흐름이 끊기지 않도록 공간의 제약이 없는 것도 좋아요.

피그마, 무엇이 불편한가요?

• 전디: 컴포넌트에서 처음 만들어진 ‘부모' 역할을 하는 레이어가 어디에서 ‘자식' 컴포넌트로 사용되고 있는지 찾는 기능이 없는 것이 아쉽죠. 종종 작업을 하다 보면 컴포넌트를 수정하거나 ‘자식' 컴포넌트를 찾아야 할 때가 있는데, ‘자식' 컴포넌트가 ‘부모' 컴포넌트를 찾아가는 기능이 있지만 반대 기능은 아직 없다는 것이 의아해요.

• 슭: 이미지나 텍스트를 외부에서 복사해서 가져오는 호환성은 좋지만, 피그마에서 특정 이미지를 복사하는 것은 불가하다는 점이 의외로 불편해요. 이외에도 숨은 기능이나 사용법을 익히는 데 숙련 시간이 필요하기도 하고요.

피그마를 통한 협업, 경험해보니 추천할 만 한가요?

• 전디: 네, 특히 UX 작업은 협업이 정말 중요하거든요. 피그마는 기획자, 디자이너, 개발자 등의 실무자들이 서로 같은 문서 내에서 의사소통이 용이하기 때문에 추천해요. 디자이너가 개발자에게 개발 가이드를 할 때 이미지를 크롭해서 전달하지 않아도 되고, 디자인 작업물 옆에 설명을 여러 방식으로 자세하게 추가할 수 있어 서로 이해도가 높아지는 점이 만족스러워요.

• 슭: 기본 개념만 안다면 작업 및 공유에 용이하다고 생각해요. 특히 여러 측면에서 불필요한 시간 소요가 없다는 점이 추천 의향을 뒷받침해 주고요.

피그마 외에도 기업의 협업을 돕는 도구들은 매우 다양합니다. 디지털 전환이 확산되는만큼 기업은 협업 툴을 이용한 업무수행  방식에 익숙해져 가고 있습니다. 특히나 코로나19로 비대면 업무가 익숙해지면서 협업 툴은 선택이 아닌 필수가 되었죠. 장인은 도구를 탓하지 않는다지만, 좋은 도구를 사용하면 결과물을 내는 과정이 조금 더 수월할 수는 있을 것입니다.

피그마가 UI/UX 업무에 가장 완벽한 툴이라고 할 수는 없을 것입니다. 코드에프 기획자와 디자이너, 마케터의 인터뷰를 통해 확인하셨겠지만, 여전히 피그마는 단독으로 쓰기에 부족합니다. 그런데도, 피그마는 현재 코드에프의 UI/UX 협업 방식에 가장 적절한 툴임이 분명해 보입니다. 덧붙여서, 협업 툴은 우리의 협업을 돕는 도구일 뿐, 사용하는 사람들의 규칙과 협업 문화가 바탕이 되어야 합니다.

협업을 위해 고민하고, 더 좋은 업무 환경을 만들기 위해 지속해서 노력하는 코드에프가 궁금하신가요? 코드에프는 지금 함께 협업하며 서비스를 성장시키기 원하는 동료를 찾고 있습니다. 아래 배너를 눌러 확인해보세요.

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

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