Christine
Aug 1, 2024
·
7
min read
프레이머로 CMS 블로그 만들기
디자이너과 마케터로서 그동안 다양한 도구와 플랫폼을 이용해왔지만, 프레이머만큼 쉽고 편-안하게 느껴지는 노코드 툴이 없다는 생각에, 제가 Framer로 CMS 블로그를 제작한 과정을 공유하고자 합니다. 사업이나 퍼스널 브랜딩을 위해 블로그 운영이 필요한 크리에이터분들은 참고하시면 좋을 것 같아요.
저는 피그마와 워드프레스를 위주로 디자인 작업을 했었고, 최근에 프레이머로 넘어오게 되었는데요, 프레이머로 넘어오게 된 강력한 이유 세가지를 꼽아보게요.
피그마로 작업한 디자인을 프레이머로 쉽게 옮겨올 수 있다는 점
워드프레스보다 CMS 기능이 훨씬 편리하다는 점
콘텐츠 상위노출을 위한 SEO 최적화에 특화된 툴이라는 점
그리고 마지막으로, 제일 중요한 점은 누구나 손쉽게 제법 괜찮은 블로그나 홈페이지를 제작할 수 있다는 점이에요. 이대로만 하면 나만의 블로그를 손쉽게 만들 수 있어요.
프레이머란?
Framer는 원래 프로토타이핑 도구로 시작했지만, 최근에는 웹사이트 빌더로 기능을 확장했습니다. 노코드로 인터랙션을 쉽게 구현할 수 있으며, 특히 디자이너나 기획자가 다루기에도 굉장히 직관적이에요. 게다가 CMS 기능이 추가되면서 이제는 블로그나 웹사이트 제작도 쉽게 할 수 있게 되었습니다.
CMS(Content Management System: 콘텐츠 관리 시스템)는 개발자의 코딩 없이도 디자인 레이아웃을 구성하고 게시판이나 블로그 콘텐츠, 데이터를 쉽게 관리할 수 있게 해주는 웹사이트 제작을 위한 일종의 툴로, 시간과 비용을 절약하면서도 높은 품질의 웹사이트를 제작할 수 있게 해줍니다.
1. 프레이머 설치하기
먼저, Framer 사이트에 가서 우측 상단의 Start up for free 버튼을 클릭하고, 구글 계정으로 가입을 진행합니다. 프레이머 앱을 설치하셔도 되고, 그냥 웹에서 사용하셔도 아무런 무리가 없습니다. (저는 Export 기능이 웹에서는 작동을 하지 않기 때문에, 앱을 설치해 사용하고 있습니다.)
프레이머는 무료 플랜 이용 시에는 오히려 CMS 기능에 제한이 없는데, 유료 플랜을 결제하는 순간! 생성 가능한 CMS Collection 개수가 제한됩니다. 참고하셔요!
| 참고 링크 | 프레이머 웹사이트 | 프레이머 앱 설치 |
2. 원하는 템플릿 선택하기
프레이머의 Market Place에 들어가서 Blog탭을 선택합니다. 디폴트로 설정된 Paid+Free 를 Free로 바꿔주고, 무료 템플릿 중에서 가장 마음에 드는 디자인과 기능을 가진 템플릿을 선택합니다.
| 참고 링크 | 프레이머 마켓 플레이스(템플릿) | 프레이머 무료 블로그 템플릿
저는 저와 비슷한 포지션의 a freelance product designer의 블로그 템플릿을 선택했어요.
Use for free 버튼을 누르면, 창이 하나 뜨고 거기서 Copy project to my account 버튼을 누르면, 내 계정에 템플릿이 복사되어 새로운 프로젝트가 하나 생성이 됩니다. 프레이머가 좋은 점은 Desktop, Tablet, Mobile 각 디바이스별로 반응형 디자인이 가능한 기능이 탑재되어 있어요.
저는 심플한 블로그를 만들고 싶어서, 카피한 템플릿에서 필요한 부분만 남겨두고, 레이어 창에서 지울 건 모두 지웠습니다. 네비게이션 영역, 상단의 헤드 영역, 하단의 푸터 영역, 그리고 블로그 글을 올릴 CMS 영역만 남겨두고 모두 지운 채 커스텀을 하였습니다.
3. 원하는 폰트 설치하기
대부분의 프레이머 템플릿은 해외 제작자들이 만들어 올렸기 때문에 영문 폰트로 제작되어 있어요. 그래서, 블로그 글 작성 시 한글 폰트를 읽기 편안하게 적용하려면, 내가 원하는 폰트를 설치해 사용하는 것이 좋습니다.
저는 기존에 제 컴퓨터에 다운받아 둔 Pretendard 폰트가 있어서, 내 프레이머 계정 대쉬보드의 My Workspace로 가서 좌측의 두번째 메뉴 Settings에서 Fonts로 들어가 +Uplaod 버튼을 눌러 Pretendard 파일을 선택하여 바로 업로드 시켰지만, 새로 폰트를 설치해서 사용하고 싶으신 분은 무료 폰트 사이트에서 원하는 폰트를 다운받은 후, 동일하게 진행해주세요.
| 참고 링크 | 한글 무료 폰트 다운로드 | Pretendard 폰트 다운로드 |
4. CMS 블로그 제작하기
이제 블로그 콘텐츠를 만들기 위해 제일 중요한 CMS 부분입니다. 좌측 상단의 CMS 버튼을 누르면, 이미 디폴트로 생성된 CMS Collection의 5개 블로그 콘텐츠가 떠있을 겁니다. 좌측 상단의 Edit Fields 를 누르거나 혹은, 블로그 콘텐츠 중에 하나를 선택하여 들어간 후, 우측 상단의 … 을 누르고 Edit Fields를 누르면 내가 원하는 대로 블로그 콘텐츠를 구성할 수 있습니다.
블로그 콘텐츠에 한글 폰트를 적용하기 위해, Pages의 Blog 페이지로 들어간 후, 좌측에서 세번째 버튼 Asset에서 기존에 지정된 폰트 Style을 Inter 서체에서 Pretendard 서체로 바꿔줍니다.
SEO 최적화를 위해 블로그 콘텐츠의 tag 설정이 중요합니다.(이부분이 중요한 만큼, CMS로 SEO 최적화하는 방법은 따로 콘텐츠를 만들어 올려볼게요!) Blog 페이지에서 제목과 소제목 등의 H tag를 잘 적용해준 후, 각 Text마다 +Content의 +버튼을 눌러 연동하고 싶은 CMS Field를 연결해주세요.
내가 원하는 레이아웃과 콘텐츠 구성으로 CMS 세팅이 완성되면, 이제 블로그 콘텐츠를 작성한 후, 퍼블리싱하는 일만 남았습니다.
5. 원하는 도메인 설정하기
마지막으로, 내가 만든 블로그 사이트를 발행시켜봅시다. 프레이머는 사이트 퍼블리시를 하면 무료 URL을 생성해주는데, 여기서 부여받게 되는 URL은 랜덤입니다.
제가 Publish 버튼을 눌렀을 때 최초 부여받은 Base Domain은 https://many-footprint-456099.framer.app으로 영문과 숫자가 마구 조합된 형태였지만, 내가 원하는 주소로도 발행이 가능합니다.
저는 제가 운영하는 디자인 에이전시 '캄앤칠(Calm and Chill)'의 브랜드 네이밍을 사용하고 싶어, 우측 상단의 수레바퀴 버튼을 눌러, Setting 화면에 들어가서 좌측의 두번째 메뉴 Domain에서 Custom Domain을 내가 바꾸고 싶은 calmandchill로 입력해주었어요. 그런 다음 오른쪽 체크박스를 누르면, 자! 이렇게 무료로 제가 원하는 이름의 도메인을 가질 수 있어요.
만약 기존에 구입해둔 도메인 주소가 있거나, 새로 도메인을 사서 등록하고 싶다면 프레이머 유료 플랜으로 업그레이드한 후 직접 구매한 도메인으로 설정이 가능합니다.
마무리
여기까지 오셨다면, '프레이머로 나만의 블로그 만들기' 미션 컴플리트!
하지만, 제가 글의 제목을 [프레이머로 CMS 블로그 쉽게 만드는 법]이라고 정했을 때는, 나름의 이유가 있어요.
블로그는 내가 쓴 콘텐츠가 구글과 같은 검색엔진에서 상위 노출되어 사람들의 많은 유입을 끌어오는 것이 중요합니다. 그래서, 프레이머의 CMS 기능을 활용하여 SEO 최적화하는 것이 필요해요. 6번은 따로 떼어서 차후 블로그 글에서 자세히 다뤄보도록 할게요.
프레이머로 CMS 블로그 쉽게 만드는 법
프레이머 설치하기
원하는 템플릿 선택하기
원하는 폰트 설치하기
CMS 블로그 제작하기
원하는 도메인 설정하기
프레이머에서 CMS로 웹사이트를 만드는 것을 어렵지 않아요. 피그마로 컴포넌트 생성이나 오토 레이아웃 등으로 디자인을 해보신 경험이 있다면 프레이머에 훨씬 금방 적응하실테고, 코딩과 개발 지식이 있으면 아무래도 도움이 되지만, 프레이머에 워낙 좋은 템플릿이 많아서, 잘만 활용한다면 누구나 손쉽게 뚝딱 나만의 제법 근사한 사이트를 만들 수 있어요.
기나긴 글을 읽어 주셔서 감사드리고, 프레이머로 사이트 제작을 하게 된 경험을 나누고 싶었고, 제가 아는 선에서 알려드리고 싶은 내용을 전하고자 주저리 주저리 써보았습니다. 그럼, 다음 글에서 만나요!
프레이머 홈페이지 제작 의뢰서: https://tally.so/r/mOVGWA
