와이어 프레임 만드는 방법, 순서

와이어 프레임을 만드는 방법과 순서에 대해 알아보고 피그마 등의 관련 프로그램도 소개합니다. 또한 구현 가능한 와이어프레임 작성을 위해 웹 표준, 모바일 운영체제 가이드라인 등의 정보도 모아보았습니다.

 

와이어 프레임의 시작 단계에서는 러프 스케치를 한 것을 올려놓고 어떻게 작동될지 살펴보면서, 실제 서비스에서 콘텐츠 간에 이동을 하는 것처럼 테스트해볼 수 있습니다.

 

그리고 점점 프로토타이핑 테스트를 하면서, 수립된 디자인을 제작해 완성품으로 만들어 갈 수 있습니다.

 

이전 글에서 와이어 플로우 차트에 대해 언급한 적이 있습니다. 와이어 프레임을 만들 수 있고 플로우 차트에 대한 이해가 있다면, 플로우 차트와 와이어 프레임을 혼합하여 만드는 와이어 플로우 차트를 만들 수 있습니다.

 

개인적으로 한 파일에 전체 서비스의 흐름, 실제 디자인이 한 눈에 볼 수 있어 추천하는 방식이니 이 글을 보신 뒤에 한 번 살펴보시는 것을 추천드립니다.

다시 본론으로 돌아와서, 와이어 프레임을 만드는 방법과 순서 등에 대해 설명해보도록 하겠습니다.

0. 와이어 프레임이란?

와이어 프레임은 서비스에 대한 아이디어를 러프하게 화면 단위로 구성한 것입니다.

와이어 프레임을 시작할 때에 주의점은, 초기 단계에서는 완성도 있게 디자인을 제작하는게 아니라는 점입니다.

 

처음에는 어디까지나 전체적인 흐름을 보는 것이기 때문에, 화면 단위로 UI를 설계해서 각 화면의 설계 화면 간의 관계 이동을 파악할 수 있을 정도면 좋습니다.

 

예전에는 와이어 프레임이 서비스의 흐름을 간략하게 알아보는 것이었다면, 최근에는 와이어 프레임을 점점 높은 퀄리티로 발전시키면서 그 자체로 최종 완성품으로 만들 수 있습니다.

 

프로토타이핑을 반복하면서, 오류를 발견하거나 필요한 기능을 놓치지 않으면서 작업을 할 수 있습니다. 

 

 

1. 와이어 프레임 작성 방식 

와이어프레임을 작성하려면 손으로 그려서 스케치를 하거나, 파워포인트로 작성하거나, 스케치업&XD&피그마 등의 전문 프로그램을 이용해도 됩니다.

그러나 핸드 드로잉은 수정이 어렵고, 가독성이 떨어집니다. 또한 디자이너가 구태여 파워포인트를 이용할 필요는 없겠습니다.

 

그러므로 관련 소프트웨어를 통해 와이어 프레임을 작성하는 것을 추천드립니다.

 

관련 프로그램 중에서 가장 추천하는 것은 피그마입니다. 현업자들이 점점 피그마로 옮기는 추세이며 기능과 확장성, 환경이 다른 프로그램과 비교할 수 없을 만큼 좋기 때문입니다.

 

피그마에 대해서 궁금하시다면, 이 블로그의 피그마 카테고리에 소개와 사용법들을 정리해두었으니 참고하시면 되겠습니다.

2. 와이어 프레임 작성 순서

 

그렇다면 와이어프레임을 어떤 순서로 작성해야할까요?

 

1. 처음에는 정보 구조 설계도를 바탕으로 대략적인 페이지부터 그립니다.

 

2. 모든 화면을 스케치한 다음, 기본적인 상호작용 플로우를 만들면 전체적인 흐름을 파악할 수 있습니다.

3. 실제로 화면을 그려보면서 사용자의 행동 흐름을 예측하고, 이에 따라 불필요한 것들은 배제하고 필요한 것들을 보완할 수 있습니다.

 
4. 이제 동선과 레이아웃을 정의하고, 전체적인 룩 앤 필 를 고려해서 페이지별 콘텐츠의 크기를 크기와 위치를 설정합니다. 

여기까지도 디자인 디테일은 집착하지 않아도 됩니다. 페이지의 내용을 이해할 수 있기만 하면 됩니다. 

전체 서비스를 명확하게 예측하고, 시각적인 방향성과 함께 서비스가 어떻게 동작하고 어떻게 상호작용하는지 예측하는 것이 먼저입니다.

 

5. 이후에 개별적인 화면 별 디자인과 세부 디자인을 할 수 있습니다.

3. 구현이 가능한 디자인 하기

웹을 만들기 위해 와이어 프레임을 작성할 때는 웹 표준 가이드 라인을 준수해야하고, 모바일 앱의 경우에는 iOS ·안드로이드 모바일 운영체제의 가이드 라인을 준수해야 합니다.

 

왜냐하면 이러한 가이드 라인에 부합하지 않는 디자인은 실제로 퍼블리셔나 프로그래머가 구현할 수가 없고, 결국 서비스에 적용할 수 없게 됩니다.

 

구현이 가능한 디자인을 제시하기 위해서는 이러한 부분을 꼭 숙지하고 작업해야 하겠습니다.

 

만약 모바일 네이티브 앱을 개발한다면, 좋은 사용자 경험과 불필요한 수정을 방지하기 위해서  iOS와 안드로이드 운영체제 별 가이드라인을 준수하는 것이 좋습니다.

 

그러나 시간과 비용이 만만치 않기 때문에, 최근에는 두 운영 체제의 UI를 동일하게 구현하는 경우도 많습니다.

 

이에 대해서는 네이티브, 하이브리드 등의 모바일 앱 제작 방식에 대해 정리한 글을 참고하시기 바랍니다.

 

 

이상으로 와이어프레임을 만드는 방법과 구현이 가능한 와이어프레임 디자인을 하기 위해 알아야할 것들에 대해 알아보았습니다.

 

프로토타이핑을 계속하면서 기존의 앱을 참고하면, 사용자에게 익숙한 화면을 구성할 수 있을 것입니다. 읽어주셔서 감사합니다.