UI & UX, UX & Design

와이어프레임과 프로토타입 구별하기

와이어프레임과 프로토타입은 실제 디자인이 구현되기 전에 진행해야 하는 단계다. 웹·앱이 출시되기 위해 반드시 거쳐야 하는 관문이기도 하다. 실무에서는 종종 두 개념을 혼동해서 사용하기도 하지만 와이어프레임과 프로토타입은 정확히 구별해야 한다. 제작되는 시기와 용도, 의미에서 큰 차이가 있기 때문이다.

와이어프레임

와이어프레임이란 선(Wire)으로 틀(Frame)을 잡는다는 뜻이다. 건축에서의 설계도면과 유사하다. 우리는 스케치를 보며 각 공간 구조와 용도 등을 상상할 수 있지만 완성된 디자인을 떠올리기는 어렵다. 이는 설계도면의 역할이 아니기 때문이다. UX에서의 와이어프레임 역시 크게 다르지 않다.

건축 설계도면

와이어프레임은 페이지별로 레이아웃을 설계하는 것이 좋다. 화면 간 흐름 파악이 쉽기 때문이다. 만약 한 장에 모든 레이아웃을 포함한다면 협업자에게 어려움을 줄 수 있다. 와이어프레임에는 ‘내용’, ‘구조’, ‘흐름’, ‘기능’ 등이 포함된다. 제작 방법에 제한은 없지만, 실무에서는 ‘손그림’이나 ‘피피티’같은 가벼운 형식을 선호한다.

앱에 새 기능을 추가해야 하는 상황을 가정해보자. 작업 초기 이해관계자들은 서로 다른 비전을 갖고 있을 가능성이 크다. 그리고 시간은 언제나 한정적이다. 처음부터 제작비용을 많이 투입한 산출물을 통해 의사결정하는 것은 효율적이지 못하다. 큰 방향성 조율은 제작이 간단한 와이어프레임으로 합의해 나가는 것이 경제적이다.

@UX Collective. Winnie Nguyen

와이어프레임은 내용을 표시할 ‘텍스트’와 이미지를 표시할 ‘프레임’ 위주로 제작한다. 프레임에는 X를 넣는 것이 일반적이다. 그 외 요소는 최대한 추상화하고 ‘색상’으로 중요 부분을 강조한다. 이 단계에서 협업자들과 충분히 피드백을 나눌 수 있다면, 앞으로의 커뮤니케이션 수준 또한 기대해 볼만하다. 현재는 와이어프레임을 할 수 있게끔 도와주는 웹 페이지도 많이 생겼으니 상황에 맞게 활용해보는 것을 추천한다.

프로토타입

프로토타입은 와이어프레임과 달리 실제와 비슷하게 구현된 상태를 뜻한다. 건축 모형을 만드는 단계와 유사하다. 이때 구현되는 단계에 따라 ‘피델리티 레벨’을 나눌 수 있다. 아래처럼 구체적 이미지 없이 간단한 인터랙션만 테스트할 수 있는 단계를 ‘로우 피델리티 프로토타입’이라고 한다. 주로 페이지 간 어색한 흐름을 잡아내고, 기술을 검토한다.

기초적인 인터랙션만 갖춘 ‘로우 피델리티 프로토타입’

‘하이 피델리티 프로토타입’은 실제와 유사한 모습을 보여준다. 상용화될 이미지를 통해 프로덕트 톤 앤 매너를 파악할 수 있다. 경쟁사와의 실질적 비교도 가능하다. 로우 피델리티 프로토타입과 달리 높은 수준의 인터랙션을 구현하기 때문이다. 이제부터 본격적인 ‘사용성’ 검토도 할 수 있다.

구체적 인터랙션을 갖춘 ‘하이 피델리티 프로토타입’ @babystory

하이 피델리티 프로토타입을 제작하는 이유는 ‘개발 비용’을 낮추고 수준 높은 피드백을 얻기 위해서다. 때에 따라 프로토타입만으로 포커스 그룹 인터뷰를 통해 시장 가능성을 검토하기도 한다. 만약 이 단계에서 문제점이 발생하면 빠르게 프로토타입만 수정해 테스트할 수 있다.

이것이 가능하게 된 계기는 프로토타입 툴의 기술 발전과 관련 있다. 과거에는 사용성 테스트를 위해 개발이 불가피했다. 이는 막대한 비용을 초래했다. 최종 산출물이 프로토타입 없는 상태로 시장에 출시되는 경우도 비일비재했다. 현재는 과거에 비해 각종 툴들을 통한 프로토타입 제작이 쉬워졌다. 현업에서 많이 쓰는 하이 피델리티 프로토타입 툴로는 ‘오리가미(Origami)’와 ‘프로토파이(ProtoPie)’, ‘프레이머(Framer)’등이 있다.

‘오리가미(Origami)’는 페이스북사의 프로토타입 툴이다. 코딩 없이 각 요소와 효과를 화면상에 배치해 선으로 연결한다(Quartz Composer의 Patch 개념과 유사하다). 엔지니어가 동작을 ‘수치’로 확인할 수 있다는 장점이 있다. ‘프로토파이(ProtoPie)’는 디자이너에게 오리가미보다 조금 더 익숙한 인터페이스를 제공한다. 현실의 물리성을 반영한 ‘트리거(Trigger)’ 개념을 통해 프로토타입을 코드 없이 제작할 수 있다.

‘프레이머(Framer)’의 경우 ‘커피스크립트(CoffeeScript)’를 조작해 동작을 추가하는 방식이다. 언어를 이해해야 한다는 장벽이 존재하지만, 이 부분이 극복된다면 구현하지 못할 프로토타입이 없을 만큼 자유도가 높은 툴이기도 하다. 이외에도 다양한 프로토타입 툴이 있으니 상황에 맞게 활용하면 좋다.


[참고자료]

https://www.uxpin.com/
UXPin – UI Design and Prototyping Tool

https://moqups.com/
Online Mockup, Wireframe & UI Prototyping Tool · Moqups

https://origami.design/
Origami Studio — Design Prototyping

https://www.protopie.io/
ProtoPie: the interactive digital prototyping tool

https://www.framer.com/
Framer: The prototyping tool for teams

Comments
  • digitla-insight-202102-offline-ads-does-interactive
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts