CWN(CHANGE WITH NEWS) - [개발자를 위한 프로젝트 A to Z] 개발자와 디자이너의 소통을 돕는 “UI 개발 도구“ 4가지

웹 개발, 애플리케이션 개발 등 사람들이 직접 상호작용하며 사용하는 소프트웨어를 개발하기 위해선 개발자와 디자이너 간의 소통이 중요하다. 프로젝트 기획에 맞춰 디자인한 화면을 정확하게 구현하기 위해선 디자이너는 자신의 의도를 정확하게 설명하고 개발자는 이를 기준으로 개발을 진행한다. 그런데 디자이너는 디자인을 끝내고 GUI 가이드 문서를 작성하는 번거로운 과정을 거쳐야 했다.

GUI 가이드는 디자이너의 의도와 기준을 전달하기 위해 매우 중요한 문서이다. 구두로 요청을 전하거나 시간에 쫓겨 가이드를 생략하면 최종 결과물이 처음 구상했던 모습과 크게 달라지기 때문이다. 하지만 GUI 가이드를 만드는 것은 번거롭고 오랜 시간이 걸린다는 단점이 있었다. 그런데 이 과정을 더 쉽게 만들 수는 없을까?

개발자와 디자이너의 소통을 돕는 4가지 도구를 소개한다.

1. 어도비 XD(Adobe XD)
어도비는 디자인 소프트웨어 분야의 일인자로 UI 디자인에서도 어도비의 영향력은 매우 크다.어도비 XD는 UI 디자이너가 프로토타입과 목업을 제작할 수 있는 벡터 기반 사용자 인터페이스 도구를 제공하며, 다른 인터렉션 및 다이내믹 요소를 빠르게 만들 수 있는 도구를 갖추고 있다. 어도비 디자인 제품군에 익숙한 디자이너는 어도비 XD 인터페이스를 친숙하게 느낄 수 있다.

어도비 XD로 웹, 모바일, 음성 사용자 환경을 설계 및 프로토타이핑 할 수 있으며, 공유화 협업도 용이하다. 어도비 XD는 프로토타입 제작에 중점을 두고 있어 인터랙티브 프로토타입을 제작해 여러 장치에서 즉시 테스트할 수 있다. 클릭으로 다양한 요소를 손쉽게 생성해 프로토타입 제작 속도를 향상하고, 디자인 레이어를 세분화해 자세히 검사할 수 있다. 어도비 XD는 3D 변환 기능도 제공하며, 다양한 어도비 애플리케이션과 타사 플러그인을 지원해 사용자에게 맞는 API를 만들 수 있다.

2. 스케치(Sketch)
스케치는 어도비 XD와 함께 UI 디자이너에게 꼭 필요한 디자인 앱 중 하나이다. 스케치도 어도비 XD와 동일하게 백터 기반의 도구로 선명도를 해치지 않으면서 모든 항목의 크기를 쉽게 조정할 수 있다. 스케치는 화면 디자인뿐만 아니라 와이어 프레임 및 프로토 타이밍에도 적합하다.

디자이너는 기호, 레이어 타일, 텍스트 스타일 라이브러리를 통해 요소들을 손쉽게 크기 조정 및 정렬하고, 디자인 통일성을 만들 수 있다. 일관된 프로토타입을 만드는 데 걸리는 시간을 절약할 수 있다.

스케치는 사용이 간편한 스냅 인 플레이스 도구와 연결된 프로토타입을 만들 수 있는 지능형 가이드를 제공한다. 또한 미러 확장 기능을 통해 실제 iOS 기기에서 변경된 내용을 테스트해볼 수 있다. 타사 플러그인을 통한 여러 확장 기능도 제공한다.

하지만 맥OS에서만 사용할 수 있다는 단점이 있다. 또한 한 번 프로그램을 구매한 후에도 업데이트를 받기 위해선 매년 라이센스를 갱신해야 한다는 아쉬움이 있다.

3. 제플린(Zeplin)
개발자에게 디자인을 전달하는 것은 UI 설계의 마지막 단계이다. 제플린은 UI 디자이너가 개발 팀에 디자인 전달을 용이하게 하기 위해 구축되었다. 제플린에 스케치, 어도비 XD 등으로 디자인한 화면을 업로드하면 자동으로 사양 정보와 가이드라인을 생성한다.

프론트엔드 개발자는 제플릿을 통해 플랫폼 관련 코드 조각을 만들어 화면을 구성하는 데 필요한 시간과 노력을 줄일 수 있다. 또한 디자인 변경사항을 쉽게 파악할 수 있다. 제플린은 디자이너와 비디자이너 모두 사용하기 쉽고, 슬랙(Slack)에 통합해 팀원들과 바로바로 의견과 메모를 공유할 수 있다.

4. 피그마(Figma)
피그마가 다른 도구들과 가장 큰 차이점을 보이는 것은 피그마는 최초의 "브라우저 인터페이스 설계 도구"라는 점이다. 피그마는 디자인, 프로토타입 제작, 피드백 수집을 한 번에 할 수 있는 강력한 기능을 갖추고 있는데, 컴퓨터에 별도의 소프트웨어를 다운로드할 필요 없이 웹으로 사용할 수 있다는 장점이 있다.

피그마를 이용해 디자인 스케치는 물론 와이어 프레임, 프로토타입 제작 및 디자인 시스템 관리를 통합할 수 있다. UI 디자인은 화면 크기가 변경될 때 설계를 조정할 수 있는 구성 요소 기능을 사용할 수 있으며, 이를 설계 전반에 거쳐 재사용하는 것도 매우 쉽다. 디자이너는 동적 프로토타입과 모형을 제작하고 사용성을 테스트하며 모든 진행 과정을 동기화 할 수 있다. 또한 하나의 프로젝트를 여러 명이 동시에 접속하고 편집할 수 있어 효율적인 협업이 가능하다.

참고 사이트: webflow 블로그, careerfoundry 블로그

[ⓒ CWN(CHANGE WITH NEWS). 무단전재-재배포 금지]