왜 Framer(프레이머)로 블로그를 만들었나요

기존에 존재하는 플랫폼을 이용하지 않고 직접 만든 이유

글을 쓸 수 있는 플랫폼은 굉장히 많아요. 미디엄, 네이버 블로그, 브런치, 티스토리 등등.. 기존에 존재하는 플랫폼을 이용하면 SEO(검색 엔진 최적화) 걱정도 없고, 방문자 관리도 어렵지 않고, 유지 보수도 딱히 필요 없는데 ‘왜 굳이 웹 사이트를 만들고 싶었냐!’고 묻는다면 남들 다 하는 그런 거 말고 나만 할 수 있는 것! 내 것! 이 갖고 싶었다는 작은 이유와 실무에서는 Figma를 사용하고 있고(앞으로도 그럴 것 같지만) 이게 과연 실무에 최적화된 툴(Tool)일까?라는 생각이 문득 들었어요.

'프로덕트 디자이너가 실무에서 경험해 볼 수 있는 여러 툴을 알고 있어야 선택도 가능하지 않을까?'라는 생각에 최근 사용처가 늘고 있는 Framer(이하. 프레이머)를 공부하기로 했고, 사이트 하나를 직접 만들어보는 게 가장 확실한 공부가 될 것 같아서 시작했어요.

Framer(프레이머)로 무엇을 할 수 있나?

프레이머로는 개발자 없이 노코드로 웹 사이트를 만들 수 있어요. 템플릿을 사용하면 사실상 디자이너 없이도 누구나 웹 사이트를 만들 수 있습니다.(물론 코드를 알면 좀 더 디테일한 설정과 기능을 사용할 수 있어요.)

저의 경우에는 프레이머로 디자인 > 퍼블리싱 > CMS를 통한 콘텐츠 작성, 발행 > SEO 관리 > Analytics를 통한 방문자 관리 이 모든 과정을 개발 리소스 없이 최대한 사용해 보고 싶었기 때문에 프레이머에서 제공하는 튜토리얼을 참고하여 사이트를 만드는 작업을 진행했습니다.

(*참고로 프레이머는 유튜브와 커뮤니티를 통해 다양한 튜토리얼을 제공하기 때문에 다양한 기능을 공부할 수 있어요.)

Framer(프레이머) 사용 방법! 프레이머로 블로그 만들기

프레이머 CMS 적극 활용하기

처음엔 피그마 to 프레이머 기능을 사용해서 피그마에서 디자인을 하고 프레이머로 넘겨 다듬으려고 했으나 프레이머에서 바로 CMS 데이터를 활용해서 디자인을 하는 방식이 편하게 느껴져서 프레이머에서 바로 디자인을 하기로 결정했습니다. (편하게 느껴지기까지 몇 번이나 처음부터 다시 만들었지만요..!)

프레이머의 CMS기능은 콘텐츠 작성과 데이터 관리를 한 곳에서 할 수 있어요. 이 데이터를 활용해서 콘텐츠 리스트 화면부터 상세 화면까지 모두 동일한 데이터를 이용할 수 있죠.

CMS에서 어떤 항목을 구성할지 설정할 수 있고, 필요한 항목을 추가하거나 삭제도 할 수 있어요. 저는 추후 콘텐츠를 카테고리별로 분류하는 필터 기능을 위해 카테고리 항목과 콘텐츠 작성 시기를 표기하기 위한 날짜 항목을 추가했습니다. 그 외에도 본인이 필요한 기능은 CMS editing을 통해 구성할 수 있어요.

CMS 데이터를 디자인 화면에서 Blog Item이라는 형태로 바로 끌어와서 디자인 커스텀을 할 수 있어요. 이때 CMS 항목 중에서 사용하고 싶은 항목과 그렇지 않은 항목을 디자인 컴포넌트에서 제거하거나 추가를 할 수 있고, 화면에 따라 같은 데이터로 다른 UI를 구성할 수 있어서 정말 편하다고 생각했던 기능이었어요.

디자인 시스템 만들기

Figma에서 디자인 시스템을 만들어 프로덕트에 적용한 것과 동일한 방식으로 프레이머에서도 컬러 시스템, 타이포 시스템 등을 만들어 사용할 수 있어요. 모든 화면에 공통으로 적용되는 GNB와 Footer와 같은 요소들은 컴포넌트로 만들어 모든 화면에서 같은 형태로 적용되도록 했어요.

블로그 레이아웃 구성하기

제가 작성할 대부분의 콘텐츠가 글이 중심이기 때문에 글이 ‘잘’ 읽히는 형태를 만들기 위해 고민했어요. 이 부분에 있어서는 브런치나 여러 IT 회사의 기술 블로그를 참고했습니다.

메인 화면에서는 콘텐츠 리스트를 어떤 방식으로 보여줄지, 전체 글 리스트는 따로 필요할지, 상세 페이지는 어떻게 구성할지, 그리고 이 모든 화면들의 데스크탑, 태블릿, 모바일 레이아웃은 어떻게 처리할지 고민하는 시간이 꽤 길었어요.

이제부터가 진짜! 반응형 처리하기

피그마에서 디자인하던게 익숙했기 때문에 레이아웃을 디자인하면서 프레이머 툴 자체를 익히는데는 시간이 얼마 걸리지 않았어요. 하지만 디자인을 모두 끝냈다고 생각했을 때 미리보기 화면으로 레이아웃이 모두 깨지던 그 공포감이란…

반응형을 위해 그려둔 화면 자체는 문제가 되지 않았지만 각각의 화면이 연결되는 인터렉션이라던가 지정해둔 화면보다 더 크게 키웠을 때, 혹은 최소 화면보다 더 작아졌을 때가 자연스럽지 않았어요. 문제는 요소들마다 신경쓰지 못했던 Position 값과 Size 옵션이 문제였어요.

Figma에서는 볼 수 없는 Position 옵션에서의 Absolute, Relative라던가 Size 옵션에서 Min width/height 값 등을 설정해서 요소들이 반응형에서 어떻게 사이즈와 위치를 가져갈지 설정할 수 있었습니다.

저 기능들이 익숙하지 않다 보니 화면에서 어떻게 보이는지 하나하나 설정을 바꿔보면서 작업을 하느라 시간이 꽤 걸렸었어요. 다행히도 화면이 많지 않기 때문에 메인, 블로그, 상세 화면, 그리고 아직 공개 예정인 3개의 화면까지 더 해서 모든 화면에 반응형이 자연스럽게 변하도록 빠르게 수정할 수 있었어요.

SEO 세팅하기

프레이머의 장점 중 하나가 seo를 손쉽게 관리할 수 있다는 점인데, CMS 페이지에서 콘텐츠 별로 slug를 입력하는 기능과 Page settings을 통해 페이지의 속성을 수정할 수 있어 비교적 쉽게 seo를 세팅할 수 있었습니다.

(자세한 내용은 Framer>seo를 참고할 것을 추천해요.)

프레이머 블로그 배포하기

디자인이 끝났다면, Publish 버튼을 누르자

기본적인 세팅과 디자인, 그리고 콘텐츠까지 작성했다면 Publish 버튼을 누르면 드디어 누구나 볼 수 있는 웹 사이트 형태로 배포가 됩니다! 처음에 설정을 하지 않았다면 프레이머에서 자동 생성된 도메인을 가지게 됩니다.

이후 디자인을 수정했거나 콘텐츠를 추가한 뒤 Publish를 하면 웹 사이트에 바로 반영되지 않는 경험을 하게 되는데요. 이는 Staging 기능이 디폴트로 설정되어 있기 때문이에요.

Staging 기능은 가급적 켜 두는 것을 추천하는데, Publish 이후 실제 내 웹사이트에 최종적으로 반영할지 한 번 더 확인하고 배포할 수 있습니다.

Site settings > Staging & Versions으로 가서 적용하고 싶은 버전 항목(Publish를 했던 히스토리) 중에서 Deploy 버튼을 누르면 그 버전이 Live(실제 웹에 적용)이 되는 방식입니다.

그럼 이렇게 웹을 통해 내가 만든 블로그를 볼 수 있어요!(드디어, 마침내!!!)

Analytics로 방문자 관리하기

배포 이후에는 지속적인 관리를 할 수 있는 툴이 제공되는데요. 프레이머에서 제공하는 analytics를 활용해서 방문자 수를 Unique와 Total count를 구분해서 볼 수도 있고, Top source를 통해 어떤 경로로 들어왔는지 확인할 수 있습니다. 간단하지만 이 정도의 기능으로도 꽤 만족스러웠어요.(유료로 업그레이드하면 더 많은 기능이 있어요.)

마지막으로

지금 막 블로그를 배포하고 기존에 작성해둔 몇 개의 글을 올려본 뒤 제가 프레이머를 통해 블로그를 만든 과정을 간단하게 정리해 보았어요.

프레이머로 만들고 싶었던 블로그는 간단했는데 이 간단한 걸 만들기 위해 유튜브, 구글링 다양한 정보를 서칭했지만 의외로 정보가 없어서 쉽지 않았습니다.

제가 설명한 과정에서 디테일한 디자인 부분은 프레이머 툴 자체를 익히면 어렵지 않고, 디자인은 할 수 있어도 의외로 놓칠 수 있는 부분 위주로 작성해 보았는데요. 혹시나 프레이머로 블로그를 만들기 위해 이 글을 발견한 디자이너라면 조금이나마 도움이 되었길 바랍니다.

그리고 블로그를 만들면서 가장 중요한 것은 결국 ’콘텐츠 작성’임을 잊지 말기로 해요…

콘텐츠가 없어서 디자인한 레이아웃을 아직 제대로 적용하지 못한 1인으로써 아직은 지금의 형태가 아쉬움이 가득하지만, 콘텐츠가 채워지면 처음 의도한 레이아웃이 적용될 수 있기 때문에 앞으로 열심히 글을 써서 올려 보기로 다짐하며 글을 마칩니다. 긴 글 읽어주셔서 감사합니다!