[작업기] 프로토타이핑 툴 Framer - 개인 프로젝트 Odd interactions

 

[2020년 Framer Korea Meetup Webinar의 발표 내용과 유사합니다]

 

     선행 UX 쪽 프로젝트에 재미를 느끼고 계속 참여하면서, 영상이나 3d를 통한 시각화도 중요하지만 내가 직접 프로토타입을 만들거나 내가 디자인하려는 경험을 구현하고 싶어졌다. 아무래도 구현하려는 대상이 UI나 마이크로인터랙션보다는 센서 등을 활용한 물리적인 인터랙션인 경우도 많아서 아두이노 코딩이나 파이썬 이런걸 배워야 하나 고민을 했었다. 하지만 예전에 써본 적이 있던 Framer가 Framer X라는 툴로 변화하면서 React JS 기반의 프로토타이핑 툴이 되었다는 소식을 들었고, 어짜피 잘 못하던 coffeescript, 차라리 잘됐다! 하고 배우기 시작했다. 그래도 아주 미약한 javascript 지식과... html, css 조금 아는 걸로 아예 새로운 언어나 툴을 배우는 것 보다는 나을 듯 했다.

 

     독학도 했다가, 유튜브 튜토리얼도 들었다가, 수업도 들었다가, 하면서도 아무래도 코딩의 비중이 큰 프로토타이핑 툴이다보니 아무리 써도 내가 이걸 마스터했다는 느낌이 들질 않았다. 내가 생각하는 아이디어 -> 뚝딱 구현! 이 가능한 정도까지 배워보고싶었는데... 그러던 차에 못해도 그냥 내가 생각하는 아이디어들을 하나씩 만들어봐야겠다, 해서 몇 주에 걸쳐서 하나씩 만들고 모아보기 시작했다. UI나 마이크로인터랙션 구현보단 정말 내가 만들고 싶은 기능들을 만드는 식으로 진행했고, 그렇게 모아왔던 Odd Interactions라는 제목의 프로젝트가 꽤 분량이 쌓여서 Framer Korea의 웨비나에서 공유할 기회가 생겼다. (미뤄오던 웹사이트 작업 마무리도... 이 웨비나 하려고 급하게 마무리했다. 역시 사람은 마감이 있어야한다 😌)

www.seungmee-lee.com/#/./expmnt/odd

seungmee-lee-archive

 

---

다양해지는 인터랙션 방법과 UX, 그리고 프로토타이핑

     UX디자이너가 작업하게 되는 인터랙션이나 사용자 경험의 범위가 다양해지고 있다. 보통 UX라고 하면 당연히 웹이나 모바일 앱 상에서의 인터랙션이나 화면 플로우 등이 떠올랐는데, 이제는 사용자 경험이 이루어지는게 노트북, 휴대폰의 스크린 뿐만 아니라 자동차의 스크린(인포테인먼트), 엘리베이터, 음식 서빙 로봇의 인터페이스 등 다양해지고 있다. 휴대폰 스크린으로 사용한다고 해도 휴대폰 스크린이 매개가 될 뿐 따릉이, 전동킥보드, 스피커 등 다른 제품과 연동하기 위한 상황에서 사용되는 경우가 늘어나고 있고, 단순히 터치로 인터랙션하는 것이 아니라 음성 인식으로 사용하거나 비접촉으로 제스처로 인터랙션 하는 경우, 얼굴 인식 등 input 자체도 다양해지고 있다. LG나 삼성, 마이크로소프트 등 컨셉이나 시제품으로 시장에 공개되고 있는 폴더블, 롤러블 같은 새로운 폼팩터도 UX디자이너들에겐 새로운 고민일 듯 하다. 

 

 

     산업 분야에 따라서 필요한게 다르니 모든 것을 알고 이해할 필요는 없겠지만, 나는 계속 선행 UX 관련 프로젝트를 원하고 있다보니, 다양한 상황의 인터랙션을 구현할 수 있는 툴이 필요했다. 그래서 선택한게 Framer였고, 나와있는 프로토타이핑 툴 중에서는 코딩이 차지하는 비중이 가장 높은 툴인 것 같다. React JS 기반이기 때문에 React처럼 npm을 통해 다양한 라이브러리를 설치해서 사용할 수도 있고, store에서 사람들이 만든 패키지를 다운받아서 사용할 수도 있다. 이런 점 때문에 Design System 구축에서 많이 활용되고 있는 것 같은데, 나는 그 보다는 라이브러리 설치가 가능하다는 점이 가장 나에게 적합했던 것 같다. 간단하게 설명하면, 음성 인식 관련 인터랙션이 필요하다고 하면, 구글에서 voice recognition npm library 이런 식의 키워드로 검색해서 찾아서 내가 작업하고 있는 framer 폴더에 설치해서 그 모듈을 설치하고 import해서 그 인터랙션을 사용할 수 있는 식이다. Framer 만을 위해 나와있는 라이브러리를 찾는게 아니다보니 문제가 있어도 stackoverflow 등에 정보도 많고 해결책을 찾기도 용이한 편이다. 지금은 조금 다르지만, 라이브 프리뷰로 모바일이나 태블릿 등 다른 디바이스에서 프로토타입을 쉽게 실행할 수 있다는 점도 장점이다. 

 

 

---

hover, click을 넘어서

     프론트엔드 관련 프로토타이핑 툴을 활용하면 가장 많이 쓰는 인터랙션이 아마 tap / hover 같은 기본적인 터치 인터랙션일 것이다. 하지만 여기서 조금 더 들어가서, 빠르게 두번 탭하면? 길게 탭하면? 탭하면서 특정 방향으로 스크롤하면? 카메라 인터랙션을 디자인하고 싶다면? Framer에서는 코딩으로 이런 인터랙션들을 추가하거나 구현할 수 있다. 아무래도 코딩으로 해야되는 만큼 쉽게 뚝딱! 하고 되지는 않지만, 이런 기능들을 사람들이 프레이머 스토어에 만들어서 공유해둔 것도 있고, 없다면 npm 라이브러리 중에서 검색하면 무조건 엄청나게 많이 나온다. 처음부터 모든 것을 만들어야된다면 디자이너가 익혀야하는 코딩의 수준과 깊이가 너무 부담스럽겠지만, 나는 이런 기능들을 가져오는 식으로 여러가지 작업을 했었다. 몇 가지 프로토타입들을 소개하자면, 

 

Fake-fold / 스마트폰 두개를 연동시켜서 폴더블 폰 같은 인터랙션 구현해보기

 

Morse code - 영화에서 자주 보이는 모스 코드. 짧고 길게 누르는 식으로 기호를 구분하는데, 길게 누르는 인터랙션 라이브러리를 가져와서 썼다. 

 

위의 fake-fold를 활용해서 만든 폴더블 폰 인터랙션. 진짜 종이책 넘기듯이. 

 

코로나 때 홈트레이닝 할 때 내가 직접 타이머 누르는게 귀찮아서. '몇 초, 시작' 이런식으로 말하면 자동으로 해당 시간 타이머가 맞춰지고 시작된다. 음성 인식 라이브러리 가져와서 만들어봤던. 

 

웹툰 볼 때 한 손으로만 스크롤하고 싶어서... 스마트폰의 틸트 센서값으로 스크롤 할 수 있는 프로토타입

 

위의 틸트 프로토타입 응용해서, 한창 닌텐도 스위치가 가지고싶었을 때 만들었던 게임 컨트롤러. 뒤의 게임 화면같은 3d 환경은 웹VR 구현에서 사용되는 aframe

 

 

 

---

Framer는 어디로 가고 있는걸까

     사실 이 프로젝트를 어느정도 정리해놓고 나서는 오랫동안 Framer를 켜볼 일이 없었다. 하지만 최근에 켜보니 프레이머 데스크탑 버전보다는 웹 버전에 힘이 실리고 있는 모양새. 좀 더 협업툴로써의 기능을 강화하고 있는 듯 하다. 내가 잘 쓰던 live preview 기능도 사라져버렸고, 웹에서 사용하는게 더 무겁게 느껴져셔 난 아직도 데스크탑에 다운받아서 쓰고 있는데, 실제로 웹에서 사용하는게 더 무거운건지는 잘 모르겠다. (아마 내가 켜놓은 탭이 많아서가 아닐까...). 사실 나도 작업하면서 구현하려는 기능들에서 코드의 비중이 더 커져서 최근에는 프레이머를 켤 필요 없이 그냥 react로 처음부터 끝까지 만들 정도였다. 하지만 프레이머로 작업할 때는 UI 디자인을 가볍게 디자인 인터페이스에서 해두고, 코드에서는 인터랙션과 구체적인 기능을 구현할 수 있어서, 구현하려는 것에 맞는 언어로 작업이 가능했다. 하지만 아무래도 리액트 프로젝트에서는 코드 한줄 수정 > 인터페이스 확인, 이런식으로 진행을 해야하니 프레이머가 그런 점에서는 편했구나 싶었다. 

 

     애초에 프레이머는 내가 지금 사용하는 용도로 나온 프로토타이핑 툴은 아닐 것이다. 더 실제에 가까운 프로토타입을 구현하고 개발자와의 소통에 용이하게 이용하려는 디자이너들의 욕구들을 충족시키기 위해서 코드의 비중이 높았지만, 아무래도 러닝커브가 높다보니 디자인보다 프로토타이핑을 위해 들어가는 시간이 너무 많아진다고 느끼는 분도 많을 것 같고. 어쨋튼 프로토타이핑은 아이디어를 테스트해보기 위한 과정이지 목표가 아닌데, 목표 이상으로 노력이 들어가는 툴인 것 같다. '한 번 만들어보지뭐!' 하고 만들기 위한 툴인데, 거기까지 가기가 오래 걸리지만, 거기까지 가면 활용도는 너무나 무궁무진한. 내가 활용하려는 용도에서는 완벽하게 부합하고 잘 사용하고 있기 때문에 사용기를 공유했지만, 장단점이 정말 확실한 툴이다. 프레이머팀에서 코딩을 활용한 다양한 프로토타이핑(음성 인식 등등)이 가능하다는 점을 더 강조해도 좋을 것 같은데, 코딩을 쓰지만 이렇게 간단하게 인터랙션을 구현할 수 있어! 라는 메시지를 계속해서 보여주고, 실 사용자들은 별로 안간단한데...?를 반복하고 있는 것 같다. 그래도 애정을 가지고 쓰고 있는 툴인지라 팔은 안으로 굽는다. 잘 됐으면 좋겠다 프레이머 :)