UX 디자인에서 사용자는 다양한 툴 엿보기
UX 디자인 배우기 #87
Today UX 아티클
Medium에 올라온 Keaton Herzer의 글 The Ideal Design Workflow을 원저자의 허락을 받아 번역한 글입니다.
디자이너로서 우리는 최고의 툴과 프로세스를 찾기 위해 계속해서 다양한 툴과 프로세스를 실험해보게 됩니다. 저도 많은 실험을 해보았고, 마침내 완벽한 디자인 워크플로우를 발견하여 여러분과 공유해보고자 합니다. 디자인은 곧 프로세스입니다. 제가 오늘 공유하고자 하는 프로세스는 사람들이 너무 좋아해 습관적으로 이용하는 제품을 만드는 데 제가 항상 사용해온 프로세스입니다.
1) 스케칭(종이와 펜)
모든 훌륭한 디자인은 종이에서 시작됩니다. 종이와 펜을 꺼내서 그리기 시작해보세요.
The Ideal Design Workflow .>Flawless.2) POP
다음은 스마트폰을 꺼내 스케치의 사진을 찍고, 프로토타입을 테스트해볼 수 있도록 이 아가들을 POP으로 가져옵니다.
3) 와이어프레임
다음 단계는 와이어프레임을 만드는 겁니다. 스케치를 하는 것으론 절대 충분하지 않습니다. 와이어프레임은 반드시 시간을 들여서 해야 하는 작업입니다. 돌아갈 수 있는 지름길은 없습니다. Omnigraffle에 들어가서 와이어를 만드세요.
4) Balsamiq
이제 드롭다운 메뉴가 필요하다는 것을 알았으니 Balsamiq으로 가서 다시 와이어를 그려봅니다.
The Ideal Design Workflow Good when designing for 3rd graders.5) Axure
다음으론, Balsamiq이 완전 별로라는 걸 알아서 Axure에서 다시 작업해봅니다.
6) Adobe Illustrator
다음으론, Axure도 완전 별로라는 걸 깨닫고 Adobe Illustrator로 바꿔서 $89 주고산 UI 와이어프레이밍 키트를 사용해 다시 작업합니다.
7) Invision
이렇게 그린 와이어를 팀원들과 공유하기 위해 PNG로 저장해서 Invision로 가져갑니다.
8) 다음날 아침에 일어나서 Invision 프로토타입에 조나단이 남긴 모든 부정적 코멘트들을 보고 시리얼에 눈물을 쏟습니다.
The Ideal Design Workflow This shit’s delicious.9) 다시는 Invision을 사용하지 않기로 결심합니다. 절대로요. 나쁜 조나단 때문입니다.
10) Marvel
Marvel로 다시 프로토타입을 만들면서 이번엔 조나단이 Marvel에 코멘트를 남기는 방법을 알아내지 못하길 바라봅니다.
11) 성공했습니다. 와이어프레임이 마침내 통과되었습니다. 조나단에겐 전혀 고맙진 않습니다. 이제는 좀 더 높은 피델리티의 프로토타입을 작업할 시간입니다.
12) 다른 사람들이 다 이용하는 스톡 사진을 가지고 Photoshop을 이용해서 최적화합니다.
The Ideal Design Workflow Looks pretty optimized.13) Sketch
자, 이제 Sketch를 열어서 앱에 쓸 여러분의 앱에 쓸 UI를 만들 차례입니다. 이제야 제대로 된 프로덕트를 만드는 것 같아 보이네요!
14) Flinto Lite
이제는 이걸 PNG로 저장해서 Flinto Lite 스크린에 집어넣습니다.
15) Flinto for Mac
제스처 기능이 필요하다는 걸 깨닫고 제스처를 넣을 수 있도록 Flinto for Mac을 $99 주고 구입합니다.
The Ideal Design Workflow These are different people! Very import16) 여러분의 CEO/이해관계자/클라이언트는 “자기 폰에 앱을 하다 더 깔기를 싫어합니다”. 그래서 자기 아이폰에 Flinto 앱을 깔기를 거절합니다.
17) 디자인을 Principle에 집어넣고 인터랙션을 추가합니다.
18) Principle는 망할 영상으로 저장을 해주네요? 잠깐 동안 포기를 합니다. 괜찮아지겠죠
19) Pixate를 깔아봅니다. 공짜라는데 안 해볼 이유가 있나요?
20) Pixate 이용법을 배워봅니다. (행운을 빌어요)
21) 이제 여러분은 컴퓨터를 부숴버리고 싶을 겁니다. 그럴 수 있겠지만, 화를 다스려보세요. 원래 창작을 하는 과정이란 다 그렇잖아요. 다시 일어서려면 넘어져봐야죠. 이런 어려움이 절대 여러분을 좌절시킬 수 없을 겁니다.
22) Pixate로 버려야 할 쓰레기 웹페이지를 만들었으니, 이제 도구를 바꾸어 Framer 무료 시험판을 다운로드하여봅니다.
Looks promising!23) 이제 가서 점심을 먹습니다. 점심을 먹을 자격이 충분합니다.
Tacos sound good.24) 점심 먹고 와서 봤더니 Farmer시험판이 만료되었다는 걸 깨달았습니다. (정말로요. 32분짜리 시험판을 주거든요.)
25) Justinmind를 써서 프로토타입을 다시 만듭니다
26) Justinmind 파일을 보냈다고 팀원들한테 까입니다. 아무도 망할 Justinmind가 뭔지 몰라서 파일을 열 수가 없거든요.
27) 건물 밖으로 뛰어내릴까 고민해보지만, 이내 괜찮을 거라는 생각을 해봅니다. 친구가 밋업/콘퍼런스/ 블로그 포스트 /TED 토크/Product Hunt 등에서 들은 새로운 멋진 프로토타이핑 툴을 알려줬거든요.
이게 바로 여러분의 모습입니다.읽어주셔서 감사합니다. 저와 같은 디자이너분들에게 도움이 되셨으면 좋겠네요.
감사합니다.
라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내
1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30)
2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)
3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)
4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)
5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)
6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)
7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)
8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)
라이브클래스 (VOD) 프로그램
UX 스터디 참석하지 못한 분을 위해, VOD 강의 촬영하였습니다
(일부 강좌만 VOD 오픈하였고,
그 외 강좌는 아직 VOD 편집 중이며 곧 오픈 예정입니다!!!!)
(VOD) UX 로드맵 시리즈 #1. UX 취업, 면접, 포플
(VOD) UX 로드맵 시리즈 #2. UI, 인터랙션, UX 정의
(VOD) UX 로드맵 시리즈 #3. UX 가설 설계
(VOD) UX 로드맵 시리즈 #4. 데스크 리서치
(VOD) UX 로드맵 시리즈 #5. 유저 컨텍스트 리서치
(VOD) UX 로드맵 시리즈 #6. UX 리서치 분석 및 UX 전략 수립
(VOD) UX 로드맵 시리즈 #7. UX 설계
(VOD) UX 로드맵 시리즈 #8. U8 설계 단계 리서치
(VOD) UX 로드맵 시리즈 #9. UX 디자인 가이드 원칙
