React 디자인 협업 도구 - react-sketchapp

제가 React로 작업을 할때 고민이었던 부분은 '디자이너와의 협업' 이었습니다. 물론, 능력이 좋으신 분들은 디자이너분께서 sketch에 만들어 놓으신 prototype을 그대로 뚝딱 만드시는 분들이 계시겠지만, 실제로 프로젝트를 진행하면서 프론트엔드 개발자와 디자이너 분들간의 스타일링에 관련되서는 언제나 이슈가 있더군요.

React의 경우에는 이러한 부분들이 더 크게 와닿았던 것 같습니다. 기존 Angular나 Vue 처럼 template 단위로 (예를 들면 html 혹은 기타 템플릿도구) 만드는 구조가 아닌, 실제 코드상에서 JSX를 이용하여 코드내에 컴포넌트 마크업을 하는 형태다 보니, 디자이너가 기대하는 page와 상이한 부분들이 계속 생겼습니다.

이번 포스팅은 바로 그러한 부분을 해결하기 위해 찾아보고 시도해본 느낌을 적어보고자 했습니다. 바로 airbnb에서 디자이너와 협업하기 위해 만든 react 기반 sketch 플러그인 react-sketchapp 입니다.

우선, 협업을 위해서 고려했던 사항은 다음과 같습니다.

react-native로 개발
컴포넌트 형태로 개발한 디자인 파일을 그대로 앱에서 사용하는데 문제가 없어야 함
디자이너와 협업이 수월해야 함

몇가지 대안으로 실제 서비스에 올려서 확인을 해보거나, 다른 기타 test util들 (sketchbook 등) 을 사용해 보려고 했으나, 이런 부분들은 실제로 개발을 잘 모르는 디자이너 분께서 확인하시면서 수정 사항을 요청하시기가 힘들었고, 이는 실제로 많은 필요없는 문서들과 비효율을 초래하는 것 같았습니다.

그러던 중, airbnb에서 디자이너와의 협업을 위해서 도입한 react-sketchapp에 대한 포스팅을 읽고, 적용해보기로 했습니다.

react-sketchapp의 장점

react-sketchapp으로 협업하면서의 장점은 다음과 같았습니다.

react-native 기반의 컴포넌트 구성
react-sketchapp은 react-native 기반으로 컴포넌트가 구성되어 있습니다. 물론 많은 컴포넌트를 사용하지는 못하나, View, Text, Image 만으로도 sketch에 페이지 및 컴포넌트에 대한 styling이 가능합니다. 이는 이후에 App으로 UI를 변경하면서 상당히 장점이 되었습니다. react-native로 개발해야 하는 건이었기 때문에, 실제로 별다른 수정 사항 없이 sketch를 만드는데 사용했던 컴포넌트를 그대로 옮겨오는게 가능했습니다. 즉 OSMU(One-Source-Multi-Use)가 가능해짐으로써 디자이너분과 협업하는데에 생기는 리소스를 크게 줄일 수 있었습니다.
디자이너와의 협업의 수월함
실제로 디자이너는 sketch 파일을 보고 수정사항을 마킹하여 저에게 다시 sketch 파일을 건네주면 됐습니다. 이걸로 끝입니다! 저는 수정사항을 받아 해당 컴포넌트의 디자인을 수정하고, 다시 전달해주면 됬구요, plugin 형태로 되어 있기 때문에 다시 플러그인 파일을 전달드리거나, 아예 git으로 연동하여 command 실행을 통해서 확인도 가능했습니다. (이것은 약간의 개발자 분들의 수고가 필요할 수도 있습니다. 저희는 디자이너분께 bash 파일을 만들어 드렸네요)

react-sketchapp의 단점

장점이 있으면 단점도 존재합니다. 단점은 다음과 같네요..

적은 reference
아무리 뒤져보아도 제대로된 레퍼런스가 많지 않았습니다. (사내 프로젝트여서 그런지.. 다른분들이 사용하신 노하우를 공개를 안하셔서인지.. 한글로 된 자료는 아예 없구요.. 그나마 도움되는건 github의 issue를 통해서 찾을 수 있었습니다 ㅜㅜ) 처음에는 이러한 부분들 때문에 상당히 고생했습니다 ㅜㅜ 레퍼런스가 아예 없다보니 문제는.. 직접 부딪혀 가면서 해결하셔야 합니다 ㅜㅜ
약간의 불안정함(?)
아직은 안정적이라고 말씀드리기는 이릅니다. 저는 처음에 typescript (현재 react-native 프로젝트를 typescript로 개발하고 있습니다)로 개발하려 했으나, 이유없이 스케치가 멈춰버리거나, 튕겨버립니다. (특히나 현재는 이미지 관련하여 이슈가 있습니다. 로컬 이미지를 require해서 사용하는 경우 프리징됩니다.) 여기에 레퍼런스도 없다면.. 말다했습니다^^ 저희는 이러한 사항들을 아예 이미지를 서버에 올리고, javascript로 컴포넌트를 개발후에 typescript로 변환하고 있습니다. (typescript와 호환될 수 있는 부분들만 작업을 하고 있습니다 :))

우선은 많이 나오지 않은 react-sketchapp에 대한 1부 포스팅을 마칩니다. 2부 부터는 실제 react-sketchapp을 적용하는 방법과, 제가 실제 적용해보면서 어려움을 겪었던 부분 위주로 말씀 드리고자 합니다. 중간에, 시도를 해보고 계시나 어려운 점이 있으신 분들은 제 이메일으로 문의주시거나, 댓글 주시면 답변 드리겠습니다 :)