왜 스케치를 사용하는 것이 중요해지고 있을까?
이 질문에 대해 나는 디자인 프로세스의 변화라는 관점에서 답을 찾고 있다. 그럼 UX 씬에서는 어떤 디자인 프로세스로 일을 하고 있는지를 먼저 알아볼 필요가 있다. 아쉽게도 국내에는 그럴싸한 자료가 없기에 쌀국 자료를 인용하도록 하겠다.
올 해 초 미국 미디어 기업인 O’reilly는 UX 관련 디자이너들을 대상으로 다양한 항목에 대해 온라인 조사를 진행했다. 조직 규모, 연차 별 연봉 등. 그 중 눈에 띄는 항목은 현재 사용 중인 디자인 프로세스에 대한 것이었다.
디자인 스프린트(Design Sprints), 린 UX(Lean UX) 모두 애자일 환경에서 가능한 프로세스이기에 응답자의 약 90%가 애자일(Agile) 기반의 디자인 프로세스를 사용한다고 볼 수 있다. 그럼 응답 비율 2%인 워터폴(Waterfall) 프로세스에 대해 잠시 살펴보자.
워터폴 프로세스는 주로 대규모 소프트웨어 개발 시 활용되는데 폭포수라는 의미 그대로 한번 내려온 단계를 다시 거슬러 올라가기가 쉽지 않다는 특성이 있다.
반면 애자일 프로세스는 아래 그림처럼 각 단계를 빠르게 순환 반복한다.
근데 여기서 중요한 점은 이 순환이 프로젝트 전체에 대한 것이 아니라 각 기능별 (보통 한입 크기의 단위라고 함)로 순환한다는 점이다.
디자인 스프린트(Design Sprints)도 유사한 개념이다. 우리 말로 하면 ‘디자인 전력질주'이다. 어감에서 바로 느낌적 느낌을 받았을 거라 생각된다. 디자인 스프린트는 구글 벤처스에서 사용하는 프로세스이다. 앞서 애자일에서 얘기했던 한입 규모의 프로젝트를 5일 단위로 진행한다.
살짝 정리하자면, 최근의 디자인 프로세스는 ‘최대한 후딱 만들어서 후딱 테스트하고 후딱 피드백을 얻은 뒤 후딱 고치는 것’을 지향하고 있다는 것이다.
때문에 디자이너 입장에서는 자신의 아이디어를 빠르게 구현해서 사용자 테스트를 해야만 하는 환경에 처해진 것이고, 여기에 최적화된 툴이 스케치 그리고 그와 함께 연동되는 다양한 프로토타이핑 툴들인 것이다.
그럼 ‘스케치가 얼마나 애자일 디자인 프로세스에 있어 효율적인가?’에 대해 궁금해 질 것이다. 먼저 얼마나 많은 디자이너들이 스케치를 사용하고 있는지 알아보고 다음으로 어떻게 스케치를 애자일 환경에서 활용하는가에 대해 알아보자.
얼마나 많은 디자이너들이 스케치를 사용하고 있을까?
작년과 올해 UI 디자인 시 포토샵을 사용하던 디자이너들이 스케치로 툴을 바꿨다가 다시 포토샵으로 돌아온 경우를 꽤 봤다. 다시 포토샵을 사용하는 이유는 크게 두 가지로 볼 수 있다.
첫 번째 이유는, 바쁜 실무 프로젝트 진행 시 익숙하지 않은 스케치를 사용했다가 스케쥴에 문제가 발생했기 때문이다. 워크샵에서 종종 목격되는 재미있는 점 하나는 디자이너들이 스케치가 익숙하지 않다기 보다는 맥이라는 환경 자체가 익숙하지 않아 헤맸다는 점이었다.
두 번째는 스케치가 디자이너의 아이디어 발상에 있어 한계를 가지고 있다고 생각하기 때문이다. 분명 스케치로는 포토샵으로만 표현 가능한 사진 리터칭이나 다양한 필터 등을 사용할 수 없다.
하지만, 이러한 단점들에도 불구하고 많은 디자이너들이 포토샵 대신 스케치를 선택한 이유는 무엇일까? 그리고 또 얼마나 많은 디자이너들이 스케치를 사용하고 있을까? 잠시 아래 자료들을 살펴보자.
Typeform의 작년 초 자료에서 보듯 대부분의 디자이너들은 스케치와 포토샵을 함께 사용한다. 스케치를 메인으로 사용하고 포토샵을 서브로 사용하는 디자이너들이 더 많음을 알 수 있다.
올해 초 O’reilly의 자료에서도 스케치 사용자들의 비율을 확인 할 수 있다.
응답자들은 자신들이 메인으로 사용하는 디자인 툴로 일러스트레이터(43%)와 스케치(40%), 그리고 인비전(38%)을 꼽았다. 흥미로운 점은 스케치를 사용한다고 응답한 디자이너들의 63%는 프로토타이핑/협업 툴인 인비전(Invision)을 함께 사용한다는 점이다.
이 정도 비율이면 쌀국에서 스케치를 사용해서 프로젝트를 진행하는 것이 더 이상 일부 힙(hip)한 디자이너들에게 국한된 이야기가 아니라는 것임을 알 수 있다.
어떻게 스케치를 디자인 프로세스에 녹여낼 수 있을까?
스케치를 단순히 ‘디자인 툴의 변화’라는 관점으로 접근해서는 안된다는 점은 앞서 언급한 ‘디자인 프로세스의 변화'를 통해 어느 정도 수긍했으리라 본다. 그럼 이제 어떻게 스케치, 그리고 이와 연동되는 프로토타이핑 툴을 활용하여 애자일 디자인 프로세스에 활용할 수 있을지 알아보자.
많은 디자인 조직에서 실무자들은 각 단계 별로 아래와 같은 디자인 데이터들을 다루고 있을 것이다.
각각의 작은 화살표는 해당 데이터의 실제 수명을 나타낸다. 예를 들어 UI 디자인 단계에서 제작한 PPT 문서가 비주얼 디자인 단계에서는 더 이상 사용되지 않는다. (파워포인트에서 작성된 와이어프레임에 컬러를 입히고 아이콘을 그리는 비주얼 디자이너가 없다는 전제하에…)
애자일을 위한 스케치 활용의 핵심은 기획자, 디자이너, 개발자 모두가 하나의 툴을 사용하고, 이 데이터를 중심으로 서로 커뮤니케이션하는 것이다.
스케치라는 툴을 통해 ‘문서 없는 (less document-oriented)’ 개발 환경, 그리고 이를 통해 ‘실제 활용 가능한 (code-oriented)’ 데이터를 다루는 것을 지향한다는 것이다.
아래는 내가 지향하는 디자인 프로세스이다. 이 사례가 완벽을 의미하진 않다. 말 그대로 사례로써만 참고하길 바라며 썰을 푼다.
- UI 디자인
UI 디자이너 (또는 UI 기획자)는 스케치로 와이어프레임을 그린다. 그리고 와이어프레임 플로우 검증을 위한 프로토타이핑을 만든다. 내 경우 스케치 파일을 인비전에 엮어서 빠르게 프로토타이핑 작업을 수행한 뒤 의견을 수렴한다.
인비전은 사용해 본 디자이너들은 알겠지만 정교한 마이크로 인터랙션 보다는 전체 플로우 검증과 커뮤니케이션에 최적화되어 있다. 또한 웹브라우저 기반이기 때문에 링크 주소만 날리면 어떤 디바이스에서든 확인이 가능하다는 장점이 있다.
2. 비주얼 디자인
다음으로 이렇게 검증한 와이어프레임이 담긴 스케치 파일을 비주얼 디자이너에게 전달한다. 비주얼 디자이너는 전달 받은 스케치 파일의 페이지에서 기존 와이어프레임(UI design 페이지)을 복제한 페이지(Visual design)에서 디자인을 시작하면 된다.
비주얼 디자인 시 마이크로 인터랙션이 가능한 프린서플(Principle) 등의 프로토타이핑 툴을 함께 사용한다. 여기서 ‘함께'라는 것은 비주얼 작업이 완료될 즈음 프로토타이핑을 시작하라는 것이 아니라 비주얼 작업과 동시에 시시각각 스케치와 프로토타이핑 툴을 연동하여 아이디어를 구체화하라는 의미이다.
3. 개발 가이드
위 과정을 빠르게 반복 후 실제 개발 데이터로 전달할 때는 제플린을 사용한다. 작업이 완료된 스케치 파일의 레이어와 파일명을 정리하고, 이미지로 내보낼 아이들만 체크 후 제플린으로 업로드하면 된다. 제플린 역시 웹브라우저를 지원하기 때문에 맥을 사용하지 않는 개발자 횽아들도 링크만 있으면 접속이 가능하다.
오늘은 여기까지…
스케치를 활용한 프로토타이핑을 적극적으로 업무에 녹여내고 싶은 디자이너와 기획자는 본인이 속한 조직의 디자인 프로세스를 먼저 고민해봐야 한다. 디자인 프로세스가 바뀌면 기존의 프로젝트 투입 인력, 일정 등에도 영향을 미치며 나아가 조직 구조에도 영향을 미칠 수 있다. 기존의 수직적 조직 구조에서 의사결정권자의 영향력이 컸다면, 애자일한 프로세스에서는 사용자의 피드백이 더 중요해지기 때문에 기존 의사결정권자의 영향력이 줄어들 수 있다. 결과적으로 관리자 보다는 실무자의 역량이 더욱 중요해 진다는 의미이다. 그럼 이제 자신이 속한 조직에 최적화된 디자인 프로세스와 디자인 툴이 무엇일지에 대해 고민해 보길 바란다.
