좋은 디자이너 되기: 상황별 디자인 프로그램 정리

상황별 제가 유용하게 쓰는 디자인 프로그램과 방법들을 적어봤습니다

오늘은 시애틀에 있는 저와 한국에 있는 팀원들과 프로젝트 중 디자인 전달과 더불어 제가 썼던 프로그램들과 툴에 대해서 나눠볼까 합니다.

어떤 디자인 프로그램을 써야 할까요?

그것을 기준할 수 있는 것은

1. 얼마나 빠르게 나의 생각을 정확하게 전달해 주느냐(그래서 저는 최대한 많은 프로그램을 알아두려고 합니다)

2. 피드백을 받을 수 있고 서로 커뮤니케이션이 될 수 있는가? (따로 이메일로 피드백을 받는 것보단 최대한 한 곳에서 그것이 이뤄지면 좋겠죠?)

3. 개발자님들에게 전달할 때 최대한 많은 정보를 전달할 수 있는 것

웹디자인 중인데 빠르게 무언가를 보여주고 싶다면?

Axure

페이지별로 그룹으로 잘 정렬할 수 있고 Interaction이 가능합니다. 몇 가지 리서치를 하면 꽤 복잡한 구조도 실행시킬 수 있으며 (패스워드 틀렸을 때, 맞았을 때 후의 페이지 보여주는 것 등) 원클릭으로 공유 링크를 만들어줘서 팀원들과 디자인 리뷰를 할 때 편리하게 썼었습니다.

굳이 오픈소스를 다운받지 않아도 왼쪽에 제공되어 있는 메뉴들로도 충분히 와이어프래임을 구현할수 있다

프로그램 난이도 : 쉬움 (그것도 많이 쉬움)
단점: 딱히 모바일을 작업하기는 예매하기에 responsive를 구현하기는 조금 불편한 감이 있는 거 같습니다.

추천: 웹디자인 초기단 계시 무언가를 빠르게 보여주고 전체적은 flow를 설명하려고 할 때 강추

가격:  from $289 (학생 할인으로 $115에 구입)

http://www.axure.com/

디자인 페이지가 많아졌을 때 쉽게 업데이트할 수 있는 방법

Invision

밑에 사진은 제가 일러스트레이터에서 작업한 파일들의 Invision Sync Folder에 저장이 돼있어서 굳이 프로토타입 변경을 위해 인비전에 들어가지 않아도 제가 세이브를 할 때마다 저절로 웹에서도 업데이트가 돼서 디자인 수정이 있을 때마다 빠르게 팀원들에게 공유할 수 있어서 유용하게 쓰고 있습니다.

또한 인비전은 요즘 프로토타입 프로그램 중 선두주자를 달리고 있는 기업이 아닐까 생각해 봅니다.  최근에는 스케치 플러그인 프로그램인 Craft(https://www.invisionapp.com/craft)를 만들었고, 포토샵 레이어 자체에서 쉽게 페이지 별로 export 가능하며 App store 자체에서 인비전 앱을 다운로드할 수 있어서 손쉽게 프로토타입을 고치고 업데이트할 수 있습니다.

단점: Interactive하나 아직까지 구현해 낼 수 있는 것들이 한정되어 있다

프로그램 난이도: 쉽다

가격: from 공짜

https://www.invisionapp.com/

디자인이 최종 컨펌되고 개발자님들께 전달할 때

Zeplin

가장 중요한 순간이 아닐까 생각됩니다. 우선 개발자님들의 불필요한 시간을 가장 줄여줄 수 있는 부분은 Pixel값과 Assets 그리고 스타일 가이드를 쉽고 빠르게 보여드릴 수 있는가의 문제가 아닐까 싶은데요. Zeplin은 그 점들을 잘 구현해 주고 있지 않나 생각이 듭니다.

 Sketch에서 디자인 작업을 마치고  Command + E 버튼을 누르면 Zeplin으로 저절로 연동이 됩니다. Asset 을 바로 export 할수 있게 되어있습니다

디자인에 쓰인 칼라값과 폰트스타일가이드 그리고 사진에는 안보이지만 CSS 코드까지 잘 정돈되있는것을 볼수있습니다

단점: 스케치에서 작업한 디자인 파일들만 Zeplin으로 연동이 가능.
프로그램 난이도: 쉽다

가격: from 공짜

https://zeplin.io

좀 더 인터렉티브 하게 보여주고 싶을 때

Adobe After Effects

아무리 프로토타입 프로그램들이 발전이 되었다고 해도 아직까지 한계인 점들이 있는 거 같습니다. 그런 점에서 디자이너의 생각을 최대한 펼칠 수 있게 해주는 프로그램은 After Effects가 아닐까 생각이 드는데요. 저도 아직까지 After Effects 의 기술 중에 50%도 못쓰고 있지 안 나는 생각이 들지만, 제가 생각하는 디자인들을 구현하기에는 어렵지 않게 프로그램을 다룰 수 있는 거 같습니다. 혹시 아직 사용하시지 못하시는 분들은 제가 After Effects를 배우는데 큰 도움을 주었던 https://lynda.com/ 에서 tutorial 비디오를 추천해드립니다.

마우스 Hover시 나오는 옵션을 표현하는 카드디자인

개발자님들에게 전달할때는 어느부분이 사진이고 어느부분이 element인지를 정확히 전달해야 그것에 따른 마우스모양의변화를 이해할수있다

단점: 만드는 시간이 적지 않게 걸리고 또한 파일이 크기 때문에 디자인을 share 하는 방법도 쉽지 않다

프로그램 난이도: 1개월간 하루에 꾸준히 연습하면 됨!

가격: Creative Cloud를 subscribe 하고 있어야 한다

http://www.adobe.com/products/aftereffects.html

다음 편에서는 디자이너로써 제일 중요하다고 생각하는 디자인을 다른 사람들에게 발표할 때 제가 사용하는 팁들과 프로그램 등을 나누도록 하겠습니다.