웹 기획은 이렇게 하세요. 제발
디자이너가 기획문서(스토리보드라던지 스토리보드 같은 그런 것들)를 보면서 하는 불만들을 살펴보면 꽤 일관적인 몇 가지가 있습니다.
먼저 "제대로 된" 기획서를 전달해주지 않는다는 점인데요. 와이어프레임 수준의 단순한 구성을 디자이너에게 전달 후에 그려달라고 하면 디자이너는 꽤나 난감할 수가 있습니다.
물론 이 외에도 기획 단계에서 고려된 것들이 실제 시각화 단계에서는 비현실적이거나 구조적으로 적절하지 않아 약간의 트러블이 발생할 수도 있습니다.
몇 차례 다른 글에서도 밝혔듯 기획자는 다양한 각도와 시선에서 제품을 살펴보고 만들어낼 수 있어야 합니다. 이를 위해서 개발은 물론, 마케팅, 디자인 등 다양한 분야의 기본적인 지식을 알고 있는 것은 상당히 중요한 부분입니다.
와이어프레임과 스토리보드, 프로토타입은 다릅니다.
기획자가 최초 화면 설계를 진행하는 모습을 지켜보면 파워포인트에 영역을 어느 정도 잡아둔 뒤에 문서를 그대로 전달하는 모습을 쉽게 볼 수 있었는데, 여기까지 작업된 형태는 와이어프레임 단계라고 볼 수 있습니다.
와이어프레임은 화면 설계에서 각 기능 또는 콘텐츠가 어떤 위치에 존재할 것인지를 대략적으로 잡아내는 것을 의미하며, 실질적인 콘텐츠의 배치보다는 전체적인 레이아웃에 초점을 두고 있습니다.
그러다 보니 큰 그림은 알아볼 수 있어도 각각의 요소에 대한 상세한 정보를 담고 있지 않습니다.
와이어프레임은 기획문서를 완성하기 위해 처음 스케치를 진행하는 것으로 볼 수 있습니다. 그림으로 비유해보자면 아직 채색작업이 이루어지지 않은 상태인 거고, 만화를 빗대어보면 대사가 들어가지 않은 상태인 거죠.
그러니까 여기까지 작업하고 디자인 해달라고 하지 마세요.
의견정도는 물어본다고 하더라도, 디자인을 의뢰하는 단계가 아닙니다.
와이어프레임이 정리가 되면 기획자는 이제 기획문서를 만들어야 합니다.
일반적으로 알려진 스토리보드라고 불리오는 기본 포맷은 사실 모두 비슷한 구성을 띄고 있긴 합니다만, 편의를 위해서 어느 정도는 포맷을 바꾸는 것도 문제는 없습니다.
중요한 것은 해당 문서를 디자이너와 개발자가 알아볼 수 있어야 한다는 점입니다.
이를 위해서 파워포인트를 써도 좋고, 제플린이나, 여타 프로토타이핑 툴을 사용해도 괜찮습니다.
핵심은 상대방이 알아보는 것이니까요.
스토리보드는 많은 정보를 내포하고 있습니다. 기본적으로 디자인 레이아웃을 짤 수 있는 정보가 제공되어야 함은 물론이며, 각각의 요소가 디자인 및 개발의 영역에서 고민할 수 있는 여지가 제공되어야 합니다.
버튼이 어떤 식으로 동작하는 것을 의도했는지를 안다면 해당 버튼을 중요도를 인지하고 디자인에 강조 효과가 들어갈 수도 있을 것이며, 개발자 역시 해당 영역에서 필요한 부분들을 검토할 수 있습니다.
복잡한 기능이 요구되는 영역은 보다 상세하게 기술하여 혼동되는 상황을 피해야 하는 것은 당연한 이야기입니다.
이를 위해 일반적으로 문서에 대한 설명이 별도로 포함되는 편이고, 이러한 설명을 생략할 정도로 스토리보드 문서를 매우 상세하게 작성하는 방법도 있습니다.
특히 스토리보드에서 중요한 요소 중 하나를 꼽아보면 플로우 차트가 있습니다. 이 플로우 차트는 실제 사용자의 동선이 어떻게 이동되며, 각각의 인터렉션 요소가 어떤 흐름으로 이어지도록 고안되어 있는지를 보여주기 때문에 전체적인 디자인의 흐름을 파악하는데 중요한 정보가 됩니다.
개발 역시 마찬가지입니다. 각 페이지에서 뿌려주는 정보와 수집되는 정보가 어디에서 어떤 목적으로 활용되는지를 파악한다면 전체적인 설계에 도움을 얻을 수 있습니다.
여기까지가 기획자가 진행해야 할 "기획문서의 요건"입니다.
만약 본인이 기획자라면, 이 정도의 정보가 다른 협업 부서 또는 담당자에게 전달되고 있는지 한번 살펴보는 것도 좋겠습니다.
프로토타이핑은 다음 챕터에서 이야기해보겠습니다.
프로토타이핑은 기획과 디자인의 협업 결과물입니다.
많은 이들은 프로토타입 작업에는 디자이너가 필요하다고 말합니다.
하지만 실제 전체 제품의 기획을 주도한 기획자의 의견이나 조율 없이 만들어진 프로토타이핑은 디자이너의 재해석이 이루어진 결과물에서 끝날 가능성이 높습니다.
디자이너는 의도와 기술적 요소를 고려하기 이전에 시각적으로 최적화시키는 것에 집중하기 때문인데요. 이때 기획의도나 개발 여건이 고려되지 않을 경우 불필요한 요소가 강조되거나 숨겨지는 등의 문제가 발생할 수도 있고, 적절한 타깃에게 유효하지 못한 디자인 타입이 활용될 수도 있습니다.
때로는 내부 개발 여건이 따라주지 못하여 구현 자체가 불가능한 디자인이 나올 수도 있습니다.
기획자의 설계문서는 실제로 만들어보면서 설계한 것이 아니기 때문에 논리적 오류가 발생할 수도 있고, 시각화 후에 의도했던 것과 다른 모습으로 실제 사용자의 편의성 또는 심미성이 부족한 상황을 초래할 수 있습니다.
프로토타이핑 과정은 개발에 착수하기 전에 실제 디자인을 입혀보고, 사용자의 흐름을 살펴보면서 발생하는 문제점을 해소하는 것에 있습니다.
이 과정에서 디자인의 디테일을 보정하고 사용자가 버튼을 클릭했을 때 등의 상황에서 발생되는 효과, 각 요소의 움직임, 기타 애니메이션 효과 등을 살피면서 콘텐츠의 집중도와 피로도를 점검하는 것 역시 진행합니다.
전체적인 심미적 요건을 디자이너가 맞춰낸다고 하더라도 전체적인 제품의 목적에 부합하는지를 살피는 것은 기획자가 필요하기 때문이 프로토타이핑 작업에서 기획자는 빠져서는 안 될 중요한 포지션입니다.
제품의 품질은 의도와 목적이 제대로 구현되는 것에서 결정됩니다.
당연하게도 이쁜 디자인, 멋진 디자인으로 구성된 콘텐츠는 사용자의 눈길을 끌 수밖에 없습니다. 여기까지가 디자이너의 역할이라면 사용자가 이 멋진 제품을 "제대로 이용"하도록 구성했는지는 기획자의 역할입니다.
처음 목적대로 제품이 동작하고 고객이 유입되며, 실질적인 전환이 발생하는지에 대해서 가장 큰 책임을 지고 기획을 시작한다는 것을 기획자는 잊어서는 안 됩니다.
