개발자도 디자인 감각을 길러야 하는 시대
개발자란 ‘코딩의 신’이라고 생각하는가? 누군가의 머릿속에 그려지는 그림을 기술적인 부분을 살려 그대로 실현해내는 기술만이 개발자의 모든 것이라 생각하는가? 기술적으로 양립하는 문제를 해결하고 효율성에 근거한 디자인 패턴을 하드코어적으로 개발하는 것도 개발자의 몫이겠지만, 팀을 이루는 기획자와 디자이너와의 커뮤니케이션을 통해 기획안의 문제점을 지적하고 보완할 수 있는 능력 또한 중요하다. 요즘 시대에는 기획안을 무조건 수긍하는 ‘노예’나 개발할 줄 모르는 팀원의 의견을 무시하는 ‘독불장군’보다는 디자인 감각을 토대로 커뮤니케이션 능력을 갖춘 개발자가 대세다. 사람들의 생각이 농축된 기획안을 흡입하여 그 안의 내재한 가치를 흡입할 수 있는 개발자야말로 ‘능력자’이다. 요즘은 스마트폰 자체의 기능이 향상됨에 따라 그에 부합하는 화려하고 감각적인 그래픽을 요구하는 경향이 짙어지고, 이에 따라 디자인 소스를 스스로 해결할 수 있는 개발자를 요구하는 시대가 열렸다.
세상을 바꿀 수 있는 혁신적인 아이디어를 갖춘 개발자가 디자인 능력까지 갖춘다면 1인 기획자/개발자/디자이너로 명성을 떨칠 수가 있지만, 사실 이 길은 멀기만 하다. 그렇다면 지금까지 디자인이라면 ‘주어진 대로’만 따랐던 개발자도 손쉽게 디자인을 구현할 수 있는 서비스를 이용해보는 것은 어떨까? (물론 디자이너 또한 좀 더 효율적인 프로세스로 앱을 디자인해볼 수도 있다.) “당신이 이 서비스를 이용하는 순간, 다른 툴로는 앱을 개발하기 싫어지리라는 것에 제 손목을 걸죠.”라고 자신 있게 말하는 캘리포니아 기반 스타트업인 Pixate가 있다.
앱 개발 프로세스의 문제점은?
Y-Combinator 2012년 여름 프로그램으로 참가한 이력이 있는 Pixate가 지난 1월 공식적으로 런칭한 이 서비스는 CSS로 스타일리쉬한 어플리케이션’을 만드는 데 주안점을 두고 있다. 보통 디자이너의 작업은 래스터화한 이미지를 자르고, 변환하고, 다양한 해상도로 저장하는 등 주어진 개발 환경에 가장 알맞은 이미지가 노출될 수 있도록 똑같은 작업을 반복하는 게 주를 이룬다. 단일 UI 요소 하나를 위해 수시간을 반복하는 것도 문제지만, 디자이너가 구상한 UI를 코드로(EX. 버튼의 그라디언효과 등) 나타내기 위해서 개발자가 번거롭게 코딩 스타일로 CSS를 입혀야 하는 것에도 많은 시간이 소요된다.
그렇다면 이 문제는 어떻게 해결해볼 수 있을까? 디자이너가 작업한 결과물을 ‘변환’하는 작업에 시간이 오래 걸리거나 반복적인 작업 때문에 효율성이 떨어졌다면, ‘변환’의 과정을 과감하게 생략하면 되지 않을까? Pixate는 바로 여기에서 해결책을 찾았다. 디자이너가 포토샵이나 일러스트가 아닌 CSS로 만든 결과물을 제출하면, 개발자는 Pixate Engine을 통해 개발에 바로 적용한다. 개발자는 디자이너가 그려준 시안 그대로 100% 완벽하게 디자인을 구현하느라 진뺴지 않아도 되고(RGB 값이나 글꼴, 기울기 등 아주 사소한 이슈), 디자이너는 위에서 언급한 작업은 이제 머릿속에서 잊어도 좋다.
Pixate Engine & Visualizer
2D 그래픽 엔진과 CSS 스타일 엔진으로 구성된 Pixate 엔진은 표준 iOS 비트맵 방식을 제어하는데, 동적으로 그래픽 랜더링이 가능해서 조금 더 유연한 방식으로 디자인할 수 있다. Pixate Visualizer는 CSS 편집기와 편집 디자인을 실시간으로 미리보기를 할 수 있는 화면으로 구성된다. 이 Visualizer는 모바일과 데스크탑 버전이 있으며, 데스크탑에서는 소유하고 있는 모바일 단말기를 통해서도 개발과정에서도 디자인을 실시간으로 확인해볼 수 있다.
*CSS(Cascading Style Sheet): CSS는 스타일의 일종이다. CSS를 이용하면 웹 페이지의 디자인이나 장식 요소(폰트 색상, 배경색, 레이아웃 등)을 문서 본체와 분리할 수 있다.
*랜더링(Rendering)은 그리고자 하는 도형, 텍스트, 이미지들을 수집하여 화면 또는 프린터에 나타낼 픽셀(pixel)의 색상을 결정하는 과정이다. 도형, 텍스트, 이미지는 기본 그래픽 요소(graphics primitives)라고 하며, 프린터와 모니터들은 장치(device)라고 한다. 이러한 과정은 렌더링 엔진(rendering engine)에 의해 진행되는데, 2D API에서의 렌더링 엔진이 바로 Graphics2D이다. 2D 렌더링 엔진은 표시할 장치들의 세부적인 사항에 신경을 쓰며, 표시되는 장치와 관계없이 그림의 정확한 모양과 색을 재생할 수 있다.
(출처 : 자바 2D 그래픽스, 조나단 크누드센 저)
Pixate를 사용해서 왼쪽의 '밋밋한' 디자인에서 오른쪽과 같은 화끈한 디자인으로 바뀔 수 있다면, 그리고 이 결과물이 CSS를 이용한 디자이너와 개발자의 협업으로 단시간 내에 탄생한 것이라면 개발/디자인 프로세스를 줄이는 데 비용을 아끼지 않으리라 생각한다. SDK방식으로 현재 iOS용 어플리케이션만 제작할 수 있으며, 향후 Android 앱을 위한 플랫폼도 계획 단계에 있다.
한편 Pixate는 유려한 모바일 인터페이스를 더 손쉽고 빠르게 구축할 수 있는 서비스를 만들고자 Paul Colton과 Kevin Lindsey가 2012년 5월에 설립한 스타트업이다. 2012년 킥스타터 캠페인을 통해 성공적으로 펀딩 기금을 조성한 바 있으며, 최근에는 Accel Partners로부터 시리즈 A에 해당하는 380만 달러(한화 약 43억원)를 투자 받은 바 있다. 현재 Pixate Engine는 유료 사용 모델이었으나, 최근에 무료로 전환하는 대신 고객 지원 서비스의 정도에 따라 199달러에서 1,299달러의 가격를 지불하면 된다.
