Framer로 만드는 B2B 웹사이트 디자인 - 1편
이번 년도부터 웹사이트 리뉴얼을 통해 고객 유입을 늘리자는 제품 목표가 설정되었고, 웹사이트 프로젝트에 디자인 담당을 하게 되었습니다. 고객이 광고를 통해 제품 알게 되기까지 그 퍼널에서 가장 중요한 역할을 하기때문에 기획부터 디자인까지 고민했고, 마케팅팀과 긴밀하게 진행되어야 하는 프로젝트라 효율적으로 하는 방법에 대한 논의를 많이 하게 되었습니다.
논의 결과 아래와 같은 상황을 잘 해결할 수 있는 것이 중요했습니다.
마케팅 메시지에 따라 변경해야 될 경우가 많다.
그렇기에 마케팅팀원도 자유롭게 수정하고 테스트할 수 있어야 한다.
고객들에게 제품 설명이 잘 전달되는 이미지가 중요하고, 눈길을 끄는 애니메이션 효과가 중요하다.
그래서, 저희는 이 상황에 맞는 툴로 Framer를 선택하여 웹사이트를 제작하게 되었는데요.
왜 Framer였을까?
많은 기업들이 선택한 프레이머
29cm, toss 등 기업 웹사이트를 프레이머로 제작한 사례가 많습니다.
Framer Awards: Site of the Year 2023 Nominees
해당 링크를 통해 작업한 결과물들을 보면 퀄리티 높은 웹사이트를 만들 수 있다는 부분이 매력적이었고, 실제로 29cm나 toss 등 기업 웹사이트를 제작한 사례가 많았습니다.
Framer로 웹사이트 제작시 좋은 점은 무엇일까
1. 협업하기에 용이하다.
마케터분들도 디자이너 개발자를 거치지 않고 간단하게 수정후 웹사이트 릴리즈를 할 수 있고, 코멘트를 남겨 바로바로 소통할 수 있어 장점이 있습니다.
2. 디자이너가 혼자 웹사이트를 제작할 수 있다.
Framer에 가장 큰 장점은 디자이너가 원하는 데로 코딩 없이 인터랙티브한 웹사이트를 만들수 있다는 점입니다. 다른 웹사이트 제작툴(wix, 워드프레스 등) 같은 툴은 커스텀이 잘 안되고, Scalable 하지 않아 그 툴에 맞는 디자인을 해야 하기 때문에 제약된 상황에서 디자인과 기획을 해야하는 점이 아쉬운 점이었는데요.
Framer는 러닝커브가 다른 툴보다는 적고, Figma를 사용해봤던 디자이너라면 바로 사용할 수 있을 정도로, 유사한 툴이고 다양한 플러그인을 제공하고 있어서 원하는 디자인과 인터랙티브한 UX를 만들수 있어요.
Figma와 유사한 툴이라 디자이너라면 쉽게 제작할 수 있으며, 반응형까지 빠르고 쉽게 만들 수 있습니다.
다양한 플러그인이나 기능을 제공하고 있어, 인터랙티브한 UX를 제공할 수 있는데요.
3. 출시 및 유지 보수가 쉽다.
웹사이트를 출시한 후에도 지속적인 유지보수가 필요한데요. 디자이너나 마케터나 언제든지 웹사이트 수정후 퍼블리시 버튼하나 누르면 업데이트를 할 수 있습니다.
Framer로 기획과 디자인 2주간 작업한 끝에 제작한 웹사이트를 공개합니다!
다음 2편에는 Framer로 다양한 애니메이션을 어떻게 만들 수 있는지 공유하려 합니다!
Framer로 웹사이트 제작을 고민하시는 분이나 툴을 함께 배우고 교류하고 싶은 분들은 Linkedin으로 편하게 연락주세요!
