형태와 기능 – 최고의 와이어프레임 도구 가이드

1487년 레오나르도 다빈치는 밀라노 공작 루도비코 스포르차(Ludovico Sforza)의 후원 하에 있을 때 설계한 "전투 차량"이라는 도식을 그렸습니다. 이 기계는 의도적으로 제대로 작동하지 않도록 설계되었지만 엔지니어 그룹이 2010년에 다시 만들었습니다. Da Vinci의 회로도 는 기본 와이어프레임의 초기 예 중 하나입니다.

와이어프레임 이라는 용어는 웹 디자인 세계에서 채택되기 훨씬 전에 수십 년 동안 사용되어 왔습니다. 와이어프레임은 원래 CAD(Computer Aided Design) 소프트웨어에서 세부 사항 없이 개체의 디자인을 설명하는 데 사용되었습니다. 그 결과 와이어로 만들어진 것처럼 보이는 청사진 이 생성되었습니다. 결국 와이어프레임으로 마무리되었습니다.

그러나 디자인에서 와이어프레임이란 무엇이며, 와이어프레임을 갖는 목적은 무엇입니까?

디지털 디자인의 와이어프레임은 활자체 스타일, 색상, 그래픽 및 대화형 요소가 제거된 시각적 가이드 또는 페이지 도식이며 디자인 프로세스의 특정 지점을 나타냅니다. 그 목적은 콘텐츠의 기능, 동작 및 우선 순위를 나타내는 페이지 수준 레이아웃 아이디어를 보여주는 것입니다.

디자이너는 와이어프레임을 사용하여 기본 개념 구조를 사이트 또는 앱 화면의 시각적 디자인과 연결합니다. 와이어프레임에는 세 가지 유형이 있습니다.

• 저충실도 - 세부 사항이 많지 않은 초기 단계 그림. 저충실도 와이어프레임은 손으로 그린 ​​스케치 또는 아이디어를 나타내는 선과 모양인 경우가 많습니다.
• 중간 충실도 - 더 많은 구성 요소 세부 정보를 표시하기 시작하고 콘텐츠 레이아웃 및 전체 페이지 구조에 중점을 둔 와이어프레임입니다.
• 고충실도 - 동작 특성과 콘텐츠 레이아웃에 중점을 둔 구성 요소의 더 세부적이고 더 높은 수준의 렌더링을 묘사하는 후기 단계(반복 후) 도면입니다.

디지털 디자인에서 와이어프레임의 진화는 또 다른 UX 결과물이자 결과물인 와이어플로입니다. 와이어플로는 와이어프레임과 순서도의 조합으로 UX 디자이너가 웹 앱과 같은 제품의 작업 흐름을 나타내는 상호 작용을 설명하고 따르기 위해 다른 목적을 위해 천천히 하나로 병합한 두 가지 아티팩트입니다.

디자이너가 와이어프레임에서 직면하는 문제는 사용자 여정을 전달하는 것입니다. 사용자 여정을 표시하는 더 복잡한 방법이 있지만 와이어프레임의 단순함에 포함시키는 경향이 있습니다. 이를 위한 유용한 도구는 와이어프레임 맵입니다.

와이어프레임 맵은 와이어프레임을 사용자 여정(또는 사용자 흐름)과 결합하여 와이어프레임을 사용하여 제품을 통한 사용자 여정을 보여줍니다.

최고의 와이어프레임 도구

디자이너는 사용할 와이어프레이밍 도구를 결정할 때 많은 선택권이 있습니다. 새로운 도구가 지속적으로 시장에 진입하므로 따라잡기가 어려울 수 있습니다. 다음은 찾아야 할 훌륭한 와이어프레임 도구의 몇 가지 특성입니다.

• 다양한 충실도(낮음에서 높음까지)를 생성하는 능력
• 사용하기 쉽고 자주 업데이트되는 안정적인 소프트웨어
• 추가 기능이 있는 기본 제공 템플릿, 기호 및 표준 UI 구성 요소

이 가이드의 일부 도구는 와이어프레이밍에 더 중점을 두고 있는 반면, 다른 도구는 와이어프레이밍과 프로토타이핑, 그리고 목업 기능 사이의 균형을 맞추려고 합니다. 하나의 도구를 다른 도구(또는 여러 도구를 함께 사용)보다 사용하도록 선택하는 것은 디자이너의 선호도에 달려 있습니다.

발사믹

Balsamiq는 사용 편의성과 상징적인 "손으로 그린" 모양으로 선호되는 사용이 간편한 저충실도 와이어프레이밍 도구입니다. 끌어서 놓기 편집기로 빠르고 쉽게 사용할 수 있는 사전 제작된 템플릿 세트와 함께 제공됩니다. 디자이너는 자신의 자산을 추가하고 레이아웃을 사용자 지정할 수 있습니다.

기본 프로토타이핑은 전체 화면 프레젠테이션 모드에서 프로젝트를 표시하거나 내보낸 PDF로 표시할 때 사용성 테스트를 위한 간단한 클릭 경험을 만들기 위해 목업을 연결하여 달성할 수 있습니다.

Balsamiq은 데스크톱 버전(Windows 및 Mac), 클라우드 서비스 또는 Google 드라이브, Confluence 및 JIRA용 플러그인으로 제공됩니다.

목업

Moqups는 와이어프레임에 중점을 두지만 프로토타이핑에도 사용할 수 있는 또 다른 창의적인 협업 도구입니다. Balsamiq과 달리 순전히 웹 기반이며 웹 및 모바일 애플리케이션용 와이어프레임을 만들기 위한 것입니다.

Moqups와 Balsamiq의 주요 차이점은 와이어프레임의 충실도입니다. Balsamiq이 "손으로 그린" 모양을 만드는 동안 Moqups는 iOS, Android 및 Bootstrap을 포함한 모바일 앱 및 웹 디자인을 위한 풀 컬러 스텐실 및 키트를 제공합니다.

Moqups는 몇 가지 다른 면에서 Balsamiq과 구별됩니다. 이 소프트웨어는 유한 개체 편집 및 페이지 관리를 허용하여 디자이너가 "마스터" 개체를 정의할 수 있는 기능을 제공하므로 반복 프로세스 동안 와이어프레임을 변경할 때 많은 시간을 절약할 수 있습니다.

예를 들어, 디자이너는 특정 크기, 모양 및 색상을 사용하여 마스터 버튼 개체를 만듭니다. 이 버튼은 와이어프레임 전체에서 여러 번 사용됩니다. 나중에 반복 프로세스에서 디자이너가 버튼의 색상을 변경해야 하는 경우 모든 단일 버튼 개체를 변경하는 대신 한 번만 변경할 수 있으며 모든 하위 버튼 개체가 즉시 영향을 받습니다.

피도코

Pidoco는 몇 가지 기본 상호 작용 기능이 있는 저충실도 결과물에 중점을 둔 최고의 와이어프레이밍 도구입니다. 또한 클라우드 기반이며 재사용 가능한 구성 요소를 사용하고 보다 강력한 클릭 연결 와이어프레임 환경으로 Balsamiq 및 Moqups와 구별됩니다.

Pidoco는 모바일 보기가 내장되어 있어 디자이너가 다양한 화면 크기에서 앱 페이지가 어떻게 보이는지 확인할 수 있기 때문에 모바일 앱 및 웹 디자인에 유용합니다. 또 다른 기본 제공 기능은 내보내기 및 사양 기능 입니다. 이를 통해 디자이너는 플러그인이나 확장 없이 와이어프레임에서 프로토타입/목업으로 이동할 수 있습니다.

Picoco는 모양과 느낌이 낮지만 일반적으로 더 복잡한 디자인 도구에서 볼 수 있는 몇 가지 기능을 포함합니다. 린 UX를 수행하고 더 짧은 피드백 주기로 빠르게 반복해야 하는 디자이너에게 적합합니다.

글리피

Gliffy는 Balsamiq 및 Mockups와 차별화되는 몇 가지 고유한 기능이 있는 중간 충실도 와이어프레이밍 도구입니다. 한 가지 고유한 기능은 와이어플로를 생성하는 기능입니다. Gliffy에는 스텐실, 마인드 맵 및 비즈니스 프로세스 모델링이 포함된 내장형 순서도 및 다이어그램 작성 기능이 있습니다.

다른 와이어프레임 도구와 마찬가지로 Gliffy는 모양, 아이콘의 라이브러리를 제공하며 기본적으로 Atlassian의 Confluence, Slack, Basecamp, Trello 및 WordPress에 와이어프레임을 공유하는 기능을 제공합니다.

이것은 비교적 새로운 UX 와이어프레임 디자인 도구이지만 정적 와이어프레임을 넘어 단순한 통합과 기능을 찾고 있는 전문 디자이너의 대규모 구독자 기반을 자랑합니다.

와이어프레임.cc

Wireframe.cc는 Balsamiq와 매우 유사한 기본 와이어프레임 도구입니다. 산만한 도구 모음과 아이콘이 많지 않은 깨끗한 인터페이스를 가지고 있습니다. 다른 많은 도구와 달리 마우스로 와이어프레임을 "스케치"할 수 있습니다.

Wireframe.cc는 스텐실 라이브러리와 깨끗하고 복잡하지 않은 개체 처리를 제공합니다. Wireframe.cc가 린 UX로 작업할 때 제공하는 유용한 요소는 빠르고 쉽게 피드백을 위해 공유할 수 있도록 각 와이어프레임 페이지에 대한 URL입니다.

순전히 저충실도 와이어프레이밍에 초점을 맞추므로 프로토타이핑이나 상호 작용 기능이 내장되어 있지 않습니다.

이상한

와이어프레임용으로 "Google 문서도구"라고 하는 Whimsical은 OmniGraffle 및 Visio와 같은 다이어그램 도구를 모방합니다. 주요 초점이 와이어프레임 및 순서도에 있기 때문에 프로토타이핑/모형에 초점을 맞추지 않으므로 와이어플로를 생성하기 위한 훌륭한 후보가 됩니다.

Gliffy와 마찬가지로 Whimsical은 중간 수준의 와이어프레임 도구이며 구성 가능한 요소(버튼, 입력, 확인란 등)의 대규모 라이브러리를 포함합니다.

동일한 와이어프레임 문서에서 동시에 무제한 공동 작업은 원격 설계 팀을 위한 훌륭한 기본 제공 기능입니다.

어도비 XD

Adobe XD는 간단한 인터페이스, 다른 Adobe 제품과의 긴밀한 연결, 사용 용이성, 플러그인 및 확장에 대한 의존도를 줄여주는 내장 기능으로 인해 최근 디자이너의 관심을 끌었습니다.

Adobe XD에서 와이어프레임을 구축하는 방법에는 두 가지가 있습니다. 선과 모양을 사용하여 개체와 요소를 만들거나 behance.net 및 XD 리소스와 같은 소스에서 미리 만들어진 UI 키트를 사용하여 만들 수 있습니다.

Adobe XD의 시간 절약 기능 중 하나는 "마스터" 구성 요소(Sketch에서는 기호라고 함)를 만드는 기능으로, 마스터에서 인스턴스화된 모든 구성 요소가 변경 사항을 상속하므로 변경할 때 유용합니다.

XD를 와이어프레이밍 도구로 사용할 때의 또 다른 이점은 마우스 클릭으로 프로토타이핑 모드로 전환할 수 있다는 것입니다. 프로토타이핑 모드는 XD에 내장되어 백그라운드에서 작동하므로 디자이너는 와이어프레임에서 프로토타입으로 이동할 때 시간을 낭비하지 않습니다.

스케치

UX/UI 디자이너를 위한 인기 있는 디자인 도구인 Sketch는 벡터 편집, 프로토타이핑 및 협업을 위한 플랫폼을 제공하며 기능을 확장하는 수백 개의 플러그인 라이브러리가 증가하고 있습니다.

Sketch의 와이어프레임은 키트/템플릿 및 그리기 도구를 사용하는 Adobe XD와 매우 유사합니다. Sketch는 한 번 정의하고 여러 번 사용할 수 있는 재사용 가능한 구성 요소(버튼 등)인 Symbol 을 광범위하게 사용합니다. 인스턴스화된 기호는 "마스터" 기호에 대한 변경 사항도 적용합니다. 이는 와이어프레이밍 프로세스 전반에 걸쳐 많은 변경이 필요한 경우가 많기 때문에 설계자에게 유리합니다.

Sketch를 통해 디자이너는 고품질 와이어프레임, 프로토타입 및 모형을 만들 수 있습니다. 클라우드 기반 앱이 아니며 잠재적인 단점 중 하나는 macOS에서만 작동한다는 것입니다.

UX핀

UXPin은 디자이너가 조건부 상호 작용, 변수 및 표현식을 코딩 할 수 있는 기능을 제공하는 대화형 상태, 논리 및 프로그래밍 구성 요소를 지원하는 최고의 와이어프레임 도구입니다.

UXPin은 와이어프레임을 훨씬 뛰어넘어 UI 구성 요소 라이브러리, 기호, 벡터 드로잉 도구 및 공동 편집을 사용한 프로토타이핑에 주로 중점을 둡니다.

Windows, macOS 및 클라우드/브라우저 버전이 있습니다. 고충실도 와이어프레이밍의 경우 UXPin은 Sketch 및 Adobe XD와 매우 유사하게 작동합니다. Balsamiq과 같은 드래그 앤 드롭 방식은 아니지만 단일 에코시스템 내에 머물고자 하는 디자이너를 위해 프로토타이핑과 목업을 한 단계 끌어올립니다.

마블

와이어프레임 및 프로토타이핑을 용이하게 하는 또 다른 인기 있는 디자인 도구인 Marvel은 디자이너에게 저충실도에서 고충실도 와이어프레임을 생성하기 위한 친숙한 드래그 앤 드롭 인터페이스를 제공합니다.

Marvel은 모든 자산이 포함되어 있으므로 추가 기능이나 확장이 필요하지 않습니다. 플랫폼은 완전히 클라우드 기반이므로 다른 설계 팀 구성원 또는 클라이언트와 와이어프레임을 빠르고 쉽게 공유할 수 있습니다.

디자이너가 와이어프레임을 위해 Marvel을 선택하는 이유 중 하나는 Jira, Sketch, Confluence, Dropbox, Slack 등과 같은 다른 플랫폼과의 통합입니다. 개발자, 원격 디자인 팀 및 클라이언트와의 협업을 위해 이 기능은 디자이너에게 많은 시간을 절약해 줍니다.

Marvel은 또한 펜과 종이 와이어프레임 스케치를 대화형 iPhone 및 Android 프로토타입으로 변환하는 데 도움이 되는 Pop이라는 제품을 보유하고 있습니다. Pop을 사용하면 디자이너가 스케치 사진을 찍어 대화형 와이어프레임으로 변환할 수 있습니다.

액셔 RP

Axure RP는 오랫동안 사용되어 왔으며 정적 와이어프레임(및 고도의 대화형 프로토타입)을 생성하는 데 훌륭한 도구입니다. Windows와 macOS 모두에서 작동하지만 클라우드 기반이 아닙니다.

와이어프레임은 끌어서 놓기 구성 요소의 방대한 라이브러리를 사용하여 수행할 수 있지만 Axure RP는 와이어프레임을 훨씬 능가하는 복잡한 도구입니다. Axure RP의 프로그래밍 방식 기능을 사용하여 설계자는 완전히 작동하는 응용 프로그램을 미러링하는 기능으로 고급 프로토타입을 만들 수 있습니다.

Axure의 높은 학습 곡선을 감안할 때 정적 와이어프레임에만 사용하는 것은 이치에 맞지 않습니다. 그러나 목표가 고도로 세련되고 기능적인 프로토타입을 생산하는 것이라면 제품 디자이너에게 완벽한 도구가 될 것입니다.

Toptal 디자이너가 선호하는 와이어프레임 도구

우리는 전문 디자이너가 사용하는 와이어프레임 도구와 그 이유를 알아보기 위해 일부 Toptal 디자이너에게 연락했습니다. 그들이 말해야 할 내용은 다음과 같습니다.

“제가 가장 좋아하는 것은 Adobe XD와 UXPin입니다. 빠르게 와이어프레임을 만들고 아이디어를 테스트하기 쉽기 때문에 XD를 즐겨찾기로 선택하기 시작했습니다. 거기에서 실제로 동일한 플랫폼에서 디자인을 시작하고 프로토타입을 만들 수도 있습니다.” - 마이클 크레이그

“제가 가장 좋아하는 것은 Pop이 너무 빠르기 때문입니다. 어쨌든 저는 항상 와이어프레임을 종이에 그리므로 잘 작동하고 아무것도 처리할 필요가 없습니다. 나는 또한 그것이 매우 명백하게 로우파이(lo-fi)이기 때문에 '솔루션과 사랑에 빠지지 말라'는 것 전체에 좋다는 것을 알게 되었습니다.” - 니콜라 러쉬튼

“저는 디자인 작업에 거의 항상 Axure를 사용합니다. 매우 복잡하며 포괄적인 설계 작업을 위한 매우 과소평가된 도구입니다." - Andi Omtvedt

“저는 더 이상 실제로 와이어프레임 자체를 사용하지 않습니다. 도구가 저충실도 프로토타입을 생성할 수 있을 만큼 충분히 강력하여 초기 와이어프레임을 더 나은 시각적 효과와 거의 결합할 수 있다고 생각하기 때문입니다. 저는 올해 1월부터 Framer X를 채택했으며 매우 마음에 듭니다.” - 찰리 윌리엄스

요약

정교한 프로토타입을 생산할 수 있는 능력을 감안할 때 와이어프레이밍이 여전히 관련이 있습니까? 일부 전문 디자이너는 와이어프레임이 과거의 유물이라고 주장하는 반면 다른 디자이너는 디자인 프로세스에서 와이어프레임이 계속해서 중요하다고 주장합니다.

오늘날에는 설계 프로세스를 용이하게 하는 와이어프레임 도구가 많이 있습니다. 일부 제품은 와이어프레이밍으로 시작하지만 프로토타입 기능을 포함하는 하이브리드 제품으로 추세가 이동하고 있는 동안에도 순수하게 와이어프레이밍에 계속 초점을 맞추고 있으며 많은 경우 완벽하게 작동하는 목업을 생산합니다.

비록 저충실도에서 중급 또는 고충실도로 발전했지만 Wireframing은 확실히 사라지지 않을 것입니다.

Toptal Design 블로그에 대한 추가 정보:

• 와이어프레임 매핑: 스코프 크리프를 피하는 방법
• 와이어프레임에 죽음. 고화질로 바로!
• 디자인 도구 대결 – Adobe XD 대 Sketch(2019)
• 이 최고의 UX 도구로 기술을 마스터하세요
• 최고의 디자이너가 사용하는 10가지 UX 결과물