노코드 툴 Framer 배우기 #3

Framer 배우기_Day3

오늘은 Framer의 웹사이트 기본 세팅과 사용자 반응문자 지표 수집, CMS 활용에 대해 알아보았다.

 

---

 

사용자 데이터

랜딩페이지 제작을 완료했다면, 실제 사용자 데이터를 받을 수 있는 기능이 있다. 

 

 

랜딩페이지에 이메일을 작성하는 모듈을 제작하고, Form 레이어에 Send To → Google Sheets로 연결해주면, 이메일 입력시, 스프레드 시트에 이메일이 잘 모이는 것을 확인할 수 있다. 이 기능으로 메일을 수집하여, 서비스 런칭 시 연락을 돌리는 등의 사용자와의 연결이 가능하다.

 

 

+ 추가적으로 메일을 수집하려면, 메일 주소를 보낸 뒤, 성공적으로 주소가 보내졌다는 화면을 제작하여 사용자의 상황을 안내하는 것이 필수적으로 필요하다. 성공 화면을 먼저 제작해주고, 버튼 컴포넌트에 Link To → Create Variable로 버튼을 누르면 화면을 이동할 수 있는 설정을 넣어준다.

 

 

그리고 실제 화면 페이지에서 button 패널에서 이동할 페이지를 설정해주면, 버튼을 통해 사용자의 다음 행동을 유도할 수 있다.

 

 

SEO

랜딩페이지를 만들면 필수적으로 SEO를 설정해주어야 한다. SEO를 설정하지 않으면 링크 직접 전달 이외에 사용자가 접속할 수 있는 방법이 없기 때문에 꼭 설정해주어야 한다.

 

 

SEO는 우측 상단 Site Settings에서 설정할 수 있다. 차례로 입력하면, 하단 Preview로 어떻게 SEO가 구성될지 미리 확인할 수 있다. 또 Favicon, OG Image 등을 준비하면 더욱 완성도 높은 페이지로 마무리 할 수 있다.

 

 

방문자 지표

Framer은 방문자 지표를 확인할 수 있어 이를 바탕으로 개선에 활용할 수 있다. 우측 상단에 차트 아이콘을 누르면 확인이 가능하다.

 

 

CMS

평소 개발 영역에서 들어보았던 CMS도 Framer에서 적용해볼 수 있었는데, 한가지 틀을 만들어 데이터만 바꿔 재활용할 수 있는 시스템이었다.

 

 

Framer은 페이지를 추가하는 영역에서 CMS를 선택해 빠르게 만들 수 있다. Blog 형태의 CMS를 만들면 알아서 디자인까지 제공되고, 데이터를 편집, 디자인 수정만 해주면 바로 활성화가 가능하다.

 

 

위처럼 목록 화면이 생기고, 목록 화면 밑 Articles Pages가 하나 더 생성되는데, 이게 상세 페이지가 되는 것이다. 상단 CMS 탭으로 진입해 데이터만 바꿔주면 간편하게 블로그 형식의 사이트를 운영할 수 있다.

 

 

---

 

오늘은 Framer에서 페이지 제작 이후, 배포까지 어떻게 관리하면 되는지, 개발 영역에서만 사용할 수 있었던 CMS는 어떻게 프레이머를 통해 활용해볼 수 있었는지 배워보았다. 사용할 수록 Framerd은 개발자가 아니더라도 페이지를 제작하고, CMS 같은 기능까지 사용해볼 수 있는 훌륭한 툴이라는 생각이 들었다.