기획자, 디자이너, 퍼블리셔의 경계를 허무는 물건, 피그마(Figma)
Figma를 우연히 접하게 되었다. 뭐 Zeplin 같은 툴이겠거니 하고 웹기반 툴이 뭐 대단한것이 있겠어 라며, 그동안 화면 설계를 하던 키노트를 쓰는것보다 좀더 편하고 정교하지 않을까 하는 생각으로 써보게 되었다. 그런데, 이게 쓰면 쓸수록 물건이었다. 브라우저 기반의 자바스크립트로 개발된 일렉트론으로 만들어져 있는 Figma는 완전한 그래픽 디자인 툴이었다. UX 화면 설계만 하려고 했더니 거의 완벽한 디자인, 프로토타이핑까지 가능할 줄이야.
개발 경력만 십수년의 Startup Founder, 피그마(Figma)를 쓰다보니 어느새 디자이너가 되어있는 나를 발견..
먼저 창업한 회사의 제품 UX 화면설계를 직접 하면서 UX에 눈뜨게 된것은 사실이다. Figma를 사용하기 전에는 대부분 키노트를 이용해서 화면을 구성하고 머릿속으로 다음화면을 상상하며 만들곤 했다. 머릿속으로 UI 화면을 상상하는것은 생각보다 와닿지 않는다. 디테일한 색상, 위치, 다른 컴포넌트들과의 조합들이 한눈에 들어와야 하고 버튼들을 눌러봐야 느낌이 정리가 되기 때문이다. 그래도 방법이 없으니 Wireframe 화면들을 그려가면서 결과물을 만들고, 프로토타이핑을 해보고, 전문 디자이너에게 디자인을 맡기고, 개발을 진행, 그렇게 몇개월이 지나야 내가 최초에 상상했던 화면들이 살아서 움직이는것을 보게 된다. 이때, 아차. 이게 아닌것 같은데? 라는 생각이 드는 순간은 이미 디자인과 개발은 마무리 되고 있는 단계라니. 물론, 생산성 앱 서비스에서의 마무리란 없다!
이미 개발의 구조가 잡혀서 진행이 많이 되어 가고 있을때에는 대대적인 변화를 가하기 어렵다. 그렇기 때문에 사전에 최대한 최종 사용자 손에 들어갈 디자인을 완전히 확보하고 개발에 들어가는것이 그만큼 중요하다. 이러한 면에서 Figma는 새로운 패러다임을 제시해주었다. UX 기획과 디자인을 하나로 간다는것. 여기서 프로토타이핑과 개발의 소스까지 건지는 높은 생산성 까지 가능하다.
UI 디자이너와 UX 기획자는 분리되어야 한다?
나는 이부분을 동의하지 않는다. 한국의 대부분의 IT 서비스개발사에서는 UX 기획자와 UI 디자이너가 분리되어 있다. 때로는 부서가 서로 다른곳도 존재한다. 그러나 나는 디자이너 최소한 초기 제품에 한해서는 한 사람의 머리에서 UI, UX가 만들어져야 한다고 생각한다. 개발자와의 빠른 기술검증 소통을 통해 제품 디자인을 만들어 가기에도 기획자, 디자이너가 분리된 상황보다 빠르다. 나는 UI, UX를 전문적으로 공부한 사람은 아니지만 내가 디자인한 UX의 아이패드 앱(Flecxil)이 애플에 십수차례 이상 피처드 된 것으로 UX에 대해 한마디 할 수 있지 않을까 생각된다.
특히 해외에는 기획자라는 단어가 없다. 국내 회사의 기획자들이 영문 명함을 만드는데 가장 애를 먹는 부분이기도 하다. 가장 가까운 이름이라고 하면 General Manager, 조금 웃기긴하지만 아무도 안쓰는 Planner라는 명칭을 쓰는 사람도 간혹 있다. 왜냐하면, 해외에서 기획자라는 Role은 존재하지 않기 때문이다. 이들은 Product Manager, UX Designer 등으로 명확한 Role로 명칭을 사용한다.
최근에는 국내에서도 UX & UI Designer로 두 가지를 디자이너가 다 만들어나가는 추세인것 같다. 바람직한 현상이라고 본다. UX를 개발하다보면 버튼의 배치를 고민하다가 색상이나 아이콘으로 변화를 주는 등 디자인적으로 문제를 해결할 수 있다. 디자인을 전혀 모르는 기획자 머리에서는 나올 수 없는 일이다. 앱/웹 서비스에서의 디자인은 인간에게 시각적인 신호를 빠르게 혼란없이 주는것이 핵심이기 때문에 색상, 폰트 대한 이해와 화면 흐름의 로직 두 가지를 모두 한 사람의 머리에서 나오는 것이 가장 빠르다.
Figma로 디자인하고 기획하고 개발해본 경험은
Figma는 기본에 충실하며 앱, 웹 디자인에 최적화 되어 있으며, 이미 예상하고 있는 기능들이 단축키등으로 맵핑이 되어 있거나, 직관적인 UI로 아주 빠른 방법으로 결과물을 만들어 낼 수 있다.
처음 Figma에 대해 가장 크게 환호했던 기능은 디자인 기능과 커뮤니케이션 기능이 All-in-one으로 내장되었다는 점이다. 기존에는 Sketch나 Adobe XD에서 작업한 내용을 Zeplin으로 전달했던 방식이 필요가 없다는 것이었다. 그러나 Figma에서는 공동으로 디자인을 할 수 있으며 디자이너 이외에도 개발자를 초대해서 Element의 css 코드를 뽑아내거나 Margin, Padding값등을 확인하며 UI를 개발할 수 있다는 점이었다.
그러나 이것은 빙산의 일각에 불과했다. 여러 프로토타이핑 툴을 사용해봤지만 Figma만큼 디테일하고 멋지게 프로토타이핑이 지원되는 툴은 아직까지 보지 못했다.
마지막으로 나를 결정적으로 빠져들게 만들었던 것은, 플러그인으로 React JSX를 만들어 낼 수 있다는 점이었다. Typescript 기반으로 아주 쉽고 간단하게 플러그인을 만들 수 있다. 내가 하고 싶었던것은 Figma에서 만든 UI 컴포넌트들을 React JSX 코드로 자동으로 뽑아내는 것이다. 현재 진행중인 프로젝트에서는 React와 Styled-component를 사용하고 있기 때문에 두가지만 자동화로 추출해오면된다. 간단히 말하면 웹 퍼블리싱을 자동화 하겠다는 것이다.
“웹 퍼블리셔라는 직업은 없어질 것이다” 라는 조심스런 예측
겹겹히 쌓여 있는 컴포넌트들을 css코드를 뽑아내고 이것을 코딩을 하는 웹 퍼블리싱 작업. 아주 기계적이고 반복적인 작업이다. 이것을 기계가 해준다면? 기계적인 일들은 결국 기계가 하게된다.
나는 정말 운좋게도 Figma로 한참 작업을 진행하고 있을무렵, 12월 중순쯤에 Figma에서 Auto-layout을 발표했다. 그리고 그 일주일쯤 후 Auto-layout으로 만든 코드가 Code view에서 Flexbox 형태로 표시되기 시작했다. 이에 맞춰 나도 작업하던 모든 UI 작업물들을 Auto-layout으로 바꾸었다.
나는 Figma plugin로 간단하게 이것을 구현해봤다. 다음과 같이 React Hooks 형태와 Styled component들이 산출된다.
제작한 Figma plugin으로 추출한 React styled-component코드
// Styled components
const FilterByLabel = styled.div`
width: 169px;
height: 104px;
border-radius: 0px;
display: flex;
flex-direction: row;
align-content: space-between;
align-self: flex-start;
`
const ModalFrame = styled.div`
width: 169px;
height: 104px;
border: 1px solid #dddddd;
background: #ffffff;
border-radius: 4px;
margin: 10px 0px;
display: flex;
flex-direction: row;
align-content: space-between;
align-self: center;
`
...제작한 Figma plugin으로 추출한 React hooks JSX 코드
function Component(props: Props) {
return (
<FilterByLabel>
<ModalFrame>
<Modal>
<Item>
<Content>
<Icon>
<Vector/>
</Icon>
<Title>
<Account>
<SVGLabel/>
<Issue>Issue</Issue>
</Account>
</Title>
</Content>
</Item> ... </Modal>
</ModalFrame>
</FilterByLabel> )
}
상당히 만족스러운 결과를 내보였다. 첫째로, Figma에서 각 ui component에 붙인 이름들로 그대로 React component 이름을 설정할 수 있다는 점이다. 둘째로, 계층구조를 그대로 가져올 수 있다는 점이었다. 셋째로, Flexbox의 스타일들을 그대로 가져올 수 있다는 점이다. 이로써, 거의 대부분의 사람이 해야했던 퍼블리싱 단계를 줄여 버렸다. 물론, 전적으로 내가 사용하기위한 목적이고 아직은 실험중인 상태라 여러 사람들이 사용하려면 계속해서 가다듬어야하는 상태이다.
Figma로 인해서 현재 디자이너가 되었다고 해도 과언이 아닐만큼 디자인 작업에 푹 빠져 있다. 특히 이전 프로덕트(플렉슬) UX 디자인을 하며 눈이 생기기도 했고, 최근에 서울의 모 대학 디자인 관련학과 교수님으로부터 나의 디자인이 크게 문제가 없다는 인증을 받기도 하여 의기양양하기때문 이기도 할까. 스타트업 창업자, 개발자로써 디자인을 하고 있는것이 어떤 사람눈에는 너무 과한게 아니냐, 전문 디자이너에게 맡기는 것보다 과연 효과적일까라는 의구심을 보내기도 한다. 그러나 내 생각은 좀 다르다. 특히 SaaS와 같은 회사의 창업자는 백그라운드가 어떻든, 회사의 디자인의 가치를 앤드 유저에게 전달할 능력을 갖추어야 한다고 생각한다.
그리고, 물론 피그마가 기존 그래픽툴을 완전히 대체할 수는 없을 것이다. 그러나 Figma의 앞으로 발전 방향성과 속도를 본다면 기존 그래픽툴들의 미래는 장담할 수 없다. 과연 Sketch나 Adobe XD를 능가할수 있을까? Figma가 Javascript로 만들어진 웹기반의 제품이기 때문에 막연히 느리겠지 라는 생각을 할 지 모른다. 그러나 무어의 법칙을 잊어서는 안된다. 트렌지스터의 속도는 18개월마다 2배씩 증가한다! 조만간 기존의 네이티브 툴들을 능가하는 엄청난 개발 생산성을 무기로 하는 Javascript 기반의 툴들이 많이 나타날 것이다. Figma도 이미 최신 머신에서는 성능적으로 전혀 느리거나 버벅거리는 기색을 보이지 않는다.
추가적으로 Figma를 통해 개발자로써의 한가지 희망을 더 본 것이 있다면, 지금 내가 하고있는 개발 스택과 거의 동일한 것을 사용한다는 점에서이다. React + Electron + HTML Canvas 기반의 협업 도구를 개발하고 있는데, 프로젝트를 시작하는 초기에 성능이 느리지는 않을까 매우 고심했던 기억이 있다. 그러나 Figma 덕분에 그런 걱정은 완전히 잊었다. 우리 제품이 이미 유명해질 때 쯤이면 이미 트렌지스터의 속도는 2배 이상은 되어있겠지? 라는 생각으로.
