디자인은 끊임없이 진화하고 복잡해지고 있다. 사용자 인터페이스 설계는 더 이상 아이콘의 와이어프레임과 디자인에만 국한되지 않는다. 오늘날, 디자이너들은 그래픽 소프트웨어와 프로토타이핑 툴을 포함하여 단순함에서 정교함에 이르기까지 다양한 유용한 도구들을 가지고 작업한다. 웹 애플리케이션을 만들든, 모바일 애플리케이션을 만들든 프로토타이핑 제작에는 준비와 전문 소프트웨어가 필요하다. 그러나 프로토타이핑 툴의 수가 매년 증가함에 따라 어려운 선택을 해야 한다. 어떤 툴을 사용하면 가장 효율적이고 효과적으로 작업할 수 있으며 가장 유용한 프로토타입을 만들 수 있을지 고민해야한다. 이 글에서는 가장 인기 있는 프로토타이핑 툴의 장단점을 살펴보기로 한다.
우리 회사 UX팀의 디자이너들에게 그들이 가장 좋아하는 프로토타이핑 제작 툴에 대해 물어본 적이 있는데, 개인마다 몇 가지 다른 답변을 받은 적이 있다. 각 툴을 비교하는 기준은 자사의 솔루션이 시장에서 두각을 나타내고 경쟁력을 유지할 수 있도록 도와주는 충실도, 사용하기 쉬운 사용자 인터페이스 또는 시간 절약 기능과 같은 특정 속성에 초점을 맞춘다.
귀사에 가장 적합한 프로토타이핑 툴을 어떻게 선택할 수 있는가? 툴을 선택할 때는 무엇보다도 프로젝트의 특정 요구 사항을 염두에 두어라. 이러한 요구 사항을 정의할 때는 가능한 한 정밀하고 철저하게 제작하여 미래의 프로덕트가 어떻게 보이고 동작할 것인지에 대한 완벽한 표현을 제공하는 프로토타입을 만들 수 있도록 해라. 사소한 기술적 세부사항처럼 보일 수 있는 것을 빠뜨리지 마라. 그것들은 전체 프로젝트에 영향을 미칠 수 있다.
우선 순위 설정
프로토타입을 만드는 목적은 디자인 아이디어를 검증하고 전체 사용자 인터페이스의 구조 및 세부 사항을 명확히 하기 위함이다. 프로토타이핑은 디자인 프로세스 중에 언제든지 발생할 수 있지만, 사용적합성(Usability) 테스트 전에 특히 중요하다. 비용을 줄이려고 한다면, 더 인기 있거나 복잡한 도구만을 선택해서는 안된다. 수행해야 하는 프로젝트, 프로토타입을 만들어 보여줄 타겟, 작업을 수행해야 하는 시간, 개발 프로세스 진행에 필요한 조건을 생각해 보아라. 스스로에게 다음과 같은 질문을 해보아라.
|
- 왜 이 프로토타입이 필요한가? |
이러한 질문에 답하면 프로토타이핑을 제작함에 있어, 필요한 기능이 무엇인지 심도깊게 이해하는 데 도움이 될 것이다. 또한 효율적인 프로토타이핑 프로세스를 지원하는 툴의 기능이 무엇인지 고려하는 것이 중요하다. 효율적인 프로토타이핑 툴은 빠르고 일반적으로 단일 사용 프로토타이핑을 제작할 수 있으며, 디자인 개념을 타겟에게 전달하는 데 사용한 후에는 폐기할 수 있다.
프로토타이핑에 기울이는 공수 비중을 특정 설계 개념을 검증하는 것에 집중해라. 디자이너는 프로토타입을 제작했을 때의 가장 큰 이점을 제공하는 서비스의 설계 부분을 고려해서 결정해야 한다. 일단 어떤 종류의 프로토타이핑을 만들 것인지 결정했으면, 다음 단계는 기능과 비용의 균형을 가장 잘 맞출 수 있는 프로토타이핑 제작 툴을 선택하는 것이다. 감당할 수 있는 비용에 가능한 한 많은 힘을 얻어라.
프로토타이핑 툴 선택
프로토타이핑을 통해 미래의 웹 애플리케이션이나 사이트 또는 모바일 앱을 명확하게 정의할 수 있으므로, 요구사항에 대한 오해의 위험을 상당 부분 제거하고 고객의 요청을 구체화할 수 있다. 프로토타이핑은 디자이너의 작업물에서 필수적인 부분이다. 프로토타이핑에 필요한 정확한 유형, 개념, 타당성, 수직 또는 수평 프로토타입과 같은 프로토타입의 종류, 원하는 피델리티에 따라 프로토타이핑 작업을 훨씬 쉽게 수행할 수 있는 몇 가지 등급의 프로토타이핑 툴이 있다.
|
- 플랫, 클릭할 수 있는 프로토타입 |
올바른 수준의 피델리티를 결정하는 것은 프로토타이핑 제작에 중요한 역할을 한다. 종이와 연필을 사용하여 low-fi의 프로토타입을 만들 수 있는데, 소프트웨어를 전혀 사용할 필요가 없다. 종이 형식의 프로토타입은 시각적, 상호작용적 피델리티가 낮다. 그러나 쉽게 조정할 수 있다. 중간 수준의 시각적 피델리티를 얻으려면 Visio 또는 OmniGraffle과 같은 프로토타이핑 애플리케이션과 함께 작업해야 하지만, 이러한 프로토타입의 상호작용성은 낮게 유지된다. Hi-fi 프로토타입이 가장 현실적이고 상호작용적이다. 어떤 사람들은 심지어 그들을 진짜 프로덕트로 착각할 수도 있다. 이러한 도구를 사용하여 잘 구성된 기능성 프로토타입을 제작하려면 기술과 지식이 필요하다.
플랫, 클릭할 수 있는 프로토타입
경험이 부족한 디자이너로서 정교한 프로토타이핑 도구를 배울 수 있는 지식, 자신감 또는 시간이 없다면 InVision이나 Marvel을 사용해 보아라. (Craft라는 멋진 Sketch 플러그인 덕분에 InVision을 선호). InVision은 Sketch와 Photoshop을 통합한 사용이 간편하고 신속한 프로토타이핑 제작 솔루션이다. 단 몇 분 만에 프로토타입을 만들 수 있다. 툴은 기능이 제한되어 있고 비트맵 이미지를 생성하지만, 프로덕트의 설계 개념을 검증해야 할 때 초기 단계의 설계에 완벽하게 적합하다. 최소한의 노력으로 클릭이 가능한 간단한 프로토타입을 단시간에 만들 수 있다. 그런 다음 프로토타입에 대한 링크를 공유할 수 있으며, 받는 사람이 프로토타입을 열고 탐색할 수 있다. 하지만 InVision의 주요 단점은 구현 가능한 애니메이션 수가 제한되어 있다는 점이다. 따라서 InVision을 사용하면 중간 정도의 피델리티 프로토타입을 만들 수 있다.
레이어드된 프로토타입
좀 더 진보된 디자이너들을 위해 Principle 또는 Flinto for Mac은 Hi-fi 프로토타입을 만들 수 있는 추가적인 유용한 기능을 제공한다. 다양한 프로토타이핑 툴을 사용하여 보다 복잡하고 상세한 마이크로 인터랙션을 작업할 수 있다.
Principle을 사용하면 프로토타이핑 제작에 더 많은 시간이 필요하지만, 정밀한 애니메이션을 제작하고 별도의 요소로 작업할 수 있다. Principle은 화면 상태 간 전환 시 위치, 크기, 색상의 변화를 감지한다. 이미지 기반 InVision에서는 불가능한 현실적이고 동적인 상호작용을 만들 수 있는 힘을 가지고 있다. 그 결과, 섬세하고 매끄러운 애니메이션을 만들 수 있다. Principle의 주요 목적은 사용자 인터페이스 애니메이션을 설계하는 것이지만, 더 복잡한 설계 솔루션이 되기에는 충분하지 않을 것이다. Principle 프로토타입을 공유하려면 iOS 앱을 사용하여 동영상이나 GIF를 만들거나 프로토타입을 공유할 수 있다. InVision은 훨씬 더 편리한 공유 옵션을 가지고 있다.
Flinto는 여러 면에서 Principle을 닮았지만, 고려해야 할 몇 가지 차이점이 있다. Flinto는 여러 화면과 사용자 지정 전환으로 구성된 프로토타입을 만들 때 더 편리하다. 그것은 당신이 Principle에서 찾을 수 없는 스와이프 같은 더 많은 제스처를 제공한다. Sketch에서처럼 아트보드를 쉽게 이동할 수 있어 작업을 더욱 편리하게 할 수 있다.
Principle은 레이어를 자동으로 연결한다(응용프로그램이 동일한 이름의 두 요소를 식별할 수 있는 경우). 이것은 Sketch 레이어 이름을 순서대로 유지하는 설계자에게 매우 편리하다. 그러나, 프로토타입을 만들 때 모든 애니메이션 요소를 연결하기를 선호하는 사람들에게는 Flinto가 더 나은 선택이다.
보다시피 두 툴은 그 자체로 가치가 있다. 둘 다 시험해 봐야 어느 것이 가장 잘 어울릴지 알 수 있을 것이다.
코드 기반의 프로토타입
코드 기반의 프로토타이핑 제작에 열정이 있는 디자이너들에게 Framer와 Origami는 편리한 도구다. 하지만 어느정도 심도있는 코딩을 할 준비를 해라. 기능이나 링크를 추가하기 위해 버튼을 클릭하거나 요소를 드래그 앤 드롭하지마라. 프로토타입을 코딩하는 것은 많은 시간과 노력을 필요로 하는 복잡한 작업이며, 많은 디자이너들은 그것을 할 기술이 없거나, 단지 충분한 시간이나 소스가 부족하다. Framer는 CoffeeScript라고 불리는 자바스크립트의 단순화된 버전에 대한 이해가 필요하다.
걸작인 프로토타입을 만들려면 JavaScript 지식을 새로 고치고 코딩 도구를 선택해라. 결과는 인상적일 수 있지만, 이러한 프로토타입을 만드는 데 필요한 시간과 비용을 기억해라. 가장 좋은 프로토타이핑은 더 저렴한 비용으로 필요한 것을 제공하는 것이다.
이러한 툴은 기능성이 다르기 때문에 함께 만들 수 있는 프로토타입 유형, 프로토타입을 공유할 수 있는 방법, 제작기간에 차이가 있다는 것을 알 수 있다.
프로토타이핑 트랜드
현재 시장에는 클릭 가능한 프로토타이핑을 제작할 수 있는 툴이 가득하다. 하지만, 그 산업은 곧 바뀔 것이다.
Silverflows는 프로젝트의 맨 끝에만 있는 것이 아니라 디자인 과정 전반에 걸쳐 프로토타이핑을 통합하기로 결정했다. Macaw는 설계에서 실제 즉시 구현할 수 있는 코드를 생성하는 방법을 모색하고 있다. 비전을 위해, InVision은 이 두 회사 모두를 인수했다.
Pixate(RIP), Adobe XD, Silverflows에서는 하나의 도구로 디자인과 화면 내비게이션을 만들 수 있다. 따라서 툴 간에 디자인을 옮기거나, 가져오거나하는 요소를 전송할 필요가 없다. 디자인과 프로토타입을 동시에 할 수 있다.
기능 차별화
프로토타이핑 제작 툴을 차별화하는 8가지 주요 기능:
|
- 디자인 |
우선 순위를 파악한 후에는 자신에게 적합한 프로토타이핑 툴을 선택하는 것이 수월해진다. 가장 인기 있는 모든 프로토타이핑 툴을 비교하는 차트를 보려면 uxtools.co을 방문해보아라.
고민의 결론
어떤 프로토타이핑 도구가 귀사의 요구에 가장 적합한지 자세히 알아보아라. 현재 진행 중인 프로젝트에 따라 실제로 여러 가지 다른 프로토타이핑 툴이 필요할 수 있다. 이 글에서 설명한 모든 툴을 사용해 본 결과, 우리는 세 가지 프로토타이핑 툴이 필요하다고 결론 내렸다.
|
- InVision |
새로운 프로토타이핑 툴이 시장에 출시될 때마다 우리는 그 기능을 배우고, 그것이 우리 작업에 유용하게 쓰일 수 있을지 보는 것에 흥분한다. 새로운 툴로 실험하는 것을 두려워하지 마라. 현재 프로토타이핑 제작 시 필요한 모든 작업을 수행할 수 있는 범용 단일 툴은 없다. 언젠가 Sketch만큼 훌륭한 프로토타이핑 제작 도구가 생기기를 바래본다.
-
저자 : Simon Bronnikov and Ellina Bereza
원문 링크: https://www.uxmatters.com/mt/archives/2016/12/prototyping-user-interfaces-finding-the-tool-you-need.php
'ᴜx > ᴀʀᴛɪᴄʟᴇ' 카테고리의 다른 글
| A/B 테스트의 장점과 단점 (0) | 2020.06.18 |
|---|---|
| 드롭다운(dropdown) 메뉴 디자인 필수 가이드 (0) | 2020.06.17 |
| 2020년, 어떤 UI 디자인 툴을 사용해야할까? (0) | 2020.06.12 |
| UI / UX 디자이너를 위한 짧고 유용한 디자인 Tip (0) | 2020.06.04 |
| 실제 UI 디자인 - 타이포그래피 (0) | 2020.04.23 |
댓글