IT 기획 연구소

한 번쯤 들어봤던 화면설계 & 프로토타이핑 툴 총정리

category IT 기획/서비스 기획 2016. 3. 30. 00:53 by 기획자 데이먼 기획자 데이먼

📌 이 글은 벌써 4년도 넘은 글인데요.

2020년 9월 1일 기준으로 최신 내용을 업데이트 했습니다. 아래 링크를 클릭해주세요!

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
관련 동영상 : http://youtu.be/OrSxE0XnWLw

발사믹 목업

스케치한 느낌으로 빠르고 심플하게 서비스 컨셉을 전달할 수 있는 목업 툴입니다. 디테일한 화면 구성은 어렵지만 간단히 스케치할 때는 파워포인트보다 편리하게 작업할 수 있습니다. 영문은 그럴싸하게 보이지만 한글은 살짝 아쉽습니다.

실행환경 : 윈도우, 맥, 웹 브라우저
가격 : 개인 $89 (한화 약 10만 4천 원)
추천 : 아이디어를 단시간에 빠르게 스케치하고 싶은 사용자에게 적합함
학습 난이도 : 쉬움
공식 사이트 : http://balsamiq.com
관련 동영상 : http://youtu.be/MxWTGBQE7zE

카카오 오븐

전) 다음카카오에서 제작한 온라인 프로토타이핑 툴입니다. 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR코드 및 단축 URL을 통해 공유할 수 있습니다. 발사믹 목업과 마찬가지로 디테일한 설계보다는 서비스 컨셉을 간단히 공유하기에 적합합니다. 디자인 시안 이미지를 업로드해서 모바일 등의 디바이스에서 테스트해 볼 수도 있습니다.

실행환경 : 웹 브라우저
가격 : 무료
추천 : 아이디어를 단시간에 빠르게 스케치하고 싶은 사용자에게 적합함
학습 난이도 : 쉬움
공식 사이트 : http://ovenapp.io

- 프로토타이핑 툴 -

UX핀 (UXPin)

웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 툴입니다. 구글 글라스를 포함한 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업을 지원하는 것으로 유명합니다. 실제 프로젝트에 UXPin을 도입했던 지인이 몇 가지 단점을 지적해 주셨는데요. 웹 브라우저 기반이다 보니 외국인이 많이 활동하는 저녁 시간 때에 툴의 속도가 느려지고, 윈도우에서 한글 타이핑 지원이 원활하지 않다고 합니다. 맥에서는 잘 된다고 하네요.

실행환경 : 웹 브라우저
가격 : 월정액, 프로 버전 기준 매월 $29 (한화 약 3만 4천 원)
추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함
학습 난이도 : 어려움
공식 사이트 : http://uxpin.com
관련 동영상 : http://youtu.be/DdTgeFrCxYo

액슈어 (AXURE)

위에 소개한 여러 툴들이 화면 UI 설계에 포커스 되어 있는 반면에, Axure는 스토리보드에 포함되는 정책, 플로우 차트, 디스크립션까지 모두 작성할 수 있도록 지원하고 있습니다. 팀 프로젝트로 협업도 가능하기에 국내 기획 환경에 가장 적합한 툴이라고 생각됩니다. 출력물의 경우 옵션을 조금만 설정하면 파워포인트만큼은 아니지만 보기 좋게 구성할 수 있습니다. 단점은 다른 툴들에 비해 가격이 비쌉니다.

실행환경 : 윈도우, 맥
가격 : 스탠더드 버전 $289 (한화 약 33만 7천 원), 학생은 무료 라이선스 발급, 월정액 요금제 출시 예정
추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함
학습 난이도 : 중간 ~ 어려움
공식 사이트 : http://www.axure.com
관련 샘플 : http://bit.ly/1XyRB33

네이버 프로토나우

네이버에서 만든 프로토타이핑 툴. 이런 말 하기는 조금 그렇지만 Axure를 그대로 카피해서 약간의 기능을 커스터마이징한 툴. Axure와 비교하면 전체적인 완성도가 떨어지지만 무료로 사용할 수 있다는 점이 가장 큰 메리트입니다.

실행환경 : 윈도우
가격 : 무료
추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함
학습 난이도 : 중간 ~ 어려움
공식 사이트 : http://protonow.navercorp.com

- UI 디자인 툴 -

스케치 (Sketch)

디자인 툴은 꽤 오랜 시간 동안 포토샵이 독점해왔지만, 최근 네덜란드 '보헤미안 코딩'팀이 만든 UI 디자인 프로그램 스케치가 출시되면서 많은 UI 디자이너들이 이 툴을 사용하기 시작했습니다. 포토샵은 사진 편집에 최적화된 툴이기에 UI 디자인 외에도 광범위한 기능을 제공하고 있는데요. 스케치의 경우 UI 디자인에 꼭 필요한 기능만을 담고 있어 포토샵보다 좀 더 가볍고 편리하게 디자인할 수 있습니다.

직접 사용해 본 결과 파워포인트/키노트를 다뤘던 사람이라면 쉽게 적응할 수 있습니다. 따라서, 저와 같은 기획자도 디자인을 할 수 있는 기회가 생겼습니다. 창의적 감각을 발휘해야 하는 아트 디자인은 당연히 어렵겠지만, 다양한 목업&템플릿을 활용한 레이아웃 중심의 디자인이라면 화면 설계를 오래했던 기획자가 도전해볼 만합니다. 스케치 프로그램과 연동되는 제플린 플러그인(https://zeplin.io)을 설치하면 디자인 가이드까지 자동으로 생성됩니다. 개인적으로는 Axure 외에 꼭 배우고 싶은 툴 중 하나입니다.

실행환경 : 맥
가격 : $99 (한화 약 11만 5천 원)
추천 : UI 디자인에 최적화된 디자인 프로그램을 사용해보고 싶은 사용자에게 적합함
학습 난이도 : 중간
공식 사이트 : http://www.sketchapp.com
관련 동영상 : http://youtu.be/YdIeiCyKwpI
관련 포스팅 : http://brunch.co.kr/@jihere1001

어도비 익스피리언스 디자인 CC (Adobe XD)

어도비에서 새롭게 출시한 UI 디자인 & 프로토타이핑 툴입니다. 스케치와 마찬가지로 UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스가 장점입니다. 아트보드 기반의 화면구성은 스케치와 유사하며 포토샵, 일러스트와의 연동을 완벽하게 지원합니다. 또한, 스케치에서 작업한 파일도 불러와서 사용할 수 있습니다. 스케치와 비교한 장점으로는 프로토타입 기능을 탑재하고 있어 UI 디자인 후 인터랙션을 빠르게 적용하고 시연해볼 수 있습니다. 하지만, 스케치 대비 기능이 제약적이고 공유 레퍼런스 및 연동 플러그인이 적어 아직은 스케치를 대체하기 어려울 것으로 보입니다.

실행환경 : 맥
가격 : 무료 (어도비 계정 필요)
추천 : UI 디자인에 최적화된 디자인 프로그램을 사용해보고 싶은 사용자에게 적합함
학습 난이도 : 중간
공식 사이트 : https://www.adobe.com/kr/products/experience-design.html
관련 동영상 : http://adobe.ly/1VLFAb5

- 디자인 산출물로 작업하는 프로토타이핑 툴 -

인비전 (Invision)

인비전(InVision)은 우버, 트위터, 에어비앤비 등을 고객사로 두고 있는 프로토타이핑 툴로, 2015년 4,500만 달러(한화 약 514억 원)의 투자를 유치했을 정도로 핫한 서비스입니다.

툴 사용방법은 간단합니다. 포토샵, 스케치 등으로 디자이너가 작업한 작업물을 사이트에 업로드한 다음. UI를 연결해 간단한 인터랙션을 적용할 수 있습니다. 인비전의 최고 강점은 협업 기능으로, 프로젝트 참여자 간에 다양한 형태로 피드백을 주고받을 수 있습니다.

실행환경 : 웹 브라우저
가격 : 월정액, 프로페셔널 버전 $22 (한화 약 2만 5천 원)
추천 : 슬랙, 트렐로와 같은 협업 모델을 잘 사용하는 사용자에게 추천
학습 난이도 : 쉬움
공식 사이트 : http://www.invisionapp.com
관련 동영상 : http://bit.ly/22K9It8
유사 툴 : 마벨(Marvel), 플린토(Flinto). 플린토의 경우 카카오에서 사용한다고 들었습니다.

픽사에이트 (Pixate)

픽사에이트는 2015년 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스북, 구글 등을 포함해 다양한 회사에서 사용하고 있습니다.

이 툴은 모바일 앱 프로토타이핑에 최적화되어 있으며 위에서 소개한 인비전, 마블, 플린토보다 더욱 디테일한 인터랙션을 설정할 수 있습니다. 사용방법은 위 툴들과 마찬가지로 디자인 파일을 업로드한 다음 인터랙션을 적용하는 방식입니다. 사용방법이 조금 어려운 편인데 가이드를 보면 쉽게 따라 할 수 있다고 합니다.

실행환경 : 윈도우, 맥
가격 : 무료
추천 : 좋은 툴이면서 가격도 무료. 프로토타이핑에 관심 있는 디자이너에게 추천.
학습 난이도 : 중간
공식 사이트 : http://www.pixate.com
관련 동영상 : http://www.pixate.com/education/video-tutorials

프레이머 (Framer)

Coffee Script라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 툴입니다. 다른 프로토타이핑 툴은 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 툴은 꼭 한 번 배워보시길 강력 추천합니다. ^^

📌 이 글은 벌써 4년도 넘은 글인데요.

2020년 9월 1일 기준으로 최신 내용을 업데이트 했습니다. 아래 글도 함께 읽어주세요!

프로덕트 매니저의 툴, UI 디자이너의 툴

'IT 기획 > 서비스 기획' 카테고리의 다른 글

신규 Web & Mobile 서비스 구축 프로세스 (7)	2016.04.25
[Good UX] 벅스뮤직 해외 가수명 한글 표기 (3)	2016.04.16
한 번쯤 들어봤던 화면설계 & 프로토타이핑 툴 총정리 (38)	2016.03.30
백오피스(BackOffiice) 참고사이트 모음 (0)	2016.03.21
모바일 디바이스별 해상도 및 상세스펙 확인 방법 (1)	2016.03.21
기획자에게 꼭 필요한 산출물 모음 (웹만사 맥비님 자료 링크) (14)	2016.03.07

기획자 조영수

IT Product를 만드는 프로덕트 오너이자, 글/영상/서비스를 만드는 기획자입니다.

tag AXURE, Framer, INVISION, PIXATE, uxpin, 네이버프로토나우, 발사믹목업, 스케치, 인비전, 카카오오븐, 파워목업, 프로토타입툴, 픽사에이트

댓글 38 , 엮인글 0

댓글을 남겨주세요

이름_NICK^*

비밀번호^*

홈페이지

공개 비공개

이전 댓글 더보기
포스원 2016.04.01 12:05

아스펜이라는 툴도 있습니다. 국내 개발사......기능 많고 좋은 듯 합니다.^^
http://www.aspenux.com/docs/help/ux/intro_ux.html
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2016.04.02 10:20 신고
  
  소개 감사합니다.
  
  웹사이트에 올라온 시연 동영상과 샘플을 살펴봤는데 기능도 다양하고 신선하네요. 관리자 페이지 같은 복잡한 설계는 어렵겠지만 프리젠테이션 및 교육 콘텐츠 제작 용으로는 훌륭할 것 같습니다. ^^
  - 답글달기
  - 수정/삭제
2016.05.13 23:17

비밀댓글입니다
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2016.05.16 22:42 신고
  
  강좌소개 감사합니다.
  이전에 해외에서 제작한 강의자료도 구매했었는데,
  보내주신 강좌도 잘 참고해서 보겠습니다. ^^
  - 답글달기
  - 수정/삭제
에컬 2016.07.13 18:18

정말 목업프로그램으 찾다찾다가 포기하려는 차 발견했습니다~!
좋은 정보 감사합니다!
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2016.07.14 07:57 신고
  
  도움이 되셨다니 다행입니다 ^^
  - 답글달기
  - 수정/삭제
dj 2016.10.12 15:21

좋은 정보네요 ^^
개인적으로 발사믹과 프로토나우 파워목업 AxureRP-Pro를 써봤는데요
정적인 페이지는 파워목업이 화면에 직접 인터렉션을 넣고 그리기에는 AxureRP이 최고인것 같습니다.
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2016.11.02 08:49 신고
  
  DJ님 말씀대로 정적인 페이지는 파워목업, 동적인 페이지는 Axure RP가 최고의 툴이죠 ^^
  - 답글달기
  - 수정/삭제
하루 2016.11.01 20:13

오 정말 잘 정리해주셨네요. 몇년전에 발사믹 목업 한 번 써본게 다였는데, 굉장히 많군요~ 카카오랑 네이버까지.. 진짜 큰 도움이 될 거 같아요-
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2016.11.02 08:51 신고
  
  몇년전에 발사믹 목업을 사용해보셨다면, 다른 툴도 사용해보세요! 정말 많이 발전했습니다 ^^
  - 답글달기
  - 수정/삭제
bihole 2017.01.10 01:32

소개해 주신 툴과 조금 다른 컨셉이지만 .. 저는 최대한 작동하는 프로토타입을 가장 빠르게 만들기 위한
바이플러그라는 도구를 만들었습니다. 프로토타이핑에 관심이 많으시다면 사용해보시고 소감을 부탁드립니다 ^^;
https://youtu.be/xn1Oc5Z23Ks
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2017.01.12 21:19 신고
  
  오홋, 동영상으로 소개 영상을 봤는데 카카오 오븐, 발사믹 목업과 유사해보이네요. 건승하시길 응원하겠습니다 ^^
  - 답글달기
  - 수정/삭제
지니22 2017.03.08 22:39

protoshare 추천합니다. 기본월정액이나 구글드라이브에선 무료입니다.
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2017.03.17 17:12 신고
  
  넵, 한번 사용해보겠습니다 :)
  - 답글달기
  - 수정/삭제
DG 2017.08.25 09:34

와, 조영수님 정말 깔끔하고 간결한 자료 감사합니다!! 정말 큰 도움이 되었어요. 정말 감사합니다!!! 블로그 북마크해놓고 두고두고 참고하면서 봐야겠습니다. 정말 좋네요.
- 답글달기
- 수정/삭제
- 기획자 데이먼 기획자 데이먼 신고">2017.08.25 10:12 신고
  
  댓글 감사합니다. ^^
  - 답글달기
  - 수정/삭제
순 2018.03.17 09:28

PM 님 유익한 정보공유 감사 합니당 ㅋㅋㅋ
- 답글달기
- 수정/삭제
eschae 2018.03.19 09:37

안녕하세요 좋은 정보 감사합니다.

체험판에서 전기능을 다사용할순없나요?
- 답글달기
- 수정/삭제
Logos 2018.04.04 19:35

Thanks for sharing!
I'm working in company that provides mobile software development services
https://www.cleveroad.com/services
And this article was really useful for me
- 답글달기
- 수정/삭제
J에스티나 2018.04.26 13:58

매우 유용한 정보 입니다! 정리도 깔끔하네요! 감사합니다!
- 답글달기
- 수정/삭제
비상님 2018.06.17 23:11

정말 감사합니다
- 답글달기
- 수정/삭제
지나가던사람 2018.08.28 13:57

Pixate는 서비스 종료되었네요. 좋은 글을 너무 늦게 보게되어 안타깝습니다.
- 답글달기
- 수정/삭제
rr 2018.10.22 22:22

진짜 좋은 글이네요
- 답글달기
- 수정/삭제
dddd 2018.12.11 09:39

pixate는 굿바이를 외쳤네요.
- 답글달기
- 수정/삭제
고가요 2019.03.20 16:08

네이버프로토나우는 종료 되었네요 다운로드는 가능하네요 ^^
- 답글달기
- 수정/삭제
2019.08.29 14:24

비밀댓글입니다
- 답글달기
- 수정/삭제
Jakalvn@gmail.com 2020.08.24 11:31

좋은 포스팅 잘 보고 갑니다! 감사합니다!!
- 답글달기
- 수정/삭제
Marsi 2021.01.05 11:44

좋은 정보 감사합니다. 저도 기획자로서 큰 도움되었습니다.
- 답글달기
- 수정/삭제