brunch

매거진 프로토타이핑 이야기

라이킷 94 댓글 13

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김지홍 Nov 14. 2015

#01. Sketch App Korea

프로토타이핑에 관심있는 디자이너들을 위한 소통의 장 만들기

01. 'Sketch App Korea' Facebook Group.

(https://www.facebook.com/groups/sketchappkorea/)

지금으로부터 약 6개월 전부터 'Sketch App Korea'라는 페이스북 그룹을 운영하기 시작했습니다.

'Sketch'라는 프로그램을 중심으로 UI 프로토타이핑에 대한 이야기 전반을 나누고 있는 그룹입니다.

회사에서 하고 있는 일의 성격상 다양한 프로토타이핑 도구(Tool)들을 접할 기회가 있었고 -맨처음 다뤄보았던 도구는 Mike Matas(현재 페이스북의 Design Lead)가 페이스북 '페이퍼' 서비스를 만들 때 사용했던 것으로 유명한 '오리가미'(Origami, https://facebook.github.io/origami/)였습니다- 그 도구들을 접하면서 느꼈던 좋은 경험들을 사람들과 나누고 싶었습니다.

국내의 UI 프로토타이핑 커뮤니티 중 디자이너들이 쉽게 접근할 수 있었던 곳은 최민상 님이 운영하시던 'Framer JS Korea'(https://www.facebook.com/groups/511309105667409/)였을 것으로 생각됩니다. 작년(2014)에 한남동 다음 사옥에서 디자이너들을 대상으로 프레이머 오프라인 워크샵을 진행하기도 하셨고, 최민상 님이 운영하시는 텀블러(http://radiofun.tumblr.com/)가 디자이너들 사이에서 매우 유명했기 때문이기도 합니다. 저 또한 그 때 진행되었던 프레이머 오프라인 워크샵에 참석했었고, 그 곳에서 보았던 프로토타이핑 툴에 대한 디자이너들의 뜨거운 반응이 '무언가 다함께 이야기할 수 있는 장을 만들었으면 좋겠다'라는 생각의 시발점이 되었습니다.

이 후 그 생각 실현의 시작점이 될만한 프로토타이핑 도구로 선택한 것이 '보헤미안 코딩'(Bohemian Coding)이 제작한 '스케치'(Sketch, http://www.sketchapp.com/)라는 프로그램이었습니다. 수많은 툴 들 중에서 굳이 '스케치'를 선택했던 것은 프로토타이핑을 하는 디자이너라면 다루게 될 와이어프레임 프로그램이 '스케치'라고 생각했기 때문입니다. 그동안 써왔던 '포토샵(Adobe Photoshop)'을 손에서 내려놓은채 말이죠.

02. 'Photoshop' and 'Sketch'

오랜 기간동안 UI 디자이너들이 애증을 가지고 사용해왔던 프로그램은 주로 '포토샵'이었습니다. 어도비의 툴들은, 특히 '포토샵'은 디자인학과에 다니는 학생이라면 가장 먼저 접하게 되는 툴일겁니다. 학생 때부터 오랜 기간 써 온 툴이기에 무척 손에 익었으니, 쓰기 편하다는 장점이 있겠지요. 그러나 그 태생이 'Photo Editing'과 'Retouching'에 특화된 툴인지라, 시대의 변화에 맞게 툴 또한 발전해왔음에도 불구하고 실제 UI 디자인을 할 때는 불편한 점들이 많았습니다.

간단한 예를 들어보는게 좋겠습니다. UI 디자인을 할 때는 선택지(Touch point)에 따른 다양한 경우의 수를 충족시킬 수 있도록 수많은 화면 디자인이 필요합니다. 그리고 각 화면 디자인들이 유기적으로 잘 연결되어 작동하는지 알아볼 수 있게 플로우 체크도 진행해야 하죠. 이 가장 기본적인 부분에서부터 포토샵으로 진행하기에 어려운 점들이 많았습니다. 단일 캔버스 화면으로 디자인하던(지금은 아트보드 시스템이 추가되었지만) 포토샵 성격상 여러 개의 화면들을 연결, 비교하기에는 무리가 따랐고 이를 보완하기 위해서 반복적이고 소모적인 작업들이 수반되었습니다. 이런 작업들은 디자이너가 오롯이 디자인에만 집중하기 힘들게 만들었죠.

어도비에서 이런 점들을 바로바로 개선해주었다면 좋았겠으나, 그런 일들이 빠르게 일어나진 않았고 디자이너들에겐... 포토샵을 대체할만한 다른 마땅한 대안이 없었습니다. (a.포토샵이 UI 디자인을 위해서 태어난 툴이 아니기에 어도비에서 굳이 개선할 필요가 없었다는 시선에도 동의합니다. b.이번 Adobe Max 2015 행사 때 어도비는 그간 효과적인 UI 디자인을 하기에 부족했던 부분들을 상당히 개선하여 선보였습니다. Photoshop, Muse, 그리고 따로 포스팅할 Project Comet을 포함해서요.)

그러던 중 네덜란드 헤이그의 '보헤미안 코딩'이라는 10명도 안되는 작은 팀에서 '스케치'를 발표합니다.

그리고 스케치를 접한 UI 디자이너들은 환호했지요. 너무나 큰 범위의 디자인 영역을 아우르던 포토샵과는 다르게 스케치는 철저히 UI 디자인을 위한 제작 도구였습니다. 꼭 있었으면 하는 기능들은 담고 UI 디자인에 굳이 필요하지 않을 것 같은 기능들은 과감하게 떼어내었습니다.

스케치(Sketch) 프로그램의 기본 인터페이스 화면

스케치에서는,

하나의 큰 캔버스에 수많은 아트보드들을 나열하면서 시나리오의 플로우를 만들어나가고 확인할 수 있었습니다. UI 작업의 편의성을 높여줄 수 있는, 사소하지만 매력적인 기능들 또한 여럿 가지고 있었구요.

자신이 작업한 것들을 실시간으로 폰, 타블렛 등에서 바로바로 확인하는 것도 가능했습니다. (스케치3.3버전에서 Sketch Mirror기능 추가로 이루어진 기능)

무엇보다 툴 자체의 속도가 빠르고 쉬웠으며 쓰기에 '가볍다'라는 인상을 단번에 주었습니다.

초창기에 부족했던 점들과 무수한 버그들은 작은 팀이 가질 수 있는 장점 중 하나인 기동성을 십분 발휘, 유저들의 소리를 들으며 해결해 나갔습니다. 실리콘밸리를 중심으로 스케치를 사용하는 디자이너들이 점차 늘어났고, 심지어 어도비의 디자이너들도 스케치로 와이어프레임을 잡기 시작했습니다. 페이스북, 애플, 구글 같은 선망받는 기업들부터 사운드 클라우드, 트위터, 페이팔 등 다수의 IT 회사들이 그 흐름에 합류했습니다.

많이들 쓰고 있습니다.

03. 국내로 시선을 돌려서

저는 대략 1년 반 전에, 외국 디자인 회사의 디자이너 분들과 작업 이야기를 하면서 스케치를 알게 되었습니다. 처음 접했던 프로토타이핑 도구는 오리가미였지만 오리가미는 인터랙션을 위한 프로토타이핑 도구에 가까웠고 효과적인 와이어프레임 / 레이아웃 툴은 아니었습니다. 스케치는 그에 대한 효과적인 대답이 되어주었죠. 이 후 폼(Form), 프레이머(FramerJS), UXPin, 플린토(Flinto), 오븐(Oven), 발사믹(Balsamiq), 펜슬(Pencil), 픽세이트(Pixate), 인비전(InVision) 등등 여러가지 프로토타이핑 툴들을 최대한 다양하게 써보려 노력했습니다.

처음 이것저것 혼자서 파볼 때에는 국내에 자료가 그다지 많지 않았습니다. (지금도 국내에 위 툴들에 대한 자료들이 그다지 많진 않습니다.) 각 툴의 홈페이지에 있는 튜토리얼과 데모, 문서들을 보면서 사용법을 익히고 구글링을 거듭하며 떠오르는 질문에 대한 해결책을 찾아나갔습니다. 그렇게 한참 혼자 씨름을 하고 있다가 문득 생각이 들더군요.

'다른 사람들도 이렇게 혼자서들 고생하고 있지 않을까?'

무언가 작은 커뮤니티라도 시작점이 필요할 것 같았습니다.

물론 Form Community Korea나 앞서 이야기한 FramerJS Korea 등의 커뮤니티들이 각자의 영역에서 훌륭한 역할을 수행하고 있었습니다. 다만 해당 툴들은 러닝커브가 상당히 높은 편이여서 디자이너들의 진입이 그리 빠르게 이루어지진 못했던 것 같습니다.

그런 관점에서... 프로토타이핑에 관심을 가지게 될 디자이너가 가장 먼저 접하게 될 쉬운 도구를 떠올렸고,

그렇게 선택한 것이 위에서도 이야기한 바와 같이 스케치였습니다. 스케치는 UI/인터랙션 프로토타이핑 세계에 방문하려는 UI디자이너들에게 일종의 '문고리'처럼 기능할 것이라고 생각했거든요. (실제로 지금 수많은 인터랙션 프로토타이핑 툴들은 '포토샵'과 연동되기보다는 '스케치'와 더욱 잘 연동됩니다.)

많은 숫자의 인터랙션 프로토타이핑 툴들이 스케치와 연동됩니다.

그 이후 보헤미안 코딩 팀에 연락을 했고, 한국 내 스케치에 대한 정보 공유와 프로토타이핑 문화 활성화를 위해서 스케치 공식 그룹을 만들고 싶다는 이야기를 건넸습니다. 굳이 거절할 이유도 없었기에 보헤미안 코딩 측도 장려해주었던 것 같아요. 그렇게 아래와 같이 Sketch App Korea 페이스북 그룹을 만들게 되었습니다.

작은 시작.

생각했던 것보다 많은 분들이 관심을 보여주셨고 간간히 의견들을 말씀해주시거나 질문들을 나누십니다.

Sketch App Korea 페이스북 그룹 활동의 일환으로 지난 10월 24일에 구글캠퍼스에서 'Prototyping with Sketch'라는 오프라인 워크샵을 진행하기도 했는데 좋은 반응들을 보여주셔서 무척 기쁜 기억을 가지게 되었습니다. (오프라인 워크샵은 향후 좀 더 프로그램을 다듬어서 다시 찾아뵐 예정입니다.)

2015년 10월 24일 구글캠퍼스에서 진행된 'Prototyping with Sketch' 오프라인 워크샵 중.

04. 작은 기대

개발자 분들의 다양한 커뮤니티와 비교했을 때, 상대적으로 디자이너 분들의 커뮤니티는 다소 소극적이거나 폐쇄적인 부분이 일견 있습니다. '더 많이 교류하고 더 많이 서로간의 도움을 받으며 시너지를 낼 수 있을 것 같은데...' 하는 아쉬움이 있었던게 사실이구요.

국내에 UI 프로토타이핑 문화 자체가 들어온 건 꽤 되었습니다만, 그것이 실제 자신이 대해야 할 대상으로 오롯이 와닿게 된 것은 그리 오래되지 않았습니다. 그런 면에서, 비록 작은 출발이며 고작 페이스북 그룹 하나로 시작하게 되었지만 무언가 시작하실 디자이너 분들에게 조금이나마 도움이 될만한 공간이 되었으면 합니다.

오늘도 (주말인데!) 각자의 자리에서 한발짝 한발짝씩 나아가며 정진하고 계실

UI 디자이너 여러분들에게 더 나은 환경이 자리하길 바랍니다.