프로토타입 툴에 대해 알아보자!
프로토타입에 대해 들어본적 있나요? IT 업계와 같은 제조 회사 같은 경우에 프로토타입은 대강 최종 제품 양산전에 만들어지는 시제품의 도안이나 시제품 자체를 뜻하며 매우 중요한 위치에 있다고 볼 수 있습니다.
아래에서 추천해드리는 프로토타입 툴들과 이드로우 맥스(EdrawMax) 프로그램으로 프로토타입을 만드는 방법까지 자세한 내용을 확인하실 수 있습니다!
이드로우 맥스
올인원 다이어그램 소프트웨어
- 강력한 호환성: Visio,MS office 등 파일 호환 가능
- 다양한 운영체제: (윈도우,맥,리눅스)
100% 안전 | Part 1: 프로토 타입이란?
프로토 타입(prototype)이란 적절한 한국어 표현으로 ‘시제품(試製品)’으로 무언가 제품을 만드는 과정에서 시험용으로 미리 만들어보는 물건을 의미합니다.
흔히 생각하는 것과 다르게 양산이란 것은 설계도에 따라 바로 기계에서 뽑는 그런 단순한 작업이 아닙니다. 설계와 실물 양산 간에는 차이가 존재할 수 있지요. 예를 들어 제작 공정에서 문제가 발생하거나 효율적인 생산을 위해 적합하게 개량을 하기도 하고 실제 사용을 하며 문제가 있을 수 있으니 거쳐야 하는 절차가 있어야 하겠죠. 이를 위해서는 반드시 실물을 만들어서 뭐가 문제인지 알아보아야 하고 이 과정에서 만들게 되는 것이 프로토 타입이라고 생각하면 됩니다.
그 어떤 양산 제품이건 프로토 타입이 중요하기 때문에 각 업계에서는 프로토 타입을 제작하는 과정이 필요로 하고 프로토 타입을 제대로 제작하는 것이 실제 양산에도 큰 도움을 줄 수 있겠죠. 프로토 타입 제작에 도움을 주는 툴에 대해 이해하는 것도 중요합니다.
Part 2: 무료 프로토타입 툴 8개 소개
처음 소개해드릴 프로그램은 원더쉐어(Wondershare)사의 이드로우 맥스(EdrawMax)입니다. 이드로우 맥스는 수 천개 템플릿과 2만6천개 기호를 지원하는 올인원 다이어그램 도구입니다. 이드로우 맥스로 순서도, 평면도, 전기회로도, 조직도, 인포그래픽 등 280여 종의 다이어그램을 손쉽게 만들어볼 수 있습니다. 이드로우 맥스는 공식 홈페이지에서 다운로드할 수 있고 Windows, macOS, Linux와 같은 상용화된 거의 모든 PC 운영체제에서 다운로드 받아 사용할 수 있습니다.
이드로우 맥스 프로그램은 개인적으로 가장 추천하는 프로토타입 제작 프로그램입니다. 본 글 마무리에 이드로우 맥스로 프로토타입 만드는 방법에 대해 더 자세히 설명드릴테니 마우스 버튼 고정!
장점
- Windows, macOS, Linux와 같은 다양한 PC 운영체제 지원
- 직관적인 인터페이스와 쉽고 편리한 사용법
- 수 천개 템플릿과 2만6천개 기호를 제공하여 수많은 다이어그램 제작 가능
Pixso는 협업에 특화된 디자인 툴입니다. 기본적으로 프로토 타입 제작에 필요한 기능을 제공합니다. 웹 브라우저 기반이기 때문에 모든 운영체제에서 사용할 수 있습니다.
Pixso의 UI는 대화형 애니메이션을 사용하기 때문에 사용자 경험에 있어서 좋고 링크를 통한 사용자 간 협업이 가능해 신속한 프로토타입 시연이 가능합니다. 디자인 제작 자체 기능은 무료로 거의 대부분 사용할 수 있지만 더 많은 협업을 위한 프로젝트를 생성하려면 유료 결제가 필요합니다.
장점
- 웹 브라우저 기반의 소프트웨어로 모든 운영체제에서 사용 가능
- 대화형 애니메이션을 사용한 유저 친화적 UI
단점
- 더 많은 협업 프로젝트 진행 시 유료 결제 필요
Figma(피그마)는 Pixso와 같이 협업을 위해 만들어진 툴로서 웹 기반 프로토타입 툴로 활용될 수 있습니다. Pixso와 기능적으로 매우 유사하며 역시나 대화형 애니메이션을 제공해 코딩 지식 없는 입문자들도 손쉽게 프로토타입 디자인을 제작할 수 있습니다.
피그마도 무료와 유료버전이 존재하며 유료 버전으로는 모든 기능을 사용할 수 있지만 무료로 사용하기에는 제약 사항이 다수 존재합니다.
장점
- 웹 브라우저 기반의 소프트웨어로 모든 운영체제에서 사용 가능
- 대화형 애니메이션을 사용한 유저 친화적 UI
단점
- 무료로 사용하기에는 제약 사항이 다수 존재
- 한국어 미지원
다음 소개해드릴 툴은 Adobe XD입니다. Adobe는 포토샵과 Acrobat 등으로 유명한 소프트웨서 개발 회사인데요 Adobe XD라는 디자인 툴도 제공해 디자이너들에게 프로토타입 제작에 큰 도움을 줍니다. 디지안 툴로 만들어진 정적 디자인을 완료한 후 이 프로토타입 생성 도구를 통해 실시간 공유 기능을 제공합니다.
위에 소개해 드린 Pixso와 피그마와는 달리 웹 기반이 아니기 때문에 Windows, macOS에서만 사용할 수 있고 마찬가지로 프로그램을 다운로드 받아야합니다. 무료로 사용하기에는 제약이 많으며 월 11,000원로 모든 기능을 사용할 수 있습니다.
장점
- 정적 디자인 기반 프로토타입 생성 및 공유 기능 제공
단점
- Windows 및 macOS에서만 사용 가능
- 무료로 사용하기에는 제약이 많음
다음 소개해드릴 툴은 카카오 오븐입니다. 현재 카카오 오븐은 베타 버전으로 운영되고 있지만 그래도 쓸만한 프로토타입 제작 툴이라고 볼 수 있습니다. 우선 모든 기능을 무료로 사용할 수 있고 웹 기반 소프트웨어이기 때문에 별도의 프로그램 다운로드가 필요 없습니다.
다만 지원하는 이미지 양식이 JPG, PNG, GIF 뿐이라 다른 디자인 툴을 활용한 파일과의 확장성이 부족합니다.
장점
- 모든 기능 무료 제공
단점
- 제한된 이미지 양식
다음 소개해드릴 툴은 Pidoco입니다. Pidoco를 사용하면 클릭 가능한 와이어 프레임과 완전한 상호작용을 구현한 UX 프로토타입을 빠르게 만들 수 있습니다. 모바일 시뮬레이션 기능도 제공하며 팀 협업 도구로도 활용될 수 있습니다.
다만 무제한으로 모든 기능을 사용하기 위해서 1개월에 199달러를 지불해야 하는 만큼 모든 기능을 사용하는 것에 있어서 비싼감이 없지 않습니다. 그리고 한국어를 지원하지 않아 영문으로 사용해야합니다.
장점
- 모바일 시뮬레이션 및 팀 협업 기능도 제공
단점
- 무제한 사용에 비싼 가격 및 한국어 미지원
다음 소개해 드릴 툴은 PowerMockup입니다. 이 프로그램의 가장 큰 특징으로는 우리들에게 익숙한 MS PowerPoint 기반으로 움직인다는 점입니다. 파워포인트를 위한 목업 및 와이어 프레임 툴로서 온전히 파워포인트 도형만으로 만들어진 수많은 사용자 인터페이스 요소와 아이콘 모음을 제공합니다.
마찬가지로 팀 협업 기능을 제공하지만 한국어를 지원하지 않습니다.
장점
- 파워포인트 기반의 목업 및 와이어 프레임 툴
단점
- 한국어 미지원
마지막으로 소개해 드릴 툴은 Justinmind입니다. 이 프로그램은 드래그 앤 드롭 기능을 이용한 간단한 프로토타이핑부터 복잡한 프로토타이핑까지 모두 작업할 수 있고 다양한 템플릿을 제공하여 사용자가 활용하거나 편집할 수 있게합니다.
개인적으로 온라인 웹사이트 UI 개발의 프로토타이핑에 특화되어 있는 프로그램으로 생각됩니다. 이 프로그램 역시 한국어는 미지원합니다.
장점
- 다양한 템플릿 지원을 통한 프로토타이핑 기능 제공
단점
- 한국어 미지원
Part 3: 이드로우 맥스(EdrawMax)로 프로토 타입 만들기
이드로우 맥스는 위에 첫번째로 소개해드린 바와 같이 다양한 분야의 템플릿을 제공하는데요 그 중에서 프로토 타입 제작 관련 템플릿도 제공하기 때문에 처음으로 프로토타이핑을 하는 사용자분들은 제공되는 템플릿과 편집 툴을 활용해 큰 도움을 받을 수 있습니다.
Step1. 템플릿 찾기
이드로우맥스를 다운로드하고 실행하면 위와 같은 화면이 나오는데요 보시다시피 정말로 다양한 목적에 적합한 템플릿들을 제공하고 있습니다. 이 중에서 프로토타입 관련 템플릿도 어렵지 않게 찾을 수 있는데요 저는 여기서 웹사이트 제작 프로토타입과 관련한 템플릿인 웹사이트 와이어프레임을 활용해보겠습니다.
Step2. 중앙 편집창 활용하기
원하는 템플릿을 선택하면 아래와 같은 편집 창이 나타나게 되는데요 보시다시피 다양한 편집툴을 제공하고 가운데 있는 편집 창은 격자로 이루어져 있어 길이와 각도가 사용자가 알아보기 쉽게 되어있습니다.
Step3. 좌, 우측 편집상자 및 상단바 활용하기
왼쪽에 있는 편집상자에는 다양한 기호들을 제공합니다. 필자가 가장 중요하게 생각하는 부분이기도 한데요 기본으로 제공되는 ‘웹사이트 와이어 프레임’ 기호 라이브러리뿐만 아니라 ‘다른 기호’를 클릭해 더 많은 기호들도 사용할 수 있습니다. 다른 기호 라이브러리에서 제공하는 기호들도 많기 때문에 웹사이트 UI에 들어갈만한 요소들을 찾을 수 있을 겁니다.
오른쪽에 있는 편집상자에는 채우기, 선, 음영과 같은 디자인 툴을 제공하여 배경이나 기호 편집이 가능합니다. 상단 편집 상자는 MS Office 프로그램에서 자주 보던 양식의 배열로 처음 이드로우 맥스를 사용하는 분들도 손쉽게 프로그램에 적응할 수 있습니다.
오늘은 프로토타입의 대한 개념과 추천 드리는 8가지 프로토타입 툴 그리고 이드로우 맥스를 활용한 프로토타입 제작 방법에 대해 소개해 드렸습니다. 개인적으로 프로토타입 제작에 이드로우 맥스 프로그램을 추천드리며 프로토타입 제작 외에도 많은 템플릿이나 기호들을 활용해 볼 수 있으니 사용해보시기 바랍니다.
그럼 오늘 정보가 도움이 되셨길 바라며, 다음번에도 유익한 내용으로 찾아오겠습니다!
질문 1. 프로토타입은 언제 쓰이나요?
최종 양산품을 생산하기 전에 제작함으로서 제품 양산전에 생기는 문제나 제작 공정 등에서의 문제점을 미리 파악하고 대응할 수 있게 해줍니다.
질문 2. 프로토타입 만들 수 있는 툴은 어떤 것이 있나요?
이드로우 맥스, Adobe XD, Pixso 등과 같은 프로그램을 활용해서 손쉽게 프로토타입을 만들 수 있습니다.
질문 3. 제작된 프로토타입을 손쉽게 공유 할 수 있나요?
이드로우 맥스 프로그램을 이용해 원하는 프로토타입을 제작하고 공유할 수 있습니다.
이드로우 마인드
모든 기능을 갖춘 마인드 매핑 소프트웨어
- 운영체제:Windows, Mac, Linux, 웹 모두 지원
- 브레인스토밍 모드와 프레젠테이션 모드
- 그룹 및 실시간 협업 가능