프로토파이3.9 밋업 _ 프로토타이핑 실무이야기

Protopie 3.9 Meetuo with Toss,LINE,Kakao,Daylight

10월 12일 D.Camp에서 프로토파이 3.9 밋업이 있었습니다

프로토파이3.9의 새로운 기능과 각 기업의 실무자들이 어떻게 프로토파이를 사용하고 있는지에 대해 강연했습니다

프로토파이는 국내 많은 기업 뿐만 아니라 닌텐도, 구글 등 글로벌 기업에서도 사용하고 있다고 합니다

---

금융서비스에서 프로토타이핑의 중요성 윤성권 / Toss

토스는 기존에 여러 불편함이 있었던 송금 행위을 '최고의 사용자경험'으로 만들어내겠다는 목표를 가지고 만들어졌다

우리 회사는 모든 화면을 ABCDEFG타입으로 테스트할 수 있는 환경이며 전형적인 애자일 방식으로 일하고 있다

프로덕트 디자이너에게는 서비스에 들어가는 문구, 이미지, 아이콘 하나까지  정할 수 있는 권한과 책임이 주어진다

그러나, 각 팀이 권한을 가지고 있다보니 중구난방한 아웃풋이 나오게 되었다!

빠른 애자일 방식으로 좋은 기능들을 빠르게 테스트할 수 있었지만, 각 팀이 따로 돌아가다보니 다 다른 디자인을 하게된 것이다

그래서 이를 타파하기 위해 디자인 플랫폼이라는 중앙 구조를 만들고 브랜드 디자이너도 추가 영입했다

새로 만들어진 플랫폼팀에서 토스의 디자인 컴포넌트를 모두 관리하도록 했다

중앙 플랫폼 팀에서 만든 컴포넌트를 가지고 다른 디자이너들이 공유하면서 통일성있는 아웃풋을 낼 수 있게 되었다

Protpie Case 01 - Full Width Button

하단에 Full Width Button은 버튼으로 인지가 떨어져서 클릭률이 좀 낮은 데이터가 나왔다

그래서 처음에는 마진이 있는 버튼의 모습을 취하다가 스크롤을 내리면 버튼이 Full Width로 차도록 하였다

이런 인터랙션은 말로 하면 설명하기 난처할 수 있는데 프로토파이를 통해 쉽게 설명할 수 있었다

Protpie Case 02 - Chatbot Onboarding

온보딩에 챗봇을 이용하면 좋겠다는 생각이 들었다

좋은 아이디어라는 생각이 들었고 팀원들을 설득하기 위해 프로토타이핑을 하였다

프로토타이핑을 보여주자 좋은 반응을 얻었지만 아쉽게도 실제 반영되지는 않았다

Protpie Case 03 - Main 

기존 토스에는 최대 1일 이체 한도에 대한 안내문구가 기본적으로 달려있었다

그러나 불필요한 것은 덜어내자라는 것이 토스가 지향하는 것이므로 금액이 초과됐을 때만 안내를 하도록 변경하였다

이 과정을 프로토타이핑해서 보여주었는데 커뮤니케이션하는데 도움이 되었다 

새로 나온 기능인 포뮬라 기능과 키보드를 추가하여 글자를 노가다로 넣는 게 아니라 동적으로 직접 입력을 하며 써볼 수도 있었다

다만 러닝커브가 있어서 학습하는데 3시간정도 걸렸다

---

UI 개발 프로세스에서 프로토타입 활용하기 이효숙 / 라인플러스

프로토파이를 사용했을 때의 장점으로는 어떤 의도를 가지고 만들었는지 보여줄 수 있다 

이미지로만 만들면 디자인에 대한 확신을 가지기 어려울 때가 있는데 프로토타이핑을 통해서 확신을 얻을 수 있었다

또, 커뮤니케이션하는데 도움이 많이 되었다

디자인에 대한 검증도 많이 하지만 주로 이럴 때 사용한다

-UI Flow를 테스트할 때 : 말로 표현하기 힘든 그 무엇.. 눈으로 보는 게 역시 좋다

-이미지로 설명하기 힘든 UI를 설명할 때 : 이런 부분에서 커뮤니케이션 코스트를 많이 줄일 수 있었다

-동작에 정확한 수치를 전달하고 싶을 때 : 개발자에게 정확한 수치 전달을 할 수 있다

Protopie Case 01 - 라인 로그인

라인은 태국, 일본 등 4개 국가에서 많이 쓰는 서비스이다

당연하지만 각 국가마다 사용하는 행태가 몹시 다르다 

태국은 방콕과 다른 지역의 소득격차가 큰데다 소득이 낮은 사람들이 75%가 선불요금제를 쓰고있다

그런데 요금 할인 이벤트때문에 태국 사람들은 전화번호를 굉장히 자주 바꾸게 되고 라인을 깔 때마다 신규 가입을 하게된다

신규 가입을 할 때, 기존 가입 유저라면 로그인을 할 수 있도록 수정하였으며 전체적으로 큰 타이틀로 해야할 액션을 안내하고, 버튼에만 컬러가 들어가도록 하여 행동을 유도하였다

프로토타이핑이 플로우 자체를 검증하는데 굉장히 유용했다

Protopie Case2 - 라인 슬라이드쇼 만들기

사진을 보낼 때, 슬라이드쇼로 보낼 수 있는 기능을 제작했다

이미지로만 작업할 때는 보이지 않았던 요소들이 프로토타이핑을 하면서 보이게 되었다

버튼이 처음부터 하단에 있었는데, 작은 해상도 대응을 위해 버튼을 안보이게 처리했다가 동그란 버튼으로 추가하였다

또, 실제 핸드폰으로 사용해보니 엄지에 가려 버튼이 안보일 수 있었다

그래서 사진을 끌어서 휴지통에 닿으면 어떤 인터랙션이 발생하도록 구상하였는데, 인터랙션도 여러가지로 제작하여 개발자와 개발 공수를 이야기해서 셀렉했다

3가지 인터랙션 시안을 제작하였는데 셀렉된 인터랙션은 사진들을 끌어서 휴지통에 닿으면 회색으로 커지면서 바뀌고, 사진은 알파값이 확 빠지는 것이었다

Protopie Case3 - 유투브보며 채팅하기

유투브와 새로 협약을 맺었는데, 유투브 링크를 눌러도 앱에서 이탈되지않고 라인 대화창에서 영상을 보며 대화할 수 있는 것이었다

채팅방 네 꼭지에 딱 달라붙도록 작업하였는데 프로토파이로 작업하여 실제 개발자에게 수치를 전달하는 게 큰 도움이 되었다

프로토타이핑을 해서 폰으로 봤을때, 실제 앱에서 기능적으로 어떤 문제가 있는지 알 수 있었다 

상단으로 영상을 숨길 수 있도록 했더니 끌어내렸을 때 iOS의 제어센터가 내려온다던지, 액션바에 있는 기능이 작동을 안한다던지 하는 것이었다

프로토타이핑을 하면서 이미지만으로는 알 수 없었던 영역의 사고가 넓어질 수 있었다

---

프로토타입으로 설득하기  하경제 / 카카오모빌리티

우리나라는 디자인프로세스가 아직 워터풀 방식이 많다

우리는 그 가운데서 폭포를 맞으며 고통을 받으며 해결책을 제시해야한다

해결책을 검증하는데 프로토타이핑이 필요하다

최근에 등장한 디자인스프린트같은 방법론들이 왜 프로토타이핑 얘기를 많이 할까?

최근의 환경에 맞게 발전한 것이다!

실제 런칭하게되면 인력 리소스가 많이 들어간다, 프로토타이핑을 하면 개발자의 리소스를 줄여서 디자인검증을 할 수 있다

01 빠른 가설 검증

문제의 정답을 모른다->정답의 가설을 세운다->가설이 맞는지 검증한다 (prototyping,개발을 통한 데이터수집..)

02 커뮤니케이션 해상도 향상

해상도가 낮으면 잘 인지가 어려운데 해상도가 높으면 확실히 안다

말로는 파악이 잘 안되다가 프로토타이핑을 보면 바로 이해하게된다

Colleague Experience! 동료의 경험까지 고려하게 되는 것이다!

이런 과정에서 동료들에게 flow, ux설계에 대한 커뮤니케이션을 줄이는 것에 프로토타이핑이 아주 큰 역할을 하게되었다

---

연결된 세상 디자인하기 이다윗/Daylight

최근 이런 생각이 들었다

The next big thing?

모바일 디자인을 한창 많이 하고있는데 이 다음에는 어떤걸 디자인하게 될까?

요즘에는 자동차강국에서 일하다보니 자동차업계와 일하게되는 경우가 많았다

스크린이 커지게 되고, 운전대에 조작키를 두는 경우도 있고 허공에서 손으로 조작하는 경우도 있다

자동차 스크린은 오프라인에서 사용하다보니 프로토타이핑도 오프라인으로 작업을 많이 하게 된다

프로토파이는 브릿지가 강력한 기능인데, 프레이머는 브릿지기능을 쓰려면 개발적인 지식이 필요하다! 서버도 설치해야하고...

프로토파이는 훨씬 간편하고 기기들이 없어도 테스트를 해볼 수 있다

산업디자인도 같이 하고있는데 최근엔 손전등같은 조명기구를 제작했다

프로토파이를 가지고 버튼의 개수와 위치를 여러가지 시안으로 잡아보고, 폰으로 써볼 수 있게했다

프로토파이는 실제 폰에 있는 센서도 쉽게 활용할 수 있다 

Tilt기능으로 폰이 움직이는 것을 실제 손전등 불이 움직이는 것처럼 할 수도 있고 버튼을 누르면 밝기조절도 되는 것처럼 표현할 수 있었다

그리고 그것을 실제 사람들에게 보내서 피드백을 받았다

프로토파이는 소프트웨어 뿐만 아니라 하드웨어까지 프로토타이핑할 수 있는 강력한 도구다

아두이노와 통신이 가능하고 하드웨어와 연동이 되기때문이다

---

Protopie3.9 새 기능의 라이브데모  서예훈/프로토파이

Protopie 3.9는 동적인 프로토타이핑을 만드는 기능이 많이 추가되었다

크게 3가지의 업데이트가 있었다

Variable : 변수를 선언하고 활용

Formula : 엑셀 수준의 함수를 통해 다양한 표현

Native keyboard : 디바이스의 키보드를 통한 입력

동적 프로토타이핑을 통해 조건에 맞는 텍스트를 적어야 활성화되는 인터랙션을 제작하는 시연을 보여주었다

---

QnA

Q. 프로토파이말고 다른 툴들 쓰는 것과 이유

이다윗님 : 취미로 개발을 하고있기때문에, 코드를 사용하지만 자유도가 높은 프레이머를 많이 쓰고, 프로토파이도 많이 쓴다

하경제님 : 인비전, 프레이머는 실무 적용이 어려워서 잘 안쓰고, 프로토파이, 스케치 프리뷰를 많이 쓴다

이효숙님 : 스케치 프리뷰를 써보려 했는데, 디자인 테스트를 정말 많이 하는 편이라 페이지를 많이 복붙하다보면 링크가 꼬이더라! 그래서 페이지 플로우 보는 정도로만 쓰고 프레이머로 프로토타이핑 입문을 했는데 코드가 사용되다보니 어려워서 쓰지않게 되었고 프로토파이를 주로 쓴다

윤성권님 : 플린토를 썼었는데 공유가 어려워서 잘 안쓰게 됐고 프로토파이가 URL이 나오니까 그게 좋다. 프레이머는 업데이트가 잦아서 안쓰게 됐다. 동적인 레이아웃을 잡을 때는 프로토타이핑보다는 마크업하는걸 선호한다

Q. 디자인을 검증할 때, 여러 안을 만들어보았을 때 A/B안이 비슷하게 좋아보일 때 어떤 기준으로 선택하는가

이효숙님 : 여러 테스트를 해보면 시안에는 각각의 장단점이 있다. 두가지 시안 중 고르기 어려울 때는 둘다 좋지 않을 때가 많았다. 각 시안의 장점을 비교해보고 더 중시여기는 요건으로 선택한다.

이다윗님 : 사용자의 마인드셋도 고려한다. 제품 브랜딩이나, 사람들의 익숙한 경험과 학습이 중요한 것 같다. 예전에 음악앱을 작업한 적이 있었는데 우라나라의 기존 음악앱들은 탭하면 선택이 되고 재생 버튼을 다시 눌러야한다. 그런데 스포티파이같은 외국 음악앱들은 탭하면 재생된다. 그걸 벤치마킹해서 비슷하게 하려다가, 내부사정으로 적용하지 않았는데 경쟁사에서 그렇게 바꿨더니 완전 욕을 먹더라. 그런데 이번에 새로 나온 네이버 바이브는 그냥 탭하면 재생하면 된다. 아예 새로운 서비스는 무언가를 도전해도 사용자가 적응하는데 큰 무리가 없지만, 기존 앱은 새로운 방식을 적용하려면 많은 코스트가 드는 것 같다