2000년대초쯤, 우리가 처음 Information Architecture, Customer Experience 등이 적힌 명함을 내밀었을 때 의아해하거나 뭘하는 사람인지 몰라 물어보는 사람들이 많았다. 그런지 5년째를 맞은 요즘 포털이나 웹 에이전시, 디자인 부티끄의 사람들한테서 이런 명함을 종종 받게 된다.
그전에도 물론 이런 업무를 하는 사람들이 없진 않았다. 다만 좀더 전문적인 영역이라고 하여 특집기사가 나가기도 했었고 회사들마다 전문인력을 채용하거나 기존 인력을 학습과 훈련을 통해 전문적으로 양성시키기도 하였다. 이제는 오히려 이런 용어와 분야는 구식이라고 말하는 블로그 내용도 접하면서 많은 생각이 들었다. 기획자들이 하는 일들이 뭐 다그런것 아니냐’라고 말하는 사람이 있는가 하면 뭔가 전문적인 일을 하는 사람인 것 같군요’라고 말하는 사람도 있다.
그렇다 기획, 설계자들이 다 해오던 일들이다. 어차피 IT,인터넷, 웹디자인 분야에서 사용되는 용어들중 대부분이 외래어라면 가능한 그 의미를 제대로 알고 용어를 사용하는것도 의미가 있을 것이다. 그리고 다소의 차이가 있는 이들 용어를 사용하는데 있어서 그 전문성에 차이가 있는 것은 아닌지, 사용하는 용어의 정확한 의미를 다시한번 되새겨보고자 한다.
보통 클라이언트, 상사, 또는 대규모 프로젝트의 협력사 PM쯤 되는 사람들은 우선 기획자들을 투입시켜 스토리보드를 만들어야한다고 말한다.
스토리보드, 나는 처음에 어떤 스토리라인을 가진 스케치를 말하는것으로 착각하였다. 그리고 상당히 많은 사람들이 이미 토착화되어가고 있는 이 용어에 익숙해지기 시작했다는 것을 알게 되었다. 왜 스토리보드라고 하는것일까?
원래 스토리보드는 CF나 뮤직비디오, 영화, 애니메이션, 스테이션ID, 온라인 게임 등의 제작상 스토리를 시각화할 때 사용하는 말이다. 스토리보드에는 카메라의 움직임, 비쥬얼 이펙트, 조명, 주인공의 움직임 등 시각요소가 포함되고 나레이션이나 사운드 효과 등 오디오 트랙에 사용될 부분과 자막,로고 등 타이포 그라피나 캡션아이콘 등이 들어가야 할 내용으로 구성된다. 이러한 모든 것들을 광고 디자이너, 애니메이터, 작가들은 스토리보드라는 용어로 사용해왔다.
그런데 언제 어떻게 시작되었는지는 알 수 없으나 웹 제작에서도 스토리보드라는 용어로 사용되어지기 시작했다. 그리고 기획자가 해야하는 일은 프로젝트 팀내의 커뮤니케이션의 주요 수단인 스토리보드를 산출물로 만들고 제작전 단계를 이끄는 업무를 수행하는 것으로 조율되어왔다. 웹을 제작할 때 이미 그렇게 통용되어 왔고 또 크게 다르지 않은 의미로 받아들여지기 때문에 스토리보라고 해도 의미는 성립될 것이다. 아이러니한 것은 스토리보드를 중심으로 전개되는 기획,설계의 업무에 매끄럽지 않는 의사소통이 작용하기 쉽다는 것이다. 프로젝트 오너 그리고 심지어는 프로젝트팀내에서의 의사소통이 이상하게 진행될 때가 있다. 왜 그럴까?
서비스 기획자, 그리고 그에 앞서 전략을 수행하는 사람이 만드는 화면은 분명 기획화면이다. 그리고 요구사항 분석을 통한 전문적인 IA나 UI 컨설턴트가 만들어내는 화면은 설계화면이다. 최종적으로 요구사항이 정리되지 않은 기획화면을 가지고 디자인 시안을 무리하게 요구하는 경우를 종종 접하게 된다. 규모가 비교적 작고 디자이너의 화면 해석 능력이 뛰어나다면 문제는 없다. 그렇지만 비교적 큰 규모의 프로젝트에서는 반드시 설계화면으로 디자인 시안을 만들고 제작에 들어가야 옳다. 리소스 낭비는 豈걜“?협업과 원활한 커뮤니케이션을 위해 반드시 그렇게 하여야 한다. 물론 서비스 기획 능력과 정보 설계 및 시각화(Visualization) 능력이 아주 뛰어난 사람이라면 이보다 더 좋을수는 없을 것이다.
프로젝트 오너는 유저 시나리오, 유저빌리티, 심지어는 서비스 수익성까지도 스토리보드에 반영되어야 한다고 하곤 한다. 큰 프로젝트는 어느정도 이런 부분이 정리가 되어 있다. 프로젝트 초기에 이러한 부분에 대해 서로 충분한 이해와 산출물에 대한 정의가 있고 참여 인력 역할과, 일정, 프로젝트 개발 비용에 대해 조율이 되어 있다면 문제는 없다. 사업계획서, 서비스 기획서, 요구사항 등이 전달되어지고 기획,설계자는 이를 토대로 상세 기능 정의서, 서비스 흐름도, 설계화면 등을 산출하게 된다. 그렇지만 막연하게 서비스 컨셉을 전달하고 나중에 이 모든 것을 챙기려는 프로젝트 오너 때문에 도대체 스토리보드에 무엇을 어디까지 담아야 하는지 막막해질 때도 있다. 이처럼 스토리보드라는 용어는 A부터 Z까지 그 쓰임새와 해석이 달라 코에 걸면 코거리 귀에 걸렴 귀걸이처럼 느껴질 때가 있다.
그림1. 프로토타입 예시
그림2. Text Based 프로토타입 예시
스토리보드는 원래 IA가 좀 더 명확하고 빠른 커뮤니케이션을 위해 기능적인 프로토타입(Functional Prototype)을 가시화할 떄 스토리보딩’이라고 하여 일부 사용하기는 하지만 우리 인더스트리에서처럼 서비스 기획, 설계자가 스토리보드를 통해 모든 커뮤니케이션을 하려고 하지는 않는다. 스토리보드를 완성하였는데 서비스 전략이나, 서비스 포지셔닝이 달라지면 설계화면을 다시 해야하는 우매한 일이 벌어지기도 한다.
스토리보드라는 용어를 단지 와이어프레임이라고 바꿔 쓴다고 이 같은 문제가 문제가 해결된다는 것은 아니다. 다만 이러한 용어에 대해 충분히 인더스트리에서 제대로 알고 사용하면 그나마 서로 이해하고 공감하여 약간은 더 원활한 커뮤니케이션과 역할, 그리고 산출물에 대해 명확해질지 않을까 생각해본다.
우리가 말하는 스토리보드는 다음와 같은 프로토타입의 여러 방법중 하나로 한국적으로 재해석되어 사용되고 있다. 프로토타입에 대해 알아보기로 하겠다.
1. Storyboard :주로 광고나 CF, 애니메이션 등 영상제작에 앞서 화면의 움직임을 예측하고 제작의 커뮤니케이션을 위한 수단으로 사용되어졌으며 국내에서는 인터넷 분야에서 널리 통용되고 있음. 특히 인터렉션을 중요시하는 프로젝트의 플래쉬 등의 구현에 사용될 수 있는 용어임
2. Blueprint : 건축이나 인테리어 분야에서 대체적으로 Architecture와 함께 사전계획을 지칭하는 말로 사용되는 말이며 어떤 계획을 세울 때 일반적으로 사용하는 말. 인터넷에서는 요구사항을 설계화면(Wireframe)에 반영하기 전에 특정 목적을 검토,고려하기 위해 High Level의 다아이아그램과 챠트 형식으로 나타남
3. Wireframe : 주로 3D 애니메이션에서 모델링과 애니메이션 이전에 그 형태를 디자인할 때 사용되는 용어이며, 웹 분야에서 설계화면을 지칭하며 제작시 커뮤니케이션의 주요수단으로 가장 보편적으로 사용되는 용어임.국내에서는 스토리보드로 통용되고 있음
4. Paper Mock Up: 목업은 주로 제품디자인에서 실물 크기의 모형을 제작할 때 사용하는 말이며, 웹 분야에서는 프로토타입의 여러가지 방법중의 하나로 IA의 전문적인 설계화면이라기 보다 서비스 기획자나 디자이너 또는 개발자의 생각을 담는 설계화면 프린트물이며 소규모 프로젝트에서는 와이어프레임을 나타내기도 함. 대략의 비쥬얼 디자인이 포함되기도 함
5. Skeleton Model 또는 Gray Scale: 칼라가 배제된 말 그대로 뼈대를 담는 설계화면으로 상세 컨텐츠를 포함하거나 의도된 레이아웃을 포함하고 있지 않으며 가능한 디자이너의 재해석을 더 많이 요구할 때 사용함
6. Text Based Prototype: Screen Prototype 또는 Interactive Prototype이라고도 함. 웹에서 Paper Mock Up이나 Wireframe상에서 설명되어지기 어려운 특히나 인터렉션을 중시하는 웹을 설계할 때 HTML코딩과 링크를 통해 유저 시나리오와 사용성을 미리 점검할 때 사용하는 프로토타입의 한 방법
7. Presentation Prototype: 파워포인트로 작성된 설계화면을 인쇄를 통해 커뮤니케이션을 하지 않고 링크를 걸어 유저 시나리오와 유저빌리티를 점검하기 위한 프로토타입의 한 방법.
8. Hand Drawing, Thumbnail Sketch: 디자이너나 기획자들이 브레인 스토밍이나 아이디어 회의시 사용하는 용어로 시각적인 완성도는 떨어지나 커뮤니케이션을 원활하게 하고 아이디어 전달에 유용함
9. Design Comp: 디자인 컨셉을 가시화하여 칼라계획, 타이포그라피, 웹폰트의 적용, 이미지, 아이콘, 일러스트레이션, 레이아웃 등 구체적인 비쥬얼을 담으며 전반적인 Look & Feel을 리뷰하기 위한 디자인 시안으로 Prototype 단계를 넘어선 Production단계로 보아야 함.인더스트리의 프로세스 표준이 되었는지는 모르겠으나 제안단계에 디자인시안 제작비용 없이 수많은 디자인 시안을 받는 클라이언트와 이에 적극적으로 협조하는 풍토는 어떻게 생겼는지 아픔이 있는 과정임.
그림3 . 블루프린트 예시
그림4. Mock Up 예시
설명된 바와 같이 스토리보드는 영상제작시 사용하는 용어로 남겨두고 웹 분야에서는 와이어프레임이라고 하면 그 의미가 좀더 명확해질 것이다. 가령 3D 애니메이션에서는 스토리보드와 와이어프레임에 가각 그 의미를 다르게 두고 있다. 아티스트가 애니메이션 영화를 위해 드로잉할 때는 스토리보드라고 하며 3D 애니메이션 제작시 캐릭터의 모델링과 이후 필요한 부분에서 조명, 텍스쳐 맵핑과 모델 렌더링을 통해 아웃풋 이미지나 캐릭터의 성격 등을 살펴볼 수 있는 오브젝트 디자인을 나타낼 때는 와이어프레임이라고 한다. 또 시간의 흐름에 따라 오브젝트의 움직임이나, 카메라의 위치 등을 이동시켜 와이어프레임상으로 전반적인 흐름을 살피기도 한다.
이런 비유를 적용해본다면 인테넷상의 웹페이지 디자인과 시스템 구현을 위해 어떤 골격이나 미리보기와 리뷰를 위한 설계화면이라면 외래어라도 스토리보드라는 말대신 와이어프레임이라고 하는 것이 바람직할 것이다. 이렇듯 와이어프레임(Wireframe:설계화면)은 족히원활한 커뮤니케이션을 위한 수단이 되어야 하며 프로젝트 오너의 갑작스런 여러가지 요구사항을 만족시키는 내용을 담고 있는 스토리보드가 아니라는 점에 인식을 같이 해야할 것이다.
비단 와이어프레임뿐만 아니라 유저 모델링인Persona, 시스템과 인터렉션을 갖는 Use Case, 그리고 유저 시나리오, 서비스 흐름 등의 용어와 산출물은 단계별로 명확한 목적을 위해 최적화된 커뮤니케이션 수단으로 활용되어야 할것이다.
여기에서 다루어진 용어들은 프로젝트 진행상 그 목적에 따라 거론된 것들이고 거론된 용어들이 정확히 사용되기 미묘한 부분도 있다. 그럼에도 불구하고 가능한 우리들이 어떤 용어를 사용할 때는 가이드라인을 따라 서로 커뮤니케이션한다면 더 효율적이고 커뮤니케이션의 오해를 최소화할 수 있지 않을까 생각해본다. 용어를 제대로 사용한다는 것은 방법론이나 산출물, 또는 목적에 따른 수행 내역을 분명히 한다는 것과 상통한다.
다음에 기회가 된다면 프로토타입 단계(경험 디자인의 5단계 프로세스상에서는 Skeleton Plane)에서의 유저빌리티 테스트 수행이나 디자이너의 설계화면 재해석 능력에 대해 알아보기로 하겠다.
