Framer로 블로그 만들기 - 01
Oct 10, 2022
한 2020년쯤 디자인 시스템이 컨퍼런스 주요 토픽이 되었을 때 부터 Framer 이야기가 많이 나왔었는데, 최근에 토스에서 이를 잘 활용해 엄청난 개선을 이뤘다는 이야기를 듣고 벼르고 있던 Framer 공부를 시작해야겠다고 생각했다.
모든 스터디가 그러하듯 목표가 명확해야 뭐라도 해낼 수 있으므로, Framer를 통해 달성할 목표는 아래 3가지로 정했다.
내가 편하게 검열 없이 블로그를 올릴 수 있는 사이트
취업할 때 매번 만들 필요 없는 나만의 포트폴리오 사이트
취향에 따라 언제든 디자인을 바꿀 수 있을 것
이번 글에서는 첫 번째 편하게 블로그를 생성한 경험에 대해 적어보려 한다.
일단, Framer를 설치합시다.
처음에는 다짜고짜 Framer를 설치했다. 일러스트에서 Figma로 넘어갔던 경험이 수월해서인지, Framer도 별도 강의 없이 손쉽게 시작할 수 있을거라 자만했다. 일단 왼쪽이 레이아웃 패널, 오른쪽에 UI 수정이 가능한 패널이 있었고, 전반적인 구성이 Figma와 크게 다르지 않아 수월했다.
물론 디자인 툴이니 기본적인 웹사이트의 UI를 그리는 데에는 아무 문제가 없었지만, Framer는 반응형까지 고려하며 웹사이트를 만들어야 하다 보니 이 과정에서 자꾸 정렬이 맞지 않거나 레이아웃이 엄청나게 깨져버리는 일이 일어났다. Framer 사용 방법에 대한 튜토리얼을 편리하게 제공하고 있긴 했지만, 애초에 그런 걸 꼼꼼히 보는 성격도 아니고, 원하는 문제에 대한 해결책을 영상 튜토리얼로 찾아내기는 쉽지 않았다.
Figma를 통해 Framer로!
그 이후에는 방법을 바꿨다. 아무래도 아직 내가 가장 메인으로 편리하게 사용하는 툴이 Figma이다 보니, Figma에서 반응형으로 만든 작업물을 가져다가 Framer에서 실제 사이트를 확인하며 개선했다.
생각보다 스타일도 바로 바로 잘 넘어와줬고, 잘 만들어진 시안을 바탕으로 이상한 컴포넌트가 어떤 설정이 이상해서 문제가 발생하는 건지 정확히 알고 개선할 수 있었다. 이 과정에서 Framer의 레이아웃 시스템을 더 잘 이해할 수 있게 된 것 같다.
블로그를 만들 기 전에…
1차 목적은 블로그이다보니 브런치, 미디엄 등을 참고하면서 블로그 레이아웃을 잡던 중 여러 고민이 들었다.
올린 글을 홈페이지에서 어떻게 관리하지?
일반적으로 웹 앱 서비스상에서 콘텐츠는 서버에 저장하여 api를 통해 정보를 받아 프론트 처리된 화면상에 보여주는데, 나는 이걸 해낼 수 없다는 걸 깨달았다.
방문자 수 같은 독자 반응을 보고 싶은데 방법이 없나?
지금 이 실력으론 GA를 연동하기까지 꽤나 시간이 걸릴텐데…그 전 까지는 내가 아무리 열심히 글을 쓰더라도 독자의 반응을 아무것도 알 수 없다니 머리가 아찔해졌다.
공유하기, 댓글, 해시태그, 좋아요, 검색하기 등등 여럿 서브 기능들을 넣고 싶다.
여기서부터는 정말 Framer로 하려는 것이 나의 지나친 욕심인건가 라는 들었는데, Framer 홈페이지에서 계속해서 블로그를 만들기 편하다는 것을 어필하던 것이 떠올라 홈페이지 리서치를 좀 더 하던 도중 CMS를 발견했다.
센스있는 Framer의 CMS 기능
CMS란 컨텐츠를 홈페이지에서 빠르게 관리할 수 있도록 만들어 준 일종의 기본 plugin 이다. CMS 내에서 글을 작성했고 Framer의 기본 컴포넌트를 활용하면 글 내용이 홈페이지에 리스트, 상세페이지로 빠르게 연동된다. 이걸 바탕으로 다행히 글을 관리하기 훨씬 쉬워지고, 홈페이지, 상세페이지 두번 내용을 수정할 필요가 없어졌다.
심지어 상세페이지 자체가 일종의 디자인 시스템처럼 적용되어, 한 페이지에서 적용한 레이아웃이 모든 블로그 상세 페이지에 적용된다!
간단한 분석 기능까지
두번째, 독자 반응 확인하는 방법은 URL 이름을 수정하다가 발견하였다. [Site settings] > [Analytics] 를 통해서 최근 방문자수를 unquie, total count 와 top source 까지 볼 수 있도록 제공하고 있었다!
(근데 아무런 홍보도 안 했는데 대체 블로그 방문자는 어떻게 생겨나고 있는걸까…? Unique count의 기준이 궁금해진다.)
Next To Do
아직 3번째 고민에 대한 해결책을 찾지는 못했지만, SEO까지 보고나니 열심히 서치해보면 분명 방법이 있을 것 같다. 부가 기능을 통해 꼭 제공할 수 있길 바란다. 추가적으로, 컨텐츠가 아직 적은 상태라 Beta를 붙여두었다. 컨텐츠가 5개가 넘어가고, Resume라도 간단하게 사이트에 올려두었을 때, Beta를 제거하고자 한다. 부디 2022년 안에 마무리 되길 바란다.