Framer Meetup @Kakao
Welcome Koen & Jorn!!
지난 9월 7일, 인터랙션 프로토타이핑 툴 ‘프레이머’의 밋업 행사가 카카오 판교 오피스에서 진행되었습니다. 창업자인 Koen Bok과 Jorn van Dijk이 직접 방문한 이번 행사는 프레이머 뿐만 아니라 인터랙션 디자인 전반에 대한 이야기까지 알찬 내용들로 구성되어 많은 호응을 얻었습니다.
인터랙션 디자인과 프레이머
두 창업자가 들려준 이야기에 따르면 프레이머에 대해 고민하게 된 계기는 인터랙션 디자인의 중요성과도 맞닿아 있었습니다. 디자인 프로세스 안에서 산출물들은 크게 아래 세 가지 유형을 벗어나지 않을 것입니다.
1. 스케치 수준의 와이어프레임
2. 스타일이 가미된 화면 디자인
3. (인터랙션이 가능한) 움직이는 프로토타입
와이어프레임 수준의 결과물을 가지고 논의할 경우, 누군가는 색상이나 쉐도우 등 스타일에 대한 이야기를 할 수도 있습니다. 와이어프레임은 대략적인 구조를 빠르게 확인하는 데 있어서 분명한 장점이 있지만, 보는 이들의 상상력이 필요하기 때문에 경우에 따라 다르게 해석될 여지가 있습니다.
이런 오해를 줄이기 위해서 때때로 스타일이 가미된 화면을 가지고 논의하는 경우도 있습니다. 이 경우, 실제와 가까운 화면이기 때문에 좀 더 실무적인 논의가 가능합니다. 하지만 이 역시 아쉬움이 남습니다. 바로 ‘인터랙션’을 표현하기 어렵기 때문입니다.
Koen과 Jorn은 이런 고민에서 출발하여 프로토타이핑 툴을 만들기 시작했다고 합니다. 정지된 화면이 아니라 인터랙션이 가능한 화면을 가지고 논의할 경우, 사용자의 경험을 실제로 눈 앞에서 마주하며 이야기 할 수 있습니다. 때문에 프로토타입은 명확한 커뮤니케이션에 도움이 됩니다.
구현 수준별 디자인 산출물을 펼쳐놓고 보니, 프로토타이핑은 기존 디자인 작업과 다르지 않다(Prototyping is just design)는 말이 더욱 와 닿았습니다.
뉴 플랫폼의 등장과 코드 기반 프로토타이핑
VR과 IoT, 그리고 AI에 이르기까지 기존에 없던 새로운 플랫폼들이 하루가 멀다하고 등장하는 요즘입니다. 지금까지 PC와 모바일의 인터랙션만을 고민하던 디자이너들은 새로운 도전에 직면하고 있습니다.
이런 상황에서 새로운 인터랙션에 대한 아이디어를 어떻게 구현하고 어떻게 커뮤니케이션해야 할까요? 프레이머팀은 그 해결책을 ‘코드(code)’에서 찾고 있었습니다. 컴퓨터의 언어인 코드를 활용하면, 그 무한한 확장성을 통해 상상했던 인터랙션을 얼마든지 구현할 수 있기 때문에 새로운 환경에 유연하게 대처할 수 있습니다.
디자이너가 처음부터 네이티브 언어에 접근하려면 학습의 어려움으로 인해 금방 질려버릴 수도 있습니다. 그래서 Koen은 상대적으로 쉬운 스크립트언어 기반의 툴을 생각했다고 합니다. 프레이머는 훨씬 더 간단한 문법으로 사용할 수 있는 커피스크립트를 통해 자유로운 인터랙션 구현이 가능하며, 최근까지도 다양한 분야에 대한 참신한 프로토타입이 공유되고 있습니다.
간단한 시연 — Auto Code & Direct Manipulation
이어서 Jorn이 프레이머의 기본 기능과 간단한 프로토타입 구현 방법을 선보였습니다. 프레이머는 코드 기반의 프로토타이핑 툴이기 때문에 코드를 재사용하거나, 모듈을 활용하는 등, 불필요한 반복 작업을 줄이고 효율적으로 일을 진행할 수 있는 장점이 있습니다.
또한 최근 업데이트 된 ‘Auto Code’ 기능을 사용하면 직접 코드를 작성하지 않고도 레이어 생성부터 스테이트와 이벤트 추가까지 간단하게 구현할 수 있으며, 프리뷰 패널에서 곧바로 레이어를 편집할 수도 있습니다.
Q&A
마지막으로 궁금한 점들을 자유롭게 질문하는 시간을 가졌습니다. 아래는 몇 가지 대표적인 질문들입니다.
1. 큰 회사와 스타트업의 업무 방식, 의사결정 과정은 어떻게 다른가?
Koen과 Jorn은 과거 페이스북에서 일한 경험이 있는데, 당시를 회상해보면, 큰 회사에서는 수 많은 사람들이 함께하기 때문에 커뮤니케이션에 있어서 복잡한 문제들이 종종 발생한다고 했습니다. 각자 담당하고 있는 프로젝트, 현 상황에 대한 서로 다른 이해 수준 등으로 인해서, 공감대를 형성하기까지 시간이 오래 걸린다는 점을 이슈로 꼽았습니다. 또한 최종 결정이 이루어질 때까지 많은 단계를 거쳐야 한다는 점도 이미 많은 이들이 경험하고 있는 현실입니다.
반면에 작은 규모의 스타트업에서는 한번에 여러가지 일들이 벌어지며, 각자 맡은 부분들이 다르기 때문에, 매우 빠르게 의사결정이 이루어진다고 합니다. 그런 이유로 스타트업의 의사결정은 사용자에게 곧바로 전달되기도 하며, 좋은 결정은 호응을 얻지만, 반대의 상황에서는 곧바로 외면을 받게 되기도 한다는 점이 큰 회사와 다른 점이라고 할 수 있습니다.
2. 프레이머는 어떤 디자인 프로세스를 가지고 있는가?
프레이머는 여전히 소규모 팀을 유지하고 있으며 개발에 대한 이해를 갖춘 디자이너, 디자인에 대한 이해를 갖춘 개발자가 거의 1대 1 비율로 구성되어 함께 일하고 있다고 합니다. 이런 교집합 덕분에 여러가지 기능들에 대한 업데이트를 동시에 진행하면서도 발생하는 이슈에 기민하게 대응할 수 있다고 설명했습니다.
아울러 여러가지 프로토타이핑 툴에 대해서도 언급했는데, 몇몇 툴들은 최소한의 구현 수준을 지원하는 까닭에 관심이 덜 가는 반면, 비주얼 코딩이 가능한 오리가미 같은 툴은 여전히 매력적이라고 했습니다. 하지만 당연하게도(?) 프레이머의 디자인 프로세스에서 주로 사용하는 프로토타이핑 툴은 프레이머라고 합니다.
3. 프레이머에서 작성한 코드를 실제 개발에 활용할 수 있는가?
프레이머의 코드를 실제 개발에 그대로 활용하기는 무리가 있습니다. 궁극적으로 개발과의 실질적인 연계성을 고려하고 있다고 하지만, 모든 플랫폼을 대응하기에는 엄청난 시간과 비용이 필요하며, 복잡하게 얽혀있는 비즈니스 상의 이해관계도 장벽으로 작용합니다. 그러나 이 문제에 대해 많은 사용자들이 꾸준히 개선을 주문했고, 프레이머팀도 충분히 이해하고 있다고 합니다. 여러가지 실험적인 시도들이 있는 만큼 언젠가는 이에 대한 해결책도 나오리라 기대합니다.
이 질문에 대해서 Koen은 프레이머가 코드를 사용하기 때문에 개발자들이 보다 익숙하게 받아들일 수 있으며, 이해하기도 쉽다고 설명했습니다. 개발에 실제로 이어지지는 못하더라도 코드를 통해 힌트를 제공할 수 있다는 점은 분명한 장점이라고 할 수 있을 것입니다.
#
그동안 여러 차례 포스팅을 통해 프레이머에 대해 자세히 언급했었지만, 실제로 창업자를 만나고 나니 프레이머가 더욱 친근하게 느껴졌습니다. 그리고 그들이 들려준 이야기들은 인터랙션 디자인을 비롯하여 업무 전반에 대해서 돌아볼 수 있는 좋은 경험이었습니다.
특별한 경험을 선사해준 Koen과 Jorn에게 감사를 전합니다.
