내가 일하는 방식
어쩌면 다들 비슷하게 일하고 있는 방법에 대한 공유
저는 현재 프로덕트 디자이너로 일하고 있습니다. 사용자의 총체적인 경험을 연구하고 디자인, 개발하는 직업의 특성에 따라 정보를 모으고, 작업하고, 정리하고, 공유하는 습관이 몸에 익숙해져 있습니다. 이 아티클은 'UX 디자이너들은 이렇게 일한다'를 말하고 싶은 것은 전혀 아닙니다. 제가 일하는 방식(저는 이렇게 일하고 있습니다)을 공유하고 더 좋은 피드백을 듣고 개선해 보고자 하기 위함입니다.
이 아티클에서는 제가 사용하는 툴을 중심으로
1. 하나의 프로젝트를 시작해서 운용하고 정리하는 방법
2. 프로젝트 진행 시 사용하고 있는 툴들
3. 협업에 유용한 버전 관리 방법을 간단하게 공유해 보고자 합니다.
기본 작업 환경,
제가 사용하는 프로그램들의 특성상 MacOS에서만 작동하는 것들이 많아 맥북프로를 4K HUD 모니터(27인치)에 연결해서 보통 듀얼 화면으로 작업을 합니다. (개인적인 취향이지만) 효율을 위해서 집과 회사의 작업 환경을 거의 유사하게 셋업해 놓고 작업하고 있어요. 파일 클라우드 및 백업용 서비스는 2가지를 사용하는데 Dropbox Plus ($9.99 / month-유료)와 Google Drive(기본 용량-무료)를 사용하고 있습니다.
01
하나의 프로젝트를 시작해서
운용하고 정리하는 방법
저의 나름의 정리 방법 팁은 폴더를 잘 관리하는 것입니다. 그래서 제가 새로운 프로젝트를 맡아서 제일 먼저 시작하는 일은 드롭박스(Dropbox)에 해당 프로젝트에 관한 폴더를 만드는 것입니다.
1. 최상위 폴더명은 해당 프로젝트를 시작하는 날짜를 기입합니다.
'연월일 + 프로젝트 이름'으로 폴더 생성
⇢ 제가 최상위 폴더에 프로젝트 시작하는 날짜를 입력하는 이유는 1) 프로젝트 시작한 날짜 순으로 폴더 순서를 관리할 수 있고 2) 개인 포트폴리오를 정리할 때 프로젝트 시작일이 남아 있으니 '프로젝트 진행 기간'에 대한 계산이 용이하기 때문입니다.
2. 최상위 폴더에 하위 폴더들을 만들어 관리합니다.
작년 full-stack으로 프로젝트를 진행했을 때의 폴더들0. Document (비즈니스 단에서 정해진 사내 협의 문서, 협력사 등에서 보내온 문서, 제안서 등)
1. Research (프로젝트 관련 통계나 논문자료 등)
2. Benchmarking (타 서비스에 대한 벤치마킹, 각 서비스별로 정리)
3. Design study (UT 등 사용자 경험에 관한 스터디 자료 정리)
4. Wireframe (User flow, Experience map 등의 와이어프레임 정리)
5. Draft (모든 시안들은 이 곳에 정리)
6. Screenshot
7. Prototype (or Interactive) (framer 등의 파일은 이 곳에 정리)
8. Identity
9. App icons
10. App store
11. Application (마케팅 이미지들 날짜별로 별도 정리)
12. Mockup & Simulation
13. Web uploads (Behance나 dribbble, 개인 홈페이지 format에 맞는 웹 업로드 용 파일들)
올해 진행하고 있는 프로젝트 폴더들⇢ 이렇게 정리하는 목적은 '이 파일이 어디에 있지?'라고 내가 스스로 찾을 때와 누군가 '어떤 파일을 나한테 보내줘'라는 요청이 있을 때 경로를 직관적이고 명확하게 기억하도록 만들어서 필요할 때 적재적소에 빠르게 찾기 위함이었습니다. 저는 위의 방식으로 폴더링을 하지만 개인별로 또 업무 범위에 따라 다른 폴더들을 만들 수 있을 것 같습니다. 마지막으로 이 폴더 안의 내용들은 보통 알프레드(Alfred) 툴을 활용해 검색하고 브라우징 합니다.
02
프로젝트 진행 시 사용하고 있는 툴들
1. 사용자 조사에 사용하는 툴
‣ SurveyMonkey
‣ Google Forms
‣ UX Pressia
‣ OmniGraffle
⇢ 서베이몽키(SurveyMonkey)는 다수의 사용자에게 3-5개 미만의 질문의 설문조사를 진행할 때 자주 사용하는 툴입니다. 구글 설문지(Google Forms)도 같은 맥락으로 사용될 수 있습니다. UX 프레시아(UX Pressia)는 유저 저니맵과 퍼소나 작업을 다른 기획자와 디자이너들과 협업하는데 편한 툴입니다. OmniGraffle은 다이어그램 등으로 user flow를 작업할 때 사용한 툴입니다. 요즘은 거의 스케치툴 안에서 작업하고 있습니다.
2. 디자인 작업 툴
‣ Sketch
⇢ 화면 작업 시 가장 기본적인 스케치 앱(Sketch App)입니다. 벡터 기반으로 포토샵 대비 용량도 적고, 지금까지 나온 툴들 중 Interface 작업에 가장 편한 기능을 갖췄다고 생각합니다.
커스텀으로 입력해두고 사용하고 있는 단축키들[Sketch plugins]
‣ Sketch Material
‣ Runner
‣ Anima Toolkit
‣ Abstract
‣ Align
‣ Artboard Manager
‣ Batch Create Symbols
‣ Cleanup Useless Groups
‣ Color Contrast Analyser
‣ Duplicate Symbol
‣ Find and Replace
‣ Paddy
‣ Pixel Perfecter
‣ Rename It
‣ Sketch Measure
‣ Sketch Palettes
‣ Sketch Preview
‣ Symbol Instance Locator
‣ Symbol Instance Renamer
‣ Symbol Instance Sheet
‣ Symbol Organizer
‣ Symbol Swapper
‣ Toggle Craft
‣ Zeplin
⇢ 스케치의 확장성 중 하나가 다양한 플러그인들에 있다고 생각합니다. 제가 자주 사용하는 플러그인들입니다. 작업에서 필요한 파일에 맞게 잠깐 인스톨했다가 지우는 플러그인들도 있는데, 너무 플러그인을 많이 쓰면 단축키가 꼬이거나 프로그램 자체가 무거운 느낌이 들어 가끔 정리해서 쓰는 편입니다. 다른 분들은 어떤 플러그인들을 사용하고 있는지 궁금합니다, 추천해주세요!
3. 프로토타입 혹은 화면을 공유하기 위한 툴
‣ InVision App
‣ Flinto
‣ Framer
⇢ 간단한 프로토타이핑 툴로는 인비전(InVision)과 플린토(Flinto) 사용하고 있습니다. 말보다 직접 보는 게 커뮤니케이션에는 제일이라고 생각하게 만드는 프레이머(Framer)도 꾸준히 공부도 하고 있는데, 실제 작업에서 활용할만한 작은 인터렉션부터 직접 만들어 보는 게 실력을 키우는데 큰 도움이 되는 것 같았습니다. 프레이머는 지금도 열심히 공부하고 있어.. 요..
4. 데이터 측정 및 관찰을 위한 툴
‣ Google Analytics
‣ Mixpanel
‣ Appsflyer
‣ Hotjar
‣ Apptimize
‣ Grafana
⇢ UX 디자인에서 어떤 데이터를 보려고 하며, 어떤 데이터가 의미 있는지를 해석하는 것은 굉장히 중요합니다. 기획에서 알 수 없었던 예상치 못한 사용자의 패턴을 발견할 수 있고, 또 이 데이터를 기준으로 유의미한 변화를 다시 기획할 수 있습니다.
웹과 모바일 앱 등에서 다수의 사용자를 대상으로 사용성과 유용성 등 수치화하기 어려운 항목을 추적하고 있는 툴과 서비스들은 정말 많습니다. 가장 대표적인 구글 애널리틱스(Google Analytics)는 사용자들의 세션과 이벤트를 기반으로 세션 시간, 세션 경로, 접속 지역, 접속 디바이스와 OS 버전 등 데이터를 수치화하여 보여주는 기능을 제공하고 있습니다.
믹스패널(Mixpanel)은 구글 애널리틱스의 '개인 정보 보호 정책' 때문에 제공되지 않는 사용자의 추적을 제공하는 분석 툴로 특정 사용자를 지목하여 해당 사용자의 이벤트 전체를 조회할 수 있는 기능을 제공합니다. 이 기능은 믹스패널의 큰 특징으로 사용자의 특성과 그들의 특성들의 묶음을 그룹으로 만들어서 사용자 그룹의 사용 패턴을 분석하는데 유용하게 사용될 수 있는 큰 장점이 있습니다. (하지만 세션 시간을 알기가 어려워 사용성을 분석할 때는 상대적인 해석이 있을 수 있습니다)
모바일 광고 측정 플랫폼인 앱스플라이어(Appsflyer)와 신생 스타트업이지만 CRO(Conversion Rate Optimization; 구매 전환율 최적화) 툴로 유명한 핫자르(Hotjar)도 UX 디자이너, 혹은 기획자들에게 유의미한 데이터를 설정할 수 있습니다. 코드 작업 없이 화면과 flow의 A/B 테스트를 할 수 있는 앱티마이즈(Apptimize) 등도 있습니다. 그라파나(Grafana)는 실시간 모니터링을 위한 오픈소스 매트릭 대시보드 툴입니다.
03
협업에 유용한 버전 관리 방법
1. 모두와 협업하기
‣ Slack
‣ Jira
‣ Confluence
‣ Dropbox Paper
‣ Notion
⇢ 이미 많은 곳에서 사용 중인 업무용 커뮤니케이션 툴인 슬랙(Slack)입니다. 이슈 트래킹 툴로는 유트랙(YouTrack), 아사나(Asana), 쓰기 나름인 트렐로(Trello) 등이 있습니다. 지금은 아틀라시안에서 나온 지라(Jira)로 프로젝트의 이슈나 버그 등을 트래킹하고 있습니다.
모두와 협업하는 툴은 개인의 취향을 반영해서 사용하기보다는 회사 단위, 팀 단위에서 협의로 정해진 툴에 나를 맞추는 게 맞는 거 같네요. 프로젝트 관리 툴은 swim lane(수영장에 그어진 선처럼)의 칸반 보드를 운영하는 기능들이 기본적으로 제공이 되고, 각 이슈는 카드를 발급하는 형식으로 보통 운영하는 것 같습니다. 각 카드에는 우선순위, 담당자, 연결된 다른 이슈, 체크 리스트 등을 등록할 수 있습니다.
⇢ 업무용 기록 툴로는 드롭박스 페이퍼(Dropbox paper)와 노션(Notion)을 사용하고 있습니다. 노트용 툴은 워낙 개인 취향을 많이 타는 부분이지만, 검색이 쉽고 기록의 목적과 동시에 Wikis 등이 기능이 제공되는 툴을 편하게 사용하는 것 같습니다. 아, 디바이스 간의 호환도 중요한 것 같습니다.
2. 개발자와 협업하기
‣ Zeplin
‣ Github - Sourcetree
‣ Visual Studio Code
제플린을 활용한 가이드 예시 화면입니다⇢ 처음 UX/UI를 시작했을 때는 어도비 포토샵으로 디자인을 하고, 가이드라인 작업까지 진행하곤 했었는데.. 지금은 디자이너와 개발자 사이의 언어를 나름 번역해주는 툴을 많은 회사들에서 사용하고 있는 것 같습니다. 가장 대표적인 툴이 제플린(Zeplin)인데 저도 개발자와 협업할 때 이 툴을 사용하고 있습니다.
디자이너가 직접 터미널을 이용해서 깃을 사용하기 어렵기 때문에 소스트리를 이용해서 협업할 수 있습니다⇢ 개발자와 협업의 방식 중에 하나로 Git을 사용하는 것인데, 디자이너가 직접 브런치를 따서 markup 작업, 아이콘을 수정하거나 인터렉션 등을 넣을 수 있습니다. 저는 깃을 사용할 때 소스트리(Sourcetree)라는 툴을 사용합니다.
Visual Studio Code에서 간단한 html5, css 작업⇢ 디자이너가 사용하기 좋은 code editor 툴로는 어도비의 브라켓(Brackets)이나 서브라임 텍스트(Sublime Text), 깃헙에서 만든 아톰(Atom) 등이 있습니다. 저는 마이크로소프트의 비주얼스튜디오 코드(Visual Studio Code)를 주로 사용하고 있습니다. 위에 나열한 코드 에디터 4가지를 다 써봤는데 약간 확장성 측면에서 비주얼스튜디오 코드가 제게는 편한 느낌이었고, 특별히 선호하는 이유는 없습니다. 작업에 편한 걸로 쓰시는 게 체고!
3. 디자이너와 협업하기
‣ Abstract
⇢ 한 개의 프로젝트에 1개의. sketch 파일로 한 명의 디자이너가 일을 한다면 버전 관리가 특별히 필요 없을지도 모릅니다. 그런데 현재 작업하고 있는 프로젝트가 1) 여러 버전의 테스트가 진행되고 있다(= '최종' 파일이 엄청 많다) 거나 2) 같은 서비스를 여러 디자이너가 작업하고 있다면 버전 관리가 필수적일 것입니다.
현재 회사에서 앱스트릭트(Abstract)를 사용하고 있는데, 앱스트릭트는 깃헙과 아주 유사한 방식을 적용해 버전 관리를 할 수 있도록 만들어진 툴입니다. 깃헙을 모르더라도 홈페이지에 있는 guide를 따라서 직접 파일을 활용해 보면 쉽게 적용 가능합니다.
제가 공유하는 방법은 지극히 사적이고 제 개인적인 취향이 반영되어 있습니다. 같은 카테고리의 더 좋은 기능들의 툴들이 있을 수 있습니다. 무엇이든지 언제든 추천해주세요 :)
긴 글 읽어주셔서 감사합니다 ☻
