디자이너와 개발자 생산성.협업툴

어느 페북에서 퍼옴

 

어플리케이션을 만드는 과정에서 가장 고통스러운 부분 중 하나는 디자인을 코드로 옮기는 과정입니다. 이 과정에서 디자이너와 개발자 간의 수많은 소통이 요구됩니다. 보통 디자이너들은 디자인의 디테일한 부분들이 개발에 반영되지 않아 답답함을 느끼고 개발자들은 개발에 필요한 화면들이나 플로우가 없어 답답함을 느낍니다. 그리고 단순반복 작업을 싫어하는 개발자 특성상 디자인된 화면들을 html, css, javascript로 옮기는 과정을 단순노동과 비슷하게 생각하거나 비효율적으로 생각하는 개발자도 꽤 많습니다. 이런 문제들을 해결하기 위해 재플린, 인비젼과 같은 디자이너와 개발자 간의 협업툴이 나왔고 많은 디자이너, 개발자들이 사용을 하고 있습니다. 이런 협업툴들은 처음에는 디자인의 CSS적인 요소들을 보기 쉽도록 정리해주는 것이 많은데 이제는 점점 디자인 화면들을 요즘 핫한 리액트, 뷰, 플러터, 스위프트 등의 코드로 변환해주어 코딩이 거의 필요 없게 발전해 나가고 있습니다. 오늘은 이렇게 디자인 화면을 코드로 변환해주는 툴들을 소개해드리도록 할게요.

배경

• 소프트웨어, 어플리케이션 개발이 많아지고 있음

문제 / 니즈

• 디자인을 코드로 변환하는 과정에서 디자인이 손상됨

솔루션 - 디자인 화면 코드 변환 툴 (www.disquiet.tech에서 확인해보세요~)

• Builder X - 리액트 코딩을 해주는 디자인 툴

• Bravo Studio - 피그마 화면으로 모바일 앱을 만들게 해주는 툴

• Mondayhero - 스케치, XD 파일을 코드로 변환해주는 툴

• Anima - 피그마, XD, 스케치 파일을 리액트 코드로 변환해주는 툴

• Overlay - 피그마 컴포넌트를 리액트 컴포넌트로 변환해주는 툴