프로토타이핑 툴, Framer에 대한 단상
최근에 다시 업무로 Framer를 사용한 일이 있어서 근 1년간 실무에서 사용해본 느낌을 정리해보려 한다. Framer는 간단한 코딩을 기반으로 하는 프로토타이핑 툴로, 페이스북의 Origami와 함께 최근들어 각광받고 있다. 1년전 우연한 기회에 radiofun 님의 소개로 접하게 되어, 밋업에서 나름 발표도 하고 꽤 진지하게 파보려고 하다가 업무에 치여 야근하다보니 어느새 멀어져 있는 상황 발견. 더 늦기전에 한번 정리해보고, 앞으로는 삽질하며 알게된 부분들을 공유해보려 한다.
들어가기 전에, 일단 나의 개발 관련된 배경은 대학생 시절 플래시 액션스크립트로 간단한 플래시 웹사이트 및 내비게이션 등등을 짜본 적이 있었고, 나름 재미를 느껴 액션3.0도 깨작깨작 해보는 와중에… 애플에서 플래시를 아작내면서 그 이후로 5년간 개발 관련하여 아무것도 공부한 적이 없다. 그 외에는 아주 기초적인 수준의 html / CSS 지식이 있는 정도. 자신의 배경과 비교해보면 좀더 난이도 면에서 객관적인 글이 되지 않을까 싶다.
1. 코딩이 처음이라면 쉽지 않다
가장 많이 들어본 질문이었다. “디자이너가 배우는 데 얼마나 걸릴까?” 만약 스크립트 경험이 있다면 ( 특히 플래시 액션스크립트와 유사하다는 느낌을 많이 받았다 ) 익히기가 상당히 수월하다. 퇴근 후 2주 정도 Framer 공식 사이트에 있는 예제들을 따라해보니 아주 간단한 인터랙션 정도는 만들 수 있게 됐다. 하지만 코딩이 완전히 처음이라면, 생각보다 진입장벽이 높다.
예를 들어 아래와 같이 드래그로 리스트 순서를 바꿔주는 멋진 프로토타입을 만들 수 있다.
심플하고, 자연스럽지만, 이 인터랙션을 Framer로 만들기는 생각보다 쉽지 않다. 예시 사이트에 올라온 코드는 주석 포함 125줄정도이다. 그것도 툴을 직접 만든 이들이 짠 코드이기 때문에 아마도 가능한 가장 짧은 코드가 아닐까 싶고…이걸 내가 막코딩으로 짠다면 300줄이 훌쩍 넘을것 같은 느낌.
위와 같은 화면에 친숙한 디자이너라면 바로 도전해도 좋다. 데이터타입, 반복제어문, 변수, 함수, 배열 같은 개념이 사용되는데, 이 단어들이 익숙하지 않다면 초반에 많이 고생하게 된다. 주변에 친한 개발자가 있다면 붙잡고 도움을 요청하자.
2. 서비스 전체 플로우 보다는, 특정 인터랙션 구현에 적합
Framer는 위 예시로 든 화면처럼, 특정 인터랙션의 구현에 초점이 맞춰져 있다. 일반적인 디자인팀의 리뷰 상황처럼 스틸컷 30장이 넘어가는 이미지들을 자연스럽게 연결시켜 돌아가도록 하기에는 매우 힘이 든다. ( 시간도 엄청나게 든다 ) 대신, 한두가지 인터랙션을 굉장히 세밀하고 디테일하게 만들어 볼 수 있는 장점을 가진다. iOS에서 사용된 네이티브 인터랙션들은 거의 동일하게 만들어 낼 수 있다 해도 과언이 아니다.
위 GIF도 실제로 Framer로 만들어진 인터랙션이다. ( 개인적으로 처음에 Blur 효과가 자연스럽게 구현되는걸 보고 바로 배워야겠다고 결심함 ) 모든 구현을 코드로 제어하는 만큼, 그 자유도도 상당히 높은 편이다.
3. 프로젝트 멤버들을 움직이게 한다
기획서 보다는 디자인이 좀더 ‘실제 제품에 가까운’ 느낌을 준다. Framer 프로토타입은 그보다 ‘더욱’ 제품에 가까운 느낌을 준다. 실제 개발을 입힌 느낌과 크게 다르지 않기 때문에, 디자이너의 아이디어에 팔짱끼고 앉아있던 많은 사람들의 책상을 끌어당기고, 의사결정에 참여시기키가 쉬워진다.
LINE Stickers 의 튜토리얼 페이지의 경우, ‘재미’를 최우선으로 전달하기 위해, 기존 라인스타일과는 달리 애니메이션을 제안했고, 개발/기획에서 모두 Framer 프로토타입을 본 후에 긍정적으로 반응했다. 실제 개발 구현에 있어서도 Framer 산출물과 대비해가며 가이드가 진행됐다.
프로토타입이 없는 상태에서 저 액션들을 말로, 또 가이드 문서로 커뮤니케이션 한다고 생각해보면…한숨부터 나오는 상황이다. 애니메이션의 텐션감을 ‘슈와아악’ 이라며 입으로 바람소리 내며 설명하는것도 이제는 지친다.
4. 툴 자체가 계속 발전한다
한 6개월동안 전혀 들여다보지 못하다가, 실무에서 기회가 되어 다시 열어보니 이건 뭐 거의 새로운 툴이나 마찬가지가 됐다. 기존에는 웹 기반 스크립트이기 때문에, 반드시 개인 FTP든 사내 FTP든 간에, URL을 가질 수 있도록 서버에 직접 개인이 업로드 한 후에야 폰에서 확인할 수 있었는데 이젠 ‘Share’ 버튼 하나로 바로 URL을 준다 ! 그뿐만 아니라 업로드 하지 않고 localhost로 붙여서 실시간으로 수정을 확인할 수도 있다. ( 미러링 )
그뿐만 아니고 지원하는 컴퍼넌트도 쉬지않고 늘어난다. 바운싱 애니메이션이 붙어있는 진짜 스크롤링, 컨텐츠에 따라 자동으로 페이지 계산을 해주는 페이지, 엊그제는 슬라이더 컴퍼넌트도 추가된것 같다. 업데이트 할 때마다 이들의 단골 멘트가 참 멋져보이는데, 우리가 복잡한건 다 해줄테니 너네들은 맘 놓고 진짜 중요한 일 — 인터랙션 테스트 — 에만 집중해 라고 한다. 그리고 그게 UI 디자이너가 해야할 일이 맞다.
5. 디자인 하기도 바쁜데 언제 써먹나
결론적으로 말하자면 프로젝트가 잘 걸려야 하겠다. 인터랙션이 중요하다라는 공감대가 프로젝트 멤버들에게 이미 있고, 디자인 컨펌 이후 나에게 3~5일의 인터랙션 디벨롭 시간이 확보된다면 ! 그때가 바로 Framer를 사용할 때라고 본다.
보통 디자인과 개발은 병행 진행되는 경우가 많지만, 어떤 프로젝트에 따라서는 개발 공유 이후 디자이너 리소스가 붕 뜨는 경우가 있다. 보통 ‘디자인 검수' 라고 부르는 기간에 함께 인터랙션 가이드를 진행하는 편이 현실적이었던 것 같다. 물론 가장 이상적인 방향은 프로젝트 시작부터 인터랙션에 대한 리소스를 따로 설정하는 것이다.
6. 디자인과 개발의 연결고리
모든 디자이너가 다 프로토타입을 직접 만들 필요는 없다. 목마른 녀석이 우물 판다고, 작은 인터랙션 하나를 꼭 넣고 싶어진다면 바로 그 사람이 직접 작업하는게 가장 효율적이라고 생각한다. 그럴 경우 장점은, 개발자와 한층 더 긴밀하게 작업할 수 있다는 것. Framer로 작업하다보면 어쩔 수 없이 개발의 관점에서 UI를 고민하게 되고, 개발자는 해당 목업을 보며 불필요한 커뮤니케이션을 줄이고 명확하게 공통의 청사진을 그려낼 수 있다.
말이 거창해졌는데, 여튼 몇년 지나지 않아 필드에는 이쪽 Role이 많이 생길것 같다. 인터랙션은 점점 더 중요해지고, 디자인 자체는 플랫해지면서 힘을 빼는 상황이다. 편집디자이너는 필수적으로 자신의 디자인이 구현되는 소재인 ‘종이’에 대해 잘 아는것과 같이, UI디자이너도 ‘제품’의 구현 과정에 좀더 다가서는 계기가 프로토타이핑 툴로 인해서 열린것 같아서 개인적으로 반갑다.
