아주 환상적인 디자인 제작기
The Ideal Design Workflow
저는 디자이너로서 가장 효율적인 방법을 찾기 위해 툴과 디자인 프로세스를 끊임없이 연구하고 찾고 있습니다. 그러한 과정에서 완벽한 디자인 워크 플로우를 발견했고 여기를 통해 공유합니다.
여기 공유하는 디자인 프로세스는 실제 제 프로젝트에 적용한 것들입니다.
1.) 먼저 종이와 연필로 스케치하기 — 대부분의 좋은 디자인인 종이에서 시작합니다.
문구점에 가서 스케치할 도구를 사서 기초부터 러프하게 그려봅니다.
깔끔하네요 ㅋㅋ2.) 다음 단계는 스케치한 디자인을 사진으로 찍어서 POP앱에서 간단하게 프로토타입을 테스트해보는 것입니다.
3.) 그다음은 와이어프레임을 만드는 것입니다. 스케치만으로 디자인 구조를 이해하고 설명하기에는 많이 부족합니다. 와이어프레임은 디자인에 있어 꼭 필요한 항목입니다. Omnigraffle은 와이어프레임을 쉽게 만들 수 있도록 도와줍니다.
4.) 자 그럼 드롭다운 메뉴가 필요한 거 같죠? 그럼 Balsamiq으로 와이어프레임을 조금 다듬어 보시죠.
컴맹들한테만 먹히는 와이어프레임입니다 ㅋ 5.) 인제 Balsamiq이 얼마나 구린지 충분히 체감하셨을 겁니다. 그럼 Axure로 개선해 보죠.
6.) 자 그럼 Axure가 얼마나 허접 덩어리인지 다시금 느꼈을겁니닼ㅋㅋㅋ. 그럼 어도비 일러스트레이터로 갈아타 보시죠 ㅋㅋ
7.) 일러에서 작업한 와이어프레임을 .png로 저장한 다음 Invision에서 가져옵니다. Invision에선 공유나 협업 등이 가능합니다.
8.) 다음날 아침.. 팀원이 Invision 프로토타입에 아주 구리 다는 악플 보고 허니 오트밀에 눈물을 쏟아부었습니다..ㅠㅠ
열나 맛있음 ㅇㅇ9.) 그래서 악플때문에 앞으론 Invision을 안 쓸 것임 ㅇㅇ
그렇취!10.) 팀원이 악플을 못 달게 Marvel로 갈아탑니다.
11.) 드뎌! 와이어프레임 시안이 통과되었습니다. 그럼 이제 고퀄의 프로토타입을 만들 차례입니다.
오~킹!12.) 초딩도 쓴다는 뽀샵으로 적절한 이미지 몇 개를 가져옵니다.
꽤 적절한 이미지 인거 같네요13.) 그럼 Sketch를 써서 UI를 만들어봅니다. 거진 실제 앱 디자인 같습니다.
14.) 스케치에서 작업한 걸 png로 저장해서 이번엔 무료 툴인 Flinto Lite에서 불러봅니다.
15.) 만들다 보니 제스처를 사용 쓸려면 99$를 주고 유료버전인 Flinto for Mac을 구매해야 하는군요...ㅠ
이 둘은 서로 너무 많이 다릅니다. 16.) 회사 대표님, 이사님 그리고 고객사 담당자는
"프로토타입을 보려고 다른 앱을 설치해야 됨? 대츠 ㄴㄴ!"
17.) 그래서 다시 이번엔 Principle에 디자인을 옮겨 인터랙션을 몇 개 적용해 봅니다.
18.) 아 뭐여...동영상으로 저장이 되는가? ㅠㅜ 아놔...
씁쓸19.) Pixate를 다운받아봅니다. 공짜잖아~ 밑져야 본전이셈 ㅇㅇ
20.) 그리고 Pixate 사용법을 공부해 봅니닼ㅋㅋㅋ. (포스와 함께 하시길.)
21.) 그다음엔 컴퓨터를 때려 부수면 됩니다. 물론 이 부분도 디자인 프로세스의 한 부분입니다.
22.) Pixate가 정신병자로 만들었다면 이제는 Framer로 다운받아 갈아타 봅니다.
뭔가 그럴싸하군..23.) 그럼 인제 나가서 점심하고 오셈요. ㅇㅇ 할 만큼 충분히 한듯합니다.
타코 맛남 ㅋㅋ24.) 점심 먹고 오니 Framer 평가판 기간이 만료되었군요..(당시에는 평가판 기간이 매우 짧은 듯)
깊은 빡침25.) 그럼 Justinmind로 다시 만들어 봅니다.
26.) Justinmind 파일을 공유했더니 팀원 중 아무도 그걸 열지 못해서 결국 팀원들한테 깔끔하게 다굴당하게됩니다.
looser27.) meetup/세미나/블로그/테드/프로덕트헌트에서 친구들이 새로나온 프로토타입 툴에 대한 정보를 조공해 주니 사실 프로토타입없이 처음부터 개발을 해보는것도 괜찮아 보이네요.
이거 대박~한줄 요약:
프로토타입 그게 뭐임???
출처: https://blog.prototypr.io/the-ideal-design-workflow-2c200b8e337d#.co3c72q3l
번역하다 보니 디자인 프로세스가 아니라 프로토타입 사용기네요. ;;
이전 포스트에도 프로토타이핑에 대해 글을 썻습니다만.
https://brunch.co.kr/@ultra0034/3
개인적인 사용기를 남기자면 사실 하나의 프로젝트를 위해 여러 툴을 병행하는건 효율적이지 않은거 같습니다. 제가 Axure를 첨으로 삼성SDS프로젝트에서 썼었는데 좋은 경험으로만 끝났습니다. 그 후론 쓰고 싶은 맘이 없더군요.
Balsamiq 역시 러프 스케치룩이 특이해 보였는데 이게 모지?? 하고 삼십분 끄적이고 지웠습니다.
프린시플은 제대로 인터랙션을 만드는게 아니라 트릭?이더군요..그래서 이걸 파게 되면 안좋은 습관이 생길거 같아 손을 놓고 있습니다.
현재 가장 정교하게 표현해 준다는 프레이머는 coffee script를 배워야하는데
ㄴ20개 이상의 화면의 복잡한 플로우를 과연 프레이머로 가능할것인가?
ㄴ배우면 금상첨화겠지만 얼마나 많은 디자이너나 기획자가 이걸 능숙하게 다룰수 있을것인가?
이런 상태로 coffee만 마시고 있습니다.
픽슬레잇이나 플린토, 마블, proto.io을 보면서 스케치도 하고 인비전도 하면서 굳이 이걸 내가 사용해야 하는가? 하는 생각이 들었습니다.
개인적으론 스케치는 필수인거 같더군요.
위에 언급된 툴 중 몇몇은 OSX에서만 구동이 되는데 왜 더 많은 사람을 위해 windows버전은 안나올까?하는 아쉬운 생각이듭니다.
스케치를 만든 네델란드에 있는 보헤미안의 경우 회사 규모가 예상보다 많이 작다고 합니다. 그래서 윈도우즈를 개발할려면 많은 인원이 추가로 고용해야하고 가장 큰 이유는 OSX에서만 지원하는 기능(프로그래밍 적)을 많이 사용하고 있다고 합니다.
앞으로 계속 디자인을 업으로 생각하신다면 mac 구매를 진지하게 생각해보시길 바랍니다.
스케치외에 많은 생산성 높은 앱들이 많이 있습니다.
