[Framer] 프로토타이핑 툴

2021년 초반에 리액트 기반의 프로젝트를 진행한 적이 있었다.  당시에 퍼블리셔와 디자이너는 외주 인력이었고, 개발과 기획만 내부에서 수행했다. 

참여자 전원이 리액트 기반의 프로젝트는 처음이었다. 리액트는 퍼블리싱과 개발의 경계가 불분명해서, 업무를 주고 받는 방법부터 정의를 해야 할 판이었다.  서버 개발자가 전체 구현을 하는 것이 어떨지도 고려했었는데, 디자인을 깨지 않으면서 서버 개발까지 하는 것은 무리라고 판단하여 퍼블리셔의 손을 거치기로 했었다. 

서로 다른 파트 담당에게 피해를 주지 않기 위해 노력했던 것이 기억난다.  퍼블리셔분은 디자인 의도를 최대한 살리면서 구현하기 쉬운 형태로 넘겨주기 위해 개발자와 수시로 미팅을 했었다.   나도 별도로 리액트 강의를 들으면서, 각 파트에서 정의하는 것을 기획에 반영하느라 바빴던 것으로 기억난다.  기획 의도와 주요 기능, 기능 간의 위상 차이  등을 최대한 강조해서 화면 설계서로 전달했다.  화면 설계를 바탕으로 디자이너와 퍼블리셔가 먼저 협업하여 진행하고, 서버 개발자와 공유하면서 수정해나갔다. 

리액트를 왜 사용하는지 궁금하다면, 코딩애플님의 설명을 추천한다.

https://www.youtube.com/watch?v=LclObYwGj90&t=8s 

리액트 프로젝트에서 기획을 어떻게 정리하면 좋을지 리서치하다가 우연히 프레이머를 발견했다. 리액트 프로젝트 수행시 알았다면, 이 기반으로 한번 작업해보았어도 좋았을 법했지만.. 당시에는 툴을 학습하고 공유할 시간은 부족했다. 지금이라도 찾았으니, 다음 번엔 사용해볼 수 있도록 학습해볼까 한다.

찾아보니 토스에서도 사용하는 툴이라고도 한다. 현업에 적용한 사례를 보니, 이러한 방식으로 디자인을 관리한다면 매우 효율적으로 통일성을 주면서 아름답게 표현할 수 있겠다는 생각에 눈이 번쩍 뜨였다. 

https://www.youtube.com/watch?v=HQktfrNBZV4&t=9s 

 

프로토타이핑 툴에 대한 관심에 이것저것 배우고 사용해보았는데, 아직은 나에게 파워포인트가 잘 맞는다.  XD를 이용해서 기획을 해보았는데, 기획자가 디자인적인 부분에 시간을 너무 쓰게 하는 것이 사용하기 적절하지 않다는 판단이었다. 액슈어도 특강을 들으면서 사용해보았는데, 온라인 기반의 프로토타이핑 툴은 휙휙 넘겨보는 것이 잘 안되고.. 무엇보다 다른 팀원들까지 사용법을 알아야 해서 확산하기에는 어려움이 있었다.

그럼에도 불구하고, 프레이머는 사용을 익혀두는 것이 좋겠다고 판단..

리액트에서 보여줄 수 있는 디자인과 움직임에 대해 기획적으로 파악하는 것이 좋다고 생각한다.  가입하고 스튜디오를 열어보니 첫인상은 XD와 비슷하다는 생각이다. 작업 패널 위치나, 오브젝트 사용 방법 등이 유사하다.  이 툴을 잘 활용하는 베스트 프랙티스 같은 것이 있다면 속성으로라도 학습할 수 있다면 좋겠다.

 

학습 관련 사이트

https://harbor.school/ko/courses

Courses

https://www.inflearn.com/course/%ED%94%84%EB%A0%88%EC%9D%B4%EB%A8%B8-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85

프레이머를 활용하여 쉽고 간단하게 프로토타입 제작하기 - 인프런 | 강의