기획자의 스케치(Sketch), 인비전(Invision) 사용기

슬로워크에서는 스티비라는 이메일마케팅 서비스를 만들고 있습니다. 스티비처럼 서비스를 새로 만들어나가는 단계에서 가장 많이 하는 일 중 하나는 서비스를 만들기 위한 화면을 설계하는 것입니다.

스티비를 만드는 과정은 대략 이렇습니다.

화면 설계의 산출물은 디자인과 개발의 밑바탕이 되는 것이기 때문에 화면 설계 단계에서는 디자이너, 개발자와의 소통이 중요합니다. 그 산출물 또한 디자이너, 개발자가 활용하기 쉬운 형태여야 합니다.

화면 설계의 산출물 중 하나는 와이어프레임(Wireframe)입니다. 와이어프레임이란 단순한 선으로 화면의 레이아웃을 표현하는 것을 말합니다.

더 읽기 > UI, UX 기획을 쉽게, 와이어프레임(Wireframe)

슬로워크에서는 원래 Moqups라는 도구를 사용하고 있었고 스티비 팀에서도 마찬가지였습니다. 하지만 몇 가지 아쉬운 점이 있었습니다.

1. 제공되는 스텐실(Stencil)로는 부족합니다.
   Moqups에서는 스텐실이라는 이름으로 미리 제작된 UI 요소를 바로 끌어다 쓸 수 있도록 제공하는데, 제공되는 것만으로는 충족되지 않는 경우가 있었습니다. 일반적으로 사용되는 UI 요소는 대부분 제공하지만 오히려 필요하지 않는 것까지 포함되어 있다 보니 정작 필요한 걸 찾아 쓰는 데 오히려 불편함을 느끼기도 했습니다.
   
   
2. 인터랙션을 표현하기 어렵습니다.
   화면 간 이동은 표현할 수 있지만 팝업이나 고정된 레이어 등 화면 단위가 아닌 인터랙션은 표현하기가 어려웠습니다. 물론 화면설계 단계에서 모든 인터랙션을 정확히 표현할 필요는 없지만 자주 사용되는 단순한 인터랙션을 매번 따로 설명해야하는 불편함이 있었습니다.

이런 아쉬운 점에도 불구하고 Moqups는 매우 훌륭한 도구임에는 틀림없습니다. 하지만 와이어프레임을 만드는 기획자가 디자인 툴을 사용하는 데 비교적 익숙한 편이었기 때문에 이런 아쉬움을 충족시켜줄 만한 새로운 도구를 찾아보기로 했습니다.

그래서 사용해보기로 한 것이 스케치(Sketch)와 인비전(Invision)입니다.

스케치는 UI 디자인에 최적화된 도구입니다. 빠르고 간편한 기능으로 포토샵을 대체하고 있습니다. 한국에서도 포토샵 대신 스케치를 사용하는 디자이너들이 점점 늘어나고 있는 추세입니다. 스티비 팀도 디자인 업무에 스케치를 사용하고 있습니다.

스케치 소개 영상

인비전은 화면 간 인터랙션을 표현하는 프로토타이핑 도구입니다. 디자인 된 화면을 불러와 어떤 사용자 행동에 대해 화면이 어떻게 전환되는지 정의할 수 있습니다. 그리고 이렇게 만든 결과물을 다른 사람과 공유하고 피드백을 받기에 용이합니다.

인비전 소개 영상

정확히 말하자면, 스케치와 인비전은 디자인 산출물을 만드는 과정에서 빠르고 효율적으로 프로토타이핑하고 그 결과물을 공유하기 위한 도구라고 볼 수 있습니다. 실제로 대부분 그렇게 활용하고 있기도 하죠. 하지만 와이어프레임 작업을 위한 도구로도 사용할 수 있다고 생각했고, 그래서 직접 활용해보기로 했습니다.

스케치와 인비전으로 만든 스티비 와이어프레임들

방법은 단순합니다. (사실 스케치와 인비전을 활용한 일반적인 프로토타이핑 과정과 다를 바 없습니다. 그 대상이 디자인 산출물이냐 와이어프레임이냐의 차이일 뿐입니다.)

1. 스케치에서 아트보드(Artboard) 단위로 화면별 와이어프레임을 만듭니다.
2. 스케치 파일을 인비전에서 불러와 화면 순서를 정리합니다.
3. 인비전에서 화면 간 이동, 팝업, 스크롤 등 간단한 인터랙션을 정의하고 부연설명이 필요한 곳에 노트를 추가합니다.
4. 인비전 링크를 동료들에게 공유하고 코멘트를 활용하여 의견을 주고받습니다. 필요하다면 사용자에게 디자인을 미리 공개하고 피드백을 받는 것도 가능합니다. (스티비는 새로운 에디터의 디자인 시안을 인비전으로 공개하여 피드백을 받았습니다.)

함께 사용하면 좋은 것

인비전 싱크(Invision Sync)

스케치 파일과 인비전 프로젝트를 동기화합니다. 스케치에서 수정한 내용이 인비전 프로젝트에 바로바로 반영됩니다.

크래프트(Craft)

인비전에서 만든 스케치의 플러그인입니다. 한 가지 요소를 그리드 형태의 배치로 복제해주고, 이미지 요소를 라이브러리 형태로 관리하고, 공개된 이미지를 무작위로 불러와 배치하고, 텍스트를 무작위로 입력해주는 등의 기능을 제공합니다.

와이어프레임 키트

공개된 와이어프레임 키트를 사용하면 스케치에서 UI 요소를 직접 그릴 필요가 없습니다. Teracy Wireframe, Bootstrap 3 GUI를 추천합니다.

다른 와이어프레임 도구와 비교했을 때 장점은 이렇습니다.

1. 다양한 UI 요소를 표현할 수 있습니다.
2. 디자인 산출물과 연속성이 생깁니다. 와이어프레임을 만들 때 사용한 레이어와 심볼의 이름과 구조를 디자인 작업 시 그대로 사용할 수 있습니다.
3. 단순한 인터랙션은 글이나 말로 설명할 필요없이 직접 표현할 수 있습니다.
4. 공유가 쉽고 피드백을 주고받기 쉽습니다.

단점도 있습니다.

1. UI 요소를 수정할 때 시간이 오래 걸립니다. 다른 와이어프레임 도구는 제공되는 UI 요소에서 간단한 수정만으로도 메뉴의 수를 늘린다든가 버튼의 스타일을 변경할 수 있지만, 스케치에서는 직접 수정해야 합니다.
2. 전체적인 화면 구조나 순서를 파악하기 어렵습니다. 직접 클릭하면 화면이 어떻게 이동하는지 확인할 수 있지만 전체적인 흐름을 확인할 수는 없습니다.

스티비팀에서도 화면설계 단계에서 스케치와 인비전을 활용해본 건 이번이 처음이었고 이번에 알게된 단점을 어떻게 보완할 수 있을지 고민하고 있습니다. 전체적인 화면 구조나 순서를 파악할 수 있도록 화면 단위의 시나리오를 표현한 별도의 아트보드를 만들고 꼭 필요한 부분만 인비전으로 옮기는 것이 대안이 될 수 있습니다. 어쩌면 아예 다른 도구를 사용하는 게 더 나을 수도 있겠죠.

스케치나 인비전이 정답이 아니듯이 어떤 도구로 서비스 전체의 기획 내용을 완벽히 전달할 수는 없습니다. 문서가 필요할 때도 있고 표가 필요할 때도 있고 순서도가 필요할 때도 있습니다. 기획의 본질은 커뮤니케이션입니다. 중요한 것은 상황에 따라 커뮤니케이션을 효율적으로 할 수 있는 도구를 선택적으로 사용하는 것입니다.

by 낙타 발자국