“카플랫”의 서비스 제작 및 협업 도구로서의 XD 베타 사용기


Adobe
Adobe XD 베타를 사용하여 서비스 제작 팀들 간의 대화 및 작업 속도 향상을 경험한 “카플랫”의 작업 과정을 소개 합니다.
 
Adobe XD 베타 design process, CARPLAT
 
1. 서비스 제작팀 대화를 위한 Adobe XD
 
서비스 제작은 연속적인 문제 해결 과정입니다. 문제 해결 과정은 문제와 해결이라는 두 개의 과정이 묶여있으며, 문제를 정의 하는 것으로 시작합니다. 문제가 정의되면 구성원간 의견충돌을 지나 대화를 통해 타협점을 찾게 됩니다. 구성원은 대화를 통해 타협점을 찾고 서비스 방향을 설정하게 됩니다. 그리고, 서비스 방향이 설정되면, 또 다른 문제가 발생하고 다시 문제 해결 과정에 놓이게 됩니다. 필연적으로 서비스 제작팀은 끊임없는 문제 해결 과정에서 끊임없이 대화를 해야 합니다. 대화는 팀 간 혹은 구성원에 따라 다양한 모양과 빈도로 발생하지만, 특히 서비스 제작팀 안에서 개발자와 디자이너는 가장 많은 대화를 합니다. 따라서 개발자와 디자이너의 대화 효율과 질에 따라 서비스의 제작 속도와 상품의 질이 결정되게 됩니다.
문제가 정의되면 개발자와 디자이너는 다양한 문제 해결 방법을 제안합니다. 디자이너는 구성원들의 의견이 담긴 문제 해결 방법을 취합하고 디자인 화면으로 정리합니다. 그리고 디자인 가이드 같은 개발 친화적인 언어로 주석을 달아 개발자에게 전달을 합니다. 개발자는 주석이 달린 디자인 화면을 통해 서비스에 생명을 불어넣습니다. Adobe 프로그램만이 서비스 제작 도구로 활용되던 시절에 비하면, 타사 제작 도구들의 확산으로 디자이너가 디자인 하고 개발언어로 주석을 달아 전달하는 대화의 효율성이 높아졌습니다. 하지만 디자이너가 전달하는 화면을 개발자가 받아 들이는 한 방향 제작 도구라는 한계가 발생합니다. 즉, 타사의 여러 제작 도구들의 발전이 대화의 질적 향상으로는 연결되지 못했습니다.

“카플랫” 서비스 1차 출시 이후 사용성이 개선된 2차 버전을 준비하면서 대화의 질적 향상이 필요했습니다. 각 팀은 팀의 논리가 있고, 그 논리를 디자이너가 정리해서 전달하는 방법은 한계가 있었습니다. 각 팀의 생각을 시각적으로 확인하고 공유할 수 있는 서비스 제작 도구가 필요한 시기였습니다. 이러한 팀 작업 요구 환경에서 쉽고 직관적인 인터페이스를 가지고 있으며 서비스 제작 도구를 처음 접하는 구성원도 사용자와 서비스 접점, 디자인된 화면을 그려가며 대화할 수 있는 서비스 제작이 가능한 도구가 필요했습니다. Adobe XD는 이러한 팀 작업이 가능한 도구로서, 각 팀의 생각을 디자인된 화면을 통해 공유할 수 있었습니다. 또한 문제 해결 방법이 담긴 디자인 화면을 빠르게 제작할 수 있었습니다. 따라서 “카플랫” 서비스 제작팀은 대화 효율과 질 향상을 위해 Adobe XD를 2차 버전 제작 도구로 선택했습니다.
 
2. Prototype 제작을 위한 Adobe XD
 
모바일 서비스 디자인은 영화의 몽타주와 같습니다. 서비스 제작 도구를 통해 각 화면을 디자인 하고, 화면과 화면 움직임을 통해 사용자 경험을 설계합니다. Adobe XD는 화면을 디자인하고 화면 간 움직임을 정의할 수 있습니다. 즉, Adobe XD는 디자인에서 프로토타이핑까지 파일과 프로그램 이동 없이 모바일 서비스를 제작할 수 있는 All in One Tool 입니다. “카플랫” 1차 서비스 출시 후, 사용성이 개선된 2차 버전을 출시하기로 한 “카플랫”은 Adobe XD의 반복 그리드, 프로토타이핑, 프로젝트 공유기능을 주로 활용했습니다. “카플랫” 서비스 제작팀은 기획에서 개발자와 디자이너 간의 대화, 프로토타이핑을 통한 사용성 테스트까지 하나의 Adobe XD 파일을 통해 빠르게 2차 버전을 완성할 수 있었습니다.
1)반복그리드

컴퓨터와 디자이너가 잘하는 것은 다릅니다. 컴퓨터는 반복작업, 디자이너는 창의적인 작업을 수행합니다. Adobe XD는 컴퓨터와 디자이너가 잘하는 것에 따라 역할을 분리하여, 서비스 제작과정에 수반된 반복작업을 수행해 줍니다. Adobe XD의 반복 그리드 기능은 디자이너의 반복 작업을 줄여주는 대표적인 기능입니다. 반복 그리드 기능은 콘텐츠를 담는 서비스 제작에 활용 됩니다. 기준이 되는 콘텐츠 프레임에 반복 그리드를 적용하면, 콘텐츠 리스트를 빠르게 생성할 수 있습니다. 또한, 콘텐츠 리스트 전체 크기와 간격을 드래그를 통해 쉽게 조절할 수 있습니다. 즉, 디자이너는 한정된 시간 자원 안에서 반복 그리드 기능을 통해 단순 작업이 아닌 사용성을 고려한 창의적인 작업에 시간을 집중할 수 있게 됩니다.
2)프로토타이핑

디자이너는 화면이 완성되면 각 화면을 연결해 모바일 서비스를 제작합니다. 영화와 다른 점은 사용자 인터랙션에 따라 스토리가 달라지기도 하며, 화면이 잘못 디자인된 경우 스토리 진행이 중단되기도 합니다. 잘못 디자인된 화면이 수정 불가능할 정도로 진행되기 전에 서비스 디자인팀은 수시로 사용자와 만나 사용성 테스트를 진행해야 합니다. Adobe XD 프로토타이핑 기능은 프로그램, 파일 이동 없이 디자인된 화면 안에서 인터랙션 프로토타이핑을 진행할 수 있습니다. 간단하게 아트보드 이동을 통해 큰 서비스 흐름을 확인할 수도 있고, 디자인 요소 간 각기 다른 스토리를 진행할 수도 있습니다. Adobe XD 프로토타이핑 기능은 사용자 경험을 빠르게 설계할 수 있는 기능입니다.
3)프로젝트 공유

 
시간은 서비스 제작에서 가장 중요한 자원입니다. 시간 절약을 위해 프로토타이핑을 빠르게 공유하고 피드백을 주고받는 것이 중요합니다. Adobe XD는 온라인 공유 기능을 통해 실시간 프로토타이핑 공유가 가능합니다. 또한, 서비스 제작에 관련된 사람들은 댓글을 통해 피드백을 수시로 주고받을 수 있습니다. 피드백을 통해 디자이너가 화면 및 프로토타이핑을 수정하면 수정된 내용은 온라인에서 실시간 확인이 가능합니다. 특히 링크를 통해 공유되는 프로토타이핑은 인터넷이 연결된 곳이면 쉽게 접근할 수 있는 장점이 있습니다. Adobe XD는 디자인에서 인터랙션 프로토타이핑, 온라인을 통한 피드백 공유까지 하나의 도구를 통해 공유할 수 있는 서비스 제작 도구입니다.
Adobe XD는 태어난 지 얼마 안 된 베타 버전의 어린 서비스 제작 도구로서 타사의 제작 도구에 비하면 기능적으로 부족할 수 있습니다. 예를 들어 복잡한 인터랙션은 타사 제작 도구의 도움을 받아야 할 수 있습니다. 하지만 Adobe XD는 정식 버전 출시 후가 더욱 기대되는 제작 도구이기도 합니다. “카플랫”은 Adobe XD 베타를 활용해 팀 간 대화를 하고 서비스를 제작하고 있습니다. Adobe XD는 서비스를 제작하기에 충분한 서비스 제작 도구로서 끊임없이 사용자 의견을 받고 성장하고 있으며, 확정된 향후 제공 서비스는 혁신적입니다. 디자인 제작을 돕는 서비스 제작 도구 역할에 충실한 Adobe XD는 컴퓨터와 디자이너의 역할을 분리하고 디자이너가 디자인에 집중할 수 있는 환경을 제공할 것으로 기대합니다.
 
 
 
디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱 Adobe XD.
웹사이트 및 모바일 앱을 디자인하고  프로토타이핑하고 공유할 수 있는 최초의 올인원 툴인 Experience Design CC(베타)를 사용하면 아이디어 구상에서 프로토타이핑에 이르는 과정을 신속하게 진행할 수 있습니다. 베타 버전을 테스트해 보시고, 여러분의 피드백을 공유해 주십시오.  다운로드 받기 
 
 
 

 
저자: 이재구 Lee jaegoo / Designer
오프라인 서비스를 IT서비스로 옮기는 작업에 관심이 많으며, 렌터카 중개 O2O 서비스 CARPALT에서 디자인을 하고 있습니다. 또한 타이포그래피와 브랜딩 중심의 작업을 합니다. behance.net/leejaegoo를 통해 팔로우 할 수 있습니다.