brunch

매거진 디자인 뉴스레터 디독

라이킷 49 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 May 01. 2019

놓치고 있었던 와이어프레임 전 단계

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

와이어 프레임이나 (화면 안에 회색 박스와 텍스트 블럭을 이동하면서 시간을 보내는 동안) 다듬는 단계에서 종이 위에 뭔가를 스케치하기 전에, 나중에 스토리 프레임이라는 이름을 붙인 내 디자인 프로세스를 이용해서 몇 가지 포인트에 대해 이야기했었다.

스토리 프레임 : 스크립트/스토리와 와이어 프레임 사이의 하이브리드 문서

어떤 소프트웨어를 사용했냐고?

텍스트 에디터다. Google 문서나 Microsoft Word나 Apple TextEdit. 무엇이든.

이 기술은 통합되고 합쳐진 내용이 있는 랜딩페이지, 홈페이지, 긴 스크롤 페이지에서 특히 유용했는데, 솔직히 말해서 이 페이지들의 유형은 갈수록 인기를 끌고 있다.

페이지를 ‘쓰기' 위해 텍스트 에디터 소프트웨어에 뛰어들기 전에 가장 궁금했던 건

“내가 전달하려는 이 주제, 제품, 스토리를 어떻게 친구에게 대화나 이메일로 설명할 수 있을까?” 였다.

1. 인터페이스는 스토리다.

몇 가지 최고의 제품이나 서비스에 대해 생각해보고, 해당 웹 사이트 홈페이지가 말하려고 하는 것을 알아보자. 누군가가 시간을 들여서 정성스럽게 작성하고, 디자인하고 페이지를 빌드했기에 방문자들이 메시지를 빠르고 쉽게 이해할 수 있다.

거의 모든 웹 페이지가 스토리를 말한다.

Dropbox
:드롭박스가 왜 존재하고, 어떻게 당신의 삶에 맞춰줄지를 이야기한다

NY Times
:NY Times’ POV에 따라 오늘 세계에서 일어난 일이 무엇인지 말해준다.

AirBNB
:에어비엔비가 제공해주는 서비스 중 하나를 예시로 보여준다.

이야기들은 스크립트 포맷에서는 꽤 잘 작동한다. 모든 시각적 혼란을 없애면 당신이 전달하려고 하는 메시지의 핵심에 집중할 수 있다. 그리고 텍스트 에디터들도 심플하고, 깨끗하고, 디자이너가 매일 사용하는 컴퓨터, 태블릿부터 모바일폰까지 모든 디바이스에서 잘 작동한다는 점에서 훌륭한 툴이라 할 수 있다.

모든 시각적 혼란을 없애면 당신이 전달하려고 하는 메시지의 핵심에 집중할 수 있다.

스케치, 포토샵, 인디자인, Axure, Principle 등 당신이 자주 사용하는 디자인 소프트웨어에서 무언가를 시작할 때 이야기를 만들기 전에 형태를 만드는데 많은 양의 에너지를 쓰고 있을 것이다.

비록 소프트웨어를 다루는 것에 능숙하고 덜 정확한 와이어프레임을 사용한다 할지라도, 당신은 당신이 이야기하려는 것의 핵심을 정확히 정의하려 하기보다는 형태를 정의하는 것에 신경을 쏟는다. 디자인 소프트웨어나 종이에 스케치할 때, 스토리의 일부가 페이지의 첫 번째 칸에 있어야 한다는 100% 확신이 들기 전 이미 디자인 결정(2 칼럼을 쓸까? 3 칼럼을 쓸까?)을 내리고 있는 당신을 볼 수 있다.

인터페이스는 스토리이고 모든 디자이너들은 스토리텔러다.

- 랜딩페이지를 디자인하든, 제품을 묘사할 때든, 가입 폼이든, 챗봇 대화를 만들든지 간에.

물론 스토리가 항상 형식을 대체하는 것은 아니다. 확실히 영향을 미치고 때로는 형식이 스토리보다 선행될 때도 있다. 몇몇 디자이너들은 디자인으로 작업하는 것이 스토리를 알리는 데 도움이 될 수 있고, 한 측면은 공생적인 방법으로 다른 측면을 먹여 살린다고 주장할 것이다. 그건 사실이다. 하지만 여기서 중요한 건 내가 어디서부터 시작하고 싶은지와, 지난 몇 년 동안 내가 잘 이용 해온 기술에 관한 것이다. 나는 모든 디자이너들이 각자의 방법을 가지고 있다고 확신한다.

2. 스토리 프레임 예제 : 드롭박스 홈페이지

스토리 프레임은 레이아웃이나 최종안이 아닌 계층과 페이지 구조에 중점을 둔 스크립트처럼 보인다. 아래 드롭박스 홈페이지에서 스토리 프레임 형식으로 보여주는 예시를 보자.

안녕하세요. 드롭박스입니다.
우리는 팀워크 방식을 바꿔줍니다. (이를 위해 사용되는 툴과 소프트웨어를 만들고 있습니다.)
우린 당신이 일하는 방식에 맞추어 디자인되었습니다.
당신의 문서를 어디에서나 볼 수 있게 해 드립니다. - 핸드폰이나 길 위에서나 언제든.
동영상 업로드 역시 빠르게 할 수 있으며, 다른 사람에게도 쉽게 보낼 수 있습니다. (심지어 그들이 드롭박스를 쓰지 않는다고 해도 말이죠.)
사진 관리도 상당히 쉽게 관리할 수 있습니다. 사진을 쉽게 관리하고 조직할 수 있도록 만들었습니다.
그리고 프레젠테이션을 함께 만들거나, 폴더에 파일을 계속 업데이트할 때 사용하는 것 같이 동료들과 실시간으로 협업할 수 있는 툴이 있습니다.
물론, 안전합니다. 다시는 파일이 손실되는 일이 없을 것입니다.
관심이 있다면, 시작해보세요.

PS. 이 경우가 당신이 찾고 있는 것이 아니라면, 여기 당신이 할 수 있는 몇 가지 다른 옵션도 있습니다.

디자인의 스토리 프레임 : 몇 줄의 텍스트가 디자인 소프트웨어 작업에 들어가기 전에 페이지 내러티브를 정의하는데 도움을 줄 수 있다.

당신의 페이지 스토리를 쓸 때 이용할 몇 가지 좋은 방법

1) 먼저 모든 것을 쓰는 것부터 시작하기

사실 첫 번째 스텝은 흰 빈 텍스트 파일에 빠르게 브레인 덤프(단순한 질문에 대해 상투적이고 획일적인 방법으로 대답하는 대량의 응답) 하는 것이다. 각 단락을 하나의 모듈로 생각하고, 각각의 문장은 디자인에 추가할 요소로 생각한다. 그 제품에 대해 아는 모든 것을 적는 연습은 가장 중요한 포인트들에 우선순위를 매기기 전에 생각을 정리하는데 도움이 된다.

난 항상 초기 질문으로 돌아가서 어떻게 대화나 이메일로 이 주제/제품/이야기/내가 말하려는 이야기를 친구에게 설명할 수 있을까? 하고 생각한다.

이를 쓰는 데는 보통 15분 정도의 시간과 반 잔의 커피가 소모된다.

2) 짧게 만들기

한 번에 하나의 문서에 모두 합쳤으면, 당신의 스토리 길이를 줄일 시간이다. 제품을 디자인하는 팀에 속해있기 때문에, 그리고 이 제품/서비스가 어떻게 작동하는지 너무 잘 알기 때문에 쓸데없는 이야기가 많을 수 있다.

“편지를 짧게 쓸 시간이 없어서 대신 긴 편지를 보내" - 마크 트웨인

문서로 돌아가서 사용자들이 정말 알아야 할 것을 세분화하기 전에 잠깐 쉬어가자. 그들의 컨텍스틀를 생각해보라. 어떻게 이 페이지에 올까? 이때 제품에 대해 무엇을 알고 있을까? 앞으로 나아가기 전에 알아야 할 최소한의 정보들은 무엇인가?

3) 여러 가지 이야기로 진행하기

초안을 작성하면, 사본 문서를 여러 개 만들고 정보들의 위계를 가지고 이런저런 시도들을 해보자. 어떻게 요소 순서를 바꿔 다른 이야기를 할 수 있을까? 이 버전 중 어떤 것이 더 인간에게 자연스럽게 들릴까? 이 연습을 하는 동안 특정 단락을 바꿔서 2번에서 제거한 일부를 다시 가져올 수도 있다.

4) 주변에 공유하기

와이어 프레임을 하기 전에 페이지 스토리를 쓰는 것의 좋은 점(목표)은 다른 팀에게 쉽게 보여줘서 피드백을 모으고 의견을 수집할 수 있다는 것이다. 최종본의 아니라 페이지 구조 합성 버전이라는 것을 그들에게 이해시켜라.

그래야만 와이어프레임과 시각적 목업으로 이동할 수 있다.

이런 과정들을 거쳐 최종적으로, 당신과 당신의 팀이 각각의 모듈을 어떻게 디자인하기로 결정했든 간에, 전반적인 페이지 스토리는 그대로 유지된다. 이해 관계자와의 조정을 처음에 거쳤기 때문이다.

3. 스토리 프레임 : 가능한 최소한의 구성요소만 갖춰서

스토리 프레임(혹은 페이지 개요, 페이지 스크립트)에 대해 내가 좋아하는 것은 시간을 많이 절약해준다는 것이다. 디자인 도구 속에서 시간을 보내지 않고도 전략, 흐름, 네러티브에 대해 꽤 높은 수준의 결정을 내릴 수 있다.

스토리가 더 다듬어지고 다음 단계로 이동할 만큼 이해관계자와 충분한 조정이 이뤄졌으면, 더 구체적인 디자인 관련 질문을 할 수 있다.

그 정보를 표시하는 가장 좋은 방법은 무엇일까?

모듈로 그룹화할 수 있는 텍스트 부분은 어디일까?

어느 부분의 스토리를 이미지, 비디오, 짧은 애니메이션으로 바꿀 수 있을까?

같은 자료로 보완할 수 있는 부분은 어디일까?

주장을 뒷받침하기 위해 표시할 특정 뒷받침 포인트는 어디일까?

페이지 스토리를 본 후 사람들이 어떤 행동을 취할까?

[2019.04.18]

와이어프레임 단계에서 추후에 바뀌게 되는 그리드나 배치로 시간을 낭비한 경험이 있어서인지 더욱 유익했던 아티클입니다. 디자인을 텍스트로 풀어야하는 경우도 많은데요, 와이어프레임 전 단계에서 스토리프레임을 먼저 진행해보는 건 어떨까요?

-디독