[20160907] Framer Seminar

 

2016.09.07. 화 PM 3-5

@네이버 그린팩토리 2층 커넥트홀

 

 

---

 

 

※ 동시통역의 내용을 바탕으로 재구성한 내용입니다.

통역과정에서의 오류, 필자가 받아적는 과정에서의 오류가 있을 수 있으니 양해 부탁드립니다.

 

---

 

 

프레이머 소개

2년전 13명인 작은회사에서 개발시작, 구성원은 디자이너 4명, 개발자 5명, 스타트업의 초기단계

SOFA라는 맥을 위한 애플리케이션 개발을 하는 회사를 운영하다 애플의 디자인 어워드 수상하게 되고, 프로덕트 디자인에 집중하게 되었다.

페이스북에 인수되면서 페이스북 모바일 메신저 쪽에 집중하게 되었고, 그 후로는 모바일 미디어 광고, 사진, 라이크 로고 인터랙션 등의 일을 하게 되었다,

 

 

프레이머의 철학

프로토 타입이라는 것은 디자인에 녹아있다

Prototype is just design

 

당신의 아이디어를 다른사람들과 어떻게 커뮤니케이션 하는가?

> 본인은 예시를 드는 것을 좋아한다. 아이디어를 구체적으로 보여주는 방법이다. 어떻게 보이느냐보다 어떻게 느껴지느냐가 더 중요하다.

디자인 단에서 정확한 인터랙션을 프로토 타입을 보여주면 개발이 완료 되었을 때 자신이 생각한 것과 다르다는 것을 정확히 말할 수 있고, 그런 결과가 나오지 않도록 할 수 있다.

 

 

프레이머의 역사

4년전, UI와 인터랙션을 비주얼만으로 보여줄 수 없다는 것을 깨달았다.

빌드 하기 전에 어떻게 테스트 할 수 있을까?

애플의 내부 툴을  페이스북에서 다시 재개발해서 자바스크립트 기반의 포토샵을 인티그레이션(통합)한 새로운 브라우저 앱 개발

> 여기서 프레이머가 탄생

 

2년 정도 페북에서 일하고 그만두고 나서 이 툴의 필요성을 느끼고 개발 시작

> 디자이너들은 어떤 툴을 좋아하는 지 잘 알고 있었다

> 여러분은 즉시 반응을 보고 싶어 할 것이다

> 그것을 기기 마다 보고 싶어 한다

> 여러분이 이미 사용하고 있는 툴과 호환이 잘 되어야 한다 (ex.스케치와 호환)

> 바로 시작할 수 있는 장점 (브라우저를 켜서 자바스크립트로 개발을 하고 그런게 아니라, 프로그램을 시작하자마자)

 

 

데모 시연

> 코드 타이핑 뿐 아니라, 값 조정, 드래그로도 변경 가능 하다

> State - 한 개로 국한되어 있지 않기 때문에 여러가지를 적용할 수 있다

> for loop 사용 가능

> Auto-code

> Mixed-manipulate

> 스케치와 완벽 호환 - 하이어라키까지

 

> IoT 모바일, 스마트워치, 3d 쪽 등 다양한 프로토타입 제작 가능

 

 

Code is the best tool designers are not using, yet.

 

 

 

최근 작업물

https://framerjs.com/gallery/

 

1) Facebook Live

https://share.framerjs.com/o9q9dynf25sl/

빌드 전 유저 반응 어느정도 예측 가능

내부 미팅에서도 매우 유용하게 사용

 

 

2) Google G-Board for iOS (한국인이 제작한 프로토타입)

https://share.framerjs.com/jqsnqaz1vgon/

키보드에  구글 서치창 도입

 

 

3) VR 쪽으로도 사용 가능

https://blog.framerjs.com/posts/design-virtual-reality.html

> 카메라를 너무 많이 조절하면 어지럽다 이런 것을 프로토타입으로 경험 가능

 

 

새로운 것을 배울 때 사람마다 방법이 다름

> 책으로 습득 한 후 실행

> 몸으로 직접 겪어보기

> 여러가지 방법이 페이지에 있으니 활용 바람

> 페이스북 그룹 https://www.facebook.com/groups/framerkorea/

 

 

 

 

Q&A

 

1. 개발자 관점에서의 프레이머는 어떻게 보는가? 웹앱 퍼블리싱이 가능한 수준으로 개발 계획이 있는가?

• 개발자 입장에서 보면 프레이머는 웹 기반 기술이다. 웹에서 할수 있으면 프레이머에서도 할 수 있다.
• API 액세스 할 수 있다. 페북 라이브 스트리밍 테스트가 가능했던 것도 그 이유이다.
• 온라인에 여러가지 흥미로운 아티클이 있으니 읽어보길 바란다.
• 구글의 파이어베이스, 아마존 람다와 같은 데이터를 웹소켓으로 싱크(?), 백엔드로 여러가지 응용 가능

 

2. 인터랙티브를 만들어도 실제 개발에 다 적용될 수 없다. 개발자들이 속성 값을 쉽게 볼 수 있는 기능이 추가 될 계획이 있는가?

• 핸드오프를 어떻게 발전 시킬 수 있는가
• 재플린과 같은 예시
• 처음에 개발을 시작하기 전에 비주얼 요소
• json과 같은 구조화된 정보로 export 가능
• 이러한 방향은 우리가 나아가야 할 확실하고 흥미로운 부분이다. 프로토타이핑 코드를 프로덕션까지 어떻게 연결시킬 수 있는가 라고 많이 물어본다. 하지만 굉장히 어려운 문제다. 프레이머는 아이디어를 빌드하는 툴이다. 여러가지로 가지고 놀고 탐구할 때 사용 될 수 있는 것.
• 프로토타입은 예쁘지만 코드는 엉망진창인게 사실
• 프로토타입은 프로토타입일 뿐 프로덕션으로의 호환 때문에 프로토타입에 제약을 두고 싶진 않다. 아이디어에 집중하고 싶다. 그것이 프레이머의 장점이다.
• 아이디어 툴로 가야하나 개발쪽으로 가야하나는 늘 화두이다. 리액트 네이티브은 메인 프로그래밍은 자바스크립트이고 내부는 네이티브이다. 이것과 비슷한 방향으로 나아갈 수 있지 않을까 한다.

 

3. 프레이머의 약점이 있다면 뭐라고 생각하는가? 그것을 어떻게 극복하려 하는가?

• 배우기 어렵다는 것이 약점이라고 생각한다.
• 프로그래밍을 할 줄 아는 사람한테는 쉬운데, 초보자에게는 러닝커브가 좀 있다고 생각한다.
• 네이티브는 웹 베이스 기술에 비해 퍼포먼스가 좋다.
• 웹앱만 해도 퀄리티가 떨어진다. 페북도 html웹앱을 만들었지만 결국 네이티브로 전향
• 프레이머는 이와 달리 하나의 웹킷 기술에만 국한된다. 잘 이용한다면 네이티브보다 더 빠르게 구현 시킬 수 있다.
• 아트보드 5개를 하나로 합치는 것을 해야한다면 프레이머는 적합하지 않다.

 

4. 스타트업에서 디자이너가 일할 수 있는 시간이 적다. 촉박한 일정에서 프레이머를 이용하기 쉽지 않은데 어떻게 생각하는가?

• 바쁜데 프레이머를 언제 배워서 쓰냐? 라고 묻는다면 초기 투자시간은 걸리겠지만 한번 배우고 나면 분명 일하는데 더 빨라진 것이다. 기술을 이해하는 것도 디자이너로서 중요한 부분이다.

 

 

Secret Features

• 데스크탑 스페이스를 효과적으로 사용 할 수 있도록 다양한 디바이스를 선택할 수 있게 함
• 메인 윈도우(가로로 크게 써야 하니)와 코드 뷰를 분리
• 에러가 있는 라인 숫자를 빨간색으로 표시, 맞는 선택지를 제시
• box를 Box로 접근하려고 하는 경우
• 오토 코드
• 애니메이션 요소 선택지를 보여준다
• 옵션으로 설정 가능 - 커브, 스프링
• 애니메이션 반복, 속도 설정

 

 

 

 

 

---

 

개인적인 후기

프레이머 세미나라고 했지만 실제 사용방법 등을 가르쳐준 다기 보다는 프레이머에 대한 홍보가 주였다. 하지만 오히려 어떻게 해서 이 프로그램을 만들게 되었는지, 어떤 것을 중점적으로 생각하고 있는지, 앞으로 어떤 방향으로 나아갈 것인지에 대해 들을 수 있어서 더 좋았다. 실제 디자이너보다 개발자도 꽤 많이 참석했던 것 같다. 그래서인지 질문의 주 내용이 아무리 끝내주는 프로토 타입이라도 그것을 실제 프로젝트에 어떻게 쉽게 이어받을 수 있을지가 많았다. 나 역시도 많은 프로토타입 툴을 보면서 느꼈던 것이 과연 프로토타입이 정말 실 개발에 100% 적용할 수 있는 것들로 구현된 것일까? 하는 의구심이 들었기 때문이다.

 

디자이너가 상상한 모든 것을 자유롭게 표현할 수 있어야 한다는 것은 무엇보다 가장 중요한 조건이다. 하지만 디자인에서 끝나는 작업은 개인의 포트폴리오 말고는 없기에 실제 프로덕트까지 이어지려면 개발로의 연계가 가능한 프로토 타입이어야 할 것이다. 세계 여러나라를 돌아다니면서 실제 사용자와 만나고 그들의 이야기를 듣는 두 창업자의 모습을 보니 앞으로의 발전방향에 대해 많은 고민을 하는 것이 보였다. 앞으로의 프레이머가 기대된다. 

 

Jorn van Dijk는 본인과 페이스북 메시지를 통해 손쉽게 이야기를 나눌 수 있다고 했다. CS도 주로 두 창업자가 직접 한다고 했다. 한국 프레이머 페이스북 그룹에도 댓글을 다는 정도니 멋진 프로토타입 작업물도 두 창업자를 놀라게 해볼 수도 있을 것 같다.