프레이머로 개발 비용 낮추기
피그마(Figma) 디자이너의 첫 프레이머(Framer) 도입기
안녕하세요. 저는 비사이드의 디자이너 이지은입니다. 비사이드에서 프레이머를 도입하게된 이야기를 간략하게나마 글로 전달드리고자 합니다.
배경
저는 디자인을 시작한 후 다양한 툴을 사용해 보았습니다. 디자인 트렌드는 빠르게 변하였고, 그에 따라 툴도 빠르게 변화해 왔습니다. 포토샵으로 시작해 XD와 피그마를 사용해 보았으며, 20년 이후부터는 계속해서 피그마를 애용했습니다. 대부분 디자이너가 그랬듯이, 저도 모든 디자인과 시스템의 핸드오프를 피그마로 커뮤니케이션했습니다.
그러나 문제는 대부분의 핸드오프 과정에서 발생했습니다. 움직이지 않는 정적인 화면을 전달하는 과정에서 소요되는 시간과 비용이 상당했습니다. 다음 화면은 어디로 이동하는지, 컴포넌트들은 어떻게 움직이는지, 어떤 모달이 나타나는지 등 실제 화면에서 어떻게 구현되는지 소통하는 과정은 비효율의 극치였습니다. 그러다 보니 디자인된 화면과 실제 개발된 화면의 간극은 오롯이 사용자가 감당해야 하는 부분이였습니다.
도입 이전
이러한 문제를 해결해 줄 툴을 찾다가 프레이머를 사용해서 디자인을 해볼 기회가 생겼습니다.
프레이머 툴이란? 프레이머는 코드 기반의 툴입니다. 이전에는 코드를 입력해 디자인을 하는 방식이었다면 현재는 수많은 업데이트를 통해 코드를 몰라도 디자인을 할 수 있게끔 인터페이스가 바뀐 모습을 볼 수 있었습니다.
먼저 팀 내부에서는 프레이머를 도입하는 것이 괜찮을지 테스트해볼 겸 회사의 서비스 소개 페이지부터 디자인해 보기로 했습니다.
프레이머 도입 이전 목표를 크게 3가지로 나눌 수 있었습니다.
- 컴포넌트 단위 설계, 디자인 시스템이 작업 과정 중에 녹아들어 갈 수 있는가?
- 배포까지 갈 수 없더라도 작동하는 완전한 반응형 웹사이트를 만들 수 있는가?
- 개발자의 의존성 없이 완성된 사이트를 배포할 수 있는가?
프레이머 사용해보기
과거의 홈페이지를 만들었던 경험을 떠올려 보면, 하나의 애니메이션을 구현하기 위해서는 수많은 소통이 오가야 했습니다. 기존에는 움직이지 않은 화면을 전달하면 개발자는 상상의 나래를 펼치며 디자이너의 의도를 해석해가며 만들 수밖에 없었습니다. 디자이너는 글이나 적은 인터랙션으로 전달하곤 했습니다. 하지만 프레이머에서는 이런 일련의 과정 없이 프레이머내에서 플러그인을 사용하거나 움직이는 컴포넌트 단위를 디자인할 수 있었습니다. 또 한 가지 프레이머를 사용하며 느꼈던 점은 시간과 공수가 많이 들어간 디자인은 결국 개발에서도 시간이 많이 쓰일 수밖에 없다는 것을 알게 되었습니다. 이 부분은 뒤에서 자세하게 말씀드리겠습니다.
컴포넌트 단위 설계, 디자인 시스템이 작업 과정중에 녹아들어갈 수 있는가?
- 동적인 컴포넌트 만들기
메인화면에서는 영상과 텍스트 애니메이션, Lottie를 활용해 구성되었습니다. 기존에는 비사이드만의 가치를 전달할 수 있는 문구를 코드로 구현했다면 현재의 메인페이지에서는 프로토타입을 이용하여 간단하게 제작하였습니다. 프레이머에서는 기본적으로 Lottie (Airbnb에서 제공하는 라이브러리) 플러그인을 제공해 주었기 때문에 쉽게 활용할 수 있었습니다. 그리고 백그라운드 모션은 After Effect로 제작하여 비디오 컴포넌트를 이용해 만들었습니다.
메인화면에서 쓰이는 캐러셀 컴포넌트는 기본적으로 제공되는 요소로 디자인할 수 없었기 때문에 새롭게 디자인해야 했었는데요. 이 또한 데스크톱 화면과 모바일에서 동작하는 방식이 달랐기 때문에 반응형으로 만들어야 했습니다. 프로그레스 바는 다양한 화면에서 단계별로 움직여야 했기 때문에 고민이 필요했습니다. 다양한 시도 끝에 Width 값을 Relative로 %를 지정해 주어 어떤 화면에서도 동일하게 보일 수 있도록 했습니다. 그리고 모바일 화면에서는 사용자가 클릭할 수 없기 때문에 모바일 환경에서는 스크롤 할 수 있도록 만들었습니다.
- Navbar 디자인
개발 프로젝트에서 시간이 많이 소요되는 부분 중 하나는 디자인 단계입니다. 디자인 작업은 개발 단계와 밀접한 관련이 있어 시간이 오래 걸리면 개발에도 영향을 미칠 수 있습니다.
예를 들어, 네비게이션바(Navbar)에는 많은 서비스 소개 페이지를 담아야 했습니다. 페이지의 수가 많아 단일 페이지로는 표현하기 어려워 드롭다운 형태로 디자인해야 했습니다. 겉으로는 단순해 보이지만, 사용자가 마우스를 오버하면 메뉴가 펼쳐지고 메뉴를 다시 호버하면 어떤 모습으로 표시될지에 대한 고려도 필요했습니다. 이로 인해 뎁스가 깊은 컴포넌트를 만들어야 했습니다. 또한, 모바일 화면에서도 원활한 작동이 필요했습니다. 모바일 전환 시 네비게이션바가 고정되지 않거나 z-index가 제대로 설정되지 않는 문제가 발생했습니다. 이를 해결하기 위해 구조를 재구성하고 z-index 값을 조정하며 Sticky나 Fixed와 같은 포지션 설정을 바꿔보기도 했습니다. 결과적으로, 반응형으로 디자인된 헤더 컴포넌트는 사용자가 접속한 환경에 따라서 매끄럽게 변화하게 되었습니다.
이처럼 디자인 단계에서 시간이 많이 소요되는 경우, 개발 과정에도 더 많은 시간이 소요될 가능성이 있습니다. 디자인의 복잡성과 기술적인 요구사항에 따라 개발자들이 추가 작업을 해야 하기 때문입니다. 그러나 이러한 노력을 통해 최종적으로 사용자들에게 더 나은 경험을 제공할 수 있습니다.
- 코드 활용하기
다음은 프레이머에서 무한대로 꿈을 펼칠 수 있다고 느낀 부분입니다. 메인페이지에서 카운팅 애니메이션이 필요했었습니다. 프레이머에서는 코드를 혼합해서 컴포넌트를 제작할 수 있습니다. 리액트에 대해서는 모르지만 다행히 저는 GPT의 도움을 받아 부족하게나마 컴포넌트를 제작할 수 있었습니다. 코드를 이용한다면 ‘무엇이든지 창조할 수 있겠구나’를 느꼈습니다.
- 콘텐츠 디자인하기
또 유용했던 기능을 꼽아보자면 바로 CMS입니다. 블로그 게시물이나, 공지사항, 기타 콘텐츠들을 관리하고 생성하는데 굉장히 쉽고 유용했습니다. 아쉬운 점이라면 많은 CMS를 생성하기 위해서는 더 많은 과금을 해야한다는 점이였습니다. 홈페이지에서 활용할 수 있는 콘텐츠는 무엇이 있을지 고민하다가 우선적으로는 공지사항과 약관 페이지등에 활용해보기로 하였습니다.
콘텐츠 화면에서는 자간과 행간 적절한 폰트크기를 활용해 정보의 전달성을 높일 수 있도록 하였습니다. 이용 및 약관 페이지에서는 글자가 상당히 많기 때문에 태그를 달고 스크롤 애니메이션을 이용해 해당 섹션으로 바로 이동할 수 있도록 했습니다.
개발자의 의존성 없이 완성된 사이트를 배포할 수 있는가?
홈페이지를 구축하는데 있어서 정말 빠르게 만들 수 있다는 점은 프레이머의 가장 강력한 장점이 아닐까 싶습니다. 또한, 빌드 없이 즉각적으로 디자인을 반영할 수 있다는 점도 또 다른 장점입니다.
마지막으로 세팅만 하면 끝입니다. Google Analytics 연동이 가능했지만, 기존에 쓰던 코드를 활용해 프레이머에 심어주면 끝입니다. Favicon과 공유되는 이미지 역시 세팅 페이지 내에서 쉽게 적용할 수 있습니다. 이로써 비사이드만의 가치를 담은 서비스페이지가 완성이 되었습니다.
결론 — 그래서 프레이머는?
결론부터 말씀드리자면, 프레이머가 정답은 아닙니다. 개인적으로 사용해보았을 때, 피그마와 비교해보면 그래픽 툴로서의 기능은 상당히 제한적이라는 느낌을 받았습니다. 인터랙션과 애니메이션 구현에는 훌륭했지만, 피그마의 라이브러리 기능이나 인스펙트와 같은 기능은 아직 프레이머가 따라가기에는 부족한 면이 있었습니다. 여러 가지 툴을 경험해보면서 팀의 상황에 맞게 적절한 툴을 선택하는 것이 가장 좋다고 느꼈습니다. 프레이머는 좋은 툴이지만, 현재 가장 널리 사용되는 피그마를 완전히 대체하기에는 아직 어려움이 있습니다. 피그마나 스케치와 같은 툴은 동적인 컴포넌트 구현에 어려움을 겪을 수 있습니다. 예전에 Adobe XD를 사용했던 경험을 생각해보면, 핸드오프를 위해 Zeplin를 통해 디스크립션과 함께 개발자에게 전달하는 경우가 많았습니다. 이러한 문제를 해결한 것이 피그마였습니다. 피그마는 All-In-One 툴로 디자인할 때 반복 작업의 시간을 현저히 단축시켜주고, Zeplin에 있는 기능까지 내장되어 Inspect까지 활용할 수 있다는 장점이 있었습니다. 또한, 피그마 내에서 접근성이 높은 커뮤니티도 갖추고 있습니다. 그러나 프로토타입(Prototype)을 만들 때 동적인 컴포넌트 구현은 다소 어렵다는 점이 아쉬웠습니다. 프레이머의 장점은 만들어진 컴포넌트를 통해 실제 프로덕트까지 활용할 수 있다는 점입니다. 그러나 디자이너가 코드를 알아야 세세하게 활용이 가능하다는 단점도 있습니다. Inspect나 커뮤니티 기능이 강화된다면, 새로운 차세대 툴로 발전할 수 있을 것 같습니다.
현재 프레이머란 툴이 팀 내에서 발생하는 문제점은 완전하게 해결하진 못했지만, 반응형 웹 사이트를 만들어봄으로써 개발과 디자인의 간극을 조금이나마 줄이는 계기가 되었습니다.
장점
- 개발 없이 디자이너 혼자 사이트 배포가 가능하다.
- CMS 기능은 생각보다 편리하다.
- 반응형 웹사이트를 만들 수 있다.
- 제약이 없다. 코드까지 이용하면 모든 것을 표현할 수 있다.
- 프로토타입을 위한 좋은 도구다.
단점
- 그래픽툴로서는 불편하다. 일러스트나 작은 아이콘을 만들기가 어렵다.
- Inspect 가 어렵다. 개발자가 세세한 값을 보기에 어렵다.
- 작은 단위의 디자인 시스템을 다루기에는 무리가 있다.
- 코드를 모르면 한정적으로 사용할 수 밖에 없다.
- 피그마같은 올인원 툴로 쓰기위해서는 개발팀과 밀접한 협업과 상당한 시간이 소요된다.
프레이머로 만든 비사이드 서비스소개 페이지 보러가기
