brunch

매거진 UX 디자인의 모든 것

라이킷 227 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Oct 21. 2016

해외에서는 UX 프로젝트를 어떻게 진행하나?

UX 디자인 배우기 #55

Today UX 아티클

※ 이 글은 Medium에 올라온 Jan Losert가 작성한 「26 Steps of Product & Dashboard Design」을 원작자의 동의하에 전문 번역 및 게시한 글입니다.

26 Steps of Product & Dashboard Design – Design + Sketch App

What I have learned during my 4-year journey of a Product Designer & Dashboard Designer

medium.com

제품 디자이너이자 대시보드 디자이너로 보낸 4년간의 여정 동안 배운 것들

지난 4년 동안 저는 계속해서 대시보드와 애플리케이션을 디자인해왔고, 제품 디자인을 더 나으면서 효율적이게 만들기 위해 어떻게 다른 부서와 협업하면 되는지, 어떻게 그들의 지식을 활용하면 되는지 배웠습니다.

오늘 저는 제가 배우고 일상 업무에 적용했던 모든 단계를 여러분께 공유하려고 합니다. 제가 더 나은 디자이너가 되는 데 이 단계들이 도움이 되었다고 확신하며, 여러분과 공유하고 싶습니다.

1. 사전 준비 과정 (pre-process)

최대한 많은 정보를 모은다(세 가지 사례를 찾는다)

저에게 있어서 실제 작업한 사례를 보는 것보다 더 명확한 이해를 돕는 것은 없습니다. 저는 새로운 클라이언트와 작업하거나 어떤 제품의 새로운 랜딩 페이지를 작업할 때, 클라이언트에게 서너 가지 ‘영감을 주는 페이지’를 보내 달라고 요청하는 것이 가장 쉬운 방법이라는 것을 알게 되었습니다. 이렇게 하면 양쪽 모두에게 매우 도움이 되기 때문입니다. 클라이언트에게 아이디어를 내놓게 하는 것은 그들이 무엇을 좋아하는지, 최종 디자인에서 무엇을 기대하는지 쉽게 이해할 수 있는 기회를 제공해 줍니다.

만일 여러 팀과 일을 하고 있다면 디자인팀 동료들과 보내는 시간만큼 많은 시간을 제품 개발자들과 보내는 것을 목표로 해야 합니다. 제가 Tapdaq 일을 하면서 배운 것은 ‘효과적인 디자인 의사결정 내리기’의 핵심은 ‘반드시 개발팀과 최대한 많이 얘기 나누기’라는 것입니다. 제 경우에, 저 혼자서는 내놓을 수 없었던 문제의 해결책을 그렇게 해서 찾았습니다. 개발 단계에 들어가기 전에 최대한 많은 의문을 없애야 한다고 생각합니다.

퍼소나에 대해 배운다

먼저, 저는 퍼소나에 회의적인 사람이었다는 점을 고백합니다. 하지만 지금은 완전히 이해할 수 있습니다.

그래서 제가 이전에 했던 프로세스와는 정 반대로, 제품 기능을 작업하는 중에 퍼소나가 얼마나 중요한지, 특히 솔루션에 엣지 케이스(edge case)가 많은 경우에 얼마나 중요한지 알 것 같습니다.

퍼소나는 여러분이 실제로 누구를 위해 디자인하고 있는지 이해하는 데 도움을 줍니다. 저는 4개에서 5개 정도의 퍼소나를 두는 것을 목표로 합니다. 퍼소나를 실제 유저로 세우면 가장 좋은 점은 유저와 전화 통화를 하거나 직접 만나서 여러분이 낸 솔루션에 대해 얘기를 나누거나 살펴보는 동안 이슈를 찾아내는 데 도움이 될 수 있습니다.

퍼소나 템플릿 — Download it here: http://janlosert.com/persona-template.zip

정확한 목표를 설정한다 –우리가 쫓아야 하는 것은 정확히 무엇인가?

대부분의 디자이너와 클라이언트는 이 단계를 무시하지만, 여러분이 디자인하고 있는 제품의 목표를 이해하는 데 양쪽 모두에게 매우 중요한 디자인 측면 중 하나입니다. 우리는 바로 그림 그리기에 돌입해서 빠르게 프로젝트의 UI를 뽑아 내려는 경향이 있습니다. 만일 새로운 웹사이트나 새로운 기능을 디자인하는 경우에는 여러분이 달성하고자 하는 명확한 목표를 반드시 세워야 합니다.

모든 것이 달성 가능하니, 여러분이 달성하고 싶은 정확한 목표 지점을 말해보세요. 예를 들어 새로운 회원 가입자 수부터 시작해서 Paypal을 이용하는 고객 수 vs. 신용카드로 구매하는 고객 수까지 다양한 것이 목표가 될 수 있습니다. 언제나 시작할 때 얼마나 높이 목표를 세웠는지 알고 있어야 합니다.

P.S. 어쨌든 이 프로세스 중 나중 단계에서 Mixpanel에 퍼넬(funnel)을 세우다 보면 필요해질 것입니다.

프로젝트 폴더를 만들고 무드 보드 수집을 시작한다

Dribbble, Behance, Pttrns, Pinterest 등 영감을 얻을 수 있는 사이트가 많이 있습니다. 여러분이 작업을 시작할 프로젝트와 비슷한 프로젝트를 찾은 것은 매우 쉽습니다. 더불어 여러분이 경험하고 있고 해결하려고 노력 중인 그 문제에 대한 해결책이 이미 있을 수도 있습니다.

저는 새로운 프로젝트에 들어갈 때 언제나 Source Files, Screens & Export, Inspiration & Resources라는 이름의 폴더들을 만드는 것으로 시작합니다. 인터넷에서 찾는 보는 것은 나중에 기본 무드 보드를 만드는 데 사용할 수 있도록 Inspiration 폴더에 저장합니다. 이 폴더에는 플러그인부터 시작해서 견본 혹은 심지어 Behance에서 찾은 풀 케이스 스터디까지 집어넣습니다.

프로젝트 구조

2. 로우 피델리티(lowfidelity)부터 시작하기

화이트보드

기억하시는 분이 있을지 모르겠지만, 제가 이전에 쓴 글을 보면 저는 와이어프레임의 질을 별로 신경 쓰지 않았었습니다. 지금 제가 사용하는 방법은 다음과 같습니다.

새로운 기능을 추가하고 싶거나 프로세스를 다시 디자인하고 싶다면, 미팅에 참여한 사람들은 다 같이 앉아서 화이트보드나 종이 혹은 아이패드에 아이디어를 스케치하기 시작합니다. 이 활동을 해보면 팀 내 모든 사람들이 디자이너의 입장이 되어볼 수 있습니다.

나중에는 최종적으로 두 가지 디자인 옵션을 놓고 어떤 것이 최선인지 봅니다. 우리는 언제나 전체 경험을 살펴보려고 노력하고 이 단계에서 대부분의 엣지 케이스를 논의하려고 노력합니다. 엣지 케이스를 디자인 단계 중이 아닌 지금(개발 단계에 하면 더 좋지 않습니다) 다루는 것은 정말로 중요합니다. 그렇게 늦게 논의하게 되면 많은 시간과 에너지를 잃을 수 있습니다.

모든 스크린 정보 기획하기 (유저가 입력해야 하는 데이터는 무엇인가)

이제 화이트보드에서 넘어가서 유저의 모든 인풋과 스토리의 리스트를 적어볼 차례입니다. 특정 스크린에서 유저가 정확히 무엇을 입력해야 하는지, 어떻게 유저가 원하는 목표를 이룰 수 있는지 적어보세요.

발생 가능한 모든 상황을 적는다

모든 대시보드, 앱, 웹사이트의 폼(forms)의 상태는 다양하기 때문에, 이 단계는 여러분이 절대 잊어서는 안 되는 또 다른 중요한 단계입니다.

디자인을 하면서 우리는 반드시 모든 상황을 고려해야 합니다. Sketch 파일이나 PSD 파일에 빛나는 그래프나 멋진 프로필 사진을 넣는 것도 좋습니다. 하지만, 아마도 유저는 여러분 앱의 정 반대되는 부분을 보게 될 겁니다. 특히 제품을 볼 때 더 그럴 겁니다. 반드시 준비를 해둬야 합니다. 아래 사례는 저희가 Tapdaq에서 데이터 구성 요소 중 하나의 빈 상태를 보여주는 방식입니다.

Tapdaq – 크로스 프로모션 위젯 상태

첫 번째 다이어그램을 준비한다

이 모두는 로우 피델리티의 마지막 부분으로 이어집니다. 화이트보드 태스크에서 내놓은 결과물 덕분에 이제 발생 가능한 모든 상황과 유저의 인풋, 목표를 알게 되었습니다. 모든 인터랙션을 정리하기 위해 저는 다이어그램을 만드는데, 솔직히 말씀드리면 이 작업을 하는 스타일을 여러 번 바꿨습니다.

래스터화 된 레이아웃이 들어간 Sketch 파일부터 시작해서 각 페이지를 상징하는 사각형에 이름을 다는 방식까지 다양한 시도를 해봤습니다. 그런 까닭에 이 과정은 언제나 힘들었고 보통은 나중에 무언가를 추가하고 싶거나 바꾸고 싶은 상황에 처하게 되었습니다. 이런 솔루션들을 썼을 때는 나중에 라인이나 화살표, 이미지의 위치를 바꾸는 등 훨씬 더 많은 단계가 추가될 수밖에 없었습니다.

결국 저희는 CamundaModeler라는 것을 쓰게 되었는데 정확히 말하면 디자인 툴은 아닙니다. 기술적 다이어그램을 만드는 간단한 다이어그램입니다. 이상하게 들리긴 하지만 이 앱은 기본 다이어그램을 만드는 데 도움이 되도록 개발되었습니다.

가장 중요한 점은 여기서 만든 모든 것이 완전히 확장 가능하다는 겁니다. 어떤곳으로든 마우스로 쉽게 끌어서 옮길 수도 있고 자동으로 라인과 화살표를 만들어주기도 합니다. 다양한 종류의 포인트를 선택할 수 있는데 이 역시 매우 도움이 됩니다.

예를 들면 유저가 Intercom으로부터 이메일을 받은 경우를 하이라이트 해주는 거죠. Camunda는 SVG로 저장할 수 있게 해주는데 덕분에 Sketch에서 쉽게 색을 입힐 수 있습니다.

Tapdaq 메뉴 +스크린 구조 (Camunda Modeler에서 만듦)

3. 작업/디자인

무드보드(Moodboard)

Inspiration 폴더에 모든 이미지를 수집했기 때문이 이제 무드보드 제작을 시작할 준비가 되었습니다. 저는 주로 픽셀 프로세스를 시작하기 전에 동료들과 제 생각을 논의하고 비주얼 아이디어를 설명할 때 무드보드를 사용합니다.

Chronicle Display 와 밝을 파란 컬러 무드보드

초안

디자인하는 것은 언제나 계속되는 프로세스입니다. 훌륭한 결과를 낼 때까지 계속해서 반복 작업을 많이 하게 될 겁니다. 초안을 내놓게 되면 첫 번째 피드백이 따라옵니다. 팀원들, 클라이언트, 잠재적 유저에게 피드백을 받기 시작하기 위해 픽셀 수준의 완벽함까지 갖춘 디자인을 내놓을 필요는 없습니다.

그들이 우선 어떻게 생각하는지 알아내고 논의를 시작하기 위해서 저는 보통 현재 디자인에서 스크린을 가져와서 혼합합니다. 이렇게 하면 하루 안에 실제처럼 보이는 디자인을 가지고 논의를 시작할 수 있습니다. 잘 맞아떨어지면 간단한 첫 번째 프로토타입을 만들 수도 있습니다.

카피를 작성한다

카피는 유저의 결정에 영향을 미치는 핵심적인 측면 중 하나로, 저는 이것을 디자인에서 매우 결정적인 부분이라고 생각합니다. 저는 원어민은 아니지만 카피의 어조를 정하는 건 할 수는 있습니다. 유저가 다음 단계를 찾지 못해서 고생하게 만드는 헷갈리는 다이얼로그와 함께 보이는 멋진 디자인보다 더 나쁜 것은 없습니다.

첫 번째 인턴 테스트

첫 번째 초안을 가지고 이제 여러분은 Marvelapp이나 Invision을 이용해 빠르게 프로토타입을 만들 수 있습니다. 이는 제가 최근에 하기 시작한 것으로 검증을 해준다는 놀라운 측면이 있습니다.

프로토타입이 있으면 쉽게 팀 내에서 3명에서 4명 정도 불러서 프로토타입 링크를 공유하고 특정 플로우나 시나리오를 그들에게 테스트하면서 몇 가지 질문을 던질 수 있습니다. 이렇게 하면 쉽게 질문하는 스킬을 테스트할 수 있고, 시간과 자원의 낭비에 대한 걱정 없이 실제 유저를 대상으로 여러분이 내린 디자인 의사결정을 테스트할 수 있습니다.

저는 보통 대시보드 개발에 별로 관여하지 않는 사람들을 선택합니다. 또한 이전에 프로토타입을 볼 기회가 있었던 사람들도 피하려고 노력합니다.

에티켓

우리는 모두 깔끔함을 유지하는 것이 얼마나 어려운지 알고 있습니다. 어떻게 전달하느냐는 또 다른 문제입니다. 보통은 이런 작업을 하다 보면 Sketch 파일이나 PSD 파일이 난잡해집니다.

저는 DashboardUI Kit를 디자인하면서 많은 것을 배웠습니다. 특히 스타트업에서 유일한 디자이너로 일하는 것과 팀으로 일하거나 디지털 제품을 만드는 것 사이의 차이에 대해 많이 배웠습니다.

Tapdaq에서 일하는 동안 동료들의 실력에 대해서도 자신 있었고 제가 파일을 깔끔하게 유지하려고 노력 중이라는 것도 알고 있었지만, 여전히 깔끔함을 유지하는 것은 불가능했습니다!

팀으로 작업할 때는 PSD 파일을 다른 사람을 위해 만든다고 생각하고 만들어야 하는 것 같습니다. 저는 한 폴더에 8개 이상의 레이어가 들어가면 새로운 폴더를 만드는 규칙을 이용했습니다.

Dashboard UI Kit — 폴더 구조

Sketch에서 쓰는 아주 훌륭한 플러그인을 하나 발견했는데, UI Kits를 만드는 데 드는 시간을 많이 절약해주었습니다. Rename — https://github.com/rodi01/RenameIt

rodi01/RenameIt

RenameIt - Sketch plugin to rename layers like a boss

github.com

오래된 에티켓 가이드라인을 참고할 수도 있습니다. (어쨌든 어떤 편집기를 이용하건 활용할 수 있는 요점들입니다.) http://photoshopetiquette.com/

Photoshop Etiquette: A Guide to Discernible Web Design

photoshopetiquette.com

팁– 전부 캔버스에 집어넣는다

나머지 캔버스가 백지일 때 멋진 헤더를 디자인하는 것은 언제나 어려운 일이었습니다.

디자인을 하면서 저는 먼저 모든 내용을 한 곳에 모아야 한다는 것을 배웠습니다. 일단 넣어 두고 레이아웃과 타이포그래피만 조정하는 거죠. 이렇게 하면 디테일을 멋지게 작업하기 더 쉬워지고 전체 컨셉을 내용과 함께 작업할 수 있습니다.

UI 요소를 만들고 레고 놀이를 시작한다

이미 한 물 간 얘기일 수도 있고 구식처럼 들릴 수도 있지만, 적겠습니다. 지금까지 와이어 프레이밍을 전혀 하지 않은 이유는 간단합니다.

Sketch 39에는 정말 놀라운 기능이 있는데 바로 “shapes with resizing properties”라는 기능입니다. 이 기능 때문에 전부 50개가 넘는 Tqpdaq 스크린을 다시 만들었습니다. 저희 Sketch 파일은 완전히 드래그-앤드-드롭으로 만들 수 있습니다. 이렇게 하면 팀원 중 아무에게나 빈 캔버스를 주면 거의 하이-피델리티(highfidelity)에 가까운 드래프트를 만들 수 있습니다. 이 기능 덕분에 모든 와이어 프레이밍 툴을 건너뛰고 바로 실제처럼 보이는 작업물을 만드는 걸로 시작할 수 있습니다.

이는 와이어프레임을 실제 디자인으로 전환할 수 있게 해주는 것과도 밀접한 관련이 있습니다. 어떤 PM이든 와이어프레임을 만들 수 있어서 쉽게 그걸 가지고 하이-피델리티로 전환할 수 있습니다.

Tapdaq Sketch 파일의 드래그-앤드-드롭 요소

4. Assets & Delivery

디자인과 첫 번째 피드백을 기반으로 반복 작업을 하는 것이 끝나도 끝난 게 아닙니다. 이제 여러분이 만든 디자인을 엔지니어와 개발자들에게 전달할 시간입니다.

Specifications

저의 주요 목표 중 하나는 개발자들에게 최선의 리소스를 제공하기 위해 언제나 제 의사결정을 팀원들과 소통할 수 있고, 개발자들이 겪는 어려움을 최대한 줄여주는 것입니다. 바로 이것이 디자이너로서 제 일 중 가장 중요한 부분입니다.

모든 인터랙션을 기록하였고 프로세스를 시작할 때부터 모든 것을 준비했기 때문에, 스펙을 적는 건 식은 죽 먹기입니다. 저는 보통 스펙을 Google Docs에 적거나 Sketch 파일 스크린 하단에 적습니다. 디자인을 모든 기능에 대한 설명과 함께 관리하면 미래에 그 파일을 얻게 될 누구든 이해할 수 있어서 좋습니다.

다이어그램

Badoo에서 일하면서 팀원들이나 이해관계자들 앞에서 발표를 할 때 이 테크닉을 썼었습니다. 디자인을 프린트해서 팀원들과 논의할 때 좋은 테크닉입니다. 하지만 요즘엔 더 나은 옵션이 있다고 생각합니다. 예를 들면 프로토타입을 준비하는 거죠.

Sagram Analytics App의 전체 다이어그램

최종 프로토타입

제게 중요한 것 중 하나는 모든 인터랙션은 프로토타입으로 준비하는 겁니다. 보통은 최종 프로토타입을 만들기 전에 팀원들과 작은 세션을 진행하거나 특정 플로우를 보여주기 위해 3개에서 5개 정도의 프로토타입을 만듭니다.

모든 상황을 Sketch에 하나의 아트보드에 담아 준비하고, 그 아트보드를 복제해서 준비를 해둡니다. 앞서 말했듯이 Marvelapp이나 Invision을 사용해도 됩니다. 스펙을 확장하기 위해 디자인의 부분 부분에 코멘트를 추가하는 것도 좋습니다.

그러면 모든 카피라이터들이 쉽게 들어가서 실제 결과물과 플로우를 확인해서 모든 카피와 다이얼로그가 적절한지 볼 수 있습니다.

Quicktime비디오> 노트

행아웃으로 팀원들이나 클라이언트에게 보여주지 않을 때는, 제가 직접 프로토타입을 이용하면서 디자인한 모든 것을 설명하는 스크린쉐어 비디오를 보냅니다.

발표 전에 모든 질문의 답을 미리 알고 디자인하기로 결정한 멋진 인터랙션이 가능하다는 것을 알 수 있다는 것은 확인하는 차원에서 좋습니다.

원격으로 함께 일하는 팀에서도 역시 적합한 방법일 수 있습니다. 모든 사람들이 전체 인터랙션에 대한 생각을 언제는 다시 재생해볼 수 있습니다.

애니메이트

디자인을 멋지게 최종 마무리하기 위해서는 After Effects 나 Principle을 이용할 수 있습니다. 어떻게 움직이고 마우스를 올리면 어떻게 되길 원하는지 설명하는 좋은 방법입니다.

스타일 가이드

엔지니어에게 중요한 또 다른 포인트는 다른 시나리오에서는 어떻게 반응하는 건지 아는 것입니다.

입력 내용의 오류 상태나 어디에 오류 메시지를 어떻게 보여줄지 생각해보세요. 제출 버튼의 이용 불가 상태를 어떻게 보여줄지, 스피너를 어디에 집어넣어야 할지 등도 마찬가지로 생각해봐야 합니다.

Sketch 파일이 레고 블록처럼 있는 덕분에 엔지니어에게도 전체 화면의 코딩을 시작하기 전에 심벌 아트보드와 스타일을 보면서 하나씩 확인하는 것은 매우 쉬운 일입니다.

스타일 가이드와 모든 요소의 비주얼 오버뷰는 사실 다음에 제 Dashboard UI Kit를 업데이트할 때 반드시 들어가야 할 기능이자 디자인이기도 합니다.

Tapdaq UI 오버뷰 — 스타일가이드

5. 마지막&테스트

디자인을 엔지니어에게 넘기면 끝나기 때문에 프로세스의 마지막 단계에 집중할 수 있습니다. 우리의 의사결정을 테스트하는 거죠!

Inspectlet/ HotJar

디자인이 원하는 방식으로 코딩되고 나면 Inspectlet 또는 HotJar JS snippets를 포함시키는 것을 잊지 마세요. 유저가 어떻게 우리가 만든 대시보드를 탐색하는지 또는 제 포트폴리오 페이지에서 무엇을 하는지 보는 것은 언제나 즐거운 (혹은 좌절스러운) 일입니다.

Inspectlet은 모든 유저 세션을 수집하는 놀라운 툴입니다. 큰 프로젝트에도 적합합니다. “/page” 필터링이라는 쉬운 기능만 써도 특정 기능이나 플로우의 세션을 볼 수 있도록 도와줍니다. 저희 Tapdaq에서는 Inspectlet을 사용합니다. 제 개인 포트폴리오에는 HotJar의 무료 기능을 써서 히트맵을 만들고 포트폴리오를 탐색하는 소수의 유저를 녹화합니다.

Mixpanel

Mixpanel은 목표(이 프로세스의 매우 초반에 새웠던 것)의 타당성을 검증하는 작업에 매우 좋습니다. Mixpanel은 얼마나 많은 유저가 특정 플로우를 완료하는지 볼 수 있도록 도와줍니다. 얼마나 많은 유저가 계정을 만들기 전에 포기하는지, 얼마나 많은 사람이 메인 랜딩페이지에서 스토어로, 스토어에서 가장 가치가 큰 제품으로 넘어가는지 알려줍니다.

Google Analytics

저는 대단한 코딩은 하지 못해도 적어도 CSS 파일 작업이나 간단한 코드 작업은 할 수 있습니다. 최근에는 Hotjar의 히트맵을 보면서 유저가 어디를 클릭하는지에 관심이 생겨서 Google Analytics에도 베이직 클릭 트랙커를 설정하기로 결정했습니다. 모든 유저의 클릭을 쉽게 추적할 수 있습니다. 다음은 클릭 추적을 할 수 있는 샘플 코드입니다. http://pastebin.com/tdmFZN2k

[HTML] Google Analytics Click Tracking - Pastebin.com

pastebin.com

Google Analytics 트래킹 코드

Google Analytics 트래킹 결과

보시다시피 모든 버튼과 모든 링크를 추적하고 있고 항상 각각의 기준점에 서로 다른 레이블을 붙입니다. 이렇게 하면 쉽게 유저의 행동과 연결할 수 있습니다. 예를 들어서 사람들이 인트로 텍스트에 있는 하이라이트 된 링크보다 상단 내비게이션을 5배 더 많이 이용한다는 것을 알게 되었습니다. 여러분의 사이트에도 이 스니핏을 적용해보세요.

P.S. 안타깝게도 AdBlock을 사용하는 유저의 클릭은 추적하지 못합니다.

Intercom

초반 플로우에서 유저가 Intercom으로부터 이메일을 받는 플로우의 일부분에 대해서 얘기했었습니다. 여기서 우리의 책임은 모든 카피와 메시지가 그 자체로도 말이 되는지, 방문자에게 도움이 되는지 확인하는 것입니다. 여러분이 보내는 이메일이 유저를 원하는 결과로 인도하는지 반드시 확인하고 언제든 구체적인 도움글과 정보와 플로우를 계속 따라가는 방법을 제공하려고 노력하세요.

6. 디자인 후 / 내일을 관리하는 방법

목표

이 여정의 마지막 단계에 이르면 저는 일/Tapdaq 관련 목표, 개인 프로젝트 목표, 인생 목표로 쪼개서 한 달짜리 스프린트를 계획합니다. Things by Cultured Code을 써서 프로젝트를 작은 태스크로 쪼개는 데, 이렇게 하면 일을 끝내기 쉽습니다.

예전에는 한 번에 프로젝트를 5개씩 했던 적도 있는데 언제나 아무것도 기한을 맞추지 못해 좌절했었습니다. 요즘 저는 매달 최소 한 가지 일을 끝내는 것을 목표로 삼고 있습니다. 여기서 “일”이라 함은 제 포트폴리오의 새로운 서브페이지 2개부터 클라이언트의 신규 랜딩 페이지까지 무엇이든 될 수 있습니다. 스스로 앞으로 나아가고 무언가 끝내는 일에서 행복을 느끼는 거죠.

원본 출처 Siavash Mahmoudian — https://mobile.twitter.com/siavash/status/618093511066435585

워크스페이스

저는 이미 대부분의 디자인 작업에 Sketch를 사용하고 있지만, 많은 분들이 제 Instagram에 포토샵 워크스페이스를 물어보시더라고요. 여기 있습니다!

http://janlosert.com/workspace.zip

7. 마지막 몇 마디

여기까지 제가 디자인을 할 때 밟는 모든 단계를 개괄적으로 살펴보았습니다. 물론 저도 항상 똑같은 루틴을 반복하진 않지만, 이를 통해 제가 작업하는 방식에 대한 아이디어를 전달할 수 있었으면 합니다.

Dribble는 잊어버리자

지난 4년이 넘는 시간 동안 제가 배운 것과 제 디자인이 어떻게 바뀌었는지 보면서, Dribble이 우리 디자이너에게는 새로운 클라이언트의 마음을 끌고 작업물을 보여주는 최고의 방법이라는 것을 깨달았습니다.

하지만 꼭 그 공간에 맞춰서 디자인할 필요는 없습니다. 저는 언제나 섹시한 프로필 사진이 붙은 멋진 결과물을 내놓는 것을 목표로 하지만, 그건 실제 유저가 필요로 하는 것도 아니고 그들이 이용하게 될 것도 아닙니다.

아래는 Tapdaq의 한 사례인데, 왼쪽은 Instagram과 Dribble에 올릴 생각을 하고 만든 멋진 샷이고 다른 하나는 사람들이 프로필 편집하는 모습을 몇 시간 동안 관찰하고 난 후, 그러니까 실제로 그들이 요청하는 정보와 필요로 하는 정보가 무엇인지 깨달은 후에 만든 현재의 스크린샷입니다.

계정 설정 화면 – Before & After

미래

저의 다음 미션은 UX와 리서치를 더 파고드는 것입니다. 다음 글에서 제가 A/B 테스팅에 사용하는 UX 툴과 데이터 수집에 사용하는 UX 툴을 개괄적으로 소개하겠습니다. 저는 여전히 UX 분야에 경험이 별로 없고 이전 직업에서 UX에 대해 배울 수 있는 기회가 별로 없었습니다. 하지만 최근에는 제가 작업하고 있는 모든 새로운 프로젝트에서 유저가 어떻게 움직이는지 열정적으로 관찰하고 추적하고 있습니다.

마무리

여러분의 작업 프로세스도 듣고 싶습니다. 개인 프로젝트를 할 때 주로 어떤 단계로 하시는지, 그 프로세스는 팀으로 일할 때 어떻게 달라지는지 궁금합니다. 다른 분들의 작업공간도 보고 싶습니다. 그러니 제 프로세스에 있는 모든 단계와 추가적인 단계에 대한 여러분의 생각을 편하게 공유해주세요.

감사합니다.

2023년 6-7월에 촬영한 추천 VOD UX 강좌
(매일 1명만 선착순 신청 받습니다)
(조기 마감될 수 있습니다)

안녕하세요. UX 컨설턴트 전민수입니다.

브런치를 운영한 지 6년이 되었는데 어느덧 구독자 12,000명 되었네요.

여러분의 응원에 힘을 얻어 지금껏 아티클을 가능한 작성 했는데요. 많은 구독자께서 브런치 글을 강의로 제공하면 좋겠다는 의견이 많았습니다. 그래서 과거부터 최신 UX 아티클의 내용을 더 쉽게 전달시키는 목적으로 인터넷 강의 형태로 촬영하여 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.

UX 라이브클래스 패키지를 통해 전체 178여 개 UX 강좌를 하나의 패키지 형태(총 300시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 할인율 98%(정가 5,340,000원 > 할인가 98,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다. 참고로 매일 선착순 1명만 한정 판매하오니 서둘러 주세요~

(라이브클래스 플랫폼 회사 계약으로 인해 매일 선착순 1명만 수강 신청 가능하오니 양해 바랍니다)

PM VOD 패키지 바로가기 >