와이어프레임, 동상이몽을 해결하거나 좁히거나!

우리가 일상생활에서 스마트폰으로 사용하는 뉴스나 쇼핑, 동영상, 음악 감상 같은 서비스가 너무 흔하고 자주 접하는 것이라 사실 별거 아닌 것 같아도, 그 뒤에는 엄청나게 많은 사람들의 노력과 여러  기술들이 들어가 있다.

일례로 쇼핑몰의 메인 페이지를 보면 그냥 상품 이미지와 배너들이 쭉 나열되어 있어 단순해 보인다. 그러나 그 이면에는 베스트셀러는 자동으로 불러오거나, 어떤 영역은 특정 카테고리의 상품만 불러온다거나, 패션 상품은 이미지를 다른 상품들보다 더 크게 나오게 한다거나, 품절이 된 상품은 자동으로 안 불러오게 하는 등 꽤 정교하고 복잡한 로직과 보기 좋고 사용하기 편리하게 하기 위한 다양한 디자인 노력들이 들어가 있다.

그러면 이 메인 페이지가 처음부터 가장 최적화된 형태로 갑자기 짠하고 나타났을까? 그냥 감으로 이렇게 한 번 해볼까로 만들면 그게 효율적인 메인 페이지가 바로 될까? 굉장히 운이 좋지 않은 이상 그렇게 되기는 힘든 일일 것이다.

와이어프레임(wireframe)은 웹페이지가 어떤 정보 구조로 어떤 콘텐츠가 사용자에게 보일지 대략적으로 보여주는 기본 틀을 표현한 것으로 화면의 UI, 레이아웃, 배치도 개념으로 이해하면  된다. 쇼핑몰의 메인 페이지를 만든다고 할 때 연관된 사람마다 이해하거나 기대하는 것들이 다 다르기 때문에 문장이나 말로 하는 데는 한계가 있다. 필요로 하는 요구사항을 정의하거나 기능 리스트를 만들더라도 그것은 경영진, 영업조직, 디자인팀, 개발팀 등 각자의 입장에 따라 생각하는 바가 다 다를 수 있다.

와이어프레임은 추상적이거나 구체화되었더라도 각기 다를 수 있는 생각과 니즈들을 시각화를 통해 형태를 갖춘 구체화된 모양새로 만들어 주는 역할을 한다. 메인 상단에는 중요한 이벤트가 큰 배너로 노출이 되어 마케팅 기능을 하고, 그 바로 아래에는 베스트셀러가 카테고리별로 골고루 보이면 판매 효율이 좋을 것이라는 등 아이디어와 요구사항을 구체적으로 시각화를 시키는 것이다.

구체화된 와이어프레임이 있으면 각 이해관계자들 간의 논의가 효율적으로 진행되고, 아이디어가 추가되어 더 훌륭한 기획안으로 발전될 수도 있다. 결국 와이어프레임은 불투명한 생각의 차이에서 발생하는 커뮤니케이션 비용을 줄이고 더 생산적인 기획, 디자인, 개발을 할 수 있는 유용한 도구이다.  

와이어프레임을 무엇으로 만드는지는 중요하지 않다, 구체화가 핵심이다!

그렇다고 해서 와이어프레임이 굉장히 대단한 어렵고 사용하기 힘든  소프트웨어를 사용한다거나 시간이 엄청나게 들어가는 그런 작업은 아니다. 그냥 A4 용지나 연습장에 네모난 박스를 그리고 그 안에 손으로 쓱쓱 그려도 된다. 물론 파워포인트를 사용해 깔끔하게 작성을 하거나 여러 가지 다양한 소프트웨어들을 사용할 수도 있다.

하지만 중요한 건 이쁘게 보이는 게 아니라 어떤 콘텐츠가 어떤 정보구조로 어떻게 페이지가 구성되는지를 구체화시킨다게 핵심이다. 화이트보드에 그려서 논의를 통해 계속 수정을 한 뒤 사진을 찍어 공유해도 내용이 구체화되고 이해 관계자들의 니즈가 잘 녹아 협의된 결과물이라면 그것 자체로도 훌륭한 와이어프레임이 될 수 있다.