페이스북에서 개발한 리액트(React)는 현재 웹 개발의 대세 자바스크립트 프레임워크로 자리잡았고, 스케치(Sketch.app)는 디자이너들의 표준 툴이 되었다.
지금까지는 디자이너가 Sketch로 디자인을 하면 Sketch가 코드를 만들어서 엔지니어에게 제공하는 형식으로 프론트엔드 개발이 진행되어 왔다. 그런데 에어비앤비가 오픈소스한 React-Sketch는 그 개념을 반대로 적용한다. React코드로 Sketch의 디자인을 바로 업데이트 할 수 있도록 한 것이다.
에어비앤비, 페이스북, 구글, 애플등의 큰 회사들은 디자인 시스템 (Design System)을 가지고 있다. 일관된 모양의 버튼, 색상, 글씨체 등을 묶어서 일관된 디자인을 할 수 있도록 해 놓은 것이다. 에어비앤비의 DLS, 구글의 매트리얼 디자인 등이 대표적인 디자인 시스템이다.
만약 디자인 시스템에서 버튼의 모양을 동그란 모양에서 네모난 모양으로 바꾼다고 생각해 보자. 기존의 방식에서는 디자인을 새로 하고, 스케치에서 새로운 모양을 다시 그리고, CSS 코드로 변환해서 웹과 모바일 템플릿에 반영해야 한다. 반면 코드로 스케치를 제어하면 리액트 코드를 변화시키는 것으로 한번에 프론트엔드 코드와 모든 Sketch의 디자인을 변화시킬 수 있다.
디자이너와 프론트엔드 엔지니어의 거리가 점점 더 가까워지고 있다. 지금도 그러한 추세에 있지만, 앞으로는 더더욱 디자이너가 CSS나 React 자바스크립트 프레임워크 등의 프론트엔드 코드를 통해 자신의 디자인을 표현하는 일이 많아 질 것이다. 또한 엔지니어도 디자이너의 영역으로만 분류되어 온 스케치 앱을 직접 체계적인 코드로 제어할 수 있게 될 것이다.
