흰제비의 개발블로그
와이어프레임 및 프로토타입 툴 (Wireframe & Prototype Tool) 본문
이번 과제의 주제
1. 여러가지 툴을 검색하여 직접 사용해보고, 장단점을 평가하여, 가장 적합하다고 생각되는 것을 선택하시오.
2. 본인의 과제, 작품의 내용을 선택한 툴을 사용해서 디자인한 예를 보이시오.
용어정리
- 와이어프레임(Wireframe) : UI 중심의 화면 레이아웃
- 목업(Mockup) : 실물과 흡사한 정적인 형태의 모형
- 프로토타입(Prototype) : 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형
- 스토리보드(Stroyboard) : 정책, 프로세스, 와이어프레임, 디스크립션 등이 모두 포함된 설계 문서
"화면 설계 툴"
카카오오븐
전) 다음카카오에서 제작한 온라인 프로토타이핑 툴입니다.
직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고,
온라인으로 제작한 화면을 QR코드 및 단축 URL을 통해 공유할 수 있습니다.
발사믹 목업과 마찬가지로 디테일한 설계보다는 서비스 컨셉을 간단히 공유하기에 적합합니다.
디자인 시안 이미지를 업로드해서 모바일 등의 디바이스에서 테스트해 볼 수도 있습니다.
- 실행환경 : 웹 브라우저
- 가격 : 무료
- 추천 : 아이디어를 단시간에 빠르게 스케치하고 싶은 사용자에게 적합함
- 학습 난이도 : 쉬움
"프로토타이핑 툴"
네이버 프로토나우 (지원종료)
네이버에서 만든 프로토타이핑 툴. Axure를 그대로 카피해서 약간의 기능을 커스터마이징한 툴.
Axure와 비교하면 전체적인 완성도가 떨어지지만 무료로 사용할 수 있다는 점이 가장 큰 메리트입니다.
- 실행환경 : 윈도우
- 가격: 무료
- 추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함
- 학습 난이도 : 중간 ~ 어려움
"UI 디자인 툴"
어도비 익스피리언스 디자인 CC (Adobe XD)
어도비에서 새롭게 출시한 UI 디자인 & 프로토타이핑 툴입니다.
스케치와 마찬가지로 UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스가 장점입니다.
아트보드 기반의 화면구성은 스케치와 유사하며 포토샵, 일러스트와의 연동을 완벽하게 지원합니다.
또한, 스케치에서 작업한 파일도 불러와서 사용할 수 있습니다.
스케치와 비교한 장점으로는 프로토타입 기능을 탑재하고 있어 UI 디자인 후 인터랙션을 빠르게 적용하고
시연해 볼 수 있습니다. 하지만, 스케치 대비 기능이 제약적이고 공유 레퍼런스 및 연동 플러그인이 적어
아직은 스케치를 대체하기 어려울 것으로 보입니다.
- 실행환경 : 맥
- 가격 : 무료 (어도비 계정 필요)
- 추천 : UI 디자인에 최적화된 디자인 프로그램을 사용해보고 싶은 사용자에게 적합함
- 학습 난이도 : 중간
"디자인 산출물로 작업하는 프로토타이핑 툴"
픽사에이트 (Pixate)
픽사에이트는 2015년 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스북, 구글 등을 포함해
다양한 회사에서 사용하고 있습니다. 이 툴은 모바일 앱 프로토타이핑에 최적화되어 있으며
인비전, 마블, 플린토보다 디테일한 인터랙션을 설정할 수 있습니다.
사용방법은 디자인 파일을 업로드한 다음 인터랙션을 적용하는 방식입니다.
사용방법이 조금 어려운 편인데 가이드를 보면 쉽게 따라 할 수 있다고 합니다.
- 실행환경 : 윈도우, 맥
- 가격 : 무료
- 추천 : 좋은 툴이면서 가격도 무료. 프로토타이핑에 관심 있는 디자이너에게 추천.
- 학습 난이도 : 중간
출처 : https://brunch.co.kr/@cysstory/103
각 프로토타이핑 툴 별 특징 및 장단점
프로토 나우
사용자 지원이 충실하며, 다양한 컴포넌트를 제공하여 빠르게 구현이 가능하다.
장점 : 한글이며, 사용자 지원에 충실하다. UI/UX는 Office Ribbon UI를 다뤄본 사람이라면 쉽게 학습 가능함
단점 : 간헐적인 프로그램 크래시로 인해 불안정함이 있으나 업데이트를 통해 잡아가고 있다.
오븐
무료 프로토타이핑 툴이며, 학습이 쉽고 웹 베이스를 갖고 있다.
장점 : 제공되는 컴포넌트가 다양함
단점 : 인터렉션이 매우 제한적임, 프로젝트 공유시 프로젝트 형상관리가 되지 않음
Axure
다양하고 복잡한 인터렉션을 지원하는 프로토타이핑 툴이며,
다양한 디지털 플랫폼 화면을 구현하는데 유연하게 사용할 수 있음.
장점 : 개별 오브젝트에 대한 인터렉션 부여가 가능함, 복잡한 인터렉션을 표현하는데 쉬움
단점 : 처음 사용자가 사용하기엔 다소 어려운 구성, 모든 브라우저에서 지원되지 않음,
다양한 디바이스 템플릿이나 기능들을 제공하지 않음
Proto io
많은 기능을 제공하는 프로토타이핑 툴, 개별 오브젝트에 대한 인터렉션 부여가 가능함
장점 : 개별 오브젝트에 인터렉션을 줄 수 있어 다양한 인터렉션이 가능함
단점 : 복잡한 인터페이스와 기능 때문에 학습의 시간이 필요함
Balsamiq Mock Up
와이어프레이밍/스케치를 동시에 제공하며, 다양한 플랫폼에서 실행이 가능하다.
장점 : 사용하기 쉬우며, 작업 속도가 빠르다.
단점 : 간단한 작업 이외의 방대한 양의 프로젝트에서는 사용하기 힘들다.
Power Mock Up
파워포인트의 Add-On이며, 문서 작업시 편리하게 사용할 수 있다.
장점 : 파워포인트를 다룰 줄 알면 사용이 가능하다.
단점 : HTML의 인터렉션이 없다.
출처 : https://hyunyrn.tistory.com/237
카카오오븐 장점
1. 무료
보통 왠만한 목업이나 프로토타이핑 툴은 대부분 유료이다.
하지만 '카카오 오븐'은 현재 무료로, 누구든 회원가입만 하면 제약없이 사용할 수 있다.
2. 유료서비스 못지 않은 기능
무료지만 기능은 유료서비스 못지 않다.
기본으로 제공하는 컴포넌트가 100여개이며, 벡터아이콘도 1,200여개를 제공하고 있다.
그리고 모바일과 테블릿, PC스크린 사이즈까지 다양한 사이즈를 선택할 수 있으며,
설계한 UI를 웹이나 모바일 화면으로 테스트해볼 수 있다. 물론 세로로 긴 형태의 스크롤 화면도
세로화면을 눌러서 기획할 수 있으며, 페이지 링크 정도의 간단한 인터렉션과 프로젝트를 이메일 등으로
공유할 수 있어서 편리하다. 이 때 공유 받은 사람은 별도의 회원가입 없이도 기획안을 확인해볼 수 있다.
이 외에도 문서 작성, 도형 그리기, 줄 맞춤 등이 매우 편리하여 생각을 보다 빠르게 표현할 수 있다.
3. 웹 베이스
클라이언트를 다운로드 받아 설치할 필요 없이, 웹사이트만 열면 작업이 가능한 웹베이스 툴이다.
보통 웹베이스로 작동을 하면 작업시간이 길어질수록 동작이 불안하거나 굼뜨는 경향이 있는데,
웹베이스 답지 않게 빠릿하여 작업하는데 문제가 없다.
4. 학습비용
설명서를 별도로 확인해보지 않고서도 화면만 보면 대강 사용해볼 수 있을 정도로 직관적이고,
실제로 한 20~30분 정도 이것저것 눌러보고 하다보면 왠만한 기능은 다 사용할 수 있을 정도로 사용이 쉽다.
사실, 다양한 툴들을 사용해보고 싶지만 기능이 많고 무거운 툴들은 학습비용이 만만치 않아 망설여지는 경우가 많은데,
적어도 이 툴은 그런 걱정은 하지 않아도 된다.
카카오오븐 단점
1. 영속석/안정성
무료라는 것은 장점인 동시에, 장기적으로 볼 때는 단점으로 작용된 가능성도 있다.
2. 프로토타이핑 툴이라기엔 부족한 기능
사실 '카카오 오븐'은 프로토타이핑 툴이라고 소개가 되어 있기는 하지만,
실제로는 목업 툴 정도로 생각하는 것이 맞을 듯 하다.
즉, 프로토타이핑 툴의 핵심인 인터렉션 기능이 많이 제한적이어서,
UX적인 측면을 표현하는데 있어서는 한계가 뚜렷하다.
또 PC 스크린 사이즈를 최대 1,200px 까지 밖에 지원하지 않고, 1,920px 창에서 미리보기 했을 때,
레이아웃의 좌측 정렬이라던지 하는 등의 표현도 할 수 없어서 답답한 면도 있다.
이외에 협업 기능을 지원하지 않아 대규모 기업 차원에서 사용하기엔 부족함이 있다.
3. 표현력의 한계
여러 UI 요소 중에서 매우 중요한 부분의 경우는 세밀한 표현이 필요할 때가 있다.
하지만 이경우 파워포인트만큼 문서 편집 기능이 강력하지는 않아 아쉬울 때가 많다.