출처: https://brunch.co.kr/@cysstory/103
IT 현장에서는 화면 UI를 설계할 때 대부분 파워포인트를 사용합니다.
저 또한 파워포인트로 수많은 스토리보드를 제작했는데요. 파워포인트로 화면을 설계하면서 다음과 같은 불편함을 느꼈습니다.
파워포인트 설계의 불편한 점
1. 제한된 공간에 페이지 경로, 화면 UI, 디스크립션 등 다양한 내용을 담아야 한다. 그러다 보니 화면이 점점 복잡해진다.
개인적으로는 다음 페이지로 넘기지 않기 위해 최대한 욱여넣었고 폰트 사이즈는 점점 작아졌다.
2. 수정사항이 발생하면 모든 화면을 일일이 수정해야 한다. 페이지가 적으면 크게 문제 되지 않지만,
페이지가 많아지면 메뉴명 하나만 수정해도 모든 페이지를 건드려야 하는 노가다 작업이 빈번히 발생한다.
3. 스토리보드를 받아보는 대표, 클라이언트, 디자이너, 개발자 등이 문서만으로 기획자의 의도를 100% 이해하지 못한다.
그러다 보니 결과물이 눈에 보여지는 디자인 단계와 실제 구현되는 개발 단계에서 미처 예측하지 못했던 이슈들이 발생한다.
위와 같은 이유로 파워포인트를 대체할 수 있는 툴을 찾아보게 되었고, Axure를 알게 되어 실무에서 약 6년 이상 사용하고
있습니다. 이제 5월부터 정식으로 Axure 강의를 진행할 예정인데, 강의 진행에 앞서 시장에 나와있는 툴에 대한 이해가
필요할 것 같아 현재 출시된 대부분의 툴을 이용해 보고, 직접 사용해본 경험을 바탕으로 각 툴에 대한 분류 및 간략 리뷰를
남겨봅니다.
툴을 소개하기에 앞서, 조금은 헷갈리는 용어를 먼저 정의해보겠습니다.
- 와이어프레임(Wireframe) : UI 중심의 화면 레이아웃
- 목업(Mockup) : 실물과 흡사한 정적인 형태의 모형
- 프로토타입(Prototype) : 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형
- 스토리보드(Storyboard) : 정책, 프로세스, 와이어프레임, 디스크립션 등이 모두 포함된 설계 문서
위에서부터 와이어프레임, 목업, 프로토타입 순
위에서 와이어프레임, 목업, 프로토타입을 분리해서 정의했지만, 서로 간에 교집합으로 겹치는 부분이 상당히 많습니다.
용어 정리가 되었으니 툴을 성격에 따라 분류해보겠습니다.
프로토타이핑 툴은 작업 순서에 따라 2가지 그룹으로 구분할 수 있습니다.
첫째. 기획 단계에서 사용하는 툴로 화면 UI 설계 및 인터랙션 적용에 최적화된 툴.
둘째. 디자인 작업 후 사용하는 툴로 디자인된 이미지의 인터랙션 적용에 최적화된툴.
기획 단계의 툴부터, 디자인 이후의 툴까지
각각 어떤 특장점이 있는지 지금부터 하나씩 살펴보겠습니다.
화면 설계 툴
파워 목업
파워 목업은 파워포인트에 추가 메뉴(add-on)를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴입니다. 파워 목업을 설치하면 파워포인트 상단에 PowerMockup 메뉴가 추가되고, 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있습니다. 파워포인트에서도 직접 그릴 수도 있지만 미리 만들어놓은 샘플을 바로 사용할 수 있어 화면 설계 시간을 단축할 수 있습니다.
- 실행환경 : 윈도우
- 가격 : 개인 $59.99 (한화 약 7만 원), 파워 목업 리뷰를 포스팅하면 무료 라이선스 취득 가능
- 추천 : 파워포인트 화면 설계 시간을 단축시키고 싶은 사용자에게 적합함
- 공식 사이트 : http://www.powermockup.com
- 관련 동영상 : https://youtu.be/OrSxE0XnWLw
발사믹 목업
- 실행환경 : 윈도우, 맥, 웹 브라우저
- 가격 : 개인 $89 (한화 약 10만 4천 원)
- 추천 : 아이디어를 단시간에 빠르게 스케치하고 싶은 사용자에게 적합함
- 학습 난이도 : 쉬움
- 공식 사이트 :https://balsamiq.com/
- 관련 동영상 :https://youtu.be/MxWTGBQE7zE
카카오 오븐
- 실행환경 : 웹 브라우저
- 가격 : 무료
- 추천 : 아이디어를 단시간에 빠르게 스케치하고 싶은 사용자에게 적합함
- 학습 난이도 : 쉬움
- 공식 사이트 :https://ovenapp.io/
프로토타이핑 툴
UX핀 (UXPin)
- 실행환경 : 웹 브라우저
- 가격 : 월정액, 프로 버전 기준 매월 $29 (한화 약 3만 4천 원)
- 추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함
- 학습 난이도 : 어려움
- 공식 사이트 :https://uxpin.com/
- 관련 동영상 :https://youtu.be/DdTgeFrCxYo
액슈어 (AXURE)
- 실행환경 : 윈도우, 맥
- 가격 : 스탠더드 버전 $289 (한화 약 33만 7천 원), 학생은 무료 라이선스 발급, 월정액 요금제 출시 예정
- 추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함
- 학습 난이도 : 중간 ~ 어려움
- 공식 사이트 :http://www.axure.com/
- 관련 샘플 :http://bit.ly/1XyRB33
네이버 프로토나우
- 실행환경 : 윈도우
- 가격 : 무료
- 추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함
- 학습 난이도 : 중간 ~ 어려움
- 공식 사이트 :https://protonow.navercorp.com/
UI 디자인 툴
스케치 (Sketch)
직접 사용해 본 결과 파워포인트/키노트를 다뤘던 사람이라면 쉽게 적응할 수 있습니다. 따라서, 저와 같은 기획자도 디자인을 할 수 있는 기회가 생겼습니다. 창의적 감각을 발휘해야 하는 아트 디자인은 당연히 어렵겠지만, 다양한 목업&템플릿을 활용한 레이아웃 중심의 디자인이라면 화면 설계를 오래했던 기획자가 도전해볼 만합니다. 스케치 프로그램과 연동되는 제플린 플러그인(https://zeplin.io)을 설치하면 디자인 가이드까지 자동으로 생성됩니다. 개인적으로는 Axure 외에 꼭 배우고 싶은 툴 중 하나입니다.
- 실행환경 : 맥
- 가격 : $99 (한화 약 11만 5천 원)
- 추천 : UI 디자인에 최적화된 디자인 프로그램을 사용해보고 싶은 사용자에게 적합함
- 학습 난이도 : 중간
- 공식 사이트 :http://www.sketchapp.com/
- 관련 동영상 :https://youtu.be/YdIeiCyKwpI
- 관련 포스팅 :https://brunch.co.kr/@jihere1001
어도비 익스피리언스 디자인 CC (Adobe XD)
- 실행환경 : 맥
- 가격 : 무료 (어도비 계정 필요)
- 추천 : UI 디자인에 최적화된 디자인 프로그램을 사용해보고 싶은 사용자에게 적합함
- 학습 난이도 : 중간
- 공식 사이트 :https://www.adobe.com/kr/products/experience-design.html
- 관련 동영상 :http://adobe.ly/1VLFAb5
디자인 산출물로 작업하는 프로토타이핑 툴
인비전 (Invision)
2015년 4,500만 달러(한화 약 514억 원)의 투자를 유치했을 정도로 핫한 서비스입니다.
툴 사용방법은 간단합니다. 포토샵, 스케치 등으로 디자이너가 작업한 작업물을 사이트에 업로드한 다음.
UI를 연결해 간단한 인터랙션을 적용할 수 있습니다. 인비전의 최고 강점은 협업 기능으로,
프로젝트 참여자 간에 다양한 형태로 피드백을 주고받을 수 있습니다.
- 실행환경 : 웹 브라우저
- 가격 : 월정액, 프로페셔널 버전 $22 (한화 약 2만 5천 원)
- 추천 : 슬랙, 트렐로와 같은 협업 모델을 잘 사용하는 사용자에게 추천
- 학습 난이도 : 쉬움
- 공식 사이트 :https://www.invisionapp.com
- 관련 동영상 :http://bit.ly/22K9It8
- 유사 툴 : 마벨(Marvel), 플린토(Flinto). 플린토의 경우 카카오에서 사용한다고 들었습니다.
픽사에이트 (Pixate)
사용하고 있습니다.
이 툴은 모바일 앱 프로토타이핑에 최적화되어 있으며 위에서 소개한 인비전, 마블, 플린토보다 디테일한 인터랙션을
설정할 수 있습니다. 사용방법은 위 툴들과 마찬가지로 디자인 파일을 업로드한 다음 인터랙션을 적용하는 방식입니다.
사용방법이 조금 어려운 편인데 가이드를 보면 쉽게 따라 할 수 있다고 합니다.
- 실행환경 : 윈도우, 맥
- 가격 : 무료
- 추천 : 좋은 툴이면서 가격도 무료. 프로토타이핑에 관심 있는 디자이너에게 추천.
- 학습 난이도 : 중간
- 공식 사이트 :http://www.pixate.com/
- 관련 동영상 :http://www.pixate.com/education/video-tutorials/
프레이머 (Framer)
다른 프로토타이핑 툴은 html 기반으로 출력되어 인터랙션에 어색한 부분이 발생하기도 하는데, 프레이머는 코드 기반으로
작동되어 실제 작업물과 흡사하게 작동합니다. 하지만 작업 난이도가 있기에 다른 툴들에 비해 어려운 편입니다.
- 실행환경 : 맥
- 가격 : $129 (한화 약 15만 2천 원)
- 추천 : 코드 작업이 익숙하고, 하이 퀄리티 프로토타이핑에 관심 있는 사용자에게 추천
- 학습 난이도 : 어려움
- 공식 사이트 :http://framerjs.com/
- 관련 샘플 :http://framerjs.com/examples/
디자인 프로토타이핑 툴은 종류가 너무 많아서 성격이 다른 툴을 뽑아서 정리해봤습니다.
위에서 소개한 툴 외에도 Proto.io, Origami,ProtoPie 등 다양한 툴이 있으니 좀 더 자세히 보고 싶으신 분들은
아래 링크를 참조하시기 바랍니다.
http://www.cooper.com/prototyping-tools
http://www.prototypingtools.co/
정리하면,
파워포인트와 포토샵이 전부였던 IT 작업환경이 빠르게 변화하고 있습니다.
새로운 기술을 학습하는 것이 다소 부담될 수 있지만 개인 경쟁력을 갖추기 위해서는 시대의 흐름을 읽고
그때 그때 필요한 기술을 익히는 것이 중요하지 않을까 생각해봅니다.
기획자라면 Axure 툴은 꼭 한 번 배워보시길 강력 추천합니다. ^^
10년차 웹 기획자 조영수입니다.
웹 기획자를 위한 가이드북 '처음부터 다시 배우는 웹 기획'의 공동저자이며,
웹 기획자와 UX디자이너를 대상으로 'AXURE 프로토타입 설계 강좌'를 진행하고 있습니다.
'IT_Programming > Dev Tools' 카테고리의 다른 글
| [펌] Git을 이용한 협업 워크플로우 배우기 (0) | 2016.06.22 |
|---|---|
| [IntelliJ/Android_Studio] Android Templates 사용하기 (0) | 2016.03.31 |
| [펌] ngrok으로 로컬 네트워크의 터널 열기 (0) | 2016.03.08 |
| [GIT] git 실수로 한 commit, push 강제 취소 시키기 (0) | 2015.12.23 |
| 안드로이드 스튜디오 cannot resolve symbol r :: 강력한 해결법 (0) | 2015.11.27 |