brunch

라이킷 21 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 기획자 첼라 Jun 25. 2021

기획자의 툴

MS office vs Sketch vs Figma

2019년, 나는 작은 스타트업에서 UI/UX 기획을 비롯한 디자인을 담당했다.

(비율로 따지면 기획 업무가 60% 디자인 업무가 40% 정도였다.)

오랜 시간동안 웹기획자로만 일해왔던 내가 디자인 업무까지 담당하고 있다고 하면 대부분

".....??"

이런 반응이다. 당연하다. 디자인 교육을 받거나 경력이 있는 것도 아닌 상태에서 그 두가지를 겸업하고 있다는 것은 적어도 이 업계에서는 이해가 안되는 일 중에 하나일 것이다. 이렇게 전혀 다른 분야의 업무를 겸업할 수 있었던 것은 다름 아닌 업무 툴의 변화 때문이었다.

|| 여전히 훌륭한 MS office, 하지만 세상은 변한다.

아직까지 한국의 IT 프로젝트에서 기획 업무의 툴로 많이 쓰이는 것은 단연 Power point, Excel 을 필두로 하는 MS office 제품들이다. 국내 어떤 업종의 프로젝트를 진행하더라도 고객과 실무자 사이에 가장 유연한 호환성을 보여주는 도구이기 때문에 적어도 업무적 커뮤니케이션을 실행할 때 최소한 툴의 호환성 때문에 고민할 필요가 전혀 없다.

하지만 이런 문서 형태의 툴은 기획자로 하여금 고민에 빠져들게 할 때가 있다.

빈 화면에 기획자가 고안한 화면을 그려내는 것에는 제약이 없으나, 요즘처럼 모바일의 작은 사이즈가 중심이 되는 프로젝트에서는 실제 기획자가 제작한 화면이 실제 단말 화면에서 소화가 가능한지 여부는 알 수 없고(따라서 대부분 이런 사항은 디자인 작업에서 걸러진다.) 화면 변화에 애니메이션 효과를 주고 싶은 부분에 대해서는 텍스트로만 설명하는 수 밖에 없는 (이런 문제는 디자인 단에서 한번, 퍼블리싱 단계에서 또 한번 걸러진다.) 단점이 있다.

즉, 현재 IT 프로젝트의 트랜드에 맞춰 문서화 작업을 하는데 100% 소화가 힘들고, 무언가 변경 사항이 생길때마다 수작업 형태의 문서 버전업을 반복해서 거쳐야하는 면에서 효율성이 떨어진다.

|| Sketch + Zeplin

그래서 처음 대안으로 선택했던 툴이 바로 스케치(Sketch) 였다.

이 프로그램의 치명적인 단점은 Mac에서만 사용할 수 있다는 것.

물론 스케치가 등장하기 전에도 수많은 프로토타이핑 툴이 있었다.

하지만 무료로 제공되는 프로토타이핑 프로그램의 경우, 내가 표현하고자 하는 화면을 100% 구현하기가 힘들었고, 유료 툴의 경우 최소한 화면 퍼블리싱에 대한 기본적인 지식이 있어야 제대로 사용할 수 있었고 무엇보다 프로젝트 내부에서(혹은 사내에서) 그런 것으로 기획 업무를 진행하는 것을 그 누구도 원하지 않았다. 게다가 익숙한 툴로 하면 하루면 끝내는 업무를 새로운 툴에 적응까지 해가면서 하는 것은 일정에 무리를 초래하기도 했기 때문에 사실상 스케치 이전의 프로토타이핑 툴은 거의 써본 적이 없다고 하는 것이 솔직한 것일지도 모르겠다.

스케치로 업무 툴을 바꿈으로 인해 확실히 획기적인 변화는 시작되었다.

일단 백지에 단순한 도형과 색상만으로 설계하던 것들을 실제 단말 사이즈와 거의 동일한 프레임 안에 구현해볼 수 있다는 점.

기본적으로 제공되는 프로토타이핑 기능을 통하여 적어도 70% 정도는 실제 구현 화면에 대한 체크를 할 수 있다는 점에서 획기적이었다. 경험과 예측으로 설계를 해야핬던 부분을 실체화 할 수 있다는 점에서도 대단한 경험이었고, 라이브러리를 사용법을 익히면 그동안 수없이 해오던 Version up의 수고로움을 어느정도 벗어날 수 있었다.

이런 흐름에 발맞춰 최근 일부 기업 프로젝트에서는 이 스케치나 Adobe XD 를 사용한 기획 업무를 진행하기도 한다. 하지만 스케치를 사용한다고 해도 여전히 남아있는 숙제들이 있다.

스케치로 구현한 화면을 공유하기 위해서는 원본의 스케치 파일을 공유해야 한다. 즉, 상대방도 Mac을 사용하고 있어야만 해당 파일에 대한 확인이 가능하다. 또한 협업자와 이 화면에 대해 의견을 주고 받기 위해서는 별도의 툴을 사용해야 한다. 바로 제플린(Zeplin)

제플린을 연동하면 스케치 파일을 이 제플린에 올려두고, 여러 협업자와 함께 각 화면에 대한 피드백을 주고 받을 수 있다. 또한 개발자는 각 디자인 에셋을 다운로드 하거나 기본적인 CSS 코드를 확인할 수 있다. 바꿔말하면 내가 스케치로 기획 작업한 것을 제플린 통해서 Mac 사용자가 아닌 사람에게도 공유할 수 있고 코멘트를 통한 피드백이 가능하다. 다만 제플린을 통해서는 액션이 없는 단 컷에 대한 공유만 가능하다. (열심히 달아놓은 프로토타이핑은 물거품처럼 소용없는 짓이 되버린다는 것) 제플린 코멘트를 통해서 주고 받은 피드백을 반영한 후에는 업데이트된 파일을 다시 올려야하는 번거로움 또한 감수해야 한다.

프로젝트의 특성에 따라서 이 스케치 + 제플린이 제격인 프로젝트도 분명 있기는 하겠지만, 여튼 소프트웨어 프로젝트에서 기획 업무만 두고 본다면 스케치 + 제플린은 글쎄. 한 30% 정도의 수고로움을 덜어준다고 해야할까. 업무 자체보다도 기획이라는 포지션이 프로젝트 내에서 가지고 있는 특성상 고객, 디자인 실무자, 개발 실무자와의 커뮤니케이션, 대상자의 PC 환경을 고려한 호환도까지 따진다면.... 이멤버 리멤버로 추천하기에는 살짝 애매한 감이 있다.

|| Figma 현재로서는 가장 최선의 선택

그렇게 스케치 + 제플린 조합의 업무를 3개월간 해보고 나서 변경한 툴이 바로 피그마(Figma) 이다.

이 Figma의 사용 소감을 이야기하자면, 심플하지만 꼭 필요한 기능, 플러그인을 넓은 활용도와 제플린의 핵심 기능을 더한.

따라서 현재로서는 가장 최선의 기획/디자인 툴이라고 느꼈다.

일단 Figma의 가장 큰 장점은, 호환성을 걱정하지 않아도 된다는 점이다.

이 프로그램은 로컬에 설치할 수 있는 앱을 제공하긴 하지만, 기본적으로 웹을 기반으로 돌아가는 프로그램이기 때문에 협업자의 PC가 윈도우든 Mac 이든 걱정할 필요가 없다.

브라우저를 기반으로 여러 협업자와 공유하고 각 협업자의 역할에 따라 권한을 분리하여 부여할 수 있기 때문에 작업 화면 자체에 변동이 발생하는 우려를 최소화 할 수 있다. 즉 제플린과 같은 별도의 협업 툴에 연동하지 않아도 된다는 것이다.

일단 이 두가지만 하더라도 스케치와 제플린을 사용하면서 발생하는 단점을 완벽하게 보완해준다.

정말 아름답지 않은가!!

그리고 또 한가지의 장점.

스케치용으로 나온 디자인이나 UI kit을 그대로 import 하여 사용할 수 있다. 최근엔 여러 디자인 아웃소싱 사이트에서 피그마용 파일이 제작되어 나오기도 하는데 그래도 아직까지는 단연코 스케치 파일, psd 파일이 주를 이루는데 이 중 스케치 파일을 사용할 수 있다는 것만으로도 활용도는 두말할 것도 없이 Up!

또한 파일마다 다르기는 하지만 일부 Vector 원본도 사용할 수 있다. (이것은 원본 벡터 구성이 어떻게 되어있느냐에 따라서 조금 다르기는 하다.)

이런 나름의 역사를 거쳐 하얀 화면에 블랙과 온갖 톤의 그레이로 그야말로 와이어프레임 작업만 하던 내게 디자인 업무에 쉽게 다가갈 수 있는 길이 열렸다. 물론 그렇다고 지금까지 디자인에만 종사하던 프로 디자이너들의 실력에는 절대 미치지 못하지만 상주 디자이너가 없는 팀 내에서 발생하는 단순한 디자인 업무는 충분히 커버가 된다.

전혀 내 분야가 아니었던 업무에 대한 접근이 가능해지니 확실히 제품을 만들어갈때의 밀도가 달라졌다.

디자인적인 시야에서 예쁜가 아닌가의 문제를 떠나 효율적인가 아닌가, UX 구성과 디자인 사이의 충돌점이 없는가 등등 이전과는 다른 관점에서 고민을 하게되고 충분히 효율적인 해결책을 고안할 수 있는 토대가 되어주고 있다.

만약 당신이 이미 수십년 경력의 기획자라면 굳이 새로운 툴을 써보라고 권유하고 싶지는 않다.

아무리 시대가 변하고 트랜드가 어떻고 해도 이미 수십년 해왔다면, 당신이 가장 익숙한 툴로 가장 효율적인 커뮤니케이션을 해내는 노하우 정도는 충분히 있으리라고 생각된다. 여유가 생겨서 그 틈에 공부하는 것보다는 지금 익숙한 것들로 빠르게 일하는 것이 훨씬 효율적인 선택일 것이다.

하지만 만약 지금 초급 또는 초중급자 정도 경력의 기획자라면 MS 오피스의 숙련도를 올리는 대신에 이 새로운 툴(특히 피그마)에 대한 학습을 적극 추천한다. 아마 우리가 예상하는 것보다 더 빨리 이 IT 업계는 변할 것이며, 업무 포지션의 질서 또한 바뀌게 될 것이다.

덧.

최소 2년안에는 피그마가 스케치를 완전히 따라잡아 순위가 바뀔 것으로 조심스럽게 예측해본다.

읽어볼만한 글