#18 본격 화면 설계, StoryBoard
대충 윤곽만 잡는 건 설계도가 아니랍니다
이제 대망의 기획서 StoryBoard까지 왔네요 대견합니다. 이제 여기에 색과 디테일을 입히면 실제 디자인 결과물이니 이제 거의 다 왔습니다. 하지만 방심은 마세요. 여기에도 여러분을 함정에 빠뜨릴 위험요소들이 가득하니까요.
기획서의 기본 목적부터 알아봅시다
이쯤에서 다시 상기해야 할 점은 여러분은 UX 디자이너 지망생이고, 그저 그림만 그리면 전부가 아니라 생각을 증명해야 합니다. 그 연장선에서 저 역시 수업시간에 수강생들에게 종종 이 스토리보드 부분에서 쓴소리를 하는 경우가 있어요.
'야, 그런 식으로 해오면 이게 그냥 색깔 빠진 디자인이지 이게 무슨 기획서냐?'
자 먼저 기획서를 하나 봅시다.
봉준호 감독이 직접 그린 영화 '기생충'의 스토리보드, 출처 CJ ENM스토리보드라는 이름을 가진 녀석들이 하는 건 대부분 역할이 비슷해요. 그게 영화든 IT든 뭐든 간에...
먼저 스토리보드는 이 문서만을 가지고 여러 롤(Role)에 있는 사람들이 본인이 뭘 해야 할지를 충분히 이해할 수 있도록 그려져야 합니다.
위 '기생충'의 스토리보드만 해도 카메라 감독은 본인의 앵글이 어떻게 움직여야 할지, 효과팀은 연기가 어떻게 움직여야 하는지 소품은 어떤 디테일로 나와야 하는지를 알 수 있을 거고, 배우들은 자신들이 보여야 할 표정과 대사까지도 알 수 있도록 쓰여 있습니다.
그런데 처음 스토리보드를 그려보는 친구들은 대부분 이렇게 들고 오더군요
Wireframes 출처 Balsamiq.com스켈레톤만 들어있는 무책임한 스토리보드
이런 더미 스켈레톤만 넣어놓고는 제게 들고 와서 스토리보드 / 기획서 피드백 좀 달라고 합니다. 그럼 1차로 말문이 막히죠. '대체 나보고 뭘 보라고?'
분명 네모 안에 X 쳐진 저 모습은 이미지 영역을 말하는 걸 겁니다. 그런데 무슨 이미지가 들어갈지 제가 어떻게 알아요? 계속 의견을 주고받으면서 포트폴리오를 상담해 주고 있는 저도 감을 못 잡는데 평가관은 무슨 수로 알 수 있을까요?
그렇기에 우리는 스토리보드에 담기는 와이어프레임을 그려올 때는 반드시 샘플 데이터들이 명확히 판독될 수 있도록 넣어줘야만 합니다. 작은 텍스트 조차도 말이죠. 그래야 이게 어떤 컨텐츠를 담고 어떤 기능을 수행하는지 들을 예측할 수 있게 해 주니까요.
그리고 한 가지 더!
여러분이 고민해서 사용자의 문제를 해결하는데 중요한 역할을 하는 기능에 대해서는 저렇게 반드시 번호를 달아주고 부연 설명을 달아주세요. 이게 빠졌을 때 저는 그걸 '색깔 빠진 디자인이지 스토리보드가 아니다'라고 이야기합니다.
안타깝게도 UI Component는 사실 대부분이 비슷하게 생겼어요. 오히려 의미 없는 독창성은 사용성을 좀먹는 독약과도 같죠. 그렇기에 경력이 십수 년이나 된 여러분의 평가관은 별의별 서비스를 다 봐온 분들이고 이 양반들이 여러분이 그려오는 UI 요소들을 접할 기회가 없었을까요?
아니에요, 질리도록 보고 또 봐 왔습니다. 이분들이 바쁜 와중에 여러분의 포폴을 넘겨보면서 설명 없는 색깔 빠진 디자인을 봤다고 칩시다. 그럼 무슨 생각을 할까요? 아마 열에 아홉은 이런 생각을 할 겁니다.
아니 뭐 흔히 보는 서비스랑 다를 것도 없는데, 뭘 어쩌란 거야?
그러니 모든 요소는 아니더라도 적어도 여러분이 꼭 이해시켜야 하는 부분만큼은 설명을 꼭 달아두세요. 표현에 대한 근거를 전달하지 못한다면 결국 실패한 UX 포트폴리오 일수밖에 없으니까요.
아! 그리고 스토리보드도 그리다 보면, 뭐... 지금까지 과정 중에 쉬운 게 뭐가 있었겠느냐만 이거 역시도 상당히 힘들 텐데 요건 희소식이 있습니다. 여러분은 기획자 직군이 아니라 UX 디자이너이기에 사실 이 스토리보드 보다는 이 뒤의 디자인 결과물을 더 중심으로 평가받게 될 겁니다.
그러니 여러분이 만들려는 모든 화면에 대한 스토리보드를 모두 그릴 필요는 없어요. 여러분의 문제를 풀어주는 대안 화면 중 가장 중심이 되는 키 스크린 5~6개 정도여도 충분합니다. 그러니 너무 겁먹지 마시고... 그렇다고 꾀부리느라 로딩 화면이나 로그인 화면 같은걸 스토리보드에 넣지 마세요. 그게 뭔 문제를 해결해주는 중요한 화면입니까?
다음은 화면을 구성할 때 저만의 팁으로 찾아오겠습니다.
