[웹기획]4단계 와이어프레임(UI/UX)

와이어프레임은 기획서의 최종 산출물이라고 할 수 있다. 와이어프레임은 팀내에서 빠른 의사 결정을 하기 위한 도구이며, 앞에 설명한 요구사항 정의서, 기능 정의서, 플로우차트는 완성도 높은 와이어프레임을 만들기 위해 하는 작업이라고 할 수 있다.

와이어프레임이란?

와이어프레임(’골격’이라고도 함)은 제품을 구성하는 서로 다른 레이아웃을 정적인 로우 피델리티 상태로 재현한 것으로, 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것입니다(와이어프레임은 이름에서 알 수 있듯이 와이어로 설계된 모양입니다). 와이어프레임은 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사용됩니다.
(출처 : Adobe Korea)

와이어프레임 제작 목적?

와이어프레임은 디자인 혹은 개발을 시작하기 전 문제를 미리 확인하여 나중에 변경해야 하는 경우를 줄이기 위해 제작한다.

그리고 사용자 경험(UX) 측면을 위해 콘텐츠와 인터페이스 위치를 바꿔가며 실험이 하기 위해 필요하다.

디자인이나 개발을 변경하는 것보다 와이어프레임을 수정하는 것이 더 빠르고 쉽기 때문에 초기에 와이어프레임을 통해 사용자 경험(UX)을 미리 테스트하는 것이 효율적이다.

와이어프레임을 통한 테스트의 한계

와이어프레임을 통해 테스트를 진행한다 하더라도 문제점과 개선점을 모두 파악할 수는 없다. 그렇기 때문에 테스트에 너무 많은 시간을 사용하는 않는 것이 좋다.

나의 경험을 공유하자면 주요 기능 업데이트를 앞두고 내부 인원끼리 테스트를 오래 진행한 적이 있었다. 회의를 오래 하다 보니 많은 아이디어가 나왔고 그 에 따라 기능 수정과 추가가 필요하게 되었다.

기능 추가와 수정에 대한 회의도 함께 많아졌고 결정해야 하는 상황들이 늘어났다.

평소보다 많은 기획 회의 끝에 기능을 다시 정리하고 개발을 진행했다. 예상한 시간보다 많은 시간을 투자한 끝에 새로운 기능을 배포하였지만 그전에 진행한 테스트, 회의한 노력이 무색하게 사용자의 불만 사항이 있었다. 많은 검토 덕분인지 확실치는 않지만 불행 중 다행인 건 불만 사항은 단순했고 빠르게 수정할 수 있었다.

고객의 불만이 두려워 너무 많은 테스트와 회의를 하게 되면 많은 시간을 허비할 수 있다는 교훈을 얻게 되었다. 기능이 작동에 대한 버그만 사전에 검토하고 개개인 성향에 관련된 UX는 사전에 모두 확인할 수 없기 때문에 이 부분은 빠르게 결정하고 이후에 개선하는 것이 더 좋은 방법이라고 할 수 있다.

와이어프레임을 무엇으로 제작해야 하나?

와이어프레임 제작을 위한 툴은 많지만 간단하게 종이에 와이어프레임을 그리는 것도 하나의 방법이다.

간단한 제품 기획이라면 종이에 직접 그리거나 손에 익숙한 툴을 사용하는 걸 추천한다.

그리고 아직까지 많은 기획자들이 손에 익숙한 파워포인트를 활용해서 와이어프레임을 제작하는 것 같다.

필자는 액슈어(https://www.axure.com/)를 사용하지만 그전까지는 파워포인트를 통해 와이어프레임을 제작하였다. 하지만 간단한 아이디어가 있으면 지금도 파워포인트나 손그림으로 제작한다.

파워포인트는 기능의 제한은 있지만 기존 문서 제작 때문에 많이 사용하여 손에 익숙해서 빠르게 제작하기 좋기 때문이다. 그리고 파워 목업(https://www.powermockup.com/)이라는 플러그인을 사용하면 더 편하게 와이어프레임을 제작할 수도 있다.

이미지 : 파워목업(powermockup)

와이어프레임을 누가 제작해야 하나?

대부분은 기획자 혹은 디자이너가 와이어프레임을 제작한다. 하지만 스타트업인 경우 팀의 성격에 따라 개발자가 와이어프레임을 만드는 경우도 있다.

여기서 개발자가 와이어프레임 제작 담당을 한다는 의미가 아니라 상황에 따라서 개발자가 와이어프레임을 제작할 수 있다는 의미이다.

그 이유는 와이어프레임은 역할에 따라 제작하는 것이 아니라 아이디어를 낸 사람이 자신의 생각을 다른 사람에게 전달하기 위한 최소한의 시각화 작업이기 때문이다.
10장의 문서보다는 한 장의 이미지가 좋다라는 말처럼 아이디어를 전달하기 가장 좋은 방법은 아이디어를 시각화하는 것이다.

와이어프레임 기본 양식

와이어프레임 양식에서 필수적인 요소는 아래와 같다.

제품 개발 속도의 중요성이 높아짐에 따라 와이어프레임도 fidelity에 따라 Low, Mid(Medium), and high Fidelity로 3 가지로 구분된다.

참고로 아래의 글은 high fidelity wireframes에 가깝다.

1) 타이틀

해당 화면의 제목과 URL 주소, 아이디를 입력한다. 그리고 버전이 달라지면 버전을 구분하기 위해 버전을 기재해야 한다.

2) 화면(시각화)

콘텐츠, 버튼과 같이 실제 제품 화면에 필요한 구성 요소를 그린다. 콘텐츠 내용이 정해지지 않는 경우, "제목", "설명"과 같이 콘텐츠의 제목만 입력하는 경우도 있다.

3) 설명

와이어프레임은 정적 화면이기 때문에 버튼인지, 단순 안내 문구인지, 입력 칸인지 확인할 수 없다. 때문에 설명을 상세히 적여야 하는데 화면에 번호를 표시하고 화면에 대한 설명을 적는 것이 필요하다.

이미지 : 파워포인트

파워포인트는 문서의 높이가 제한되어 있기 때문에 한 페이지에 설명을 다 적지 못하고 2~3장으로 나눠서 적어야 했다. 이런 점이 불편하여 액슈어를 사용하였는데 액슈어처럼 툴이 다르더라도 위에서 이야기한 필수 요소만 포함시키면 와이어프레임으로서 문제는 없다.