웹페이지 기획 - 와이어프레임 I 스토리보드 I 프로토타입 - 와이어프레임 편

와이어프레임과 프로토타입은 UX디자인과 연결된 두 가지 대표적인 디자인 산출물입니다.

현 포스팅에서는 와이어프레임과 프로토타입의 기능과 프로세스 그리고 유용성에 대해서 기본적인 내용을 준비하도록 하겠습니다. 

 

와이어프레임이란?

 

와이어프레임(골격)은 간단한 모양만을 사용해 인터페이스를 시각적으로 묘사한 것입니다. 

와이어프레임은 구조와 콘텐츠 그리고 기능을 설명하는데 사용합니다. 

아래의 그림이 와이어프레임의 좋은 예시라고 할 수 있습니다. 

와이어프레임 예시 - Flickr 출처.

와이어프레임을 통해 페이지들의 구성방식 (구조), 그리고 페이지에 각각 표시될 내용들 (콘텐츠) 그리고 해당 인터페이스들의 작동방식(기능)을 설명 할 수 있습니다. 

와이어프레임을 통해 디자인의 현재상태와 향후 디자인 방향성을 공유할 수 있습니다. 

 

사실 와이어프레임과 실제 완성된 제품은 전혀 다른 모습이고 와이어프레임으로 디자인 요소가 포함 안되어있기 때문에 시각적 특징은 매우 제한적입니다.  

위의 그림과 같이 이미지 영상 등 디자인 요소가 연결된 개체에는 x표시된 상자 또는 텍스트로 표시합니다. 

 

와이어프레임 제작 목적

와이어프레임을 제작하는 주요 목적은 세부묘사 없이 전체적인 디자인을 빠른 시일 내 할 수 있다는 장점이 있습니다. 

또한 와이어프레임을 제작하는데 큰 부담이 없으며 세부 사항에 대한 작업을 진행하기 전에 핵심적인 디자인 의사 결정에 집중이 가능하다는 장점이 있습니다. 

 

와이어프레임 제작 시기

와이어프레임은 홈페이지 제작 전 디자인 프로세스 초기단계에서 수행되어야 하며 (당연하죠?) 만약 팀 회의 결과 문제가 발견될 경우, 이 단계에서 큰 틀을 변경하는게 가능합니다. 구축도 빠르고 비용도 저렴하므로 기획자는 여러 시안을 준비할 수 있는 시간도 있을 것 입니다. 

 

와이어프레임 제작 예시

먼저 Header부분, Body 부분, Footer부분을 만들어봅니다. (HTML 부분과 유사)

또한 아래 그림과 같이 버튼과 메뉴 그리고 상태들을 와이어프레임에 넣을 수 있습니다. 

여기서 중요한건 색상이나 글씨체는 중요하지 않습니다! 편안하게 만드세요!!

 

와이어프레임의 효과

팀원에게 홈페이지 기획건을 물을 때 어느정도 디자인이 완성된 데이터를 보여줄때와 와이어프레임을 보여줄 때 매우 다른 응답을 얻습니다. (생각해봅시다)

와이어프레임의 경우 실제로 작동하는 방식들 화면 연결 방식, 페이지 구조에 대해서 말을 할 수 밖에 없습니다. 디자인 요소가 빠져있기때문에 오히려 팀원들이 기능부분에 더 집중 할 수 있는 것이지요. 반면 색상이나 글씨체 디자인이 들어간 페이지로 설명하는 경우 디자인 요소에 가려 기능부분은 조금 덜 집중하게 될 것 입니다. 

 

 

App 와이어프레임 예시

이와 같이 와이어프레임에 대해서 알아보았습니다. 

다음 포스팅에서는 와이어프레임에 이은 스토리보드와 프로토타입에 대해서 알아보도록 하겠습니다.