고3의 좌충우돌 Figma 정복기

올리기 직전에 튕겨서 싹다 날리고 빡친 마음에 씁니다... (문법 죄송합니다)

마른하늘에 날벼락

저는 원래 XD를 사용해서 디자인을 했습니다. 사실 이전부터 피그마로 넘어가야된다는 생각은 늘 있었습니다. 왜냐면 피그마가 유행이였기 때문이죠. 유행에 민감한 1인 하지만 피그마로 쉽사리 넘어가지 못한 데에는 몇가지 이유가 있었습니다. 일단 어도비에서 만든 프로그램들이랑 버튼 위치와 단축키에 약간씩 차이가 있었는데 하필이면 몇 안되게 쓰는 단축기들과 버튼이 달라 항상 넘어갈 엄두를 못내고 XD로 돌아왔었습니다. 그렇게 피그마를 쓰고 싶다는 생각은 접어두고 XD에서 작업을 계속 해나갔습니다. 작업물이 싸여가다보니 더욱더 옮길 생각이 사라졌습니다. XD도 잘 쓰면 나름 좋은 툴임이 분명했죠.

문제는 스타트업 한다면서 구독하고 있는 툴이 노션 하나인 노션 짱👍 극강의 효율러에게 무료로 사용하던 XD가 어느날 말을 걸어오면서 시작되었습니다.

"7일 후 유료 전환"

"...??"

사실 돈을 낼 생각이 있다면 별 문제가 없긴 한데, 돈내고 쓰기는 아깝다는 생각에(무슨 심보인지...) 부랴부랴 피그마로 옮겨가기로 결정했습니다. 다행히 급한마음에 구글링으로 찾아보니 XD 작업물을 피그마로 옮길 수 있는 방법이 있었습니다. 하지만 폰트랑 컬러같은 요소들이 다르다보니 맘처럼 옮겨지지는 않았습니다.

도대체 누가 이렇게 옮겨달래...

그렇게 옮기니만 못한 상태에서 갑자기 제로 베이스인 상태로 피그마로 이사오게 되었습니다.

디자이너가 코딩하면 이런 느낌일까?

오토 레이아웃이고 컴포넌트고 베리언트고 새롭게 알아야 될게 너무 많았습니다. XD에서는 대충 PPT만들듯이 디자인을 했다면 (물론 피그마도 그렇게 해도 무방합니다) 이젠 만들기 전에 무엇이 필요한지 생각을 하고 짜임새 있게 구상하지 않으면 나중에 만들다가 큰코 다치는 상황이 되었습니다.

"나중에 가서 꼬이지 않기 위해서 생각을 하고 해야된다."

저희 개발자님이 항상 하시는 말씀입니다. 사실 결과물을 만들기위해서 컴퓨터 앞에서 작업하는 시간은 그렇게 길지 않으십니다. 컴퓨터 앞에 앉은지 체 5시간이 안되서 금방 작업물이 나오는 것을 보고 저는 개발자님이 일하기 싫어서 그동안 미루시는 줄 알았습니다. 하지만 피그마를 사용하고 나서는 생각이 전혀 달라졌습니다.

오토 레이아웃과 컴포넌트, 베리언트를 사용하려면 디자인으로 옮기기 전에 필요한것들이 뭔지, 어떻게 변형되고 어디까지 활용할 수 있는지를 체크해야합니다. 그리고 이 디자인이 구현 가능한지도 중요한 요소입니다.

예전부터 Dribbble 에서 디자인을 참고하면서 느낀것이 하나 있었습니다. 정말 기깔나는 디자인들이 많이 있지만 정작 실제 프로덕트에서 그런 디자인을 만나기는 드물다는 사실이죠. 직감적으로 저는 그 디자인이 구현할 수 없거나 대충 그러한 문제가 있을것이다라고 생각만 했죠. 사실 저도 예전에 구현 안된다는 소리를 듣기도 했습니다.

오토 레이아웃을 이용하는 것은 블록쌓기를 하는 것과 비슷했습니다. 그리고 html과 css를 해본 경험상 코딩하는 과정과 상당히 유사하다는 느낌을 받았습니다. (그렇다고 완전 똑같은건 아닙니다) 다시 말해서 코딩은 스티커 붙이기처럼 아무데나 순서나 규칙없이 막 붙여넣기 어렵다는 것입니다. 결국 디자인을 할 때 마인드셋 자체를 바꿔야 했습니다. 피그마를 하게 되면서 얼떨결에 더욱 개발 친화적인 디자인을 생각할 필요가 있게 된것이죠.

장점과 단점

이제 피그마 쫌 쓴다고 말할 수 있는 단계(?)에서 당연히 컴포넌트와 베리언트, 오토레이아웃, 플러그인과 커뮤니티같은 피그마의 대표 기능들 모두가 피그마의 최대 장점이었습니다. 사실 그동안 XD를 사용하면서 불편했던 수없이 많이 만든 버튼들과 구현에 한계가 있는 프로토타입등의 문제가 한번에 해결되었습니다. 물론 이런 극강의 효율은 쉽게 얻어지지는 않았습니다. 팔자에 공부는 없을 줄 알았는데 살다보니 툴을 배우겠다고 책까지 사서 읽었습니다. 그날 피그마 오토 레이아웃 업데이트 된게 함정 위에서도 언급했지만 피그마로 디자인을, 그러니까 프로덕트를 디자인 하려면 사전에 생각을 오래, 꼼꼼히 해야합니다. 그리고 오토레이아웃 같은 기능으로 옮기게 된다면 자연스럽게 개발 친화적인 디자인을 하게 되죠. 저희는 모든 페이지를 반응형으로 만드는데 개발 친화적 디자인은 큰 이점이 되죠. (분명 XD도 될텐데, XD 미안...)컴포넌트를 잘만 이용한다면 삽질의 횟수를 줄일수도 있고요. (잘못 이용한다면 삽질 횟수는 증가할 수 있습니다) XD가 갑자기 결별 통보(?)를 하면서 옮겨오긴 했지만 그렇게 꾸역꾸역 옮겨온 것이 지금와서는 참 잘했다는 생각이 듭니다.

트집을 하나 잡아본다면 프로토타입이 XD보다는 좀 (아니 많이) 버벅거린다는 것이였습니다. 그리고 배우는데 소모되는 머리(?)가 많습니다. 문과생으로써 수없이 강좌 돌려본 입장에서 피그마는 이과생들이나 개발자분들이 훨씬 이해를 빨리 하실 것 같습니다. 물론 저러한 단점들은 모두 감수할만한 툴임이 분명합니다. 그러나 여전히 무료버전 쓰는 1인...

몇 안되게 그리드도 쓰고 기능은 다때려박은 프레임

쓰는 기능만 쓰는 디자이너의 클로징

사실 반응형 프로덕트를 만들면서 그리드도 잘 안쓰는 사람입니다.(...?) 정말 쓰는 기능만 쓰는 경향이 있는데 뭐... 다들 그렇지 않나요? 제가 아무리 피그마가 익숙해졌다고 한들 지금 이 툴의 기능을 100프로 쓰지 못하고 있음이 분명합니다. 한 10프로는 쓰고 있을까 싶지만 그래도 XD를 떠나 처음 이사왔을때 보다는 조금 친숙해졌기 때문에 뭐가 좋니 나쁘니 이런 여유도 생기고 하나봅니다. 베리언트까지 어느정도 잘 쓰기 시작하니 작업이 수월해진 한 디자이너가 갑자기 기분이 좋아서 쓴 쓰다가 날리기 전까지는... 글이였습니다.

여러분은 어떤 툴을 사용하시나요? 하루아침에 툴을 바꿔야 한다면 어떻게 하실건가요?