앱 제작자를위한 7 가지 최고의 와이어 프레임 및 프로토 타이핑 도구

최근에는 UI와 UX에 대해 많은 논의를했습니다. 아무도 이것에 대해 불평하지 않았기 때문에 앱 개발에 관련된 모든 사람들이 UI와 UX의 중요성을 인식하는 시점에 도달했다고 생각합니다.

훌륭한 앱 아이디어는 잘못 생각한 인터페이스와 경험으로 인해 쉽게 망가집니다. 그리고 현재 신속한 와이어 프레이밍 및 프로토 타이핑에 사용할 수있는 많은 도구가 있으므로 훌륭한 경험을 실행하지 않을 이유가 없어야합니다.

이 용어는 종종 함께 사용되지만 와이어 프레임과 프로토 타입 사이에는 분명한 차이가 있습니다.

와이어 프레임은 앱 구조의 기본 레이아웃입니다. 일반적으로 단순한 흑백과 같은 색상없이 수행되며 와이어 프레임은 텍스트, 이미지 및 기타 디자인 요소가 이동할 위치를 표시하지만 실제 이미지, 텍스트 등은 포함하지 않습니다. 그러나 각 와이어 프레임 요소는 실제 규모로 표시됩니다. 그 이유는 와이어 프레임이 실제 디자인이 아닌 구조에 집중하기위한 것입니다. 집이나 건물의 청사진과 매우 유사합니다. 설계에 방해받지 않고 모든 구조와 배치에 대한 명확한 아이디어를 얻을 수 있습니다.

프로토 타입은 와이어 프레임과 완전히 작동하는 앱 사이에 있습니다. 프로토 타입에서 가장 중요한 부분은 애니메이션을 사용하는 것입니다.이를 통해 앱이 사용자 상호 작용, 페이지 또는 화면 전환에 어떻게 반응하는지 조사 할 수 있습니다. 프로토 타입에는 실제 이미지, 아이콘 세트 및 텍스트도 포함될 수 있지만 이는 프로토 타입의 목적에 따라 결정됩니다. 상호 작용과 화면 흐름 만 테스트하는 경우 애니메이션과 약간의 색상 만 포함하는 프로토 타입을 만들 수 있습니다. 아이디어를 검증하거나 잠재적 투자자에게 프레젠테이션을하려는 경우 적절한 이미지, 텍스트 등을 사용하여 프로토 타입을 더 세련되게 만들고 싶습니다.

이 라운드 업에 포함 된 도구를 사용하면 애니메이션 위에 더 많은 요소와 색상 스플래시를 포함하여 프로토 타입을 더 쉽게 만들 수 있지만 프로토 타입을 변경하는 데 더 많은 시간이 필요합니다.

1. 발사 미크

앱 아이디어의 와이어 프레임을 구성하는 데만 관심이 있다면 Balsamiq가 적합한 도구입니다. 데스크톱 및 웹 애플리케이션으로 모두 사용 가능한 Balsamiq는 2008 년부터 사용되었습니다.

와이어 프레임은 매우 적은 노력과 시간을 필요로하므로 Balsamiq는 와이어 프레임을 빠르게 생성 할 수 있도록 설계되었습니다. 필요한 기본 요소를 추가 한 다음 필요에 따라 크기를 조정하고 위치를 지정하고 사용자 지정하기 만하면됩니다. Balsamiq로 만든 와이어 프레임은 약간 거칠게 보이지만 의도적 인 것입니다. 이 도구의 크리에이티브 팀은 스케치처럼 보이는 와이어 프레임이 브레인 스토밍을 장려한다고 믿습니다. 이것이 처음에 와이어 프레임을 만드는 큰 이유입니다.

간단한 버전 제어를 통해 시작 위치와 현재 위치를 추적 할 수 있습니다. 그리고 이것이 와이어 프레임이라고해서 잠재적 인 사용자 / 클라이언트로부터 입력을받을 수 없다는 의미는 아닙니다. Balsamiq를 사용하여 완전한 인터랙티브 프로토 타입을 만들 수는 없지만 생성 한 화면 / 페이지를 연결하여 간단한 클릭 스루 프로토 타입을 생성 할 수 있습니다. 애니메이션이나 상호 작용 없음 : 목적은 오로지 흐름을 보여주는 것입니다.

그리고 Balsamiq가 너무 제한적인 것 같으면 언제든지 커뮤니티에서 만든 확장, 템플릿 및 아이콘 팩을 추가 할 수 있습니다.

Balsamiq는 데스크톱 앱으로 제공되며 사용자 당 89 달러, 웹 기반 앱은 월 12 달러부터, Google 드라이브 링크 앱은 사용자 당 월 5 달러입니다. 그러나 먼저 무료 평가판으로 시작하여 자신에게 적합한 도구인지 확인할 수 있습니다.

2. WireframePro

MockFlow 라이선스에는 8 개의 서로 다른 앱에 대한 액세스 권한이 포함되어 있지만 자체 앱 개발을 시작할 때 관심이있는 것은 WireframePro입니다. 다시 말하지만 드래그 앤 드롭 인터페이스를 사용하여 와이어 프레임을 쉽게 만들 수있는 웹 기반 앱입니다.

모든 표준 UI 요소와 함께 Apple 및 Android 스마트 워치에 대한 선택을 포함하여 필요한 기타 여러 구성 요소가 함께 제공됩니다. 또한이 앱은 영감을 얻기 위해 사용하거나 자신의 와이어 프레임을위한 빠른 시작점으로 사용할 수있는 다양한 타사 템플릿을 제공하는 Mock Store에 대한 액세스를 제공합니다.

여기에 나열된 모든 도구와 마찬가지로 WireframePro는 공동 작업 도구가 내장 된 개인 및 팀을 위해 설계되었습니다. 각 요소에 대한 사양을 자동으로 생성 할 수있는 기능이 포함되어 있으므로 디자인 작업을 직접 수행하지 않는 경우 디자이너가됩니다. 모든 디자인 관련 세부 정보에 쉽게 액세스 할 수 있습니다.

마지막으로, 프로젝트를 공유 할 때 권한을 할당하여 일부 사용자는 프로젝트를보고 댓글 만 달 수 있도록 제한하고 다른 사용자도 편집 할 수 있도록 제한 할 수 있습니다.

WireframePro에는 무료 플랜이 없지만 유료 플랜으로 전환하기 전에 30 일 동안 사용해 볼 수 있습니다. 라이선스는 사용자 1 인당 $ 19 / 월, 최대 3 명의 팀원 인 경우 $ 39 / 월부터 시작합니다.

3. UXPin

이름에서 알 수 있듯이 UXPin 팀은 UX를 강조합니다. 와이어 프레이밍과 프로토 타이핑은 앱의 UX를 개선하는 데 도움이됩니다. UXPin을 사용하면 와이어 프레임과 프로토 타이핑을 모두 처리 할 수 ​​있으므로 도구를 전환 할 필요가 없습니다.

예상대로 UXPin은 Sketch 소스 파일과 Photoshop 파일을 지원합니다. 하지만 CSS 코드 스 니펫을 지원하는 편집기가 내장되어있어 와이어 프레임 및 프로토 타입에 사용되는 모든 요소를 ​​사용자 정의 할 수 있습니다. 또한 UXPin을 사용하면 추가하거나 생성 한 모든 파일의 각 반복을 매우 쉽게 추적 할 수 있으므로 원본 버전을 찾기 위해 수십 개의 파일을 클릭 할 필요가 없습니다.

모든 표준 프로토 타입 상호 작용을 사용할 수 있으므로 기본 와이어 프레임 및 프로토 타입을 빠르고 쉽게 만들 수 있습니다. 당연히 필요한 경우 사용자 지정 상호 작용을 만들 수 있습니다. 프로토 타입이 준비되면 테스트를 위해 누구에게나 보낼 수 있으며 모든 상호 작용은 각 테스터의 의견 오디오와 함께 비디오로 캡처됩니다.

UXPin은 웹 사이트, 모바일 앱 및 웹 앱의 와이어 프레이밍 및 프로토 타이핑을 지원하며 14 개의 중단 점이 사전 설정되어 제공되므로 여러 장치에서 설계를 쉽게 볼 수 있습니다. 가격은 기본 요금제의 경우 월 $ 19, 고급 기능을 사용하려면 월 $ 29부터입니다.

4. 프로트

Prott는 프로토 타이핑 도구로 브랜드화되었지만 와이어 프레임 기능도 포함합니다. 앱 아이디어가 대략적으로 그린 ​​스케치에 지나지 않는 경우 스케치를 촬영하여 앱으로 직접 가져올 수 있습니다. 그런 다음 이러한 스케치를 애니메이션화하거나 와이어 프레임의 기초로 사용할 수 있습니다. 미리 설정된 모양과 UI 요소를 스케치에 직접 드래그 앤 드롭하여 흔들리는 선에서 전문적인 lo-fi 와이어 프레임으로 즉시 이동할 수 있습니다.

Prott에는 iOS에서 Android 및 웹에 이르는 다양한 장치를위한 수많은 UI 키트가 포함되어 있습니다. 그러나 인터페이스 요소의 고유 한 라이브러리를 만들 수도 있습니다.

다른 사람들과 프로토 타입을 공유하는 대신 이제 앱의 구조를 명확하게 보여주는 상세한지도를 포함 할 수도 있습니다. 프로토 타입을 공유하는 사람은 누구나 각 화면에 직접 댓글을 달 수 있으므로 해당 댓글과 관련된 내용을 더 쉽게 이해할 수 있습니다.

Prott는 생성 할 수있는 프로젝트 수 외에는 제한이없는 무료 요금제로 모든 기능을 갖춘 30 일 평가판을 제공합니다. 더 많은 프로젝트를 생성해야하는 경우 월 $ 19부터 시작하는 Starter 또는 Pro 플랜으로 전환 할 수 있습니다.

5. InVision

InVision은 프로토 타이핑 전용이지만 다양한 용도를 지원합니다. InVision을 사용하면 웹 사이트, 웹 앱 또는 모바일 앱의 대화 형 프로토 타입을 빠르게 생성 한 다음 실제 장치에서 프로토 타입을 볼 수 있습니다. 여기에는 휴대폰뿐 아니라 태블릿과 웨어러블도 포함됩니다.

프로세스는 다음과 같이 간단합니다.

  • 드래그 앤 드롭을 통해 또는 Dropbox와 동기화하여 디자인 자산 (InVision은 GIF, PNG, JPEG, PSD 및 Sketch 소스 파일을 지원함)을 추가합니다.
  • 각 자산에 핫스팟을 그리고 다른 자산, 외부 URL 또는 앵커에 연결되도록 설정합니다.
  • 제스처 (탭 또는 스 와이프), 고정 영역 (메뉴 막대 등) 및 전환의 형태로 상호 작용을 추가합니다.

완료되면 휴대폰, 태블릿 또는 컴퓨터에서 프로젝트를 보거나 SMS 또는 이메일 링크를 친구 및 동료에게 보낼 수 있습니다. 이렇게하면 각 디자인에 대해 댓글을 달 수있는 링크를 보내는 사람과 함께 디자인 프로세스에 다른 사람을 더 쉽게 참여시킬 수 있습니다.

InVision의 가격은 프로토 타입 1 개에 대해 무료, 무제한 프로토 타입의 경우 $ 25 / 월, 최대 5 명으로 구성된 팀의 경우 $ 99 / 월부터 시작됩니다.

6. 마블

InVision과 마찬가지로 Marvel 앱은 프로토 타이핑을위한 것입니다. Sketch 및 Photoshop 파일에 대한 표준 지원을 포함하거나 내장 된 Canvas 디자인 도구를 사용할 수 있습니다. Marvel에는 또한 자신의 기념일 로고와 ​​디자인을 촬영하고 Marvel 라이브러리에 직접 업로드 할 수있는 iOS 및 Android 앱이 있습니다.

프로토 타입에 생명을 불어 넣는 데 사용할 수있는 수십 가지 상호 작용 및 화면 전환을 통해 디자인에 핫스팟을 쉽게 만들 수 있습니다. 또한 Apple Watch를 비롯한 여러 화면에서 프로토 타입을 테스트 할 수 있습니다.

물론 협업이 포함되지 않은 프로토 타이핑 도구는 논의 할 가치가 없습니다. 그리고 Marvel을 사용하면 프로토 타입에 주석을 달아 사람들이 댓글을 달고 싶은 특정 영역을 강조 할 수 있습니다. 프로토 타입을 보낸 사람은 누구나 Marvel 계정을 만들 필요없이 댓글을 작성할 수 있습니다.

Marvel의 가격은 한 명의 사용자와 최대 두 개의 프로젝트에 대해 월 $ 0부터 시작하지만 기능이 제한됩니다. $ 14 / 월에 무제한 프로젝트 및 모든 기능을 이용할 수 있으며 팀과 기업 고객을위한 별도 가격이 적용됩니다.

7. Proto.io

Proto.io는 2016 년에 대규모 업데이트를받은 인기있는 프로토 타이핑 도구입니다. Proto.io에는 프로토 타이핑 도구에 필요한 모든 기능이 포함되어 있지만이 업데이트는 여러 가지 단순화 된 기능도 가져 왔습니다.

모든 핵심 기능을보다 쉽게 ​​이용할 수 있도록 재 설계된 UI와 함께 Proto.io는 애니메이션에 많은 중점을 두었습니다. 모션은 모바일 앱의 중요한 기능이며 Proto.io의 State Transitions 기능을 사용하면 누구나 쉽게 프로토 타입에서 애니메이션을 만들고 사용자 지정할 수 있습니다.

Proto.io는 인터랙션 디자인 패턴 라이브러리도 도입하여 인터랙션을 쉽게 추가 할 수 있습니다. 이러한 패턴에는 슬라이드 인 메뉴 및 당겨서 새로 고침과 같은 상호 작용이 포함됩니다. 프로젝트에 인터랙션을 추가하고 사용자 지정하기 만하면됩니다.

Proto.io의 새 버전은 사용자가 프로토 타입을 테스트하고 댓글을 달 수 있도록하는 기능을 확장합니다. Validately 및 UserTesting과 같은 사용자 테스트 플랫폼과 통합되어 더 큰 실제 사용자 풀에 액세스 할 수 있습니다. Lookback 통합을 사용하면 현재로서는 iOS에서만 무제한 녹화를 통해 사용자가 앱을 통해 상호 작용하고 탐색하는 방식을 보여줍니다.

Proto.io는 모든 기능을 갖춘 15 일 평가판을 제공하며 그 후에는 매우 제한된 무료 계정으로 전환 할 수 있습니다. 유료 요금제는 팀 규모에 따라 $ 29 / 월부터 시작됩니다.

결론

앱 개발을 막 시작할 때 앱 아이디어의 와이어 프레임과 프로토 타입을 모두 만들 수 있습니다. 그러나 개발 프로세스에 익숙해지면 둘 중 하나만 수행하는 것을 고려할 수 있습니다.

와이어 프레임은 디자인에서 매우 기본적이기 때문에 올바른 흐름과 사용자 경험을 얻는 데 집중해야합니다. 프로토 타입은 흐름과 UX를 모두 다듬고, 디자인 결함을 강조하며, 더 중요한 것은 고객이나 투자자에게 제시해야하는 경우 와이어 프레임보다 멋지게 보이도록 도와줍니다. 와이어 프레이밍과 프로토 타이핑을 모두 결합한 도구에 만족하고 싶을 수도 있지만, 결정적인 요소는 항상 실제로 필요한 모든 기능을 포함하고 사용하기 가장 편리한 도구 여야합니다. 여기에 나열된 각 도구는 무료 요금제 또는 평가판을 제공하므로 결정을 내리기 전에 하루 동안 모든 도구를 테스트 해 보는 것은 어떻습니까?