Framer로 만드는 웹사이트
퍼블리싱, 디자인, 업데이트, 마케팅을 한 번에!
Framer의
신기능
Framer에 웹사이트를 제작할 수 있는 기능을 추가되었습니다. Framer Site로 알려졌던 베타 기간이 끝나고 지금은 프레이머와 하나가 되었습니다. 이 글을 쓰는 기준으로 약 2달 정도 지난 상태입니다.
주로 모바일 앱의 프로토타이핑을 하던 툴로 알려진 프레이머는 이제 서비스의 랜딩 페이지 혹은 초기 서비스의 기능을 안내하는 웹사이트를 제작하는 툴로 확장되었습니다. 초기 홍보 문구는 "전환율이 높은 웹사이트를 즉시 만든다."였는데, 지금은 ship site with style로 변경되었습니다.
프레이머에 대한 소감과 디지털 제품의 제작과 프로세스와 새로운 툴을 대하는 태도를 생각해보았습니다.
웹사이트를
어떻게 만들길래?
토스가 이모지를 만들고, 홍보하기 위한 웹사이트가 프레이머의 사용 사례 중 하나로 웹사이트에 등록되어 있습니다.(지금은 Toss Brand, https://brand.toss.im 가 올라와 있네요.)
프레이머는 빠르게 만들면서 멋지다는 점이 장점입니다. 랜딩 페이지와 포트폴리오 사이트에 적용되는 스타일을 만들 수 있으며, 다른 서비스의 기능을 간편하게 첨부할 수 있고, 컴포넌트, 모션과 이펙트, 커스텀 폰트 적용, CSS 스타일을 편리하게 적용할 수 있습니다.
프레이머 이전의 실패한 웹디자인 툴은 HTML을 그래픽 툴처럼 편집할 수 있게 하려고 했지만, 프레이머는 HTML 특성을 그대로 활용합니다. 그래서 디자이너가 처음 접하게 되면 조금 당황스러울 수 있습니다. 코드에 맞춰서 배치가 되는 기능이 많아서 HTML과 CSS의 Flex와 Grid 그리고 React를 알고 있으면 도움이 됩니다.
반응형 디자인에 높은 점수를 주고 싶은데요. 반응형을 설계하기 위한 절차가 단순하고, 각 뷰를 눈으로 비교하면서 작업이 가능해서 편리합니다. 브레이크 포인트도 원하는 만큼 잡을 수 있습니다. 5~6년 전이라면, 반응형 디자인이 어려울 수 있지만, 피그마나 스케치를 약간 다루어 봤다면 쉽게 적용해 볼 수 있습니다.
코드를 거의 안 봐도 작업할 수 있지만, Head와 Body에 커스텀 코드를 넣을 수 있어서 확장성도 있습니다. 마케팅에 대해 사용되는 Formspark, Google Optimize, Hubspot, intercom, Mailchimp 등을 쉽게 붙일 수 있게 되어 있습니다. 100개 내외의 콘텐츠를 쉽게 올릴 수 있는 CMS 기능도 제공합니다.
가장 좋은 점은 국내의 '식스샵', '아임웹'처럼 바로 웹사이트를 올릴 수 있다는 점입니다. 무료로 접속해도 모든 기능을 사용해볼 수 있기 때문에 비용 부담도 적습니다. 무료로 웹에 게시가 가능하며, 도메인 구매해서 연결하기도 쉽습니다.
빠르고 깔끔한 해결책이지만
사전 지식이 필요하다.
HTML과 퍼블리싱은 매우 애매한 분야 중 하나입니다. 프런트엔드 개발자가 하기도 그렇고, 디자이너가 처리하기도 난감한 부분이 있는 회색 지역입니다. 하지만 제품을 만들고, 사람들에게 알리려면, 'Landing Page'가 반드시 있어야 합니다.
웹 페이지를 하나 올리려면, 문구를 짜내서 글을 쓰고, 마케팅 장점을 설명하고, 방문객도 유치해야 합니다. 작은 페이지인데, 해야 할 일은 웹사이트 프로젝트의 규모와 관계없이 거의 비슷합니다. 그런데 막상 기술적인 도움을 얻기 힘듭니다. 외주를 주기엔 너무 가벼워 보이고, 직접 처리하려면 답답합니다.
"아하! 그럼 그럴 때, 프레이머가 도움이 되겠네?"
라고 생각하기 좋겠지만, 안타깝게도 이 툴은 완전 초보가 쓰긴 어렵습니다. 빠르지만, 친절하지는 않습니다. 출시 이후에 계속해서 도움말과 상황 설명이 업데이트되고 있지만 모든 문제를 해결해주진 못합니다.
어느 정도는 웹사이트 제작 경험이 있는 사람이 써야 쉽습니다.
기능 패널을 보면, 디자인과 코드가 밀접한 관계로 구성되었다는 것을 알 수 있다.제품 디자인의 전체 흐름에서 제작 후, 사용자 유입과 마케팅을 고민하는 프로덕트 디자이너에게 프레이머는 큰 힘이 됩니다. Framer로 만드는 웹사이트는 마케팅 기능도 넣을 수 있고, 미디어와 영상도 넣을 수 있고, 애니메이션을 줄 수도 있고, HTML과 CSS도 컨트롤할 수 있고, 코드도 쓸 수 있습니다.
많이 쓰는 기능의 UI는 편리하지만, 숨겨져 있는 세팅도 많아서, 전체 기능을 숙지해야 편리하게 쓸 수 있습니다. 또 레이아웃에 문제가 생기면, HTML을 알아야 풀 수 있는 문제가 좀 있습니다. 패널의 기능이 기능이 아니라 CSS 속성 컨트롤이라서 이해가 필요합니다.
결론은 10장 내외의 웹페이지와 간단한 블로그 기능이 포함된 웹사이트를 빠르게 만드는 코드 베이스의 툴입니다. 더 큰 규모로 확장할 수도 있습니다. 바로 웹사이트를 올리고, 기본 분석 기능으로도 SEO를 준비하고, 유입 고객을 볼 수 있습니다. 피그마처럼 협업도 가능합니다.
버그는 좀 있지만, 사용성도 높은 찰떡같은 툴입니다.
새로운 툴과
새로운 프로세스
생각한 곳에 생각한 기능이 있고, 쓸데없는 고민 없이 빠르게 만들 수 있는 프로세스를 제공합니다. '만들어서 빠르게 게시하자!'라는 목적으로 똘똘 뭉친 툴인데, 대강 쓱쓱 해도 구성이 잘 됩니다. 큰 그림을 보고, 경험이 있는 사람이라면, 빠르게 웹사이트를 만들어서 게시 할 수 있습니다.
대부분의 제작 툴이 디자인과 코드로 되어 있는 것 같지만, 실제로는 프로세스가 기계화된 것에 가깝습니다. 포토샵을 사용하면, 레이어와 채널 개념에 익숙해져야 하고, 피그마를 쓰면 컴포넌트과 협업에 익숙해져야 합니다.
지금은 포토샵 외에도 많은 신세대 툴이 나오고 있고, 새로운 툴은 새로운 프로세스에서 만들어집니다. 그래서 툴의 기능보다 프로세스에 대한 이해가 필요합니다. 트랜드는 점점 코드가 중심이 되고 있고, 구조를 만들어 공유하면서 작업하는 형태로 진행되고 있습니다.
스케치와 피그마는 디자이너가 일 하는 방식을 많이 변화시켰고, 디자인 작업에 효율성을 높이면서 체계적인 업무 방식을 요구하게 되었습니다. 피그마를 효율적으로 사용하게 될 경우, 컴포넌트와 스타일이 연결되어서 약간만 변경을 해도, 페이지 전체 레이아웃이 변하게 됩니다. 포토샵으로 디자인할 때는 생각하지 못한 프로세스입니다.
문제 해결과 커뮤니케이션이 점점 더 중요해지고 있습니다. 당장의 업무에 도움이 안 되고, 내 일이 아니어도, 폭넓은 경험을 해봐야 일을 하는 진짜 능력이 성장합니다. 내 업무 영역에만 머물러 있으면, 결국 하던 일만 하게 됩니다.
많은 회사들이 프로덕트 디자이너 체제와 PO 혹은 PM 체계로 운영되기 시작하면서 효율성과 합리성을 많이 요구 합니다. 팀 단위의 업무에서는 목적을 성취하는 것이 중요합니다. 프레이머는 프레이머보다 더 적극적으로 업무의 경계를 허무는 툴입니다. 어느 회사든 전환율이나 매출을 목적으로 하기 때문에 적합한 규모의 웹페이지를 빠르게 게시하면서 브랜딩을 가져가는 전략을 시도하는 계기가 될 수 있습니다.
또 개인적인 사이드 프로젝트의 랜딩 페이지나 개인 포트폴리오를 만들 때도 아주 유용할 듯 싶습니다. GitHub나 기타 FTP를 안 써서 웹서버 세팅 등으로 개발자에게 아쉬운 소리 하지 않아도 되고, 업데이트도 빠르게 때문에 매우 쾌적합니다. 지원 사항도 계속 좋아지고 있기 때문에 기대됩니다.
요약
어디에 쓸까?
웹사이트, 랜딩 페이지, 반응형 웹사이트, 간단한 블로그가 있는 웹사이트
어디서 쓸까?
작은 스타트업, 큰 회사의 팀 혹은 내부 스타트업,
빨리 랜딩 페이지 만들어서 올리고 싶은 모두!
누가 쓸까?
HTML과 CSS를 잘 아는 디자이너, 디자인을 잘 하는 프론트엔드 개발자, 마케터.
혹은 새로운 걸 좋아하는 사람. 혼자서도 일 잘하는 사람.
