UX 디자인의 와이어프레임 - 무엇, 왜, 언제, 어떻게? (Wireframes in UX Design — What, Why, When and How?)

이 글은 Parveen YadavWireframes in UX Design — What, Why, When and How?글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다


presentation
Image credits: urban river
시작하기 전에 몇 가지 질문을 드리고 싶습니다.
웹 페이지에서 4열 그리드(four-column grid) 또는 5열(five-column)을 선택하려면 어떻게 해야 합니까? ...이미지 그리고 영상을 어디에다 넣어야 합니까? ... 디자인을 하면서 가로로 스크롤할 수 있는 아이템이나 세로 리스트를 선택하려면 어떻게 해야 할까요? ... 네 개 또는 다섯 개의 구성 요소를 네비게이션 바에 넣으려면 어떻게 해야 합니까?
이 글에서, 저는 여러분께 와이어프레이밍(Wireframing)이라는 개념을 간단히 소개함으로써 이 모든 질문들(그리고 그 이상)에 답하고자 합니다.

와이어프레이밍이란 무엇입니까?

와이어프레이밍(Wireframing)은 와이어프레임을 만들어 구조적인 수준에서 웹 사이트 서비스를 설계하는 방법입니다.

그렇다면 와이어프레임(wireframe)은 무엇일까요?

usability.gov에 따르면, "와이어프레임은 콘텐츠의 공간 할당 및 우선 순위 지정, 사용 가능한 기능 및 의도된 동작에 초점을 맞춘 페이지 인터페이스의 2차원 그림입니다."
presentation
A simple wireframe example for a webpage
간단히 말해, 특정 페이지나 화면에 어떤 요소가 존재하는지 보여주는 페이지나 화면의 레이아웃입니다. 웹 페이지의 골격 프레임워크로 간주합니다.
위의 이미지에서 색상, 스타일 또는 그래픽이 포함되지 않은 것을 알 수 있습니다. 색이나 시각적 요소가 없는 이유는 주요 초점은 기능성, 주요 요소 배치 및 사용자가 이러한 요소와 상호 작용하는 방식을 이해하는 데 있기 때문입니다.

와이어프레임이 중요한 이유는 무엇입니까?

단순히 와이어프레이밍(wireframing)을 사용하면 많은 시간을 절약할 수 있기 때문입니다! 와이어프레임(wireframe)은 초기 설계 프로세스에서 사용되므로 다양한 시각적 요소를 사용하여 최종 모형을 변경하는 대신 와이어프레이밍(wireframing)밍 단계에서 변경하거나 피드백을 구현하는 것이 훨씬 쉽습니다.
와이어프레임(wireframe)을 사용하면 페이지의 기능을 매핑하고, 문제를 조기에 파악하며, 나중에 수정할 때 시간을 절약할 수 있습니다.
와이어프레임(wireframe)은 가용성을 전면에 내세웁니다. 디자이너는 와이어프레임부터 프로토타입, 최종 결과물까지 개발 프로세스 전반에 걸쳐 디자인 설계의 사용성을 측정하는 경향이 있습니다.
"와이어프레임(wireframe)은 디자인 설계 과정에서 청사진 없이 집을 짓지 않듯이 건너뛰어서는 안 될 청사진과 같습니다."
디자인 설계에 바로 뛰어들 때 최종 사용자의 사용 가능성과 기능에 대해 잊어버리는 경우가 있습니다. 색상, 이미지 및 기타 세부 정보를 제거하면 페이지에 있는 각 요소의 레이아웃과 기능만 생각할 수 있습니다. 최고의 사용자 환경을 위해 필요한 구조에만 초점을 맞출 것입니다.
효율성이 가장 가능성이 높은 여러분의 목표라면, 와이어프레밍은 여러분이 시작해야 할 부분입니다.

와이어프레임 유형들입니다.

두 가지 주요 유형의 와이어프레임은 다음과 같습니다.
  • 낮은 충실도의 와이어프레임 또는 로우파이(Lo-Fi)입니다.
  • 하이파이(Hi-Fi)라고도 하는 고화질 와이어프레임입니다.
낮은 충실도(Low-Fidelity )의 와이어프레임은 일반적으로 대략적인 용지 스케치이며 가장 기본적인 내용과 비주얼을 포함하며 일반적으로 정적(상호화적이지 않음-not interactive)입니다.
presentation
Example of a low-fidelity wireframe
반면, 고충실(high­-fidelity)도 와이어프레임은 매우 상세하며 일반적으로 저충실성 이전 제품에서 누락된 세부 정보를 가지고 있습니다.
presentation
Example of a high-fidelity wireframe
Lo-fi는 훨씬 더 많은 시간이 걸리는 고충실성에 비해 빠르고 쉽게 만들 수 있습니다.

와이어프레임은 언제 만들어야 됩니까?

와이어프레임은 일반적으로 검색 단계(discovery phase)를 완료하고 사용자의 목표와 동기에 대한 충분한 정보를 수집한 후에 유용합니다. 또한 사이트맵(sitemap)을 생성하여 수행할 수 있는 웹 사이트의 구조를 이해해야 합니다.
그러나 검색 프로세스( discovery process) 중에 가능한 다른 기능 또는 다른 기능 옵션을 탐색하려는 경우 이 단계에서도 낮은 충실도(low-fidelity)의 와이어프레임이 도움이 될 수 있습니다. 와이어프레임에는 그렇게 단단하고 빠른 규칙이나 고정된 순서가 없습니다.

와이어프레임을 만드는 방법은 무엇입니까?

와이어프레임 소프트웨어/툴에 대해 많은 금액을 지불해야 합니까? 아니요! 저를 믿어요! 대부분의 경우 펜과 종이 wireframes 이 아주 좋습니다. 디지털 와이어프레임만큼 빠르고 효과적입니다. 대략적인 스케치는 아이디어를 전달하고 흐름/구조를 쉽게 이해할 수 있습니다.
대략적인 스케치와 종이 와이어프레임 외에 사용할 와이어프레임 도구를 결정하려는 경우 디지털 방식으로 만들 수도 있습니다. 와이어프레이밍(wireframing)을 빠르고 쉽게 만드는 다양한 와이어프레밍 도구와 앱이 있습니다. 시장에서 사용할 수 있는 툴은 다음과 같습니다.
Balsamiq
Invison
MarvelApp
Axure
그리고 더 많은 것들을요.
presentation
Wireframe created in Balsamiq
스케치 및 Adobe XD를 사용하여 와이어프레임을 생성할 수도 있습니다.
와이어프레이밍(Wireframing)은 UX 프로세스의 필수 요소입니다. 이 과정을 통해 저는 팀이 동일한 페이지에 있는지 확인할 수 있을 뿐만 아니라, 시각적 디자인에 깊이 뛰어들기 전에 목표 고객과 함께 테스트하고 피드백을 수집할 수 있습니다.
와이어프레임(wireframes)을 사용하면 팀에게 아이디어를 더 쉽게 전달하고 설계가 응답성을 염두에 두고 어떻게 작동하는지 알 수 있습니다.
그러니 어서 와이어프레이밍(wireframing)을 시작하세요!

이 글은 번역 글입니다. 원본 링크입니다.



안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp