기술의 발전은 세상을 디지털로 바꾸어 놓았고, 인류에게 그동안 상상조차 하기 어려웠던 새로운 경험을 선사하고 있습니다. 인터넷은 우리를 막연한 혼돈 속에서 벗어나 명확한 길로 이끌었습니다. 현대 디지털 기술이 만들어낸 수많은 가능성 가운데에서도 웹사이트 개발과 모바일 앱 개발 분야는 특히 주목할 만한 분야입니다.
프로토타이핑이란 무엇일까요?
프로토타이핑(Prototyping)은 실제로 코드를 작성하지 않고도 웹사이트나 앱의 시제품 버전을 만들 수 있게 해주는 과정입니다. 이렇게 제작한 프로토타입은 애플리케이션의 기본 기능 모델을 구현하거나, 초기 피드백을 받아보거나, 데모를 진행하거나, UI/UX를 실험하는 등 다양한 용도로 활용할 수 있습니다.
프로토타이핑은 웹 디자인, 웹 개발, 모바일 앱 개발 과정에서 빼놓을 수 없는 핵심 단계 중 하나입니다. 시중에 디자인 도구는 이미 넘쳐나는 상황이므로, 머리를 싸매며 코드와 씨름하기보다는 검증된 좋은 도구를 활용해 앱 프로토타입을 제작하는 것이 훨씬 효율적입니다.
아래는 코딩 없이 앱 프로토타입을 제작할 수 있는 최고의 와이어프레임 도구 5가지를 엄선해 정리한 목록입니다.
1. Framer
iOS와 안드로이드 앱 프로토타이핑이라면 Framer만 한 것이 없습니다. Framer는 간단하면서도 강력한 언어인 CoffeeScript를 기반으로 작동하며, 배우기가 무척 쉽습니다. CoffeeScript는 최종적으로 자바스크립트(JavaScript)로 컴파일되기 때문에 별도의 학습 부담도 적습니다. 앱 프로토타입을 만드는 데 필요한 코드는 단 두세 줄이면 충분합니다.
Framer는 다양한 기능과 유용한 패키지를 갖추고 있습니다. 포토샵(Photoshop)에서 디자인을 가져오거나, 그래픽 디자인 도구인 '스케치(Sketch)'에서 불러올 수도 있습니다. 또한 실제 모바일 기기에서 프로토타입을 미리 보면서 필요한 부분을 즉석에서 조정할 수 있습니다. "픽셀과 동작을 연결해 인터랙션 디자인의 새로운 가능성을 발견하게 한다"는 Framer의 철학처럼, 인터랙션 디자인의 폭을 넓혀주는 도구입니다.
2. Apper
Apper는 끊임없이 완벽함을 추구하는 기술 애호가들을 위한 앱입니다. 프로토타입 제작에 있어 Apper에 필적하는 도구를 찾기란 쉽지 않습니다. IGenApps Inc.가 개발한 이 애플리케이션은 웹 디자이너라면 꼭 갖춰야 할 필수템입니다. 앱을 퍼블리싱할 수 있을 뿐만 아니라, 성능 중심의 앱을 직접 만들고 공유할 수 있기 때문입니다.
Apper는 고유의 URL 기능으로 잘 알려져 있습니다. 이 기능은 앱의 인터페이스를 변경해, 새롭게 디자인된 앱이 마치 네이티브 앱처럼 보이도록 만들어 줍니다. 플랫폼 맞춤 설정을 이용하려면 월 4.99달러의 저렴한 요금만 지불하면 되며, 그 외 비용은 모두 선택 사항입니다.
3. InVision
InVision은 팀원들이 디자인, 프로토타입, 커뮤니케이션 작업을 함께 할 수 있도록 무료 프로토타이핑 플랫폼을 제공합니다. 기본적인 애니메이션과 몇 가지 전환 효과를 갖추고 있으며, 완성된 프로젝트든 진행 중인 프로젝트든 모두 공유할 수 있습니다. 또한 포토샵, 스케치 등 인기 있는 디자인 도구와의 연동도 지원합니다.
'완벽한 프로토타이핑'은 더 이상 먼 꿈이 아닙니다. Adobe, Evernote 같은 세계적인 기업들이 InVision을 신뢰하고 있으며, 40만 명이 넘는 사용자가 이 플랫폼의 효능을 입증해 왔습니다. 이러한 숫자들은 InVision이 얼마나 효과적인 플랫폼인지 명확하게 보여줍니다.
4. Proto.io
Proto.io는 세련된 애니메이션과 정교한 전환 효과를 갖춰, 걸작 수준의 인터랙티브 프로토타입을 만들 수 있게 해줍니다. 네이티브 앱과 흡사하게 동작하는 인터랙티브 프로토타입을 개발할 수 있으며, 시각적 요소와 인터랙티브 디자인을 통해 정보를 전달하는 짜릿한 경험을 선사합니다.
드래그 앤 드롭 기능까지 갖춰 누구나 쉽게 사용할 수 있다는 점도 큰 장점입니다. 자신만의 디자인 에셋을 가져올 수도 있고, iOS, 안드로이드, 윈도우 폰 UI 요소 중에서 골라 사용할 수도 있습니다. 여기에 미리 준비된 아이콘 세트도 활용 가능합니다.
Proto.io의 주요 기능으로는 적응형 UI 라이브러리, 머티리얼 디자인 UI 라이브러리, Dropbox 동기화, 오프라인 모드 등이 있습니다. BBC, 디즈니, ESPN, 아마존, PayPal 같은 글로벌 기업들이 이미 Proto.io를 신뢰하고 있습니다. 결론적으로 Proto.io는 탭, 스와이프, 스마트 터치 등 일반적인 앱 동작이 가득한 모바일 앱을 만들 수 있게 해줍니다. 무료로 시작할 수 있지만, 모든 기능을 이용하려면 월 24달러를 지불해야 합니다.
5. Marvel
Marvel은 빠른 속도로 유명하며, 번개처럼 빠른 프로토타이핑 솔루션을 원한다면 가장 좋은 선택입니다. 프로토타입을 Dropbox와 연결해 파일 저장소 역할을 하게 하는 초강력 도구로, 이미 5만 1천 명이 넘는 탄탄한 사용자층을 확보하고 있습니다.
Marvel은 PSD 파일과 디자인 스케치를 견고한 웹 프로토타입으로 변환하는 데 매우 짧은 시간이면 충분합니다. 무료로 사용할 수 있으며, Pro, Team, Company 등 유료 버전도 함께 제공됩니다.
맺음말
앞서 소개한 모든 도구에는 공통점이 있습니다. 바로 '코딩' 없이 '드래그 앤 드롭' 방식으로 작업할 수 있다는 점입니다. 프로토타이핑의 중요성은 아무리 강조해도 지나치지 않습니다. 이러한 도구들을 활용하면 웹 디자인과 모바일 앱 개발 프로젝트의 속도를 크게 높일 수 있습니다. 지금 바로 이 도구들을 사용해 보고, 놀라운 결과를 직접 확인해 보시기 바랍니다!