당신만을 위한, 와이어프레임(Wireframe) 제작 툴 10가지

여러분은 혹시 와이어프레임(Wireframe)을 만들 때, 어떤 툴을 사용하시나요? 최고의 와이어프레임 도구들을 활용하면, 웹사이트를 보다 쉽게 만들 수 있는데요. 툴을 사용하면 제품을 시각적으로 자세히 그려서 볼 수 있고, 관련된 팀원 모두가 사용자의 상호작용과 기능에 전적으로 집중할 수 있습니다. 또한, 여러분이 제안한 앱이나 웹사이트가 어떻게 작용하는지에 대해서 업무 관련자들이 이해하기도 수월해지고, 더 철저하게 프로젝트를 살펴볼 수 있게 되죠. 와이어프레임을 위한 도구들의 종류는 무척이나 다양하며, 제공하는 기능의 수준도 천차만별입니다. 따라서 여러분이 이를 일일이 따져보고 고르기에는 어려움이 있을 수 있는데요. 그래서 이번 시간 위시켓은 와이어프레임(Wireframe)을 위한 최고의 제작 툴들을 준비해보았습니다. 01. 미로(Miro) : 미로는 와이어프레임 도구와 함께 협업 기능도 포함되어 있습니다. 미로는 원격근무 팀들이 함께 작업할 수 있는 허브(hub)를 만드는 협업 시스템입니다. 미로에서는 무한 화이트보드(infinite whiteboard), 위젯, 사전제작 템플릿 등과 같은 상당히 인상적인 도구들을 활용해서 디지털 업무 공간을 표준화할 수 있습니다. 덕분에 모든 관련자들이 같은 공간에 있는 것처럼 느낄 수 있다고 하죠. 미로는 와이어프레임, 사용자 스토리 또는 고객여정지도(journey map) 그리고 브레인스토밍 절차에서 사용할 수 있는 도구들을 모두 제공합니다. 또한 미로는 슬랙(Slack), 지라(Jira), 구글 드라이브(Google Frive), 스케치(Sketch) 등 20개가 넘는 애플리케이션과 통합되어서, 매끄러운 경험을 만들어줍니다. 전 세계적으로 200만 명이 넘게 사용하고 있는 미로는 최고의 와이어프레임 도구로 평가받고 있습니다. 02. 저스트인마인드(Justinmind) : 저스트인마인드는 와이어프레임에서 사용할 수 있는 UI 요소 및 맞춤형 스타일링을 위한 라이브러리를 제공하고 있습니다. 웹 기반의 저스트인마인드에는 iOS, SAP, 안드로이드 환경을 위한 버튼 및 양식에서부터 일반적인 도형 및 다양한 위젯에 이르기까지, 수많은 UI 요소들로 구성된 라이브러리가 포함되어 있습니다. 그리고 맞춤형 스타일링 기능이 있기 때문에, 라운드 형 모서리나 잘라낸 이미지, 색상 그라데이션을 추가하거나 또는 그래픽을 브라우저로 드래그에서 불러올 수도 있죠. 프로토타입은 HTML 문서로 내보낼 수 있습니다. 03. 와이어프레임.cc(Wireframe.cc) : 와이어프레임.cc는 깔끔하며 미니멀한 인터페이스를 제공합니다. 와이어프레임.cc는 일반적인 드로잉 앱의 툴바 및 아이콘과는 다른 와이어프레임의 스케치를 위한 간단한 인터페이스를 제공하고 있는데, 그런 이유로 최고의 와이어 프레임 도구 목록에 선정될 수 있었습니다. 컬러 팔레트의 수가 제한되어 있기 때문에 선택하느라 시간을 허비할 필요가 없으며, UI 요소들은 상황에 맞게 반응하며, 여러분이 필요로 하는 경우에만 보이게 됩니다. 이러한 특성을 즐기느냐 마느냐 하는 것은 개개인의 취향에 달려있습니다. 04. 어도비 XD(Adobe XD) : 어도비 XD는 와이어프레임과 프로토타입을 위해서 사용할 수 있는 강력한 엔진입니다. 어도비 XD를 사용하면 프로토타입 도구 모음의 일부인 와이어프레임을 이용할 수 있습니다. 이런 도구들은 와이어프레임 스케치, 팀원들과의 협업, 사이트 맵과 플로우차트, 스토리보드 생성, 기능성 프로토타입 제작 등 모든 프로세스를 수행할 수 있게 해줍니다. 어도비 XD는 무료로 사용해볼 수 있기는 하지만, XD의 놀라운 기능들을 모두 활용하려면 크리에이티브 클라우드에 가입해야만 합니다. 05. UX핀(UXPin) : UX핀 에디터로 고급 애니메이션을 만들 수 있습니다. UX핀에서는 맞춤형 요소들을 드래그 앤 드롭 방식을 사용해서 빠르게 와이어프레임으로 만들어낼 수 있습니다. 부트스트랩(Bootstrap), 파운데이션(Foundation), iOS와 안드로이드를 위한 라이브러리들이 주기적으로 업데이트 되며, 그렇게 만든 와이어프레임은 고품질의 목업(mockup)으로 빠르게 변환시킬 수 있습니다. 이를 통해 최종 제품에 대한 상호반응과 애니메이션을 완벽하게 구현한 프로토타입을 만들어낼 수 있죠. 또는 포토샵(Photoshop CC)나 스케치(Sketch)로 디자인을 시작한 다음에, UX핀으로 불러와서 프로토타입을 만들 수 있습니다. 그런 다음에는 UX프로세스를 완벽하게 지원하기 위해서, 프로토타입의 문서를 생성해 고정시키고, 개발자들을 위한 스펙과 스타일 가이드를 자동으로 생성할 수 있습니다. 06. 플루이드 UI(Fluid UI) : 모든 프로젝트에 대한 QR코드를 생성해서, 휴대전화로 프로토타입 작업을 스캔할 수 있습니다. 플루이드 UI는 iOS, 안드로이드, 윈도우 등에서 사용할 수 있는 2000개 이상의 컴포넌트를 가진 내장형 라이브러리를 가지고 있습니다. 그리고 이런 라이브러리 요소들을 드래그해서 만든 페이지들도 아주 많은데요. 이 시스템은 화면의 결합 링크를 만들고, 모든 것들이 어떻게 들어맞는지를 보여주는 다이어그램을 그려서, 프로젝트의 전체적인 맵을 시각적으로 훌륭하게 보여줍니다. 링크 위쪽으로 움직임을 가져가면 사용하고 있는 전환의 종류를 변경할 수 있습니다. 07. 발사믹 목업(Balsamiq Mockups) : 발사믹 목업은 화이트보드 위에 스케치하는 경험을 똑같이 재현하는 것을 목표로 하고 있습니다. 발사믹 목업에는 버튼에서부터 리스트까지 다양한 드래그 앤 드롭 요소들이 포함되어 있으며, 이들은 모두 손으로 그린 것처럼 스타일이 갖춰져있습니다. 이 와이어프레임 도구의 기본 전제는 목업이 가지는 '거칠고 낮은 수준의 속성을 의도적으로' 유지해서 가능한 많은 피드백을 유도하는 것입니다. 08. 액슈어 RP(Axure RP) : 액슈어 RP는 웹사이트와 앱 제작을 위한 상호반응형 HTML 목업을 만들 수 있게 해줍니다. 액슈어 RP를 사용하면 목업 제작은 물론이고, 레이아웃에 기능성을 추가해서 상호반응형 프로토타입을 제작할 수 있습니다. 이 와이어프레임 도구의 기능에는 사이트맵(sitemap)과 함께 다채로운 UI 요소의 형태를 가진 다양한 위젯들도 포함되어 있는데요. 뿐만아니라 웹사이트와 앱 제작을 위한 상호반응형 HTML 목업을 만들 수 있고, 내장된 공유 기능을 통해서 휴대전화에서도 앱의 디자인을 확인할 수 있습니다. 09. 피도코(Pidoco) : 피도코에는 드래그 앤 드롭 인터페이스 요소들로 이뤄진 편리한 라이브러리가 포함되어 있습니다. 피도코는 다양한 드래그 앤 드롭 방식의 인터페이스 요소를 가진 라이브러리가 있고, 또한 다수의 페이지와 레이어를 추가할 수 있는 기능이 있다는 점에서 액슈어와 비슷합니다. 프로토타입은 온라인으로 클라이언트에게 공유할 수 있고, 협업 시 피드백과 논의를 위한 기능도 포함되어 잇는데요. 피도코 앱을 다운로드하면, 휴대전화에서도 간편하게 프로토타입을 확인할 수 있습니다. 10. 비지오(Visio) : 마이크로소프트의 워드나 엑셀을 이용해본 적이 있다면, 비지오의 인터페이스가 친숙할 것입니다. 비지오의 진정한 강점은 와이어프레임 보다는 기술적인 다이어그램을 그릴 때 빛을 발합니다. 하지만, 마이크로소프트의 워드나 엑셀과 같은 응용프로그램에 익숙한 사람들이라면, 비지오의 인터페이스도 매우 친숙할 겁니다. 상당히 투박하기는 하지만, 그래도 스와이프(swipr)와 같은 추가 도구를 제공하고 있기 때문에, 실제로 사용해볼 수 있는 HTML 프로토타입을 생성해서 내보낼 수 있습니다. > 이 글은 'The 20 best wireframe tools'를 각색하여 작성되었습니다.