ProtoPie 3.9 Seoul Meetup 후기
이 시대의 UX 디자이너들을 위한 밋업
지난 10월 12일(금) 오후 7시, 서울 선릉 인근에 있는 디캠프에서 ProtoPie 3.9 Seoul Meetup이 열렸습니다. 프로토파이는 스튜디오 씨드(Studio XID)에서 만든 '디자이너들을 위한 코드 프리 프로토타이핑 툴'로, 2016년 출시된 이후 지속적인 업데이트를 통해 현재는 세계적으로 사랑받는 디자인 도구가 되었습니다.
(아래 글에서 프로토파이의 시작에 대해서 확인하실 수 있습니다)
https://brunch.co.kr/@jihere1001/13
이에 대한 관심을 반증하듯 밋업이 시작되기 30분 전부터 자리가 꽉 찬 것을 확인할 수 있었습니다. 이제 IT 분야에서 재직하는 디자이너들에게 프로토타이핑은 효율적인 디자인 프로세스의 일부로 꼭 필요한 것이 되었기에 더더욱 많은 관심이 쏠렸다고 생각되네요.
밋업은 아래와 같은 순서로 진행되었습니다.
행사 개요
- 인사말 (김수/프로토파이)
- 금융서비스에서 프로토타이핑의 중요성 (윤성권 / 토스)
- UI개발 프로세스에서 프로토타입 활용하기 (이효숙 / 라인)
- ProtoPie 3.9 새로운 기능의 라이브 데모 (서예훈 / 프로토파이)
- Mobility 서비스, 프로토타입으로 설득하기 (하경제 / 카카오모빌리티)
- 디바이스간 통신을 위한 인터랙션 프로토타이핑 (이다윗 / 데이라이트)
- ProtoPie 엔터프라이즈에디션 소개 (임세희 / 프로토파이)
인사말
프로토파이 김수 대표의 인사와 함께 밋업이 시작되었습니다. 김수 대표는 아래와 같은 메시지를 전달했어요.
프로토파이는 디자이너들을 위한 프로토타이핑 툴입니다. 디자이너들이 상상하는 바를 더 구체적으로 현실화하기 위해 만들어졌으며, 만들어진 이후 지속적으로 많은 업데이트를 통해 발전해왔습니다.
전 스튜디오 시드를 창업하기 전 구글의 디자이너로 재직했습니다.
다양한 디자인 프로젝트를 진행하며 현재의 프로토파이와 같은 디자인 툴의
필요성을 절감했어요. 디자이너의 입장에서 필요한 기능들을 하나하나 모아나갔고 그 결과로 프로토파이를 만들게 되었습니다.
프로토파이는 그동안 주로 국외에서 많은 밋업을 진행했었는데요,
이번 3.9 업데이트를 맡아 한국에서 밋업을 진행하게 되었습니다.
와주신 모든 분들에게 감사를 표합니다.
금융서비스에서 프로토타이핑의 중요성 (윤성권 / 토스)
토스에서 프로덕트 디자이너로 재직하고 계시는 윤성권 님께서 첫 세션을 열어주셨습니다. 성권님은 세션을 통해 토스의 조직구조, 해당 구조에서의 일하는 방식과 디자인 프로세스, 프로세스 상에서 프로토타이핑이 어떤 역할을 하고 있는지 말씀해주셨어요.
토스 윤성권 님의 발표 현장토스가 일하는 방법
토스의 첫 시작은 '송금'을 디자인 하는 것이었습니다. '어떻게 하면 가장 간단하고 쉽게 송금하는 서비스를 만들 수 있을까'를 시작으로 지금의 토스가 만들어졌습니다. 이 과정 중에서 '가장 멋진 사용자 경험을 만들자'라는 목표가 정해졌고 이는 현재도 토스의 전체 목표입니다.
토스의 서비스가 커지면서 조금씩 '복잡한' 기능들도 등장하기 시작했습니다. 2017년 한 해 토스가 시도했던 새로운 서비스 / 기능들이 굉장히 많았고, 종합적으로 더 나은 사용자 경험과 전환율을 만들기 위해서 수많은 A/B 테스트를 진행해왔습니다. 토스는 Get Shit Done ! (일단하자!)라는 슬로건 아래 모든 팀이 움직이는데요, 일단 빨리 만들고 측정하고 그 결과를 통해 학습하며 방향을 바꿔나가거나 결정하고 있습니다.
현재 토스의 구성원은 160명 정도이며, 그 중 제품을 만드는 팀들은 Silo라는 단위 안에서 Product Owner / Product Analyst / Developer (And / iOS / Web) / Product Designer 로 팀원이 구성됩니다. 그리고 이 경우 보통 Product Designer(이하 프로덕트 디자이너)는 각 Silo당 한 명입니다. 프로덕트 디자이너는 서비스의 모든 외관 / 기능 / 인상을 결정합니다.
토스의 디자이너는 크게 프로덕트 디자이너와 플랫폼 디자이너로 나뉘어집니다. 프로덕트 디자이너가 위에서 설명한 Silo 형태 내에서 더 나은 제품 및 개선된 사용자 경험을 바라보는 디자이너라면, 플랫폼 디자이너는 토스 내부의 프로덕트 디자이너가 어떻게 하면 더 나은 방향으로 디자이닝을 할 수 있을지 노력하는 디자이너입니다. 플랫폼 디자인 팀은 토스의 디자인 시스템을 만들며 이렇게 만들어진 디자인 시스템을 프로덕트 디자이너들이 가져가서 각 기능들을 디자인하고 검증합니다. 마치 잘 만들어진 레고블록을 사용하는 것과 같죠.
프로토타이핑
그렇다면 토스의 프로덕트 디자인 팀에서는 프로토타이핑을 어떤 식으로 활용할까요?
01. 대부분은 원하는 아이디어(상황)를 제시하는데 프로토타이핑을 활용합니다.
예를 들어 '토스 서비스 내에서 챗봇 같은 것을 써보면 어떨까?' 라는 아이디어가 나왔다면 이를 바로 다른 사람들에게 보여주고 설득하기 위해 프로토타이핑을 사용하는 것이죠. 다양한 프로토타이핑 툴을 많이 사용해왔지만 현재는 프로토파이를 주로 사용하는데 이는 원하는 아이디어의 Core Journey Map을 프로토타이핑 할때 프로토파이가 가장 적합했습니다.
02. 전체 Flow를 만들어보는데도 유용합니다.
기능을 구현하는데 있어 전체 플로우에서 무엇이 가장 중요한지, 무엇을 덜어내야 하는지 판단하기 위해서 프로토타이핑을 활용합니다. 프로토파이를 사용해서 빠르게 전체 플로우 화면들을 구성하고 테스트합니다.
03. 디테일을 만드는데도 프로토파이를 사용합니다.
어떻게 하면 고객경험의 디테일한 부분을 살릴 수 있는지에 대한 고민을 하면서 특정 주요 순간들을 프로토파이로 자세하게 만듭니다.
UI개발 프로세스에서 프로토타입 활용하기 (이효숙 / 라인플러스)
프로토파이는 라인과도 지속적으로 협업을 하고 있습니다. 라인플러스에서 라인 앱의 UI 디자이너로로 재직하고 계시는 효숙님께서 두번째 세션을 발표해주셨어요. 라인은 일본, 대만, 태국, 인도네시아에서 굉장히 대중적으로 쓰이고 있는 앱입니다. 그래서 각 나라에서의 사용자 조사를 토대로 그에 맞춘 기능, 특색들을 라인에 녹여내고자 노력하고 있다고 하네요.
라인플러스 이효숙 님
프로토타이핑을 통한 디자인 검증
프로토파이를 사용하고 나서 디자인을 대하는 생각이 조금 더 확장된 것 같습니다. 이미지로만 디자인을 대할 때와 프로토타입으로 디자인을 대할 때 갖게 되는 가능성의 범위가 많이 다른 것 같아요. 아래 3가지 정도 케이스로 이야기해볼 수 있겠습니다.
01. 내가 디자인했던 UI 플로우를 검증합니다.
각 나라마다 앱의 사용 환경과 형태가 조금씩 다릅니다. 라인에 쉽게 로그인할 수있는 플로우를 디자인했었는데, 이를 각 나라의 사정에 맞추어서 화면을 만들었고 이를 검증하는데 프로토타이핑을 활용했습니다.
02. 이미지로 설명하기 힘든 UI 설명할 때 프로토타이핑을 사용합니다.
프로토타이핑을 통해 개발자를 설득하고 커뮤니케이션 코스트를 줄일 수 있었습니다. 일례로 라인에서 사진을 보낼 때 사진을 중복선택하면 슬라이드쇼를 만들 수 있는 아이콘이 나옵니다. 이 때 사진을 선택하고 그에 대한 세부 인터랙션과 효과를 어떻게 줄것인지를 결정하는 과정을 프로토타이핑을 통해 해결했습니다.
03. 동작과 관련된 정확한 수치를 전달하고 싶을 때
라인의 대화방 내에서 바로 영상을 보며 대화하는 안을 제안한 적이 있습니다. 대화방 내에 유튜브 링크 영상이 PIP 형태로 재생되고 이 영상 창을 자유롭게 이동하거나, 창밖으로 보내면서 닫는 형태의 안을 구상했죠. 정적인 화면에서는 이런 컨셉을 제대로 전달하기 어려웠기에 프로토파이를 통해 프로토타입을 만들었고 동작과 관련된 정확한 수치를 전달하려고 했습니다.
프로토파이를 통해서 디테일한 부분을 많이 검증할 수 있던 점이 가장 좋았습니다. 팀사람들과 프로토파이를 쓰면서 적극적으로 의견을 서로 개진하고 토론하는 편입니다.
ProtoPie 3.9 새로운 기능의 라이브 데모 (서예훈 / 프로토파이)
이번 밋업은 프로토파이의 새로운 기능을 소개하는 자리기도 했습니다. 바로 얼마 전에 새로운 기능 업데이트가 있었는데요. 상당히 많은 변화가 있었기 때문에 사용자들에게 잘 받아들여질 수 있을지에 대한 걱정이 많으셨다고 하네요. 다행히도 많은 분들이 좋아해주시고 있고 실제 새로운 기능들의 사용률도 예상치보다 높게 나오고 있다고 합니다. ProtoPie에서 디자이너로 일하고 계신 서예훈님이 새로운 기능에 대한 간단한 소개와 함께 라이브 데모를 진행해 주셨습니다.
프로토파이의 서예훈 님01 변수를 사용한 더욱 동적인 프로토타이핑
변수에 원하는 값을 저장하고 이를 인터랙션에 활용할 수 있습니다. 이전에는 고정된 값으로 동작하는 프로토타이핑밖에 할 수 없었지만 변수를 사용하면 이전보다 더욱 동적인 프로토타이핑을 할 수 있습니다.
02 간단한 연산을 통한 표현력 강화
엑셀에서 사용되는 수준의 함수와 수식을 사용해서 더욱 다양한 표현이 가능해졌습니다. 어떻게 하면 프로그래밍하는 수준의 표현력을 가지면서도 여전히 낮은 러닝커브를 유지할지 고민을 많이 했습니다.
03 네이티브 키보드 지원
키보드를 사용해서 문자를 입력할 수 있습니다. 스마트폰에서는 폰에 설치되어 있는 모든 키보드를 사용할 수 있고 데스크탑에서는 일반 키보드를 통해 텍스트를 입력할 수 있습니다.
스마트폰 화면을 터치하는 위치의 좌표를 구하거나 레이어의 좌표나 크기 등의 속성을 참조하여 레이어를 움직일 수 있습니다.
Password Validation ProtoPie Link
입력창에 입력되는 문자가 정해진 조건을 충족해야만 특정 동작을 할 수 있도록 만들 수 있습니다.
변수와 수식을 사용하여 쉽게 숫자가 증가하거나 감소하는 프로토토타입을 만들 수 있습니다.
Mobility 서비스, 프로토타입으로 설득하기 (하경제 / 카카오모빌리티)
하경제님은 현재 카카오모빌리티에서 서비스를 만들고 계십니다. 카카오모빌리티의 디자인 팀을 이끌고 있는 입장에서 디자인 프로세스 / 디자인 프레임워크 / 그리고 그 안에서의 프로토타이핑의 역할에 대해 말씀해주셨습니다.
카카오모빌리티 하경제 님환경에 맞게 디자인 프로세스들이 계속 발전을 해왔다고 생각합니다. 그리고 이 과정 중에서 프로토타이핑이 발전했는데요. 실제 프로덕트를 런칭하기까지는 너무나 많은 공수가 들어가기 때문에 프로토타이팅을 통해 상대적으로 가볍게 다양한 시도를 할 수 있게 된 것 같습니다.
프로토타이핑은 주로 아래 두가지를 위해 사용합니다.
- 빠르게 가설을 검증하기 위해
- 커뮤니케이션의 해상도를 선명하게 하기 위해
01. 빠르게 가설을 검증하자
UX 디자이너들, 프로덕트 디자이너들이 처해있는 환경은 대부분 정답을 알 수 없는 문제들을 해결하는 상황입니다. 이를 위해서 우리는 정답의 가설을 세우고 이 가설이 맞는지 검증하죠. 이 때 사용하는게 프로토타이핑입니다.
일례로, 카카오모빌리티의 서비스를 디자인하던 중 '네비게이션'을 확장해야하는 일이 있었고 이 때 프로토파이를 사용하여 프로토타이핑을 진행했습니다.
02. 커뮤니케이션의 해상도를 선명하게
사람들이 말로 자신의 생각을 전달할때는 각 사람마다 이해도에 따른 다른 상상을 할 때가 많습니다. 이러한 서로간의 오해와 다른 이해를 해결하기 위해 프로토타이핑을 사용합니다.
카카오T에서 '자주가는 장소'를 설정하는 작업을 할 때가 있었는데요. 가설을 세우기 위해 데이터들을 모으다가 '출발지 이력'을 활용하게 되었습니다. 약 80%의 사람들이 이력 리스트의 1, 2번을 거의 매번 선택하는 것을 알고 있었는데 이게 '집'과 '회사'였어요. (슬픈 일...) 여하간 이런 데이터가 있어 자주가는 장소를 집과 회사로 설정하고 디자인을 진행했습니다.
다만 이때 디자인의 플로우(사용 흐름)를 진행하는데 있어, 서로 다르게 이해하는 부분들이 있었고 혼란을 줄이기 위해 프로토타입 및 영상(프로토파이는 프로토타입을 영상으로 추출할수 있습니다.)으로 전달해서 커뮤니케이션의 해상도를 높였습니다.
프로토타이핑을 능숙히 하는 디자이너들은 동료들의 일하는 방식에도 영향을 미친다고 생각합니다. 팀으로 일하는 디자이너가 되어 가는 것이겠지요.
디바이스간 통신을 위한 인터랙션 프로토타이핑 (이다윗 / 데이라이트)
이다윗님은 글로벌 에이전시 Daylight에서 디자이너로 재직 중입니다. Framer를 능숙하게 사용하던 다윗님은 여러가지 프로젝트를 진행하면서 이제는 프로토파이를 자주 사용한다고 하시네요. 그러한 계기 중 하나로 프로토파이의 '브릿지' 기능에 대해서 실제 프로젝트 사례와 함께 설명해주셨습니다.
데이라이트 이다윗 님연결된 세상 디자인하기
프로토파이에서 엄청나게 강력한 기능 중 하나는 '브릿지'입니다. 이는 여러개의 디바이스를 연결해서(통신) 쓸 수 있는 기능이에요. 다윗님이 몸담고 있는 회사(데이라이트)는 샌프란시스코, 뮌헨, 서울에 있습니다. 이 세 도시에서 다양한 프로젝트를 하다가 자동차 업계 쪽 인터페이스 일을 한 적이 있는데 이 때 다양한 디바이스가 연결된 상황에 대해 도전해볼 기회가 있었습니다.
자동차를 타는 상황을 생각해보면 자동차 내부의 스크린 요소는 여러개임을 쉽게 알 수 있습니다. 자동차의 앞유리에도 인터페이스 화면이 있고 인포테인먼트 시스템에도 화면이 있고 핸들이나 앞뒤자리에도 보아야하는 스크린 혹은 버튼들이 있을 수 있습니다.
이런 프로젝트를 프로토타이핑 할 때 프로토파이를 사용하곤 했습니다.
프로토파이의 '브릿지'라는 기능으로 여러개의 디바이스의 통신 프로토타이핑을 해볼 수 있습니다.
Send -> Receive 기능으로 두개의 스크린을 연결한다고 생각하시면 되는데요. 실제 진행했던 프로젝트는 대외비라 이 자리에서는 두가지 간단한 시연 정도를 보여드리려 합니다.
첫번째는 폰으로 다른 스크린을 컨트롤 하는 프로토타이핑입니다. (차 환경에서 활용할 수 있는) 프로토파이에서 프로토타이핑을 만들때 컨트롤러 화면에서 Send 기능을 통해 '신호'를 보내면 신호를 받는 화면에서 Receive 기능을 통해서 컨트롤이 되는 것을 확인할 수 있습니다.
두번째는 플래시라이트 제품을 프로토타이핑하는 상황인데요. 실제 작동하는 제품 목업을 만들 수는 없으나 플래시라이트의 기능을 테스트 해야하는 상황입니다.
이 때 프로토파이를 사용하여 플래시라이트의 버튼 부를 만들고 그것으로 프로토타이핑을 진행했습니다. 핸드폰을 플래시라이트라고 가정하고 컨트롤 버튼의 화면을 디자인하였습니다. 프로토타이핑의 센드 기능을 통해 컨트롤러 화면에서 신호를 보내면 그게 벽(을 가정한 스크린)에서 빛이 비춰지는 상황을 쉽게 만들 수 있습니다. 프로토파이는 핸드폰에 있는 센서도 쉽게 활용할 수 있게 툴이 구성되어 있어 빛의 형태를 바꾸거나 색상을 바꾸거나 빛의 위치 이동(틸트 기능사용) 등도 모두 테스트 할 수 있었습니다.
ProtoPie 엔터프라이즈에디션 소개 (임세희 / 프로토파이)
마지막으로 프로토파이의 임세희 디자이너 님께서
프로토파이의 엔터프라이즈 에디션에 대한 내용을 말씀해주셨습니다.
기업에서 안전하게 협업하고 협업자들이 한 곳에 프로토파이핑 결과물을 보관할 수 있도록, 엔터프라이즈 에디션을 제작하고 있습니다. 국내에서는 현재 라인과 삼성 SDS가 사용하고 있으며, 현재 내년 초 글로벌 런칭을 준비 중이에요.
엔터프라이즈 에디션은 프로토타입을 프로젝트 또는 팀별로 정리하여 관리할 수 있고, 코멘트 기능을 제공해서 팀원들이 공유된 프로토타입에 피드백을 남길 수 있습니다. 또한 엄격한 보안 규정을 가진 회사들을 위해 기업의 네트워크 내에 서버를 설치할 수 있도록 하고, 라이센스와 멤버, 데이터 관리 등의 고급 어드민 기능을 제공합니다. 이후에는 더욱 강력한 협업 기능들을 선보일 예정인데, 인터랙션을 기술하는 좌표, 속도와 같은 수치를 프로토타입 파일을 열어보지 않고도 쉽게 얻을 수 있도록 하는 기능들을 추가할 예정입니다. 이러한 기능들은 디자이너와 개발자간의 커뮤니케이션을 더욱 쉽게 해줄 것이라고 기대하고 있습니다.
마무리
이번 프로토파이 3.9 서울 밋업은
- 현재 디자이너들이 실무에서 어떠한 방식으로 프로토타이핑을 적극적으로 사용하고 있는지
- 이를 통해서 어떤 식으로 다른 디자이너, 개발자, 기획자와 협업하고 문제를 풀어나가는지
- '프로토파이'라는 디자인 툴이 얼마나 발전했는지
에 대해서 생생하게 들을 수 있어 무척 가치있는 자리였습니다. 프로토파이는 디자이너와 팀에게 더욱 도움되는 툴을 만들기 위해 언제나 귀를 열고 있다고해요. 의견이 있으실 경우 언제든 support@protopie.io 로 연락을 부탁드린 말을 덧붙이며 행사를 끝내셨는데요, 이런 적극적인 피드백 수용의 모습들이 한 명의 디자이너 입장에서 참 좋게 느껴졌습니다.
앞으로 더욱 발전하길 바라며,
프로토파이의 링크를 남기는 것으로 저도 글을 마칩니다 : )
