UI 디자이너로써 예전에 프로토타입 외주 업체를 운영하며 많은 UI 프로젝트를 진행해보았었다.
하지만 외주의 특성상 개발에만 집중할 뿐, 서비스의 기획부터 개발 및 운영까지 이어져오는 흐름들에 대해서는 경험해볼 기회가 부족했었고, 이렇게 외주 업체로만은 더 이상의 발전과 배울 것은 없다는 생각이 들어 그만두고 팀을 옮기면서 하나의 서비스를 처음 시작부터 심도 있게 관여해볼 수 있었다. 그리고 이번 프로젝트를 진행하며 직접 몸으로 체득하며 사용했던 다양하고 유용한 10가지 도구를 소개하고자 한다
소개되는 도구들은 UX 프로젝트 담당자가 사용할 수 있을 도구들로써 사용자 조사 및 기획 단계에서부터 UI 개발 단계까지 사용된 도구 들이다 소개되는 몇몇 도구들은 맥 os에서만 이용이 가능하다
10개의 도구들은 크게 5가지로 분류하였는데
1. 사용자 조사 도구
2. 협업 도구
3. UI 개발 도구
4. 사용성 평가 도구
5. 기타 도구
로 분류하였으며 각 분류당 2개의 도구를 소개한다
1. 사용자 조사 도구
1-1. 언바운스 https://app.unbounce.com
언바운스는 매우 간단하게 원페이지 프로모션 웹페이지를 만들어 주는 웹 기반의 서비스이다
마우스 드래그 앤 드롭 등의 GUI 방식으로써 개발 언어를 전혀 모르는 사람들도 쉽고 간편하게 자신의 서비스 론칭페이지 제작이 가능하다.
다른 비슷한 도구와 달리 언바운스는 폭넓은 커스터 마이징이 가능하기에 원하는 대로 만들 수 있으며, PC와 MOBILE 각각 컨트롤하여 디바이스별로 최적화시킬 수도 있다.
유료 서비스인데 카드 정보를 등록하고 한 달은 무료로 이용해볼 수 있다 그리고 한 달이면 사용자 조사를 목적으로 사용하기엔 충분하다
우리는 언바운스를 프로모션 보다는 사용자 조사와 기획 검증을 위해 사용했었는데, 즉 간단하게 페이지와 신청폼을 만들어놓고 실제 사용자들에게 보여주고 그들이 신청폼을 작성하는 것을 확인하였었다. 이로써 우리 사용자가 누구인지 알게 되었었으며 또 생각했던 가설을 검증할 수 있었다
1-2. 구글 독스
구글독스 내에서도 다양한 도구들이 존재하고 또 프로젝트 진행 내내 사용하였었지만 사용자 조사 단계에서 특히 많이 사용하게 되었었던 것 같다.
그중 구글 설문지는, 사용자에 대한 설문조사뿐이 아니라, 자신이 활용하고 있는 사이트에 임베드 시켜서 신청폼 등으로 활용할 수 도 있다. 즉 구글 설문지를 언바운스에 링크를 걸거나 임베드 할 경우 바로 원하는 양식의 신청 페이지를 뚝딱 만들어 낼 수 있다.
구글 독스가 다른 로컬 오피스 도구들보다 좋은 점은 바로 팀원들과 동시에 문서를 편집할 수 클라우드 기반이라는 것과 앞으로 소개할 다른 도구들과 플러그 인 형태로 공유되어 사용할 수 있다는 점이다.
2. 협업 도구
2-1. 트렐로 https://trello.com
에버노트, 슬랙 등 많은 협업도구들을 직접 사용해보았지만, 순수한 협업도구 자체로써는 트렐로가 가장 유용하였었다.
우선 에버노트는 스크랩 용으로는 뛰어나나 협업도구로써는 부족함이 있었고, 슬랙은 팀원들의 채팅과 그 안에서 오가는 파일들의 아카이브로써는 좋았으나 태스크 관리가 어려운 단점이 있었다.
우리는 태스크 관리, 문서 및 자료관리, 팀내 커뮤니케이션 등 모든 프로젝트 진행 과정들을 트렐로 하나로 모아 해결했다
트렐로로 각자의 일정과 TO DO를 확인하였고, 자료를 모아 두고 찾아 사용하며, 댓글 등으로 의사소통을 하였다 우리에게 트렐로는 팀을 이어주는 핵심 도구가 되었다
2-2. 구글 드라이브
위에서 언급한 트렐로를 더욱 유용하게 사용하기 위해서는 구글 드라이브나 드롭박스 등의 서비스를 함께 이용할 수 있다
구글 드라이브 등에 자료를 보관한 후 트렐로에 링크시키는 것인데 이렇게 하면 많은 자료들을 정리하여 한눈에 파악할 수 있다. 트렐로 자체를 DB로 사용하기엔 부족하기에 구글 드라이브 등의 도움은 반드시 필요하다. 구글 드라이브의 경우 15GB까지 무료이며, 한 달에 2달러 정도만 지불하면 100GB까지 이용이 가능하다
3. UI 개발 도구
3-1. 스케치 https://bohemiancoding.com/sketch
처음 썼었을 때, 나에게 신세계를 발견하게 해 준 도구인 스케치는 다른 어도비 사의 디자인 도구들 보다 디지털 디자인에 있어서 월등히 우수하였다. 사용하며 특히 좋았던 점은 마치 CSS 클래스를 만들어 두는 것처럼 디자인을 클래스 시킬 수 있다는 점이다. 만약 디자인 작업 도중에 수정이 필요할 경우에 기존 어도비 사의 도구처럼 스크린마다 일일이 직접 수정할 필요 없이, 한 스크린에서만 수정하면 다른 모든 스크린에서도 자동으로 함께 수정이 이루어지게 된다. 이미 많은 해외 디자이너들은 스케치로 갈아탔다고 하며 점점 스케치 오픈소스도 많이 올라오고 있다 오픈소스 자료는 (http://www.sketchappsources.com)에서 받을 수 있다
3-2. 오븐 https://ovenapp.io
프로토타입 목업툴인 오븐은 웹 기반 도구로써 간단하게 UI를 만드는데 사용할 수 있다. 먼저 소개했던 스케치에 비해 부족한 기능과 비주얼로 어설픈 결과물 밖에 만들어 내지 못하지만 그럼에도 사용할 수밖에 없는 강점은 바로 빠른 UI 기획과 테스트를 통한 검증이다. 우리가 사용했던 방법은 오븐을 이용하여 먼저 UI 구조와 레이아웃을 제작하고 각 스크린에 링크를 걸어두었다 그리고 오븐의 테스트 기능을 이용해서 직접 사용자들을 대상으로 사용성 평가를 진행하였었다. 즉, 기획한 UI를 검증하기 위해 드는 시간과 비용을 상당히 아낄 수 있는데 이로써 빠른 프로젝트 개선 또는 피봇이 가능하다
4. 사용성 평가 도구
4-1. 퀵타임 플레이어
맥북의 기본 탑재 앱인 퀵타임 플레이어는, 맥북 사용자의 화면과 목소리를 녹화하는 기능을 가지고 있다. 즉 사용자의 행동을 관찰, 기록할 수 있는 것인데 사용성 평가 후 팀원과의 결과 공유에 유용하게 사용하였다. 녹화를 이용한 테스트 방법에 대해서는 ‘사용자를 생각하게 하지 마’라는 책에 간편한 사용성 평가를 진행하는 방법에 대해 소개되어있으니 참조하면 좋다
4-2. 마블앱 https://marvelapp.com
직접 경험해본 시나리오 검증을 위한 프로토타이핑 서비스 중 가장 쉽고 심플한 것은 바로 마블앱이었다. 제작된 이미지에 링크를 거는 방식으로 프로로타입이 만들어지는데, 스크린 이미지만 준비되어있다면 30분 정도만에 뚝딱 만들어 낼 수 있다. 이처럼 너무 간단해서 인터렉션 확인엔 제약이 있지만 다른 프로토타이핑 도구보다 빠르게 사용성 평가를 진행할 수 있다는 것에 스타트업에게는 큰 매력인 것 같다 또, 먼저 위에서 언급하였던 ‘스케치’를 사용하는 디자이너라면 플러그인 설치로 보다 편리하게 업로드하여 사용할 수 있다
5. 기타 도구
5-1. 워크 플로위 https://workflowy.com
텍스트를 트리 형식으로 정리해서 기록할 수 있는 워크플로위는, 업무뿐 아니라 여러 다양한 분야에서 응용사용이 가능하다. 우리 팀의 개발자들은 To do 관리에 많이 사용하였던 것 같고, 나는 아이디어 및 작업내용 정리에 많이 사용하였었다. 단축키만 익숙해지면 모든 작업에서 시너지를 낼 수 있는 막강한 도구로써 모바일 앱도 존재한다
5-2. 핀터레스트 https://www.pinterest.com
이미지 공유 SNS 핀터레스트는 영감 얻은 이미지들을 모아 놓는데 사용하였다. 디자인 영감을 얻을 수 있는 참조 사이트가 많은데, 그중 참조할 수 있을만한 이미지가 있다면 핀터레스트에 모아 놓은 뒤 나중에 작업하며 필요할 때 확인하는 것이다. 사실 정적인 비주얼뿐 아니라 UI 흐름까지도 확인해야 하는 일이 많은데 이미지의 한계상 그러지 못해 아쉬운 점도 많다. 때문에 영감이 필요할 때 쓱 둘러보기 위한 용도로 사용한다
지금까지 서비스 기획~개발 단계에서 사용하였던 5가지 분류의 총 10개의 도구들을 소개하였는데,
다음에 우리 팀이 만든 서비스 운영이 안착된다면, 운영에 사용한 도구도 소개해보고 싶다
#텐시티 #UI #UI디자인 #UI기획 #스킬스택 #스택소개 #꿀팁 #인사이트
가입하기
