와이어 프레임 작성

와이어 프레임 작성

와이어 프레임의 개념

와이어 프레임(wire frame)이란 실제로 디자인을 진행하기 전에 화면에 표시될 구성, 정보 체계, 기능, 콘텐츠에 대한 전체적 레이아웃을 간단한 선(wire)으로 단순하게 표현한 스케 치를 의미하며, 색상, 타이포그래피, 이미지 등의 정보를 최소화하여 도식(schematic), 청사 진, 프로토타입(prototype) 형식으로 보여 줄 수 있다. 와이어 프레임은 그래픽 요소나 시 각적 요소의 표현보다는 계층 요소의 구현을 중심으로 표현해야 한다

와이어 프레임 작성

와이어 프레임을 작성할 때에는 웹 브라우저, 모바일 웹 등 다양한 매체의 화면 비율을 고려하여 작성하며, 콘텐츠의 세부 내용과 디자인적 요소는 최대한 배제하고 대략적인 페 이지를 스케치한다. 이전 모듈에서 선행된 정보 설계를 바탕으로 모든 화면을 스케치하며, 화면을 구성하는 각 요소에 대한 기능과 설명, 서비스 흐름 등을 간략하게 적어 놓으면 전체 페이지를 이해하는 데 도움이 된다. 기본적인 스케치가 끝나면 불필요한 인터페이스 요소와 기능에 대하여 다시 한 번 점검하 여 서비스 흐름을 재정비하는 것이 좋으며, 페이지의 전반적인 콘셉트와 레이아웃, 그리드 를 고려하여 각 시각 인터페이스 요소의 위치와 크기를 배치한다. 이때, 시각 인터페이스 요소를 세부적으로 묘사할 필요는 없으며, 페이지 내용의 전체적 흐름과 서비스를 파악할 수 있을 정도로 작성하면 된다

와이어 프레임 작성을 위한 도구

과거에 와이어 프레임을 작성할 때에는 주로 핸드 드로잉을 하거나 파워포인트를 이용하 였지만, 최근에는 다양한 인터페이스 화면 비율을 지원하는 와이어 프레임 모크업 툴 (mockup tool)이 증가함에 따라 제작 환경에 따른 와이어 프레임 작성이 용이해졌다.

핸드 드로잉

종이와 펜을 이용하여 손으로 자유롭게 그린다. 종이는 무선 노트를 이용할 수도 있지만, 가로세로 격자선이 그어진 모눈종이를 사용하는 것이 레이아웃을 잡거나 구성 요소를 배 치하기에 편리하다. 최근에는 웹 브라우저와 모바일 기기 프레임이 프린트되어 있는 스케치 노트, 다양한 기 능 버튼이 새겨진 모바일 기기별 스텐실(stencil), 픽셀 자 등이 출시되어 더욱 편리하게 핸드 드로잉을 할 수 있다. 최근에는 웹 브라우저와 모바일 기기 프레임이 프린트되어 있 는 스케치 노트, 다양한 기능 버튼이 새겨진 모바일 기기별 스텐실(stencil), 픽셀 자 등이 출시되어 더욱 편리하게 핸드 드로잉을 할 수 있다.

모크업 툴

와이어 프레임을 위한 모크업 툴은 웹뿐만 아니라 태블릿 PC, 모바일의 화면 비율을 제공 하기 때문에, 다양한 시각 인터페이스 환경에 맞게 와이어 프레임을 작성할 수 있다. 와이 어 프레임 전용 모크업 툴을 이용하거나, 문서 작성 툴에서 제공하는 모크업 기능을 이용 하여 작성할 수 있다

기타

이 밖에도 벡터 전용 프로그램이나 문서 전용 프로그램 등 자신이 생각하는 아이디어를 적절히 구현할 수 있는 프로그램을 이용하여 와이어 프레임을 제작해도 무방하다.