와이어프레임과 프로토타입 구별하기
피델리티 레벨과 용도
와이어프레임과 프로토타입은 실제 디자인이 구현되기 전 단계다. 웹/앱이 출시되기 위해 반드시 거쳐야 하는 관문이기도 하다. 종종 실무에서는 두 개념을 혼동해서 사용한다. 하지만 와이어프레임과 프로토타입은 정확히 구별할 필요가 있다. 제작되는 시기와 용도, 의미에서 큰 차이가 나기 때문이다.
와이어프레임
와이어프레임이란 선(Wire)으로 틀(Frame)을 잡는다는 뜻이다. 건축에서의 설계도면과 유사하다. 우리는 스케치를 보며 각 공간 구조와 용도 등을 상상할 수 있다. 하지만 완성된 디자인을 떠올리기란 사실상 어렵다. 이는 설계도면의 역할이 아니기 때문이다. UX에서의 와이어프레임 역시 크게 다르지 않다.
건축 설계도면와이어프레임은 페이지 별로 레이아웃을 설계하는 것이 좋다. 화면 간 흐름 파악이 쉽기 때문이다. 만약 한 장에 모든 레이아웃이 포함된다면 협업자에게 어려움을 줄 수 있다. 와이어프레임에는 '내용', '구조', '흐름', '기능' 등이 포함된다. 제작 방법에 제한은 없지만, 실무에서는 '손그림'이나 '피피티'같은 가벼운 형식을 선호한다.
앱에 새 기능을 추가해야 하는 상황을 가정해보자. 작업 초기 이해관계자들은 서로 다른 비전을 갖고 있을 가능성이 크다. 그리고 시간은 언제나 한정적이다. 처음부터 제작비용이 많이 들어간 산출물을 통해 의사결정하는 것은 비효율적이다. 큰 방향성 조율은 제작이 간단한 와이어프레임으로 합의해 나가는 것이 경제적이다.
@UX Collective. Winnie Nguyen와이어 프레임은 내용을 표시할 '텍스트'와 이미지를 표시할 '프레임' 위주로 제작한다. 프레임에는 X를 넣는 것이 일반적이다. 그 외 요소는 최대한 추상화하고 ‘색상’으로 중요 부분을 강조한다. 이 단계에서 협업자들과 충분한 피드백을 가질 수 있다면, 앞으로 커뮤니케이션 수준 또한 기대해 볼만 할 것이다.
현재는 와이어프레임을 할 수 있게끔 도와주는 웹 페이지도 많이 생겼으니 상황에 맞게 활용해보는 것을 추천한다.
[참고자료]
프로토타입
프로토타입은 와이어프레임과 달리 실제와 비슷하게 구현된 상태를 뜻한다. 건축 모형을 만드는 단계와 유사하다. 이때 구현되는 단계에 따라 ‘피델리티 레벨’을 나눌 수 있다. 아래처럼 구체적 이미지 없이 간단한 인터렉션만 테스트해볼 수 있는 단계를 '로우 피델리티 프로토타입'이라고 한다. 주로 페이지 간 어색한 흐름을 잡아내고, 기술을 검토한다.
기초적인 인터렉션만 갖춘 '로우 피델리티 프로토타입''하이 피델리티 프로토타입'은 실제와 거의 유사한 모습을 보여준다. 상용화될 이미지를 통해 프로덕트 톤 앤 매너를 파악할 수 있다. 경쟁사와의 실질적 비교도 가능해진다. 로우 피델리티 프로토타입과 달리 높은 수준의 인터렉션을 구현하기 때문이다. 이제부터 본격적인 '사용성' 검토가 가능하다.
구체적 인터렉션을 갖춘 '하이 피델리티 프로토타입' @babystory하이 피델리티 프로토타입을 제작하는 이유는 '개발 비용'을 낮추고 수준 높은 피드백을 얻기 위함이다. 때에 따라 프로토타입만으로 포커스 그룹 인터뷰를 통해 시장 가능성을 검토하기도 한다. 만약 이 단계에서 문제점이 발생하면 빠르게 프로토타입만 수정해 테스트해 볼 수 있다.
이러한 것이 가능하게 된 계기는 프로토타입 툴의 기술 발전과 관계가 있다. 과거에는 사용성 테스트를 위해 개발이 불가피했다. 이는 막대한 비용이었다. 최종 산출물이 프로토타입 없는 상태로 시장에 출시되는 경우도 비일비재했다. 현재는 과거에 비해 각종 툴들을 통한 프로토타입 제작이 쉬워졌다. 현업에서 많이 쓰는 하이 피델리티 프로토타입 툴로는 'Origami'와 'ProtoPie', 'Framer'등이 있다.
Origami는 페이스북사의 프로토타입 툴이다. 코딩 없이 각 요소와 효과를 화면상에 배치해 선으로 연결한다.(Quartz Composer의 Patch 개념과 유사하다.) 엔지니어가 동작을 '수치'로 확인할 수 있다는 장점이 있다. 'ProtoPie'는 조금 더 디자이너에게 익숙한 인터페이스를 제공한다. 현실의 물리성을 반영한 'Trigger'라는 개념을 통해 프로토타입을 코드 없이 제작할 수 있다. 'Framer'의 경우 'CoffeeScript'를 조작해 동작을 추가하는 방식이다. 언어를 이해해야 한다는 장벽이 존재한다. 만약 이 부분이 극복된다면 구현하지 못할 프로토타입이 없을 만큼 자유도가 높은 툴이기도 하다. 이외에도 다양한 프로토타입 툴들이 있으니 상황에 맞게 활용하면 좋을 것 같다.
[참고자료]
'와이어프레임과 프로토타입 구별하기' (끝)
